/* ═══════════════════════════════════════════════════════════
   UCL EXPRESS — International Courier Landing Page
   Palette sampled directly from the official logo artwork:
     Navy   #0D1E85   (UCL wordmark + "EXPRESS PRIVATE LIMITED")
     Red    #E62B1E   (start of the road/swoosh gradient)
     Orange #F7911F   (mid of the road/swoosh gradient)
     Gold   #FFC21F   (end of the road/swoosh gradient)

   Orange is reserved for ACTIONS (buttons, key accents). Structural
   surfaces — top bar, icon tiles, step markers, closing band — are navy,
   so the orange call-to-actions stand out instead of competing.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Brand — do not change, taken from logo */
  --navy-900:#060F52;
  --navy-800:#0A1668;
  --navy:#0D1E85;
  --navy-600:#1B2FA8;
  --navy-400:#4C5DD8;
  --navy-100:#E7EAFB;

  --red:#E62B1E;
  --orange:#F7911F;
  --gold:#FFC21F;

  /* Full logo ramp — DECORATION only (rails, dots, glows). No text on it. */
  --grad:linear-gradient(120deg,#E62B1E 0%,#F7911F 52%,#FFC21F 100%);
  --grad-soft:linear-gradient(120deg,#F7911F 0%,#FFC21F 100%);

  /* Navy ramps */
  --grad-navy:linear-gradient(140deg,#0D1E85 0%,#1B2FA8 45%,#060F52 100%);
  --grad-tile:linear-gradient(145deg,#2A3FC4 0%,#0D1E85 54%,#081457 100%);

  /* Same orange ramp, stopped before the gold end — used wherever WHITE TEXT
     sits on top. The gold end only reaches 1.6:1 against white, which is
     unreadable; this keeps the vivid orange and lifts the worst point to
     ~2.5:1, backed up by a text-shadow on the label. */
  --grad-btn:linear-gradient(120deg,#DE2415 0%,#EC5F14 48%,#F2870F 100%);

  /* Ramp for gradient TEXT on light backgrounds — dark enough for 3:1 on
     large display type. */
  --grad-ink:linear-gradient(120deg,#E62B1E 0%,#E2560F 55%,#D06A05 100%);

  /* Small orange text on white — 4.97:1 */
  --orange-ink:#C4470B;

  /* Surfaces — light throughout, never black */
  --bg:#FFFFFF;
  --bg-soft:#F4F7FE;
  --bg-warm:#FFF7EE;
  --ink:#111634;
  --ink-2:#4A5273;
  --ink-3:#767EA0;
  --line:#E4E9F7;
  --white:#FFFFFF;

  --r-sm:12px;
  --r:16px;
  --r-lg:22px;
  --r-xl:28px;

  --sh-1:0 2px 8px rgba(13,30,133,.06);
  --sh-2:0 10px 26px -10px rgba(13,30,133,.18);
  --sh-3:0 22px 48px -18px rgba(13,30,133,.26);
  --sh-orange:0 10px 24px -10px rgba(230,90,20,.5);

  --wrap:1180px;
  --hdr-h:88px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.28s;
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 14px)}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.62;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
h1,h2,h3,h4{
  font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.022em;
  margin:0;
  color:var(--ink);
}
p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
ul,ol{margin:0;padding:0;list-style:none}

/* SVG icon defaults: stroke style, consistent 1.9 weight */
svg{
  width:24px;height:24px;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Solid glyphs (brand marks, illustrations) render filled */
[data-wa] svg,.float__btn--wa svg,.hdr__call svg,[data-tel] svg,
.float__btn--call svg,.dest__flag,.quote__av{
  fill:currentColor;stroke:none;
}
.dest__flag,.quote__av{fill:none}

:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-weight:600;
}
.skip-link:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.wrap--narrow{max-width:860px}

.grad-text{
  background:var(--grad-ink);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* On dark surfaces the red end drops below 4.5:1, so shift the same ramp
   toward its orange/gold end where it stays legible. */
.hero__h1 .grad-text,
.sec__h2--light .grad-text,
.modal__side h3 b{
  background:linear-gradient(120deg,#FF8A3C 0%,#FFA32B 42%,#FFC940 100%);
  -webkit-background-clip:text;background-clip:text;
}

/* ── Reveal on scroll ──────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ═══════════ BUTTONS ═══════════ */
.btn{
  --btn-py:12px; --btn-px:22px;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:var(--btn-py) var(--btn-px);
  min-height:46px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;font-size:.92rem;letter-spacing:-.01em;
  border-radius:100px;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease);
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.btn svg{width:18px;height:18px;flex:none}
.btn--sm{--btn-py:10px;--btn-px:17px;min-height:44px;font-size:.86rem}
.btn--lg{--btn-py:14px;--btn-px:28px;min-height:52px;font-size:.98rem}
.btn--block{width:100%}

/* Orange gradient — the primary action colour */
.btn--grad{
  color:#fff;
  background:var(--grad-btn);
  background-size:190% 100%;
  background-position:0% 50%;
  box-shadow:var(--sh-orange),inset 0 1px 0 rgba(255,255,255,.28);
  text-shadow:0 1px 2px rgba(122,32,0,.42);
}
.btn--grad:hover{background-position:100% 50%;transform:translateY(-2px);box-shadow:0 15px 32px -10px rgba(230,90,20,.6),inset 0 1px 0 rgba(255,255,255,.32)}
.btn--grad:active{transform:translateY(0) scale(.985)}

.btn--glass{
  color:#fff;
  background:rgba(255,255,255,.13);
  border:1.5px solid rgba(255,255,255,.4);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.btn--glass:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)}

.btn--ghost{color:var(--navy);background:var(--navy-100)}
.btn--ghost:hover{background:#DBE0F9}

.btn--white{color:var(--navy);background:#fff;box-shadow:0 12px 26px -12px rgba(0,0,0,.4)}
.btn--white:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(0,0,0,.48)}

.btn--outline-w{color:#fff;border:1.8px solid rgba(255,255,255,.5)}
.btn--outline-w:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}

/* loading state */
.btn__spin{display:none;width:17px;height:17px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.btn.is-loading{pointer-events:none;opacity:.85}
.btn.is-loading .btn__label{opacity:.55}
.btn.is-loading .btn__spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════════ TOP BAR — orange gradient, messages scroll across ═══════════ */
.topbar{
  position:relative;overflow:hidden;
  background:var(--grad-btn);
  color:#fff;font-size:.8rem;
  text-shadow:0 1px 2px rgba(122,32,0,.4);
}
.topbar::before,.topbar::after{
  content:"";position:absolute;top:0;bottom:0;width:46px;z-index:2;pointer-events:none;
}
.topbar::before{left:0;background:linear-gradient(90deg,#DE2415,rgba(222,36,21,0))}
.topbar::after{right:0;background:linear-gradient(270deg,#F2870F,rgba(242,135,15,0))}
.topbar__track{display:flex;width:max-content;animation:topbarRun 40s linear infinite}
.topbar__set{display:flex;align-items:center}
.topbar__i{
  display:inline-flex;align-items:center;gap:8px;
  padding-inline:20px;min-height:36px;white-space:nowrap;
}
.topbar__pill{
  background:rgba(255,255,255,.26);border:1px solid rgba(255,255,255,.42);
  padding:2px 9px;border-radius:100px;
  font-weight:800;font-size:.63rem;letter-spacing:.09em;flex:none;
  text-shadow:none;
}
.topbar__txt{line-height:1.3;color:rgba(255,255,255,.94)}
.topbar__txt b{color:#fff;font-weight:800}
@keyframes topbarRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.topbar:hover .topbar__track{animation-play-state:paused}

/* ═══════════ HEADER — floating glass pill ═══════════ */
.hdr{
  position:sticky;top:0;z-index:120;
  padding-block:9px;
  transition:background-color .3s var(--ease),backdrop-filter .3s var(--ease);
}
.hdr.is-stuck{
  background:rgba(240,244,254,.62);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.hdr__in{
  position:relative;
  display:flex;align-items:center;gap:18px;
  min-height:64px;
  padding-inline:20px;
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.9);
  border-radius:100px;
  box-shadow:0 8px 28px -12px rgba(13,30,133,.28),inset 0 1px 0 rgba(255,255,255,.7);
  transition:box-shadow .3s var(--ease),background-color .3s var(--ease);
}
.hdr.is-stuck .hdr__in{
  background:rgba(255,255,255,.9);
  box-shadow:0 12px 34px -14px rgba(13,30,133,.38),inset 0 1px 0 rgba(255,255,255,.8);
}
.hdr__logo{flex:none;display:inline-flex;align-items:center;min-height:44px}
.hdr__logo img{width:auto;height:34px}

.hdr__nav{display:flex;align-items:center;gap:24px;margin-left:auto}
.hdr__nav a{
  position:relative;display:inline-flex;align-items:center;min-height:44px;
  font-size:.9rem;font-weight:600;color:var(--ink-2);
  transition:color var(--dur) var(--ease);
}
.hdr__nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:9px;height:2.5px;border-radius:2px;
  background:var(--grad);transition:right var(--dur) var(--ease);
}
.hdr__nav a:hover{color:var(--navy)}
.hdr__nav a:hover::after{right:0}
/* Specificity must beat `.hdr__nav a` above, which sets display:inline-flex */
.hdr__nav .hdr__navcta{display:none}

/* Desktop: the nav's own margin-left:auto already pushes this group right */
.hdr__act{display:flex;align-items:center;gap:9px;margin-left:9px}
.hdr__burger{
  display:none;width:44px;height:44px;border-radius:50%;
  background:var(--navy-100);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.hdr__burger span{display:block;width:18px;height:2.2px;border-radius:2px;background:var(--navy);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.hdr__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.2px) rotate(45deg)}
.hdr__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hdr__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.2px) rotate(-45deg)}

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative;
  min-height:calc(100svh - var(--hdr-h));
  display:flex;align-items:center;
  padding:56px 0 84px;
  margin-top:calc(-1 * var(--hdr-h));
  padding-top:calc(var(--hdr-h) + 40px);
  overflow:hidden;
  isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#20293f}
.hero__poster,.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:60% 45%;
}
.hero__poster{z-index:0;transform:scale(1.04)}
.hero__video{z-index:1;opacity:0;transition:opacity .9s ease}
.hero__video.is-playing{opacity:1}

/* Navy scrim keeps white text well above 4.5:1 while letting the footage show */
.hero__scrim{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(96deg,rgba(6,15,82,.86) 0%,rgba(10,22,104,.7) 32%,rgba(13,30,133,.34) 58%,rgba(13,30,133,.14) 100%),
    linear-gradient(to top,rgba(6,15,82,.76) 0%,rgba(6,15,82,0) 46%);
}
.hero__glow{
  position:absolute;z-index:3;right:-6%;top:8%;width:60vw;height:60vw;max-width:760px;max-height:760px;
  background:radial-gradient(circle,rgba(247,145,31,.3) 0%,rgba(255,194,31,.09) 42%,transparent 68%);
  pointer-events:none;
  animation:glowPulse 9s ease-in-out infinite;
}
@keyframes glowPulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.09)}}

.hero__in{
  position:relative;z-index:5;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:50px;align-items:center;
}
.hero__copy{color:#fff;max-width:620px}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:6px 15px 6px 11px;border-radius:100px;
  font-size:.75rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:#fff;margin-bottom:20px;
}
.eyebrow__dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(255,194,31,.25);animation:blip 2s ease-in-out infinite}
@keyframes blip{0%,100%{box-shadow:0 0 0 4px rgba(255,194,31,.25)}50%{box-shadow:0 0 0 8px rgba(255,194,31,0)}}

.hero__h1{
  color:#fff;
  font-size:clamp(2.05rem,6vw,3.9rem);
  letter-spacing:-.033em;line-height:1.05;
  text-shadow:0 3px 26px rgba(4,10,50,.5);
}
/* "Anywhere in the World" — light sweeps across the gradient and the line
   breathes gently, so the headline reads as alive without being distracting. */
.hero__anim{
  display:inline-block;
  background-size:260% 100%;
  /* background-clip:text paints only inside the element box, and a 1.05
     line-height box is shorter than the glyphs — the "y" descender in
     "Anywhere" got sliced off. Pad the paint box, then pull the same amount
     back with a negative margin so layout is unchanged. */
  padding:.1em .06em .18em;
  margin:-.1em -.06em -.18em;
  animation:heroSweep 6s ease-in-out infinite, heroFloat 5s ease-in-out infinite;
  will-change:background-position,transform;
}
@keyframes heroSweep{
  0%,100%{background-position:0% 50%}
  50%    {background-position:100% 50%}
}
@keyframes heroFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%    {transform:translateY(-5px) scale(1.014)}
}

.hero__sub{
  margin-top:18px;
  font-size:clamp(.97rem,2vw,1.1rem);
  line-height:1.66;color:rgba(255,255,255,.9);
  max-width:54ch;
  text-shadow:0 2px 14px rgba(4,10,50,.55);
}
.hero__sub strong{color:#fff;font-weight:700}

.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.hero__chips{display:flex;flex-wrap:wrap;gap:9px 18px;margin-top:26px}
.hero__chips li{display:flex;align-items:center;gap:7px;font-size:.86rem;font-weight:600;color:rgba(255,255,255,.94)}
.hero__chips svg{width:16px;height:16px;stroke-width:3;color:var(--gold);flex:none}

.hero__scrolldown{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:5;
  width:24px;height:39px;border:2px solid rgba(255,255,255,.42);border-radius:100px;
  display:flex;justify-content:center;padding-top:7px;
}
.hero__scrolldown span{width:4px;height:8px;border-radius:4px;background:var(--gold);animation:scrolly 1.8s ease-in-out infinite}
@keyframes scrolly{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(13px)}}

/* ── Quick quote card ── */
.qcard{
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r-xl);
  padding:24px;
  max-width:440px;margin-left:auto;
  box-shadow:0 28px 64px -22px rgba(4,12,60,.6);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  position:relative;overflow:hidden;
}
.qcard::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad)}
.qcard__head h2{font-size:1.3rem;letter-spacing:-.028em}
.qcard__head p{margin-top:5px;font-size:.86rem;color:var(--ink-2)}
.qcard__form{margin-top:17px;display:grid;gap:12px}
.qcard__note{
  display:flex;align-items:center;gap:7px;justify-content:center;
  font-size:.76rem;color:var(--ink-3);margin-top:2px;
}
.qcard__note svg{width:14px;height:14px;color:#16A34A;flex:none}

/* ═══════════ FORM FIELDS ═══════════ */
.field{display:grid;gap:5px;min-width:0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field label{font-size:.79rem;font-weight:700;color:var(--ink);letter-spacing:-.005em}
.field label span[aria-hidden]{color:var(--red)}
.field .opt{color:var(--ink-3);font-weight:500}
.field input,.field select,.field textarea{
  width:100%;
  padding:11px 14px;
  min-height:46px;
  background:#F8FAFF;
  border:1.6px solid var(--line);
  border-radius:var(--r-sm);
  font-size:16px; /* 16px avoids iOS zoom-on-focus */
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease);
  appearance:none;-webkit-appearance:none;
}
.field textarea{min-height:80px;resize:vertical;line-height:1.55}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5273' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
  padding-right:38px;cursor:pointer;
}
.field input::placeholder,.field textarea::placeholder{color:#9AA2C0}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#C9D2EE}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:#fff;border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(247,145,31,.16);
}
.field.has-err input,.field.has-err select{border-color:var(--red);background:#FFF5F4}
.field.has-err input:focus,.field.has-err select:focus{box-shadow:0 0 0 4px rgba(230,43,30,.14)}
.err{display:none;font-size:.74rem;font-weight:600;color:var(--red)}
.field.has-err .err{display:block}

.form-status{margin-top:9px;font-size:.85rem;font-weight:600;text-align:center;border-radius:11px;padding:0;line-height:1.5}
.form-status.is-ok{color:#0B7A3B;background:#E8F8EE;padding:11px 13px;border:1px solid #B7E7C9}
.form-status.is-err{color:#B4241A;background:#FEF0EF;padding:11px 13px;border:1px solid #F6C9C5}

/* ═══════════ ROUTE TICKER — soft gradient, domestic → international ═══════════ */
.ticker{
  position:relative;overflow:hidden;
  background:linear-gradient(100deg,#FFF1E0 0%,#FFE7D2 22%,#F3F1FF 52%,#E6EDFF 78%,#DFE9FF 100%);
  padding-block:11px;
  border-block:1px solid rgba(13,30,133,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.ticker::before,.ticker::after{
  content:"";position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,#FFF1E0,rgba(255,241,224,0))}
.ticker::after{right:0;background:linear-gradient(270deg,#DFE9FF,rgba(223,233,255,0))}
.ticker__track{display:flex;width:max-content;animation:tickerRun 48s linear infinite}
.ticker__set{display:flex;align-items:center}
.ticker__i{
  display:inline-flex;align-items:center;gap:7px;
  padding-inline:18px;white-space:nowrap;
  border-right:1px solid rgba(13,30,133,.13);
}
.ticker__i b{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:.8rem;letter-spacing:.07em;color:var(--navy);
}
/* second code = the international end of the route */
.ticker__i b:last-of-type{color:var(--orange-ink)}
.ticker__i i{font-style:normal;font-size:.74rem;color:var(--ink-3);margin-left:3px}
.ticker__arw{width:14px;height:14px;color:var(--orange);stroke-width:2.6;flex:none}
@keyframes tickerRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover .ticker__track{animation-play-state:paused}

/* ═══════════ STATS ═══════════ */
.stats{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-block:32px}
.stat{text-align:center;position:relative}
.stat+.stat::before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:1px;height:42px;background:var(--line)}
.stat b{
  display:block;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:clamp(1.7rem,4.2vw,2.5rem);line-height:1.08;letter-spacing:-.035em;
  color:var(--navy);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;              /* keeps "220+" / "15K+" / "24×7" on one line */
}
/* The counter lives in a <span> inside <b>. Keep it inline and inheriting, or
   the label rule below turns it into a small grey block on its own line. */
.stat b > span{display:inline;font:inherit;color:inherit;letter-spacing:inherit}
.stat b span[aria-hidden]{font-size:.62em;opacity:.5;margin-inline:1px;vertical-align:.1em}
/* Direct child only — must not reach the counter span inside <b> */
.stat > span{display:block;margin-top:3px;font-size:.82rem;font-weight:600;color:var(--ink-2);white-space:nowrap}

/* ═══════════ SECTION SHELL ═══════════ */
.sec{padding-block:clamp(52px,7vw,92px)}
.sec--soft{background:var(--bg-soft)}
.sec__head{text-align:center;max-width:790px;margin:0 auto clamp(34px,4.5vw,50px)}
.kicker{
  display:inline-block;
  font-size:.75rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--orange-ink);margin-bottom:12px;
}
.kicker--light{color:var(--gold)}
.sec__h2{font-size:clamp(1.6rem,3.9vw,2.5rem)}
.sec__h2--light{color:#fff}
.sec__p{margin-top:13px;font-size:clamp(.94rem,1.8vw,1.05rem);color:var(--ink-2);line-height:1.68}
.sec__p--light{color:rgba(255,255,255,.86)}

/* ═══════════ SERVICE CARDS ═══════════ */
/* 300px floor keeps this to 3 across on desktop; the 900px query drops the
   floor so it becomes a tidy 2-up instead of one stretched card. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.card{
  position:relative;
  /* soft light gradient — warm at the bottom, cool at the top */
  background:linear-gradient(158deg,#FFFFFF 0%,#F7FAFF 42%,#FFF4E7 100%);
  border:1.5px solid var(--line);
  border-radius:var(--r-lg);
  padding:24px 22px 20px;
  overflow:hidden;
  transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s var(--ease),background-color .34s var(--ease);
}
/* gradient rail that grows on hover */
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease);
}
/* cool navy wash in the corner */
.card::after{
  content:"";position:absolute;top:-64px;right:-64px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,rgba(43,63,196,.13),transparent 68%);
  opacity:0;transition:opacity .42s var(--ease);pointer-events:none;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:#CFD9F5}
.card:hover::before{transform:scaleX(1)}
.card:hover::after{opacity:1}

.card__icon{
  position:relative;
  width:50px;height:50px;border-radius:15px;
  display:grid;place-items:center;
  background:var(--grad-tile);
  color:#fff;
  box-shadow:0 10px 20px -9px rgba(13,30,133,.6);
  margin-bottom:15px;
  transition:transform .42s var(--ease),box-shadow .42s var(--ease);
}
/* thin orange ring keeps the brand accent without another orange block */
.card__icon::after{
  content:"";position:absolute;inset:-3px;border-radius:18px;
  border:1.5px solid transparent;
  background:var(--grad) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .42s var(--ease);
}
.card:hover .card__icon{transform:rotate(-5deg) scale(1.06)}
.card:hover .card__icon::after{opacity:1}
.card__icon svg{width:24px;height:24px}
.card h3{font-size:1.08rem;margin-bottom:7px}
.card p{color:var(--ink-2);font-size:.9rem;line-height:1.58}
.card__list{margin-top:12px;display:grid;gap:6px}
.card__list li{position:relative;padding-left:20px;font-size:.84rem;font-weight:600;color:var(--ink-2)}
.card__list li::before{
  content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;
  background:var(--grad-soft);box-shadow:0 0 0 3px rgba(247,145,31,.15);
}
.card__link{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.87rem;color:var(--navy);
  min-height:44px;
}
.card__link svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.card__link:hover{color:var(--red)}
.card__link:hover svg{transform:translateX(5px)}

/* ═══════════ TRACKING ═══════════ */
.sec--track{position:relative;background:var(--grad-navy);overflow:hidden}
.sec--track::before{
  content:"";position:absolute;left:-8%;bottom:-28%;width:580px;height:580px;border-radius:50%;
  background:radial-gradient(circle,rgba(247,145,31,.26),transparent 66%);pointer-events:none;
}
.sec--track::after{
  content:"";position:absolute;right:-10%;top:-30%;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(76,93,216,.38),transparent 68%);pointer-events:none;
}
.track__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.84fr);gap:46px;align-items:start}
.track__copy{max-width:560px}
.track__copy .sec__h2{text-align:left}

/* Input and button stay side by side and capped, so they never stretch into
   two full-width bars with a gap between them. */
.track__form{display:flex;gap:9px;margin-top:22px;max-width:520px;align-items:stretch}
.track__inputwrap{position:relative;flex:1 1 auto;min-width:0}
.track__ico{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--navy);opacity:.55;pointer-events:none}
.track__inputwrap input{
  width:100%;min-height:52px;padding:13px 17px 13px 43px;
  background:#fff;border:0;border-radius:100px;font-size:16px;font-weight:600;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.45);
}
.track__inputwrap input::placeholder{color:#98A0BF;font-weight:500}
.track__inputwrap input:focus{outline:none;box-shadow:0 0 0 4px rgba(247,145,31,.4)}
.track__form .btn{min-height:52px;padding-inline:24px;flex:none}
.track__hint{margin-top:10px;font-size:.83rem;color:rgba(255,255,255,.72)}
.linkish{
  display:inline-flex;align-items:center;min-height:44px;margin-block:-9px;
  color:var(--gold);font-weight:700;text-decoration:underline;text-underline-offset:3px;
  background:none;padding-inline:4px;font-size:.83rem;
}
.track__copy .form-status{text-align:left}
.track__copy .form-status.is-err{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#FFD9D5}

.track__panel{
  background:rgba(255,255,255,.98);
  border-radius:var(--r-xl);
  padding:22px;
  box-shadow:0 28px 64px -24px rgba(0,0,0,.5);
}
.track__panelhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.track__label{display:block;font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.track__panelhead strong{font-family:'Plus Jakarta Sans',sans-serif;font-size:1rem;letter-spacing:-.01em;word-break:break-all}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:100px;font-size:.75rem;font-weight:700}
.badge--live{background:#FFF2E2;color:#B65B06}
.badge--live i{width:7px;height:7px;border-radius:50%;background:var(--orange);animation:blip2 1.6s ease-in-out infinite}
@keyframes blip2{0%,100%{box-shadow:0 0 0 0 rgba(247,145,31,.6)}50%{box-shadow:0 0 0 6px rgba(247,145,31,0)}}

.timeline{margin-top:16px;position:relative;padding-left:4px}
.timeline__i{position:relative;padding:0 0 18px 30px}
.timeline__i:last-child{padding-bottom:0}
.timeline__i::before{content:"";position:absolute;left:8px;top:18px;bottom:-2px;width:2.5px;background:var(--line);border-radius:2px}
.timeline__i:last-child::before{display:none}
.timeline__i.is-done::before{background:var(--grad-soft)}
.timeline__dot{
  position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;border:2.5px solid var(--line);
}
.timeline__i.is-done .timeline__dot{background:var(--grad);border-color:transparent;box-shadow:0 0 0 3px rgba(247,145,31,.16)}
.timeline__i.is-active .timeline__dot{background:#fff;border-color:var(--orange);box-shadow:0 0 0 4px rgba(247,145,31,.22);animation:blip2 1.8s ease-in-out infinite}
.timeline__i b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:.93rem;font-weight:700}
.timeline__i span{display:block;font-size:.82rem;color:var(--ink-3)}
.timeline__i:not(.is-done):not(.is-active) b{color:var(--ink-3)}
.track__foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.84rem;color:var(--ink-2)}
.track__foot a{color:var(--red);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ═══════════ WHY US ═══════════ */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.why__i{
  background:linear-gradient(158deg,#FFFFFF 0%,#F6F9FF 46%,#FFF6EC 100%);
  border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:22px 20px;
  transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s var(--ease);
}
.why__i:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:#CFD9F5}
.why__ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(140deg,#EEF1FE,#DDE3FB);
  color:var(--navy);margin-bottom:14px;
  border:1px solid #D3DBF7;
}
.why__ico svg{width:22px;height:22px}
.why__i h3{font-size:1.02rem;margin-bottom:6px}
.why__i p{color:var(--ink-2);font-size:.88rem;line-height:1.56}

/* ═══════════ STEPS ═══════════ */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.step{position:relative;padding-top:6px}
.step__n{
  display:grid;place-items:center;
  width:48px;height:48px;border-radius:16px;
  background:var(--grad-tile);color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.2rem;
  box-shadow:0 12px 22px -11px rgba(13,30,133,.65);
  margin-bottom:15px;position:relative;z-index:2;
}
/* dashed connector, like the road in the logo */
.step:not(:last-child)::before{
  content:"";position:absolute;left:56px;top:28px;right:-22px;height:2.5px;
  background-image:linear-gradient(90deg,#F7911F 55%,transparent 0);
  background-size:12px 2.5px;background-repeat:repeat-x;opacity:.6;
}
.step h3{font-size:1.02rem;margin-bottom:6px}
.step p{color:var(--ink-2);font-size:.89rem;line-height:1.58}

/* ═══════════ DESTINATIONS ═══════════ */
.dests{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:13px}
.dest{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:linear-gradient(158deg,#FFFFFF 0%,#F7FAFF 45%,#FFF5E9 100%);
  border:1.5px solid var(--line);border-radius:var(--r);
  padding:16px 16px 14px;text-align:left;min-height:104px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.dest:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--orange)}
.dest__flag{
  width:32px;height:21px;flex:none;
  border-radius:4px;margin-bottom:9px;
  box-shadow:0 1px 3px rgba(17,22,52,.28),0 0 0 1px rgba(17,22,52,.08);
  overflow:hidden;
}
.dest b{font-family:'Plus Jakarta Sans',sans-serif;font-size:.93rem;font-weight:700}
.dest__t{font-size:.79rem;font-weight:600;color:var(--orange-ink)}
.dests__note{margin-top:17px;text-align:center;font-size:.85rem;color:var(--ink-3)}

/* ═══════════ TESTIMONIALS ═══════════ */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:18px}
.quote{
  margin:0;background:var(--bg-warm);
  border:1.5px solid #FBE4CB;border-radius:var(--r-lg);
  padding:24px 22px;position:relative;
  transition:transform .34s var(--ease),box-shadow .34s var(--ease);
}
.quote:hover{transform:translateY(-5px);box-shadow:0 18px 38px -18px rgba(230,120,20,.34)}
.quote__stars{color:#D9720A;font-size:1rem;letter-spacing:2px;margin-bottom:11px}
.quote blockquote{margin:0;font-size:.92rem;line-height:1.68;color:var(--ink)}
.quote figcaption{display:flex;align-items:center;gap:12px;margin-top:17px;padding-top:15px;border-top:1px solid #FBE0C2}
.quote__av{
  width:48px;height:48px;border-radius:50%;flex:none;
  object-fit:cover;overflow:hidden;
  box-shadow:0 4px 12px -4px rgba(230,120,20,.55),0 0 0 2.5px #fff,0 0 0 4px rgba(247,145,31,.35);
}
.quote figcaption b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:.92rem}
.quote figcaption span{display:block;font-size:.8rem;color:var(--ink-3)}

/* ═══════════ ENQUIRY ═══════════ */
.sec--enq{position:relative;background:var(--grad-navy);overflow:hidden}
.sec--enq::before{
  content:"";position:absolute;right:-6%;top:-18%;width:580px;height:580px;border-radius:50%;
  background:radial-gradient(circle,rgba(247,145,31,.26),transparent 66%);pointer-events:none;
}
.enq{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:46px;align-items:center}
.enq__left{max-width:520px}
.enq__left .sec__h2{text-align:left}
.enq__points{margin-top:22px;display:grid;gap:10px}
.enq__points li{display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:600;color:#fff}
.enq__points svg{width:19px;height:19px;stroke-width:3;color:var(--gold);flex:none}

.enq__contact{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:24px;max-width:460px}
.enq__cbtn{
  display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r);padding:11px 13px;color:#fff;min-height:56px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.enq__cbtn:hover{background:rgba(255,255,255,.2);transform:translateY(-3px)}
.enq__cbtn svg{width:21px;height:21px;color:var(--gold);flex:none}
.enq__cbtn small{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;opacity:.72;font-weight:700}
.enq__cbtn b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:.88rem;font-weight:700;white-space:nowrap}

.enq__form{
  background:#fff;border-radius:var(--r-xl);padding:22px 20px;
  max-width:480px;margin-inline:auto;
  box-shadow:0 28px 68px -24px rgba(0,0,0,.48);
  display:grid;gap:10px;position:relative;overflow:hidden;
}
.enq__form::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad)}
.enq__formtitle{font-size:1.15rem;margin-bottom:0}
/* Compact fields here — this form has the most rows, so shave every one */
.enq__form .field{gap:3px}
.enq__form .field label{font-size:.75rem}
.enq__form .field input,.enq__form .field select{min-height:42px;padding:9px 12px}
.enq__form .field select{padding-right:34px;background-position:right 10px center;background-size:15px}
/* Stay paired at every width — eight stacked fields made this form endless */
.enq__form .field-row{grid-template-columns:1fr 1fr;gap:10px}
.enq__form .btn{margin-top:2px}
.enq__legal{font-size:.71rem;color:var(--ink-3);text-align:center;line-height:1.45}

/* ═══════════ FAQ ═══════════ */
.faq{display:grid;gap:10px}
.faq__i{
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.faq__i[open]{border-color:#FBD5AE;box-shadow:var(--sh-1)}
.faq__i summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 20px;cursor:pointer;list-style:none;min-height:56px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.96rem;
  transition:color var(--dur) var(--ease);
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{
  content:"";flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--navy-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D1E85' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/13px no-repeat;
  transition:transform .32s var(--ease),background-color .32s var(--ease);
}
.faq__i[open] summary{color:var(--red)}
.faq__i[open] summary::after{
  transform:rotate(135deg);
  background-color:#FFE9D2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E62B1E' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.faq__a{padding:0 20px 17px;color:var(--ink-2);font-size:.91rem;line-height:1.68}
.faq__a a{color:var(--red);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ═══════════ FINAL CTA ═══════════ */
.finalcta{
  background:var(--grad-btn);color:#fff;
  padding-block:clamp(44px,6vw,68px);position:relative;overflow:hidden;
  text-shadow:0 1px 3px rgba(122,32,0,.42);
}
.finalcta::before{
  content:"";position:absolute;left:50%;bottom:-40%;width:760px;height:560px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(255,255,255,.26),transparent 62%);
}
.finalcta__in{position:relative;z-index:2;text-align:center;max-width:620px;margin-inline:auto}
.finalcta h2{color:#fff;font-size:clamp(1.5rem,3.8vw,2.2rem)}
.finalcta p{margin-top:11px;font-size:clamp(.94rem,1.9vw,1.05rem);color:rgba(255,255,255,.86)}
.finalcta__btns{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:24px}
.finalcta__btns .btn{--btn-px:26px;min-height:48px;font-size:.92rem}

/* ═══════════ FOOTER ═══════════ */
.ftr{background:var(--navy-900);color:rgba(255,255,255,.74);padding-top:clamp(32px,4vw,46px)}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.05fr;gap:26px}
/* Original full-colour logo kept intact on a white chip */
.ftr__logo{
  display:inline-flex;background:#fff;
  padding:9px 15px;border-radius:13px;margin-bottom:15px;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.55);
}
.ftr__logo img{width:auto;height:31px;display:block}
.ftr__brand p{font-size:.85rem;line-height:1.6;max-width:38ch}
.ftr__social{display:flex;gap:9px;margin-top:14px}
.ftr__social a{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);color:#fff;
  transition:background-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.ftr__social a:hover{background:var(--grad-btn);border-color:transparent;transform:translateY(-3px)}
.ftr__social svg{width:19px;height:19px}
.ftr__col summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  list-style:none;cursor:default;
}
.ftr__col summary::-webkit-details-marker{display:none}
.ftr__col h4{color:#fff;font-size:.92rem;margin:0 0 6px}
.ftr__chev{display:none;width:18px;height:18px;flex:none;stroke-width:2.4;transition:transform .3s var(--ease)}
.ftr__links{display:flex;flex-direction:column}
.ftr__col a{display:flex;align-items:center;min-height:44px;font-size:.86rem;transition:color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.ftr__col a:hover{color:var(--gold);transform:translateX(4px)}
.ftr__bar{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:22px;padding-block:15px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.8rem;
}

/* ═══════════ FLOATING 3D BUTTONS ═══════════ */
.float{
  position:fixed;
  right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:130;
  display:flex;flex-direction:column;gap:18px;   /* clear gap between the two */
}
.float__btn{
  position:relative;
  width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;
  transform-style:preserve-3d;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.float__btn svg{width:25px;height:25px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}

/* 3D: coloured base + inner top-light + rim highlight + contact shadow */
.float__btn--wa{
  background:linear-gradient(160deg,#3BE07A 0%,#25D366 42%,#12A150 100%);
  box-shadow:
    0 3px 0 #0E7C3E,
    0 9px 18px -5px rgba(18,161,80,.62),
    0 18px 30px -10px rgba(0,0,0,.32),
    inset 0 2px 3px rgba(255,255,255,.55),
    inset 0 -3px 6px rgba(0,0,0,.22);
  animation:float3d 3.6s ease-in-out infinite;
}
.float__btn--call{
  background:linear-gradient(160deg,#FFB01F 0%,#F2870F 45%,#DE2415 100%);
  box-shadow:
    0 3px 0 #B33A0F,
    0 9px 18px -5px rgba(230,90,20,.62),
    0 18px 30px -10px rgba(0,0,0,.32),
    inset 0 2px 3px rgba(255,255,255,.5),
    inset 0 -3px 6px rgba(0,0,0,.2);
  animation:float3d 3.6s ease-in-out infinite .6s;
}
@keyframes float3d{
  0%,100%{transform:translateY(0) rotateX(0) rotateZ(0)}
  35%   {transform:translateY(-7px) rotateX(9deg) rotateZ(-3deg)}
  65%   {transform:translateY(-3px) rotateX(-5deg) rotateZ(3deg)}
}
.float__btn:hover{animation-play-state:paused;transform:translateY(-5px) scale(1.09)}
.float__btn--wa:hover{box-shadow:0 3px 0 #0E7C3E,0 14px 26px -6px rgba(18,161,80,.75),0 24px 38px -12px rgba(0,0,0,.38),inset 0 2px 3px rgba(255,255,255,.6),inset 0 -3px 6px rgba(0,0,0,.22)}
.float__btn--call:hover{box-shadow:0 3px 0 #B33A0F,0 14px 26px -6px rgba(230,90,20,.75),0 24px 38px -12px rgba(0,0,0,.38),inset 0 2px 3px rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,0,0,.2)}
.float__btn:active{transform:translateY(1px) scale(.96);animation-play-state:paused}

/* attention ring on WhatsApp */
.float__ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid #25D366;
  animation:ring 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes ring{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}

.float__tip{
  position:absolute;right:calc(100% + 11px);top:50%;transform:translateY(-50%) translateX(8px);
  background:var(--navy-900);color:#fff;
  padding:7px 13px;border-radius:10px;
  font-size:.78rem;font-weight:700;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.5);
}
.float__tip::after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-left-color:var(--navy-900)}
@media (hover:hover){.float__btn:hover .float__tip{opacity:1;transform:translateY(-50%) translateX(0)}}

/* ═══════════ POPUP MODAL ═══════════ */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal__backdrop{
  position:absolute;inset:0;
  background:rgba(8,16,64,.62);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  animation:fadeIn .3s var(--ease);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal__box{
  position:relative;
  width:min(720px,100%);
  max-height:calc(100dvh - 32px);
  overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:#fff;border-radius:var(--r-xl);
  display:grid;grid-template-columns:.8fr 1.2fr;
  box-shadow:0 40px 88px -28px rgba(0,0,0,.62);
  animation:popIn .4s var(--ease);
}
@keyframes popIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}

.modal__x{
  position:absolute;top:10px;right:10px;z-index:5;
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--ink);
  box-shadow:0 4px 14px -4px rgba(0,0,0,.3);
  transition:background-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.modal__x:hover{background:#fff;transform:rotate(90deg)}
.modal__x svg{width:17px;height:17px;stroke-width:2.4}

.modal__side{
  background:var(--grad-navy);color:#fff;
  padding:26px 22px;display:flex;align-items:center;position:relative;overflow:hidden;
  border-radius:var(--r-xl) 0 0 var(--r-xl);
}
.modal__side::before{
  content:"";position:absolute;left:-30%;bottom:-30%;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(247,145,31,.4),transparent 66%);
}
.modal__sidein{position:relative;z-index:2}
.modal__badge{
  display:inline-block;background:var(--grad-btn);
  padding:4px 11px;border-radius:100px;
  font-size:.63rem;font-weight:800;letter-spacing:.12em;margin-bottom:13px;
}
.modal__side h3{color:#fff;font-size:1.55rem;line-height:1.12}
.modal__side h3 b{font-size:2.4rem;display:inline-block;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.modal__side p{margin-top:6px;font-size:.85rem;color:rgba(255,255,255,.84)}
.modal__side ul{margin-top:17px;display:grid;gap:8px}
.modal__side li{position:relative;padding-left:21px;font-size:.82rem;font-weight:600}
.modal__side li::before{
  content:"";position:absolute;left:0;top:.45em;width:11px;height:11px;border-radius:50%;
  background:var(--grad-soft);
}

.modal__main{padding:26px 24px 22px}
.modal__main h2{font-size:1.35rem;padding-right:32px}
.modal__lead{margin-top:8px;font-size:.88rem;color:var(--ink-2);line-height:1.6}
.modal__main form{margin-top:16px;display:grid;gap:12px}
.modal__no{
  display:block;margin:1px auto 0;padding:8px 12px;
  font-size:.8rem;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;
}
.modal__no:hover{color:var(--ink-2)}

body.no-scroll{overflow:hidden}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .hero__in{grid-template-columns:1fr;gap:34px}
  .hero__copy{max-width:none}
  .qcard{max-width:460px;margin-inline:0}
  .track__in,.enq{grid-template-columns:1fr;gap:32px}
  .track__panel,.enq__form{max-width:520px}
  /* Brand on its own row, the three link groups side by side — stacking them
     made the footer nearly twice as tall as it needed to be. */
  .ftr__grid{grid-template-columns:repeat(3,1fr);gap:20px}
  .ftr__brand{grid-column:1/-1}
}

@media (max-width:900px){
  /* Comfortable centred column instead of edge-to-edge stretch */
  .wrap{max-width:660px}
  .hdr__in{padding-inline:14px;min-height:60px}

  /* Mobile menu drops out of the glass pill */
  .hdr__nav{
    position:absolute;top:calc(100% + 9px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    padding:8px 18px 16px;
    border:1px solid rgba(255,255,255,.9);
    border-radius:var(--r-lg);
    box-shadow:0 22px 44px -18px rgba(13,30,133,.42);
    transform:translateY(-10px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
    max-height:calc(100dvh - var(--hdr-h) - 30px);overflow:auto;
    margin-left:0;
  }
  .hdr__nav.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .hdr__nav a{padding:11px 4px;border-bottom:1px solid var(--line);font-size:.96rem;min-height:50px}
  .hdr__nav a::after{display:none}
  .hdr__nav .hdr__navcta{
    display:flex;justify-content:center;
    margin-top:12px;border-bottom:0;
    background:var(--grad-btn);color:#fff;border-radius:100px;font-weight:700;
    box-shadow:var(--sh-orange);text-shadow:0 1px 2px rgba(122,32,0,.42);
  }
  .hdr__burger{display:flex}
  .hdr__call span{display:none}
  .hdr__call{padding-inline:11px;min-width:44px}
  .hdr__act .btn--grad{display:none}
  /* Nav is out of flow here, so pin the actions to the right edge of the pill —
     otherwise they trail the logo and float mid-bar with dead space beside them. */
  .hdr__act{margin-left:auto}

  .cards,.why{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .stats__grid{grid-template-columns:1fr 1fr;gap:22px 10px}
  .stat:nth-child(3)::before{display:none}
  .step:not(:last-child)::before{display:none}
  .enq__left,.track__copy{max-width:none}

  .modal__box{grid-template-columns:1fr;width:min(440px,100%)}
  .modal__side{
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    padding:14px 18px 15px;
  }
  .modal__side h3{font-size:1.05rem;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
  .modal__side h3 br{display:none}
  .modal__side h3 b{font-size:1.7rem}
  .modal__badge{margin-bottom:8px}
  .modal__side p{font-size:.76rem;margin-top:2px}
  .modal__side ul{display:none}
  .modal__main{padding:20px 20px 18px}
  .modal__main h2{font-size:1.22rem;padding-right:30px}
  .modal__lead{font-size:.84rem;margin-top:6px}
  .modal__main form{margin-top:14px;gap:11px}
}

@media (max-width:640px){
  :root{--hdr-h:76px}
  .topbar__txt{font-size:.73rem}
  .topbar__i{padding-inline:14px;gap:7px}
  .hdr__logo img{height:29px}

  .hero{min-height:auto;padding-bottom:52px;padding-top:calc(var(--hdr-h) + 26px)}
  .hero__h1{font-size:clamp(1.85rem,8.2vw,2.5rem)}
  /* Portrait crops hard, so frame the loader + UCL container rather than the
     plain fuselage that sits further right. Values verified to hold white text
     above 4.5:1 on the brightest part of the clip (the sunrise flare). */
  .hero__poster,.hero__video{object-position:52% 46%}
  .hero__scrim{
    background:
      linear-gradient(180deg,rgba(6,15,82,.68) 0%,rgba(10,22,104,.72) 42%,rgba(6,15,82,.86) 100%);
  }
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .hero__chips{gap:8px 15px}
  .hero__chips li{font-size:.81rem}
  .hero__scrolldown{display:none}
  .qcard{padding:20px 18px;border-radius:var(--r-lg);max-width:none}

  .ticker__i{padding-inline:14px}
  .ticker__i b{font-size:.75rem}
  .ticker__i i{display:none}

  .sec{padding-block:48px}
  .sec__head{margin-bottom:28px}
  .dests{grid-template-columns:1fr 1fr;gap:11px}
  .finalcta__btns{flex-direction:column}
  .finalcta__btns .btn{width:100%}

  /* Collapse each link group behind its heading — three tappable rows instead
     of fourteen stacked links. */
  .ftr__grid{grid-template-columns:1fr;gap:0}
  .ftr__brand{margin-bottom:6px}
  .ftr__col{border-top:1px solid rgba(255,255,255,.11)}
  .ftr__col summary{min-height:50px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .ftr__col h4{margin:0}
  .ftr__chev{display:block}
  .ftr__col[open] .ftr__chev{transform:rotate(180deg)}
  .ftr__links{padding-bottom:8px}
  .ftr__col a{font-size:.85rem;min-height:42px}
  .ftr__bar{flex-direction:column;text-align:center;gap:5px;margin-top:14px}

  .float{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));gap:15px}
  .float__btn{width:47px;height:47px}
  .float__btn svg{width:23px;height:23px}
  .float__tip{display:none}

  .modal{padding:10px}
  .modal__box{border-radius:var(--r-lg);max-height:calc(100dvh - 20px)}
  .modal__side{border-radius:var(--r-lg) var(--r-lg) 0 0}
}

/* Below this the grids genuinely have to stack — cap them so a lone card
   never stretches into a wide, thin band. */
@media (max-width:560px){
  .cards,.why,.quotes,.steps,.faq{max-width:430px;margin-inline:auto}
  .track__form .btn{padding-inline:18px;font-size:.86rem}
  .track__inputwrap input{padding-left:39px}
  .track__ico{left:13px;width:17px;height:17px}
  .track__panel{padding:18px 16px}
  .enq__form{padding:22px 18px;border-radius:var(--r-lg)}
}

@media (max-width:440px){
  .field-row{grid-template-columns:1fr}
  .enq__contact{grid-template-columns:1fr;max-width:340px}
  .stats__grid{gap:20px 8px}
}

@media (max-width:380px){
  .dests{grid-template-columns:1fr;max-width:280px;margin-inline:auto}
  .hero__h1{font-size:1.75rem}
}

/* Landscape phones: keep the hero usable */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding-bottom:42px}
  .hero__scrolldown{display:none}
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{opacity:1;transform:none}
  .float__btn,.hero__anim{animation:none}
  .float__ring{display:none}
  .ticker__track{animation:none}
  .ticker{overflow-x:auto}
}

/* ── Print ── */
@media print{
  .float,.modal,.topbar,.hero__media,.hdr__act,.ticker{display:none!important}
  .hero__copy{color:#000}
  .hero__h1,.hero__sub{color:#000;text-shadow:none}
}