/* ==========================================================================
   WORLD ERA TOURS — style.css
   Premium one-page travel website
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Base & typography
   3.  Buttons, labels, utilities
   4.  Header & navigation
   5.  Hero + lead form
   6.  Destination marquee
   7.  About
   8.  Destinations
   9.  Packages
   10. Why choose us
   11. How it works
   12. Services
   13. Corporate travel
   14. Gallery
   15. CTA banner
   16. FAQ accordion
   17. Contact
   18. Footer
   19. Floating elements
   20. Reveal animations
   21. Responsive
   ========================================================================== */

/* ============ 1. DESIGN TOKENS ============ */
:root{
  --navy:#061A2D;
  --navy-2:#0B2942;
  --ocean:#0D6EFD;
  --aqua:#31C5D7;
  --gold:#F5B942;
  --off:#F7F9FC;
  --white:#FFFFFF;
  --text:#172033;
  --muted:#5A6A7E;
  --line:#E3E9F2;

  --grad-brand:linear-gradient(135deg,var(--ocean) 0%,var(--aqua) 100%);
  --grad-gold:linear-gradient(135deg,#F5B942 0%,#E9A227 100%);

  --shadow-sm:0 2px 8px rgba(6,26,45,.06);
  --shadow-md:0 12px 30px rgba(6,26,45,.09);
  --shadow-lg:0 24px 60px rgba(6,26,45,.14);

  --r-sm:12px;
  --r-md:18px;
  --r-lg:26px;
  --r-xl:34px;

  --head:'Manrope','Montserrat',system-ui,sans-serif;
  --body:'Inter','Poppins',system-ui,sans-serif;

  --container:1220px;
  --header-h:82px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============ 2. BASE & TYPOGRAPHY ============ */
*,*::before,*::after{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 12px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.7;
  color:var(--text);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Author display rules (display:grid on forms/panels) would otherwise beat the
   UA stylesheet's [hidden] rule — this keeps the attribute authoritative. */
[hidden]{display:none !important;}

img{max-width:100%;height:auto;display:block;}
svg{display:block;}
a{color:var(--ocean);text-decoration:none;}
address{font-style:normal;}
ul{margin:0;padding:0;list-style:none;}

h1,h2,h3,h4{
  font-family:var(--head);
  color:var(--navy);
  line-height:1.18;
  margin:0 0 .55em;
  letter-spacing:-.02em;
  font-weight:800;
}
h1{font-size:clamp(2.15rem,5.1vw,3.9rem);}
h2{font-size:clamp(1.75rem,3.4vw,2.75rem);}
h3{font-size:clamp(1.08rem,1.6vw,1.28rem);font-weight:700;}
p{margin:0 0 1.05em;}
p:last-child{margin-bottom:0;}

::selection{background:var(--aqua);color:var(--navy);}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:22px;
}
.container-narrow{max-width:880px;}

.section{padding:clamp(64px,8vw,110px) 0;}

.section-head{max-width:720px;margin:0 auto clamp(38px,5vw,58px);text-align:center;}
.section-lead{color:var(--muted);font-size:1.06rem;}

.label{
  display:inline-block;
  font-family:var(--head);
  font-weight:700;
  font-size:.775rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ocean);
  background:rgba(13,110,253,.09);
  border:1px solid rgba(13,110,253,.16);
  padding:6px 15px;
  border-radius:100px;
  margin-bottom:16px;
}
.label-light{
  color:var(--aqua);
  background:rgba(49,197,215,.12);
  border-color:rgba(49,197,215,.28);
}

.grad-text{
  background:linear-gradient(100deg,var(--aqua) 0%,var(--gold) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Accessibility helpers */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;
  font-weight:600;
}
.skip-link:focus{left:0;}

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

.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ============ 3. BUTTONS ============ */
.btn{
  --btn-bg:var(--ocean);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:var(--head);
  font-weight:700;
  font-size:.95rem;
  line-height:1;
  padding:14px 26px;
  border-radius:100px;
  border:1.5px solid transparent;
  cursor:pointer;
  text-align:center;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),background-color .25s,color .25s,border-color .25s;
  will-change:transform;
}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none;}
.btn:hover{transform:translateY(-2px);}
.btn-lg{padding:17px 32px;font-size:1rem;}
.btn-block{width:100%;}

.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:0 10px 26px rgba(13,110,253,.28);}
.btn-primary:hover{box-shadow:0 16px 34px rgba(13,110,253,.36);}

.btn-gold{background:var(--grad-gold);color:#3A2600;box-shadow:0 10px 26px rgba(245,185,66,.32);}
.btn-gold:hover{box-shadow:0 16px 34px rgba(245,185,66,.42);}

.btn-ghost{
  background:rgba(255,255,255,.1);
  color:#fff;
  border-color:rgba(255,255,255,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.btn-ghost:hover{background:rgba(255,255,255,.2);border-color:#fff;}

.btn-outline{background:#fff;color:var(--navy);border-color:var(--line);}
.btn-outline:hover{border-color:var(--ocean);color:var(--ocean);background:#F4F8FF;}

.btn-wa{background:#20B858;color:#fff;box-shadow:0 10px 24px rgba(32,184,88,.28);}
.btn-wa:hover{background:#189B49;}

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

.link-btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--head);font-weight:700;font-size:.9rem;
  color:#fff;
}
.link-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease);}
.link-btn:hover svg{transform:translateX(5px);}

.glass{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* Curved section separators */
.curve{position:absolute;left:0;width:100%;line-height:0;pointer-events:none;}
.curve svg{width:100%;height:70px;fill:var(--white);}
.curve-top{top:-1px;}
.curve-bottom{bottom:-1px;}
.curve-bottom svg{height:70px;}

/* ============ 4. HEADER & NAV ============ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:1000;
  height:var(--header-h);
  display:flex;align-items:center;
  transition:background-color .35s var(--ease),box-shadow .35s var(--ease),height .35s var(--ease);
}
.site-header::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,26,45,.55) 0%,rgba(6,26,45,0) 100%);
  transition:opacity .35s var(--ease);
}
.site-header.is-solid{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 4px 24px rgba(6,26,45,.09);
  height:72px;
}
.site-header.is-solid::after{opacity:0;}

.header-inner{display:flex;align-items:center;gap:20px;}

/* Logo */
.logo{display:flex;align-items:center;gap:11px;flex:none;}
.logo-mark{
  width:42px;height:42px;flex:none;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--grad-brand);
  box-shadow:0 6px 16px rgba(13,110,253,.32);
}
.logo-mark svg{width:30px;height:30px;}
.lm-globe{fill:none;stroke:rgba(255,255,255,.9);stroke-width:2.4;}
.lm-plane{fill:var(--gold);}
.logo-text{display:flex;flex-direction:column;line-height:1;font-family:var(--head);}
.logo-text strong{
  font-size:1.06rem;font-weight:800;letter-spacing:.055em;color:#fff;
  transition:color .3s var(--ease);
}
.logo-text em{
  font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.42em;
  color:var(--aqua);margin-top:3px;
}
.is-solid .logo-text strong{color:var(--navy);}

/* Nav */
.nav{margin-left:auto;}
.nav-list{display:flex;align-items:center;gap:4px;}
.nav-link{
  position:relative;display:block;
  font-family:var(--head);font-weight:600;font-size:.925rem;
  color:rgba(255,255,255,.92);
  padding:9px 13px;border-radius:9px;
  transition:color .25s;
}
.nav-link::after{
  content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;
  background:var(--gold);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1);}
.is-solid .nav-link{color:var(--text);}
.is-solid .nav-link:hover,.is-solid .nav-link.is-active{color:var(--ocean);}

.nav-drawer-actions{display:none;}

.header-actions{display:flex;align-items:center;gap:9px;flex:none;}
.header-cta{padding:12px 22px;font-size:.9rem;}

/* Click-to-call pill with the visible number (wide screens only) */
.header-phone{
  display:none;align-items:center;gap:8px;
  font-family:var(--head);font-weight:700;font-size:.88rem;
  color:#fff;padding:9px 15px;border-radius:100px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);
  white-space:nowrap;
  transition:background-color .25s,border-color .25s,color .25s;
}
.header-phone svg{width:16px;height:16px;fill:var(--gold);flex:none;}
.header-phone:hover{background:rgba(255,255,255,.22);border-color:#fff;}
.is-solid .header-phone{background:var(--off);border-color:var(--line);color:var(--navy);}
.is-solid .header-phone svg{fill:var(--ocean);}
.is-solid .header-phone:hover{border-color:var(--ocean);color:var(--ocean);}

.icon-btn{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  transition:transform .28s var(--ease),background-color .25s,border-color .25s;
}
.icon-btn:hover{transform:translateY(-2px);}
.icon-btn svg{width:19px;height:19px;fill:currentColor;}
.icon-btn-wa{background:#20B858;border-color:#20B858;}
.icon-btn-wa:hover{background:#189B49;}
.is-solid .icon-btn{background:var(--off);border-color:var(--line);color:var(--navy);}
.is-solid .icon-btn-wa{background:#20B858;border-color:#20B858;color:#fff;}

/* On very wide screens show the full number and drop the duplicate call icon */
@media (min-width:1320px){
  .header-phone{display:inline-flex;}
  .icon-btn-call{display:none;}
}

/* Hamburger */
.hamburger{
  display:none;
  width:44px;height:44px;padding:0;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.14);
  border-radius:12px;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.hamburger span{
  display:block;width:20px;height:2px;background:#fff;border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.is-solid .hamburger{background:var(--off);border-color:var(--line);}
.is-solid .hamburger span{background:var(--navy);}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-backdrop{
  position:fixed;inset:0;z-index:998;
  background:rgba(6,26,45,.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

/* ============ 5. HERO ============ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding:calc(var(--header-h) + 46px) 0 90px;
  overflow:hidden;
  isolation:isolate;
}
.hero-media{position:absolute;inset:0;z-index:-2;}
.hero-media img{width:100%;height:100%;object-fit:cover;}
.hero-overlay{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(6,26,45,.94) 0%,rgba(6,26,45,.78) 42%,rgba(6,26,45,.34) 72%,rgba(6,26,45,.5) 100%),
    linear-gradient(180deg,rgba(6,26,45,.55) 0%,rgba(6,26,45,0) 30%,rgba(6,26,45,.6) 100%);
}

.flight-lines{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.5;}
.fl-path{
  fill:none;stroke:rgba(49,197,215,.75);stroke-width:1.6;
  stroke-dasharray:9 12;
  animation:dashFlow 26s linear infinite;
}
.fl-path-2{stroke:rgba(245,185,66,.5);animation-duration:34s;}
@keyframes dashFlow{to{stroke-dashoffset:-420;}}

.hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:clamp(32px,4vw,64px);
  align-items:center;
}
.hero-copy{color:#fff;max-width:640px;}

.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--head);font-weight:700;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:9px 18px;border-radius:100px;margin-bottom:22px;
}
.hero-badge svg{width:15px;height:15px;fill:var(--gold);}

.hero-title{color:#fff;margin-bottom:20px;}
.hero-desc{font-size:1.09rem;color:rgba(255,255,255,.88);max-width:560px;margin-bottom:30px;}

.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:28px;}

.trust-line{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
  font-size:.9rem;color:rgba(255,255,255,.86);font-weight:500;
}
.trust-line li{display:flex;align-items:center;gap:10px;}
.trust-line li::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--aqua);box-shadow:0 0 0 4px rgba(49,197,215,.18);
}

/* Lead card */
.lead-card{
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,32px);
  box-shadow:var(--shadow-lg);
  scroll-margin-top:100px;
}
.lead-title{font-size:1.42rem;margin-bottom:6px;}
.lead-sub{font-size:.9rem;color:var(--muted);margin-bottom:20px;}

/* Forms */
.lead-form{display:grid;gap:14px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field{display:flex;flex-direction:column;min-width:0;}
.field label{
  font-family:var(--head);font-size:.8rem;font-weight:700;
  color:var(--navy);margin-bottom:7px;letter-spacing:.01em;
}
.req{color:#D7263D;}
.field input,.field textarea{
  font-family:var(--body);font-size:.95rem;color:var(--text);
  width:100%;
  padding:12px 15px;
  border:1.5px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--off);
  transition:border-color .22s,box-shadow .22s,background-color .22s;
}
.field textarea{resize:vertical;min-height:84px;}
.field input::placeholder,.field textarea::placeholder{color:#9AA7B8;}
.field input:hover,.field textarea:hover{border-color:#C9D6E8;}
.field input:focus,.field textarea:focus{
  outline:none;background:#fff;
  border-color:var(--ocean);
  box-shadow:0 0 0 4px rgba(13,110,253,.13);
}
.field input:focus-visible,.field textarea:focus-visible{outline:none;}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:#D7263D;background:#FFF6F7;
}
.err{
  font-size:.79rem;color:#C81E32;margin:6px 0 0;
  min-height:0;display:none;
}
.err.is-shown{display:block;}
.form-note{font-size:.79rem;color:var(--muted);text-align:center;margin:2px 0 0;}
.form-note a{font-weight:600;}

/* Success panel */
.form-success{
  display:grid;gap:14px;justify-items:center;text-align:center;
  padding:26px 20px;
  border-radius:var(--r-md);
  background:linear-gradient(160deg,#F1FBF6 0%,#F4F9FF 100%);
  border:1px solid #CDEBDC;
  animation:popIn .45s var(--ease);
}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:none;}}
.fs-icon{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,#20B858,#31C5D7);
  display:grid;place-items:center;
}
.fs-icon svg{width:28px;height:28px;fill:#fff;}
.form-success h3{margin:0;font-size:1.25rem;}
.form-success p{font-size:.92rem;color:var(--muted);margin:0;}
.fs-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%;}
.fs-actions .btn{flex:1 1 190px;}
.fs-reset{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--head);font-weight:700;font-size:.85rem;color:var(--ocean);
  text-decoration:underline;
}

/* Scroll hint */
.scroll-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  width:26px;height:42px;border:2px solid rgba(255,255,255,.5);border-radius:100px;
  display:grid;justify-items:center;padding-top:8px;z-index:2;
}
.scroll-hint span{
  width:4px;height:8px;border-radius:4px;background:#fff;
  animation:scrollDot 1.9s var(--ease) infinite;
}
@keyframes scrollDot{0%{transform:translateY(0);opacity:1;}70%{transform:translateY(14px);opacity:0;}100%{opacity:0;}}

/* ============ 6. MARQUEE ============ */
.marquee-section{
  background:var(--navy);
  padding:20px 0;
  border-top:1px solid rgba(255,255,255,.07);
}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
/* gap stays 0 — spacing comes from each item's padding so that duplicating
   the list gives an exact 50% loop with no visible seam */
.marquee-track{
  display:flex;align-items:center;gap:0;width:max-content;
  animation:marquee 42s linear infinite;
}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused;}
.marquee-track li{
  display:flex;align-items:center;gap:12px;
  font-family:var(--head);font-weight:700;
  font-size:clamp(.98rem,1.5vw,1.22rem);
  letter-spacing:.03em;
  color:rgba(255,255,255,.9);
  white-space:nowrap;
  padding-right:clamp(28px,4vw,52px);
}
.marquee-track .dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--gold);
}
@keyframes marquee{to{transform:translateX(-50%);}}

/* ============ 7. ABOUT ============ */
.about-section{background:var(--white);}
.about-grid{
  display:grid;grid-template-columns:.95fr 1.05fr;
  gap:clamp(38px,5vw,80px);align-items:center;
}

.about-media{position:relative;padding:0 42px 74px 0;}
.about-img{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.about-img-main img{width:100%;aspect-ratio:19/23;object-fit:cover;}
.about-img-float{
  position:absolute;right:0;bottom:0;width:60%;
  border:6px solid #fff;border-radius:var(--r-md);
  animation:floaty 7s ease-in-out infinite;
}
.about-img-float img{width:100%;aspect-ratio:32/23;object-fit:cover;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
.about-glow{
  position:absolute;left:-8%;top:-6%;width:58%;aspect-ratio:1;z-index:-1;
  background:radial-gradient(circle,rgba(49,197,215,.3),transparent 68%);
  filter:blur(12px);
}

.about-copy p{color:var(--muted);}
.chip-list{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px;}
.chip{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--head);font-weight:700;font-size:.85rem;color:var(--navy);
  background:var(--off);border:1px solid var(--line);
  padding:10px 17px;border-radius:100px;
  transition:transform .28s var(--ease),border-color .25s,box-shadow .28s;
}
.chip:hover{transform:translateY(-3px);border-color:var(--aqua);box-shadow:var(--shadow-sm);}
.chip svg{width:17px;height:17px;fill:var(--ocean);flex:none;}

/* ============ 8. DESTINATIONS ============ */
.destinations-section{background:var(--off);}
.dest-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.dest-card{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  isolation:isolate;
  min-height:400px;
  display:flex;align-items:flex-end;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.dest-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.dest-img{position:absolute;inset:0;z-index:-2;}
.dest-img img{width:100%;height:100%;object-fit:cover;transition:transform .75s var(--ease);}
.dest-card:hover .dest-img img,.dest-card:focus-within .dest-img img{transform:scale(1.09);}
.dest-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,26,45,0) 30%,rgba(6,26,45,.72) 68%,rgba(6,26,45,.95) 100%);
  transition:opacity .4s var(--ease);
}
.dest-body{padding:26px 24px 24px;color:#fff;width:100%;}
.dest-body h3{color:#fff;margin-bottom:6px;font-size:1.35rem;}
.dest-body p{font-size:.9rem;color:rgba(255,255,255,.85);margin-bottom:14px;}

/* ============ 9. PACKAGES ============ */
.packages-section{background:var(--white);}
.pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.pkg-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.pkg-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:transparent;}
.pkg-img{position:relative;overflow:hidden;}
.pkg-img img{width:100%;aspect-ratio:20/13;object-fit:cover;transition:transform .7s var(--ease);}
.pkg-card:hover .pkg-img img{transform:scale(1.07);}
.pkg-tag{
  position:absolute;left:14px;top:14px;
  font-family:var(--head);font-weight:700;font-size:.7rem;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--navy);background:rgba(255,255,255,.94);
  padding:6px 12px;border-radius:100px;
  box-shadow:var(--shadow-sm);
}
.pkg-body{padding:22px 20px 22px;display:flex;flex-direction:column;flex:1;}
.pkg-body h3{margin-bottom:9px;}
.pkg-meta{
  display:flex;align-items:center;gap:8px;
  font-family:var(--head);font-weight:700;font-size:.83rem;
  color:var(--ocean);margin-bottom:14px;
}
.pkg-meta svg{width:16px;height:16px;fill:currentColor;flex:none;}
.pkg-list{margin-bottom:20px;display:grid;gap:8px;}
.pkg-list li{
  position:relative;padding-left:24px;
  font-size:.895rem;color:var(--muted);line-height:1.55;
}
.pkg-list li::before{
  content:"";position:absolute;left:0;top:.42em;
  width:14px;height:14px;border-radius:50%;
  background:rgba(49,197,215,.18);
  box-shadow:inset 0 0 0 3px var(--aqua);
}
.pkg-body .btn{margin-top:auto;}

.pkg-note{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:34px auto 0;max-width:max-content;
  font-family:var(--head);font-weight:600;font-size:.9rem;color:var(--navy);
  background:var(--off);border:1px dashed #C4D3E6;
  padding:12px 22px;border-radius:100px;
}
.pkg-note svg{width:18px;height:18px;fill:var(--ocean);flex:none;}

/* ============ 10. WHY CHOOSE US ============ */
.why-section{background:var(--off);}
.why-grid{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(36px,5vw,70px);align-items:center;
}
.why-media{position:relative;border-radius:var(--r-xl);overflow:visible;}
.why-media img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r-xl);box-shadow:var(--shadow-lg);
}
.why-float{
  position:absolute;right:-18px;bottom:34px;
  max-width:270px;
  display:flex;align-items:flex-start;gap:12px;
  background:rgba(6,26,45,.82);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#fff;padding:16px 18px;border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  font-size:.86rem;line-height:1.5;
}
.why-float svg{width:20px;height:20px;fill:var(--aqua);flex:none;margin-top:2px;}

.why-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px;}
.why-card{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);padding:24px 22px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.why-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent;}
.why-card h3{margin-bottom:8px;font-size:1.05rem;}
.why-card p{font-size:.885rem;color:var(--muted);line-height:1.6;}

.ico{
  width:48px;height:48px;border-radius:14px;
  display:grid;place-items:center;margin-bottom:15px;
  background:linear-gradient(135deg,rgba(13,110,253,.12),rgba(49,197,215,.18));
}
.ico svg{width:23px;height:23px;fill:var(--ocean);}

/* ============ 11. HOW IT WORKS ============ */
.steps-section{background:var(--white);}
.steps-wrap{position:relative;padding-top:26px;}
.steps-path{
  position:absolute;left:0;top:0;width:100%;height:120px;
  z-index:0;pointer-events:none;
}
.sp-line{
  fill:none;stroke:var(--aqua);stroke-width:2;
  stroke-dasharray:8 10;opacity:.55;
  animation:dashFlow 30s linear infinite;
}
/* The plane rides a full-width track: horizontal travel is a percentage
   transform on the track, vertical drift is a transform on the plane itself,
   so the whole animation stays on the compositor (no layout per frame). */
.steps-plane-track{
  position:absolute;left:0;top:0;width:100%;height:0;z-index:1;
  pointer-events:none;
  animation:planeX 15s linear infinite;
}
.steps-plane{
  position:absolute;left:-17px;top:0;
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--grad-brand);
  box-shadow:0 6px 16px rgba(13,110,253,.35);
  animation:planeY 15s var(--ease) infinite;
}
.steps-plane svg{width:17px;height:17px;fill:#fff;transform:rotate(90deg);}
@keyframes planeX{
  from{transform:translateX(4%);}
  to{transform:translateX(96%);}
}
@keyframes planeY{
  0%{transform:translateY(70px);opacity:0;}
  10%{opacity:1;}
  50%{transform:translateY(36px);}
  90%{opacity:1;}
  100%{transform:translateY(14px);opacity:0;}
}

.steps-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  margin-top:78px;
}
.step{
  position:relative;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:38px 24px 26px;
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.step-num{
  position:absolute;top:-24px;left:24px;
  width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;
  font-family:var(--head);font-weight:800;font-size:1.06rem;
  color:#fff;background:var(--grad-brand);
  box-shadow:0 10px 22px rgba(13,110,253,.3);
}
.step:nth-child(even) .step-num{background:var(--grad-gold);color:#3A2600;box-shadow:0 10px 22px rgba(245,185,66,.34);}
.step h3{margin-bottom:8px;font-size:1.08rem;}
.step p{font-size:.885rem;color:var(--muted);line-height:1.6;}

/* ============ 12. SERVICES ============ */
.services-section{background:var(--off);}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.svc-card{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);padding:26px 22px;
  position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.svc-card::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:var(--grad-brand);transition:width .45s var(--ease);
}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent;}
.svc-card:hover::before{width:100%;}
.svc-card h3{margin-bottom:8px;font-size:1.03rem;}
.svc-card p{font-size:.875rem;color:var(--muted);line-height:1.6;}
.svc-cta{text-align:center;margin-top:42px;}

/* ============ 13. CORPORATE ============ */
.corporate-section{
  position:relative;
  background:
    radial-gradient(1000px 520px at 82% 8%,rgba(13,110,253,.34),transparent 62%),
    radial-gradient(760px 460px at 8% 92%,rgba(49,197,215,.2),transparent 60%),
    var(--navy);
  padding:clamp(96px,11vw,150px) 0;
  color:rgba(255,255,255,.84);
  overflow:hidden;
}
.corp-grid{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(36px,5vw,64px);align-items:center;
}
.corp-copy h2{color:#fff;}
.corp-lead{font-size:1.03rem;max-width:640px;margin-bottom:30px;}

.corp-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:34px;}
.corp-card{
  border-radius:var(--r-md);padding:22px 20px;
  transition:transform .35s var(--ease),background-color .3s,border-color .3s;
}
.corp-card:hover{transform:translateY(-5px);background:rgba(255,255,255,.14);border-color:rgba(49,197,215,.5);}
.corp-card h3{color:#fff;font-size:1rem;margin-bottom:7px;}
.corp-card p{font-size:.865rem;color:rgba(255,255,255,.75);line-height:1.6;}
.corp-card .ico{background:rgba(49,197,215,.16);width:44px;height:44px;margin-bottom:13px;}
.corp-card .ico svg{fill:var(--aqua);width:21px;height:21px;}

.corp-media{position:relative;}
.corp-media img{
  width:100%;aspect-ratio:5/6;object-fit:cover;
  border-radius:var(--r-xl);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 70px rgba(0,0,0,.42);
}

/* ============ 14. GALLERY ============ */
.gallery-section{background:var(--white);}
.gallery{columns:4;column-gap:18px;}
.g-item{
  position:relative;margin:0 0 18px;
  break-inside:avoid;
  border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
}
.g-item img{width:100%;transition:transform .7s var(--ease);}
.g-item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,26,45,0) 45%,rgba(6,26,45,.85) 100%);
  opacity:0;transition:opacity .4s var(--ease);
}
.g-item figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:18px 18px;
  font-family:var(--head);font-weight:700;font-size:.95rem;color:#fff;
  transform:translateY(12px);opacity:0;
  transition:transform .4s var(--ease),opacity .4s var(--ease);
}
.g-item:hover img,.g-item:focus-within img{transform:scale(1.08);}
.g-item:hover::after,.g-item:focus-within::after{opacity:1;}
.g-item:hover figcaption,.g-item:focus-within figcaption{transform:none;opacity:1;}

/* ============ 15. CTA BANNER ============ */
.cta-banner{
  position:relative;isolation:isolate;
  padding:clamp(80px,10vw,130px) 0;
  text-align:center;overflow:hidden;
}
.cta-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;}
.cta-overlay{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,26,45,.82) 0%,rgba(6,26,45,.66) 50%,rgba(6,26,45,.88) 100%);
}
.cta-inner{max-width:800px;}
.cta-inner h2{color:#fff;font-size:clamp(1.85rem,3.8vw,3rem);}
.cta-inner p{color:rgba(255,255,255,.87);font-size:1.06rem;margin-bottom:30px;}
.cta-actions{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;}

/* ============ 16. FAQ ============ */
.faq-section{background:var(--off);}
.accordion{display:grid;gap:13px;}
.acc-item{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;
  transition:border-color .3s,box-shadow .3s;
}
.acc-item:has(.acc-btn[aria-expanded="true"]){border-color:rgba(13,110,253,.4);box-shadow:var(--shadow-md);}
.acc-item h3{margin:0;font-size:inherit;}
.acc-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:19px 22px;
  font-family:var(--head);font-weight:700;font-size:1rem;color:var(--navy);
  transition:color .25s;
}
.acc-btn:hover{color:var(--ocean);}
.acc-icon{
  position:relative;flex:none;
  width:30px;height:30px;border-radius:50%;
  background:var(--off);border:1px solid var(--line);
  transition:background-color .3s,transform .35s var(--ease);
}
.acc-icon::before,.acc-icon::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--ocean);border-radius:2px;
  transform:translate(-50%,-50%);
  transition:opacity .3s,background-color .3s;
}
.acc-icon::before{width:12px;height:2px;}
.acc-icon::after{width:2px;height:12px;}
.acc-btn[aria-expanded="true"] .acc-icon{background:var(--grad-brand);border-color:transparent;transform:rotate(180deg);}
.acc-btn[aria-expanded="true"] .acc-icon::before{background:#fff;}
.acc-btn[aria-expanded="true"] .acc-icon::after{opacity:0;}
.acc-panel{padding:0 22px 20px;color:var(--muted);font-size:.94rem;}
.acc-panel p{margin:0;}

/* ============ 17. CONTACT ============ */
.contact-section{background:var(--white);}
.contact-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:28px;align-items:start;}

.contact-info{
  background:
    radial-gradient(700px 380px at 90% 0%,rgba(13,110,253,.35),transparent 60%),
    var(--navy);
  color:rgba(255,255,255,.8);
  border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);
  box-shadow:var(--shadow-md);
}
.ci-brand{color:#fff;font-size:1.35rem;margin-bottom:22px;}
.ci-list{display:grid;gap:20px;margin-bottom:24px;}
.ci-list li{display:flex;gap:14px;align-items:flex-start;}
.ci-list .ico{
  width:42px;height:42px;border-radius:12px;margin:0;flex:none;
  background:rgba(49,197,215,.16);
}
.ci-list .ico svg{width:20px;height:20px;fill:var(--aqua);}
.ci-list strong{
  display:block;font-family:var(--head);font-size:.78rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--aqua);margin-bottom:4px;
}
.ci-list a{color:#fff;font-weight:600;transition:color .25s;word-break:break-word;}
.ci-list a:hover{color:var(--gold);}
.ci-list address{font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.82);}
.ci-actions{margin-bottom:22px;}

.map-wrap{
  border-radius:var(--r-md);overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  line-height:0;
}
.map-wrap iframe{width:100%;height:250px;border:0;filter:grayscale(.15);}

.contact-form-card{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);
  box-shadow:var(--shadow-md);
}
.contact-form-card h3{font-size:1.28rem;margin-bottom:20px;}

/* ============ 18. FOOTER ============ */
.site-footer{
  background:var(--navy);
  color:rgba(255,255,255,.7);
  padding-top:clamp(58px,7vw,86px);
}
.footer-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:clamp(28px,4vw,52px);
  padding-bottom:46px;
}
.footer-grid h2{
  color:#fff;font-size:1.02rem;margin-bottom:18px;letter-spacing:0;
}
.logo-footer{margin-bottom:18px;}
.logo-footer .logo-text strong{color:#fff;}
.f-brand p{font-size:.92rem;line-height:1.65;max-width:330px;}

.socials{display:flex;gap:11px;margin-top:22px;}
.socials a{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  transition:background-color .3s,transform .3s var(--ease),border-color .3s;
}
.socials svg{width:19px;height:19px;fill:currentColor;}
.socials a:hover{background:var(--grad-brand);transform:translateY(-3px);border-color:transparent;}

.f-links ul,.f-services ul{display:grid;gap:11px;}
.f-links a,.f-services a{
  color:rgba(255,255,255,.72);font-size:.93rem;
  transition:color .25s,padding-left .25s var(--ease);
}
.f-links a:hover,.f-services a:hover{color:var(--gold);padding-left:5px;}

.f-contact ul{display:grid;gap:15px;}
.f-contact li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;}
.f-contact svg{width:18px;height:18px;fill:var(--aqua);flex:none;margin-top:3px;}
.f-contact a{color:rgba(255,255,255,.82);transition:color .25s;word-break:break-word;}
.f-contact a:hover{color:var(--gold);}
.f-contact address{line-height:1.6;}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:22px;padding-bottom:24px;
  text-align:center;
}
.footer-bottom p{font-size:.85rem;color:rgba(255,255,255,.6);margin:0;}

/* ============ 19. FLOATING ELEMENTS ============ */
.float-stack{
  position:fixed;right:20px;bottom:22px;z-index:900;
  display:flex;flex-direction:column-reverse;gap:12px;
}
.float-btn{
  position:relative;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;
  transition:transform .3s var(--ease),box-shadow .3s;
}
.float-btn svg{width:29px;height:29px;fill:currentColor;}
.float-btn:hover{transform:scale(1.08);}
.float-wa{background:#20B858;box-shadow:0 12px 28px rgba(32,184,88,.45);}
.float-call{background:var(--grad-brand);box-shadow:0 12px 28px rgba(13,110,253,.42);}
.float-call svg{width:26px;height:26px;}

/* Pulsing ring draws the eye to the WhatsApp action */
.float-wa::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(32,184,88,.55);
  animation:pulseRing 2.6s ease-out infinite;
}
@keyframes pulseRing{0%{transform:scale(1);opacity:.8;}70%{transform:scale(1.5);opacity:0;}100%{opacity:0;}}

/* Label slides out on hover / keyboard focus (pointer devices only) */
.float-tip{
  position:absolute;right:calc(100% + 12px);top:50%;
  transform:translateY(-50%) translateX(8px);
  background:var(--navy);color:#fff;
  font-family:var(--head);font-weight:600;font-size:.82rem;
  padding:8px 14px;border-radius:100px;white-space:nowrap;
  box-shadow:var(--shadow-md);
  opacity:0;pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.float-btn:hover .float-tip,.float-btn:focus-visible .float-tip{
  opacity:1;transform:translateY(-50%);
}
@media (hover:none){.float-tip{display:none;}}

.to-top{
  position:fixed;right:20px;bottom:162px;z-index:900;
  width:46px;height:46px;border-radius:50%;padding:0;
  display:grid;place-items:center;cursor:pointer;
  background:var(--navy);color:#fff;border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.to-top svg{width:20px;height:20px;fill:currentColor;}
.to-top.is-visible{opacity:1;visibility:visible;transform:none;}
.to-top:hover{background:var(--ocean);}

.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:950;
  display:none;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 22px rgba(6,26,45,.1);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-bar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:9px 6px 10px;
  font-family:var(--head);font-weight:700;font-size:.72rem;
  color:var(--navy);
  border-right:1px solid var(--line);
}
.mobile-bar a:last-child{border-right:0;}
.mobile-bar svg{width:19px;height:19px;fill:var(--ocean);}
.mobile-bar .mb-primary{background:var(--grad-brand);color:#fff;}
.mobile-bar .mb-primary svg{fill:#fff;}

/* ============ 20. REVEAL ANIMATIONS ============ */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  will-change:opacity,transform;
}
.reveal.is-visible{opacity:1;transform:none;}
/* Stagger children inside grids */
.dest-grid .reveal:nth-child(2),.pkg-grid .reveal:nth-child(2),.svc-grid .reveal:nth-child(2),
.why-cards .reveal:nth-child(2),.corp-cards .reveal:nth-child(2),.steps-grid .reveal:nth-child(2),
.gallery .reveal:nth-child(2){transition-delay:.08s;}
.dest-grid .reveal:nth-child(3),.pkg-grid .reveal:nth-child(3),.svc-grid .reveal:nth-child(3),
.why-cards .reveal:nth-child(3),.corp-cards .reveal:nth-child(3),.steps-grid .reveal:nth-child(3),
.gallery .reveal:nth-child(3){transition-delay:.16s;}
.dest-grid .reveal:nth-child(4),.pkg-grid .reveal:nth-child(4),.svc-grid .reveal:nth-child(4),
.why-cards .reveal:nth-child(4),.corp-cards .reveal:nth-child(4),.steps-grid .reveal:nth-child(4),
.gallery .reveal:nth-child(4){transition-delay:.24s;}
.dest-grid .reveal:nth-child(5),.svc-grid .reveal:nth-child(5),.why-cards .reveal:nth-child(5),
.gallery .reveal:nth-child(5){transition-delay:.1s;}
.dest-grid .reveal:nth-child(6),.svc-grid .reveal:nth-child(6),.why-cards .reveal:nth-child(6),
.gallery .reveal:nth-child(6){transition-delay:.18s;}

/* ==========================================================================
   21. ONE-SCREEN SECTIONS
   Every section fills (at least) a full viewport with its content optically
   centred, so the page reads as one screen per section. min-height is used
   rather than height, so a section can still grow instead of clipping.
   ========================================================================== */
.section,
.corporate-section,
.cta-banner{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.section > .container,
.corporate-section > .container,
.cta-banner > .container{width:100%;}

@media (min-width:1025px){
  /* Compacted rhythm so the heavier grids genuinely fit the fold */
  .section{padding:clamp(96px,11vh,124px) 0 clamp(52px,6vh,74px);}
  .corporate-section{padding:clamp(92px,10vh,120px) 0 clamp(80px,9vh,104px);}
  .cta-banner{padding:clamp(80px,9vh,110px) 0;}

  .section-head{margin-bottom:clamp(26px,3.4vh,42px);}
  .section-head h2{margin-bottom:.4em;}

  .dest-card{min-height:clamp(275px,34vh,360px);}
  .dest-body{padding:22px 22px 20px;}
  .dest-body h3{font-size:1.24rem;}

  .pkg-grid{gap:20px;}
  .pkg-body{padding:19px 18px;}
  .pkg-list{margin-bottom:16px;gap:6px;}
  .pkg-note{margin-top:26px;padding:10px 20px;}

  .svc-grid{gap:17px;}
  .svc-card{padding:22px 20px;}
  .svc-card .ico{width:44px;height:44px;margin-bottom:12px;}
  .svc-cta{margin-top:30px;}

  .why-cards{gap:15px;margin-top:22px;}
  .why-card{padding:20px 19px;}
  .why-card .ico{width:44px;height:44px;margin-bottom:12px;}
  .why-media img{aspect-ratio:9/11;}

  .steps-grid{margin-top:64px;gap:22px;}
  .step{padding:34px 22px 24px;}

  .about-img-main img{aspect-ratio:20/21;}
  .about-media{padding-bottom:64px;}

  .corp-cards{gap:14px;margin-bottom:28px;}
  .corp-card{padding:19px 18px;}
  .corp-media img{aspect-ratio:1/1.12;}

  .gallery{column-gap:16px;}
  .g-item{margin-bottom:16px;}

  .map-wrap iframe{height:200px;}
  .ci-list{gap:16px;margin-bottom:20px;}
  .contact-form-card{padding:clamp(22px,2.4vw,30px);}
  .lead-form{gap:12px;}
  .field-row{gap:12px;}
}

/* Taller desktops get their airier spacing back */
@media (min-width:1025px) and (min-height:1000px){
  .section{padding:clamp(110px,12vh,150px) 0 clamp(70px,8vh,110px);}
}

/* ============ 22. RESPONSIVE ============ */
@media (max-width:1180px){
  .footer-grid{grid-template-columns:1.4fr 1fr 1.2fr;}
  .f-services{display:none;}
}

@media (max-width:1024px){
  .dest-grid{grid-template-columns:repeat(2,1fr);}
  .pkg-grid{grid-template-columns:repeat(2,1fr);}
  .svc-grid{grid-template-columns:repeat(3,1fr);}
  .gallery{columns:3;}

  .nav-list{display:none;}
  .hamburger{display:flex;}
  .header-cta{display:none;}

  /* Mobile drawer */
  .nav{
    position:fixed;top:0;right:0;bottom:0;
    width:min(360px,86vw);
    background:var(--white);
    box-shadow:-16px 0 50px rgba(6,26,45,.22);
    padding:96px 24px 34px;
    overflow-y:auto;
    transform:translateX(102%);
    /* visibility keeps the closed drawer out of the tab order */
    visibility:hidden;
    transition:transform .42s var(--ease),visibility .42s var(--ease);
    z-index:999;
    margin-left:0;
  }
  .nav.is-open{transform:none;visibility:visible;}
  .nav.is-open .nav-list{display:grid;gap:2px;}
  .nav-list{gap:2px;}
  .nav-link{
    color:var(--navy);font-size:1.02rem;padding:13px 12px;
    border-bottom:1px solid var(--line);border-radius:0;
  }
  .nav-link::after{display:none;}
  .nav-link:hover,.nav-link.is-active{color:var(--ocean);}
  .nav-drawer-actions{display:block;margin-top:26px;}
  .nav-drawer-contact{display:grid;gap:12px;margin-top:20px;}
  .nav-drawer-contact a{
    display:flex;align-items:center;gap:10px;
    font-size:.9rem;font-weight:600;color:var(--navy);word-break:break-word;
  }
  .nav-drawer-contact svg{width:17px;height:17px;fill:var(--ocean);flex:none;}

  .hero-grid{grid-template-columns:1fr;gap:44px;}
  .hero-copy{max-width:none;}
  .hero{min-height:auto;padding-top:calc(var(--header-h) + 60px);}
  .lead-card{max-width:620px;}

  .about-grid{grid-template-columns:1fr;}
  .about-media{max-width:560px;margin-inline:auto;}
  .why-grid{grid-template-columns:1fr;}
  .why-media{max-width:520px;margin-inline:auto;}
  .corp-grid{grid-template-columns:1fr;}
  .corp-media{max-width:520px;margin-inline:auto;order:-1;}
  .contact-grid{grid-template-columns:1fr;}

  .steps-grid{grid-template-columns:repeat(2,1fr);gap:34px 22px;margin-top:70px;}
  .steps-path,.steps-plane-track{display:none;}
}

@media (max-width:820px){
  body{padding-bottom:64px;} /* room for the mobile action bar */
  .mobile-bar{display:flex;}
  /* the bottom bar already carries Call, so only WhatsApp keeps floating */
  .float-stack{bottom:80px;}
  .float-call{display:none;}
  .float-btn{width:50px;height:50px;}
  .float-btn svg{width:26px;height:26px;}
  .to-top{bottom:142px;}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .gallery{columns:2;}
  .corp-cards{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width:600px){
  body{font-size:16px;}
  .dest-grid,.pkg-grid,.svc-grid{grid-template-columns:1fr;}
  .why-cards{grid-template-columns:1fr;}
  .steps-grid{grid-template-columns:1fr;gap:38px;}
  .field-row{grid-template-columns:1fr;}
  .hero-cta .btn,.cta-actions .btn{width:100%;}
  .trust-line{gap:8px 16px;font-size:.85rem;}
  .about-media{padding:0 0 62px;}
  .about-img-float{width:66%;right:0;}
  .why-float{right:8px;left:8px;max-width:none;bottom:-18px;}
  .why-media{margin-bottom:34px;}
  .dest-card{min-height:330px;}
  .footer-grid{grid-template-columns:1fr;}
  .map-wrap iframe{height:210px;}
  .marquee-track li{font-size:1rem;}
  .logo-text strong{font-size:.95rem;}
  .logo-text em{font-size:.62rem;letter-spacing:.36em;}
}

@media (max-width:400px){
  .mobile-bar a{font-size:.66rem;}
  .gallery{columns:1;}
}

/* ==========================================================================
   23. MOBILE CARD CAROUSELS
   On phones the card grids become swipeable rows instead of long stacks, so
   these sections stay close to a single screen. Native scroll + snap only —
   no JS, and the cards remain in normal reading order for screen readers.
   ========================================================================== */
@media (max-width:820px){
  .dest-grid,
  .pkg-grid,
  .svc-grid,
  .gallery{
    display:flex;
    columns:auto;
    gap:15px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-left:22px;
    /* bleed to the screen edges so cards peek in from the side */
    margin-inline:-22px;
    padding:2px 22px 16px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .dest-grid::-webkit-scrollbar,
  .pkg-grid::-webkit-scrollbar,
  .svc-grid::-webkit-scrollbar,
  .gallery::-webkit-scrollbar{display:none;}

  .dest-grid > *,
  .pkg-grid > *,
  .svc-grid > *,
  .gallery > *{
    flex:0 0 78%;
    max-width:330px;
    scroll-snap-align:start;
    margin-bottom:0;
  }
  .svc-grid > *{flex-basis:70%;}

  .dest-card{min-height:340px;}
  .gallery > *{flex-basis:74%;}
  .g-item img{height:250px;width:100%;object-fit:cover;}
  /* captions are always legible on touch, where there is no hover */
  .g-item::after{opacity:1;}
  .g-item figcaption{transform:none;opacity:1;}

  /* Swipe affordance */
  .dest-grid::after,
  .pkg-grid::after,
  .svc-grid::after,
  .gallery::after{content:"";flex:0 0 4px;}
}

/* Sections that genuinely cannot compress to one screen on a phone
   (a full enquiry form, the address block) simply scroll as normal. */
@media (max-width:820px){
  .contact-section,
  .about-section{min-height:auto;padding-top:64px;padding-bottom:64px;}
}

/* ============ 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;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none;}
  .marquee-track{animation:none;}
  .about-img-float{animation:none;}
}

/* ============ PRINT ============ */
@media print{
  .site-header,.mobile-bar,.float-wa,.to-top,.scroll-hint,.marquee-section,.map-wrap{display:none !important;}
  body{padding:0;color:#000;}
  .hero{min-height:auto;}
}