/* ==========================================================================
   Smart Fleet Travels — Core Stylesheet
   Design system: colors, type scale, components, animations, utilities
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@500;600;700;800;900&display=swap');

:root{
  /* Brand colors */
  --color-primary: #0F4C81;
  --color-primary-dark: #0A3760;
  --color-primary-light: #1E6BA8;
  --color-secondary: #1AA6B7;
  --color-secondary-dark: #14818F;
  --color-accent: #F4B942;
  --color-accent-dark: #DD9E1F;

  /* Neutrals */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F7F9FB;
  --color-grey-50: #F8FAFB;
  --color-grey-100: #F0F3F5;
  --color-grey-200: #E3E8EC;
  --color-grey-300: #CBD3D9;
  --color-grey-400: #9AA6AE;
  --color-grey-500: #6B7680;
  --color-grey-600: #4C5760;
  --color-grey-700: #333D44;
  --color-grey-800: #202A30;
  --color-grey-900: #12181C;

  /* Semantic */
  --color-success: #1FA971;
  --color-error: #E3543D;

  /* Typography */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Layout */
  --container-max: 1280px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(15,76,129,0.06);
  --shadow-md: 0 8px 24px rgba(15,76,129,0.10);
  --shadow-lg: 0 20px 50px rgba(15,76,129,0.14);
  --shadow-glow: 0 8px 30px rgba(244,185,66,0.35);

  /* Motion */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.45s;
  --dur-slow: 0.8s;

  --nav-height: 84px;
  /* Actual navbar height once .scrolled is applied (JS toggles this past 24px
     of scroll). Sticky elements like the tabs bar and price card only ever
     engage deep into a scroll — by which point the navbar has always already
     shrunk — so they must align to THIS height, not the taller top-of-page one,
     or a stray gap opens up between the real navbar edge and the sticky box. */
  --nav-height-scrolled: 76px;
  /* Height of the dark contact strip above the navbar (phone/email/socials).
     It's always visible on desktop and never hides on scroll, so anything
     that sticks below the fixed header must account for it too — otherwise
     sticky elements sit right under the navbar and look glued to it. */
  --topbar-height: 38px;
}
@media (max-width:900px){ :root{ --topbar-height: 0px; } } /* nav-top-bar is display:none here */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-height) + 46px);
  /* clip (not hidden) so a stray horizontal overflow — e.g. elements shifted
     off-screen by slide-in reveal transforms — never produces a phantom
     sideways "swipe", while position:sticky keeps working (hidden would
     force overflow-y:auto and break it). */
  overflow-x: clip;
}
body{
  font-family: var(--font-body);
  color: var(--color-grey-800);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  overflow-x: hidden;
}
/* Top info-bar is hidden on mobile, so anchor jumps only need to clear the navbar. */
@media (max-width:900px){ html{ scroll-padding-top: calc(var(--nav-height) + 14px); } }
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,textarea,select{font-family:inherit;font-size:1rem;}
:focus-visible{outline: 3px solid var(--color-secondary); outline-offset:2px;}

/* ---- Icon centering (site-wide) ----
   <i data-icon="..."> is inline by default, so its injected SVG sits on the
   text baseline instead of being centered in the box. This makes every icon
   — in chips, tabs, tag-lists, buttons, etc. — line up properly regardless
   of where it's used. Per-component rules can still override width/height. */
[data-icon]{display:inline-flex; align-items:center; justify-content:center; line-height:0; flex-shrink:0;}
[data-icon] svg{display:block; width:1em; height:1em;}

h1,h2,h3,h4,h5{
  font-family: var(--font-heading);
  font-weight:700;
  line-height:1.15;
  color: var(--color-primary);
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.4rem,5vw,4rem); font-weight:800;}
h2{font-size:clamp(1.9rem,3.6vw,2.75rem);}
h3{font-size:clamp(1.3rem,2.2vw,1.6rem);}
p{color:var(--color-grey-600);}

.container{
  width:100%;
  max-width: var(--container-max);
  margin-inline:auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
section{position:relative;}
.section-pad{padding-block: clamp(3.5rem, 7vw, 6.5rem);}
.section-pad-sm{padding-block: clamp(2.5rem, 5vw, 4rem);}

.bg-alt{background:var(--color-bg-alt);}
.bg-primary{background:var(--color-primary);}
.text-white{color:#fff !important;}
.text-white p, .text-white h1, .text-white h2, .text-white h3{color:#fff !important;}

/* ---------- Eyebrow / Kicker ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-heading); font-weight:600; font-size:0.8rem;
  letter-spacing:0.14em; text-transform:uppercase;
  color: var(--color-secondary-dark);
  background: rgba(26,166,183,0.10);
  padding:8px 16px; border-radius: var(--radius-full);
  margin-bottom:16px;
}
.kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--color-accent);}

.section-head{max-width:680px; margin-bottom: clamp(2rem,4vw,3.25rem);}
.section-head.center{margin-inline:auto; text-align:center;}
.section-head p{margin-top:14px; font-size:1.08rem;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-heading); font-weight:600; font-size:0.95rem;
  padding: 15px 30px; border-radius: var(--radius-full);
  transition: transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium), background var(--dur-fast);
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;}
.btn-primary{background: var(--color-primary); color:#fff; box-shadow: var(--shadow-md);}
.btn-primary:hover{background: var(--color-primary-dark); transform: translateY(-3px); box-shadow: var(--shadow-lg);}
.btn-accent{background: var(--color-accent); color: var(--color-grey-900); box-shadow: var(--shadow-glow);}
.btn-accent:hover{background: var(--color-accent-dark); transform: translateY(-3px);}
.btn-outline{background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-grey-300);}
.btn-outline:hover{border-color: var(--color-primary); background: rgba(15,76,129,0.05); transform:translateY(-2px);}
.btn-white{background:#fff; color:var(--color-primary);}
.btn-white:hover{transform:translateY(-3px); box-shadow: var(--shadow-lg);}
.btn-ghost{color:#fff; border:1.5px solid rgba(255,255,255,0.5); background:rgba(255,255,255,0.08); backdrop-filter: blur(6px);}
.btn-ghost:hover{background:rgba(255,255,255,0.18); border-color:#fff;}
.btn-sm{padding:10px 20px; font-size:0.85rem;}
.btn-block{width:100%;}
.btn:disabled{opacity:0.6; cursor:not-allowed; transform:none !important;}

.btn-icon{
  width:48px;height:48px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; box-shadow: var(--shadow-md); color: var(--color-primary);
  transition: transform var(--dur-fast) var(--ease-premium), background var(--dur-fast);
}
.btn-icon:hover{transform:translateY(-3px) scale(1.05); background:var(--color-primary); color:#fff;}

/* ---------- Navbar ---------- */
.site-header-wrap{position:fixed; top:0; left:0; right:0; z-index:1000;}
.nav-top-bar{
  position:relative; height:38px; max-height:38px;
  background: var(--color-primary-dark); color:#fff;
  display:flex; align-items:center; overflow:hidden;
  transition: max-height 0.35s var(--ease-premium), opacity 0.3s var(--ease-premium);
}
.nav-top-bar.hide{max-height:0; opacity:0;}
.nav-top-bar .container{display:flex; align-items:center; justify-content:space-between; font-size:0.8rem; width:100%;}
.nav-top-bar .top-left{display:flex; align-items:center; gap:22px;}
.nav-top-bar .top-left a{display:flex; align-items:center; gap:6px; transition:color var(--dur-fast);}
.nav-top-bar .top-left a:hover{color:var(--color-accent);}
.nav-top-bar .top-left svg{width:14px;height:14px;}
.nav-top-bar .top-social{display:flex; align-items:center; gap:14px;}
.nav-top-bar .top-social-label{display:flex; align-items:center; color:#fff; line-height:1;}
.nav-top-bar .top-social a{opacity:1; color:#fff; display:flex; align-items:center; transition: opacity var(--dur-fast), transform var(--dur-fast);}
.nav-top-bar .top-social a:hover{opacity:0.75; transform:translateY(-1px);}
.nav-top-bar .top-social svg{width:14px;height:14px; display:block;}
@media (max-width:900px){.nav-top-bar{display:none;}}

.navbar{
  position:relative; height: var(--nav-height);
  display:flex; align-items:center;
  transition: background 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium), height 0.35s var(--ease-premium);
  background: transparent;
}
.navbar.scrolled{
  height:76px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 2px 28px rgba(15,76,129,0.10);
}
.navbar .container{display:flex; align-items:center; justify-content:space-between;}
.nav-logo{display:flex; align-items:center; font-family:var(--font-heading); font-weight:800; font-size:1.28rem;}
.nav-logo .logo-mark{
  height:58px; border-radius:14px;
  background: #fff;
  display:flex;align-items:center;justify-content:center; flex-shrink:0; padding:6px 14px;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-med) var(--ease-premium);
}
.nav-logo:hover .logo-mark{transform: scale(1.03);}
.nav-logo .logo-mark img{height:100%; width:auto; object-fit:contain; display:block;}

.nav-links{display:flex; align-items:center; gap:2px;}
.nav-links > a, .nav-links .nav-drop > button{
  padding:10px 18px; font-weight:600; font-size:0.94rem; font-family:var(--font-heading);
  color:#fff; border-radius: var(--radius-full); transition: all var(--dur-fast);
  position:relative; display:inline-flex; align-items:center; gap:5px;
}
.nav-links > a::after{
  content:''; position:absolute; left:18px; right:18px; bottom:4px; height:2px; border-radius:2px;
  background: var(--color-accent); transform:scaleX(0); transform-origin:left; transition: transform var(--dur-fast) var(--ease-premium);
}
.nav-links > a:hover::after, .nav-links > a.active::after{transform:scaleX(1);}
.navbar.scrolled .nav-links > a, .navbar.scrolled .nav-links .nav-drop > button{color: var(--color-grey-700);}
.nav-links > a:hover, .nav-links > a.active{color: var(--color-primary) !important;}
.navbar:not(.scrolled) .nav-links > a:hover, .navbar:not(.scrolled) .nav-links > a.active{color:#fff !important;}
.navbar:not(.scrolled) .nav-links > a::after{background:var(--color-accent);}

.nav-drop{position:relative;}
.nav-drop > button{background:none;}
.nav-drop > button svg{width:15px;height:15px; transition: transform var(--dur-fast);}
.nav-drop:hover > button svg{transform:rotate(180deg);}
.nav-drop:hover .nav-drop-menu{opacity:1; visibility:visible; transform:translateY(0);}
.nav-drop-menu{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(8px);
  background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding:12px;
  min-width:240px; opacity:0; visibility:hidden; transition: all var(--dur-med) var(--ease-premium);
  display:flex; flex-direction:column; gap:2px;
}
.nav-drop-menu a{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px; color:var(--color-grey-700) !important;
  font-size:0.9rem; font-weight:500;
}
.nav-drop-menu a:hover{background: var(--color-bg-alt); color:var(--color-primary) !important;}
.nav-drop-menu .drop-icon{width:34px;height:34px;border-radius:9px; background:rgba(15,76,129,0.08); color:var(--color-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.nav-drop-menu .drop-icon svg{width:17px;height:17px;}

.nav-cta{display:flex; align-items:center; gap:12px;}
.nav-toggle{
  display:none; width:46px;height:46px; border-radius:13px; align-items:center; justify-content:center;
  background: rgba(8,30,55,0.45); border:1px solid rgba(255,255,255,0.25); color:#fff;
}
.nav-toggle svg{width:22px;height:22px;}
.navbar.scrolled .nav-toggle{background:rgba(15,76,129,0.08); border-color:transparent; color:var(--color-primary);}

.mobile-menu{
  position:fixed; inset:0; z-index:1100; background:#fff;
  transform: translateY(-100%); transition: transform var(--dur-med) var(--ease-premium);
  display:flex; flex-direction:column; padding: 24px;
  overflow-y:auto;
}
.mobile-menu.open{transform:translateY(0);}
.mobile-menu-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:32px;}
.mobile-menu a{
  display:block; padding:18px 4px; font-family:var(--font-heading); font-weight:600; font-size:1.3rem;
  color:var(--color-grey-800); border-bottom:1px solid var(--color-grey-100);
}
.mobile-menu a.active{color:var(--color-primary);}
.mobile-menu .btn{margin-top:24px;}

@media (max-width: 960px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .nav-cta .btn{display:none;}
  /* nav-cta wrapper is now empty on mobile — drop it so the toggle sits flush right */
  .nav-cta{display:none;}
}

/* Mobile navbar sizing: shrink the oversized logo + tighten heights so the
   bar never overflows or looks cramped on small screens. */
@media (max-width: 600px){
  :root{ --nav-height: 74px; --nav-height-scrolled: 68px; }
  .navbar.scrolled{ height:68px; }
  .nav-logo .logo-mark{ height:50px; padding:6px 12px; border-radius:12px; }
  .nav-toggle{ width:46px; height:46px; border-radius:12px; }
  .nav-toggle svg{ width:22px; height:22px; }
}

/* Prevent the page from scrolling behind an open mobile menu */
body.menu-open{ overflow:hidden; }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden;
  padding-top: calc(var(--nav-height) + 38px); padding-bottom:110px;
}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg img{width:100%; height:100%; object-fit:cover; animation: kenBurns 20s ease-in-out infinite alternate;}
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,20,35,0.75) 0%, rgba(8,26,45,0.62) 45%, rgba(6,20,35,0.88) 100%);
}
.hero .container{position:relative; z-index:2;}
.hero-content{max-width:700px;}
.hero-eyebrow{display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18); backdrop-filter:blur(6px); padding:8px 16px 8px 8px; border-radius:var(--radius-full); margin-bottom:24px;}
.hero-eyebrow .avatar-stack img{width:24px;height:24px; border-width:2px;}
.hero-eyebrow span{font-size:0.8rem; font-weight:600; color:#fff;}
.hero-eyebrow strong{color:var(--color-accent);}

.hero-content h1{color:#fff; margin-bottom:20px; font-size:clamp(2.5rem,5.2vw,4.1rem); letter-spacing:-0.02em; line-height:1.08;}
.hero-content .highlight{
  background: linear-gradient(100deg, var(--color-accent), #ffd98a 60%, var(--color-accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-content p.lead{color: rgba(255,255,255,0.82); font-size:1.15rem; max-width:540px; margin-bottom:34px;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}

/* Floating plan-trip search widget */
.hero-search-wrap{position:relative; z-index:3; margin-top:-64px;}
.hero-search{
  background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding:12px; display:flex; align-items:stretch; gap:2px;
}
.hs-field{position:relative; flex:1 1 0; display:flex; align-items:center; gap:14px; padding:10px 18px; border-radius:14px; transition: background var(--dur-fast); min-width:0;}
.hs-field:hover{background:var(--color-bg-alt);}
.hs-field.open{background:var(--color-bg-alt);}
.hs-icon{
  flex-shrink:0; width:42px; height:42px; border-radius:12px; background: rgba(26,166,183,0.1); color:var(--color-secondary-dark);
  display:flex; align-items:center; justify-content:center; line-height:0;
}
.hs-icon svg{width:19px;height:19px; display:block;}
.hs-body{min-width:0; flex:1; display:flex; align-items:center; gap:8px;}
.hs-body-text{min-width:0; flex:1;}
.hs-body label{display:block; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--color-grey-500); margin-bottom:3px;}
.hs-trigger{
  all:unset; box-sizing:border-box; display:block; width:100%; cursor:pointer;
  font-family:var(--font-heading); font-weight:600; font-size:1rem; color:var(--color-grey-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hs-chevron{flex-shrink:0; width:15px; height:15px; color:var(--color-grey-400); transition: transform var(--dur-fast) var(--ease-premium); line-height:0;}
.hs-chevron svg{width:15px;height:15px; display:block;}
.hs-field:hover .hs-chevron{color:var(--color-secondary-dark);}
.hs-field.open .hs-chevron{transform:rotate(180deg); color:var(--color-secondary-dark);}
.hs-divider{width:1px; background:var(--color-grey-100); margin-block:8px; flex-shrink:0;}
.hero-search .btn{flex-shrink:0; border-radius:14px; padding:0 34px; align-self:stretch;}
@media (max-width:860px){
  .hero-search{flex-wrap:wrap; padding:14px;}
  .hs-field{flex:1 1 100%;}
  .hs-divider{display:none;}
  .hero-search .btn{flex:1 1 100%; padding:16px; margin-top:4px;}
}

/* Custom dropdown panels (replace native select/date UI entirely) */
.hs-dropdown{
  position:absolute; top:calc(100% + 12px); left:0; min-width:260px; background:#fff; border-radius:18px;
  box-shadow: var(--shadow-lg); border:1px solid var(--color-grey-100); padding:8px; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(-10px); transition: opacity 0.22s var(--ease-premium), transform 0.22s var(--ease-premium), visibility 0.22s;
}
.hs-field.open .hs-dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.hs-option{
  all:unset; box-sizing:border-box; display:block; width:100%; text-align:left; padding:12px 14px; border-radius:11px; cursor:pointer;
  font-family:var(--font-heading); font-weight:600; font-size:0.92rem; color:var(--color-grey-700); transition: all 0.15s;
}
.hs-option:hover{background:var(--color-bg-alt);}
.hs-option.selected{background:rgba(15,76,129,0.08); color:var(--color-primary);}

/* Custom calendar */
.hs-calendar{min-width:290px; padding:18px;}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.cal-head strong{font-family:var(--font-heading); font-size:0.95rem; color:var(--color-grey-800);}
.cal-nav{all:unset; box-sizing:border-box; width:30px;height:30px;border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--color-bg-alt); color:var(--color-grey-600); cursor:pointer; transition: all 0.15s;}
.cal-nav:hover{background:var(--color-primary); color:#fff;}
.cal-nav svg{width:15px;height:15px;}
.cal-weekdays{display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:0.68rem; font-weight:700; color:var(--color-grey-400); margin-bottom:8px; letter-spacing:0.02em;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px;}
.cal-day{
  all:unset; box-sizing:border-box; aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:10px;
  font-size:0.85rem; font-weight:600; color:var(--color-grey-700); cursor:pointer; transition: all 0.15s; text-align:center;
}
.cal-day:hover{background:var(--color-bg-alt);}
.cal-day.muted{color:var(--color-grey-300); pointer-events:none;}
.cal-day.is-disabled{color:var(--color-grey-300); pointer-events:none; cursor:default;}
.cal-day.today{color:var(--color-secondary-dark); font-weight:800;}
.cal-day.selected{background:var(--color-primary); color:#fff;}
.cal-foot{display:flex; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:1px solid var(--color-grey-100);}
.cal-foot button{all:unset; box-sizing:border-box; cursor:pointer; font-size:0.82rem; font-weight:700; color:var(--color-secondary-dark); font-family:var(--font-heading); padding:6px 8px; border-radius:8px; transition: all 0.15s;}
.cal-foot button:hover{background:var(--color-bg-alt); color:var(--color-primary);}
@media (max-width:600px){.hs-dropdown{left:50%; transform:translate(-50%,-10px); min-width:min(300px,88vw);} .hs-field.open .hs-dropdown{transform:translate(-50%,0);}}

.hero-stats-strip{position:relative; z-index:2; display:flex; justify-content:center; align-items:center; gap:clamp(1.5rem,5vw,3.5rem); flex-wrap:wrap; padding-top:64px;}
.hero-stats-strip .hstat{text-align:center;}
.hero-stats-strip .hstat .num{font-family:var(--font-heading); font-weight:800; font-size:clamp(1.5rem,2.6vw,2rem); color:var(--color-primary);}
.hero-stats-strip .hstat .lbl{font-size:0.82rem; color:var(--color-grey-500); font-weight:500; margin-top:2px;}
.hero-stats-strip .hs-divider-v{width:1px; height:36px; background:var(--color-grey-200);}
@media (max-width:640px){.hero-stats-strip .hs-divider-v{display:none;}}

@keyframes kenBurns{from{transform:scale(1);}to{transform:scale(1.1);}}

@media (max-width: 700px){
  .hero{text-align:center; min-height:auto; padding-bottom:90px;}
  .hero-content{margin-inline:auto;}
  .hero-eyebrow, .hero-actions{justify-content:center;}
  .hero-content p.lead{margin-inline:auto;}
}

/* Page hero (interior pages) */
.page-hero{
  padding-top: calc(var(--nav-height) + 60px); padding-bottom:70px;
  background: linear-gradient(150deg, #0A3760, #0F4C81 60%, #157e93);
  position:relative; overflow:hidden; text-align:center;
}
.page-hero::before{content:'';position:absolute; inset:0; background: radial-gradient(circle at 90% 10%, rgba(244,185,66,0.2), transparent 45%);}
.page-hero .container{position:relative; z-index:1;}
.page-hero h1{color:#fff;}
.page-hero p{color:rgba(255,255,255,0.82); max-width:600px; margin:16px auto 0;}
.breadcrumb{display:flex;justify-content:center; gap:8px; font-size:0.85rem; color:rgba(255,255,255,0.7); margin-bottom:14px; font-weight:500;}
.breadcrumb a:hover{color:#fff;}

/* ---------- Cards ---------- */
.card{
  background:#fff; border-radius: var(--radius-md); overflow:hidden;
  box-shadow: var(--shadow-sm); border:1px solid var(--color-grey-100);
  transition: transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium);
}
.card:hover{transform: translateY(-8px); box-shadow: var(--shadow-lg);}

/* Package card */
.pkg-card .pkg-media{position:relative; aspect-ratio:4/3; overflow:hidden;}
.pkg-card .pkg-media img{width:100%;height:100%;object-fit:cover; transition: transform 0.6s var(--ease-premium);}
.pkg-card:hover .pkg-media img{transform:scale(1.09);}
.pkg-badge{
  position:absolute; top:14px; left:14px; background: var(--color-accent); color:var(--color-grey-900);
  font-family:var(--font-heading); font-weight:700; font-size:0.72rem; padding:6px 14px; border-radius: var(--radius-full);
  text-transform:uppercase; letter-spacing:0.04em;
}
.pkg-duration{
  position:absolute; bottom:14px; right:14px; background:rgba(15,76,129,0.85); backdrop-filter:blur(6px); color:#fff;
  font-size:0.78rem; font-weight:600; padding:6px 12px; border-radius: var(--radius-full); display:flex; align-items:center; gap:6px;
}
.pkg-body{padding:22px;}
.pkg-body h3{margin-bottom:8px; font-size:1.18rem;}
.pkg-body .pkg-desc{font-size:0.92rem; margin-bottom:14px; min-height:44px;}
.pkg-highlights{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;}
.pkg-highlights span{
  font-size:0.74rem; font-weight:600; color:var(--color-secondary-dark); background: rgba(26,166,183,0.09);
  padding:5px 10px; border-radius: var(--radius-full);
}
.pkg-footer{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:16px; border-top:1px solid var(--color-grey-100); min-width:0;}
.pkg-price{font-family:var(--font-heading); font-weight:800; color:var(--color-primary); font-size:1.1rem; min-width:0;}
.pkg-price-enquire{display:flex; align-items:center; gap:6px; font-size:0.86rem; font-weight:700; color:var(--color-secondary-dark);}
.pkg-price-enquire i{width:15px;height:15px;}
.pkg-price small{font-family:var(--font-body); font-weight:500; font-size:0.72rem; color:var(--color-grey-500); display:block;}
.pkg-actions{display:flex; gap:8px; min-width:0;}
.pkg-book-btn{flex:1; min-width:0;}

/* Grids */
.grid{display:grid; gap:28px; min-width:0;}
.grid > *{min-width:0;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

.view-more-wrap{display:flex; justify-content:center; margin-top:44px;}

/* ---------- About Teaser (home) ---------- */
.about-teaser{display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:center;}
.about-teaser-visual{position:relative; width:100%; min-width:0;}
.about-collage{position:relative; width:100%; max-width:460px; aspect-ratio:1/1.1; margin-inline:auto;}
.about-collage .ac-blob{position:absolute; inset:-8% -8% 6% -8%; z-index:0; background: linear-gradient(135deg, var(--color-secondary), var(--color-accent)); opacity:0.16; filter:blur(50px); border-radius:50%;}
.about-collage .ac-main{position:absolute; top:0; left:0; width:72%; height:76%; border-radius:26px; overflow:hidden; box-shadow:var(--shadow-lg); z-index:1;}
.about-collage .ac-main img{width:100%;height:100%;object-fit:cover;}
.about-collage .ac-sub{position:absolute; bottom:0; right:0; width:50%; height:42%; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-lg); border:5px solid var(--color-bg-alt); z-index:2;}
.about-collage .ac-sub img{width:100%;height:100%;object-fit:cover;}
.about-collage .ac-badge{
  position:absolute; bottom:8%; left:-8%; background:#fff; border-radius:var(--radius-md); padding:16px 20px;
  box-shadow:var(--shadow-lg); text-align:center; z-index:4;
}
.about-collage .ac-badge .num{font-family:var(--font-heading); font-weight:800; font-size:1.7rem; color:var(--color-primary); line-height:1;}
.about-collage .ac-badge .lbl{font-size:0.72rem; color:var(--color-grey-500); font-weight:600; margin-top:2px;}

.about-mini-stats{display:flex; gap:clamp(1.5rem,4vw,2.5rem); margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid var(--color-grey-200);}
.about-mini-stats > div{display:flex; flex-direction:column;}
.about-mini-stats strong{font-family:var(--font-heading); font-weight:800; font-size:1.5rem; color:var(--color-primary);}
.about-mini-stats span{font-size:0.8rem; color:var(--color-grey-500); font-weight:500;}

.about-pullquote{
  font-family:var(--font-heading); font-style:normal; font-weight:600; font-size:1.05rem; color:var(--color-grey-700);
  border-left:3px solid var(--color-accent); padding-left:18px; margin-bottom:28px; line-height:1.6;
}

.about-checklist{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:28px;}
.about-checklist li{
  display:flex; align-items:flex-start; gap:12px; font-size:0.9rem; background:#fff; border:1px solid var(--color-grey-100);
  border-radius: var(--radius-sm); padding:14px 16px; transition: all var(--dur-fast) var(--ease-premium);
}
.about-checklist li:hover{border-color:var(--color-secondary); transform:translateY(-3px); box-shadow:var(--shadow-sm);}
.about-checklist li div{display:flex; flex-direction:column;}
.about-checklist li strong{font-family:var(--font-heading); font-size:0.9rem; color:var(--color-grey-800);}
.about-checklist li span{font-size:0.78rem; color:var(--color-grey-500); margin-top:1px;}
.about-checklist .ci{width:36px;height:36px;border-radius:10px; background:rgba(26,166,183,0.12); color:var(--color-secondary-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.about-checklist .ci svg{width:17px;height:17px;}
@media (max-width:900px){
  .about-teaser{grid-template-columns:1fr; text-align:center;}
  .about-teaser-visual{margin-inline:auto; margin-bottom:1rem;}
  .about-mini-stats{justify-content:center;}
  .about-pullquote{text-align:left;}
  .about-checklist{text-align:left; max-width:420px; margin-inline:auto; margin-bottom:28px;}
}

/* ---------- Why choose us ---------- */
.feature-card{padding:32px 26px; text-align:left;}
.feature-icon{
  width:60px;height:60px;border-radius:16px; display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg, rgba(15,76,129,0.1), rgba(26,166,183,0.14)); color: var(--color-primary);
  margin-bottom:20px; transition: transform var(--dur-med) var(--ease-premium);
}
.feature-card:hover .feature-icon{transform: scale(1.08) rotate(-4deg); background: var(--color-primary); color:#fff;}
.feature-icon svg{width:28px;height:28px;}
.feature-card h3{margin-bottom:8px; font-size:1.1rem;}
.feature-card p{font-size:0.93rem;}

/* ---------- Why Travel With Us: premium card treatment ---------- */
.why-us-section{position:relative; overflow:hidden;}
.why-us-grid{gap:24px;}
.why-us-card{
  position:relative; overflow:hidden; padding:34px 28px 30px; border-radius:var(--radius-lg);
  border:1px solid var(--color-grey-100); background:#fff;
  transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium), border-color 0.5s var(--ease-premium);
}
.why-us-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--wc-a), var(--wc-b));
  transform:scaleX(0); transform-origin:left; transition: transform 0.5s var(--ease-premium);
}
.why-us-card .feature-icon{
  position:relative; z-index:1; background: linear-gradient(135deg, var(--wc-a), var(--wc-b)); color:#fff;
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--wc-a) 60%, transparent);
}
.why-us-card:hover{transform:translateY(-8px); box-shadow: var(--shadow-lg); border-color:transparent;}
.why-us-card:hover::before{transform:scaleX(1);}
.why-us-card:hover .feature-icon{transform: scale(1.1) rotate(8deg); background: linear-gradient(135deg, var(--wc-b), var(--wc-a));}
.why-us-card h3{position:relative; z-index:1;}
.why-us-card p{position:relative; z-index:1;}

/* ---------- Counters ---------- */
.counters{background: var(--color-primary); border-radius: var(--radius-lg); padding: clamp(2rem,4vw,3.2rem); position:relative; overflow:hidden;}
.counters::before{content:'';position:absolute; inset:0; background: radial-gradient(circle at 15% 20%, rgba(255,255,255,0.08), transparent 40%);}
.counter-grid{position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center;}
.counter-item .num{font-family:var(--font-heading); font-weight:800; font-size:clamp(2rem,4vw,2.8rem); color:#fff;}
.counter-item .label{color:rgba(255,255,255,0.78); font-size:0.9rem; margin-top:6px;}
@media (max-width:760px){.counter-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- Hotels ---------- */
.hotel-card .hotel-media{position:relative; aspect-ratio:16/11; overflow:hidden;}
.hotel-card .hotel-media img{width:100%;height:100%;object-fit:cover; transition: transform 0.6s var(--ease-premium);}
.hotel-card:hover .hotel-media img{transform:scale(1.08);}
.hotel-rating{
  position:absolute; top:14px; right:14px; background:#fff; color:var(--color-grey-800); font-weight:700; font-size:0.82rem;
  padding:6px 11px; border-radius: var(--radius-full); display:flex; align-items:center; gap:5px; box-shadow: var(--shadow-sm);
}
.hotel-rating svg{width:14px;height:14px; color:var(--color-accent); fill:var(--color-accent);}
.hotel-body{padding:22px;}
.hotel-location{display:flex; align-items:center; gap:6px; color:var(--color-secondary-dark); font-size:0.82rem; font-weight:600; margin-bottom:8px;}
.hotel-star-class{display:flex; align-items:center; gap:6px; margin-bottom:8px; color:#f4b942; font-size:0.8rem; letter-spacing:1px;}
.hotel-star-class span{color:var(--color-grey-500); font-weight:600; letter-spacing:normal; font-size:0.78rem;}
.hotel-amenities{display:flex; flex-wrap:wrap; gap:14px; margin:16px 0; padding-top:14px; border-top:1px solid var(--color-grey-100);}
.amenity{display:flex; align-items:center; gap:6px; font-size:0.78rem; color:var(--color-grey-600); font-weight:500;}
.amenity svg{width:16px;height:16px; color:var(--color-primary);}

/* ---------- Testimonials ---------- */
.testi-track-wrap{position:relative;}
.testi-track-wrap::before, .testi-track-wrap::after{
  content:''; position:absolute; top:0; bottom:26px; width:70px; z-index:2; pointer-events:none;
}
.testi-track-wrap::before{left:0; background:linear-gradient(90deg, var(--color-bg), transparent);}
.testi-track-wrap::after{right:0; background:linear-gradient(270deg, var(--color-bg), transparent);}
.bg-alt .testi-track-wrap::before{background:linear-gradient(90deg, var(--color-bg-alt), transparent);}
.bg-alt .testi-track-wrap::after{background:linear-gradient(270deg, var(--color-bg-alt), transparent);}
.testi-track{display:flex; gap:24px; overflow-x:auto; padding:8px 4px 26px; scrollbar-width:none;}
.testi-track::-webkit-scrollbar{display:none;}
.testi-card{
  background:#fff; border-radius: var(--radius-md);
  padding:28px; box-shadow: var(--shadow-sm); border:1px solid var(--color-grey-100);
}
.testi-track .testi-card{scroll-snap-align:start; flex:0 0 auto; width:min(400px,86vw);}
.grid .testi-card{width:100%; min-width:0;}
.testi-stars{display:flex; gap:3px; color:var(--color-accent); margin-bottom:14px;}
.testi-stars svg{width:16px;height:16px; fill:var(--color-accent);}
.testi-quote{font-size:0.95rem; color:var(--color-grey-700); margin-bottom:20px; min-height:96px;}
.testi-person{display:flex; align-items:center; gap:12px;}
.testi-avatar{width:46px;height:46px;border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:700; font-size:1.05rem;}
.testi-avatar img{width:100%;height:100%;object-fit:cover;}
.testi-person strong{display:block; font-family:var(--font-heading); font-size:0.92rem;}
.testi-person span{font-size:0.78rem; color:var(--color-grey-500);}
.testi-nav-arrow{
  position:absolute; top:calc(50% - 13px); z-index:3; width:52px; height:52px; border-radius:50%;
  background:#fff; color:var(--color-primary); display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-lg); border:1px solid var(--color-grey-100);
  transition: all var(--dur-fast) var(--ease-premium);
}
.testi-nav-arrow:hover{background:var(--color-primary); color:#fff; transform:translateY(-50%) scale(1.08); border-color:var(--color-primary);}
.testi-nav-arrow.prev{left:0; transform:translateY(-50%);}
.testi-nav-arrow.next{right:0; transform:translateY(-50%);}
.testi-nav-arrow svg{width:20px;height:20px;}
.testi-dots{display:flex; justify-content:center; gap:8px; margin-top:6px;}
.testi-dots .dot-btn{width:8px; height:8px; border-radius:50%; background:var(--color-grey-300); transition: all var(--dur-fast) var(--ease-premium);}
.testi-dots .dot-btn.active{width:26px; border-radius:5px; background:var(--color-primary);}
@media (max-width:700px){.testi-nav-arrow{display:none;}}

/* ---------- Video Testimonials ---------- */
.video-testi-card{position:relative; border-radius: var(--radius-md); overflow:hidden; aspect-ratio:9/16; cursor:pointer; box-shadow: var(--shadow-sm);}
.video-testi-card img{width:100%;height:100%;object-fit:cover; transition: transform 0.6s var(--ease-premium);}
.video-testi-card:hover img{transform:scale(1.08);}
.video-testi-card::after{content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,20,30,0.05) 40%, rgba(10,20,30,0.85) 100%);}
/* Placeholder state — shown until a real video/thumbnail is added, so it
   reads as "coming soon" rather than a mismatched stock photo. */
.video-testi-placeholder{background: linear-gradient(150deg, #0A3760, #0F4C81 60%, #157e93);}
.video-testi-placeholder img.video-testi-logo{width:52%; height:auto; object-fit:contain; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); opacity:0.9; filter:drop-shadow(0 6px 16px rgba(0,0,0,0.25));}
.video-play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:64px;height:64px;border-radius:50%; background:rgba(255,255,255,0.92); color:var(--color-primary);
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-lg);
  transition: transform var(--dur-fast) var(--ease-premium);
}
.video-testi-card:hover .video-play-btn{transform:translate(-50%,-50%) scale(1.12);}
.video-play-btn svg{width:26px;height:26px; margin-left:3px;}
.video-testi-info{position:absolute; left:16px; right:16px; bottom:14px; z-index:2; color:#fff;}
.video-testi-info strong{display:block; font-family:var(--font-heading); font-size:0.98rem;}
.video-testi-info span{font-size:0.8rem; opacity:0.85;}
.video-modal-box{max-width:420px;}
.video-modal-box.video-modal-landscape{max-width:640px;}
.video-frame-wrap{position:relative; width:100%; aspect-ratio:9/16; background:#000; border-radius: var(--radius-sm); overflow:hidden;}
.video-frame-wrap iframe{width:100%;height:100%;border:0;}

/* ---------- Blog ---------- */
.blog-card .blog-media{position:relative; aspect-ratio:16/10; overflow:hidden;}
.blog-card .blog-media img{width:100%;height:100%;object-fit:cover; transition: transform 0.6s var(--ease-premium);}
.blog-card:hover .blog-media img{transform:scale(1.08);}
.blog-cat{position:absolute; top:14px; left:14px; background:var(--color-secondary); color:#fff; font-size:0.72rem; font-weight:700; padding:5px 12px; border-radius: var(--radius-full); text-transform:uppercase;}
.blog-body{padding:22px; padding-bottom:20px;}
.blog-meta{display:flex; gap:14px; font-size:0.78rem; color:var(--color-grey-500); margin-bottom:10px;}
.blog-meta span{display:flex; align-items:center; gap:5px;}
.blog-body h3{font-size:1.08rem; margin-bottom:10px;}
.blog-body p{margin-bottom:16px;}
.blog-read{color:var(--color-primary); font-weight:600; font-size:0.86rem; display:inline-flex; align-items:center; gap:6px; margin-top:36px; padding-top:16px; border-top:1px solid var(--color-grey-100);}
.blog-read svg{width:15px;height:15px; transition:transform var(--dur-fast);}
.blog-card:hover .blog-read svg{transform:translateX(4px);}

/* ---------- Blog Detail Page ---------- */
.reading-progress{position:fixed; top:0; left:0; height:3px; background: linear-gradient(90deg, var(--color-secondary), var(--color-accent)); z-index:1100; width:0%; transition: width 0.1s linear;}
.blog-hero-banner{
  position:relative; overflow:hidden;
  padding-top: calc(var(--nav-height) + 60px); padding-bottom:60px;
  background: linear-gradient(150deg, #0A3760, #0F4C81 60%, #157e93);
}
.blog-hero-banner::before{content:'';position:absolute; inset:0; background: radial-gradient(circle at 90% 10%, rgba(244,185,66,0.2), transparent 45%);}
.blog-hero-content{position:relative; z-index:1; width:100%; color:#fff;}
.section-pad.blog-first-section{padding-top:0;}
.blog-featured-img{position:relative; margin-top:clamp(4rem,8vw,6rem); margin-bottom:clamp(4rem,8vw,6rem);}
.blog-featured-img img{width:100%; height:min(46vh, 440px); object-fit:cover; border-radius:var(--radius-lg); box-shadow:0 8px 24px rgba(8,20,35,0.12); display:block;}
@media (max-width:600px){
  .blog-featured-img img{height:220px; border-radius:16px;}
}
.blog-hero-content .breadcrumb{justify-content:flex-start; color:rgba(255,255,255,0.92); text-shadow:0 1px 4px rgba(0,0,0,0.55);}
.blog-hero-content .breadcrumb a{color:rgba(255,255,255,0.92); font-weight:600;}
.blog-hero-content .breadcrumb span{color:rgba(255,255,255,0.6);}
.blog-hero-content .breadcrumb a:hover{color:#fff; text-decoration:underline;}
.blog-hero-content h1{color:#fff; max-width:820px; margin:14px 0 18px;}
.blog-hero-meta{display:flex; gap:22px; flex-wrap:wrap; color:rgba(255,255,255,0.85); font-size:0.9rem;}
.blog-hero-meta span{display:flex; align-items:center; gap:7px;}
.blog-hero-meta svg{width:15px;height:15px;}
.blog-hero-cat{display:inline-block; background:var(--color-secondary); color:#fff; font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:6px 14px; border-radius:var(--radius-full); margin-bottom:14px;}

.blog-body-grid{display:grid; grid-template-columns:1fr 300px; gap:clamp(2rem,5vw,4rem); align-items:start;}
.blog-article p{font-size:1.08rem; line-height:1.85; margin-bottom:1.4em; color:var(--color-grey-700);}
.blog-article h2{font-size:1.5rem; margin:1.8em 0 0.7em; color:var(--color-grey-900); line-height:1.3; scroll-margin-top:120px; position:relative; padding-left:18px;}
.blog-article h2::before{content:''; position:absolute; left:0; top:0.15em; bottom:0.15em; width:4px; border-radius:var(--radius-full); background: linear-gradient(180deg, var(--color-secondary), var(--color-accent));}
.blog-article h2:first-child{margin-top:0;}
.blog-article > p:first-of-type::first-letter{
  font-family:var(--font-heading); font-weight:800; font-size:3.6em; float:left; line-height:0.85;
  padding:6px 10px 0 0; color:var(--color-primary);
}

/* Quick Facts box — an at-a-glance summary distilled from the section it follows */
.key-facts-box{
  background:var(--color-bg-alt); border:1px solid var(--color-grey-100); border-left:4px solid var(--color-secondary);
  border-radius: var(--radius-md); padding:22px 24px; margin:1.8rem 0;
}
.key-facts-head{display:flex; align-items:center; gap:9px; font-family:var(--font-heading); font-weight:700; font-size:0.95rem; color:var(--color-primary); margin-bottom:12px;}
.key-facts-head svg{width:18px;height:18px; color:var(--color-secondary);}
.key-facts-box ul{display:flex; flex-direction:column; gap:10px;}
.key-facts-box li{display:flex; align-items:flex-start; gap:10px; font-size:0.95rem; line-height:1.5; color:var(--color-grey-700);}
.key-facts-box li svg{width:16px;height:16px; color:var(--color-success); flex-shrink:0; margin-top:3px;}

.blog-promo-callout{
  display:flex; gap:18px; align-items:center; background: linear-gradient(120deg, rgba(15,76,129,0.06), rgba(26,166,183,0.08));
  border:1px solid rgba(15,76,129,0.1); border-radius: var(--radius-md); padding:22px 24px; margin:2rem 0; flex-wrap:wrap;
}
.blog-promo-callout .icon-box{width:46px;height:46px;border-radius:12px; background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.blog-promo-callout p{margin:0; font-size:0.95rem; flex:1; min-width:200px; color:var(--color-grey-700);}
.blog-promo-callout strong{color:var(--color-primary);}

.blog-tags{display:flex; gap:10px; flex-wrap:wrap; margin:1.5rem 0;}
.blog-tags a{background:var(--color-bg-alt); color:var(--color-grey-600); font-size:0.82rem; font-weight:600; padding:7px 15px; border-radius:var(--radius-full); transition: all var(--dur-fast);}
.blog-tags a:hover{background:var(--color-primary); color:#fff;}

.blog-author-footer{display:flex; align-items:center; gap:18px; padding:26px; background:var(--color-bg-alt); border-radius: var(--radius-md); margin-top:2.5rem;}
.blog-author-footer img{width:64px;height:64px;border-radius:50%; object-fit:cover; flex-shrink:0;}
.blog-author-footer h4{margin-bottom:4px;}
.blog-author-footer p{margin:0; font-size:0.9rem;}

.blog-sidebar{position:sticky; top:calc(var(--nav-height-scrolled) + var(--topbar-height) + 30px); display:flex; flex-direction:column; gap:20px;}
.share-card{background:#fff; border:1px solid var(--color-grey-100); border-radius: var(--radius-md); padding:22px; box-shadow: var(--shadow-sm);}
.share-card h4{font-size:0.85rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--color-grey-500); margin-bottom:14px;}
.share-row{display:flex; flex-wrap:wrap; gap:10px;}
.share-btn{
  width:44px;height:44px;border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--color-bg-alt); color:var(--color-grey-600); border:1px solid var(--color-grey-100);
  box-shadow: var(--shadow-sm); transition: all var(--dur-fast) var(--ease-premium);
}
.share-btn svg{width:18px;height:18px;}
.share-btn:hover{transform:translateY(-3px); box-shadow: var(--shadow-md); border-color:transparent;}
.share-btn.whatsapp:hover{background:#25D366; color:#fff;}
.share-btn.twitter:hover{background:#111; color:#fff;}
.share-btn.facebook:hover{background:#1877F2; color:#fff;}
.share-btn.linkedin:hover{background:#0A66C2; color:#fff;}
.share-btn.copy:hover{background:var(--color-primary); color:#fff;}
.share-btn.copy.is-copied{background:#1DA971; color:#fff; border-color:transparent;}
.sidebar-cta{background: linear-gradient(150deg, var(--color-primary), var(--color-secondary-dark)); border-radius: var(--radius-md); padding:26px; color:#fff; position:relative; overflow:hidden;}
.sidebar-cta::before{content:''; position:absolute; inset:0; background: radial-gradient(circle at 100% 0%, rgba(244,185,66,0.3), transparent 55%);}
.sidebar-cta > *{position:relative; z-index:1;}
.sidebar-cta h4{color:#fff; font-size:1.1rem; margin-bottom:8px;}
.sidebar-cta p{color:rgba(255,255,255,0.85); font-size:0.88rem; margin-bottom:16px;}
.toc-card h4{display:flex; align-items:center; gap:8px;}
.toc-card h4 svg{width:15px;height:15px; color:var(--color-secondary);}
.toc-list{display:flex; flex-direction:column;}
.toc-list a{
  display:block; padding:9px 2px 9px 14px; font-size:0.87rem; line-height:1.4; color:var(--color-grey-600);
  border-left:2px solid var(--color-grey-100); transition: all var(--dur-fast) var(--ease-premium);
}
.toc-list a:hover{color:var(--color-primary);}
.toc-list a.active{color:var(--color-primary); font-weight:600; border-left-color:var(--color-secondary);}

/* Mobile "jump to section" chip bar — the sidebar TOC reflows below the
   article on small screens, so this gives mobile readers the same quick
   navigation right under the hero instead. Hidden on desktop. */
.mobile-toc-bar{display:none;}

/* Mobile sticky bottom CTA — appears once the reader scrolls past the hero,
   keeping the primary conversion action reachable without hunting for it. */
.mobile-sticky-cta{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:1050; gap:10px; padding:12px 16px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid var(--color-grey-100); box-shadow: 0 -8px 24px rgba(15,76,129,0.12);
  transform:translateY(100%); transition: transform var(--dur-med) var(--ease-premium);
}
.mobile-sticky-cta.is-visible{transform:translateY(0);}
.mobile-sticky-cta .btn-white{background:var(--color-bg-alt); color:var(--color-primary); width:48px; flex-shrink:0; padding:0; display:flex; align-items:center; justify-content:center;}
.mobile-sticky-cta .btn-white svg{width:18px;height:18px;}

@media (max-width:960px){
  .blog-body-grid{grid-template-columns:1fr;}
  .blog-sidebar{position:relative; top:0; flex-direction:row; overflow-x:auto;}
  .blog-sidebar > *{min-width:260px;}
  .toc-card{display:none;} /* replaced by .mobile-toc-bar on small screens */

  .mobile-toc-bar{
    display:block; position:sticky; top:var(--nav-height-scrolled); z-index:40; background:#fff;
    border-bottom:1px solid var(--color-grey-100); box-shadow: var(--shadow-sm);
  }
  .mobile-toc-scroll{display:flex; gap:8px; overflow-x:auto; padding:12px 16px; scrollbar-width:none;}
  .mobile-toc-scroll::-webkit-scrollbar{display:none;}
  .mobile-toc-chip{
    flex-shrink:0; white-space:nowrap; font-size:0.8rem; font-weight:600; color:var(--color-grey-600);
    background:var(--color-bg-alt); padding:8px 14px; border-radius:var(--radius-full); transition: all var(--dur-fast);
  }
  .mobile-toc-chip.active{background:var(--color-primary); color:#fff;}

  .mobile-sticky-cta{display:flex;}
  .blog-article{padding-bottom:70px;} /* keep content clear of the sticky bar */
}

/* ---------- FAQ ---------- */
.faq-layout{display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:start;}
.faq-side{position:sticky; top:calc(var(--nav-height-scrolled) + var(--topbar-height) + 30px);}
.faq-side-icon{
  width:64px; height:64px; border-radius:18px; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:22px; box-shadow: var(--shadow-md);
}
.faq-side-icon svg{width:28px;height:28px;}
.faq-side p{margin:16px 0 26px; font-size:1rem;}
.faq-side-support{display:flex; align-items:center; gap:14px; background:var(--color-bg-alt); border-radius: var(--radius-md); padding:18px 20px;}
.faq-side-support .avatar-stack img{width:38px;height:38px;}
.faq-side-support strong{display:block; font-family:var(--font-heading); font-size:0.92rem;}
.faq-side-support span{font-size:0.8rem; color:var(--color-grey-500);}

.faq-list{display:flex; flex-direction:column; gap:14px;}
.faq-item{
  background:#fff; border:1.5px solid var(--color-grey-200); border-radius: 18px; overflow:hidden;
  transition: border-color 0.25s var(--ease-premium), box-shadow 0.25s var(--ease-premium);
}
.faq-item:hover{border-color: var(--color-grey-300);}
.faq-item.open{border-color: var(--color-secondary); box-shadow: 0 6px 20px rgba(26,166,183,0.16);}
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; text-align:left;
  padding:20px 22px; border-bottom:2px solid transparent; transition: border-color 0.3s;
}
.faq-item.open .faq-q{border-bottom-color: var(--color-secondary);}
.faq-q-text{font-family:var(--font-heading); font-weight:700; font-size:1.02rem; color:var(--color-grey-800); line-height:1.4; transition: color 0.25s;}
.faq-item.open .faq-q-text{color:var(--color-primary);}
.faq-q-pill{
  flex-shrink:0; width:min(190px, 38%); min-width:64px; height:40px; border-radius:999px; background:var(--color-grey-100);
  display:flex; align-items:center; justify-content:center; transition: all 0.3s var(--ease-premium);
}
.faq-item.open .faq-q-pill{background:var(--color-secondary);}
.faq-q-pill svg{width:16px;height:16px; color:var(--color-grey-500); transition: all 0.3s; display:block;}
.faq-item.open .faq-q-pill svg{color:#fff; transform:rotate(180deg);}
.faq-a{max-height:0; overflow:hidden; transition: max-height var(--dur-med) var(--ease-premium);}
.faq-a p{padding:18px 24px 24px; font-size:0.95rem; margin:0; line-height:1.7;}
@media (max-width:900px){.faq-layout{grid-template-columns:1fr;} .faq-side{position:relative; top:0;}}
@media (max-width:520px){.faq-q-pill{width:56px; min-width:56px;}}

/* ---------- Contact CTA ---------- */
.contact-cta{
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary-dark));
  border-radius: var(--radius-lg); padding: clamp(2.5rem,5vw,4rem); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.contact-cta::before{content:'';position:absolute; inset:0; background: radial-gradient(circle at 90% 20%, rgba(244,185,66,0.25), transparent 45%);}
.contact-cta > *{position:relative; z-index:1;}
.contact-cta h2{color:#fff; margin-bottom:10px;}
.contact-cta p{color:rgba(255,255,255,0.85);}
.contact-cta .cta-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- Footer ---------- */
.footer{background: var(--color-grey-900); color: var(--color-grey-300); padding-top: clamp(3rem,6vw,5rem);}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,0.08);}
.footer-brand .nav-logo span{color:#fff;}
.footer-brand p{color:var(--color-grey-400); margin:18px 0 22px; font-size:0.92rem; max-width:320px;}
.footer h4{color:#fff; font-family:var(--font-heading); font-size:1rem; margin-bottom:20px;}
.footer-links li{margin-bottom:12px;}
.footer-links a{display:flex; align-items:center; gap:8px; color:var(--color-grey-400); font-size:0.92rem; transition:color var(--dur-fast), transform var(--dur-fast);}
.footer-links a [data-icon]{width:13px;height:13px; flex-shrink:0; color:var(--color-secondary); transition: color var(--dur-fast);}
.footer-links a [data-icon] svg{width:100%;height:100%;}
.footer-links a:hover{color:var(--color-accent); transform:translateX(4px);}
.footer-links a:hover [data-icon]{color:var(--color-accent);}
.footer-contact li{display:flex; gap:10px; margin-bottom:16px; font-size:0.9rem; color:var(--color-grey-400);}
.footer-contact svg{width:18px;height:18px; color:var(--color-secondary); flex-shrink:0; margin-top:2px;}
.social-row{display:flex; gap:12px; margin-top:8px;}
.social-row a{
  width:44px;height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; line-height:0;
  transition: all var(--dur-fast) var(--ease-premium); box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.social-row a svg{width:20px;height:20px; display:block;}
.social-row a:hover{transform:translateY(-4px) scale(1.06);}
.social-row a.sr-instagram{background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);}
.social-row a.sr-instagram:hover{box-shadow: 0 8px 20px rgba(220,39,67,0.5);}
.social-row a.sr-facebook{background:#1877F2;}
.social-row a.sr-facebook:hover{box-shadow: 0 8px 20px rgba(24,119,242,0.5);}
.social-row a.sr-youtube{background:#FF0000;}
.social-row a.sr-youtube:hover{box-shadow: 0 8px 20px rgba(255,0,0,0.45);}
.social-row a.sr-linkedin{background:#0A66C2;}
.social-row a.sr-linkedin:hover{box-shadow: 0 8px 20px rgba(10,102,194,0.5);}
.footer-bottom-stack{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px;
  padding:26px 0; font-size:0.85rem; color:var(--color-grey-500); border-top:1px solid rgba(255,255,255,0.08);
}
.footer-bottom-stack .fb-divider{width:1px; height:14px; background:rgba(255,255,255,0.15);}
.footer-bottom-stack .legal-links{display:flex; align-items:center; gap:16px;}
@media (max-width:640px){.footer-bottom-stack .fb-divider{display:none;}}
.footer-bottom-stack .legal-links a:hover{color:var(--color-accent);}
.footer-credit{font-size:0.8rem; color:var(--color-grey-600);}
.footer-credit a{color:var(--color-grey-400); font-weight:600; transition: color var(--dur-fast);}
.footer-credit a:hover{color:var(--color-accent);}
@media (max-width:960px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.footer-grid{grid-template-columns:1fr;}}

/* ---------- Floating buttons ---------- */
.floating-stack{position:fixed; right:24px; bottom:24px; z-index:900; display:flex; flex-direction:column; gap:14px; align-items:center;}
.fab{
  width:58px;height:58px;border-radius:50%; display:flex;align-items:center;justify-content:center;
  box-shadow: var(--shadow-lg); color:#fff; transition: transform var(--dur-fast) var(--ease-premium);
  position:relative;
}
.fab:hover{transform:scale(1.08);}
.fab svg{width:26px;height:26px;}
.fab-whatsapp{background:#25D366;}
.fab-top{
  width:46px;height:46px; background:#fff; color:var(--color-primary); box-shadow:var(--shadow-md);
  opacity:0; pointer-events:none; transform: translateY(10px); transition: all var(--dur-med) var(--ease-premium);
}
.fab-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}
.fab-pulse::after{
  content:''; position:absolute; inset:0; border-radius:50%; background:inherit; opacity:0.6;
  animation: fabPulse 2.2s infinite;
}
@keyframes fabPulse{0%{transform:scale(1); opacity:0.5;}100%{transform:scale(1.7); opacity:0;}}

/* ---------- Reveal animations ---------- */
[data-reveal]{opacity:0; transition: opacity 0.7s var(--ease-premium), transform 0.7s var(--ease-premium);}
[data-reveal="fade"]{transform: translateY(28px);}
[data-reveal="fade-up"]{transform: translateY(40px);}
[data-reveal="slide-left"]{transform: translateX(-50px);}
[data-reveal="slide-right"]{transform: translateX(50px);}
[data-reveal="zoom"]{transform: scale(0.92);}
[data-reveal].in-view{opacity:1; transform: translate(0,0) scale(1);}

.stagger [data-reveal]{transition-delay: calc(var(--stagger-i, 0) * 90ms);}
.stagger [data-reveal].in-view{transition-delay:0s;}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:1200; background:rgba(10,20,30,0.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition: opacity var(--dur-med) var(--ease-premium);
}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.modal-box{
  background:#fff; border-radius: var(--radius-lg); max-width:640px; width:100%; max-height:88vh; overflow-y:auto;
  box-shadow: var(--shadow-lg); transform: translateY(30px) scale(0.97); transition: transform var(--dur-med) var(--ease-premium);
  position:relative;
}
.modal-overlay.open .modal-box{transform: translateY(0) scale(1);}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:24px 28px; border-bottom:1px solid var(--color-grey-100); position:sticky; top:0; background:#fff; z-index:2;}
.modal-head h3{margin:0;}
.modal-close{width:38px;height:38px;border-radius:50%; background:var(--color-grey-100); display:flex; align-items:center; justify-content:center; color:var(--color-grey-600); flex-shrink:0;}
.modal-close:hover{background:var(--color-grey-200);}
.modal-body{padding:28px;}
.modal-body .pkg-hint{
  display:flex; align-items:center; gap:12px; background:var(--color-bg-alt); border-radius: var(--radius-sm);
  padding:12px 16px; margin-bottom:22px; font-size:0.88rem; color:var(--color-grey-600); font-weight:500;
}
.modal-body .pkg-hint strong{color:var(--color-primary);}

/* ---------- Forms ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}

/* Check-in/check-out calendar fields inside the enquiry modal — boxed variant
   of the homepage's .hs-field since these sit on plain modal background,
   not inside the white hero search pill. */
.hotel-cal-row{display:flex; gap:12px;}
.hotel-cal-row .hs-field-boxed{flex:1; border:1px solid var(--color-grey-200); border-radius:12px; padding:10px 14px;}
.hotel-cal-row .hs-field-boxed .hs-dropdown{left:0;}
@media (max-width:520px){
  .hotel-cal-row{flex-direction:column;}
}
.form-grid .full{grid-column:1/-1;}
@media (max-width:560px){.form-grid{grid-template-columns:1fr;}}
.field label{display:block; font-size:0.85rem; font-weight:600; color:var(--color-grey-700); margin-bottom:7px;}
.field label .req{color:var(--color-error);}
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--color-grey-200); border-radius: var(--radius-sm);
  background:var(--color-grey-50); transition: border-color var(--dur-fast), background var(--dur-fast);
  color:var(--color-grey-800); line-height:1.5;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color: var(--color-secondary); background:#fff; outline:none;}
.field textarea{resize:vertical; min-height:100px;}
.field.error input, .field.error select, .field.error textarea{border-color: var(--color-error); background:#FEF2F0;}
.field .hs-field-boxed{border:1px solid var(--color-grey-200); border-radius:12px; background:#fff;}
.field .hs-field-boxed .hs-trigger{color:var(--color-grey-800); font-weight:600; font-size:0.95rem;}
.field.error .hs-field-boxed{border-color: var(--color-error); background:#FEF2F0;}
.field.cal-field{position:relative;}
.field-error-msg{color:var(--color-error); font-size:0.78rem; margin-top:6px; display:none; font-weight:500;}
.field.error .field-error-msg{display:block;}
.field-row-2{display:grid; grid-template-columns:110px 1fr; gap:8px;}
.honeypot{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; left:-9999px;}
.form-submit-row{display:flex; align-items:center; gap:16px; margin-top:8px;}
.form-note{font-size:0.78rem; color:var(--color-grey-500);}
.spinner{width:18px;height:18px;border-radius:50%; border:2.5px solid rgba(255,255,255,0.4); border-top-color:#fff; animation:spin 0.7s linear infinite; display:none;}
.btn.loading .spinner{display:inline-block;}
.btn.loading .btn-label{opacity:0.7;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Toast ---------- */
.toast-stack{position:fixed; top:100px; right:24px; z-index:1400; display:flex; flex-direction:column; gap:12px;}
.toast{
  min-width:300px; max-width:360px; background:#fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding:16px 18px; display:flex; gap:12px; align-items:flex-start; border-left:4px solid var(--color-success);
  transform: translateX(120%); transition: transform var(--dur-med) var(--ease-premium);
}
.toast.show{transform:translateX(0);}
.toast.error{border-left-color: var(--color-error);}
.toast svg{width:20px;height:20px; flex-shrink:0; margin-top:1px;}
.toast.success svg{color:var(--color-success);}
.toast.error svg{color:var(--color-error);}
.toast strong{display:block; font-size:0.92rem; margin-bottom:2px; color:var(--color-grey-800);}
.toast p{font-size:0.83rem; margin:0; color:var(--color-grey-500);}
@media (max-width:480px){.toast-stack{left:16px; right:16px;} .toast{min-width:0; max-width:none;}}

/* ---------- Skeleton loaders ---------- */
.skeleton{background: linear-gradient(90deg, var(--color-grey-100) 25%, var(--color-grey-200) 37%, var(--color-grey-100) 63%); background-size:400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-sm);}
@keyframes shimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
.skel-card{border-radius: var(--radius-md); overflow:hidden;}
.skel-media{aspect-ratio:4/3;}
.skel-line{height:14px; margin:14px 18px;}
.skel-line.w60{width:60%;}
.skel-line.w40{width:40%;}

/* ---------- Filters / Search ---------- */
.filter-bar{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:36px;}
.filter-tabs{display:flex; gap:10px; flex-wrap:wrap;}
.filter-tab{
  padding:11px 22px; border-radius: var(--radius-full); font-weight:600; font-size:0.88rem; font-family:var(--font-heading);
  background: var(--color-grey-100); color: var(--color-grey-600); transition: all var(--dur-fast);
}
.filter-tab.active, .filter-tab:hover{background: var(--color-primary); color:#fff;}
.search-box{position:relative; min-width:260px;}
.search-box input{width:100%; padding:12px 16px 12px 44px; border-radius: var(--radius-full); border:1.5px solid var(--color-grey-200); background:#fff;}
.search-box input:focus{border-color:var(--color-secondary); outline:none;}
.search-box [data-icon]{position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px;height:18px; color:var(--color-grey-400); pointer-events:none;}
.empty-state{text-align:center; padding:60px 20px; color:var(--color-grey-500);}
.empty-state svg{width:56px;height:56px; color:var(--color-grey-300); margin-bottom:16px;}

/* ---------- Misc ---------- */
.divider-badge{display:flex;align-items:center;gap:14px;justify-content:center; margin: 2px 0 36px;}
.divider-badge .line{height:1px; width:60px; background:var(--color-grey-300);}
.divider-badge svg{width:22px;height:22px; color:var(--color-accent);}

.avatar-stack{display:flex; align-items:center;}
.avatar-stack img{width:38px;height:38px;border-radius:50%; border:3px solid #fff; object-fit:cover; margin-left:-12px;}
.avatar-stack img:first-child{margin-left:0;}

.google-badge{display:flex; align-items:center; gap:8px; font-size:0.85rem; font-weight:600; color:var(--color-grey-600);}

/* ---------- Logo Strips: "Approved By" / "Our Partners" ---------- */
.logo-strip-section{overflow:hidden;}
.logo-strip-head{text-align:center; margin-bottom:2rem;}
.logo-strip-head .kicker{margin:0 auto;}
.logo-strip-grid{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:22px;
  max-width:1000px; margin:0 auto; align-items:stretch; justify-items:center;
}
.logo-strip-grid-4{grid-template-columns:repeat(4, 1fr); max-width:820px;}
.logo-frame{
  width:100%; max-width:180px; height:100px; background:#fff; border-radius:var(--radius-md);
  border:1px solid var(--color-grey-100); box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center; padding:18px 20px;
  will-change:transform;
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, border-color 0.25s ease-out;
}
.logo-frame img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  transition: transform 0.25s ease-out;
}
.logo-frame:hover{transform:translateY(-7px) scale(1.03); box-shadow:var(--shadow-md); border-color:var(--color-secondary);}
.logo-frame:hover img{transform:scale(1.05);}
@media (max-width:900px){
  .logo-strip-grid{grid-template-columns:repeat(3, 1fr); gap:16px;}
  .logo-strip-grid-4{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:520px){
  .logo-strip-grid, .logo-strip-grid-4{grid-template-columns:repeat(2, 1fr);}
  .logo-frame{height:84px; max-width:150px; padding:14px 16px;}
}

.value-grid{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.value-card{
  position:relative; padding:44px 30px 34px; text-align:center; overflow:hidden;
  border:1px solid var(--color-grey-100); border-radius: var(--radius-lg);
  transition: transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium), border-color var(--dur-med);
}
.value-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:5px;
  background: linear-gradient(90deg, var(--vc-color-a), var(--vc-color-b));
  transform: scaleX(0); transform-origin:left; transition: transform var(--dur-med) var(--ease-premium);
}
.value-card:hover{transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color:transparent;}
.value-card:hover::before{transform:scaleX(1);}
.value-card .feature-icon{
  position:relative; z-index:1; margin:0 auto 22px; width:72px; height:72px; border-radius:20px;
  background: linear-gradient(135deg, var(--vc-color-a), var(--vc-color-b)); color:#fff;
  box-shadow: 0 10px 26px -6px var(--vc-shadow);
}
.value-card .feature-icon svg{width:32px;height:32px;}
.value-card:hover .feature-icon{transform: scale(1.08) rotate(-6deg); background: linear-gradient(135deg, var(--vc-color-a), var(--vc-color-b)); color:#fff;}
.value-card h3{position:relative; z-index:1; font-size:1.25rem; margin-bottom:12px;}
.value-card p{position:relative; z-index:1; font-size:0.95rem;}
.value-card .vc-underline{width:36px; height:3px; border-radius:2px; background: var(--vc-color-a); margin:18px auto 0; position:relative; z-index:1;}
.value-card.vc-1{--vc-color-a: var(--color-primary); --vc-color-b: var(--color-primary-light); --vc-tint: rgba(15,76,129,0.08); --vc-shadow: rgba(15,76,129,0.35);}
.value-card.vc-2{--vc-color-a: var(--color-secondary); --vc-color-b: var(--color-secondary-dark); --vc-tint: rgba(26,166,183,0.08); --vc-shadow: rgba(26,166,183,0.35);}
.value-card.vc-3{--vc-color-a: var(--color-accent); --vc-color-b: var(--color-accent-dark); --vc-tint: rgba(244,185,66,0.1); --vc-shadow: rgba(244,185,66,0.4);}
@media (max-width:860px){.value-grid{grid-template-columns:1fr;}}

.md-card{display:flex; gap:2.5rem; align-items:center; background:var(--color-bg-alt); border-radius:var(--radius-lg); padding:clamp(1.75rem,4vw,3rem); flex-wrap:wrap;}
.md-photo{width:220px; height:260px; border-radius: var(--radius-md); overflow:hidden; flex-shrink:0; box-shadow: var(--shadow-md);}
.md-photo img{width:100%;height:100%;object-fit:cover;}
.md-info{flex:1; min-width:260px;}
.md-info h3{font-size:1.5rem;}
.md-role{color:var(--color-secondary-dark); font-weight:600; margin-bottom:14px; display:block;}
.md-quote{font-style:italic; color:var(--color-grey-600); border-left:3px solid var(--color-accent); padding-left:16px; margin-top:16px;}

.timeline{border-left:2px solid var(--color-grey-200); margin-left:10px;}
.timeline-item{position:relative; padding:0 0 40px 32px;}
.timeline-item::before{content:''; position:absolute; left:-7px; top:2px; width:14px;height:14px;border-radius:50%; background:var(--color-accent); box-shadow:0 0 0 4px rgba(244,185,66,0.2);}
.timeline-item h4{font-family:var(--font-heading); color:var(--color-primary); margin-bottom:6px;}

.legal-content h2{margin:32px 0 14px; font-size:1.35rem;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p, .legal-content li{color:var(--color-grey-600); margin-bottom:12px; font-size:0.98rem;}
.legal-content ul{padding-left:22px; list-style:disc;}
.legal-content strong{color:var(--color-grey-800);}

.map-placeholder{
  width:100%; aspect-ratio:16/8; border-radius: var(--radius-lg); overflow:hidden; position:relative;
  background: linear-gradient(135deg, var(--color-grey-100), var(--color-grey-200));
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-sm);
}
.map-placeholder iframe{width:100%;height:100%;border:0;}

.info-row{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--color-grey-100);}
.info-row .icon-box{width:48px;height:48px;border-radius:14px; background:rgba(15,76,129,0.08); color:var(--color-primary); display:flex;align-items:center;justify-content:center; flex-shrink:0;}
.info-row .icon-box svg{width:22px;height:22px;}
.info-row h4{font-family:var(--font-heading); font-size:0.98rem; margin-bottom:4px;}
.info-row p{font-size:0.92rem;}
.info-row a:hover{color:var(--color-primary);}

.error-page{min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding: 120px 20px 60px; background: var(--color-bg-alt);}
.error-code{font-family:var(--font-heading); font-weight:800; font-size:clamp(6rem,18vw,10rem); background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1;}

.pkg-detail-hero{display:grid; grid-template-columns:1fr 1fr; gap:2px; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md); margin-bottom:2.5rem;}
.pkg-detail-hero img{width:100%;height:100%;object-fit:cover; max-height:460px;}
@media (max-width:800px){.pkg-detail-hero{grid-template-columns:1fr;} .pkg-detail-hero img:last-child{display:none;} .pkg-detail-hero img{max-height:280px;}}

.pkg-detail-layout{display:grid; grid-template-columns:1.7fr 1fr; gap:3rem; align-items:start;}
/* Prevent grid items from expanding the track to fit unbreakable content
   (e.g. the horizontally-scrolling tabs row) — without this, a nowrap child
   forces the whole column wider than the viewport and everything gets clipped. */
.pkg-detail-layout > *{min-width:0;}
.pkg-inclusions-grid{display:grid; grid-template-columns:1fr 1fr; gap:2rem;}
.two-col-center{display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center;}
.two-col-narrow{display:grid; grid-template-columns:0.9fr 1.1fr; gap:3rem;}
@media (max-width:900px){
  .pkg-detail-layout{grid-template-columns:1fr; gap:2.5rem;}
  .pkg-inclusions-grid{grid-template-columns:1fr; gap:1.5rem;}
  .two-col-center{grid-template-columns:1fr; gap:2rem;}
  .two-col-narrow{grid-template-columns:1fr; gap:2.5rem;}
}

.itinerary-day{display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--color-grey-100);}
.itinerary-day .day-badge{width:52px;height:52px; border-radius:50%; background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:700; flex-shrink:0;}
.itinerary-day h4{margin-bottom:6px;}

.tag-list{display:flex; flex-wrap:wrap; gap:10px;}
.tag-list li{background:var(--color-bg-alt); padding:9px 16px; border-radius:var(--radius-full); font-size:0.86rem; font-weight:500; display:flex; align-items:center; gap:8px; color:var(--color-grey-700);}
.tag-list li svg{width:16px;height:16px; color:var(--color-secondary-dark);}
/* Inclusions / Exclusions: green check vs red cross for instant visual scanning */
.tag-list-incl li svg{color:var(--color-success);}
.tag-list-excl li svg{color:var(--color-error);}

.sticky-book{position:sticky; top:calc(var(--nav-height-scrolled) + var(--topbar-height) + 28px);}
@media (max-width:900px){.sticky-book{position:relative; top:0;}}
.book-panel{background:#fff; border-radius: var(--radius-lg); padding:26px; box-shadow: var(--shadow-md); border:1px solid var(--color-grey-100);}
.book-panel .price-tag{font-family:var(--font-heading); font-weight:800; font-size:1.8rem; color:var(--color-primary);}
.book-panel .price-tag small{font-size:0.85rem; font-weight:500; color:var(--color-grey-500);}

/* ---------- Package Detail Tabs ---------- */
.pkg-tabs{
  display:flex; gap:4px; border-bottom:2px solid var(--color-grey-200); margin-bottom:2rem;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  width:100%; max-width:100%; cursor:grab; user-select:none;
  position:sticky; top:calc(var(--nav-height-scrolled) + var(--topbar-height)); z-index:50;
  background:var(--color-bg); box-shadow: 0 8px 16px -12px rgba(15,76,129,0.18);
  /* The visual gap under the navbar is created with padding (not the sticky
     top offset) so the element's own opaque background covers that space too —
     otherwise scrolled content peeks through the empty gap above the tabs.
     The matching negative margin cancels it out so normal (unstuck) layout
     position is unaffected. */
  padding-top:28px; margin-top:-28px;
}
.pkg-tabs.dragging{cursor:grabbing; scroll-behavior:auto;}
.pkg-tabs::-webkit-scrollbar{display:none;}
.pkg-tab-btn{
  flex-shrink:0; padding:14px 22px; font-family:var(--font-heading); font-weight:600; font-size:0.95rem;
  color:var(--color-grey-500); background:none; border:none; border-bottom:3px solid transparent; cursor:pointer;
  transition: color 0.25s var(--ease-premium), border-color 0.25s var(--ease-premium);
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.pkg-tab-btn svg{width:16px;height:16px;}
.pkg-tab-btn:hover{color:var(--color-primary);}
.pkg-tab-btn.active{color:var(--color-primary); border-bottom-color:var(--color-secondary);}
.pkg-tab-panel{display:none;}
.pkg-tab-panel.active{display:block; animation: pkgTabFade 0.35s var(--ease-premium);}
@keyframes pkgTabFade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.pkg-info-chips{display:flex; flex-wrap:wrap; gap:12px; margin:1.6rem 0;}
.pkg-info-chip{display:flex; align-items:center; gap:10px; background:var(--color-bg-alt); border-radius: var(--radius-md); padding:12px 16px; font-size:0.85rem;}

/* Traveller photo gallery — fixed aspect-ratio frames so any photo dropped in
   later (any source resolution/orientation) keeps a clean, unbroken grid.
   Standalone section below the package tabs. */
.pkg-photo-gallery h3{margin-bottom:16px; font-size:1.3rem; text-align:center;}
.pkg-photo-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:14px;}
.pkg-photo-grid .ppg-frame{position:relative; aspect-ratio:3/4; border-radius:var(--radius-md); overflow:hidden; background:var(--color-bg-alt); box-shadow:0 6px 18px rgba(15,76,129,0.1); cursor:pointer;}
.pkg-photo-grid .ppg-frame img,
.pkg-photo-grid .ppg-frame video{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease;}
.pkg-photo-grid .ppg-frame:hover img,
.pkg-photo-grid .ppg-frame:hover video{transform:scale(1.06);}
.pkg-photo-grid .ppg-video::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,20,30,0.05) 45%, rgba(10,20,30,0.55) 100%);}
.ppg-play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.92); color:var(--color-primary);
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease-premium);
}
.pkg-photo-grid .ppg-frame:hover .ppg-play-btn{transform:translate(-50%,-50%) scale(1.12);}
.ppg-play-btn i{width:18px;height:18px;}

/* ---------- Photo lightbox modal ---------- */
.photo-modal-box{
  background:transparent; box-shadow:none; max-width:90vw; width:auto; max-height:90vh; overflow:visible; padding:0;
}
.photo-frame-wrap{display:flex; align-items:center; justify-content:center; max-width:90vw; max-height:90vh;}
.photo-frame-wrap img{max-width:90vw; max-height:90vh; width:auto; height:auto; display:block; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);}
.photo-modal-close{
  position:absolute; top:-16px; right:-16px; z-index:3; background:#fff; box-shadow: var(--shadow-md);
}
@media (max-width:600px){
  .photo-modal-close{top:-14px; right:0;}
}
@media (max-width:900px){
  .pkg-photo-grid{grid-template-columns:repeat(4, 1fr);}
}
@media (max-width:600px){
  .pkg-photo-grid{grid-template-columns:repeat(3, 1fr); gap:8px;}
}
.pkg-info-chip .icon-box{width:36px;height:36px; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; color:var(--color-secondary-dark); flex-shrink:0; box-shadow: var(--shadow-sm);}
.pkg-info-chip .icon-box svg{width:17px;height:17px;}
.pkg-info-chip strong{display:block; color:var(--color-grey-800); font-family:var(--font-heading); font-size:0.86rem;}
.pkg-info-chip span{color:var(--color-grey-500); font-size:0.78rem;}


.pkg-address{display:flex; align-items:flex-start; gap:6px; font-size:0.82rem; color:var(--color-grey-500); margin-top:6px;}
.pkg-address svg{width:14px;height:14px; flex-shrink:0; margin-top:2px; color:var(--color-secondary-dark);}

/* Reviews */
.review-summary{display:flex; align-items:center; gap:22px; background:var(--color-bg-alt); border-radius: var(--radius-md); padding:24px; margin-bottom:2rem; flex-wrap:wrap;}
.review-summary .rs-score{font-family:var(--font-heading); font-weight:800; font-size:2.6rem; color:var(--color-primary); line-height:1;}
.review-summary .rs-stars{display:flex; gap:2px; color:var(--color-accent-dark); margin:6px 0;}
.review-summary .rs-stars svg{width:16px;height:16px;}
.review-summary .rs-count{color:var(--color-grey-500); font-size:0.85rem;}
.review-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:700px){.review-grid{grid-template-columns:1fr;}}
.review-card{background:#fff; border:1px solid var(--color-grey-100); border-radius: var(--radius-md); padding:20px; box-shadow: var(--shadow-sm);}
.review-card .rc-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.review-card .rc-stars{display:flex; gap:2px; color:var(--color-accent-dark);}
.review-card .rc-stars svg{width:14px;height:14px;}
.review-card .rc-date{font-size:0.76rem; color:var(--color-grey-400);}
.review-card p{font-size:0.9rem; margin:10px 0;}
.review-card .rc-person{display:flex; align-items:center; gap:10px; margin-top:12px;}
.review-card .rc-avatar{width:36px;height:36px; border-radius:50%; background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:700; font-size:0.85rem; flex-shrink:0;}
.review-card .rc-person strong{display:block; font-size:0.86rem;}
.review-card .rc-person span{font-size:0.76rem; color:var(--color-grey-500);}

/* Map */
.pkg-map-wrap{border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md); border:1px solid var(--color-grey-100);}
.pkg-map-wrap iframe{width:100%; height:420px; border:0; display:block;}
@media (max-width:640px){.pkg-map-wrap iframe{height:300px;}}

/* Places-visited list under the map (the free embed can only show one pin,
   so each stop gets its own "open in Maps" link + a combined full-route link). */
.map-stops-list{display:flex; flex-direction:column; gap:8px;}
.map-stop-row{
  display:flex; align-items:center; gap:14px; background:var(--color-bg-alt); border-radius:var(--radius-md);
  padding:12px 16px; transition: background var(--dur-fast) var(--ease-premium);
}
.map-stop-row:hover{background:#eef2f6;}
.map-stop-num{
  width:28px; height:28px; border-radius:50%; background:var(--color-primary); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:700; font-size:0.8rem;
}
.map-stop-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.map-stop-info strong{font-size:0.9rem;}
.map-stop-info span{font-size:0.78rem; color:var(--color-grey-500); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.map-stop-row svg{width:16px;height:16px; color:var(--color-secondary-dark); flex-shrink:0;}

/* Pickup time pills */
.pickup-pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.pickup-pills span{background:var(--color-bg-alt); border-radius:var(--radius-full); padding:6px 14px; font-size:0.78rem; font-weight:600; color:var(--color-grey-600);}

/* ---------- Package Detail: Responsive Fine-Tuning ---------- */
@media (max-width:900px){
  .pkg-info-chips{gap:10px;}
  .pkg-info-chip{flex:1 1 calc(50% - 10px); min-width:150px;}
}
@media (max-width:700px){
  .pkg-tab-btn{padding:12px 16px; font-size:0.88rem;}
  .pkg-tab-btn svg{width:14px;height:14px;}
  .review-summary{flex-direction:column; align-items:flex-start; gap:10px; padding:20px;}
  .review-summary .rs-score{font-size:2.2rem;}
  .itinerary-day{gap:14px; padding:18px 0;}
  .itinerary-day .day-badge{width:42px;height:42px; font-size:0.9rem;}
  .book-panel{padding:20px;}
  .book-panel .price-tag{font-size:1.5rem;}
}
@media (max-width:600px){
  .pkg-info-chip{flex:1 1 100%;}
  .pkg-tabs{gap:0;}
  .pkg-tab-btn{padding:10px 12px; font-size:0.82rem; gap:5px;}
  .review-card{padding:16px;}
  .review-grid{gap:14px;}
  .pickup-pills span{font-size:0.72rem; padding:5px 11px;}
}
@media (max-width:480px){
  .pkg-tab-btn{padding:9px 10px; font-size:0.76rem;}
  .pkg-detail-hero img{max-height:220px;}
  .review-summary .rs-score{font-size:1.9rem;}
  .book-panel .price-tag{font-size:1.35rem;}
  .pkg-info-chip{padding:10px 12px;}
  .pkg-info-chip .icon-box{width:32px;height:32px;}
}

@media (max-width: 768px){
  .counter-grid{grid-template-columns:repeat(2,1fr);}
}

/* ==========================================================================
   UI Polish & Mobile Fixes (2026-08)
   ========================================================================== */

/* ---- Icon sizing safety net ----
   Any inline SVG without an explicit size can collapse/blow up. Buttons and
   feature icons already set sizes; these were missing — which left the modal
   close (X) button showing an empty circle. */
.modal-close svg{width:20px; height:20px; display:block;}
.btn-icon svg{width:20px; height:20px; display:block;}
.faq-side-support a{font-weight:600;}

/* ---- Equal-height "Who We Are" checklist cards ----
   Force every card in the 2-col grid to fill its row so all four look uniform
   regardless of how the label text wraps. */
.about-checklist{grid-auto-rows:1fr; align-items:stretch;}
.about-checklist li{height:100%; align-items:center;}

/* ---- Equal-height feature cards (Why Choose Us) ---- */
.grid.grid-4 .feature-card,
.grid.grid-3 .feature-card{height:100%; display:flex; flex-direction:column;}
.feature-card p{margin-top:auto;}

/* Cards in a grid should always fill their track for a clean, aligned look */
.grid > .card{height:100%; display:flex; flex-direction:column;}
.pkg-card .pkg-body, .hotel-card .hotel-body, .blog-card .blog-body{flex:1; display:flex; flex-direction:column;}
.pkg-card .pkg-footer, .hotel-card .pkg-footer{margin-top:auto;}
.blog-card .blog-read{margin-top:auto; padding-top:20px;}

/* ---- Custom dropdowns (see initPrettySelects in main.js) ----
   The real <select> stays in the DOM for FormData/validation but is visually
   hidden; `.ps-trigger` + `.ps-panel` provide the on-brand UI.
   NOTE: the previous approach styled the native select with a chevron
   background-image, but `.field select:focus` sets a `background` SHORTHAND
   which resets background-repeat to `repeat` — so on focus the chevron tiled
   across the whole control. A real custom control avoids that class of bug
   entirely and also gives us a styleable option list on mobile. */
.pretty-select{position:relative; width:100%;}
.pretty-select > select{
  position:absolute; opacity:0; pointer-events:none;
  width:1px; height:1px; padding:0; border:0; margin:0;
}
.ps-trigger{
  width:100%; display:flex; align-items:center; gap:10px; text-align:left;
  padding:13px 15px; border:1.5px solid var(--color-grey-200); border-radius:var(--radius-sm);
  background:var(--color-grey-50); color:var(--color-grey-800);
  font-family:inherit; font-size:1rem; line-height:1.5; cursor:pointer;
  transition:border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.ps-trigger:hover{border-color:var(--color-grey-300);}
.ps-trigger .ps-value{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ps-trigger.placeholder .ps-value{color:var(--color-grey-400);}
.ps-trigger .ps-chevron{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  color:var(--color-grey-400); transition:transform var(--dur-fast) var(--ease-premium), color var(--dur-fast);
}
.ps-trigger .ps-chevron svg{width:18px; height:18px; display:block;}
.pretty-select.open .ps-trigger{
  border-color:var(--color-secondary); background:#fff;
  box-shadow:0 0 0 3px rgba(26,166,183,0.12);
}
.pretty-select.open .ps-chevron{transform:rotate(180deg); color:var(--color-secondary);}
.field.error .ps-trigger{border-color:var(--color-error); background:#FEF2F0;}

.ps-panel{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60;
  background:#fff; border:1px solid var(--color-grey-100); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:6px; max-height:260px; overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--dur-fast), transform var(--dur-fast) var(--ease-premium), visibility var(--dur-fast);
  overscroll-behavior:contain;
}
.pretty-select.open .ps-panel{opacity:1; visibility:visible; transform:translateY(0);}
/* Flipped upward when there's no room below (see open() in main.js) */
.pretty-select.up .ps-panel{top:auto; bottom:calc(100% + 6px); transform:translateY(6px);}
.pretty-select.up.open .ps-panel{transform:translateY(0);}
.ps-option{
  padding:11px 14px; border-radius:10px; font-size:0.94rem; color:var(--color-grey-700);
  cursor:pointer; transition:background var(--dur-fast), color var(--dur-fast);
}
.ps-option:hover{background:var(--color-grey-50); color:var(--color-grey-900);}
.ps-option.selected{background:rgba(15,76,129,0.08); color:var(--color-primary); font-weight:600;}
.ps-option.disabled{color:var(--color-grey-300); cursor:not-allowed;}
.ps-panel::-webkit-scrollbar{width:8px;}
.ps-panel::-webkit-scrollbar-thumb{background:var(--color-grey-200); border-radius:99px;}

/* No-JS / pre-enhancement fallback so a bare <select> still looks reasonable */
.field select:not([data-ps-ready]){cursor:pointer;}

/* ---- "Who We Are" image collage: cleaner + no overflow on mobile ---- */
@media (max-width:900px){
  .about-collage{max-width:380px; aspect-ratio:1/1;}
  /* Pull the floating badge inside the frame so it never hangs off the edge
     or trigger sideways scroll. */
  .about-collage .ac-badge{left:0; bottom:4%;}
  .about-collage .ac-blob{inset:0;}
}
@media (max-width:520px){
  .about-collage{max-width:320px;}
  .about-collage .ac-badge{padding:12px 16px;}
  .about-collage .ac-badge .num{font-size:1.4rem;}
  .about-collage .ac-badge .lbl{font-size:0.66rem;}
}

/* ---- Hard stop for any horizontal "swipe" / sideways scroll ----
   Belt-and-braces: clip on both html & body plus a guard on the main wrappers
   so a stray wide child (e.g. an absolutely-positioned collage piece) can
   never produce a phantom horizontal scrollbar. */
html, body{overflow-x:clip;}
main, footer, .site-header-wrap{max-width:100%; overflow-x:clip;}

/* --- Mobile menu CTA button ---
   BUG: `.mobile-menu a` (specificity 0,1,1) was overriding `.btn-primary`
   (0,1,0), so the "Plan My Trip" button rendered with dark grey text on the
   dark navy fill, plus the nav-link padding/border-bottom. These rules restore
   proper button styling inside the menu. */
.mobile-menu a.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0.95rem; padding:16px 30px; border-bottom:none;
}
.mobile-menu a.btn.btn-block{display:flex; width:100%;}
.mobile-menu a.btn-primary{color:#fff;}
.mobile-menu a.btn-accent{color:var(--color-grey-900);}
.mobile-menu a.btn-outline{color:var(--color-primary);}
.mobile-menu a.btn-white{color:var(--color-primary);}

/* --- Mission/Vision/Values: numbers removed, rebalance top padding --- */
.value-card{padding:38px 30px 34px;}

/* --- About page stat pair: stays side-by-side on mobile instead of stacking --- */
.about-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.about-stat{
  padding:22px 20px; border-radius:var(--radius-md); text-align:center;
  background:var(--color-bg-alt); border:1px solid var(--color-grey-100);
}
.about-stat .num{
  font-family:var(--font-heading); font-weight:800; line-height:1.05;
  font-size:clamp(1.5rem, 6vw, 2rem); color:var(--color-primary);
}
.about-stat .label{font-size:0.86rem; color:var(--color-grey-500); font-weight:600; margin-top:8px;}
@media (max-width:420px){
  .about-stat{padding:16px 14px;}
  .about-stat .label{font-size:0.76rem;}
}

/* --- "Who We Are" checklist: full-width rectangle rows on mobile ---
   The 2-across grid squeezed each item into a narrow box, so labels like
   "Background-checked & trained" wrapped onto three lines and the four tiles
   looked ragged. One per row keeps the same wide-rectangle rhythm the desktop
   layout has, and the text fits on a single line. */
@media (max-width:700px){
  .about-checklist{grid-template-columns:1fr; max-width:520px; gap:12px;}
  .about-checklist li{padding:14px 16px; gap:14px;}
  .about-checklist li strong{font-size:0.95rem;}
  .about-checklist li span{font-size:0.82rem;}
}