/* ============================================================
   NextGen Study Abroad — "The Journey" design system
   A boarding-pass / passport travel metaphor.
   Palette from the logo: navy ink · royal blue · gold foil.
   ============================================================ */

:root {
  /* Brand ink */
  --ink: #0b1b3a;
  --ink-2: #11274d;
  --ink-3: #1b356a;
  --blue: #1b62c4;
  --blue-bright: #2e7be0;
  --blue-soft: #dbe7fb;

  /* Gold foil */
  --gold: #c6a250;
  --gold-light: #e7c97a;
  --gold-deep: #a87c2e;

  /* Paper + night */
  --paper: #f6f2e9;
  --paper-2: #efe9dc;
  --paper-3: #e6dfce;
  --paper-line: #d8cfba;
  --night: #050d20;
  --night-2: #0a1730;

  /* Ink for stamps */
  --stamp-blue: #26518f;
  --stamp-red: #b5433f;
  --stamp-gold: #a2792c;

  --muted: #6a6350;
  --muted-cool: #7a869c;

  --grad-brand: linear-gradient(120deg, var(--ink) 0%, var(--blue) 60%, var(--blue-bright) 100%);
  --grad-gold: linear-gradient(120deg, var(--gold-deep), var(--gold-light) 55%, var(--gold));
  --grad-night: linear-gradient(160deg, var(--night) 0%, var(--night-2) 55%, #0d2145 100%);

  --shadow-sm: 0 2px 10px rgba(11, 27, 58, 0.07);
  --shadow-md: 0 18px 44px -14px rgba(11, 27, 58, 0.22);
  --shadow-lg: 0 44px 90px -30px rgba(11, 27, 58, 0.42);
  --shadow-gold: 0 22px 55px -18px rgba(198, 162, 80, 0.5);

  --radius: 16px;
  --radius-lg: 24px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --container: 1220px;

  /* Poppins drives both display + body per brand brief; Space Mono keeps the
     boarding-pass / flight-tag details reading like a departures board. */
  --font-serif: var(--font-poppins), system-ui, sans-serif;
  --font-sans: var(--font-poppins), system-ui, sans-serif;
  --font-mono: var(--font-mono-code), "Courier New", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
@media (max-width: 900px) { html { scroll-padding-top: 84px; } }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Hide the scrollbar everywhere while keeping scroll functionality */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { width: 0; height: 0; display: none; }
* { scrollbar-width: none; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; background: none; border: none; cursor: pointer; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
::selection { background: var(--gold); color: var(--ink); }

/* Paper grain overlay on light sections */
.grain::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(rgba(11,27,58,0.035) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* Layout ---------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 26px; }
.section { position: relative; padding-block: clamp(72px, 10vw, 150px); }

/* Mono eyebrow — like a flight tag */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--blue);
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); }
.eyebrow--light { color: var(--gold-light); }
.eyebrow--center { justify-content: center; }

.display {
  font-family: var(--font-serif); font-weight: 600; line-height: 1.02;
  letter-spacing: -0.015em; color: var(--ink);
  font-size: clamp(2.4rem, 6vw, 4.6rem);
}
.h2 { font-family: var(--font-serif); font-weight: 600; line-height: 1.04; letter-spacing: -0.01em; color: var(--ink); font-size: clamp(2rem, 4.6vw, 3.5rem); }
.lead { color: var(--muted); font-size: clamp(1.02rem, 1.6vw, 1.2rem); }
.grad { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-blue { background: linear-gradient(100deg, var(--blue), var(--blue-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.section__head { max-width: 760px; margin: 0 auto clamp(44px, 6vw, 76px); text-align: center; }
.section__head .eyebrow { margin-bottom: 20px; }
.section__head p { margin-top: 18px; }

/* Buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 15px 26px; border-radius: 10px; position: relative; overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), color 0.4s;
  will-change: transform;
}
.btn svg { transition: transform 0.4s var(--ease); }
.btn--primary { color: var(--night); background: var(--grad-gold); box-shadow: var(--shadow-gold); }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -18px rgba(198,162,80,0.65); }
.btn--primary:hover svg { transform: translateX(5px); }
.btn--dark { color: #fff; background: var(--ink); box-shadow: var(--shadow-md); }
.btn--dark:hover { transform: translateY(-3px); background: var(--ink-2); }
.btn--ghost { color: var(--ink); border: 1.5px solid var(--paper-line); background: rgba(255,255,255,0.4); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-3px); }
.btn--ghost-light { color: #fff; border: 1.5px solid rgba(255,255,255,0.28); }
.btn--ghost-light:hover { border-color: var(--gold-light); color: var(--gold-light); transform: translateY(-3px); }
.btn--block { width: 100%; }
/* Instagram CTA — navy with gold accents, on-theme */
.btn--ig { color: #fff; background: var(--ink); border: 1.5px solid var(--gold); box-shadow: var(--shadow-md); }
.btn--ig:hover { transform: translateY(-3px); background: var(--ink-2); border-color: var(--gold-light); box-shadow: var(--shadow-gold); }
.btn--ig svg { color: var(--gold-light); transition: transform 0.4s var(--ease); }
.btn--ig:hover svg { transform: rotate(-8deg) scale(1.08); }

/* ============================================================
   HOME HERO (night departure)
   ============================================================ */
.hh {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  padding-top: 128px; padding-bottom: 70px; overflow: hidden;
  background: var(--grad-night); color: #fff;
}
.hh__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hh__stars { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 30px 30px; mask-image: radial-gradient(90% 80% at 60% 30%, #000 10%, transparent 78%); }
.hh__glow { position: absolute; border-radius: 50%; filter: blur(90px); }
.hh__glow--1 { width: 560px; height: 560px; top: -180px; right: -100px; background: radial-gradient(circle, rgba(46,123,224,0.5), transparent 65%); animation: drift 20s ease-in-out infinite; }
.hh__glow--2 { width: 460px; height: 460px; bottom: -180px; left: -80px; background: radial-gradient(circle, rgba(231,201,122,0.32), transparent 65%); animation: drift 26s ease-in-out infinite reverse; }
@keyframes drift { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(40px,-30px) scale(1.08); } 66% { transform: translate(-30px,30px) scale(0.95); } }

.hh__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
.hh__board { margin: 24px 0 26px; }
.hh__flap { font-size: clamp(1.5rem, 4vw, 2.9rem); }
.hh__title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.3rem, 5.2vw, 4.2rem); line-height: 1.03; letter-spacing: -0.015em; }
.hh__lead { margin-top: 24px; max-width: 520px; color: rgba(255,255,255,0.72); font-size: clamp(1.02rem, 1.7vw, 1.18rem); }
.hh__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hh__stats { display: flex; gap: 40px; margin-top: 50px; flex-wrap: wrap; }
.hh__stat-num { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hh__stat-label { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); }

.hh__visual { position: relative; height: 520px; display: flex; align-items: center; justify-content: center; }
.hh__pass { width: min(420px, 100%); }
.hh__stamp { position: absolute; z-index: 5; }
.hh__stamp--1 { top: 2%; right: 2%; }
.hh__stamp--2 { bottom: 8%; left: -4%; }
.hh__stamp--3 { top: 44%; right: -6%; }
.hh__stamp-ink { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 104px; height: 104px; border-radius: 50%; border: 2.5px solid; font-family: var(--font-mono); text-transform: uppercase; text-align: center; background: rgba(246,242,233,0.9); box-shadow: var(--shadow-md); }
.hh__stamp-ink b { font-size: 0.72rem; letter-spacing: 0.08em; }
.hh__stamp-ink em { font-style: normal; font-size: 0.5rem; letter-spacing: 0.1em; margin-top: 4px; opacity: 0.85; }
.hh__stamp-ink--red { color: var(--stamp-red); border-color: var(--stamp-red); }
.hh__stamp-ink--blue { color: var(--stamp-blue); border-color: var(--stamp-blue); }
.hh__stamp-ink--gold { color: var(--stamp-gold); border-color: var(--stamp-gold); }

.hh__scroll { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.hh__scroll-line { width: 1px; height: 44px; background: rgba(255,255,255,0.2); position: relative; overflow: hidden; }
.hh__scroll-line span { position: absolute; top: 0; left: 0; width: 100%; height: 40%; background: var(--gold-light); animation: scrolldown 1.8s var(--ease) infinite; }
@keyframes scrolldown { 0% { transform: translateY(-100%); } 100% { transform: translateY(280%); } }

@media (max-width: 1000px) {
  .hh__inner { grid-template-columns: 1fr; text-align: center; }
  .hh__board, .hh__cta, .hh__stats { justify-content: center; }
  .hh .flap-board { justify-content: center; }
  .hh__lead { margin-inline: auto; }
  .hh__visual { height: 440px; order: -1; margin-top: 10px; }
  .hh__scroll { display: none; }
}
@media (max-width: 520px) { .hh__visual { height: 400px; } .hh__stamp-ink { width: 84px; height: 84px; } }

/* ============================================================
   TERMINAL NAV
   ============================================================ */
.term-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease), padding 0.5s var(--ease);
  padding-block: 16px;
}
.term-nav--scrolled {
  background: rgba(246, 242, 233, 0.82); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 0 var(--paper-line), var(--shadow-sm); padding-block: 10px;
}
.term-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.term-brand { display: flex; align-items: center; gap: 12px; }
.term-brand img { width: 44px; height: 44px; object-fit: contain; }
/* Default nav sits over a DARK page header → light text.
   Once scrolled onto the light glass bar, it flips to dark (rules below). */
.term-brand b { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -0.01em; transition: color 0.4s; }
.term-brand span { display: block; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 3px; transition: color 0.4s; }

.term-links { display: flex; align-items: center; gap: 4px; }
.term-link {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.72); padding: 9px 14px; border-radius: 8px; position: relative; transition: color 0.3s;
}
.term-link:hover { color: #fff; }
.term-link--active { color: var(--gold-light); font-weight: 700; }
.term-link--active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; background: var(--grad-gold); border-radius: 2px; }
.term-nav .btn { margin-left: 8px; padding: 11px 18px; }

.term-clock { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.7); padding: 6px 12px; border: 1px solid rgba(255,255,255,0.22); border-radius: 8px; display: flex; align-items: center; gap: 8px; transition: color 0.4s, border-color 0.4s; }

/* Scrolled: glass light bar → dark text */
.term-nav--scrolled .term-brand b { color: var(--ink); }
.term-nav--scrolled .term-brand span { color: var(--muted); }
.term-nav--scrolled .term-link { color: var(--muted); }
.term-nav--scrolled .term-link:hover { color: var(--ink); }
.term-nav--scrolled .term-link--active { color: var(--gold-deep); }
.term-nav--scrolled .term-clock { color: var(--muted); border-color: var(--paper-line); }
.term-nav--scrolled .term-toggle span { background: var(--ink); }

/* Open mobile menu shows a light panel → dark links + toggle */
.term-nav--open .term-link { color: var(--muted); }
.term-nav--open .term-link:hover { color: var(--ink); }
.term-nav--open .term-link--active { color: var(--gold-deep); }
.term-nav--open .term-toggle span { background: var(--ink); }
.term-clock i { width: 7px; height: 7px; border-radius: 50%; background: #29c26b; box-shadow: 0 0 0 3px rgba(41,194,107,0.2); animation: blink 2s infinite; font-style: normal; }
@keyframes blink { 50% { opacity: 0.4; } }

.term-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; z-index: 110; }
.term-toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.4s var(--ease), opacity 0.3s, background 0.4s; }
.term-nav--open .term-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.term-nav--open .term-toggle span:nth-child(2) { opacity: 0; }
.term-nav--open .term-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) { .term-clock { display: none; } }
@media (max-width: 1000px) {
  .term-toggle { display: flex; }
  .term-links {
    position: fixed; inset: 0 0 0 auto; width: min(84vw, 380px);
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
    background: var(--paper); padding: 48px 34px; box-shadow: var(--shadow-lg);
    transform: translateX(100%); transition: transform 0.55s var(--ease); z-index: 105;
  }
  .term-nav--open .term-links { transform: translateX(0); }
  .term-link { font-size: 1.1rem; width: 100%; padding: 12px 8px; }
  .term-nav .btn { margin-left: 0; margin-top: 14px; width: 100%; }
}

/* ============================================================
   SPLIT-FLAP DEPARTURE BOARD
   ============================================================ */
.flap-board { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.flap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 0.72em; padding: 0.1em 0.14em;
  font-family: var(--font-mono); font-weight: 700;
  background: linear-gradient(#12203f, #0a1428);
  color: var(--gold-light); border-radius: 5px;
  position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.3);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,0.55); transform: translateY(-0.5px); }
.flap--space { background: transparent; box-shadow: none; min-width: 0.32em; }
.flap--space::after { display: none; }
.flap.is-flipping { animation: flapflip 0.12s var(--ease); }
@keyframes flapflip { 0% { transform: rotateX(0); } 50% { transform: rotateX(-40deg); } 100% { transform: rotateX(0); } }

/* ============================================================
   BOARDING PASS
   ============================================================ */
.pass {
  --notch: var(--paper);
  display: grid; grid-template-columns: 1fr 128px;
  background: linear-gradient(180deg, #ffffff, #fbf8f1);
  border-radius: 18px; box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden; border: 1px solid rgba(11,27,58,0.06);
}
.pass__main { padding: 26px 28px; position: relative; }
.pass__brandrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.pass__airline { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue); font-weight: 700; }
.pass__type { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.pass__route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-bottom: 22px; }
.pass__code { font-family: var(--font-mono); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--ink); line-height: 1; }
.pass__place { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.pass__mid { color: var(--gold); font-size: 1.3rem; position: relative; }
.pass__dots { display: flex; align-items: center; gap: 5px; color: var(--paper-line); }
.pass__dots::before, .pass__dots::after { content: ""; height: 1px; width: 22px; background: repeating-linear-gradient(90deg, var(--paper-line) 0 4px, transparent 4px 8px); }
.pass__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
.pass__cell b { display: block; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.pass__cell span { font-family: var(--font-mono); font-size: 0.92rem; color: var(--ink); font-weight: 700; }

.pass__stub {
  background: linear-gradient(180deg, #eef4fc, #e4edfa);
  padding: 24px 16px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px;
  position: relative;
}
.pass__perf {
  position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
  background: repeating-linear-gradient(180deg, rgba(11,27,58,0.28) 0 7px, transparent 7px 15px);
}
.pass__perf::before, .pass__perf::after {
  content: ""; position: absolute; left: 50%; width: 20px; height: 20px; border-radius: 50%;
  background: var(--notch); transform: translateX(-50%);
}
.pass__perf::before { top: -10px; }
.pass__perf::after { bottom: -10px; }
.pass__seat { text-align: center; }
.pass__seat b { display: block; font-family: var(--font-mono); font-size: 0.54rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pass__seat span { font-family: var(--font-serif); font-weight: 700; font-size: 2rem; color: var(--ink); line-height: 1; }
.barcode { width: 100%; height: 54px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 3px, var(--ink) 3px 4px, transparent 4px 7px, var(--ink) 7px 8px, transparent 8px 11px); border-radius: 3px; opacity: 0.85; }
.barcode--v { width: 20px; height: 100%; min-height: 80px; background: repeating-linear-gradient(180deg, var(--ink) 0 2px, transparent 2px 3px, var(--ink) 3px 4px, transparent 4px 7px, var(--ink) 7px 8px, transparent 8px 11px); }

/* ============================================================
   PASSPORT STAMP
   ============================================================ */
.stamp {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  width: 132px; height: 132px; border-radius: 50%;
  border: 2.5px solid var(--stamp-blue); color: var(--stamp-blue);
  font-family: var(--font-mono); text-transform: uppercase; padding: 10px;
  transform: rotate(var(--rot, -8deg)); opacity: 0.92;
  box-shadow: inset 0 0 0 4px rgba(38,81,143,0.12);
  position: relative; mix-blend-mode: multiply;
}
.stamp::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 1px dashed currentColor; opacity: 0.5; }
.stamp b { font-size: 0.62rem; letter-spacing: 0.1em; font-weight: 700; line-height: 1.2; }
.stamp span { font-size: 0.5rem; letter-spacing: 0.14em; margin-top: 4px; opacity: 0.8; }
.stamp em { font-style: normal; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.04em; margin: 2px 0; }
.stamp--red { border-color: var(--stamp-red); color: var(--stamp-red); box-shadow: inset 0 0 0 4px rgba(181,67,63,0.1); }
.stamp--gold { border-color: var(--stamp-gold); color: var(--stamp-gold); box-shadow: inset 0 0 0 4px rgba(162,121,44,0.12); }
.stamp--rect { border-radius: 10px; width: 150px; height: 108px; }
.stamp--rect::before { border-radius: 6px; }
.stamp-in { opacity: 0; transform: rotate(var(--rot, -8deg)) scale(1.6); transition: opacity 0.5s var(--ease), transform 0.45s var(--ease-back); }
.stamp-in.is-visible { opacity: 0.92; transform: rotate(var(--rot, -8deg)) scale(1); }

/* ============================================================
   TICKET (destination card)
   ============================================================ */
.ticket {
  --notch: var(--paper-2);
  display: block; background: linear-gradient(180deg, #ffffff, #fbf8f1);
  border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm);
  border: 1px solid rgba(11,27,58,0.06); position: relative;
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.ticket:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.ticket__top { position: relative; height: 150px; overflow: hidden; background: var(--grad-brand); }
.ticket__top::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(4,11,29,0.5) 0%, rgba(4,11,29,0.12) 32%, rgba(4,11,29,0.12) 60%, rgba(4,11,29,0.55) 100%); }
.ticket__flag { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.8s var(--ease); }
.ticket:hover .ticket__flag { transform: scale(1.08); }
.ticket__code { position: absolute; top: 14px; right: 16px; z-index: 2; font-family: var(--font-mono); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.14em; color: var(--gold-light); text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.ticket__tear { position: relative; height: 0; }
.ticket__tear::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: repeating-linear-gradient(90deg, var(--paper-line) 0 6px, transparent 6px 12px); }
.ticket__tear::after { content: ""; position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--notch); }
.ticket__notch-r { position: absolute; right: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--notch); z-index: 2; }
.ticket__body { padding: 24px 24px 26px; position: relative; }
.ticket__city { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue); }
.ticket__name { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; color: var(--ink); margin: 4px 0 8px; }
.ticket__blurb { color: var(--muted); font-size: 0.92rem; }
.ticket__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--paper-line); }
.ticket__meta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
.ticket__go { font-family: var(--font-mono); font-size: 0.72rem; color: var(--blue); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.3s; }
.ticket:hover .ticket__go { gap: 12px; }

/* ============================================================
   ROUTE LINE (SVG draw-on-scroll)
   ============================================================ */
.route-wrap { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 200px; pointer-events: none; z-index: 0; }
.route-svg { width: 100%; height: auto; display: block; overflow: visible; }
.route-path { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 8 8; stroke-linecap: round; }
.route-solid { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; }
.route-node { fill: var(--paper); stroke: var(--blue); stroke-width: 2.5; }
.route-plane { fill: var(--gold-deep); }

/* ============================================================
   FEATURE / GENERIC CARDS
   ============================================================ */
.card {
  background: linear-gradient(180deg, #ffffff, #fbf8f1);
  border: 1px solid rgba(11,27,58,0.07); border-radius: var(--radius);
  padding: 32px 28px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s;
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(46,123,224,0.28); }
.card__ico { width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 20px; background: var(--paper-2); border: 1px solid var(--paper-line); transition: transform 0.5s var(--ease); }
.card:hover .card__ico { transform: translateY(-4px) rotate(-6deg) scale(1.05); }
.card h3 { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 0.95rem; }

/* ============================================================
   FOOTER (Arrivals)
   ============================================================ */
.footer { background: var(--grad-night); color: rgba(255,255,255,0.72); position: relative; overflow: hidden; padding-top: 72px; }
.footer::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(80% 80% at 50% 0%, #000, transparent 75%); }
.footer__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 46px; }
.footer__board { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 46px; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); flex-wrap: wrap; }
.footer__board i { color: #29c26b; font-style: normal; }
.footer .term-brand b { color: #fff; }
.footer .term-brand span { color: var(--gold-light); }
.footer__brand > p { margin-top: 18px; max-width: 320px; font-size: 0.92rem; }
.footer__socials { display: flex; gap: 10px; margin-top: 22px; }
.footer__socials a { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #fff; transition: transform 0.4s var(--ease), background 0.4s, color 0.4s; }
.footer__socials a:hover { transform: translateY(-4px); background: var(--grad-gold); color: var(--night); border-color: transparent; }
.footer__col h4 { color: #fff; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 18px; }
.footer__col a { display: block; font-size: 0.92rem; margin-bottom: 11px; transition: color 0.3s, transform 0.3s; }
.footer__col a:hover { color: var(--gold-light); transform: translateX(4px); }
.footer__bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-block: 24px; border-top: 1px solid rgba(255,255,255,0.1); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; }
@media (max-width: 900px) { .footer__inner { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: span 2; } }
@media (max-width: 540px) { .footer__inner { grid-template-columns: 1fr; } .footer__brand { grid-column: auto; } .footer__bottom { flex-direction: column; text-align: center; } }

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
.pagehead { position: relative; padding-top: 150px; padding-bottom: 60px; overflow: hidden; background: var(--grad-night); color: #fff; }
.pagehead::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(90% 80% at 50% 20%, #000, transparent 78%); }
.pagehead__glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(80px); top: -180px; right: -80px; background: radial-gradient(circle, rgba(46,123,224,0.5), transparent 65%); }
.pagehead__glow2 { position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(80px); bottom: -200px; left: -80px; background: radial-gradient(circle, rgba(231,201,122,0.34), transparent 65%); }
.pagehead__inner { position: relative; z-index: 1; }
.pagehead .display { color: #fff; }
.pagehead .lead { color: rgba(255,255,255,0.72); max-width: 640px; margin-top: 20px; }
.crumbs { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 24px; }
.crumbs a:hover { color: var(--gold-light); }
.crumbs span { color: var(--gold-light); }

/* ============================================================
   SECTION HELPERS
   ============================================================ */
.paper { background: var(--paper); }
.paper-2 { background: var(--paper-2); }
.night { background: var(--grad-night); color: #fff; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; } }

/* Stats row */
.statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat__num { font-family: var(--font-serif); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; }
.stat__label { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.night .stat__num { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.night .stat__label { color: rgba(255,255,255,0.6); }
@media (max-width: 680px) { .statrow { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; } }

/* ============================================================
   FORM (check-in)
   ============================================================ */
.checkin { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { position: relative; }
.field--full { grid-column: span 2; }
.field input, .field select, .field textarea {
  width: 100%; padding: 20px 15px 9px; border-radius: 10px; resize: none;
  background: #fff; border: 1px solid var(--paper-line); color: var(--ink);
  font-family: var(--font-sans); font-size: 0.98rem; transition: border-color 0.3s, box-shadow 0.3s;
}
.field textarea { padding-top: 24px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46,123,224,0.14); }
.field label { position: absolute; left: 15px; top: 16px; font-family: var(--font-mono); font-size: 0.9rem; color: var(--muted); pointer-events: none; transition: all 0.25s var(--ease); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field.filled label, .field .label--select {
  top: 7px; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue);
}
/* selects always show a floated label + give the value clear room below it */
.field select { padding-top: 23px; padding-bottom: 7px; min-height: 58px; }
.checkin__note { grid-column: span 2; text-align: center; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.checkin__success { grid-column: span 2; display: none; align-items: center; gap: 10px; justify-content: center; padding: 14px; border-radius: 10px; background: rgba(41,194,107,0.12); border: 1px solid rgba(41,194,107,0.35); color: #1c8a4c; font-weight: 700; font-size: 0.9rem; }
.checkin__success.show { display: flex; animation: fadeUp 0.5s var(--ease); }
.checkin__success span { width: 24px; height: 24px; border-radius: 50%; background: #29c26b; color: #fff; display: grid; place-items: center; }
@media (max-width: 560px) { .checkin { grid-template-columns: 1fr; } .field--full, .checkin__note, .checkin__success { grid-column: auto; } }

/* ============================================================
   HOME sections
   ============================================================ */
.trust-strip { display: flex; align-items: center; justify-content: center; gap: 14px 26px; flex-wrap: wrap; position: relative; z-index: 1; }
.trust-strip__uni { font-family: var(--font-serif); font-size: clamp(1.05rem, 2vw, 1.5rem); font-weight: 600; color: var(--ink); opacity: 0.42; transition: opacity 0.3s; }
.trust-strip__uni:hover { opacity: 0.85; }

.journey { position: relative; max-width: 940px; margin: 0 auto; }
.journey__route { z-index: 0; }
.journey__leg { position: relative; z-index: 1; width: calc(50% - 46px); margin-bottom: 40px; }
.journey__leg--right { margin-left: auto; }
.journey__card { position: relative; }
.journey__legcode { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); font-weight: 700; margin-bottom: 8px; }
.journey__card h3 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.journey__card p { color: var(--muted); font-size: 0.95rem; }
.journey__stamp { display: inline-block; margin-top: 16px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--stamp-red); border: 1.5px solid var(--stamp-red); border-radius: 6px; padding: 4px 10px; transform: rotate(-3deg); opacity: 0.85; }
@media (max-width: 820px) {
  .journey__route { left: 26px; transform: none; }
  .journey__leg, .journey__leg--right { width: auto; margin-left: 60px; }
}

/* Success — arrivals board */
.arrivals { border: 1px solid var(--paper-line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); background: linear-gradient(180deg,#fff,#fbf8f1); position: relative; z-index: 1; }
.arrivals__head, .arrivals__row { display: grid; grid-template-columns: 1.4fr 0.6fr 1.6fr 1fr; align-items: center; gap: 14px; padding: 16px 22px; }
.arrivals__head { background: var(--ink); color: rgba(255,255,255,0.6); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; }
.arrivals__row { border-top: 1px solid var(--paper-line); transition: background 0.3s; }
.arrivals__row:hover { background: var(--paper-2); }
.arrivals__pax { font-weight: 600; color: var(--ink); }
.arrivals__pax em, .arrivals__uni em { display: block; font-style: normal; font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); margin-top: 3px; letter-spacing: 0.02em; }
.arrivals__code { font-family: var(--font-mono); font-weight: 700; color: var(--blue); letter-spacing: 0.08em; }
.arrivals__uni { color: var(--ink-2); font-size: 0.94rem; }
.arrivals__status { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: #1c8a4c; font-weight: 700; }
@media (max-width: 760px) { .arrivals__head, .arrivals__row { grid-template-columns: 1.4fr 0.5fr 1fr; } .arrivals__uni { display: none; } }

.quote-card { position: relative; background: linear-gradient(180deg,#fff,#fbf8f1); border: 1px solid rgba(11,27,58,0.07); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.quote-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.quote-card__mark { font-family: var(--font-serif); font-size: 4.5rem; line-height: 0.5; color: var(--gold); height: 34px; }
.quote-card blockquote { font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.45; color: var(--ink); font-weight: 500; }
.quote-card figcaption { display: flex; align-items: center; gap: 13px; margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--paper-line); }
.quote-card__avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; color: var(--night); background: var(--grad-gold); flex-shrink: 0; }
.quote-card figcaption strong { display: block; color: var(--ink); }
.quote-card figcaption em { font-style: normal; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }

/* Contact — check-in */
.checkin-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 50px; align-items: start; position: relative; z-index: 1; }
.checkin-steps { display: flex; flex-direction: column; gap: 18px; margin: 22px 0 30px; }
.checkin-step { display: flex; gap: 16px; align-items: flex-start; }
.checkin-step__n { font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem; color: var(--night); background: var(--grad-gold); width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.checkin-step strong { font-family: var(--font-serif); font-size: 1.2rem; color: var(--ink); }
.checkin-step p { color: var(--muted); font-size: 0.9rem; }
.checkin-contacts { display: flex; flex-direction: column; gap: 12px; padding-top: 26px; border-top: 1px solid var(--paper-line); }
.checkin-contacts li { display: flex; align-items: center; gap: 13px; font-size: 0.96rem; color: var(--ink-2); }
.checkin-contacts a:hover { color: var(--blue); }
.checkin-contacts span { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--paper-2); border: 1px solid var(--paper-line); flex-shrink: 0; }
.checkin-trust { display: flex; align-items: center; gap: 15px; margin-top: 26px; }
.checkin-trust__avatars { display: flex; }
.checkin-trust__avatars span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem; color: var(--night); background: var(--grad-gold); border: 2px solid var(--paper); margin-left: -11px; }
.checkin-trust__avatars span:first-child { margin-left: 0; }
.checkin-trust p { font-size: 0.9rem; color: var(--muted); }
.checkin-card { background: linear-gradient(180deg,#fff,#fbf8f1); border: 1px solid rgba(11,27,58,0.08); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.checkin-card__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 26px; background: var(--ink); color: #fff; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.checkin-card__flight { color: var(--gold-light); }
.checkin-card .checkin { padding: 28px 26px; }
@media (max-width: 900px) { .checkin-grid { grid-template-columns: 1fr; gap: 34px; } }

/* Destinations hub — departures board */
.depboard { margin-top: 40px; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,0.03); backdrop-filter: blur(6px); max-width: 720px; }
.depboard__head, .depboard__row { display: grid; grid-template-columns: 2fr 0.8fr 1fr 1.2fr; align-items: center; gap: 12px; padding: 13px 20px; font-family: var(--font-mono); font-size: 0.78rem; }
.depboard__head { background: rgba(0,0,0,0.25); color: rgba(255,255,255,0.5); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; }
.depboard__row { color: rgba(255,255,255,0.85); border-top: 1px solid rgba(255,255,255,0.08); transition: background 0.3s, color 0.3s; }
.depboard__row:hover { background: rgba(46,123,224,0.14); }
.depboard__code { color: var(--gold-light); font-weight: 700; letter-spacing: 0.08em; }
.depboard__intake { color: rgba(255,255,255,0.6); }
.depboard__status { color: #29c26b; font-size: 0.66rem; letter-spacing: 0.08em; }
@media (max-width: 620px) { .depboard__head, .depboard__row { grid-template-columns: 1.6fr 0.7fr 1fr; } .depboard__intake { display: none; } }

/* Destination detail */
.dd-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; }
.dd-head__code { font-family: var(--font-mono); font-weight: 700; font-size: clamp(4rem, 12vw, 9rem); color: rgba(255,255,255,0.06); line-height: 0.8; letter-spacing: 0.02em; }
@media (max-width: 860px) { .dd-head { grid-template-columns: 1fr; } .dd-head__code { display: none; } }
.dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.dd-grid .h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; }
.dd-highlights { display: flex; flex-direction: column; gap: 16px; }
.dd-highlight h3 { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.dd-highlight p { color: var(--muted); font-size: 0.94rem; }
@media (max-width: 860px) { .dd-grid { grid-template-columns: 1fr; gap: 28px; } }
.dd-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dd-detail { background: linear-gradient(180deg,#fff,#fbf8f1); border: 1px solid rgba(11,27,58,0.07); border-radius: 14px; padding: 24px; box-shadow: var(--shadow-sm); }
.dd-detail--wide { grid-column: span 3; }
.dd-detail__k { display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; font-weight: 700; }
.dd-detail p { color: var(--ink-2); font-size: 0.98rem; }
.dd-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.dd-chip { font-family: var(--font-mono); font-size: 0.76rem; padding: 8px 14px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--paper-line); color: var(--ink-2); }
@media (max-width: 720px) { .dd-details { grid-template-columns: 1fr; } .dd-detail--wide { grid-column: auto; } }
.dd-cta__inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
.dd-cta__stamp { display: grid; place-items: center; }
@media (max-width: 780px) { .dd-cta__inner { grid-template-columns: 1fr; } .dd-cta__stamp { justify-self: start; } }

/* Services */
.svc-list { display: flex; flex-direction: column; gap: 22px; max-width: 980px; margin: 0 auto; }
.svc-item { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 30px; background: linear-gradient(180deg, #fff, #fbf8f1); border: 1px solid rgba(11,27,58,0.07); border-radius: var(--radius-lg); padding: 34px 36px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.svc-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.svc-item__left { text-align: center; }
.svc-item__ico { width: 74px; height: 74px; border-radius: 18px; display: grid; place-items: center; font-size: 2rem; background: var(--paper-2); border: 1px solid var(--paper-line); margin: 0 auto 12px; }
.svc-item__code { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); font-weight: 700; }
.svc-item__body h2 { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.svc-item__body > p { color: var(--muted); font-size: 1rem; max-width: 620px; }
.svc-item__points { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; margin-top: 18px; }
.svc-item__points li { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; color: var(--ink-2); }
.svc-item__points span { width: 18px; height: 18px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-size: 0.66rem; font-weight: 700; flex-shrink: 0; }
.svc-item__num { position: absolute; top: 10px; right: 22px; font-family: var(--font-serif); font-weight: 700; font-size: 5rem; color: rgba(11,27,58,0.05); line-height: 1; pointer-events: none; }
@media (max-width: 720px) { .svc-item { grid-template-columns: 1fr; gap: 18px; padding: 26px 24px; } .svc-item__left { display: flex; align-items: center; gap: 14px; } .svc-item__ico { margin: 0; width: 56px; height: 56px; font-size: 1.5rem; } .svc-item__points { grid-template-columns: 1fr; } .svc-item__num { font-size: 3.4rem; } }
.svc-item__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); transition: gap 0.3s; }
.svc-item:hover .svc-item__go { gap: 14px; }
.svc-item__go svg { transition: transform 0.3s var(--ease); }

/* Service detail — what's included card */
.svc-detail__card { padding: 30px 30px 32px; }
.svc-detail__cardhead { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; color: var(--ink); margin-bottom: 18px; }
.svc-detail__points { display: grid; gap: 13px; }
.svc-detail__points li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.98rem; color: var(--ink-2); }
.svc-detail__points span { width: 20px; height: 20px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-size: 0.68rem; font-weight: 700; flex-shrink: 0; margin-top: 2px; }

/* Service detail — process steps */
.svc-step { padding-top: 30px; }
.svc-step__n { display: inline-block; font-family: var(--font-mono); font-weight: 700; font-size: 0.82rem; color: var(--night); background: var(--grad-gold); width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 16px; }
.svc-step h3 { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.svc-step p { color: var(--muted); font-size: 0.92rem; }

/* Service detail — related mini cards */
.svc-mini { display: block; }
.svc-mini__go { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); transition: gap 0.3s; }
.svc-mini:hover .svc-mini__go { gap: 12px; }

/* FAQ accordion */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: linear-gradient(180deg, #fff, #fbf8f1); border: 1px solid rgba(11,27,58,0.08); border-radius: 14px; padding: 4px 24px; box-shadow: var(--shadow-sm); transition: border-color 0.3s; }
.faq__item[open] { border-color: rgba(46,123,224,0.28); }
.faq__q { list-style: none; cursor: pointer; padding: 18px 0; font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; font-family: var(--font-mono); font-size: 1.4rem; color: var(--blue); transition: transform 0.3s var(--ease); flex-shrink: 0; }
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a { padding: 0 0 20px; color: var(--muted); font-size: 0.98rem; max-width: 62ch; }

/* Downloadable resource cards */
.dl-card { display: flex; flex-direction: column; }
.dl-card__tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); font-weight: 700; margin-bottom: 8px; }
.dl-card p { flex: 1; margin-bottom: 22px; }
.dl-card__btn { align-self: flex-start; }
.dl-card__btn svg { transition: transform 0.4s var(--ease); }
.dl-card:hover .dl-card__btn svg { transform: translateY(3px); }

/* ============================================================
   DESTINATION / UNIVERSITY FINDER
   ============================================================ */
.finder { position: relative; z-index: 1; }
.finder__bar { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.finder__search { position: relative; display: flex; align-items: center; }
.finder__search svg { position: absolute; left: 15px; color: var(--muted); pointer-events: none; }
.finder__search input { width: 100%; padding: 15px 16px 15px 44px; border-radius: 12px; background: #fff; border: 1px solid var(--paper-line); color: var(--ink); font-family: var(--font-sans); font-size: 0.98rem; transition: border-color 0.3s, box-shadow 0.3s; }
.finder__bar select { padding: 15px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--paper-line); color: var(--ink); font-family: var(--font-sans); font-size: 0.95rem; cursor: pointer; transition: border-color 0.3s, box-shadow 0.3s; }
.finder__search input:focus, .finder__bar select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46,123,224,0.14); }
.finder__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.finder__clear { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); font-weight: 700; }
.finder__clear:hover { color: var(--ink); }
.finder__empty { text-align: center; padding: 60px 20px; }
.finder__empty p { color: var(--muted); margin-bottom: 18px; }
@media (max-width: 760px) { .finder__bar { grid-template-columns: 1fr; } }

/* ============================================================
   REVIEWS (Google-style)
   ============================================================ */
.rv-summary { display: inline-flex; align-items: center; gap: 16px; margin-top: 22px; padding: 12px 22px; border-radius: 999px; background: linear-gradient(180deg,#fff,#fbf8f1); border: 1px solid rgba(11,27,58,0.08); box-shadow: var(--shadow-sm); }
.rv-summary__num { font-family: var(--font-serif); font-weight: 700; font-size: 2rem; color: var(--ink); line-height: 1; }
.rv-summary__meta { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.rv-stars { color: var(--gold); letter-spacing: 2px; font-size: 0.95rem; }
.rv-card { display: flex; flex-direction: column; height: 100%; background: linear-gradient(180deg,#fff,#fbf8f1); border: 1px solid rgba(11,27,58,0.07); border-radius: var(--radius); padding: 26px 26px 24px; box-shadow: var(--shadow-sm); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.rv-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.rv-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rv-card__avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; color: var(--night); background: var(--grad-gold); flex-shrink: 0; }
.rv-card__top strong { display: block; color: var(--ink); font-size: 0.98rem; }
.rv-card__top em { font-style: normal; font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); }
.rv-card__g { margin-left: auto; flex-shrink: 0; }
.rv-card blockquote { margin-top: 12px; color: var(--ink-2); font-size: 0.96rem; line-height: 1.55; flex: 1; }
.rv-card figcaption { margin-top: 16px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* ============================================================
   SOCIAL FEED (placeholder grid)
   ============================================================ */
.social-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; position: relative; z-index: 1; }
.social-tile { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--grad-brand); box-shadow: var(--shadow-sm); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.social-tile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 130%, rgba(231,201,122,0.4), transparent 60%); }
.social-tile:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-md); }
.social-tile__emoji { font-size: 2.4rem; position: relative; z-index: 1; transition: transform 0.5s var(--ease); filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25)); }
.social-tile:hover .social-tile__emoji { transform: scale(1.15) translateY(-2px); }
.social-tile__cap { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 10px 12px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em; color: #fff; background: linear-gradient(180deg, transparent, rgba(5,13,32,0.85)); opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.4s; }
.social-tile:hover .social-tile__cap { opacity: 1; transform: none; }
.social-tile__ig { position: absolute; top: 10px; right: 12px; z-index: 2; color: var(--gold-light); font-size: 1rem; }
@media (max-width: 900px) { .social-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .social-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   BLOG
   ============================================================ */
.blog-feature { display: grid; grid-template-columns: 0.9fr 1.1fr; background: linear-gradient(180deg,#fff,#fbf8f1); border: 1px solid rgba(11,27,58,0.07); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.blog-feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.blog-feature__cover { position: relative; background: var(--grad-brand); display: grid; place-items: center; min-height: 260px; }
.blog-feature__cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 130%, rgba(231,201,122,0.4), transparent 60%); }
.blog-feature__cover span { font-size: 5rem; position: relative; z-index: 1; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3)); }
.blog-feature__body { padding: 38px 40px; display: flex; flex-direction: column; justify-content: center; }
.blog-feature__body h2 { font-family: var(--font-serif); font-size: clamp(1.5rem,2.6vw,2rem); font-weight: 600; color: var(--ink); margin: 10px 0 12px; }
.blog-feature__body p { color: var(--muted); margin-bottom: 18px; }
@media (max-width: 780px) { .blog-feature { grid-template-columns: 1fr; } .blog-feature__cover { min-height: 180px; } .blog-feature__body { padding: 28px 26px; } }

.blog-card { display: flex; flex-direction: column; height: 100%; background: linear-gradient(180deg,#fff,#fbf8f1); border: 1px solid rgba(11,27,58,0.07); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.blog-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.blog-card__cover { position: relative; height: 150px; background: var(--grad-brand); display: grid; place-items: center; }
.blog-card__cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 130%, rgba(231,201,122,0.4), transparent 60%); }
.blog-card__cover span { font-size: 3.2rem; position: relative; z-index: 1; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3)); transition: transform 0.6s var(--ease); }
.blog-card:hover .blog-card__cover span { transform: scale(1.14) translateY(-3px); }
.blog-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.blog-card__cat { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); font-weight: 700; }
.blog-card__body h3 { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; color: var(--ink); margin: 8px 0 8px; line-height: 1.25; }
.blog-card__body p { color: var(--muted); font-size: 0.92rem; flex: 1; }
.blog-card__meta { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.blog-card__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); transition: gap 0.3s; }
.blog-feature:hover .blog-card__go { gap: 14px; }

.blog-post__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.7); }
.blog-post__emoji { font-size: 1.4rem; }
.blog-article { max-width: 760px; }
.blog-article__lead { font-family: var(--font-serif); font-size: clamp(1.15rem,2vw,1.4rem); line-height: 1.5; color: var(--ink); font-weight: 500; margin-bottom: 10px; }
.blog-article article h2 { font-family: var(--font-serif); font-size: clamp(1.35rem,2.4vw,1.7rem); font-weight: 600; color: var(--ink); margin: 34px 0 12px; }
.blog-article article p { color: var(--ink-2); font-size: 1.05rem; line-height: 1.75; margin-bottom: 18px; }
.blog-article__list { margin: 0 0 20px; display: grid; gap: 10px; }
.blog-article__list li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: 1.02rem; line-height: 1.6; }
.blog-article__list li::before { content: "✈"; position: absolute; left: 0; top: 1px; color: var(--gold-deep); font-size: 0.9rem; }
.blog-article__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; padding-top: 30px; border-top: 1px dashed var(--paper-line); }

/* About */
.about-mission { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; position: relative; z-index: 1; }
@media (max-width: 860px) { .about-mission { grid-template-columns: 1fr; gap: 24px; } }
.stamp-row { display: flex; flex-wrap: wrap; gap: 30px 46px; justify-content: center; align-items: center; }
.crew-card { text-align: center; }
.crew-card__avatar { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; color: var(--night); background: var(--grad-gold); }
.crew-card__role { display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }

.cta-final { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; position: relative; z-index: 1; }
.cta-final__pass { transform: rotate(2deg); }
@media (max-width: 900px) { .cta-final { grid-template-columns: 1fr; } .cta-final__pass { transform: none; } }

/* ============================================================
   Reveal / cursor / scroll progress / page transition
   ============================================================ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.reveal-el { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); will-change: transform, opacity; }
.reveal-el.is-visible { opacity: 1; transform: none; }

.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200; background: var(--grad-gold); box-shadow: 0 0 12px rgba(231,201,122,0.6); }

.cursor, .cursor-dot { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 300; transform: translate(-50%, -50%); }
.cursor { width: 34px; height: 34px; border: 1.5px solid rgba(46,123,224,0.5); transition: width 0.3s var(--ease), height 0.3s var(--ease), background 0.3s, border-color 0.3s; }
.cursor.is-hover { width: 54px; height: 54px; background: rgba(198,162,80,0.1); border-color: rgba(198,162,80,0.85); }
.cursor-dot { width: 6px; height: 6px; background: var(--blue); }
@media (max-width: 1000px), (pointer: coarse) { .cursor, .cursor-dot { display: none; } }

.page-fade { animation: pagein 0.6s var(--ease); }
@keyframes pagein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ============================================================
   WHATSAPP FLOATING CHAT
   ============================================================ */
.wa {
  position: fixed; right: 22px; bottom: 22px; z-index: 150;
  display: inline-flex; align-items: center; gap: 0;
  height: 60px; width: 60px; padding: 0;
  border-radius: 999px; overflow: hidden;
  background: #25d366; color: #fff;
  box-shadow: 0 14px 34px -8px rgba(37,211,102,0.6), 0 4px 12px rgba(0,0,0,0.18);
  transition: width 0.45s var(--ease), padding 0.45s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.wa__icon { flex-shrink: 0; margin: 0 16px; }
.wa__label { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); padding-right: 4px; }
.wa__pulse { position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 0 rgba(37,211,102,0.5); animation: waPulse 2.4s var(--ease) infinite; }
@keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
.wa:hover { width: 186px; padding-right: 8px; transform: translateY(-3px); box-shadow: 0 20px 44px -10px rgba(37,211,102,0.7); }
.wa:hover .wa__label { opacity: 1; transform: none; }
@media (max-width: 600px) { .wa { right: 16px; bottom: 16px; height: 54px; width: 54px; } .wa__icon { margin: 0 13px; } .wa:hover { width: 54px; padding-right: 0; } .wa:hover .wa__label { display: none; } }
@media (prefers-reduced-motion: reduce) { .wa__pulse { animation: none; } }

/* ============================================================
   NEWSLETTER (footer)
   ============================================================ */
.newsletter { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); padding-block: 34px; margin-bottom: 46px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px 40px; align-items: center; }
.newsletter__copy h4 { color: #fff; font-family: var(--font-serif); font-size: 1.4rem; font-weight: 600; margin-bottom: 6px; }
.newsletter__copy p { font-size: 0.92rem; color: rgba(255,255,255,0.6); max-width: 380px; }
.newsletter__form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter__input { flex: 1 1 200px; min-width: 0; padding: 14px 16px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); color: #fff; font-family: var(--font-sans); font-size: 0.95rem; transition: border-color 0.3s, box-shadow 0.3s; }
.newsletter__input::placeholder { color: rgba(255,255,255,0.45); }
.newsletter__input:focus { outline: none; border-color: var(--gold-light); box-shadow: 0 0 0 3px rgba(231,201,122,0.18); }
.newsletter__form .btn { padding: 14px 22px; }
.newsletter__ok { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.8rem; color: #29c26b; }
.newsletter__ok span { width: 22px; height: 22px; border-radius: 50%; background: #29c26b; color: var(--night); display: grid; place-items: center; font-size: 0.7rem; }
@media (max-width: 760px) { .newsletter { grid-template-columns: 1fr; gap: 18px; } }

/* ============================================================
   PHONE REFINEMENTS
   ============================================================ */
@media (max-width: 600px) {
  .container { padding-inline: 18px; }
  .section { padding-block: clamp(56px, 15vw, 96px); }
  .pagehead { padding-top: 128px; }

  /* Full-width, thumb-friendly primary actions */
  .hh__cta, .cta-final .hh__cta { width: 100%; }
  .hh__cta .btn { flex: 1 1 46%; }

  /* Boarding pass — narrower stub, roomier 2-col data grid */
  .pass { grid-template-columns: 1fr 92px; }
  .pass__main { padding: 20px 18px; }
  .pass__stub { padding: 18px 10px; }
  .pass__grid { grid-template-columns: repeat(2, 1fr); gap: 13px 10px; }
  .pass__cell span { font-size: 0.82rem; }
  .pass__code { font-size: 1.7rem; }

  /* Hero visual */
  .hh { padding-top: 118px; }
  .hh__visual { height: 380px; }
  .hh__pass { width: min(310px, 100%); }
  .hh__stats { gap: 18px 26px; }
  .hh__stat-num { font-size: 1.7rem; }
  .hh__flap { font-size: clamp(1.15rem, 6vw, 1.7rem); }
  .flap { min-width: 0.68em; }

  /* keep stamps from clipping off-screen */
  .hh__stamp--1 { top: 1%; right: 3%; }
  .hh__stamp--2 { bottom: 6%; left: 2%; }
  .hh__stamp--3 { top: 42%; right: 2%; }

  /* Big display headings a touch smaller */
  .display { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .quote-card blockquote { font-size: 1.15rem; }
  .story-card--feature blockquote { font-size: 1.25rem; }
}

@media (max-width: 400px) {
  .pass { grid-template-columns: 1fr 78px; }
  .hh__pass { width: min(280px, 100%); }
  .hh__stamp-ink { width: 70px; height: 70px; }
  .hh__stamp-ink b { font-size: 0.62rem; }
  .hh__cta .btn { flex: 1 1 100%; }
  .btn { font-size: 0.76rem; padding: 14px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal-el, .stamp-in { opacity: 1 !important; transform: none !important; }
}


/* ============================================================
   Static-port additions.
   1) Font-family variables (originally injected by next/font).
   2) CSS reproductions of the hero's Framer-Motion entrances.
   3) A couple of tiny defaults for JS-driven elements.
   Appended after the original globals.css so these win.
   ============================================================ */

:root {
  --font-poppins: "Poppins";
  --font-mono-code: "Space Mono";
}

/* Hero content — staggered fade-up (matched to the original delays) */
.hh__content > * { opacity: 0; animation: hhFadeUp 0.8s var(--ease) both; }
.hh__content > *:nth-child(1) { animation-delay: 0.10s; }
.hh__content > *:nth-child(2) { animation-delay: 0.22s; }
.hh__content > *:nth-child(3) { animation-delay: 0.34s; }
.hh__content > *:nth-child(4) { animation-delay: 0.46s; }
.hh__content > *:nth-child(5) { animation-delay: 0.58s; }
.hh__content > *:nth-child(6) { animation-delay: 0.70s; }
@keyframes hhFadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* Boarding pass — entrance settle + gentle infinite float */
.hh__pass { opacity: 0; animation: hhPassIn 1s var(--ease) 0.5s both; }
@keyframes hhPassIn {
  from { opacity: 0; transform: translateY(40px) rotate(-6deg); }
  to   { opacity: 1; transform: translateY(0) rotate(-4deg); }
}
.hh__pass-float { animation: hhFloat 6s ease-in-out infinite; }
@keyframes hhFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* Passport stamps on the hero — scale-in (delay + rotation set inline) */
.hh__stamp { opacity: 0; animation: hhStampIn 0.5s var(--ease-back) both; }
@keyframes hhStampIn {
  from { opacity: 0; transform: scale(1.8) rotate(var(--rot, 0deg)); }
  to   { opacity: 1; transform: scale(1) rotate(var(--rot, 0deg)); }
}

/* Newsletter success line is revealed by JS */
.newsletter__ok { display: none; }

/* ------------------------------------------------------------
   Brand mark: white logo on dark surfaces (nav top + footer),
   full-colour logo once the nav flips to its light glass bar.
   ------------------------------------------------------------ */
.term-brand__mark { width: 44px; height: 44px; object-fit: contain; }
.term-brand__mark--color { display: none; } /* hidden until the nav scrolls onto light glass */
.term-nav--scrolled .term-brand__mark--white { display: none; }
.term-nav--scrolled .term-brand__mark--color { display: inline-block; }


/* ------------------------------------------------------------
   Photo band — the three campus/student images from the profile
   ------------------------------------------------------------ */
.photo-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 26px); }
.photo-band figure {
  margin: 0; border-radius: 14px; overflow: hidden;
  border: 3px solid var(--ink); box-shadow: var(--shadow-md);
  aspect-ratio: 3 / 2; background: var(--paper-2);
}
.photo-band img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.9s var(--ease);
}
.photo-band figure:hover img { transform: scale(1.06); }
@media (max-width: 720px) { .photo-band { grid-template-columns: 1fr; } }


/* ============================================================
   COMPANY PROFILE — the printed brochure, rebuilt as responsive
   HTML. Each `.br-*` block mirrors one page of the PDF but flows
   full-width and stacks on small screens.
   ============================================================ */

/* Tintable world-map watermark (alpha mask lifted from the PDF) */
.br-map {
  position: absolute; pointer-events: none;
  -webkit-mask-image: url(img/world-map.png); mask-image: url(img/world-map.png);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

/* ---------- PAGE 1 · COVER ---------- */
.br-cover {
  position: relative; overflow: hidden;
  background: var(--grad-night); color: #fff;
  padding-top: 150px;
}
.br-cover__map { inset: 0; background: #7fa8e6; opacity: 0.13; }
.br-cover__inner { position: relative; z-index: 1; text-align: center; padding-bottom: clamp(48px, 7vw, 86px); }
.br-cover__crest { width: clamp(104px, 13vw, 150px); height: auto; margin: 0 auto clamp(18px, 3vw, 30px); display: block; }
.br-cover__title {
  font-family: var(--font-serif); font-weight: 800;
  font-size: clamp(2.3rem, 6.4vw, 4.6rem); line-height: 1.02;
  letter-spacing: -0.02em; text-transform: uppercase; color: #fff;
  text-shadow: 0 14px 40px rgba(0,0,0,0.32);
}
.br-cover__lead {
  max-width: 620px; margin: clamp(18px, 3vw, 28px) auto 0;
  color: rgba(255,255,255,0.82); font-size: clamp(1rem, 1.5vw, 1.14rem); line-height: 1.66;
}

/* White photo band, as on the printed cover */
.br-photos { background: #fff; padding-block: clamp(26px, 4vw, 44px); }

/* Navy band carrying the four pillars in a white card */
.br-pillars { position: relative; background: var(--ink); padding-block: clamp(34px, 5vw, 58px); }
.br-pillars__card {
  background: #fff; border-radius: 22px; box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: clamp(22px, 3vw, 34px) clamp(10px, 2vw, 20px);
}
.br-pillar { text-align: center; padding-inline: clamp(8px, 1.6vw, 20px); position: relative; }
.br-pillar + .br-pillar::before {
  content: ""; position: absolute; left: 0; top: 6%; bottom: 6%;
  width: 1px; background: var(--paper-line);
}
.br-pillar svg { color: var(--ink-3); margin-bottom: 12px; }
.br-pillar h3 {
  font-size: clamp(0.9rem, 1.2vw, 1.02rem);
  font-weight: 500; color: var(--ink); line-height: 1.35; margin: 0;
}

/* Cover footer strip: CTA pill + phone + website */
.br-cover__foot {
  background: #fff; border-top: 1px solid var(--paper-line);
  padding-block: clamp(16px, 2.4vw, 24px);
}
.br-cover__footrow {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: clamp(14px, 3vw, 38px);
}
.br-cover__footrow a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 0.95rem; }
.br-cover__footrow a:hover { color: var(--blue); }
.br-cover__pill {
  background: var(--grad-gold); color: var(--ink) !important;
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 13px 26px; border-radius: 999px; box-shadow: var(--shadow-gold);
  transition: transform 0.35s var(--ease);
}
.br-cover__pill:hover { transform: translateY(-3px); }

/* ---------- PAGE 2 · ABOUT ---------- */
.br-about { display: grid; grid-template-columns: 190px minmax(0, 1fr); background: var(--paper); }
.br-about__rail {
  position: relative; background: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding-block: clamp(30px, 4vw, 48px); gap: 30px;
  border-right: 4px solid var(--gold);
}
.br-about__rail img { width: 74px; height: auto; }
.br-about__vert {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(1.1rem, 1.7vw, 1.6rem); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold-light); white-space: nowrap;
}
.br-about__num { font-family: var(--font-serif); font-weight: 700; color: var(--gold); font-size: 1.15rem; }

.br-about__body { position: relative; overflow: hidden; padding: clamp(44px, 6vw, 86px) clamp(24px, 4vw, 68px); }
.br-about__map { right: -6%; bottom: -4%; width: 92%; height: 62%; background: #c9c19a; opacity: 0.5; }
.br-about__content { position: relative; z-index: 1; max-width: 760px; }

/* The dotted flight path + plane that arcs across the printed page */
.br-plane { position: absolute; top: clamp(18px, 3vw, 40px); right: clamp(18px, 3vw, 48px); width: min(320px, 42%); z-index: 1; }

.br-serif-head { font-family: var(--font-serif); font-weight: 700; color: var(--ink); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.1; }
.br-rule { display: block; width: 76px; height: 3px; background: var(--gold); margin-top: 12px; border-radius: 2px; }

/* Mission / vision cards with a coloured spine, as printed */
.br-vm { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: clamp(18px, 2.6vw, 26px); }
.br-vm__card {
  background: #fff; border-left: 6px solid var(--gold);
  padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 34px);
  box-shadow: var(--shadow-md); border-radius: 0 12px 12px 0;
}
.br-vm__card--vision { border-left-color: var(--blue); }
.br-vm__card h3 { font-family: var(--font-serif); font-weight: 700; color: var(--ink); font-size: 1.3rem; margin-bottom: 10px; }
.br-vm__card p { color: var(--muted); line-height: 1.7; font-size: 0.97rem; }

/* Navy stat strip pinned under the About page */
.br-strip { background: var(--ink); display: grid; grid-template-columns: repeat(4, 1fr); }
.br-strip > div { text-align: center; padding: clamp(20px, 3vw, 30px) 12px; position: relative; }
.br-strip > div + div::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: rgba(255,255,255,0.16); }
/* .stat__num only gets its gold gradient under .night — this strip is navy too */
.br-strip .stat__num {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.br-strip .stat__label { color: rgba(255,255,255,0.6); }

/* ---------- PAGE 3 · TRACK RECORD ---------- */
.br-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.4vw, 26px); }
.br-stat {
  background: var(--paper-2); border-bottom: 4px solid var(--gold);
  border-radius: 10px 10px 0 0; padding: clamp(22px, 3vw, 34px);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.br-stat:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.br-stat b {
  display: block; font-family: var(--font-serif); font-weight: 700; color: var(--ink);
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1;
}
.br-stat span { display: block; margin-top: 10px; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }

.br-banner {
  margin-top: clamp(30px, 4vw, 50px); background: var(--ink);
  border-radius: 12px; padding: clamp(22px, 3.4vw, 34px) clamp(20px, 3vw, 40px); text-align: center;
}
.br-banner p { font-family: var(--font-serif); font-weight: 700; color: var(--gold-light); font-size: clamp(1.05rem, 2.1vw, 1.6rem); line-height: 1.3; margin: 0; }

/* Passport + departure board pairing from the printed page */
.br-travel { margin-top: clamp(34px, 5vw, 56px); display: flex; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 60px); flex-wrap: wrap; }
.br-travel img { width: clamp(110px, 14vw, 168px); height: auto; }

/* ---------- PAGE 4 · SERVICES ---------- */
.br-svc { display: grid; gap: clamp(16px, 2.4vw, 24px); }
.br-svc__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: clamp(18px, 3vw, 34px);
  background: #fff; border: 1px solid var(--paper-line); border-radius: 14px;
  padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 38px);
  text-decoration: none; box-shadow: var(--shadow-sm, 0 2px 10px rgba(11,27,58,0.05));
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.br-svc__row:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(46,123,224,0.3); }
.br-svc__num {
  width: clamp(54px, 6vw, 68px); height: clamp(54px, 6vw, 68px); border-radius: 50%;
  background: var(--ink); color: var(--gold-light);
  display: grid; place-items: center;
  font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.05rem, 1.7vw, 1.35rem);
}
.br-svc__row h3 { font-family: var(--font-serif); font-weight: 700; color: var(--ink); font-size: clamp(1.15rem, 2vw, 1.5rem); margin-bottom: 8px; }
.br-svc__row p { color: var(--muted); font-size: 0.96rem; line-height: 1.65; margin: 0; }
.br-svc__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--blue); font-weight: 600; font-size: 0.9rem; }

/* ---------- PAGE 5 · CONTACT ---------- */
.br-contact { position: relative; overflow: hidden; background: var(--grad-night); color: #fff; }
.br-contact__map { inset: 0; background: #6d94d4; opacity: 0.1; }
.br-contact__inner { position: relative; z-index: 1; }
.br-contact__title { font-family: var(--font-serif); font-weight: 700; color: #fff; font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.06; }
.br-rows { max-width: 720px; margin: clamp(32px, 5vw, 52px) auto 0; }
.br-row {
  display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: clamp(14px, 2vw, 22px);
  align-items: center; padding: clamp(14px, 2vw, 18px) 0;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.br-row__tick { width: 4px; height: 22px; background: var(--gold); border-radius: 2px; }
.br-row dt { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.br-row dd { margin: 5px 0 0; }
.br-row dd a, .br-row dd span { color: rgba(255,255,255,0.9); font-size: clamp(0.95rem, 1.4vw, 1.05rem); word-break: break-word; }
.br-row dd a:hover { color: var(--gold-light); }
.br-contact__crest { width: clamp(120px, 14vw, 172px); height: auto; margin: clamp(38px, 5vw, 58px) auto 0; display: block; }
.br-contact__strap { text-align: center; margin-top: 14px; font-family: var(--font-serif); font-weight: 700; letter-spacing: 0.02em; color: var(--gold-light); font-size: clamp(0.95rem, 1.8vw, 1.3rem); text-transform: uppercase; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .br-pillars__card { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
  .br-pillar:nth-child(3)::before { display: none; }
  .br-strip { grid-template-columns: repeat(2, 1fr); }
  .br-strip > div:nth-child(3)::before { display: none; }
}
@media (max-width: 720px) {
  .br-about { grid-template-columns: 1fr; }
  .br-about__rail { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 16px 22px; border-right: 0; border-bottom: 4px solid var(--gold); }
  .br-about__rail img { width: 44px; }
  .br-about__vert { writing-mode: horizontal-tb; transform: none; font-size: 1rem; }
  .br-about__num { display: none; }
  .br-plane { display: none; }
  .br-stats { grid-template-columns: 1fr; }
  .br-svc__row { grid-template-columns: 1fr; gap: 14px; }
  .br-pillars__card { grid-template-columns: 1fr; }
  .br-pillar + .br-pillar::before { display: none; }
  .br-pillar + .br-pillar { border-top: 1px solid var(--paper-line); padding-top: 20px; margin-top: 4px; }
}