/* Arovelo inner pages: About & Contact, Destinations, Services and service detail pages.
   Loaded after style.css and reuses its tokens, buttons, header, hero, FAQ, contact and footer. */

:root {
  --grey: #F3F5F7;
  --grey-line: rgba(5, 44, 83, 0.08);
  --muted: #5B6B7A;
  --muted-2: #94A1AE;
  --sec-gap: clamp(4rem, 8vw, 6.5rem);
}

/* ---------- Page hero: same design as the homepage hero, a little shorter ---------- */
.hero--page { min-height: 88vh; min-height: 88svh; }
.hero--page .hero__left { max-width: 36rem; }
.hero--page .hero__media img { object-position: 50% 50%; }
.hero--page .hero__shade {
  background:
    linear-gradient(180deg, rgba(3, 29, 57, 0.35) 0%, rgba(5, 44, 83, 0) 30%, rgba(3, 29, 57, 0.82) 100%),
    linear-gradient(90deg, rgba(3, 29, 57, 0.6) 0%, rgba(3, 29, 57, 0) 65%);
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--white-70);
}
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }
.crumbs a { transition: color 0.3s; }
.crumbs a:hover { color: var(--white); }
.crumbs [aria-current] { color: var(--white); }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 2rem; }
.hero__countries a { display: block; transition: color 0.3s; }
.hero__countries li { transition: background-color 0.3s, border-color 0.3s; }
.hero__countries li:has(a:hover) { background: var(--white); border-color: var(--white); color: var(--navy); }

/* ---------- Sections ---------- */
.sec { position: relative; padding: 0 0 var(--sec-gap); background: var(--white); }
.sec--first { padding-top: var(--sec-gap); }
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.sec-head__aside { margin: 0; max-width: 22rem; font-size: 1rem; line-height: 1.55; color: var(--muted); text-align: right; }
.sec-head--center { flex-direction: column; align-items: center; gap: 0; text-align: center; }
.sec-head--center .section-title { max-width: 16em; }
.sec-head--center .section-lead { margin-inline: auto; }
.section-title--sm { font-size: clamp(1.9rem, 3.4vw, 3rem); }

/* Round arrow used on cards */
.arrow-dot {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.arrow-dot svg { width: 1.05rem; height: 1.05rem; transition: transform 0.4s var(--ease); }
.arrow-dot--navy { background: var(--navy); color: var(--white); }

/* Small icon tile */
.icon-tile {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 0.8rem;
  background: var(--navy);
  color: var(--white);
}
.icon-tile svg { width: 1.3rem; height: 1.3rem; }
.icon-tile--teal { background: var(--teal); }

/* ---------- Statement (About): words colour in as you scroll ---------- */
.statement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: 2rem; }
.statement__text {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.statement__text .w { color: #C9D1D9; }
.no-js-anim .statement__text .w { color: inherit; }

/* ---------- Bento (About): story photo + mission + vision ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(14rem, auto));
  gap: 0.875rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.bento__story {
  position: relative;
  grid-column: span 7;
  grid-row: span 2;
  min-height: 30rem;
  border-radius: 1.5rem;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
}
.bento__story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.bento__story::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(3, 29, 57, 0) 35%, rgba(3, 29, 57, 0.88) 100%);
}
.bento__story-body { position: absolute; left: 1.75rem; right: 1.75rem; bottom: 1.75rem; max-width: 34rem; }
.bento__title { margin: 0; font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 500; letter-spacing: -0.02em; }
.bento__story p { margin: 0.6rem 0 0; font-size: 0.98rem; line-height: 1.55; color: rgba(255, 255, 255, 0.82); }
.bento__card {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.75rem;
  border-radius: 1.5rem;
  background: var(--grey);
}
.bento__card p { margin: 0.6rem 0 0; max-width: 26rem; font-size: 0.98rem; line-height: 1.55; color: var(--muted); }
.bento__card .bento__title { color: var(--navy); }
.bento__card--navy {
  background:
    radial-gradient(110% 90% at 100% 100%, rgba(7, 121, 186, 0.25) 0%, rgba(7, 121, 186, 0) 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--white);
}
.bento__card--navy .bento__title { color: var(--white); }
.bento__card--navy p { color: rgba(255, 255, 255, 0.75); }
.bento__card--navy .icon-tile { background: var(--gold); color: var(--navy); }

/* ---------- Stats row (dashed rules, as in the reference) ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.stat__num {
  display: block;
  padding-bottom: 1rem;
  border-bottom: 1px dashed rgba(5, 44, 83, 0.25);
  font-size: clamp(2.6rem, 5vw, 4.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--navy);
}
.stat__num sup { display: inline-block; margin-right: 0.12em; font-size: clamp(0.85rem, 1.5vw, 1.3rem); font-weight: 600; letter-spacing: 0; line-height: 1; color: var(--teal); vertical-align: top; position: relative; top: 0.35em; }
.stat__label { display: block; margin-top: 1rem; font-size: 1rem; font-weight: 600; color: var(--navy); }
.stat__text { display: block; margin-top: 0.35rem; max-width: 16rem; font-size: 0.88rem; line-height: 1.5; color: var(--muted); }

/* ---------- Values panel (grey panel with white cards) ---------- */
.panel { padding: clamp(2rem, 5vw, 4rem); border-radius: 1.75rem; background: var(--grey); }
.panel__statement {
  margin: 1.5rem 0 0;
  max-width: 24em;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-top: clamp(2rem, 4vw, 3rem); }
.value {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3.5rem;
  min-height: 15rem;
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: var(--white);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.value:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -30px rgba(5, 44, 83, 0.35); }
.value:hover .icon-tile { background: var(--teal); }
.value .icon-tile { transition: background-color 0.4s var(--ease); }
.value__title { margin: 0; font-size: 1.2rem; font-weight: 500; letter-spacing: -0.02em; color: var(--navy); }
.value__text { margin: 0.45rem 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--muted); }

/* ---------- Team: curved portrait gallery (cards turn towards the centre) ---------- */
.curve {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  overflow: hidden;
  perspective: 1400px;
  padding: 2rem 0;
}
.curve__track { display: flex; justify-content: center; gap: 1rem; will-change: transform; }
.curve__card {
  flex: none;
  width: clamp(10rem, 15vw, 13.5rem);
  margin: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}
.curve__media { aspect-ratio: 3 / 4; border-radius: 1.25rem; overflow: hidden; background: var(--grey); }
.curve__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.curve__role { display: block; margin-top: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 500; color: var(--navy); }
.curve__role small { display: block; font-size: 0.8rem; font-weight: 400; color: var(--muted-2); }
.team-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.team-point { padding: 0 2rem; text-align: center; }
.team-point + .team-point { border-left: 1px solid var(--grey-line); }
.team-point h3 { margin: 0; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; color: var(--navy); }
.team-point p { margin: 0.5rem auto 0; max-width: 20rem; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }

/* ---------- Why (map card, two stacked cards, photo card) ---------- */
.why { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0.875rem; }
.why__map,
.why__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.75rem;
  border-radius: 1.5rem;
  background: var(--grey);
  overflow: hidden;
  isolation: isolate;
}
.why__map { min-height: 26rem; }
.why__map::before {
  content: "";
  position: absolute;
  inset: 1.5rem 1.5rem auto;
  height: 60%;
  z-index: -1;
  background: url("../images/world-dots.png") no-repeat 50% 0 / contain;
  mix-blend-mode: multiply;
  opacity: 0.16;
}
.why__stack { display: grid; gap: 0.875rem; }
.why__card { justify-content: space-between; gap: 1.5rem; }
.why h3 { margin: 0; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; color: var(--navy); }
.why p { margin: 0.5rem 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--muted); }
.why__flags { display: flex; }
.why__flags span {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: -0.5rem;
  border: 2px solid var(--grey);
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 600;
}
.why__flags span:nth-child(even) { background: var(--teal); }
.why__flags span:last-child { background: var(--gold); color: var(--navy); }

/* Photo card with a call to action (same family as the homepage how-cta) */
.photo-cta {
  position: relative;
  display: block;
  min-height: 26rem;
  border-radius: 1.5rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
  color: var(--white);
}
.photo-cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.9s var(--ease); }
.photo-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(3, 29, 57, 0) 40%, rgba(3, 29, 57, 0.85) 100%);
}
.photo-cta__text { position: absolute; left: 1.75rem; right: 5.5rem; bottom: 1.75rem; display: grid; gap: 0.4rem; }
.photo-cta__title { font-size: clamp(1.3rem, 1.7vw, 1.5rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
.photo-cta__meta { font-size: 0.88rem; color: var(--gold); font-weight: 500; }
.photo-cta .arrow-dot { position: absolute; right: 1.5rem; bottom: 1.5rem; width: 3rem; height: 3rem; }
.photo-cta:hover img { transform: scale(1.06); }
.photo-cta:hover .arrow-dot { background: var(--teal); color: var(--white); }
.photo-cta:hover .arrow-dot svg { transform: rotate(45deg); }
.photo-cta:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------- Partner (navy card + form) ---------- */
.partner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0.875rem; }
.partner__intro {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border-radius: 1.75rem;
  background:
    radial-gradient(110% 80% at 0% 100%, rgba(214, 180, 106, 0.22) 0%, rgba(214, 180, 106, 0) 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--white);
}
.partner__intro .tag-pill { align-self: flex-start; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.16); color: var(--white); }
.partner__title { margin: 1.5rem 0 0; font-size: clamp(1.9rem, 3.2vw, 2.75rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; }
.partner__lead { margin: 1rem 0 0; max-width: 28rem; font-size: 1rem; line-height: 1.55; color: rgba(255, 255, 255, 0.75); }
.partner__list { display: grid; gap: 0.5rem; margin: auto 0 0; padding: 2.5rem 0 0; list-style: none; }
.partner__list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.95rem;
}
.partner__list svg { width: 1.1rem; height: 1.1rem; color: var(--gold); flex: none; }
.partner__form {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 1.75rem;
  background: var(--white);
  border: 1px solid var(--grey-line);
}
.choice { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; border: 0; }
.choice legend { margin-bottom: 0.35rem; padding: 0; font-size: 0.85rem; font-weight: 600; color: var(--navy); }
.choice label { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: inline-block;
  padding: 0.55rem 0.95rem;
  border-radius: var(--pill);
  background: var(--grey);
  border: 1px solid transparent;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.choice span:hover { border-color: rgba(7, 121, 186, 0.4); }
.choice input:checked + span { background: var(--navy); color: var(--white); }
.choice input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Destinations: reach stats + map ---------- */
.reach-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.reach-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.75rem;
  padding: 1.25rem 1.4rem 1.4rem;
  border-radius: 1.25rem;
  background: var(--grey);
}
.reach-card__top { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.reach-card__top svg { width: 1.15rem; height: 1.15rem; color: var(--teal); }
.reach-card__num { font-size: clamp(2.6rem, 4.6vw, 4rem); font-weight: 500; line-height: 1; letter-spacing: -0.05em; color: var(--navy); }
.reach-card__num sup { font-size: 0.45em; color: var(--teal); vertical-align: top; position: relative; top: 0.1em; }

.map { position: relative; margin-top: 0.875rem; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem) 0; border-radius: 1.75rem; background: var(--grey); overflow: hidden; }
.map__canvas { position: relative; max-width: 62rem; margin: 0 auto; aspect-ratio: 980 / 550; }
.map__canvas img { width: 100%; height: 100%; mix-blend-mode: multiply; opacity: 0.22; }
.pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
.pin__dot {
  position: absolute;
  left: -0.45rem;
  top: -0.45rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px var(--white);
  transition: transform 0.3s var(--ease), background-color 0.3s;
}
.pin__dot::after {
  content: "";
  position: absolute;
  inset: -0.45rem;
  border-radius: 50%;
  border: 2px solid var(--teal);
  animation: pinPulse 2.2s var(--ease) infinite;
}
@keyframes pinPulse {
  0% { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}
.pin__label {
  position: absolute;
  left: 0.9rem;
  top: -0.85rem;
  padding: 0.3rem 0.65rem;
  border-radius: var(--pill);
  background: var(--navy);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.4s var(--ease);
}
.pin--left .pin__label { left: auto; right: 0.9rem; transform: translateX(6px); }
.pin:hover .pin__label, .pin.is-on .pin__label, .pin:focus-visible .pin__label { opacity: 1; transform: none; }
.pin:hover .pin__dot, .pin.is-on .pin__dot { transform: scale(1.35); background: var(--gold); }
.pin:focus-visible { outline: none; }
.map__panel {
  position: relative;
  z-index: 2;
  margin: -4.5rem auto clamp(1rem, 2.5vw, 1.75rem);
  max-width: 62rem;
  padding: 1.5rem 1.75rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px -36px rgba(5, 44, 83, 0.45);
}
.map__panel-title { margin: 0 0 1rem; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -0.03em; color: var(--navy); }
.map__regions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.map__region h3 { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.map__region ul { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.map__region a { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.95rem; color: var(--navy); transition: color 0.3s; }
.map__region a::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; border: 1.5px solid currentColor; transition: background-color 0.3s; }
.map__region a:hover, .map__region a.is-on { color: var(--teal); }
.map__region a:hover::before, .map__region a.is-on::before { background: currentColor; }

/* ---------- Destinations: filter chips + country cards ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.filter {
  padding: 0.65rem 1.1rem;
  border: 1px solid rgba(5, 44, 83, 0.12);
  border-radius: var(--pill);
  background: var(--white);
  font-size: 0.9rem;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.filter:hover { border-color: var(--navy); color: var(--navy); }
.filter.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.filter:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.filter small { margin-left: 0.3rem; opacity: 0.6; }

.countries { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.875rem; }
.country {
  display: flex;
  flex-direction: column;
  border-radius: 1.5rem;
  background: var(--grey);
  overflow: hidden;
  scroll-margin-top: 2rem;
  transition: box-shadow 0.5s var(--ease);
}
.country[hidden] { display: none; }
.country__media { position: relative; aspect-ratio: 4 / 3; margin: 0.4rem 0.4rem 0; border-radius: 1.2rem; overflow: hidden; }
.country__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.country__region {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--navy);
}
.country__body { display: flex; flex-direction: column; flex: 1; gap: 0.9rem; padding: 1.1rem 1.25rem 1.25rem; }
.country__name { margin: 0; font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em; color: var(--navy); }
.country__cities { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.25rem; font-size: 0.88rem; color: var(--muted); }
.country__cities svg { width: 0.95rem; height: 0.95rem; color: var(--teal); flex: none; }
.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.tags li { padding: 0.3rem 0.65rem; border-radius: var(--pill); background: var(--white); font-size: 0.75rem; font-weight: 500; color: var(--navy); }
.country__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 0.25rem; }
.country__link { font-size: 0.9rem; font-weight: 600; color: var(--navy); }
.country .arrow-dot { width: 2.5rem; height: 2.5rem; background: var(--navy); color: var(--white); }
.country:hover { box-shadow: 0 30px 60px -40px rgba(5, 44, 83, 0.5); }
.country:hover .country__media img { transform: scale(1.06); }
.country:hover .arrow-dot { background: var(--teal); }
.country:hover .arrow-dot svg { transform: rotate(45deg); }

/* "Other destinations" wide navy card */
.other {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
  gap: 2rem;
  margin-top: 0.875rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border-radius: 1.75rem;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(7, 121, 186, 0.28) 0%, rgba(7, 121, 186, 0) 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--white);
  scroll-margin-top: 2rem;
}
.other__title { margin: 0; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; }
.other__text { margin: 1rem 0 0; max-width: 30rem; font-size: 1rem; line-height: 1.55; color: rgba(255, 255, 255, 0.75); }
.other__side { display: grid; justify-items: end; gap: 1.5rem; }
.other .tags { justify-content: flex-end; }
.other .tags li { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--white); }

/* ---------- Compare table ---------- */
.table-wrap { border-radius: 1.5rem; background: var(--grey); padding: 0.4rem; overflow-x: auto; }
.compare { width: 100%; min-width: 52rem; border-collapse: separate; border-spacing: 0; background: var(--white); border-radius: 1.2rem; overflow: hidden; }
.compare th, .compare td { padding: 1rem 1.25rem; text-align: left; font-size: 0.92rem; line-height: 1.45; vertical-align: top; }
.compare thead th { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--grey-line); }
.compare tbody th { font-weight: 600; color: var(--navy); white-space: nowrap; }
.compare tbody th span { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-right: 0.65rem; border-radius: 50%; background: var(--navy); color: var(--white); font-size: 0.68rem; letter-spacing: 0.04em; }
.compare td { color: var(--muted); }
.compare tbody tr + tr > * { border-top: 1px solid var(--grey-line); }
.compare tbody tr { transition: background-color 0.3s; }
.compare tbody tr:hover { background: rgba(7, 121, 186, 0.05); }
.table-note { margin: 0.9rem 0 0; font-size: 0.82rem; color: var(--muted-2); }

/* ---------- Wide image band with a call to action ---------- */
.band {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 24rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: 1.75rem;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
}
.band__bg { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; z-index: -2; }
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(3, 29, 57, 0.85) 0%, rgba(3, 29, 57, 0.35) 60%, rgba(3, 29, 57, 0.1) 100%);
}
.band__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.band__title { margin: 0; max-width: 14em; font-size: clamp(2rem, 3.8vw, 3.25rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.04em; }
.band__text { margin: 1rem 0 0; max-width: 30rem; font-size: 1.02rem; line-height: 1.55; color: rgba(255, 255, 255, 0.78); }

/* ---------- Services: intro cards ---------- */
.areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.875rem; }
.area {
  display: flex;
  flex-direction: column;
  min-height: 17rem;
  padding: 1.4rem;
  border-radius: 1.25rem;
  border: 1px solid var(--grey-line);
  background: var(--white);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.5s var(--ease);
}
.area__name { font-size: 1.05rem; font-weight: 600; color: var(--navy); }
.area__icon { display: grid; place-items: center; flex: 1; color: #B7C1CB; transition: color 0.4s var(--ease), transform 0.6s var(--ease); }
.area__icon svg { width: 4.25rem; height: 4.25rem; }
.area__text { font-size: 0.88rem; line-height: 1.5; color: var(--muted); }
.area:hover { background: var(--grey); border-color: var(--grey); transform: translateY(-4px); }
.area:hover .area__icon { color: var(--teal); transform: scale(1.08); }
.area:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Services: stacked pillar cards (pinned one over the other) ---------- */
.stack { display: grid; gap: 1.25rem; }
.stack__card {
  position: sticky;
  top: calc(2rem + var(--i, 0) * 1.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  min-height: min(38rem, 82vh);
  padding: 0.6rem;
  border-radius: 1.75rem;
  background: var(--grey);
  border: 1px solid var(--grey-line);
  transform-origin: 50% 0;
  scroll-margin-top: 2rem;
}
.stack__media { position: relative; border-radius: 1.3rem; overflow: hidden; min-height: 18rem; }
.stack__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stack__num {
  position: absolute;
  left: 1rem;
  top: 1rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
}
.stack__body { display: flex; flex-direction: column; padding: clamp(1rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.75rem) clamp(1rem, 2vw, 1.5rem) 0; }
.stack__title { margin: 0; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: var(--navy); }
.stack__text { margin: 1rem 0 0; max-width: 30rem; font-size: 1rem; line-height: 1.55; color: var(--muted); }
.svc-list { display: grid; margin: 1.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--grey-line); }
.svc-list li { border-bottom: 1px solid var(--grey-line); }
.svc-list a, .svc-list span.svc-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0.25rem;
  font-size: 0.98rem;
  color: var(--navy);
}
.svc-list small { display: block; font-size: 0.8rem; color: var(--muted-2); }
.svc-list a svg { width: 1rem; height: 1rem; flex: none; color: var(--teal); transition: transform 0.4s var(--ease); }
.svc-list a { transition: padding 0.4s var(--ease), color 0.3s; }
.svc-list a:hover { padding-left: 0.75rem; color: var(--teal); }
.svc-list a:hover svg { transform: rotate(45deg); }
.svc-list .is-new {
  margin-left: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--pill);
  background: rgba(7, 121, 186, 0.12);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--teal-dark);
  vertical-align: middle;
}
.stack__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: auto; padding-top: 1.75rem; }
.stack__meta { font-size: 0.85rem; color: var(--muted); }

/* ---------- Process: line fills as you scroll ---------- */
.process { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.process__line { position: absolute; left: 0; right: 0; top: 1.5rem; height: 2px; background: var(--grey); }
.process__line span { position: absolute; inset: 0; background: linear-gradient(90deg, var(--teal), var(--gold)); transform-origin: 0 50%; transform: scaleX(0); }
.process__step { position: relative; }
.process__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--grey);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  transition: background-color 0.4s, border-color 0.4s, color 0.4s;
}
.process__step.is-on .process__dot { background: var(--navy); border-color: var(--navy); color: var(--white); }
.process__step h3 { margin: 1.5rem 0 0; font-size: 1.2rem; font-weight: 500; letter-spacing: -0.02em; color: var(--navy); }
.process__step p { margin: 0.5rem 0 0; max-width: 17rem; font-size: 0.92rem; line-height: 1.55; color: var(--muted); }

/* ---------- Packages teaser (featured card + rows) ---------- */
.teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 1.75rem; background: var(--grey); }
.teaser__plans { display: grid; gap: 0.6rem; }
.teaser__featured {
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: linear-gradient(150deg, var(--teal) 0%, var(--teal-dark) 100%);
  color: var(--white);
  box-shadow: 0 30px 60px -36px rgba(18, 133, 133, 0.8);
}
.teaser__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.teaser__badge { display: inline-block; padding: 0.3rem 0.7rem; border-radius: var(--pill); background: rgba(255, 255, 255, 0.2); font-size: 0.75rem; font-weight: 500; }
.teaser__name { margin: 0.75rem 0 0; font-size: 1.8rem; font-weight: 500; letter-spacing: -0.03em; }
.teaser__price { font-size: 1.8rem; font-weight: 500; letter-spacing: -0.03em; white-space: nowrap; }
.teaser__price small { font-size: 0.85rem; font-weight: 400; opacity: 0.8; }
.teaser__featured .tags { margin-top: 1rem; }
.teaser__featured .tags li { background: rgba(255, 255, 255, 0.16); color: var(--white); }
.teaser__go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--pill);
  background: var(--navy);
  font-size: 0.88rem;
  font-weight: 500;
  transition: background-color 0.3s, color 0.3s;
}
.teaser__go svg { width: 0.95rem; height: 0.95rem; }
.teaser__go:hover { background: var(--white); color: var(--navy); }
.teaser__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 1.1rem;
  background: var(--white);
  transition: transform 0.4s var(--ease);
}
.teaser__row:hover { transform: translateX(6px); }
.teaser__row-name { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; color: var(--navy); }
.teaser__row-name small { display: block; font-size: 0.82rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.teaser__row-cta { padding: 0.45rem 0.9rem; border-radius: var(--pill); background: var(--grey); font-size: 0.82rem; font-weight: 500; color: var(--navy); white-space: nowrap; transition: background-color 0.3s, color 0.3s; }
.teaser__row:hover .teaser__row-cta { background: var(--navy); color: var(--white); }

/* ---------- Service detail: intro split + feature cards ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; }
.split__text { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--muted); }
.split__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.price-note { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--muted); }
.price-note b { padding: 0.25rem 0.6rem; border-radius: var(--pill); background: rgba(214, 180, 106, 0.18); color: #8A6D2C; font-weight: 600; }
.feature { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 0.875rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.feature .bento__story { grid-column: 1; grid-row: span 2; min-height: 28rem; }
.feature .bento__card { grid-column: 2; }
.ticks { display: grid; gap: 0.55rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.ticks li { display: flex; gap: 0.6rem; font-size: 0.95rem; line-height: 1.45; color: var(--navy); }
.ticks svg { width: 1.1rem; height: 1.1rem; margin-top: 0.12rem; flex: none; color: var(--teal); }
.bento__card--navy .ticks li { color: var(--white); }
.bento__card--navy .ticks svg { color: var(--gold); }

/* ---------- Service detail: tiles + navy CTA card ---------- */
.tiles { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0.875rem; }
.tiles__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; }
.tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: 11rem;
  padding: 1.25rem;
  border-radius: 1.25rem;
  border: 1px solid var(--grey-line);
  background: var(--white);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.tile svg { width: 2rem; height: 2rem; color: var(--teal); transition: color 0.4s var(--ease); }
.tile__title { margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--navy); transition: color 0.4s var(--ease); }
.tile__text { margin: 0.3rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--muted); transition: color 0.4s var(--ease); }
.tile:hover { background: var(--teal); border-color: var(--teal); }
.tile:hover svg, .tile:hover .tile__title { color: var(--white); }
.tile:hover .tile__text { color: rgba(255, 255, 255, 0.85); }
.cta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 22.75rem;
  padding: 1.75rem;
  border-radius: 1.5rem;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.cta-card::before {
  content: "";
  position: absolute;
  right: -20%;
  bottom: -30%;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(7, 121, 186, 0.45) 0%, rgba(7, 121, 186, 0) 65%);
  z-index: -1;
  transition: transform 0.8s var(--ease);
}
.cta-card__title { margin: 0; max-width: 10em; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; }
.cta-card__text { margin: 0.9rem 0 0; max-width: 20rem; font-size: 0.95rem; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }
.cta-card__arrow {
  align-self: flex-end;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1.1rem;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.cta-card__arrow svg { width: 2rem; height: 2rem; transition: transform 0.5s var(--ease); }
.cta-card:hover::before { transform: scale(1.3); }
.cta-card:hover .cta-card__arrow { background: var(--gold); color: var(--navy); }
.cta-card:hover .cta-card__arrow svg { transform: rotate(45deg); }
.cta-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------- Service detail: routes by country (tabs) ---------- */
.tabs { display: flex; gap: 0.4rem; margin: 0 0 1.25rem; padding: 0 0 0.25rem; list-style: none; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem 0.45rem 0.45rem;
  border: 1px solid rgba(5, 44, 83, 0.12);
  border-radius: var(--pill);
  background: var(--white);
  font-size: 0.9rem;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.tab span { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--grey); font-size: 0.66rem; font-weight: 600; color: var(--navy); transition: background-color 0.3s, color 0.3s; }
.tab:hover { border-color: var(--navy); color: var(--navy); }
.tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.tab[aria-selected="true"] span { background: var(--teal); color: var(--white); }
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.routes { padding: 0.4rem; border-radius: 1.75rem; background: var(--grey); }
.routes__panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.routes__panel[hidden] { display: none; }
.route {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: 15rem;
  padding: 1.5rem;
  border-radius: 1.35rem;
  background: var(--white);
}
.route__type { align-self: flex-start; padding: 0.3rem 0.7rem; border-radius: var(--pill); background: var(--grey); font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.route__name { margin: 0; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; color: var(--navy); }
.route__text { margin: 0.5rem 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--muted); }
.route__for { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; font-size: 0.85rem; font-weight: 500; color: var(--navy); }
.route__for svg { width: 1rem; height: 1rem; color: var(--teal); }

/* ---------- Service detail: vertical timeline (line fills while scrolling) ---------- */
.timeline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(2rem, 6vw, 6rem); }
.timeline__head { position: sticky; top: 3rem; align-self: start; }
.timeline__steps { position: relative; margin: 0; padding: 0 0 0 4.5rem; list-style: none; }
.timeline__rail { position: absolute; left: 1.45rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--grey); }
.timeline__rail span { position: absolute; inset: 0; background: linear-gradient(180deg, var(--teal), var(--gold)); transform-origin: 50% 0; transform: scaleY(0); }
.timeline__step { position: relative; padding-bottom: 3rem; }
.timeline__step:last-child { padding-bottom: 0; }
.timeline__step .process__dot { position: absolute; left: -4.5rem; top: -0.4rem; }
.timeline__step.is-on .process__dot { background: var(--navy); border-color: var(--navy); color: var(--white); }
.timeline__step h3 { margin: 0; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; color: var(--navy); }
.timeline__step p { margin: 0.5rem 0 0; max-width: 30rem; font-size: 0.98rem; line-height: 1.6; color: var(--muted); }
.timeline__when { display: inline-block; margin-top: 0.75rem; padding: 0.3rem 0.7rem; border-radius: var(--pill); background: var(--grey); font-size: 0.78rem; font-weight: 500; color: var(--navy); }

/* ---------- Service detail: checklist + photo ---------- */
.docs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.875rem; }
.docs__card { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 1.5rem; background: var(--grey); }
.docs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.docs__list li { display: flex; align-items: center; gap: 0.65rem; padding: 0.85rem 1rem; border-radius: 0.9rem; background: var(--white); font-size: 0.92rem; color: var(--navy); }
.docs__list svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--teal); }
.docs__photo { position: relative; min-height: 24rem; border-radius: 1.5rem; overflow: hidden; }
.docs__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.docs__float {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--navy);
}
.docs__float b { display: block; }

/* ---------- Related services ---------- */
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; }
.related .pillar { aspect-ratio: 4 / 3.6; }

/* ---------- Reveal helpers (pages.js sets the start state) ---------- */
.clip-reveal { overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .sec-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .sec-head__aside { text-align: left; max-width: 32rem; }
  .sec-head--center { align-items: center; }
  .statement { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
  .bento__story { grid-column: 1 / -1; grid-row: auto; min-height: 24rem; }
  .bento__card { grid-column: span 1; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .why .photo-cta { grid-column: 1 / -1; min-height: 22rem; }
  .partner { grid-template-columns: minmax(0, 1fr); }
  .reach-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map__regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .countries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .other { grid-template-columns: minmax(0, 1fr); }
  .other__side { justify-items: start; }
  .other .tags { justify-content: flex-start; }
  .band__inner { flex-direction: column; align-items: flex-start; }
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stack__card { grid-template-columns: minmax(0, 1fr); min-height: 0; position: relative; top: auto; }
  .stack__media { min-height: 0; aspect-ratio: 16 / 9; }
  .stack__body { padding: 0.75rem 1rem 1rem; }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
  .process__line { display: none; }
  .teaser { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature .bento__story { grid-column: 1; grid-row: auto; min-height: 22rem; }
  .feature .bento__card { grid-column: 1; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .cta-card { min-height: 16rem; }
  .routes__panel { grid-template-columns: minmax(0, 1fr); }
  .route { min-height: 0; }
  .timeline { grid-template-columns: minmax(0, 1fr); }
  .timeline__head { position: static; }
  .docs { grid-template-columns: minmax(0, 1fr); }
  .related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-points { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .team-point + .team-point { border-left: 0; border-top: 1px solid var(--grey-line); padding-top: 1.75rem; }
}

@media (max-width: 767px) {
  /* Page heroes keep a full-bleed landscape photo (the homepage swaps to a portrait image) */
  .hero--page { min-height: 92svh; }
  .hero--page .hero__media picture { height: 100%; margin-top: 0; }
  .hero--page .hero__media img { height: 100%; -webkit-mask-image: none; mask-image: none; }
  .hero--page .hero__shade { background: linear-gradient(180deg, rgba(3, 29, 57, 0.35) 0%, rgba(3, 29, 57, 0.15) 35%, rgba(3, 29, 57, 0.9) 100%); }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento__story { min-height: 22rem; }
  .bento__card { gap: 1.5rem; padding: 1.5rem; }
  .values { grid-template-columns: minmax(0, 1fr); }
  .value { min-height: 0; gap: 2rem; }
  .curve__card { width: 8.25rem; }
  .curve__track { gap: 0.6rem; }
  .why { grid-template-columns: minmax(0, 1fr); }
  .why__map { min-height: 20rem; }
  .reach-cards { gap: 0.5rem; }
  .reach-card { padding: 1rem; gap: 1.25rem; }
  .map { padding: 1rem 0.5rem 0; }
  .map__panel { margin: -1.5rem 0.25rem 0.75rem; padding: 1.25rem; }
  .pin__label { display: none; }
  .countries { grid-template-columns: minmax(0, 1fr); }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { white-space: nowrap; }
  .band { min-height: 28rem; }
  .band::after { background: linear-gradient(180deg, rgba(3, 29, 57, 0.2) 0%, rgba(3, 29, 57, 0.88) 70%); }
  .areas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; }
  .area { min-height: 13rem; padding: 1.1rem; }
  .area__icon svg { width: 3rem; height: 3rem; }
  .process { grid-template-columns: minmax(0, 1fr); }
  .teaser__top { flex-direction: column; gap: 0.5rem; }
  .tiles__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tile { min-height: 9.5rem; gap: 1.25rem; }
  .docs__list { grid-template-columns: minmax(0, 1fr); }
  .related { grid-template-columns: minmax(0, 1fr); }
  .timeline__steps { padding-left: 4rem; }
  .timeline__step .process__dot { left: -4rem; }
  .timeline__rail { left: 1.45rem; }
}

/* "On request" card: words instead of a number, sized to sit on the same baseline */
.reach-card__num--text { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.04em; line-height: 1.1; }

/* ---------- Packages page ---------- */
/* Same packages block as the homepage; the first section after the hero gets the usual gap */
.pricing--page { padding-top: var(--sec-gap); }

/* Tailored packages: three cards, the middle one navy */
.tailored { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; }
.tcard {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border-radius: 1.5rem;
  background: var(--grey);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.tcard:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -40px rgba(5, 44, 83, 0.45); }
.tcard__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tcard__price { padding: 0.35rem 0.75rem; border-radius: var(--pill); background: var(--white); font-size: 0.8rem; font-weight: 600; color: var(--navy); }
.tcard__name { margin: 2.25rem 0 0; font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -0.03em; color: var(--navy); }
.tcard__tag { margin: 0.4rem 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--muted); }
.tcard .ticks { margin: 1.5rem 0 2rem; padding-top: 1.25rem; border-top: 1px solid var(--grey-line); }
.tcard__cta { margin-top: auto; }
.tcard--navy {
  background:
    radial-gradient(110% 90% at 100% 100%, rgba(7, 121, 186, 0.25) 0%, rgba(7, 121, 186, 0) 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.tcard--navy .icon-tile { background: var(--gold); color: var(--navy); }
.tcard--navy .tcard__price { background: rgba(255, 255, 255, 0.12); color: var(--white); }
.tcard--navy .tcard__name { color: var(--white); }
.tcard--navy .tcard__tag { color: rgba(255, 255, 255, 0.72); }
.tcard--navy .ticks { border-top-color: rgba(255, 255, 255, 0.12); }
.tcard--navy .ticks li { color: var(--white); }
.tcard--navy .ticks svg { color: var(--gold); }
.tcard--navy .btn-split__text, .tcard--navy .btn-split__icon { background: var(--teal); }
.tcard--navy .btn-split:hover .btn-split__text, .tcard--navy .btn-split:hover .btn-split__icon { background: var(--white); color: var(--navy); }

/* Comparison table: ticks and dashes instead of Yes / No, Starter column highlighted */
.compare--plans { min-width: 62rem; }
.compare--plans thead th { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--navy); vertical-align: bottom; }
.compare--plans thead th:first-child { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.compare--plans thead th span { display: block; margin-top: 0.2rem; font-size: 0.82rem; font-weight: 500; color: var(--teal); }
.compare--plans th:not(:first-child), .compare--plans td { text-align: center; }
.compare--plans tbody th { white-space: normal; font-weight: 500; min-width: 12rem; }
.compare--plans .is-featured { background: rgba(7, 121, 186, 0.06); }
.compare--plans td.y, .compare--plans td.n { font-size: 0; }
.compare--plans td.y::before, .compare--plans td.n::before { content: ""; display: inline-block; vertical-align: middle; }
.compare--plans td.y::before {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") 50% / 0.85rem no-repeat;
}
.compare--plans td.n::before { width: 0.85rem; height: 2px; border-radius: 2px; background: #C5CDD5; }
.compare__buy th, .compare__buy td { padding-top: 1.25rem; padding-bottom: 1.25rem; vertical-align: middle; }
.compare__btn {
  display: inline-block;
  padding: 0.55rem 0.95rem;
  border-radius: var(--pill);
  background: var(--navy);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
  transition: background-color 0.3s;
}
.compare__btn:hover { background: var(--teal); }
.compare__btn--teal { background: var(--teal); }
.compare__btn--teal:hover { background: var(--navy); }

/* Payment reassurance row under the steps */
.secure { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none; }
.secure li { display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.25rem; border-radius: 1.1rem; background: var(--grey); font-size: 0.85rem; line-height: 1.4; color: var(--muted); }
.secure b { display: block; font-size: 0.95rem; font-weight: 600; color: var(--navy); }
.secure a { color: var(--teal); font-weight: 500; }
.secure svg { width: 1.6rem; height: 1.6rem; flex: none; color: var(--teal); }

@media (max-width: 991px) {
  .pricing--page { padding-top: var(--sec-gap); }
  .tailored { grid-template-columns: minmax(0, 1fr); max-width: 34rem; }
  .secure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .secure { grid-template-columns: minmax(0, 1fr); }
  .tcard { padding: 1.5rem; }
}

/* Phone: the region filter scrolls sideways inside the page width instead of widening it */
@media (max-width: 767px) { .sec-head > .filters { align-self: stretch; width: auto; max-width: none; } }