/* =========================================================
   FlyOn Logistics — frontend stylesheet
   Brand palette derived from the FlyOn mark.
   Blue  : #1E3E8C / #2A4FA8   Gold : #E3A93C / #F0BE5C
   Glow  : cyan / green / orange only — no purple, per spec
========================================================= */
:root{
  --blue-900:#0A1530;
  --blue-800:#0F1E45;
  --blue-700:#152A5C;
  --blue-600:#1E3E8C;
  --blue-500:#2A4FA8;
  --blue-400:#4368C9;
  --gold-600:#C98A22;
  --gold-500:#E3A93C;
  --gold-400:#F0BE5C;
  --gold-300:#F7D68C;
  --cyan:#38E1C6;
  --green:#34D399;
  --orange:#FF8A3D;

  --paper:#F4F6FB;
  --ink:#0E1A33;
  --slate:#5B6B85;
  --slate-soft:#8492AC;
  --line:rgba(14,26,51,.08);

  --glass-bg:rgba(255,255,255,.62);
  --glass-bg-strong:rgba(255,255,255,.82);
  --glass-border:rgba(255,255,255,.55);
  --glass-dark:rgba(9,17,38,.55);
  --glass-dark-strong:rgba(9,17,38,.78);
  --glass-dark-border:rgba(255,255,255,.09);

  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;

  --shadow-soft:0 10px 30px rgba(14,26,51,.08);
  --shadow-lift:0 20px 45px rgba(14,26,51,.14);
  --shadow-glow-blue:0 0 0 1px rgba(30,62,140,.15), 0 18px 40px rgba(30,62,140,.28);
  --shadow-glow-gold:0 0 0 1px rgba(227,169,60,.2), 0 18px 40px rgba(227,169,60,.28);

  --ff-display:'Poppins', sans-serif;
  --ff-body:'Inter', system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
html,body{height:100%;}
body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
  margin:0;
  padding-bottom:0;
}
@media (max-width: 991.98px){ body{ padding-bottom:82px; } }

h1,h2,h3,h4,h5,.display-font{ font-family:var(--ff-display); letter-spacing:-0.01em; color:var(--ink); }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
::selection{ background:var(--gold-400); color:var(--blue-900); }
:focus-visible{ outline:2px solid var(--gold-500); outline-offset:3px; border-radius:4px; }
.container-app{ max-width:1240px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   UTILITIES
========================================================= */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-display); font-weight:700;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-600); margin-bottom:12px;
}
.eyebrow::before{
  content:""; width:22px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold-500),var(--blue-500));
}
.section-title{ font-size:clamp(1.6rem,3.4vw,2.5rem); font-weight:700; margin-bottom:14px; }
.section-title-sm{ max-width:640px; }
.container-narrow{ max-width:820px; }
.container-narrower{ max-width:720px; }
.section-sub{ color:var(--slate); font-size:1rem; max-width:640px; }
.section-sub.mx-auto{ margin-left:auto; margin-right:auto; }
.section{ padding:76px 0; position:relative; }
.text-gold{ color:var(--gold-500); }
.text-blue{ color:var(--blue-600); }
.bg-soft-blue{ background:#EEF2FC; }

.btn-brand-gold{
  background:linear-gradient(135deg,var(--gold-400),var(--gold-600));
  border:0; color:var(--blue-900); font-weight:700; font-family:var(--ff-display);
  padding:.72rem 1.5rem; border-radius:999px; box-shadow:var(--shadow-glow-gold);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-brand-gold:hover{ transform:translateY(-2px); box-shadow:0 22px 46px rgba(227,169,60,.4); color:var(--blue-900); }
.btn-brand-outline{
  background:transparent; border:1.5px solid rgba(255,255,255,.55); color:#fff;
  font-weight:600; font-family:var(--ff-display); padding:.68rem 1.4rem; border-radius:999px;
  transition:background .25s ease, border-color .25s ease;
}
.btn-brand-outline:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }
.btn-brand-navy{
  background:linear-gradient(135deg,var(--blue-500),var(--blue-800));
  border:0; color:#fff; font-weight:700; font-family:var(--ff-display);
  padding:.72rem 1.5rem; border-radius:999px; box-shadow:var(--shadow-glow-blue);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-brand-navy:hover{ transform:translateY(-2px); color:#fff; }

.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.76rem; font-weight:600; padding:.4rem .85rem; border-radius:999px;
  background:#fff; border:1px solid var(--line); color:var(--blue-700);
  box-shadow:var(--shadow-soft);
}
.pill i{ color:var(--gold-500); }

.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--glass-border);
}
.glass-dark{
  background:var(--glass-dark);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--glass-dark-border);
  color:#fff;
}

@property --angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.glow-frame{ position:relative; border-radius:var(--radius-lg); isolation:isolate; }
.glow-frame::before{
  content:""; position:absolute; inset:-1.5px; border-radius:inherit; z-index:-1;
  background:conic-gradient(from var(--angle), transparent 0 62%, var(--blue-500) 72%, var(--cyan) 82%, var(--gold-500) 92%, transparent 100%);
  animation:spin-corner 5s linear infinite;
}
@keyframes spin-corner{ to{ --angle:360deg; } }
.glow-frame > .glow-inner{ border-radius:inherit; height:100%; }

/* =========================================================
   SCROLL PROGRESS BAR
========================================================= */
#scrollProgress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:2000;
  background:linear-gradient(90deg,var(--gold-500),var(--blue-500),var(--cyan));
  transition:width .1s linear;
}

/* =========================================================
   HEADER
========================================================= */
.site-header{
  position:sticky; top:0; z-index:1030;
  display:flex; flex-direction:column;
  background:#fff;
  border-bottom:3px solid var(--blue-600);
  box-shadow:0 4px 16px rgba(227,169,60,.4), 0 8px 26px rgba(227,169,60,.22);
  transition:box-shadow .35s ease;
  overflow:visible;
}
.site-header.scrolled{ box-shadow:0 6px 20px rgba(227,169,60,.55), 0 10px 30px rgba(227,169,60,.3); }
.header-topbar{ background:var(--blue-800); text-align:center; padding:5px 18px; flex:0 0 auto; }
.header-topbar a{
  color:#fff; font-size:.72rem; font-weight:600; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:6px;
}
.header-topbar a:hover{ color:var(--gold-400); }
.header-topbar i{ color:var(--gold-400); font-size:.75rem; }
@media (min-width:992px){ .header-topbar{ text-align:right; padding-right:24px; } }
.header-row{
  position:relative; z-index:2; width:100%; height:70px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 18px; flex:0 0 auto;
  transition:height .35s ease;
}
.site-header.scrolled .header-row{ height:62px; }
.brand-logo{ display:flex; align-items:center; gap:8px; }
.brand-logo img.icon{
  display:block; height:32px; width:auto;
  filter:drop-shadow(0 1px 3px rgba(20,43,99,.18));
  transition:height .35s ease;
}
.brand-logo img.wordmark{
  height:19px; width:auto;
  filter:drop-shadow(0 1px 3px rgba(20,43,99,.18));
  transition:height .35s ease, filter .35s ease;
}
.site-header.scrolled .brand-logo img.icon{ height:28px; }
.site-header.scrolled .brand-logo img.wordmark{ height:17px; }
.header-side{ display:flex; align-items:center; gap:6px; }
.header-side.left{ justify-content:flex-start; }
.header-side.right{ justify-content:flex-end; }

.desktop-nav{ display:none; }
@media (min-width:992px){
  .header-row{ display:flex; align-items:center; justify-content:flex-start; grid-template-columns:none; }
  .brand-logo{ order:0; margin-right:38px; flex:0 0 auto; }
  .brand-logo img.icon{ display:block; height:40px; width:auto; filter:drop-shadow(0 1px 3px rgba(20,43,99,.18)); }
  .brand-logo img.wordmark{ height:22px; }
  .site-header.scrolled .brand-logo img.icon{ height:34px; }
  .header-side.left{ order:1; }
  .header-side.right{ order:2; margin-left:auto; }
  .desktop-nav{ display:flex; align-items:center; gap:10px; }
  .desktop-nav a{
    font-family:var(--ff-display); font-weight:600; font-size:.86rem; color:var(--blue-800);
    position:relative; padding:8px 15px; border-radius:999px; border:1.5px solid transparent;
    transition:color .25s ease, border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
  }
  .desktop-nav a:hover, .desktop-nav a:focus-visible, .desktop-nav a.active{
    background-color:var(--gold-400);
    border-color:var(--blue-600);
    color:var(--blue-900);
    box-shadow:0 0 0 3px rgba(227,169,60,.18), 0 0 20px rgba(227,169,60,.6);
  }
  .header-cta{ display:flex; align-items:center; gap:10px; }
}
.header-icon-btn{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#EEF2FC; border:1px solid var(--line); color:var(--blue-700); font-size:1rem;
  transition:background .25s ease, transform .25s ease;
}
.header-icon-btn:hover{ background:var(--gold-400); color:var(--blue-900); transform:translateY(-1px); }

/* =========================================================
   HERO — home page, 35vh animated photo backdrop + motion text
========================================================= */
.hero{
  position:relative; height:35vh; min-height:300px; overflow:hidden;
  color:#fff;
  background:linear-gradient(135deg, #0A1530 0%, #142B63 42%, #1E3E8C 78%, #2A4FA8 100%);
}
.hero-bg{ position:absolute; inset:0; z-index:1; overflow:hidden; }
.hero-slide{
  position:absolute; inset:-10%; width:120%; height:120%; object-fit:cover; object-position:center;
  opacity:0; filter:saturate(1.15) contrast(1.05) brightness(.85);
  transition:opacity 1.4s ease;
  animation:heroPan 16s ease-in-out infinite alternate;
}
.hero-slide.active{ opacity:.65; z-index:1; }
@keyframes heroPan{
  0%{ transform:scale(1.12) translate(-2%,-1%); }
  100%{ transform:scale(1.26) translate(2%,2%); }
}
#heroCanvas{ position:absolute; inset:0; z-index:2; width:100%; height:100%; display:block; }
.hero-overlay{
  position:absolute; inset:0; z-index:3;
  background:linear-gradient(115deg, rgba(6,12,32,.62) 0%, rgba(10,22,55,.48) 45%, rgba(20,43,99,.38) 100%);
}
.hero-content{
  position:relative; z-index:5; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:8px 20px;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  color:var(--gold-300); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  padding:6px 14px; border-radius:14px; margin-bottom:8px;
  max-width:92%; text-align:center; line-height:1.35; white-space:normal;
}
.hero-badge i{ flex:0 0 auto; }
.hero-headline{ font-size:clamp(1.15rem,3.6vw,1.85rem); font-weight:700; margin:0 0 4px; line-height:1.2; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.45); }
.hero-headline .word{ display:inline-block; will-change:transform,opacity; }
.hero-headline .accent{ color:var(--gold-400); }
.hero-typed-wrap{ font-size:.85rem; color:#CBD7F2; min-height:1.3em; margin-bottom:12px; }
#heroTyped{ font-weight:600; color:#fff; }
.typed-cursor{ color:var(--gold-400); }

.hero-blink{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-300); margin-bottom:6px; animation:heroBlink 1.6s ease-in-out infinite;
}
@keyframes heroBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@media (prefers-reduced-motion: reduce){ .hero-blink{ animation:none; } }

.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:2px; }
.hero-cta .btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:.55rem 1.3rem; font-size:.82rem; white-space:nowrap;
  font-family:var(--ff-display); font-weight:700; border-radius:999px;
  transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease, transform .2s ease;
}
.btn-hero-track{
  background:var(--blue-600); color:#fff; border:2px solid var(--gold-500);
  box-shadow:0 8px 20px rgba(227,169,60,.35), 0 0 16px rgba(227,169,60,.3);
}
.btn-hero-track:hover, .btn-hero-track:focus-visible{
  background:var(--gold-500); color:var(--blue-900); border-color:var(--blue-600);
  box-shadow:0 8px 20px rgba(20,43,99,.45), 0 0 18px rgba(20,43,99,.4);
  transform:translateY(-2px);
}
.btn-hero-call{
  background:var(--gold-500); color:var(--blue-900); border:2px solid var(--blue-600);
  box-shadow:0 8px 20px rgba(20,43,99,.35), 0 0 16px rgba(20,43,99,.3);
}
.btn-hero-call:hover, .btn-hero-call:focus-visible{
  background:var(--blue-600); color:#fff; border-color:var(--gold-500);
  box-shadow:0 8px 20px rgba(227,169,60,.45), 0 0 18px rgba(227,169,60,.4);
  transform:translateY(-2px);
}
@media (max-width:360px){
  .hero-cta{ gap:8px; }
  .hero-cta .btn{ padding:.48rem 1rem; font-size:.76rem; }
}

/* =========================================================
   PAGE HERO — inner pages (About/Services/Tracking/Contact/Branches/Enquiry)
========================================================= */
.page-hero{
  position:relative; padding:54px 0 34px; text-align:center; overflow:hidden;
  background:linear-gradient(135deg, #0A1530 0%, #142B63 45%, #1E3E8C 80%, #2A4FA8 100%);
  color:#fff;
}
.page-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:18px 18px; opacity:.4;
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero h1{ color:#fff; font-size:clamp(1.6rem,3.8vw,2.5rem); margin-bottom:8px; }
.page-hero p{ color:#C9D4E8; max-width:620px; margin:0 auto; }

.breadcrumb-strip{
  background:#fff; border-bottom:1px solid var(--line);
}
.breadcrumb-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:.8rem; color:var(--slate); margin:0; padding:12px 0; list-style:none;
}
.breadcrumb-bar a{ color:var(--slate); }
.breadcrumb-bar a:hover{ color:var(--blue-600); }
.breadcrumb-bar li[aria-current="page"]{ color:var(--ink); font-weight:600; }
.breadcrumb-bar .sep{ color:var(--slate-soft); font-size:.65rem; display:flex; align-items:center; }

/* =========================================================
   QUICK STAT STRIP (overlaps hero bottom edge)
========================================================= */
.quick-strip{ margin-top:-24px; position:relative; z-index:4; padding:0 16px; pointer-events:none; }
.quick-strip-card{
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lift);
  padding:14px 8px; display:grid; grid-template-columns:repeat(4,1fr); gap:4px;
}
.qs-item{ text-align:center; padding:6px 2px; }
.qs-item .qs-num{ font-family:var(--ff-display); font-weight:800; font-size:1.15rem; color:var(--blue-700); }
.qs-item .qs-lbl{ font-size:.64rem; color:var(--slate); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }

/* =========================================================
   WELCOME (two column)
========================================================= */
.welcome-media{ position:relative; }
.welcome-media .frame{ border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lift); }
.welcome-media .frame img{ width:100%; height:380px; object-fit:cover; }
.welcome-floating-badge{
  position:absolute; bottom:-14px; left:10px; padding:14px 16px; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift); display:flex; align-items:center; gap:10px; max-width:210px;
}
@media (min-width:576px){
  .welcome-floating-badge{ bottom:-18px; left:-18px; padding:16px 18px; gap:12px; max-width:230px; }
}
.welcome-floating-badge .ico{
  width:44px; height:44px; border-radius:12px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--gold-400),var(--gold-600));
  display:flex; align-items:center; justify-content:center; color:var(--blue-900); font-size:1.15rem;
}
.welcome-floating-badge .num{ font-family:var(--ff-display); font-weight:800; color:var(--blue-700); font-size:1.15rem; line-height:1; }
.welcome-floating-badge .lbl{ font-size:.7rem; color:var(--slate); }
.welcome-check-list{ list-style:none; padding:0; margin:20px 0; }
.welcome-check-list li{ display:flex; align-items:center; gap:10px; margin-bottom:10px; font-weight:600; font-size:.92rem; }
.welcome-check-list i{ color:var(--green); font-size:1.05rem; }

/* =========================================================
   TIMELINE + COUNTERS
========================================================= */
.timeline{ position:relative; margin-top:44px; }
.timeline::before{
  content:""; position:absolute; top:26px; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--gold-500),var(--blue-500),var(--cyan));
  opacity:.35;
}
@media (max-width:767.98px){ .timeline::before{ top:0; left:26px; right:auto; width:2px; height:100%; } }
.timeline-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:767.98px){ .timeline-row{ grid-template-columns:1fr; gap:30px; padding-left:56px; position:relative; } }
.timeline-item{ position:relative; text-align:center; }
@media (max-width:767.98px){ .timeline-item{ text-align:left; } }
.timeline-dot{
  width:52px; height:52px; border-radius:50%; margin:0 auto 14px;
  background:linear-gradient(135deg,var(--blue-500),var(--blue-800));
  display:flex; align-items:center; justify-content:center; color:var(--gold-400); font-size:1.2rem;
  box-shadow:var(--shadow-glow-blue); position:relative; z-index:2;
}
@media (max-width:767.98px){ .timeline-dot{ position:absolute; left:-56px; top:0; margin:0; } }
.timeline-item h4{ font-size:1rem; margin-bottom:6px; }
.timeline-item p{ font-size:.84rem; color:var(--slate); margin:0; }

.counters-band{
  margin-top:56px; border-radius:var(--radius-xl); overflow:hidden; position:relative;
  background:linear-gradient(120deg,var(--blue-900) 0%, var(--blue-700) 100%);
  padding:40px 20px;
}
.counters-band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:18px 18px; opacity:.5;
}
.counter-item{ position:relative; z-index:2; text-align:center; color:#fff; }
.counter-item .count{ font-family:var(--ff-display); font-weight:800; font-size:clamp(1.7rem,3.2vw,2.4rem); color:var(--gold-400); }
.counter-item .count::after{ content:attr(data-suffix); }
.counter-item .lbl{ font-size:.78rem; color:#C9D4E8; text-transform:uppercase; letter-spacing:.06em; margin-top:4px; }
.counters-band .cta-heading{ color:#fff; }
.counters-band .cta-sub{ color:#C9D4E8; }

/* =========================================================
   OUR CLIENTS
========================================================= */
.clients-strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px;
}
.client-badge{
  display:flex; align-items:center; justify-content:center;
  min-width:180px; height:84px; padding:14px 26px; flex:1 1 200px; max-width:260px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft); transition:transform .3s ease, box-shadow .3s ease;
  font-family:var(--ff-display); font-weight:800; text-align:center; line-height:1.15;
  color:var(--blue-800); filter:grayscale(.15);
}
.client-badge:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); filter:none; }
.client-badge .cb-main{ display:block; font-size:1.1rem; letter-spacing:.02em; }
.client-badge .cb-sub{ display:block; font-size:.6rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--slate); margin-top:2px; }

/* =========================================================
   SERVICES
========================================================= */
.service-card{
  background:#fff; border-radius:var(--radius-lg); padding:26px 22px; height:100%;
  box-shadow:var(--shadow-soft); position:relative; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.tilt-card{ transform-style:preserve-3d; will-change:transform; }
.tilt-card .card-shine{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; border-radius:inherit;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(240,190,92,.35), transparent 60%);
  transition:opacity .3s ease;
}
.tilt-card:hover .card-shine{ opacity:1; }
.service-card .s-ico{
  width:54px; height:54px; border-radius:14px; margin-bottom:16px;
  background:linear-gradient(135deg,var(--blue-600),var(--blue-900)); color:var(--gold-400);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
}
.service-card h3{ font-size:1.06rem; margin-bottom:8px; }
.service-card p{ font-size:.86rem; color:var(--slate); margin-bottom:14px; }
.service-card .read-more{ font-size:.8rem; font-weight:700; color:var(--blue-600); display:inline-flex; align-items:center; gap:6px; }
.service-card .read-more i{ transition:transform .25s ease; }
.service-card:hover .read-more i{ transform:translateX(4px); }

.service-detail-card{
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); padding:28px; height:100%;
}
.service-detail-card ul{ list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:8px; }
.service-detail-card li{ font-size:.86rem; color:var(--slate); display:flex; align-items:flex-start; gap:8px; }
.service-detail-card li i{ color:var(--green); margin-top:3px; }

/* =========================================================
   ABOUT / TRUST
========================================================= */
.reach-card{
  height:100%; min-height:340px; border-radius:var(--radius-xl); padding:36px 32px;
  background:linear-gradient(135deg, var(--blue-900) 0%, var(--blue-600) 100%);
  color:#fff; position:relative; overflow:hidden;
}
.reach-card::before{
  content:""; position:absolute; top:-50px; right:-70px; width:220px; height:220px;
  border:1px solid rgba(255,255,255,.14); border-radius:50%; pointer-events:none;
}
.reach-card::after{
  content:""; position:absolute; bottom:-90px; right:-50px; width:300px; height:300px;
  border:1px solid rgba(255,255,255,.08); border-radius:50%; pointer-events:none;
}
.reach-eyebrow{
  position:relative; z-index:2; display:flex; align-items:center; gap:8px;
  font-family:var(--ff-display); font-size:.7rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-400); margin-bottom:10px;
}
.reach-eyebrow .dash{ width:18px; height:2px; background:var(--gold-500); display:inline-block; border-radius:2px; }
.reach-title{ position:relative; z-index:2; color:#fff; font-size:1.5rem; font-weight:800; margin-bottom:30px; }
.reach-timeline{ position:relative; z-index:2; display:flex; flex-direction:column; gap:20px; }
.rt-item{ display:flex; align-items:flex-start; gap:14px; }
.rt-dot{
  width:36px; height:36px; border-radius:50%; flex:0 0 auto;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; color:var(--gold-400); font-size:.95rem;
}
.rt-tag{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gold-300); }
.rt-body h5{ color:#fff; font-size:.92rem; margin:2px 0 2px; }
.rt-body p{ color:#C9D4E8; font-size:.82rem; margin:0; }
.about-col-title{ font-size:1.3rem; margin-bottom:18px; }

.trust-stack{ display:flex; flex-direction:column; gap:14px; }
.trust-card{
  display:flex; align-items:flex-start; gap:16px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-md); padding:18px 20px; box-shadow:var(--shadow-soft);
  transition:transform .25s ease, box-shadow .25s ease;
}
.trust-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.trust-ico{
  width:44px; height:44px; border-radius:12px; flex:0 0 auto; font-size:1.15rem;
  display:flex; align-items:center; justify-content:center;
}
.trust-ico.blue{ background:#E7EEFC; color:var(--blue-600); }
.trust-ico.red{ background:#FDEAEA; color:#D64545; }
.trust-ico.green{ background:#E6F6EC; color:#279A56; }
.trust-ico.gold{ background:#FDF3DF; color:var(--gold-600); }
.trust-card h5{ font-size:.95rem; margin-bottom:3px; color:var(--ink); }
.trust-card p{ font-size:.82rem; color:var(--slate); margin:0; }

/* =========================================================
   SPOTLIGHT HOVER — JS-driven cursor-tracking glow for plain cards
========================================================= */
.spotlight-card{ position:relative; overflow:hidden; }
.spotlight-card::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(227,169,60,.28), transparent 70%);
  transition:opacity .35s ease;
}
.spotlight-card:hover::after{ opacity:1; }
.spotlight-card > *{ position:relative; z-index:2; }

/* =========================================================
   WHY CHOOSE US
========================================================= */
.why-box{
  background:#fff; border-radius:var(--radius-md); padding:24px 18px; height:100%;
  box-shadow:var(--shadow-soft); text-align:center; transition:box-shadow .3s ease, transform .3s ease;
  position:relative; overflow:hidden;
}
.why-box:hover{ transform:translateY(-4px); box-shadow:var(--shadow-glow-gold); }
.why-box .w-ico{
  width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
  background:#EEF2FC; color:var(--blue-600); display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; transition:background .3s ease, color .3s ease, transform .3s ease;
}
.why-box:hover .w-ico{ background:var(--gold-500); color:#fff; transform:scale(1.08) rotate(-6deg); }
.why-box h5{ font-size:.92rem; margin-bottom:6px; }
.why-box p{ font-size:.8rem; color:var(--slate); margin:0; }

/* =========================================================
   TESTIMONIALS
========================================================= */
.testi-card{
  border-radius:var(--radius-lg); padding:26px 24px; height:100%;
  box-shadow:var(--shadow-soft); background:#fff; transition:transform .3s ease, box-shadow .3s ease;
}
.testi-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.testi-stars i{ color:var(--gold-500); font-size:.85rem; }
.testi-card p.quote{ font-size:.92rem; color:var(--ink); margin:14px 0 18px; line-height:1.6; }
.testi-person{ display:flex; align-items:center; gap:12px; }
.testi-person img{ width:46px; height:46px; border-radius:50%; object-fit:cover; border:2px solid var(--gold-400); }
.testi-person .name{ font-weight:700; font-size:.88rem; }
.testi-person .role{ font-size:.72rem; color:var(--slate); }
.testi-card-solo{ max-width:640px; margin-left:auto; margin-right:auto; }
.testi-slide{ display:none; }
.testi-slide.active{ display:block; }
.testi-dots{ display:flex; justify-content:center; gap:8px; margin-top:20px; }
.testi-dot{
  width:9px; height:9px; border-radius:50%; border:0; padding:0;
  background:var(--line); transition:background .25s ease, transform .25s ease;
}
.testi-dot.active{ background:var(--gold-500); transform:scale(1.2); }

/* =========================================================
   FAQ (accordion glow)
========================================================= */
.faq-accordion .accordion-item{
  border:1px solid var(--line); border-radius:var(--radius-md) !important; margin-bottom:12px; overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.faq-accordion .accordion-button{ font-family:var(--ff-display); font-weight:600; font-size:.92rem; color:var(--ink); }
.faq-accordion .accordion-button:not(.collapsed){ color:var(--blue-700); background:#EEF2FC; box-shadow:none; }
.faq-accordion .accordion-button:focus{ box-shadow:0 0 0 3px rgba(227,169,60,.25); }
.faq-accordion .accordion-body{ font-size:.86rem; color:var(--slate); }

/* =========================================================
   CONTACT / ENQUIRY FORMS
========================================================= */
.contact-address-strip{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px 28px;
  margin-bottom:28px; padding:16px 20px; border-radius:var(--radius-md);
  background:#EEF2FC; border:1px solid var(--line);
}
.contact-address-strip span{ font-size:.85rem; color:var(--blue-800); font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.contact-address-strip i{ color:var(--gold-500); }
.contact-form-card{ border-radius:var(--radius-xl); padding:30px; box-shadow:var(--shadow-lift); background:#fff; }
.form-control, .form-select{
  border-radius:var(--radius-sm); border:1px solid var(--line); padding:.68rem .9rem; font-size:.9rem;
}
.form-control:focus, .form-select:focus{ border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(42,79,168,.15); }
#contactSuccess, #contactError, #enquirySuccess, #enquiryError, #partnerSuccess, #partnerError{ display:none; }
#contactSuccess.show, #contactError.show, #enquirySuccess.show, #enquiryError.show, #partnerSuccess.show, #partnerError.show{ display:block; }
.map-card{ border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lift); height:100%; min-height:340px; }
.map-card iframe{ width:100%; height:100%; min-height:340px; border:0; filter:grayscale(.15) contrast(1.05); }

/* =========================================================
   TRACKING PAGE
========================================================= */
.tracking-search-card{ border-radius:var(--radius-xl); padding:30px; box-shadow:var(--shadow-lift); background:#fff; max-width:680px; margin:0 auto; }
.tracking-result{ display:none; border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-soft); background:#fff; margin-top:24px; }
.tracking-result.show{ display:block; }

/* DHL-style shipment summary card. Wider than a plain form card so the step road has room,
   but capped rather than stretching edge-to-edge across the full info-page container. */
.trk-card{ max-width:900px; margin:0 auto; padding:34px clamp(20px,4vw,40px); }
.trk-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.trk-code{ font-weight:700; font-size:.95rem; margin:0 0 4px; }
.trk-carrier{ font-size:.82rem; color:var(--slate); margin:0; }
.trk-status-row{ margin-bottom:10px; }
.trk-status-title{ font-size:1.35rem; font-weight:800; margin:0 0 6px; color:var(--ink); }
.trk-status-title.is-exception{ color:#c2410c; }
.trk-status-meta{ font-size:.82rem; color:var(--slate); margin:0; }
.trk-route{ font-size:.8rem; font-weight:700; color:var(--blue-600); margin:8px 0 0; text-transform:uppercase; letter-spacing:.03em; }

.trk-parties{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin:18px 0 0; padding:16px; background:var(--bg-soft,#f8fafc); border-radius:12px; }
.trk-party-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--slate); margin:0 0 4px; }
.trk-party-name{ font-size:.92rem; font-weight:700; color:var(--ink); margin:0; }
.trk-party-loc{ font-size:.8rem; color:var(--slate); margin:2px 0 0; }

/* Multi-step tracking "road": booking's real status flow (5-10+ steps depending on
   domestic/international), each dot done/current/upcoming/warning. Wraps onto extra rows
   instead of relying on horizontal scroll when there are a lot of steps; an SVG polyline
   (drawn in JS from each dot's actual position) connects them across wraps like a route
   map, and a small vehicle marker travels along it up to the current step. */
.trk-stepper-wrap{ position:relative; margin:26px 0 8px; }
.trk-road{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:visible; }
.trk-road-base{ fill:none; stroke:var(--line); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.trk-vehicle{
  position:absolute; top:0; left:0; width:32px; height:32px; margin:-16px 0 0 -16px; border-radius:50%;
  background:var(--blue-600); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.95rem; box-shadow:var(--shadow-lift); z-index:2; opacity:0;
  transition:transform .6s cubic-bezier(.5,.05,.5,.95), opacity .3s ease, background-color .4s ease;
}
.trk-vehicle.is-blink{ animation:tv-blink .26s ease-in-out 2; }
.trk-vehicle.is-arrived{ background:var(--green); }
@keyframes tv-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

/* Fixed column counts (not width-dependent flex-wrap) so wrapping is predictable: 2 per
   row on mobile, 3 on tablets, capped at 5 on desktop regardless of how much space is free. */
.trk-stepper{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,1fr); gap:26px 8px; padding:10px 2px 14px; justify-items:center; }
.trk-step{ width:100%; max-width:120px; text-align:center; }
@media (min-width:576px){
  .trk-stepper{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:992px){
  .trk-stepper{ grid-template-columns:repeat(5,1fr); }
}
.trk-step-dot{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; background:#fff; border:2px solid var(--line);
  color:var(--slate-soft); margin:0 auto 10px; font-size:.85rem; font-weight:700;
  transition:border-color .5s ease, color .5s ease, background-color .5s ease, box-shadow .5s ease;
}
.trk-step-label{ font-size:.7rem; font-weight:600; color:var(--slate-soft); line-height:1.25; padding:0 2px; transition:color .5s ease; }

.trk-step--done .trk-step-dot{ border-color:var(--green); background:var(--green); color:#fff; }
.trk-step--done .trk-step-label{ color:var(--ink); }

.trk-step--current .trk-step-dot{ border-color:var(--blue-600); color:var(--blue-600); box-shadow:0 0 0 4px rgba(30,62,140,.12); animation:ts-pulse 1.8s ease-out infinite; }
.trk-step--current .trk-step-label{ color:var(--ink); font-weight:700; }

.trk-step--warning .trk-step-dot{ border-color:#f97316; color:#f97316; background:#fff7ed; }
.trk-step--warning .trk-step-label{ color:#c2410c; font-weight:700; }

@keyframes ts-pulse{
  0%   { box-shadow:0 0 0 0 rgba(30,62,140,.35); }
  70%  { box-shadow:0 0 0 10px rgba(30,62,140,0); }
  100% { box-shadow:0 0 0 0 rgba(30,62,140,0); }
}

.trk-details{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px 24px; margin:0; padding-top:20px; border-top:1px solid var(--line); }
.trk-details dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--slate); margin-bottom:2px; }
.trk-details dd{ font-size:.92rem; font-weight:600; margin:0; }

/* Tracking Updates: plain chronological list of every manually-logged / status-change
   event (newest first), sitting below the shipment-details grid. */
.trk-updates{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.trk-updates-title{ font-size:1rem; font-weight:700; margin:0 0 14px; }
.trk-update-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.trk-update-list li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  padding:12px 14px; border-radius:var(--radius-sm); background:var(--paper);
}
.trk-update-list .tu-time{ font-size:.72rem; font-weight:700; color:var(--slate); min-width:120px; }
.trk-update-list .tu-label{ font-size:.85rem; font-weight:700; color:var(--ink); }
.trk-update-list .tu-loc{ font-size:.78rem; color:var(--blue-600); }
.trk-update-list .tu-remarks{ flex-basis:100%; font-size:.78rem; color:var(--slate); }

@media (prefers-reduced-motion: reduce){
  .trk-step-dot, .trk-step-label, .trk-vehicle{ transition:none; }
  .trk-step--current .trk-step-dot, .trk-vehicle.is-blink{ animation:none; }
}

/* =========================================================
   BRANCHES PAGE
========================================================= */
.branch-card{
  background:#fff; border-radius:var(--radius-lg); padding:24px; height:100%;
  box-shadow:var(--shadow-soft); transition:transform .3s ease, box-shadow .3s ease;
}
.branch-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.branch-card .b-tag{
  display:inline-flex; align-items:center; gap:6px; font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--gold-600);
  background:#FDF3DF; padding:4px 10px; border-radius:999px; margin-bottom:12px;
}
.branch-card h3{ font-size:1.05rem; margin-bottom:10px; }
.branch-card ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.branch-card li{ font-size:.84rem; color:var(--slate); display:flex; align-items:flex-start; gap:8px; }
.branch-card li i{ color:var(--blue-600); margin-top:2px; }

/* =========================================================
   INFO PAGES HUB (card grid)
========================================================= */
.info-card{
  display:flex; flex-direction:column; height:100%; background:#fff; border-radius:var(--radius-lg);
  padding:26px 22px; box-shadow:var(--shadow-soft); transition:transform .3s ease, box-shadow .3s ease;
}
.info-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.info-card-ico{
  width:50px; height:50px; border-radius:14px; margin-bottom:14px;
  background:#EEF2FC; color:var(--blue-600); display:flex; align-items:center; justify-content:center; font-size:1.25rem;
}
.info-card h2{ font-size:1.02rem; margin-bottom:8px; }
.info-card p{ font-size:.86rem; color:var(--slate); margin-bottom:14px; flex:1 1 auto; }
.info-card .read-more{ font-size:.8rem; font-weight:700; color:var(--blue-600); display:inline-flex; align-items:center; gap:6px; }
.info-card .read-more i{ transition:transform .25s ease; }
.info-card:hover .read-more i{ transform:translateX(4px); }

/* =========================================================
   LEGAL / INFO PAGES (Privacy, Terms, Disclaimer, FAQ)
========================================================= */
.legal-content{ color:var(--slate); font-size:.94rem; line-height:1.75; }
.legal-content h2{ font-size:1.2rem; margin-top:36px; margin-bottom:12px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{ margin-bottom:14px; }
.legal-content ul{ margin-bottom:14px; padding-left:1.2rem; }
.legal-content li{ margin-bottom:8px; }
.legal-updated{
  display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--slate-soft);
  margin-bottom:28px;
}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{ background:linear-gradient(180deg,var(--blue-900),#060C1E); color:#C9D4E8; padding:18px 0 14px; margin-top:0; }
@media (max-width:991.98px){ .site-footer{ display:none; } }
.footer-address-line{ text-align:center; font-size:.8rem; color:#C9D4E8; margin-bottom:12px; line-height:1.7; }
.footer-address-line i{ color:var(--gold-400); margin-right:5px; }
.footer-address-line a{ color:#C9D4E8; }
.footer-address-line a:hover{ color:var(--gold-400); }
.footer-address-line .sep{ color:#4C5C82; margin:0 10px; }
.footer-legal-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px;
  margin-bottom:14px; font-size:.76rem;
}
.footer-legal-links a{ color:#9FB0D2; }
.footer-legal-links a:hover{ color:var(--gold-400); }
.footer-bottom-row{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  border-top:1px solid rgba(255,255,255,.1); padding-top:12px;
}
.social-row{ display:flex; gap:8px; }
.social-row a{
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; transition:.25s; font-size:.85rem;
}
.social-row a:hover{ background:var(--gold-500); color:var(--blue-900); transform:translateY(-3px); }
.footer-copyright{ font-size:.74rem; color:#7C8BAE; }
#backToTop{
  position:fixed; right:20px; bottom:20px; width:44px; height:44px; border-radius:50%; z-index:1020;
  background:linear-gradient(135deg,var(--gold-400),var(--gold-600)); color:var(--blue-900);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-glow-gold);
  opacity:0; visibility:hidden; transform:translateY(10px); transition:.3s ease; border:0;
}
#backToTop.show{ opacity:1; visibility:visible; transform:translateY(0); }
@media (max-width:991.98px){ #backToTop{ bottom:92px; } }

/* =========================================================
   FLOATING SIDE TRACK WIDGET
========================================================= */
.side-track-fab{ position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:1015; display:flex; align-items:stretch; }
.stf-icon{
  width:50px; height:50px; border-radius:0 50% 50% 0; flex:0 0 auto;
  background:linear-gradient(135deg,var(--gold-400),var(--gold-600));
  border:0; color:var(--blue-900); font-size:1.25rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:4px 4px 18px rgba(227,169,60,.45);
  position:relative; z-index:2; cursor:pointer;
}
.stf-panel{
  display:flex; align-items:center; gap:6px;
  background:#fff; border-radius:0 999px 999px 0;
  box-shadow:4px 4px 22px rgba(14,26,51,.18);
  max-width:0; opacity:0; padding:0; overflow:hidden; margin-left:-6px;
  transition:max-width .4s ease, opacity .3s ease, padding .4s ease;
}
.side-track-fab.open .stf-panel{ max-width:260px; opacity:1; padding:6px 8px 6px 16px; }
.stf-input{ border:0; outline:0; font-size:.85rem; width:170px; background:transparent; color:var(--ink); }
.stf-input::placeholder{ color:var(--slate-soft); }
.stf-go{
  width:34px; height:34px; border-radius:50%; border:0; flex:0 0 auto;
  background:var(--blue-600); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.stf-go:hover{ background:var(--blue-800); }

/* =========================================================
   BOTTOM MOBILE NAV
========================================================= */
.bottom-nav{ display:none; }
@media (max-width:991.98px){
  .bottom-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1040;
    height:64px; align-items:center; justify-content:space-between; padding:0 6px;
    background:rgba(10,21,48,.94);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    box-shadow:0 -10px 30px rgba(10,21,48,.25);
    padding-bottom:env(safe-area-inset-bottom);
  }
}
.bn-btn{
  background:none; border:0; color:#9FB0D2; display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:.6rem; font-weight:600; font-family:var(--ff-display); flex:1 1 0; padding:6px 2px;
}
.bn-btn i{ font-size:1.15rem; }
.bn-btn.active{ color:#fff; }
.bn-btn.active i{ color:var(--gold-400); }
.bn-fab-wrap{ position:relative; width:88px; height:100%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.bn-fab{
  width:82px; height:82px; min-width:82px; min-height:82px; border-radius:50%;
  aspect-ratio:1/1; flex:0 0 auto;
  background:#fff;
  border:3px solid var(--gold-500); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(227,169,60,.55);
  transition:transform .2s ease, box-shadow .2s ease;
}
.bn-fab:active{ transform:scale(.93); }
.bn-fab img{ width:52px; height:auto; flex:0 0 auto; animation:fabSwivel 4.5s ease-in-out infinite; transform-origin:50% 62%; }
@keyframes fabSwivel{
  0%, 62%, 100%{ transform:rotate(0deg); }
  68%{ transform:rotate(-18deg); }
  76%{ transform:rotate(14deg); }
  84%{ transform:rotate(-8deg); }
  92%{ transform:rotate(0deg); }
}
@media (hover:hover){ .bn-fab:hover img{ animation-play-state:paused; transform:rotate(-14deg); transition:transform .3s ease; } }

/* =========================================================
   SIDE MENU PANEL (mobile "Menu")
========================================================= */
.menu-backdrop{
  position:fixed; inset:0; z-index:1055; background:rgba(6,12,32,.55);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s;
}
.menu-backdrop.show{ opacity:1; visibility:visible; }
.fullscreen-menu{
  position:fixed; bottom:0; right:0; z-index:1060;
  width:75vw; height:100vh; max-width:460px; min-width:260px;
  background:radial-gradient(120% 120% at 80% 0%, #16305c 0%, var(--blue-900) 55%, #060C1E 100%);
  color:#fff; display:flex; flex-direction:column;
  border-radius:26px 0 0 0;
  box-shadow:-24px -24px 60px rgba(6,12,32,.5);
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.32,.72,0,1);
  overflow:hidden;
}
.fullscreen-menu.show{ transform:translateY(0); }
.fs-menu-top{ display:flex; align-items:center; justify-content:space-between; padding:18px; flex:0 0 auto; }
.fs-menu-top .brand-logo img.icon{ height:30px; }
.fs-menu-top .brand-logo img.wordmark{ height:17px; filter:drop-shadow(0 0 5px rgba(255,255,255,.7)) drop-shadow(0 1px 3px rgba(0,0,0,.3)); }
.fs-menu-close{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.fs-nav{
  list-style:none; margin:0; padding:6px 22px; flex:1 1 auto; min-height:0;
  overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.fs-nav::-webkit-scrollbar{ display:none; }
.fs-nav li{ border-bottom:1px solid rgba(255,255,255,.08); }
.fs-nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 4px; font-family:var(--ff-display); font-weight:700; font-size:1.05rem; color:#fff;
  opacity:0; transform:translateY(16px);
}
.fullscreen-menu.show .fs-nav a{ animation:fsIn .5s ease forwards; }
.fs-nav a i{ color:var(--gold-400); font-size:1rem; }
.fs-nav a.active{ color:var(--gold-400); }
@keyframes fsIn{ to{ opacity:1; transform:translateY(0); } }
.fs-menu-bottom{
  padding:16px 22px; display:flex; flex-direction:column; gap:14px; flex:0 0 auto;
  border-top:1px dashed rgba(255,255,255,.14);
}
.fs-legal-links{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:-4px; }
.fs-legal-links a{ font-size:.72rem; color:#9FB0D2; }
.fs-legal-links a:hover{ color:var(--gold-400); }
.fs-menu-bottom-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.fs-copyright{ font-size:.68rem; color:#8C9BC4; }
body.no-scroll{ overflow:hidden; }

/* Scroll-reveal — content visible by default, JS only adds a temporary
   hidden state for elements not yet on screen, revealed as they scroll in. */
[data-aos]{ opacity:1; transform:none; }
[data-aos].reveal-pending{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }

/* ---------- Tracking print: the "Print" button on the tracking result only
   prints the tracking number + status update list, not the whole page
   (header, nav, hero, search form, buttons, footer, etc. are hidden). ---------- */
@media print {
  body.is-printing-track > *{ display:none !important; }
  body.is-printing-track #trkPrintArea{
    display:block !important; position:static; margin:0; padding:0; box-shadow:none; border:0;
  }
  body.is-printing-track #trkPrintArea .trk-print-title{
    font-family:var(--ff-display,inherit); font-size:1.3rem; font-weight:800; margin:0 0 4px;
  }
  body.is-printing-track #trkPrintArea .trk-print-status{
    font-size:1rem; font-weight:700; margin:0 0 14px; color:#000;
  }
  body.is-printing-track #trkPrintArea .trk-update-list{
    list-style:none; margin:0; padding:0;
  }
  body.is-printing-track #trkPrintArea .trk-update-list li{
    padding:8px 0; border-bottom:1px solid #ccc; display:flex; flex-direction:column; gap:2px;
  }
  body.is-printing-track #trkPrintArea .tu-time{ font-weight:700; }
  body.is-printing-track #trkPrintArea .tu-loc,
  body.is-printing-track #trkPrintArea .tu-remarks{ font-size:.85rem; color:#333; }
}
[data-aos].reveal-pending.revealed{ opacity:1; transform:translateY(0); }