/* ---------- Nohemi typeface (self-hosted) ---------- */
@font-face {
  font-family: "Nohemi";
  src: url("../fonts/Nohemi-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src: url("../fonts/Nohemi-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src: url("../fonts/Nohemi-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src: url("../fonts/Nohemi-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src: url("../fonts/Nohemi-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #10126B;
  --navy-deep: #090A45;
  --navy-soft: #1B1E8C;
  --logo-navy: #0b0d62;
  --icon-blue: #0b0d62;
  --blue-accent: #5B7FFF;
  --orange: #F4791E;
  --orange-light: #FFA555;
  --orange-dark: #D9600A;
  --cream: #FBF8F2;
  --cream-dark: #F1ECE0;
  --white: #FFFFFF;
  --ink: #12142B;
  --ink-muted: #5B5F7A;
  --line: #E4E0D4;

  --font-display: "Nohemi", "Segoe UI", sans-serif;
  --font-body: "Nohemi", "Segoe UI", sans-serif;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  /* Layered shadow scale (multiple soft passes, not one harsh drop) */
  --shadow-xs: 0 1px 2px rgba(16, 18, 107, 0.06), 0 1px 1px rgba(16, 18, 107, 0.04);
  --shadow-soft: 0 4px 12px -6px rgba(16, 18, 107, 0.18), 0 10px 30px -18px rgba(16, 18, 107, 0.22);
  --shadow-card: 0 8px 20px -12px rgba(16, 18, 107, 0.24), 0 20px 44px -24px rgba(16, 18, 107, 0.34);
  --shadow-lift: 0 12px 24px -14px rgba(16, 18, 107, 0.28), 0 28px 56px -28px rgba(16, 18, 107, 0.4);

  /* ---- Motion system (Phase 2) ---- */
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);   /* decelerate — reveals, cards */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);     /* general UI */
  --ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1); /* subtle overshoot — pins, badges */
  --dur-micro: 180ms;   /* hover / press / focus */
  --dur-fast: 240ms;    /* small state changes */
  --dur-entrance: 560ms; /* element reveals */
  --dur-slow: 720ms;    /* hero / large reveals */

  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.65;
  overflow-x: clip;
}

/* Premium base details */
::selection { background: rgba(244, 121, 30, 0.22); color: var(--navy); }
::-webkit-selection { background: rgba(244, 121, 30, 0.22); color: var(--navy); }
html { scrollbar-color: var(--orange) var(--cream-dark); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--cream-dark); }
::-webkit-scrollbar-thumb {
  background: #d7cdbb;
  border-radius: 999px;
  border: 3px solid var(--cream-dark);
}
::-webkit-scrollbar-thumb:hover { background: var(--orange); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; color: var(--navy); line-height: 1.1; text-wrap: balance; }
h1 { letter-spacing: -0.03em; }
h2 { letter-spacing: -0.022em; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--orange-dark);
}

.section {
  padding: 96px 0;
  /* So jumping to a #section (nav link or direct URL) doesn't tuck its
     heading under the sticky header - browsers stop scroll-margin-top
     short by this much. Matches the header's tallest (unscrolled) height. */
  scroll-margin-top: 84px;
}
.section-head {
  max-width: 620px;
  margin-bottom: 52px;
}
.section-head h2 {
  font-size: clamp(2.2rem, 3.8vw, 3.1rem);
  margin-top: 16px;
  letter-spacing: -0.01em;
}
.section-head p {
  margin-top: 16px;
  color: var(--ink-muted);
  font-size: 1.08rem;
  max-width: 60ch;
}
.section-head.center p { margin-left: auto; margin-right: auto; }
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard),
              background var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard),
              border-color var(--dur-micro) var(--ease-standard),
              filter var(--dur-micro) var(--ease-standard);
  white-space: nowrap;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.975); transition-duration: 90ms; }
.btn svg { transition: transform var(--dur-fast) var(--ease-standard); }
.btn-primary {
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 6px 14px -8px rgba(244, 121, 30, 0.55), 0 14px 26px -14px rgba(244, 121, 30, 0.5);
}
.btn-primary:hover { background: var(--orange-dark); box-shadow: 0 10px 20px -8px rgba(244, 121, 30, 0.6), 0 20px 38px -18px rgba(244, 121, 30, 0.55); }
.btn-outline {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white);
}
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
.btn-navy {
  border-color: var(--navy);
  color: var(--navy);
  background: transparent;
}
.btn-navy:hover { background: var(--navy); color: var(--white); box-shadow: var(--shadow-soft); }
/* Arrow-carrying buttons nudge their icon on hover */
.btn:hover svg { transform: translateX(2px); }

/* ---------- Logo ---------- */
.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.logo .logo-img {
  height: 64px;
  width: 157px;
  object-fit: contain;
  display: block;
}
.site-footer .logo .logo-img { height: 80px; width: 196px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--logo-navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
  /* Force its own compositor layer: sticky elements that also repaint
     (background/shadow transitions) can shimmer/flicker on scroll in
     Chromium on Windows without this. backdrop-filter was dropped below
     for the same reason - blur behind a sticky element is a known
     flicker source, independent of any JS toggle logic. */
  transform: translateZ(0);
  will-change: background;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: 24px;
  transition: height var(--dur-fast) var(--ease-standard);
}
/* Scrolled state — condense + depth (no backdrop-filter, see note above) */
.site-header.is-scrolled {
  background: #0b0d62;
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6);
}
.site-header.is-scrolled .container { height: 66px; }
.site-header .logo-img { transition: height var(--dur-fast) var(--ease-standard), width var(--dur-fast) var(--ease-standard); }
.site-header.is-scrolled .logo-img { height: 52px; width: 127px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  font-size: 0.94rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  position: relative;
  padding: 6px 0;
}
.nav-links a:hover { color: #fff; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-entrance);
}
.nav-links a:hover::after,
.nav-item:hover > a::after,
.nav-item:focus-within > a::after { transform: scaleX(1); }

.nav-item { position: relative; }
.nav-item > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-caret { transition: transform var(--dur-fast) var(--ease-standard); }
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  padding-top: 18px;
  z-index: 110;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-entrance),
              visibility var(--dur-fast);
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-dropdown-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 236px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  padding: 10px;
}
.nav-dropdown-inner a,
.nav-dropdown-inner a:hover {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--navy);
  transition: background var(--dur-micro) var(--ease-standard), transform var(--dur-micro) var(--ease-standard);
}
.nav-dropdown-inner a::after { display: none; }
.nav-dropdown-inner a:hover { background: var(--cream-dark); transform: translateX(3px); }
.nav-dropdown-inner a:hover .nav-dropdown-title { color: var(--orange-dark); }
.nav-dropdown-title { font-weight: 700; font-size: 0.92rem; color: var(--navy); }
.nav-dropdown-sub { font-size: 0.8rem; color: var(--ink-muted); font-weight: 500; }

.header-actions { display: flex; align-items: center; gap: 18px; }
.header-actions .btn {
  transition: transform var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard),
              background var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard),
              border-color var(--dur-micro) var(--ease-standard),
              filter var(--dur-micro) var(--ease-standard),
              padding var(--dur-fast) var(--ease-standard),
              font-size var(--dur-fast) var(--ease-standard);
}
.site-header.is-scrolled .header-actions .btn {
  padding: 11px 22px;
  font-size: 0.86rem;
}
/* "Search Embassy" header CTA — outline sits on the navy header; filled when
   it's the current page. Hidden on narrow phones (it lives in the mobile menu too). */
.header-search[aria-current="page"] {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
@media (max-width: 620px) {
  .header-search { display: none; }
}
.header-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  color: #fff;
}
.header-phone svg { color: var(--orange); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  padding: 8px;
  color: #fff;
  transition: background var(--dur-micro) var(--ease-standard), border-color var(--dur-micro) var(--ease-standard);
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); }
.nav-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.1); }
.nav-toggle svg line {
  transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-micro) var(--ease-standard);
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] svg line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] svg line:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] svg line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 84px 0 0 0;
  background: var(--cream);
  z-index: 99;
  padding: 32px 24px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-entrance),
              visibility var(--dur-fast),
              inset var(--dur-fast) var(--ease-standard);
}
/* The header condenses to 66px on scroll (see .site-header.is-scrolled) but
   this was still hard-coded to the full 84px header height, leaving an
   18px gap that showed whatever was behind the menu (globe, hero, etc.)
   between the condensed header and the top of the white panel. */
.site-header.is-scrolled + .mobile-nav { inset: 66px 0 0 0; }
.mobile-nav.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.mobile-nav a {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  opacity: 0;
  transform: translateY(10px);
  transition: color var(--dur-micro) var(--ease-standard);
}
.mobile-nav a:not(.btn):hover { color: var(--orange-dark); }
.mobile-nav.open a {
  animation: mobileNavItem var(--dur-entrance) var(--ease-entrance) forwards;
  animation-delay: var(--stagger, 0ms);
}
@keyframes mobileNavItem {
  to { opacity: 1; transform: none; }
}
/* .mobile-nav a above (display:block, 14px 0 padding, border-bottom, color)
   was leaking onto the "Get In Touch" link too - it has higher specificity
   than .btn/.btn-navy, so it silently stripped the button's flex layout
   and horizontal padding down to zero and drew a divider line through it.
   Restore the actual button look explicitly. */
.mobile-nav a.btn {
  display: inline-flex;
  padding: 15px 28px;
  border-bottom: none;
}
.mobile-nav .btn { margin-top: 24px; width: 100%; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .mobile-nav a { transition: none; }
  .mobile-nav.open a { animation: none; opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .header-phone span { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 480px) {
  /* Full desktop-size CTA + a 26px close icon crowd a narrow phone header
     next to the logo. Scale both down a notch - independent of the
     scroll-condensed state, which has its own (larger) shrink already. */
  .header-actions { gap: 10px; }
  .header-actions .btn { padding: 10px 16px; font-size: 0.82rem; }
  .nav-toggle { padding: 6px; }
  .nav-toggle svg { width: 22px; height: 22px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 100px 0 92px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(112deg, rgba(9,10,69,0.90) 0%, rgba(9,10,69,0.66) 52%, rgba(9,10,69,0.48) 100%),
    url("../images/rome.jpg") center/cover no-repeat;
}
.hero::before {
  content: "";
  position: absolute;
  top: -220px; right: -220px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,121,30,0.22), transparent 70%);
}
.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  position: relative;
}
.hero-copy .eyebrow {
  display: block;
  max-width: 100%;
  color: var(--orange-light);
  font-size: clamp(0.6rem, 2.3vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-copy h1 {
  color: #fff;
  font-size: clamp(2.25rem, 4.4vw, 3.9rem);
  line-height: 1.06;
  margin-top: 16px;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero-copy h1 em {
  font-style: normal;
  color: var(--orange-light);
}
.hero-copy p {
  margin-top: 22px;
  font-size: 1.15rem;
  color: rgba(255,255,255,0.9);
  max-width: 480px;
}
.hero-actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.hero-trust {
  margin-top: 42px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.hero-trust div { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 600; color: #fff; }
.hero-trust svg { color: var(--orange-light); flex-shrink: 0; }

/* Hero staggered entrance — line-level reveal, runs once on load */
.hero-copy > *,
.hero-visual {
  animation: heroRise var(--dur-slow) var(--ease-entrance) both;
}
.hero-copy > .eyebrow { animation-delay: 60ms; }
.hero-copy > h1       { animation-delay: 140ms; }
.hero-copy > p        { animation-delay: 240ms; }
.hero-copy > .hero-actions { animation-delay: 330ms; }
.hero-copy > .hero-trust   { animation-delay: 410ms; }
.hero-visual { animation-delay: 260ms; animation-duration: var(--dur-slow); }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
/* Slow ambient drift on the hero photo — the one background motion */
.hero { background-position: center, center; }
@media (prefers-reduced-motion: no-preference) {
  .hero::after {
    content: "";
    position: absolute;
    inset: -10% -10% auto -10%;
    height: 120%;
    background: radial-gradient(60% 50% at 20% 30%, rgba(91,127,255,0.18), transparent 70%);
    animation: heroDrift 18s var(--ease-standard) infinite alternate;
    pointer-events: none;
  }
}
@keyframes heroDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .hero-visual { animation: none; }
}
.boarding-pass-perf::before,
.boarding-pass-perf::after { background: var(--navy); }

.boarding-pass {
  position: relative;
  background: var(--navy);
  border-radius: var(--radius-lg);
  color: var(--white);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.boarding-pass-top {
  padding: 32px 32px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.bp-route {
  display: flex;
  align-items: center;
  gap: 18px;
}
.bp-city { }
.bp-city .code { font-family: var(--font-display); font-size: 2rem; font-weight: 700; }
.bp-city .name { font-size: 0.78rem; color: rgba(255,255,255,0.65); margin-top: 2px; }
.bp-plane {
  color: var(--orange);
  flex-shrink: 0;
}
.bp-stamp {
  width: 62px; height: 62px;
  border: 2px dashed rgba(255,255,255,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--orange-light);
  transform: rotate(-12deg);
  flex-shrink: 0;
}
.boarding-pass-mid {
  padding: 0 32px 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.bp-field .label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); }
.bp-field .value { font-weight: 600; margin-top: 4px; font-size: 0.98rem; }
.boarding-pass-perf {
  position: relative;
  border-top: 2px dashed rgba(255,255,255,0.3);
  margin: 0 32px;
}
.boarding-pass-perf::before,
.boarding-pass-perf::after {
  content: "";
  position: absolute;
  top: -14px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--cream);
}
.boarding-pass-perf::before { left: -46px; }
.boarding-pass-perf::after { right: -46px; }
.boarding-pass-bottom {
  padding: 22px 32px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.bp-barcode {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 34px;
}
.bp-barcode span { width: 3px; background: rgba(255,255,255,0.6); display: block; }
.bp-note { font-size: 0.8rem; color: rgba(255,255,255,0.7); max-width: 190px; text-align: right; }

@media (max-width: 960px) {
  .hero { padding: 76px 0 68px; }
  .hero .container { grid-template-columns: 1fr; }
  .hero-copy p { max-width: 560px; }
  .boarding-pass-mid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hero { padding: 52px 0 54px; }
  .hero-copy h1 { font-size: clamp(1.95rem, 7.6vw, 2.6rem); margin-top: 14px; }
  .hero-copy p { font-size: 1.02rem; margin-top: 18px; }
  .hero-actions { margin-top: 28px; }
  .hero-trust { margin-top: 28px; gap: 14px 22px; }
  .hero-trust div { font-size: 0.86rem; }
}
@media (max-width: 520px) {
  .boarding-pass-top { flex-direction: column; gap: 18px; }
}

/* ---------- Trust strip (revolving banners) ---------- */
.brand-strips { overflow: hidden; }
.trust-strip {
  background: var(--orange);
  padding: 16px 0;
  overflow: hidden;
  border-top: 3px solid var(--orange-dark);
  border-bottom: 3px solid var(--orange-dark);
  /* Soften the hard cut at both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.trust-track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  animation: scroll-left 26s linear infinite;
  width: max-content;
  /* iOS Safari can fail to keep animating a masked ancestor's child -
     it renders a static snapshot instead of updating each frame. Forcing
     this onto its own GPU layer fixes it. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}
.trust-strip:hover .trust-track { animation-play-state: paused; }
@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.trust-track span {
  color: var(--icon-blue);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.trust-track span svg { color: var(--icon-blue); }

/* Flag banner — parallel, scrolling the opposite direction */
.flag-strip {
  background: var(--navy-deep);
  height: 56px;
  overflow: hidden;
  border-bottom: 3px solid var(--orange-dark);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.flag-track {
  display: flex;
  gap: 34px;
  align-items: stretch;
  height: 100%;
  white-space: nowrap;
  width: max-content;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
  animation: scroll-right 26s linear infinite;
}
.flag-strip:hover .flag-track { animation-play-state: paused; }
@keyframes scroll-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
.flag-chip {
  flex-shrink: 0;
  width: 84px;
  height: 100%;
  overflow: hidden;
  line-height: 0;
}
.flag-chip svg { width: 100%; height: 100%; display: block; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .trust-track,
  .flag-track { animation: none; }
}

/* ---------- Packages ---------- */
#packages {
  position: relative;
  background:
    linear-gradient(rgba(9,10,69,0.90), rgba(9,10,69,0.93)),
    url("../images/serbia-cathedral.jpg") center 20% / cover no-repeat;
}
#packages .section-head h2 { color: #fff; }
#packages .section-head p { color: rgba(255,255,255,0.82); }
#packages .eyebrow { color: var(--orange-light); }

.packages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.package-card {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  transition: transform var(--dur-fast) var(--ease-entrance),
              box-shadow var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.package-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(244, 121, 30, 0.4);
}
.package-card.featured {
  border: 2px solid var(--orange);
  transform: translateY(-10px);
}
.package-card.featured:hover { transform: translateY(-16px); }
.package-tag {
  position: absolute;
  top: 20px; right: -34px;
  background: var(--orange);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 40px;
  transform: rotate(38deg);
}
.package-head {
  padding: 32px 28px 20px;
  border-bottom: 2px dashed var(--line);
}
.package-head .kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-dark); }
.package-head h3 { font-size: 1.5rem; margin-top: 8px; }
.package-head p { color: var(--ink-muted); margin-top: 10px; font-size: 0.92rem; }
.package-list {
  padding: 24px 28px 8px;
  flex-grow: 1;
}
.package-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  font-size: 0.94rem;
}
.package-list li svg { flex-shrink: 0; margin-top: 3px; }
.package-list li.included svg { color: var(--orange); }
.package-list li.excluded { color: var(--ink-muted); }
.package-list li.excluded svg { color: #C7C3B4; }
.package-foot { padding: 20px 28px 32px; }
.package-foot .btn { width: 100%; justify-content: center; }

@media (max-width: 1180px) {
  .packages-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .packages-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .package-card.featured { transform: none; }
}

/* ---------- Destinations ---------- */
.destinations-section {
  background: var(--navy-deep);
  color: var(--white);
  padding: 0;
}
.carousel-controls { display: flex; gap: 10px; margin-top: 24px; }
.carousel-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.carousel-btn:hover { background: rgba(255,255,255,0.12); }

/* ---------- Destinations globe (real photo, full-bleed, merges into neighbours) ---------- */
.globe-wrap {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  height: 840px;
  overflow: hidden;
  background: var(--navy-deep);
}
.globe-bg {
  position: absolute;
  inset: 0;
  background-image: url("../images/earth-globe-crop.jpg");
  background-size: cover;
  background-position: center bottom;
  transition: transform 1.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.4s ease;
  transform: translateY(440px) scale(1.08);
  opacity: 0;
}
.globe-bg.is-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.globe-heading {
  position: absolute;
  top: 88px;
  left: 50%;
  z-index: 3;
  text-align: center;
  width: 100%;
  max-width: 720px;
  padding: 40px 24px 56px;
  opacity: 0;
  transform: translate(-50%, -26px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.globe-heading.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.globe-heading .eyebrow {
  color: #fff;
  justify-content: center;
  font-size: 2rem;
  text-shadow: 0 3px 14px rgba(0,0,0,0.6);
}
.btn-glass {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.38);
  color: #fff;
  border-radius: 999px;
  padding: 14px 30px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.5);
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.btn-glass:hover {
  background: rgba(255,255,255,0.26);
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -12px rgba(0,0,0,0.55);
}
.globe-heading h2 {
  margin-top: 18px;
  color: #fff;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-shadow: 0 12px 40px rgba(0,0,0,0.55);
}
.globe-heading p {
  margin-top: 20px;
  color: rgba(255,255,255,0.78);
  font-size: 1.05rem;
  text-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.globe-fade {
  position: absolute;
  left: 0; right: 0;
  z-index: 2;
  pointer-events: none;
}
.globe-fade-top {
  top: 0;
  height: 30px;
  background: linear-gradient(to bottom, var(--navy-deep) 0%, rgba(9,10,69,0) 100%);
}
.globe-fade-bottom {
  bottom: 0;
  height: 30px;
  background: linear-gradient(to top, var(--navy-deep) 0%, rgba(9,10,69,0) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .globe-bg { transition: none; opacity: 1; transform: none; }
  .globe-heading { transition: none; opacity: 1; transform: translate(-50%, 0); }
}

.globe-pin {
  position: absolute;
  z-index: 3;
  opacity: 0;
  transform: translateY(70px) scale(0.3);
  transition: opacity 0.6s ease, transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.globe-pin.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .globe-pin { opacity: 1; transform: scale(1); transition: none; }
}
.globe-pin .pin-dot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--orange);
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 6px rgba(244,121,30,0.25);
  animation: dotPulse 2.4s ease-in-out infinite;
}
.globe-pin:nth-child(4) .pin-dot { animation-delay: 0.5s; }
.globe-pin:nth-child(5) .pin-dot { animation-delay: 1s; }
.globe-pin:nth-child(6) .pin-dot { animation-delay: 1.5s; }
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(244,121,30,0.25); }
  50% { box-shadow: 0 0 0 10px rgba(244,121,30,0.12); }
}
.pin-card {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.98);
  border-radius: 999px;
  padding: 6px 16px 6px 6px;
  box-shadow: 0 16px 32px -14px rgba(9,10,69,0.55);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
  text-decoration: none;
  animation: pinFloat 5s ease-in-out infinite;
}
.globe-pin:nth-child(4) .pin-card { animation-delay: 0.6s; }
.globe-pin:nth-child(5) .pin-card { animation-delay: 1.2s; }
.globe-pin:nth-child(6) .pin-card { animation-delay: 1.8s; }
@keyframes pinFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .globe-pin .pin-card, .globe-pin .pin-dot, .globe-bg { animation: none; }
}
.globe-pin:hover .pin-card,
.globe-pin:focus-visible .pin-card {
  transform: translateX(-50%) translateY(-4px) scale(1.05);
  box-shadow: 0 22px 40px -14px rgba(244,121,30,0.55);
}
.pin-card img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--cream);
}
.pin-card .pin-text { display: flex; flex-direction: column; line-height: 1.2; }
.pin-card .pin-flag { font-size: 1.05rem; color: var(--navy); font-weight: 800; }
.pin-card .pin-city { font-size: 0.72rem; color: var(--ink-muted); font-weight: 600; }

.pin-serbia     { left: 28%; top: 58%; }
.pin-moldova    { left: 50%; top: 62%; }
.pin-albania    { left: 68%; top: 56%; }
.pin-europe     { left: 10%; top: 60%; }
.pin-schengen   { left: 90%; top: 60%; }
.pin-newzealand { left: 50%; top: 82%; }

@media (max-width: 900px) {
  /* 6 pins is too many for the old free-form layout (tuned for 3) to fit
     without colliding on a phone-width globe. Laid out as a clean 2-column
     x 3-row grid instead - nothing sits at the extreme edges any more,
     so the old edge-clipping anchor hack is gone too, it's just not
     needed with these positions. */
  .globe-wrap { height: 780px; }
  .globe-heading { top: 64px; }
  .pin-serbia     { left: 26%; top: 56%; }
  .pin-albania    { left: 74%; top: 56%; }
  .pin-moldova    { left: 26%; top: 70%; }
  .pin-schengen   { left: 74%; top: 70%; }
  .pin-europe     { left: 26%; top: 84%; }
  .pin-newzealand { left: 74%; top: 84%; }
  .pin-card { padding: 5px 14px 5px 5px; gap: 8px; }
  .pin-card img { width: 36px; height: 36px; }
  .pin-card .pin-flag { font-size: 0.92rem; }
  .pin-card .pin-city { font-size: 0.66rem; }
}
@media (max-width: 620px) {
  .globe-wrap { height: 720px; }
  .globe-heading { top: 48px; }
  .globe-heading p { font-size: 0.92rem; }
  .pin-serbia     { left: 25%; top: 58%; }
  .pin-albania    { left: 75%; top: 58%; }
  .pin-moldova    { left: 25%; top: 73%; }
  .pin-schengen   { left: 75%; top: 73%; }
  .pin-europe     { left: 25%; top: 88%; }
  .pin-newzealand { left: 75%; top: 88%; }
  .pin-card { padding: 4px 10px 4px 4px; gap: 6px; }
  .pin-card img { width: 28px; height: 28px; }
  .pin-card .pin-flag { font-size: 0.78rem; }
  .pin-card .pin-city { font-size: 0.6rem; }
}

.destinations-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.destinations-row::-webkit-scrollbar { display: none; }
.destination-card {
  scroll-snap-align: start;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.destination-art {
  height: 210px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--navy-soft), var(--navy-deep));
}
.destination-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.destination-card:hover .destination-art img { transform: scale(1.05); }
.destination-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,10,69,0.35) 0%, rgba(9,10,69,0) 45%);
}
.destination-flag {
  position: absolute;
  z-index: 2;
  top: 16px; left: 16px;
  background: rgba(9,10,69,0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.destination-body { padding: 22px 22px 26px; }
.destination-body h3 { color: var(--white); font-size: 1.25rem; }
.destination-body p { color: rgba(255,255,255,0.7); font-size: 0.9rem; margin-top: 10px; }
.destination-body a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  color: var(--orange-light);
  font-weight: 600;
  font-size: 0.88rem;
}

/* ---------- How it works ---------- */
#how-it-works {
  position: relative;
  background:
    linear-gradient(rgba(9,10,69,0.86), rgba(9,10,69,0.90)),
    url("../images/how-it-works.jpg") center 35% / cover no-repeat;
}
#how-it-works .section-head h2 { color: #fff; }
#how-it-works .section-head .eyebrow { color: var(--orange-light); }
#how-it-works .steps::before { border-top-color: rgba(255,255,255,0.3); top: 12px; }
#how-it-works .step {
  background: transparent;
  border: none;
  padding: 0;
  text-align: center;
}
#how-it-works .step h3 { color: #fff; margin-top: 18px; }
#how-it-works .step p { color: rgba(255,255,255,0.78); }
#how-it-works .step-num {
  width: 24px;
  height: 24px;
  margin: 0 auto;
  background: #fff;
  color: var(--navy);
  font-size: 0;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.18);
  position: relative;
  z-index: 2;
}
#how-it-works .plane-track {
  position: absolute;
  top: 12px;
  left: 6%;
  right: 6%;
  height: 1px;
  z-index: 1;
}
#how-it-works .plane-cross {
  position: absolute;
  top: 50%;
  left: 0;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%) rotate(90deg);
  color: var(--orange-light);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45));
  will-change: transform;
}
@media (max-width: 900px) {
  #how-it-works .plane-track { display: none; }
}

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 6%;
  right: 6%;
  border-top: 2px dashed var(--line);
  z-index: 0;
}
.step { position: relative; z-index: 1; }
.step-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 20px;
}
.step h3 { font-size: 1.08rem; }
.step p { color: var(--ink-muted); margin-top: 8px; font-size: 0.92rem; }

@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps::before { display: none; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
}

/* ---------- Testimonials ---------- */
.testimonials-carousel { position: relative; }
.testimonials-viewport { overflow: hidden; }
.testimonials-track {
  display: flex;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.testimonials-page {
  flex: 0 0 100%;
  min-width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.testimonial-quote {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.6;
  flex-grow: 1;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.testimonial-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cream-dark);
  border: 2px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #A9A4B8;
}
.testimonial-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.testimonial-name { font-weight: 700; color: var(--navy); font-size: 0.95rem; }
.testimonial-loc { font-size: 0.84rem; color: var(--ink-muted); font-weight: 500; white-space: nowrap; }

.stars {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
}
.stars-icons {
  position: relative;
  display: inline-flex;
  height: 16px;
}
.stars-bg, .stars-fg { display: flex; gap: 3px; }
.stars-bg svg { color: #E4E0D4; flex-shrink: 0; }
.stars-fg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
}
.stars-fg svg { color: var(--orange); flex-shrink: 0; }
.stars-rating {
  margin-left: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--orange-dark);
}

.testimonials-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 36px;
}
.testi-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  background: transparent;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.testi-btn:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); }
.testi-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.testi-dots { display: flex; align-items: center; gap: 10px; }
.testi-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--line);
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.testi-dot:hover { background: var(--orange-light); }
.testi-dot.is-active { background: var(--orange); transform: scale(1.2); }

@media (max-width: 980px) {
  .testimonials-page { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; gap: 20px; }
}

/* ---------- Why us ---------- */
.why-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: start;
}
.why-intro h2 { margin-top: 16px; }
.why-intro p { margin-top: 16px; color: var(--ink-muted); font-size: 1.02rem; }
.why-badge {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  box-shadow: var(--shadow-soft);
}
.why-badge strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--orange);
  line-height: 1.2;
}
.why-badge span { font-size: 0.9rem; color: var(--ink-muted); line-height: 1.35; }

.why-list { position: relative; }
.why-list::before {
  content: "";
  position: absolute;
  left: 27px; top: 4px; bottom: 4px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px);
}
.why-row {
  display: flex;
  gap: 22px;
  padding: 18px 0;
  position: relative;
}
.why-row .icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 12px 24px -8px rgba(244,121,30,0.55);
  position: relative;
  z-index: 1;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.why-row:hover .icon {
  transform: rotate(-8deg) scale(1.08);
  box-shadow: 0 16px 30px -8px rgba(244,121,30,0.65);
}
.why-row-text h3 { font-size: 1.1rem; }
.why-row-text p { color: var(--ink-muted); margin-top: 7px; font-size: 0.92rem; }

@media (max-width: 900px) {
  .why-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- CTA banner ---------- */
.cta-banner {
  background: linear-gradient(125deg, var(--logo-navy) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  border-radius: var(--radius-lg);
  padding: 72px 48px;
  text-align: center;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.cta-banner::after {
  content: "";
  position: absolute;
  bottom: -160px; left: 50%;
  transform: translateX(-50%);
  width: 560px; height: 320px;
  background: radial-gradient(circle, rgba(244,121,30,0.28), transparent 70%);
}
.cta-banner::before {
  content: "";
  position: absolute;
  top: -120px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90,140,255,0.16), transparent 70%);
}
.cta-path {
  position: absolute;
  top: 20px; left: 0;
  width: 100%; height: 140px;
  z-index: 0;
}
.cta-plane {
  position: absolute;
  top: 44px; left: 12%;
  width: 26px; height: 26px;
  color: var(--orange-light);
  transform: rotate(58deg);
  opacity: 0.85;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
  z-index: 0;
}
.cta-banner .eyebrow,
.cta-banner h2,
.cta-banner p,
.cta-actions,
.cta-trust { position: relative; z-index: 1; }
.cta-banner h2 { color: var(--white); font-size: clamp(2rem, 3.4vw, 2.7rem); }
.cta-banner p { color: rgba(255,255,255,0.75); margin-top: 14px; max-width: 480px; margin-left: auto; margin-right: auto; }
.cta-actions { margin-top: 30px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-trust {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.7);
}
.cta-trust a { color: rgba(255,255,255,0.85); font-weight: 600; }
.cta-trust a:hover { color: var(--orange-light); }
.cta-trust-dot { color: rgba(255,255,255,0.35); }
.cta-trust-social { display: flex; gap: 10px; }
.cta-trust-social a {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.8);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.cta-trust-social a:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
@media (max-width: 560px) {
  .cta-banner { padding: 52px 26px; }
  .cta-trust { flex-direction: column; gap: 8px; }
  .cta-trust-dot { display: none; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--logo-navy);
  color: rgba(255,255,255,0.75);
  padding: 72px 0 28px;
  border-radius: 40px 40px 0 0;
  position: relative;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
}
.footer-about p { margin-top: 18px; font-size: 0.92rem; max-width: 320px; }
.footer-social { display: flex; gap: 12px; margin-top: 22px; }
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.footer-social a:hover { background: var(--orange); border-color: var(--orange); }
.footer-col h4 { color: var(--white); font-family: var(--font-body); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 18px; }
.footer-col ul li { margin-bottom: 12px; font-size: 0.92rem; }
.footer-col ul li a:hover { color: var(--orange-light); }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { color: var(--orange); flex-shrink: 0; margin-top: 3px; }
.footer-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
}

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-about p { max-width: 100%; }
}

/* ---------- Enquiry page ---------- */
.page-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy);
}
.page-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,10,69,0.25) 0%, rgba(9,10,69,0.85) 100%);
}
.page-hero .container { position: relative; z-index: 2; padding-top: 70px; padding-bottom: 48px; }
.page-hero .back-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 22px;
}
.page-hero .back-link:hover { color: #fff; }
.page-hero .flag-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  color: #fff;
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 18px;
}
.page-hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  max-width: 640px;
}
.page-hero p {
  color: rgba(255,255,255,0.85);
  margin-top: 16px;
  font-size: 1.1rem;
  max-width: 540px;
}

.enquiry-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 48px;
  align-items: start;
}
.enquiry-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-soft);
}
.enquiry-card h2 { font-size: 1.6rem; }
.enquiry-card > p { color: var(--ink-muted); margin-top: 10px; margin-bottom: 28px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--navy);
  margin-bottom: 7px;
}
.form-group label .req { color: var(--orange-dark); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--cream);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(244,121,30,0.15);
  background: #fff;
}
.form-group textarea { resize: vertical; min-height: 110px; }

/* ---------- Phone field with country-code picker ---------- */
.phone-field { position: relative; display: flex; align-items: stretch; }
.phone-field input[type="tel"] {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
  flex: 1 1 auto; /* take all remaining width */
  min-width: 0;   /* let the input shrink inside the flex row */
  width: auto;
}
.phone-country {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 0 10px;
  border: 1.5px solid var(--line);
  border-right: 0;
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
  background: var(--cream);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.phone-country:hover { background: #fff; }
.phone-field:focus-within .phone-country,
.phone-field.is-open .phone-country { border-color: var(--orange); }
.phone-flag {
  width: 22px;
  height: 16px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(16,18,107,0.10);
  display: block;
}
.phone-dial { font-weight: 600; color: var(--navy); }
.phone-caret { color: var(--ink-muted); flex: 0 0 auto; transition: transform 0.2s ease; }
.phone-field.is-open .phone-caret { transform: rotate(180deg); }

.phone-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  display: none;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(16,18,107,0.14);
  overflow: hidden;
}
.phone-field.is-open .phone-dropdown { display: block; }
.phone-search {
  width: 100%;
  padding: 11px 14px;
  border: 0 !important;
  border-bottom: 1.5px solid var(--line) !important;
  border-radius: 0 !important;
  background: var(--cream) !important;
  font-size: 0.9rem;
}
.phone-search:focus { outline: none; box-shadow: none !important; }
.phone-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 240px;
  overflow-y: auto;
}
.phone-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 0.9rem;
}
.phone-option:hover { background: var(--cream); }
.phone-option .phone-name { flex: 1 1 auto; color: var(--ink); }
.phone-option .phone-code { color: var(--ink-muted); font-weight: 600; }

@media (max-width: 700px) {
  /* iOS Safari auto-zooms the page when a focused input's font-size is
     under 16px - bumping just enough to sit at the threshold. */
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 16px; }
}
.enquiry-form .btn { width: 100%; justify-content: center; margin-top: 8px; }
.form-note { font-size: 0.82rem; color: var(--ink-muted); margin-top: 14px; text-align: center; }

.enquiry-side { display: flex; flex-direction: column; gap: 20px; }
.side-card {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 30px;
}
.side-card h3 { color: #fff; font-size: 1.15rem; margin-bottom: 18px; }
.side-contact li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.85);
}
.side-contact li svg { color: var(--orange-light); flex-shrink: 0; margin-top: 2px; }
.side-contact a { color: #fff; font-weight: 600; }
.side-contact a:hover { color: var(--orange-light); }
.side-card .side-social { display: flex; gap: 12px; margin-top: 18px; }
.side-card .side-social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.side-card .side-social a:hover { background: var(--orange); border-color: var(--orange); }

.side-card.included-card { background: var(--cream-dark); color: var(--ink); }
.included-card h3 { color: var(--navy); }
.included-card ul li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0; font-size: 0.92rem;
}
.included-card ul li svg { color: var(--orange); flex-shrink: 0; margin-top: 3px; }

@media (max-width: 900px) {
  .enquiry-layout { grid-template-columns: 1fr; }
  .enquiry-card { padding: 28px; }
}
@media (max-width: 520px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ---------- Package booking page ---------- */
.page-hero--package {
  min-height: 340px;
  background: linear-gradient(125deg, var(--logo-navy) 0%, #191ca0 100%);
}
.page-hero--package::after { background: none; }
.page-hero--package::before {
  content: "";
  position: absolute;
  top: -160px; right: -120px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,121,30,0.20), transparent 70%);
}
.page-hero--package .kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-light);
  margin-bottom: 14px;
}
.page-hero--package .insurance-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.08);
  padding: 8px 16px;
  border-radius: 999px;
}

.pkg-detail {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 48px;
  align-items: start;
}
.pkg-includes {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-soft);
  position: sticky;
  top: 108px;
}
.pkg-includes h2 { font-size: 1.5rem; }
.pkg-includes > p { color: var(--ink-muted); margin-top: 10px; font-size: 0.95rem; }
.pkg-includes .include-list { margin-top: 22px; }
.pkg-includes .include-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  font-size: 1rem;
  border-bottom: 1px dashed var(--line);
}
.pkg-includes .include-list li:last-child { border-bottom: none; }
.pkg-includes .include-list li svg { flex-shrink: 0; margin-top: 3px; }
.pkg-includes .include-list li.included svg { color: var(--orange); }
.pkg-includes .include-list li.excluded { color: var(--ink-muted); }
.pkg-includes .include-list li.excluded svg { color: #C7C3B4; }
.pkg-includes .include-list li .tag {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}
.pkg-includes .include-list li.included .tag { background: rgba(244,121,30,0.14); color: var(--orange-dark); }
.pkg-includes .include-list li.excluded .tag { background: #EFEBDF; color: var(--ink-muted); }

@media (max-width: 900px) {
  .pkg-detail { grid-template-columns: 1fr; }
  .pkg-includes { position: static; padding: 28px; }
}

@media (max-width: 640px) {
  /* Sub-page photo/gradient hero banners eat a large share of a phone
     screen at their desktop min-height before any real content shows. */
  .page-hero { min-height: 300px; }
  .page-hero--package { min-height: 260px; }
  .page-hero .container { padding-top: 56px; padding-bottom: 32px; }
}

/* ---------- Page transitions ---------- */
main {
  animation: pageIn var(--dur-entrance) var(--ease-entrance) both;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
body.page-leaving {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 300ms var(--ease-standard), transform 300ms var(--ease-standard);
}
/* Staggered reveal for grids of cards */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-entrance) var(--ease-standard),
              transform var(--dur-entrance) var(--ease-entrance);
  will-change: transform, opacity;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Generic scroll-reveal for section headings and standalone blocks */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-entrance) var(--ease-standard),
              transform var(--dur-entrance) var(--ease-entrance);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
[data-reveal].is-visible { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
  body.page-leaving { transition: none; }
  .reveal, [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ---------- Utility responsive sections ---------- */
@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .cta-banner { padding: 48px 24px; }
}