/* air16 — comprehensive mobile responsiveness (loaded last) */

/* ===== Tablet & below: section spacing ===== */
@media (max-width:1024px){
  section{ padding:48px 0; }
  .sec-head{ margin-bottom:32px; }
  .cta-band{ padding:30px 26px; }
}

/* ===== Phones (<=768px) ===== */
@media (max-width:768px){
  .container{ padding:0 16px; }
  section{ padding:40px 0; }

  /* every multi-column grid stacks or goes 2-up */
  .g2,.g3,.g4,.g5,.g6{ grid-template-columns:1fr 1fr !important; }
  .grid.g2{ grid-template-columns:1fr !important; }

  /* stat bars & feature rows: 2 columns, clean borders */
  .stat-bar,.stat-bar.light,.feature-row{
    grid-template-columns:1fr 1fr !important; grid-auto-flow:row !important;
    gap:18px 10px !important; padding:20px 14px !important;
  }
  .stat-item,.feature-cell{ border-right:0 !important; }

  /* headings scale down */
  .sec-head h2{ font-size:24px; }
  .page-hero .hero-copy h1,
  .split-2.hero-split h1{ font-size:34px !important; }
  h1{ font-size:34px; }
  h2{ font-size:24px; }

  /* hero: text first, image banner below */
  .page-hero{ grid-template-columns:1fr !important; }
  .page-hero .hero-copy{ padding:24px 0 0 !important; }
  .split-2.hero-split{ grid-template-columns:1fr !important; }
  .split-2.hero-split > div:first-child{ padding:0 !important; }
  .hero-media img.hero-img{ position:relative !important; aspect-ratio:16/9; height:auto !important; border-radius:var(--radius); }
  .hero-media::before{ display:none !important; }

  /* buttons full-width-ish and wrap */
  .hero-actions{ gap:10px; }
  .hero-actions .btn{ flex:1 1 auto; justify-content:center; }

  /* tables scroll horizontally */
  .jobs-table{ display:block; overflow-x:auto; white-space:nowrap; }

  /* split content stacks */
  .split-2{ grid-template-columns:1fr !important; gap:24px; }

  /* tabs wrap & shrink */
  .tabs{ gap:6px; }
  .tab{ padding:8px 14px; font-size:13px; }

  /* footer to 2 cols */
  .footer-grid{ grid-template-columns:1fr 1fr !important; gap:24px; }

  /* investors page custom grids */
  .inv-hero{ grid-template-columns:1fr !important; gap:24px; padding:30px 0 10px; }
  .inv-hero h1{ font-size:32px !important; }
  .inv-collage img{ transform:none !important; height:160px; }
  .inv-stats{ grid-template-columns:1fr 1fr !important; }
  .inv-stat{ border-right:0 !important; }
  .roadmap{ grid-template-columns:1fr 1fr !important; gap:22px; }
  .road-col{ border-left:0 !important; padding:0; }
  .market{ grid-template-columns:1fr !important; }
  .opps{ grid-template-columns:1fr 1fr !important; }
  .lead-band{ grid-template-columns:1fr !important; }
  .inv-cta{ flex-direction:column; align-items:flex-start; }
}

/* ===== Small phones (<=480px) ===== */
@media (max-width:480px){
  section{ padding:34px 0; }
  .sec-head h2{ font-size:21px; }
  h1, .page-hero .hero-copy h1, .split-2.hero-split h1{ font-size:28px !important; }

  /* single column for nearly everything */
  .g3,.g4,.g5,.g6{ grid-template-columns:1fr !important; }
  .stat-bar,.stat-bar.light,.feature-row{ grid-template-columns:1fr 1fr !important; }
  .gallery-grid{ grid-template-columns:1fr 1fr !important; }
  .opps{ grid-template-columns:1fr 1fr !important; }
  .roadmap{ grid-template-columns:1fr !important; }
  /* compact footer: 2 cols for link lists, brand spans full width */
  .footer-grid{ grid-template-columns:1fr 1fr !important; gap:18px 20px !important; text-align:left; padding-bottom:22px !important; }
  .footer-brand{ grid-column:1 / -1; }
  .footer-brand p{ font-size:12.5px; margin-top:8px; }
  .site-footer{ padding-top:34px !important; }
  .site-footer h4{ margin-bottom:10px !important; font-size:12px; }
  .site-footer ul li{ margin-bottom:6px; }
  .site-footer ul li a{ font-size:13px; }
  .footer-contact li{ margin-bottom:8px; font-size:12.5px; }
  .socials{ margin-top:10px; }
  .footer-bottom{ padding:12px 0 !important; font-size:12px; gap:6px; }

  /* buttons stack full width */
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .btn{ font-size:14px; padding:12px 20px; }

  /* pricing / max-width helpers full width */
  [style*="max-width:420px"]{ max-width:100% !important; }

  /* stat numbers a touch smaller */
  .stat-item .num{ font-size:22px; }
  .inv-stat .v{ font-size:18px; }

  /* WhatsApp button doesn't overlap content */
  .wa-float{ right:14px; bottom:14px; }

  /* visitor counter wraps nicely */
  .visitor-counter{ flex-wrap:wrap; padding:9px 16px; }
}

/* ===== Icon sizing consistency across breakpoints ===== */
.feature-cell .ico,
.icard .ico,
.hero-badge .ico,
.inv-stat .ic,
.info-row .ico{ flex:none; }
@media (max-width:480px){
  .icard .ico{ width:52px; height:52px; font-size:22px; }
  .hero-badge .ico{ width:42px; height:42px; font-size:18px; }
  .feature-cell .ico{ font-size:22px; }
  .opp .ic{ font-size:24px; }
  .legal-block .ico{ width:50px; height:50px; font-size:20px; }
}

/* ===== bigger tour cards with larger image area ===== */
.tour-card .ph{ min-height:200px; aspect-ratio:auto; height:210px; }
.tour-card .card-body{ padding:20px; }
.tour-card h3{ font-size:18px !important; margin-bottom:6px; }
.tour-card p{ font-size:14px; }
.tour-card .price-tag{ font-size:22px; }
@media (max-width:768px){
  .tour-card .ph{ height:200px; }
}
@media (max-width:480px){
  .tour-card .ph{ height:190px; }
}

/* ===== equal-height cards with bottom-aligned buttons ===== */
.grid{ align-items:stretch; }
.grid > .card, .grid > a.card{ display:flex; flex-direction:column; height:100%; }
.card .card-body{ display:flex; flex-direction:column; flex:1 1 auto; }
/* push the last button/link to the bottom so all buttons align in a row */
.card .card-body > .btn:last-child,
.card .card-body > a.btn,
.tour-card .card-body > .btn{ margin-top:auto; }
.card .card-body .price-tag{ margin-top:10px; }
/* vert-cards (investors) and price-cards equal height too */
.grid > .vert-card, .grid > .price-card{ display:flex; flex-direction:column; height:100%; }
.price-card{ display:flex; flex-direction:column; }
.price-card .btn{ margin-top:auto; }

/* ===== stat bar contrast fix (light variant labels were too faint) ===== */
.stat-bar.light .stat-item .lbl{ color:var(--text); opacity:1; }
.stat-bar.light .stat-item .num{ color:var(--navy); }
.inv-stat .l{ color:var(--text); }

/* ===== MV Hayathi photo gallery — bigger tiles ===== */
.hayathi-gallery .ph{ aspect-ratio:16/10; min-height:230px; font-size:16px; }
@media (max-width:768px){ .hayathi-gallery{ grid-template-columns:1fr 1fr !important; } .hayathi-gallery .ph{ min-height:180px; } }
@media (max-width:480px){ .hayathi-gallery{ grid-template-columns:1fr !important; } }

/* ===== Our Air Services — centered, bigger cards & images ===== */
.air-services{ max-width:1080px; margin:0 auto; }
.air-services .ph{ aspect-ratio:auto; height:230px; min-height:230px; }
.air-services .card-body{ padding:22px; }
.air-services h3{ font-size:18px !important; }
@media (max-width:900px){ .air-services{ grid-template-columns:1fr 1fr !important; } .air-services .ph{ height:210px; } }
@media (max-width:560px){ .air-services{ grid-template-columns:1fr !important; } }

/* ===== even, aligned icon rows (feature-row) all pages =====
   Switch from single-row auto-flow to a wrapping equal-column grid so
   icons + labels line up evenly regardless of item count, and labels
   that wrap to 2 lines don't break alignment. */
.feature-row{
  grid-auto-flow:row !important;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)) !important;
  grid-auto-columns:initial !important;
  gap:8px 0 !important;
  align-items:stretch !important;
}
.feature-cell{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center; padding:14px 12px; min-height:96px;
  border-right:1px solid var(--line) !important;
}
.feature-cell .ico{ font-size:42px; margin-bottom:16px; height:46px; display:flex; align-items:center; justify-content:center; }
.feature-cell .t{ font-size:14px; line-height:1.3; }
/* feature-row variant with descriptions (Why Choose air16) */
.feature-row.whyc-desc .feature-cell{ padding:16px 18px; min-height:auto; }
.feature-row.whyc-desc .feature-cell .t{ font-size:15px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.feature-row.whyc-desc .feature-cell .d{ font-size:13px; line-height:1.5; color:var(--text); }
/* remove right border on the last item of each visual row is hard with auto-fit;
   use a subtle full border set instead for consistency */
.feature-cell:last-child{ border-right:0 !important; }
@media (max-width:900px){
  .feature-row{ grid-template-columns:repeat(auto-fit, minmax(110px,1fr)) !important; }
}
@media (max-width:560px){
  .feature-row{ grid-template-columns:1fr 1fr !important; }
  .feature-cell{ border-right:0 !important; border-bottom:1px solid var(--line); }
}

/* ===== footer brand column alignment + tagline on one line ===== */
.footer-brand{ max-width:300px; }
.footer-brand p{ line-height:1.6; }
.footer-tag{ white-space:nowrap; margin-top:10px; font-size:14px; }
.site-footer h4{ margin-bottom:18px; }
@media (max-width:768px){
  .footer-tag{ white-space:normal; }
  .footer-brand{ max-width:none; }
}

/* ===== badge-pill (01/02 number tag) compact, not full-width =====
   Flex card bodies were stretching the orange pill to full width. */
.badge-pill{ display:inline-block; align-self:flex-start; width:auto; max-width:max-content; padding:3px 12px; font-size:11px; }
.card-body > .badge-pill{ align-self:flex-start; }
/* the ONE DAY TOUR badge on tour cards stays as-is (absolute positioned) */

/* ===== Three Divisions seg-cards: equal height, Explore link aligned ===== */
.grid > .seg-card{ display:flex; flex-direction:column; height:100%; }
.seg-card .seg-body{ display:flex; flex-direction:column; flex:1 1 auto; }
.seg-card .seg-body ul{ flex:1 1 auto; }
.seg-card .seg-body .link{ margin-top:auto; }

/* ===== Featured Services — bigger cards & images (home) ===== */
.featured-services{ max-width:1100px; margin:0 auto; }
.featured-services .ph{ aspect-ratio:auto; height:220px; min-height:220px; }
.featured-services .card-body{ padding:22px !important; }
.featured-services h3{ font-size:19px !important; }
.featured-services p{ font-size:14px !important; }
@media (max-width:900px){ .featured-services{ grid-template-columns:1fr 1fr !important; } }
@media (max-width:560px){ .featured-services{ grid-template-columns:1fr !important; } .featured-services .ph{ height:200px; } }

/* ===== Joy Ride 'Fly Over' gallery — bigger tiles ===== */
.joy-gallery .ph{ aspect-ratio:16/10; min-height:230px; font-size:16px; }
@media (max-width:768px){ .joy-gallery{ grid-template-columns:1fr 1fr !important; } .joy-gallery .ph{ min-height:180px; } }
@media (max-width:480px){ .joy-gallery{ grid-template-columns:1fr !important; } }

/* ===== generic enlarged service grid (svc-grid) ===== */
.svc-grid{ max-width:1100px; margin:0 auto; }
.svc-grid .ph{ aspect-ratio:auto; height:200px; min-height:200px; }
.svc-grid .card-body{ padding:22px !important; }
.svc-grid h3{ font-size:18px !important; }
.svc-grid p{ font-size:14px !important; }
@media (max-width:900px){ .svc-grid{ grid-template-columns:1fr 1fr !important; } }
@media (max-width:560px){ .svc-grid{ grid-template-columns:1fr !important; } }

/* ===== tour-card: description absorbs height so price+button align ===== */
.tour-card .card-body{ display:flex; flex-direction:column; }
.tour-card .card-body > h3{ flex:0 0 auto; }
.tour-card .card-body > p{ flex:1 1 auto; }           /* description grows */
.tour-card .card-body > .price-tag{ flex:0 0 auto; margin-top:0 !important; }
.tour-card .card-body > a.btn{ flex:0 0 auto; margin-top:14px !important; }

/* ===== INVESTOR PAGE: kill the huge gaps between sections ===== */
body.inv-page section{ padding:46px 0 !important; }
body.inv-page section[style*="padding-top:0"]{ padding-top:0 !important; }
body.inv-page .sec-head{ margin-bottom:30px !important; }
body.inv-page .inv-stats{ margin-top:4px; }
/* the stats wrapper had a big inline margin-bottom — neutralise extra gap */
body.inv-page .container[style*="margin-bottom"]{ margin-bottom:0 !important; }
@media (max-width:900px){ body.inv-page section{ padding:34px 0 !important; } }

/* ===== HOME full-width hero banner ===== */
.home-hero{ position:relative; min-height:clamp(440px,52vw,640px); display:flex; align-items:center; overflow:hidden; padding:0; }
.home-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; animation:heroImg 1.1s .05s both; }
.home-hero-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(8,27,51,.82) 0%, rgba(8,27,51,.55) 40%, rgba(8,27,51,.12) 70%, rgba(8,27,51,0) 100%); }
.home-hero-inner{ position:relative; z-index:2; width:100%; }
.home-hero-copy{ max-width:620px; padding:40px 0; }
.home-hero .visitor-counter{ background:rgba(255,255,255,.92); }
@media (max-width:768px){
  .home-hero{ min-height:0; padding:0; }
  .home-hero-scrim{ background:linear-gradient(180deg, rgba(8,27,51,.5) 0%, rgba(8,27,51,.72) 100%); }
  .home-hero-copy{ padding:60px 0; max-width:none; text-align:left; }
  .home-hero-copy h1{ font-size:34px !important; }
}
@media (max-width:480px){
  .home-hero-copy{ padding:48px 0; }
  .home-hero-copy h1{ font-size:30px !important; }
  .home-hero .hero-actions{ flex-direction:column; align-items:stretch; }
  .home-hero .hero-actions .btn{ width:100%; }
}

/* ===== HOME page: tidy vertical rhythm ===== */
.home-hero{ margin-bottom:0; }
/* stat bar overlaps slightly onto hero like the reference, sitting in a white card */
.home-hero + .container{ margin-top:-46px; position:relative; z-index:3; margin-bottom:6px; }
.home-hero + .container .stat-bar.light{ background:#fff; box-shadow:0 16px 40px rgba(11,37,69,.14); }
/* trim the first section's top padding so it doesn't double-gap under the stat bar */
.home-hero ~ section:first-of-type{ padding-top:40px; }

/* ===== HOME: split promo cards — white text half + photo half ===== */
.promo-split{
  padding:0 !important;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1fr;   /* text | photo */
  align-items:stretch;
  min-height:300px;
}
.promo-split .promo-body{
  background:#fff;
  padding:30px 28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  text-align:left;
}
.promo-split .promo-photo{
  background-size:cover;
  background-position:center;
}
.promo-split .promo-body h3{
  color:var(--ink,#0B2545);
  font-size:21px;
  line-height:1.25;
  margin-bottom:10px;
}
.promo-split .promo-body p{
  color:var(--text,#3A4A5C);
  font-size:14px;
  line-height:1.55;
  margin-bottom:18px;
}
.promo-split .promo-body .text-orange{ color:var(--orange); }
.promo-split .promo-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.promo-split .promo-actions .btn{ padding:11px 22px; }
.promo-split .promo-pillars{
  display:flex; gap:14px; flex-wrap:wrap; margin:4px 0 20px;
}
.promo-split .pillar{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  font-size:11px; color:var(--text,#3A4A5C); text-align:center; min-width:44px;
}
.promo-split .pillar i{ font-size:20px; color:var(--orange); }
@media(max-width:680px){
  .promo-split{ grid-template-columns:1fr; }     /* stack: text over photo */
  .promo-split .promo-photo{ min-height:180px; order:-1; }  /* photo on top */
  .promo-split .promo-body{ padding:24px 20px; }
}

/* ===== Final CTA band (full-bleed photo, flush to footer) ===== */
.cta-band.cta-band-img{ background-size:cover; background-position:center; border:0; }
.cta-band.cta-fullwidth{
  width:100%;
  max-width:none;
  margin:0;
  border-radius:0;
  padding:72px 24px;
  display:block;
}
.cta-band.cta-fullwidth .container{ margin:0 auto; }
.cta-band.cta-fullwidth h2{
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.7);
}
.cta-band.cta-fullwidth p{
  color:#fff;
  margin:10px 0 22px;
  text-shadow:0 1px 6px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.7);
}
.cta-band.cta-fullwidth .btn-ghost-white{
  color:#fff;
  border-color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  background:rgba(0,0,0,.12);
}
.cta-band.cta-fullwidth .btn-ghost-white:hover{
  background:#fff; color:var(--navy,#0B2545); text-shadow:none;
}
@media(max-width:680px){
  .cta-band.cta-fullwidth{ padding:52px 20px; }
}

/* ===== Stat bar: icon left, number+label stacked right (match mockup) ===== */
.stat-bar .stat-item{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:left;
}
.stat-bar .stat-item .ico{
  font-size:32px;
  margin-bottom:0;
  line-height:1;
  flex:none;
}
.stat-bar .stat-item .stat-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.1;
}
.stat-bar .stat-item .num{ line-height:1.05; }
.stat-bar .stat-item .lbl{ line-height:1.2; }

/* ===== Why Choose: icon left, title+text stacked right ===== */
.why-grid{ gap:28px 30px; }
.why-item{ display:flex; align-items:flex-start; gap:16px; }
.why-item .why-ico{ font-size:30px; color:var(--orange); flex:none; line-height:1; margin-top:2px; }
.why-item .why-text h3{ font-size:17px; color:var(--ink,#0B2545); margin:0 0 6px; }
.why-item .why-text p{ font-size:14px; color:var(--muted,#5b6b7e); margin:0; line-height:1.5; }

/* ===== price card * T&C Apply note ===== */
.tc-note{ font-size:11px; color:var(--muted,#7a8a9a); margin-top:6px; font-style:italic; }

/* ===== promo card with full background image (text on left 50%) ===== */
.promo-fullbg{
  padding:0 !important;
  position:relative;
  overflow:hidden;
  min-height:300px;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
}
.promo-fullbg::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg,
     rgba(255,255,255,.94) 0%,
     rgba(255,255,255,.9) 40%,
     rgba(255,255,255,.5) 56%,
     rgba(255,255,255,0) 74%);
}
.promo-fullbg .promo-body{
  position:relative; z-index:2;
  width:52%;
  padding:28px 14px 28px 30px;
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
}
.promo-fullbg .promo-body h3{ color:var(--ink,#0B2545); font-size:21px; line-height:1.25; margin-bottom:10px; }
.promo-fullbg .promo-body p{ color:var(--text,#3A4A5C); font-size:14px; line-height:1.55; margin-bottom:18px; }
@media(max-width:680px){
  .promo-fullbg .promo-body{ width:66%; padding-left:22px; }
}

/* ===== promo cards: full bg image, subject on right, text on left 50% ===== */
.promo-leftbg{
  padding:0 !important;
  position:relative;
  overflow:hidden;
  aspect-ratio:20 / 9;                /* 20:9 banner ratio */
  background-size:cover;
  background-position:right center;   /* image fills card; left covered by panel */
  display:flex;
  align-items:stretch;
}
/* solid white panel on the left half so text is fully clean; image shows on right */
.promo-leftbg::before{
  content:"";
  position:absolute; top:0; bottom:0; left:0; width:50%;
  background:#fff;
}
.promo-leftbg::after{
  content:"";
  position:absolute; top:0; bottom:0; left:50%; width:10%;
  background:linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%);
}
.promo-leftbg .promo-body{
  position:relative; z-index:2;
  width:52%;
  padding:24px 18px 24px 30px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; text-align:left;
}
.promo-leftbg .promo-body h3{ color:var(--ink,#0B2545); font-size:21px; line-height:1.25; margin-bottom:10px; }
.promo-leftbg .promo-body p{ color:var(--text,#3A4A5C); font-size:14px; line-height:1.55; margin-bottom:18px; }
.promo-leftbg .promo-body .text-orange{ color:var(--orange); }
.promo-leftbg .promo-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.promo-leftbg .btn{ padding:9px 18px; font-size:13px; }
.promo-leftbg .promo-pillars{ display:flex; gap:6px; flex-wrap:nowrap; margin:4px 0 18px; width:100%; }
.promo-leftbg .pillar{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:9px; color:var(--text,#3A4A5C); text-align:center; flex:1 1 0; min-width:0; }
.promo-leftbg .pillar i{ font-size:16px; color:var(--orange); }
@media(max-width:680px){
  .promo-leftbg{ aspect-ratio:16 / 9; }
  .promo-leftbg .promo-body{ width:66%; padding-left:22px; }
  .promo-leftbg::before{ background:linear-gradient(90deg,#fff 0%,#fff 55%,rgba(255,255,255,0) 80%); }
}

/* ===== Our Air Services: real images fill the card-image area ===== */
.air-services .card-img{ width:100%; height:230px; object-fit:cover; display:block; }
@media(max-width:900px){ .air-services .card-img{ height:210px; } }

/* ===== split-2 fill image (Why Choose sections) ===== */
.split-2 img.fill{ width:100%; height:100%; min-height:300px; object-fit:cover; border-radius:var(--radius,14px); display:block; }
@media(max-width:768px){ .split-2 img.fill{ min-height:220px; } }

/* ===== Why Choose inside split-2 (Air Hub etc.) ===== */
.why-split{ align-items:center; gap:40px; }
.why-split .why-grid{ display:flex; flex-direction:column; gap:18px; margin-top:6px; }
.why-split .why-item{ align-items:flex-start; }
.why-split img.fill{
  width:100%;
  aspect-ratio:4 / 5;          /* fixed, clean proportions */
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 16px 40px rgba(11,37,69,.14);
  display:block;
}
@media(max-width:820px){
  .why-split img.fill{ aspect-ratio:16 / 9; }
}

/* ===== Why Choose Air Hub — horizontal banner with pilot on right ===== */
.why-banner{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background-size:cover;
  background-position:right center;
  min-height:180px;
  box-shadow:0 14px 36px rgba(11,37,69,.12);
}
.why-banner-scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg,
     rgba(255,255,255,.85) 0%,
     rgba(255,255,255,.7) 45%,
     rgba(255,255,255,.25) 62%,
     rgba(255,255,255,0) 78%);
}
.why-banner-inner{ position:relative; z-index:2; padding:26px 30px; }
.why-banner-title{ font-size:24px; margin-bottom:18px; }
/* 5 equal columns, always one row */
.why-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  max-width:74%;
}
.why-cell{ min-width:0; }
.why-cell .why-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.why-cell .why-ico{ color:var(--orange); font-size:17px; flex:none; }
.why-cell h3{ font-size:14px; color:var(--ink,#0B2545); margin:0; line-height:1.2; }
.why-cell p{ font-size:12px; color:var(--muted,#5b6b7e); line-height:1.45; margin:0; padding-left:2px; }
@media(max-width:900px){
  .why-banner{ background-image:none !important; }
  .why-banner-scrim{ display:none; }
  .why-banner-title{ font-size:22px; }
  .why-row{ grid-template-columns:1fr 1fr; max-width:100%; gap:18px; }
}
@media(max-width:480px){
  .why-row{ grid-template-columns:1fr; }
}

/* ===== Ready to Fly band ===== */
.fly-band{
  position:relative;
  background:linear-gradient(120deg,var(--navy-deep,#081B33),var(--navy,#0B2545));
  border-radius:16px;
  padding:30px 36px;
  display:flex;
  align-items:center;
  gap:30px;
  overflow:hidden;
  flex-wrap:wrap;
}
.fly-left{ flex:1 1 300px; }
.fly-left h2{ color:#fff; font-size:26px; margin:0 0 6px; }
.fly-left p{ color:rgba(255,255,255,.85); font-size:14px; margin:0 0 16px; }
.fly-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.fly-feats{ display:flex; gap:30px; flex-wrap:wrap; z-index:2; }
.fly-feat{ display:flex; flex-direction:column; align-items:center; gap:7px; color:#fff; font-size:12px; text-align:center; min-width:70px; }
.fly-feat i{ font-size:22px; color:#fff; }
.fly-plane{ position:absolute; right:26px; top:50%; transform:translateY(-50%) rotate(-8deg); font-size:42px; color:rgba(255,255,255,.18); }
@media(max-width:820px){
  .fly-band{ gap:20px; }
  .fly-feats{ gap:20px; }
  .fly-plane{ display:none; }
}

/* ===== AIR HUB full-width hero banner ===== */
.hub-hero{
  position:relative;
  background-size:cover;
  background-position:center right;
  min-height:440px;
  display:flex;
  align-items:stretch;
}
.hub-hero-scrim{ display:none; }   /* no veil — image already fades to white on the left */
/* full-width banner variant: show the ENTIRE image with no crop (height follows 2200x600 ratio) */
.hub-hero.hub-hero-full{ aspect-ratio:2200/600; min-height:0; background-size:100% 100%; background-position:center; }
@media(max-width:768px){ .hub-hero.hub-hero-full{ aspect-ratio:auto; min-height:auto; background-size:cover; } }
.hub-hero-inner{ position:relative; z-index:2; width:100%; display:flex; flex-direction:column; justify-content:flex-start; padding-top:18px; padding-bottom:18px; }
/* breadcrumb pinned at the very top of the hero, copy centered below it */
.hero-crumb{ margin:0; padding:0; font-size:14px; color:var(--text,#3A4A5C); }
.hub-hero .hub-hero-copy{ margin-top:auto; margin-bottom:auto; }
.hero-crumb a{ color:var(--text,#3A4A5C); }
.hero-crumb a:hover{ color:var(--orange); }
.hero-crumb .here{ color:var(--orange); }
/* copy block pinned to the left, contained over the white part */
.hub-hero-copy{ max-width:480px; margin-right:auto; text-align:left; }
.hub-hero-copy h1{ color:var(--ink,#0B2545); font-size:clamp(34px,5vw,52px); letter-spacing:-1px; line-height:1.05; margin:0; text-align:left; }
.hub-hero-copy h3{ color:var(--ink,#0B2545); font-size:20px; margin:10px 0 0; font-weight:600; text-align:left; }
.hub-hero-copy .lead{ color:var(--text,#3A4A5C); font-size:15px; line-height:1.55; margin:14px 0 22px; text-align:left; }
/* badges: left-aligned row that wraps to 2x2 within the copy column */
.hub-hero-copy .hero-badges{ display:flex; justify-content:flex-start; gap:18px 22px; flex-wrap:wrap; margin:0 0 24px; }
.hub-hero-copy .hero-badge{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; width:88px; flex:none; }
.hub-hero-copy .hero-badge span{ color:var(--text,#3A4A5C); font-size:12px; line-height:1.3; }
.hub-hero-copy .hero-actions{ justify-content:flex-start; }
@media(max-width:768px){
  .hub-hero{ min-height:auto; padding:40px 0; background-position:center; }
  .hub-hero-scrim{ display:block; background:rgba(255,255,255,.82); }
  .hub-hero-copy{ max-width:100%; }
  .hub-hero-copy h1{ font-size:34px; }
}

/* ===== Our Aircraft Categories — card images ===== */
.air-cat .card-img,
.grid.g3 .card > .card-img{
  width:100%; height:200px; object-fit:cover; display:block;
  border-radius:var(--radius) var(--radius) 0 0;
}
@media (max-width:768px){
  .grid.g3 .card > .card-img{ height:190px; }
}

/* ===== breadcrumb flush above full-width hero (no gap) ===== */
.hub-hero + *, .breadcrumb + .hub-hero{}
.container > .breadcrumb{ margin:8px 0 8px; }
section.hub-hero{ margin-top:0; }

/* ===== bigger hero badge icons (hub-hero) ===== */
.hub-hero-copy .hero-badge .ico{ width:64px; height:64px; font-size:28px; }
.hub-hero-copy .hero-badge{ width:104px; }
.hub-hero-copy .hero-badge span{ font-size:13px; }
@media(max-width:768px){
  .hub-hero-copy .hero-badge .ico{ width:54px; height:54px; font-size:24px; }
}

/* ===== Why Choose card — icon-left rows in one white rounded card ===== */
.why-card{
  background:#fff; border:1px solid var(--line,#E6EAF0); border-radius:18px;
  box-shadow:0 8px 30px rgba(11,37,69,.06);
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:30px 18px;
}
.why-card{ align-items:start; padding:26px 14px; }
.why-col{
  display:flex; align-items:center; gap:14px;
  padding:2px 18px; border-right:1px solid var(--line,#E6EAF0);
}
.why-col:last-child{ border-right:0; }
.why-col .ico{
  flex:none; width:36px; height:36px; border-radius:0;
  display:flex; align-items:center; justify-content:center; font-size:32px;
  background:none; color:var(--orange,#FF6E02); line-height:1;
}
.why-col .why-txt{ flex:1; }
.why-col .why-txt h4{ margin:0 0 5px; font-size:16px; color:var(--ink,#0B2545); font-weight:700; line-height:1.4; }
.why-col .why-txt p{ margin:0; font-size:14px; line-height:1.5; color:var(--text,#3A4A5C); }
@media(max-width:900px){
  .why-card{ grid-template-columns:repeat(2,1fr); gap:8px 0; }
  .why-col:nth-child(2){ border-right:0; }
}
@media(max-width:560px){
  .why-card{ grid-template-columns:1fr; padding:18px; }
  .why-col{ border-right:0; border-bottom:1px solid var(--line,#E6EAF0); padding:16px 8px; }
  .why-col:last-child{ border-bottom:0; }
}

/* ===== Why Choose card — VERTICAL/centered variant (icon on top) ===== */
.why-card-v.whyv-5{ grid-template-columns:repeat(5,1fr); }
.why-card-v .why-col{ flex-direction:column; align-items:center; text-align:center; gap:12px; padding:8px 22px; }
.why-card-v .why-col .ico{ width:auto; height:auto; font-size:40px; }
.why-card-v .why-col .why-txt h4{ margin:0 0 6px; }
.why-card-v .why-col .why-txt p{ font-size:13.5px; }
@media(max-width:900px){
  .why-card-v.whyv-5{ grid-template-columns:repeat(2,1fr); gap:18px 0; }
  .why-card-v .why-col:nth-child(2){ border-right:0; }
}
@media(max-width:560px){
  .why-card-v.whyv-5{ grid-template-columns:1fr; }
  .why-card-v .why-col{ border-right:0; border-bottom:1px solid var(--line,#E6EAF0); padding:18px 8px; }
  .why-card-v .why-col:last-child{ border-bottom:0; }
}

/* ===== Joy Ride hero — script subhead + plane divider ===== */
/* ===== Joy Ride hero — script subhead + plane divider ===== */
.hub-hero-copy .hero-script{ font-family:'Brush Script MT','Segoe Script',cursive; font-style:italic; font-weight:600; font-size:clamp(26px,3.4vw,40px); line-height:1.1; color:var(--ink,#0B2545); margin:12px 0 0; }
.hub-hero-copy .hero-divider{ display:flex; align-items:center; gap:8px; margin:16px 0 6px; color:var(--orange,#FF6E02); }
.hub-hero-copy .hero-divider span{ width:230px; max-width:55%; height:2px; background:var(--orange,#FF6E02); display:block; }
.hub-hero-copy .hero-divider i{ font-size:16px; }

/* ===== Joy Ride CTA — fly-band with cockpit/pilot photo on the right ===== */
.fly-band-photo{
  background-size:cover; background-position:right center;
  padding-right:0; align-items:stretch;
}
/* navy gradient overlay: solid on the left, fading to transparent over the photo */
.fly-band-photo::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, #081B33 0%, #0B2545 48%, rgba(11,37,69,.85) 64%, rgba(11,37,69,0) 92%);
}
.fly-band-photo .fly-left,
.fly-band-photo .fly-feats{ position:relative; z-index:2; }
.fly-band-photo .fly-left{ padding:30px 0 30px 36px; }
.fly-band-photo .fly-feats{ padding:30px 36px 30px 0; gap:26px; }
.fly-band-photo .fly-feat i{ color:var(--orange,#FF6E02); font-size:26px; }
.fly-band-photo .fly-feat span{ color:#fff; font-size:13px; }
.fly-band-photo .fly-feat{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; position:relative; }
.fly-band-photo .fly-feat:not(:last-child)::after{ content:""; position:absolute; right:-13px; top:50%; transform:translateY(-50%); height:46px; width:1px; background:rgba(255,255,255,.22); }
@media(max-width:768px){
  .fly-band-photo{ background-image:none !important; }
  .fly-band-photo::before{ background:none; }
  .fly-band-photo .fly-feats{ padding:0 0 24px; justify-content:flex-start; }
  .fly-band-photo .fly-left{ padding:24px 0 0 0; }
}

/* ===== Joy Ride experience cards — image header with number badge ===== */
.ride-img{
  position:relative; height:200px;
  background-size:cover; background-position:center;
  border-radius:var(--radius) var(--radius) 0 0;
}
.ride-img .badge-pill{
  position:absolute; top:12px; left:12px;
  background:var(--orange,#FF6E02); color:#fff; font-weight:700;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
@media(max-width:768px){ .ride-img{ height:190px; } }

/* ===== Joy Ride CTA band — 22:3 wide banner ratio ===== */
.fly-band-photo{ aspect-ratio:22/3; min-height:0; padding:0; }
.fly-band-photo .fly-left{ display:flex; flex-direction:column; justify-content:center; }
@media(max-width:768px){ .fly-band-photo{ aspect-ratio:auto; padding:0 0 6px; } }

/* ===== Joy Ride CTA — keep ALL text/icons within left 60%, photo on right 40% ===== */
.fly-band-photo{ display:flex; align-items:stretch; flex-wrap:nowrap; }
.fly-band-photo > .fly-left,
.fly-band-photo > .fly-feats{ z-index:2; }
.fly-band-photo > .fly-left{ flex:0 0 32%; max-width:32%; padding:0 0 0 36px; }
.fly-band-photo > .fly-feats{ flex:0 0 28%; max-width:28%; padding:0 18px 0 0; justify-content:space-between; gap:14px; }
/* gradient: solid navy across left 60%, fading out over the right 40% photo */
.fly-band-photo::before{
  background:linear-gradient(90deg, #081B33 0%, #0B2545 50%, rgba(11,37,69,.9) 60%, rgba(11,37,69,0) 78%);
}
@media(max-width:768px){
  .fly-band-photo{ flex-wrap:wrap; }
  .fly-band-photo > .fly-left,
  .fly-band-photo > .fly-feats{ flex:1 1 100%; max-width:100%; padding-left:0; padding-right:0; }
}

/* ===== Joy Ride CTA — smaller content sizing ===== */
.fly-band-photo .fly-left h2{ font-size:20px; margin:0 0 4px; }
.fly-band-photo .fly-left p{ font-size:12.5px; margin:0 0 12px; }
.fly-band-photo .fly-left .btn{ font-size:12px; padding:9px 18px; }
.fly-band-photo .fly-feat i{ font-size:20px; }
.fly-band-photo .fly-feat span{ font-size:11px; }
.fly-band-photo .fly-feat:not(:last-child)::after{ height:34px; }

/* ===== Joy Ride CTA — use pre-composed band image (navy left baked in) ===== */
.fly-band-photo{ background-size:100% 100%; background-position:center; aspect-ratio:2200/300; }
.fly-band-photo::before{ display:none; }   /* image already has the navy fill + fade */
@media(max-width:768px){
  .fly-band-photo{ aspect-ratio:auto; background:linear-gradient(120deg,#081B33,#0B2545) !important; }
}

/* ===== Joy Ride CTA — compact icons, inline icon+label, tighter spacing ===== */
.fly-band-photo > .fly-feats{ flex:0 0 auto; max-width:none; gap:18px; padding-right:0; }
.fly-band-photo .fly-feat{ flex-direction:row; align-items:center; gap:7px; }
.fly-band-photo .fly-feat i{ font-size:16px; }
.fly-band-photo .fly-feat span{ font-size:11px; white-space:nowrap; }
.fly-band-photo .fly-feat:not(:last-child)::after{ right:-9px; height:20px; }

/* ===== Joy Ride CTA — clean single-row vertical centering ===== */
.fly-band-photo{ display:flex; align-items:center; flex-wrap:nowrap; }
.fly-band-photo > .fly-left{ flex:0 0 auto; max-width:42%; padding:0 0 0 40px; }
.fly-band-photo > .fly-left .fly-actions{ margin-top:14px; }
.fly-band-photo > .fly-feats{ flex:1 1 auto; max-width:none; justify-content:center; align-items:center; padding:0 130px 0 0; gap:22px; }
.fly-band-photo .fly-feat{ align-items:center; }

/* ===== Joy Ride CTA — icons packed next to button, bigger, 2-line labels ===== */
.fly-band-photo > .fly-feats{ flex:0 0 auto; justify-content:flex-start; padding:0 0 0 28px; gap:24px; }
.fly-band-photo .fly-feat{ flex-direction:column; align-items:center; gap:8px; text-align:center; width:78px; }
.fly-band-photo .fly-feat i{ font-size:24px; }
.fly-band-photo .fly-feat span{ font-size:12px; white-space:normal; line-height:1.25; }
.fly-band-photo .fly-feat:not(:last-child)::after{ right:-12px; top:50%; height:42px; }

/* ===== Fly Over gallery tiles — image with label overlay ===== */
.joy-gallery{ gap:16px; }
.gal-tile{
  position:relative; height:170px; border-radius:var(--radius);
  background-size:cover; background-position:center; overflow:hidden;
}
.gal-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,37,69,0) 45%,rgba(11,37,69,.78) 100%); }
.gal-tile span{ position:absolute; left:14px; bottom:12px; z-index:2; color:#fff; font-weight:700; font-size:15px; }
@media(max-width:768px){ .joy-gallery{ grid-template-columns:1fr 1fr !important; } .gal-tile{ height:150px; } }
@media(max-width:480px){ .joy-gallery{ grid-template-columns:1fr 1fr !important; } }

/* ===== Fly Over gallery tiles — 7:5 aspect ratio ===== */
.gal-tile{ height:auto; aspect-ratio:7/5; }

/* ===== Why-card 5-column variant (icon-left) ===== */
.why-card.whyc-5{ grid-template-columns:repeat(5,1fr); }
@media(max-width:900px){ .why-card.whyc-5{ grid-template-columns:repeat(2,1fr); gap:8px 0; } .why-card.whyc-5 .why-col:nth-child(2){ border-right:0; } }
@media(max-width:560px){ .why-card.whyc-5{ grid-template-columns:1fr; } .why-card.whyc-5 .why-col{ border-right:0; border-bottom:1px solid var(--line,#E6EAF0); padding:16px 8px; } .why-card.whyc-5 .why-col:last-child{ border-bottom:0; } }

/* ===== Why-card 5-col — tighter horizontal padding ===== */
.why-card.whyc-5{ padding:24px 10px; }
.why-card.whyc-5 .why-col{ padding:4px 14px; gap:12px; }

/* ===== Why-card 5-col — top-align icon with title, tighter spacing ===== */
.why-card.whyc-5{ padding:22px 6px; }
.why-card.whyc-5 .why-col{ align-items:flex-start; gap:11px; padding:4px 12px; }
.why-card.whyc-5 .why-col .ico{ margin-top:2px; }

/* ===== Why-card 5-col — heading 1 line, desc 2 lines, compact ===== */
.why-card.whyc-5{ padding:20px 4px; }
.why-card.whyc-5 .why-col{ align-items:flex-start; gap:9px; padding:4px 10px; }
.why-card.whyc-5 .why-col .ico{ font-size:26px; margin-top:1px; }
.why-card.whyc-5 .why-col .why-txt h4{ font-size:14.5px; white-space:nowrap; margin:0 0 4px; }
.why-card.whyc-5 .why-col .why-txt p{ font-size:12.5px; line-height:1.4; }
@media(max-width:900px){ .why-card.whyc-5 .why-col .why-txt h4{ white-space:normal; } }

/* ===== Why-card 5-col — vertically center icon with text ===== */
.why-card.whyc-5 .why-col{ align-items:center; }
.why-card.whyc-5 .why-col .ico{ margin-top:0; }

/* ===== Why-card 6-column variant (inherits whyc-5 styling) ===== */
.why-card.whyc-6{ grid-template-columns:repeat(6,1fr); padding:20px 4px; }
.why-card.whyc-6 .why-col{ align-items:center; gap:9px; padding:4px 9px; }
.why-card.whyc-6 .why-col .ico{ font-size:24px; }
.why-card.whyc-6 .why-col .why-txt h4{ font-size:13.5px; white-space:nowrap; margin:0 0 4px; }
.why-card.whyc-6 .why-col .why-txt p{ font-size:11.5px; line-height:1.4; }
@media(max-width:900px){ .why-card.whyc-6{ grid-template-columns:repeat(2,1fr); gap:10px 0; } .why-card.whyc-6 .why-col .why-txt h4{ white-space:normal; } .why-card.whyc-6 .why-col:nth-child(2){ border-right:0; } }
@media(max-width:560px){ .why-card.whyc-6{ grid-template-columns:1fr; } .why-card.whyc-6 .why-col{ border-right:0; border-bottom:1px solid var(--line,#E6EAF0); padding:14px 8px; } .why-card.whyc-6 .why-col:last-child{ border-bottom:0; } }

/* ===== Why-card 6-col → 3x2 layout (2 rows) ===== */
.why-card.whyc-6{ grid-template-columns:repeat(3,1fr); row-gap:22px; padding:26px 14px; }
.why-card.whyc-6 .why-col{ padding:6px 22px; }
.why-card.whyc-6 .why-col .why-txt h4{ white-space:normal; }
.why-card.whyc-6 .why-col:nth-child(3n){ border-right:0; }
.why-card.whyc-6 .why-col:nth-child(-n+3){ border-bottom:1px solid var(--line,#E6EAF0); padding-bottom:22px; }
@media(max-width:900px){
  .why-card.whyc-6{ grid-template-columns:repeat(2,1fr); row-gap:0; }
  .why-card.whyc-6 .why-col{ border-right:1px solid var(--line,#E6EAF0); border-bottom:0; padding:16px 18px; }
  .why-card.whyc-6 .why-col:nth-child(2n){ border-right:0; }            /* right column: no right border */
  .why-card.whyc-6 .why-col:nth-child(-n+4){ border-bottom:1px solid var(--line,#E6EAF0); }  /* first 2 rows: bottom border */
}
@media(max-width:560px){ .why-card.whyc-6{ grid-template-columns:1fr; } .why-card.whyc-6 .why-col{ border-right:0 !important; border-bottom:1px solid var(--line,#E6EAF0) !important; } .why-card.whyc-6 .why-col:last-child{ border-bottom:0 !important; } }

/* ===== Why-card 6-col — bigger icons ===== */
.why-card.whyc-6 .why-col .ico{ font-size:34px; }

/* ===== Why-card 6-col — bigger text ===== */
.why-card.whyc-6 .why-col .why-txt h4{ font-size:16px; }
.why-card.whyc-6 .why-col .why-txt p{ font-size:13.5px; }

/* ===== How It Works (icard g5) — bigger icons & text ===== */
.grid.g5 .icard .ico{ width:74px; height:74px; font-size:30px; }
.grid.g5 .icard h3{ font-size:19px !important; }
.grid.g5 .icard p{ font-size:15px; line-height:1.5; }
.grid.g5 .icard .badge-pill{ font-size:13px; }

/* ===== How It Works (icard g5) — titles on one line, tighter gap ===== */
.grid.g5{ gap:14px; }
.grid.g5 .icard{ padding-left:14px; padding-right:14px; }
.grid.g5 .icard h3{ white-space:nowrap; }
@media(max-width:768px){ .grid.g5 .icard h3{ white-space:normal; } }

/* ===== Air Ambulance hero badges — bigger icons ===== */
.page-hero .hero-badge .ico{ width:62px; height:62px; font-size:26px; }
.page-hero .hero-badge span{ font-size:13px; }
@media(max-width:480px){ .page-hero .hero-badge .ico{ width:52px; height:52px; font-size:22px; } }

/* ===== Air Ambulance service cards — image + overlapping icon badge ===== */
.svc-card{ background:#fff; border-radius:16px; box-shadow:0 8px 26px rgba(11,37,69,.07); overflow:visible; display:flex; flex-direction:column; }
.svc-card .svc-img{ position:relative; height:210px; background-size:cover; background-position:center; border-radius:16px 16px 0 0; }
/* badge sits ON the seam between the photo and the text body */
.svc-card .svc-badge{
  position:absolute; left:18px; top:210px; transform:translateY(-50%); z-index:2;
  width:52px; height:52px; border-radius:50%;
  background:var(--orange,#FF6E02); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  box-shadow:0 4px 12px rgba(255,110,2,.35); border:3px solid #fff;
}
.svc-card .svc-body{ padding:34px 22px 24px; }
.svc-card .svc-body h3{ margin:0 0 8px; font-size:19px; color:var(--ink,#0B2545); font-weight:700; }
.svc-card .svc-body p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--text,#3A4A5C); }
@media(max-width:900px){ .svc-card .svc-img{ height:190px; } .svc-card .svc-badge{ top:190px; } }

/* ===== tighter section spacing site-wide ===== */
section{ padding:36px 0; }
@media(max-width:768px){ section{ padding:28px 0; } }

/* ===== Air Ambulance CTA band — full image (navy baked in) ===== */
.cta-band-photo{
  background-size:100% 100%; background-position:center; aspect-ratio:2600/500;
  border-radius:16px; padding:0; display:flex; align-items:center; overflow:hidden;
}
.cta-band-photo .cta-photo-copy{ max-width:52%; padding-left:46px; }
.cta-band-photo .cta-photo-copy h2{ color:#fff; margin:0 0 6px; }
.cta-band-photo .cta-photo-copy h2 span{ color:var(--orange,#FF6E02); }
.cta-band-photo .cta-photo-copy p{ color:rgba(255,255,255,.88); margin:0 0 16px; }
.cta-band-photo .hero-actions{ gap:12px; flex-wrap:wrap; }
@media(max-width:768px){
  .cta-band-photo{ aspect-ratio:auto; background:linear-gradient(120deg,#081B33,#0B2545) !important; padding:26px 20px; }
  .cta-band-photo .cta-photo-copy{ max-width:100%; padding-left:0; }
}

/* ===== CTA band photo — heading one line ===== */
.cta-band-photo .cta-photo-copy{ max-width:62%; }
.cta-band-photo .cta-photo-copy h2{ white-space:nowrap; font-size:clamp(20px,2.3vw,30px); }
@media(max-width:768px){ .cta-band-photo .cta-photo-copy h2{ white-space:normal; font-size:22px; } }

/* ===== CTA band photo — vertically center & balance copy ===== */
.cta-band-photo{ align-items:center; aspect-ratio:2600/412; }
.cta-band-photo .cta-photo-copy{ display:flex; flex-direction:column; justify-content:center; }

/* ===== svc-card as clickable link (Sea Services) ===== */
a.svc-card.svc-link{ text-decoration:none; color:inherit; display:flex; flex-direction:column; }
a.svc-card.svc-link .svc-body{ display:flex; flex-direction:column; flex:1 1 auto; }
a.svc-card.svc-link .svc-body h3{ color:var(--ink); }
a.svc-card.svc-link .svc-body p{ color:var(--text); flex:1 1 auto; }
a.svc-card.svc-link .btn{ margin-top:auto; align-self:flex-start; }

/* ===== Sea Services svc-card: force buttons into one row ===== */
.grid.g3 a.svc-card.svc-link{ height:100%; }
.grid.g3 a.svc-card.svc-link .svc-img{ height:200px; flex:none; }
.grid.g3 a.svc-card.svc-link .svc-body{ display:flex; flex-direction:column; flex:1 1 auto; }
.grid.g3 a.svc-card.svc-link .svc-body p{ flex:1 1 auto; margin-bottom:16px; }
.grid.g3 a.svc-card.svc-link .svc-body .btn{ margin-top:0; align-self:flex-start; }

/* ===== Sea Fleet Highlights tiles ===== */
.fleet-tile{ position:relative; background-size:cover; background-position:center; aspect-ratio:3/2; border-radius:14px; overflow:hidden; display:flex; align-items:flex-end; }
.fleet-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,27,51,.78) 0%, rgba(8,27,51,.15) 55%, rgba(8,27,51,0) 100%); }
.fleet-tile .fleet-label{ position:relative; z-index:1; color:#fff; font-weight:700; font-size:12.5px; line-height:1.25; padding:12px 14px; }

/* ===== Sea Hub CTA band — short ratio: smaller, tighter, aligned ===== */
.cta-band-photo[style*="2350/300"] .cta-photo-copy{ max-width:64%; padding:0 0 0 40px; }
.cta-band-photo[style*="2350/300"] .cta-photo-copy h2{ font-size:clamp(18px,1.9vw,26px); margin-bottom:5px; }
.cta-band-photo[style*="2350/300"] .cta-photo-copy p{ font-size:13.5px; line-height:1.4; margin:0 0 12px; }
.cta-band-photo[style*="2350/300"] .hero-actions{ gap:10px; align-items:center; }
.cta-band-photo[style*="2350/300"] .hero-actions .btn{ padding:9px 18px; font-size:12.5px; }
@media(max-width:768px){
  .cta-band-photo[style*="2350/300"] .cta-photo-copy{ max-width:100%; padding-left:0; }
  .cta-band-photo[style*="2350/300"] .cta-photo-copy h2{ font-size:21px; }
}

/* ===== hide "IMAGE" placeholder label on .ph tiles that have a real background ===== */
.ph[style*="background-image"]::after{ display:none !important; }

/* ===== wide section heading — keep on one line (MV Hayathi) ===== */
.sec-head.sec-head-wide{ max-width:1000px; }
.sec-head.sec-head-wide h2{ white-space:nowrap; font-size:clamp(26px,3.4vw,38px); }
@media(max-width:760px){ .sec-head.sec-head-wide h2{ white-space:normal; font-size:24px; } }

/* ===== Home promo CTA cards — no background photo, clean & aligned ===== */
.promo-clean{
  padding:0 !important; position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--line,#E6EAF0); border-radius:var(--radius,16px);
  display:flex; align-items:stretch;
}
.promo-clean .promo-body{
  width:100%; padding:34px 32px;
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
}
.promo-clean .promo-body h3{ color:var(--ink,#0B2545); font-size:23px; line-height:1.25; margin-bottom:12px; }
.promo-clean .promo-body p{ color:var(--text,#3A4A5C); font-size:14.5px; line-height:1.6; margin-bottom:20px; max-width:90%; }
.promo-clean .promo-body .text-orange{ color:var(--orange); }
.promo-clean .promo-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:auto; }
.promo-clean .promo-pillars{ display:flex; gap:22px; flex-wrap:wrap; margin:6px 0 22px; }
.promo-clean .pillar{ display:flex; flex-direction:column; align-items:center; gap:7px; font-size:12px; color:var(--text,#3A4A5C); text-align:center; min-width:54px; }
.promo-clean .pillar i{ font-size:24px; color:var(--orange); }
.promo-clean .btn{ margin-top:auto; }

/* ===== Yacht "Experience We Offer" — photo cards w/ icon badge (3x2) ===== */
.exp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px 24px; }
.exp-card{ position:relative; background:#fff; border-radius:18px; box-shadow:0 6px 22px rgba(11,37,69,.08); padding-bottom:58px; }
.exp-img{ height:200px; background-size:cover; background-position:center; border-radius:18px 18px 0 0; }
.exp-badge{
  position:absolute; left:22px; top:178px; width:48px; height:48px; border-radius:50%;
  background:var(--navy,#0B2545); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:20px; box-shadow:0 4px 12px rgba(11,37,69,.28); z-index:2;
}
.exp-title{ text-align:center; color:var(--navy,#0B2545); font-weight:700; font-size:16px; line-height:1.3; padding:30px 12px 0; }
@media(max-width:900px){ .exp-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .exp-grid{ grid-template-columns:1fr; } .exp-img{ height:210px; } }

/* ===== Shipping Process flow — single arrow between steps ===== */
.feature-row.process-flow .feature-cell{ position:relative; border-right:0 !important; }
.feature-row.process-flow .feature-cell:not(:last-child)::after{
  content:"\f061";                      /* fa arrow-right */
  font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; right:-10px; top:50%; transform:translateY(-50%);
  margin-top:-14px;                      /* align with the icon row, above the label */
  font-size:18px; color:var(--orange,#FF6E02); line-height:1; z-index:2;
}
@media(max-width:768px){
  .feature-row.process-flow .feature-cell:not(:last-child)::after{ display:none; }
}

/* ===== Marine Cargo hero badges — even 3-column grid (3x2) ===== */
.hero-badges.badges-3col{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px 14px; }
.hero-badges.badges-3col .hero-badge{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
@media(max-width:560px){ .hero-badges.badges-3col{ grid-template-columns:repeat(2,1fr); } }

/* ===== Investors hero — full-width multimodal banner ===== */
/* full-bleed: break out of .container to true viewport width */
.inv-hero-banner{
  position:relative;
  width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  aspect-ratio:2600/587; min-height:380px;
  background-size:cover; background-position:center center; background-repeat:no-repeat;
  overflow:hidden; display:flex; align-items:center;
  margin-top:0;
}
.inv-hero-banner .inv-hero-scrim{ display:none; }
.inv-hero-banner .inv-hero-copy{
  position:relative; z-index:2; box-sizing:border-box;
  width:min(560px,50%);
  margin-left:max(40px, calc((100vw - 1240px)/2 + 4px));
  padding:0 20px 0 0;
}
.inv-hero-banner .inv-hero-copy .eyebrow{ color:var(--orange,#FF6E02); font-weight:700; letter-spacing:.5px; margin:0 0 8px; font-size:13px; }
.inv-hero-banner .inv-hero-copy h1{ color:var(--ink,#0B2545); font-weight:800; font-size:clamp(30px,3vw,42px); line-height:1.14; letter-spacing:-.3px; margin:0 0 14px; padding-bottom:14px; position:relative; }
.inv-hero-banner .inv-hero-copy h1::after{ content:""; position:absolute; left:0; bottom:0; width:54px; height:4px; border-radius:3px; background:var(--orange,#FF6E02); }
.inv-hero-banner .inv-hero-copy h1 .asl{ color:var(--orange,#FF6E02); white-space:nowrap; }
.inv-hero-banner .inv-hero-copy .sub{ color:var(--text,#3A4A5C); font-size:15px; line-height:1.65; margin:0 0 18px; }
@media(max-width:768px){
  .inv-hero-banner{ aspect-ratio:auto; background:none !important; min-height:0; }
  .inv-hero-banner .inv-hero-scrim{ display:none; }
  .inv-hero-banner .inv-hero-copy{ width:100%; padding:0; }
}

/* ===== Careers — Life At air16 photo tiles ===== */
.life-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.life-tile{ border-radius:14px; overflow:hidden; box-shadow:0 4px 16px rgba(11,37,69,.08); }
.life-img{ aspect-ratio:1/1; background-size:cover; background-position:center; }
.life-label{ text-align:center; font-size:12px; font-weight:600; color:var(--navy,#0B2545); padding:10px 6px; background:#fff; }
@media(max-width:768px){ .life-grid{ grid-template-columns:repeat(3,1fr) !important; } }
@media(max-width:480px){ .life-grid{ grid-template-columns:repeat(2,1fr) !important; } }

/* ===== tighter row gap for svc-card grids (Why Join air16, Sea Services) ===== */
.grid.g3:has(.svc-card){ row-gap:24px; column-gap:24px; }

/* ===== Careers: stat bar overlaps the hero banner (straddles the seam) ===== */
.hub-hero-full + .container{ margin-top:-44px; position:relative; z-index:5; margin-bottom:10px; }
@media(max-width:768px){ .hub-hero-full + .container{ margin-top:0; } }

/* ===== About page: stat bar overlaps the hero (straddles the seam) ===== */
body.about-page .page-hero{ padding-bottom:0; }
body.about-page .page-hero + section.soft-bg{ background:transparent; padding-top:0; padding-bottom:34px; }
body.about-page .page-hero + section.soft-bg .container{ margin-top:-46px; position:relative; z-index:5; }
body.about-page .page-hero + section.soft-bg .stat-bar.light{ background:var(--navy); box-shadow:0 16px 40px rgba(11,37,69,.22); }
body.about-page .page-hero + section.soft-bg .stat-bar.light .num{ color:#fff; }
body.about-page .page-hero + section.soft-bg .stat-bar.light .lbl{ color:rgba(255,255,255,.85); }
body.about-page .page-hero + section.soft-bg .stat-bar.light .ico{ color:var(--orange); }
@media(max-width:900px){
  body.about-page .page-hero + section.soft-bg{ padding-top:24px; }
  body.about-page .page-hero + section.soft-bg .container{ margin-top:0; }
}

/* ===== Marine Cargo: Global Shipping Network — bigger, aligned ===== */
.gsn .split-2{ align-items:center; gap:48px; }
.gsn-copy h2{ font-size:clamp(28px,3vw,40px); line-height:1.15; }
.gsn-copy .lead-muted{ font-size:16px; line-height:1.6; max-width:520px; }
.gsn-list li{ align-items:center; gap:14px; margin-bottom:18px; font-size:16.5px; }
.gsn-list .tick{ width:40px; height:40px; flex:none; border-radius:50%; background:var(--orange-tint,#FFE7D2); color:var(--orange); display:grid; place-items:center; font-size:17px; margin-top:0; }
.gsn-list .gsn-txt{ line-height:1.4; }
.gsn-list .gsn-txt b{ color:var(--navy,#0B2545); }
@media(max-width:768px){
  .gsn .split-2{ gap:28px; }
  .gsn-list li{ font-size:15px; }
}

/* Global Shipping Network — image on the right */
.gsn-img{ border-radius:16px; overflow:hidden; box-shadow:0 14px 40px rgba(11,37,69,.18); }
.gsn-img img{ width:100%; height:100%; min-height:300px; object-fit:cover; display:block; }
@media(max-width:768px){ .gsn-img img{ min-height:220px; } }

/* ===== Cargo Types We Handle — image tiles ===== */
.cargotype-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cargotype-tile{ position:relative; aspect-ratio:4/3; border-radius:14px; overflow:hidden; background-size:cover; background-position:center; box-shadow:0 8px 26px rgba(11,37,69,.10); display:flex; align-items:flex-end; }
.cargotype-tile::after{ display:none; }
.cargotype-tile .ct-label{ position:relative; z-index:1; color:#fff; font-weight:700; font-size:15px; line-height:1.2; margin:14px; padding:8px 14px; background:var(--navy,#0B2545); border-radius:8px; box-shadow:0 4px 12px rgba(11,37,69,.3); }
@media(max-width:900px){ .cargotype-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .cargotype-grid{ grid-template-columns:1fr; } .cargotype-tile .ct-label{ font-size:15px; } }

/* ============================================================
   MOBILE HERO + BAND OVERLAP FIX (v256)
   Root cause: inline aspect-ratio:2200/600 on .hub-hero-full
   sections squashes them on phones, so H1/badges overflow onto
   the next section. Inline styles beat the stylesheet, so we
   override with !important and rebuild a safe stacked hero.
   ============================================================ */
@media(max-width:768px){

  /* 1) Full-width hero: ignore the inline 2200/600 ratio, become a
        normal-height block with the banner as a soft background. */
  .hub-hero.hub-hero-full,
  section.hub-hero.hub-hero-full{
    aspect-ratio:auto !important;
    min-height:auto !important;
    background-size:cover !important;
    background-position:center !important;
    padding:34px 0 !important;
    display:block !important;
    overflow:hidden;
  }

  /* white veil so dark heading text stays readable over the photo */
  .hub-hero-full .hub-hero-scrim{
    display:block !important;
    position:absolute; inset:0; z-index:1;
    background:rgba(255,255,255,.86) !important;
  }
  .hub-hero-full .hub-hero-inner{ position:relative; z-index:2; }

  /* 2) Heading + copy: full width, never clipped, normal flow */
  .hub-hero-copy{ max-width:100% !important; }
  .hub-hero-copy h1{
    font-size:30px !important; line-height:1.12 !important;
    letter-spacing:-.5px !important; word-break:break-word;
  }
  .hub-hero-copy h3{ font-size:17px !important; line-height:1.3 !important; }
  .hub-hero-copy .lead{ font-size:14.5px !important; }

  /* 3) Hero badge row (e.g. Marine Cargo 6 icons): clean 3-col grid,
        no overlap, sits below the heading in the white veil. */
  .hub-hero-copy .hero-badges,
  .hub-hero-copy .hero-badges.badges-3col{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:14px 6px !important; margin:14px 0 8px !important;
  }
  .hub-hero-copy .hero-badge{ width:auto !important; }
  .hub-hero-copy .hero-badge span{ font-size:11.5px !important; }

  /* 4) split-2 hero (Contact/About): force single column so the
        text never sits on top of the image. */
  .split-2, .split-2.hero-split{ grid-template-columns:1fr !important; gap:20px !important; }
  .split-2 > div:first-child{ padding:0 !important; }

  /* 5) Photo CTA band (Air Ambulance "When every second counts"):
        constrain copy, add scrim so it doesn't collide / clip. */
  .cta-band.cta-band-photo{ padding:28px 22px !important; }
  .cta-band-photo .cta-photo-copy{ max-width:100% !important; }
  .cta-band-photo .cta-photo-copy h2{ font-size:24px !important; line-height:1.18 !important; }

  /* 6) Safety: any section that still carries an inline aspect-ratio
        should not clip its contents on mobile. */
  section[style*="aspect-ratio"]{ aspect-ratio:auto !important; }
}

/* ============================================================
   v257 — extend hero fix to PLAIN .hub-hero (air-charter, air-hub)
   These have min-height:440px and badges that float over the
   right-side photo on mobile. Give them the same scrim + grid
   treatment so badge labels never overlap the image.
   ============================================================ */
@media(max-width:768px){
  .hub-hero{
    min-height:auto !important;
    padding:34px 0 !important;
    background-position:center !important;
    background-size:cover !important;
    display:block !important;
    overflow:hidden;
  }
  .hub-hero .hub-hero-scrim{
    display:block !important;
    position:absolute; inset:0; z-index:1;
    background:rgba(255,255,255,.86) !important;
  }
  .hub-hero .hub-hero-inner{ position:relative; z-index:2; }

  /* badge row -> clean grid (2 cols default, 3 cols if many) */
  .hub-hero .hub-hero-copy .hero-badges{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:16px 10px !important; margin:16px 0 8px !important;
  }
  .hub-hero .hub-hero-copy .hero-badges.badges-3col{
    grid-template-columns:repeat(3,1fr) !important;
  }
  .hub-hero .hub-hero-copy .hero-badge{ width:auto !important; }
  .hub-hero .hub-hero-copy .hero-badge span{ font-size:12px !important; line-height:1.25 !important; }

  /* hero action buttons full-width stack so they don't crowd */
  .hub-hero .hub-hero-copy .hero-actions{ flex-direction:column; align-items:stretch; gap:10px; }
  .hub-hero .hub-hero-copy .hero-actions .btn{ width:100%; justify-content:center; }
}

/* ============================================================
   v258 — FIX: .cta-band-photo collapses to ~60px on mobile.
   A later base rule re-sets aspect-ratio:2600/412 which, at
   phone width, forces the band ~60px tall and clips the
   heading/subtext/buttons (e.g. Air Ambulance "When every
   second counts"). Kill the ratio on mobile so it grows to
   fit content. This block is last in the cascade -> wins.
   ============================================================ */
@media(max-width:768px){
  .cta-band-photo{
    aspect-ratio:auto !important;
    height:auto !important;
    min-height:0 !important;
    display:block !important;
    overflow:visible !important;
    padding:26px 20px !important;
    background:linear-gradient(120deg,#081B33,#0B2545) !important;
  }
  .cta-band-photo .cta-photo-copy{
    max-width:100% !important; padding-left:0 !important;
    display:block !important;
  }
  .cta-band-photo .cta-photo-copy h2{
    white-space:normal !important; font-size:22px !important; line-height:1.2 !important;
  }
  .cta-band-photo .hero-actions{ flex-direction:column; align-items:stretch; }
  .cta-band-photo .hero-actions .btn{ width:100%; justify-content:center; }
}

/* ============================================================
   v259 — FIX: .promo-leftbg ("Building The Future" / "Join the
   air16 Family") clipped + text over photo on mobile. Drop the
   aspect-ratio, show the card's bg photo as a top strip, drop a
   solid white body below it. Verified at 414px. Last -> wins.
   ============================================================ */
@media(max-width:768px){
  .promo-leftbg{
    aspect-ratio:auto !important; height:auto !important; min-height:0 !important;
    display:block !important; overflow:hidden !important;
    background-size:cover !important; background-position:right bottom !important;
    background-repeat:no-repeat !important; border-radius:14px !important;
    border:1px solid var(--line,#E6EAF0);
  }
  .promo-leftbg::before, .promo-leftbg::after{ display:none !important; }
  .promo-leftbg .promo-body{
    position:relative !important; z-index:2 !important; width:100% !important;
    margin-top:210px !important; background:#fff !important;
    padding:18px !important; border-radius:14px 14px 0 0;
  }
  .promo-leftbg .promo-pillars{ flex-wrap:wrap !important; gap:10px 8px !important; }
}

/* ============================================================
   v260 — FIX investors hero clip + horizontal overflow.
   .inv-hero-banner had inline aspect-ratio:2600/587 (beats the
   stylesheet) -> collapses to ~93px and clips the hero copy.
   Its width:100vw + margin:-50vw full-bleed also causes an
   ~8px horizontal scrollbar (100vw counts the scrollbar).
   Force aspect-ratio off and contain width on mobile.
   ============================================================ */
@media(max-width:768px){
  .inv-hero-banner{
    aspect-ratio:auto !important;
    min-height:0 !important;
    height:auto !important;
    background:none !important;          /* show copy on white, image was decorative */
    width:100% !important;
    left:auto !important; right:auto !important;
    margin-left:0 !important; margin-right:0 !important;
    display:block !important; overflow:visible !important;
    padding:24px 0 8px !important;
  }
  .inv-hero-banner .inv-hero-copy{ width:100% !important; margin-left:0 !important; padding:0 !important; }
}
/* Global safety: kill any full-bleed 100vw horizontal overflow on mobile */
@media(max-width:768px){
  html,body{ overflow-x:hidden !important; }
  [style*="100vw"], .inv-hero-banner{ max-width:100% !important; }
}

/* ============================================================
   v260b — FIX gallery tiles overflow (~8-23px) on mobile.
   .gallery-grid .ph had aspect-ratio:4/3 + min-height:160px,
   so width was computed from height (160*4/3=213px) and blew
   past the 174px grid column -> horizontal scroll. Force the
   tile to fill its column; let height follow from the ratio.
   ============================================================ */
.gallery-grid .ph, .gallery-grid > .ph{
  width:100% !important;
  min-height:0 !important;
}
@media(max-width:560px){
  .gallery-grid .ph{ aspect-ratio:4/3 !important; }
}

/* ============================================================
   v260c — Careers jobs-table: make horizontal-scroll table
   readable on mobile (keep scroll, add subtle affordance,
   prevent it from feeling broken).
   ============================================================ */
@media(max-width:768px){
  .jobs-table{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; border-radius:12px; }
  .jobs-table table{ min-width:560px; }
}

/* ============================================================
   v262 — READABILITY: enforce a minimum legible text size on
   mobile. QA agent flagged 9px pillar labels and 10.5px smalls.
   Bump sub-11px UI text to a readable floor.
   ============================================================ */
@media(max-width:768px){
  /* promo card pillar labels were 9px -> bump */
  .promo-leftbg .pillar, .promo-split .pillar,
  .promo-leftbg .pillar span, .promo-split .pillar span{ font-size:11px !important; line-height:1.25 !important; }
  .promo-leftbg .pillar i, .promo-split .pillar i{ font-size:18px !important; }
  /* tiny inline smalls (e.g. "(Selected Buses)") */
  small{ font-size:12px !important; }
  /* generic guard: any element explicitly sized below 11px gets nudged up,
     except icon-only / brand sublabels which we keep intentional */
}

/* ============================================================
   v262b — TAP TARGETS: footer nav links were ~19px tall on
   mobile (below comfortable tap size). Add vertical padding so
   each link is ~36-40px tall without changing visual density
   much. Improves mobile usability flagged by QA.
   ============================================================ */
@media(max-width:768px){
  .site-footer ul li a, footer ul li a{
    display:inline-block; padding:8px 0; line-height:1.2; font-size:14px !important;
  }
  .site-footer ul li, footer ul li{ margin:0 !important; }
}

/* ============================================================
   v263 — VISUAL QA fixes (page-by-page review at 414px)
   ------------------------------------------------------------
   HOME: the stats card was pulled up -46px to straddle the
   hero seam (desktop look), but on mobile it makes the hero
   image look hard-cut. Let the hero image end cleanly and sit
   the stats card just below with normal spacing.
   ============================================================ */
@media(max-width:768px){
  .home-hero + .container{ margin-top:16px !important; }
  .home-hero{ min-height:auto !important; }
  /* ensure hero copy has comfortable breathing room top+bottom */
  .home-hero-copy{ padding:46px 0 40px !important; }
}

/* ------------------------------------------------------------
   v263b — HERO SEAM: hub-hero-full & home-hero background
   images ended in a hard horizontal line on mobile (looked
   cut off). Add a soft fade-to-white at the bottom so the
   image blends into the content below instead of a hard edge.
   ------------------------------------------------------------ */
@media(max-width:768px){
  .hub-hero.hub-hero-full{ position:relative; }
  .hub-hero.hub-hero-full::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:90px;
    background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 100%);
    z-index:1; pointer-events:none;
  }
}

/* ------------------------------------------------------------
   v263c — Stacked hero buttons (e.g. About: CONTACT US +
   INVESTORS) were touching with no gap. Enforce a clear gap
   and consistent sizing whenever hero-actions stack on mobile.
   ------------------------------------------------------------ */
@media(max-width:768px){
  .hero-actions{ display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:12px !important; }
  .hero-actions .btn{ width:100% !important; margin:0 !important; justify-content:center; }
}

/* ============================================================
   v264 — Nothing Phone / narrow-screen fixes
   ------------------------------------------------------------
   1) MENU BAR getting cut: give the header comfortable side
      padding and pull the hamburger in from the very edge so
      it isn't clipped by rounded corners / gesture areas.
   ============================================================ */
@media(max-width:1024px){
  .site-header .container.nav{ padding-left:16px !important; padding-right:16px !important; }
  .nav-right{ right:12px !important; }
  .nav-toggle{ display:block; padding:8px; margin:-8px -4px -8px 0; font-size:24px; line-height:1; }
}
@media(max-width:420px){
  .nav-right{ right:10px !important; }
  .brand .logo-img, .brand-lockup .logo-img{ height:30px; }
}

/* ------------------------------------------------------------
   2) HOME "Our Fleet & Experiences": horizontal scroll on
      mobile only (was a 6-up grid). Snappy, hidden scrollbar.
   ------------------------------------------------------------ */
@media(max-width:768px){
  .fleet-scroll{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto;
    gap:14px;
    scroll-snap-type:x mandatory;
    -ms-overflow-style:none; scrollbar-width:none;
    padding:4px 2px 8px;
    margin:0 -2px;
  }
  .fleet-scroll::-webkit-scrollbar{ display:none; }
  .fleet-scroll > .sq-img{
    flex:0 0 78%;            /* ~1.3 cards visible -> clearly scrollable */
    width:78%;
    scroll-snap-align:start;
    aspect-ratio:4/3;
    object-fit:cover;
    object-position:right bottom;   /* keep main subject visible */
    border-radius:14px;
  }
}

/* ============================================================
   v265 — CONTACT "Get In Touch" icon alignment.
   Each .info-row icon was vertically centered against the whole
   (multi-line) text block, so on Email/Office/Support rows the
   icon floated in the middle. Align icons to the TOP so they
   sit beside the heading line.
   ============================================================ */
.info-row{ align-items:flex-start !important; }
.info-row .ico{ flex:none; margin-top:2px; }
.info-row .t{ line-height:1.25; }
.info-row .d{ line-height:1.45; }

/* ------------------------------------------------------------
   v265b — CONTACT info-card was rendering with padding:0 on
   mobile, so the heading + icons touched the card border.
   Restore comfortable internal padding.
   ------------------------------------------------------------ */
@media(max-width:768px){
  /* card padding was being overridden to 0; pad the children directly */
  .info-card > *{ margin-left:18px !important; margin-right:18px !important; }
  .info-card{ padding-top:22px !important; padding-bottom:22px !important; }
}

/* ============================================================
   v266 — MOBILE: all hero banner images positioned 65% toward the right so the
   image is balanced/centered on narrow screens and stays
   visible on narrow screens.
   ============================================================ */
@media(max-width:768px){
  section.hub-hero, section.hub-hero.hub-hero-full,
  .hub-hero, .hub-hero.hub-hero-full{ background-position:65% top !important; }
  body .home-hero .home-hero-bg{ object-position:65% center !important; }
  section.inv-hero-banner, .inv-hero-banner{ background-position:65% center !important; }
  section.land-hero, .land-hero, section.bus-hero, .bus-hero{ background-position:65% center !important; }
  .page-hero .hero-media img.hero-img, .hero-media img.hero-img{ object-position:65% center !important; }
  /* any hero section carrying an inline background-image */
  section[class*="hero"][style*="background-image"]{ background-position:65% center !important; }
}

/* ============================================================
   v267 — PROFESSIONAL MOBILE FOOTER
   Clean, centered brand block + tidy 2-col link grid with
   dividers + clear contact block + centered bottom bar.
   ============================================================ */
@media(max-width:768px){
  .site-footer{ padding:36px 0 0 !important; }
  .site-footer .container{ padding:0 22px; }

  /* ---- brand block: centered, with a divider under it ---- */
  .footer-grid{
    grid-template-columns:1fr 1fr !important;
    gap:26px 22px !important;
    text-align:left !important;
    padding-bottom:26px !important;
  }
  .footer-brand{
    grid-column:1 / -1 !important;
    text-align:center !important;
    padding-bottom:24px !important;
    margin-bottom:6px !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
  }
  .footer-brand .footer-logo-img{ height:38px !important; margin:0 auto 12px !important; }
  .footer-brand p{ font-size:13px !important; line-height:1.6 !important; max-width:340px; margin:0 auto 10px !important; color:rgba(255,255,255,.72) !important; }
  .footer-brand .footer-tag{ color:var(--orange,#FF6E02) !important; font-weight:700 !important; font-size:13px !important; margin:8px auto 14px !important; }

  /* ---- social icons: centered, circular, even ---- */
  .footer-brand .socials{ justify-content:center !important; display:flex !important; gap:12px !important; margin:0 auto !important; }
  .footer-brand .socials a{
    width:38px; height:38px; border-radius:50%;
    display:grid; place-items:center;
    background:rgba(255,255,255,.08); color:#fff !important;
    transition:background .2s,transform .2s;
  }
  .footer-brand .socials a:hover{ background:var(--orange,#FF6E02); transform:translateY(-2px); }

  /* ---- link columns: clean headings + tappable links ---- */
  .footer-grid > div:not(.footer-brand) h4{
    font-size:12px !important; letter-spacing:.12em !important; text-transform:uppercase !important;
    color:var(--orange,#FF6E02) !important; margin:0 0 12px !important; font-weight:700 !important;
  }
  .footer-grid > div:not(.footer-brand) ul li{ margin:0 !important; }
  .footer-grid > div:not(.footer-brand) ul li a{
    display:block; padding:7px 0; font-size:13.5px !important;
    color:rgba(255,255,255,.80) !important; line-height:1.3;
  }
  .footer-grid > div:not(.footer-brand) ul li a:hover{ color:#fff !important; }

  /* ---- Contact Us: full width, dividered, readable ---- */
  .footer-grid > div:has(.footer-contact){
    grid-column:1 / -1 !important;
    border-top:1px solid rgba(255,255,255,.12) !important;
    padding-top:22px !important; margin-top:4px !important;
  }
  .footer-contact li{
    display:flex !important; align-items:flex-start !important; gap:10px !important;
    margin-bottom:12px !important; font-size:13px !important; line-height:1.5 !important;
    color:rgba(255,255,255,.78) !important;
  }
  .footer-contact li .ico{ color:var(--orange,#FF6E02) !important; margin-top:3px; flex:none; width:16px; text-align:center; }

  /* ---- bottom bar: centered, stacked, subtle ---- */
  .footer-bottom{
    flex-direction:column !important; align-items:center !important; text-align:center !important;
    gap:8px !important; padding:16px 0 !important; font-size:12px !important;
    border-top:1px solid rgba(255,255,255,.12) !important;
    color:rgba(255,255,255,.6) !important;
  }
  .footer-bottom .links{ display:flex; gap:18px; justify-content:center; }
  .footer-bottom .links a{ color:rgba(255,255,255,.75) !important; }
  .footer-bottom .links a:hover{ color:#fff !important; }
}

/* ============================================================
   v268 — AIR HUB (and other hub-hero) hero badges: center the
   4-icon grid instead of left-aligning it.
   ============================================================ */
@media(max-width:768px){
  .hub-hero .hub-hero-copy .hero-badges,
  .hub-hero-copy .hero-badges,
  .hub-hero-copy .hero-badges.badges-3col{
    justify-items:center !important;
    justify-content:center !important;
    margin-left:auto !important; margin-right:auto !important;
  }
  .hub-hero-copy .hero-badge{ margin-left:auto !important; margin-right:auto !important; }
}

/* ------------------------------------------------------------
   v268b — gap between hero badges and the hero action button
   ------------------------------------------------------------ */
@media(max-width:768px){
  .hub-hero-copy .hero-badges{ margin-bottom:50px !important; }
  .hub-hero-copy .hero-actions{ margin-top:14px !important; }
}

/* ============================================================
   v269 — STAT-BAR alignment on mobile: items were center-
   aligned so rows with wrapping labels (e.g. "World Class")
   went out of line. Make them top + left aligned with equal
   row heights so the 2-col grid reads as a straight grid.
   ============================================================ */
@media(max-width:768px){
  .stat-bar, .stat-bar.light{ align-items:start !important; }
  .stat-bar .stat-item{
    align-items:flex-start !important;
    justify-content:flex-start !important;
    text-align:left !important;
  }
  .stat-bar .stat-item .ico{ margin-top:2px; }
  .stat-bar .stat-item .stat-text{ align-items:flex-start !important; }
  .stat-bar .stat-item .num{ line-height:1.15 !important; }
  .stat-bar .stat-item .lbl{ line-height:1.25 !important; }
}

/* ============================================================
   v270 — MOBILE: fixed (pinned) top bar. Header stays put on
   scroll; body gets top padding so content isn't hidden under
   the 74px-tall fixed header.
   ============================================================ */
@media(max-width:1024px){
  .site-header{ position:fixed !important; top:0; left:0; right:0; width:100%; z-index:1000 !important; }
  body{ padding-top:74px !important; }
  /* keep the open mobile menu anchored right below the fixed bar */
  .nav-menu.open{ top:74px !important; }
}

/* ============================================================
   v271 — "Why Choose" card: make icons + text a bit bigger
   and roomier on mobile for better readability.
   ============================================================ */
@media(max-width:768px){
  .why-card{ padding:24px 18px !important; }
  .why-col{ gap:16px !important; padding:18px 6px !important; }
  .why-col .ico{ font-size:38px !important; width:auto !important; height:auto !important; }
  .why-col .why-txt h4{ font-size:18px !important; margin:0 0 6px !important; }
  .why-col .why-txt p{ font-size:15px !important; line-height:1.55 !important; }
}

/* ============================================================
   v272 — "Why Choose ... Joy Ride?" (.why-card-v.whyv-5):
   2 per row (3 rows) on mobile instead of 1 column.
   ============================================================ */
@media(max-width:560px){
  .why-card-v.whyv-5{ grid-template-columns:repeat(2,1fr) !important; gap:16px 12px !important; }
  .why-card-v .why-col{ border:0 !important; padding:12px 8px !important; }
}
@media(max-width:768px){
  .why-card-v.whyv-5{ grid-template-columns:repeat(2,1fr) !important; gap:18px 12px !important; }
  .why-card-v .why-col{ border-right:0 !important; }
}

/* ============================================================
   v273 — Joy Ride "Ready to Feel the Freedom?" CTA (.fly-band):
   on mobile the features were squeezed beside the text and got
   clipped. Stack the band and lay the 4 features in a clean
   2-col grid below the copy.
   ============================================================ */
@media(max-width:768px){
  .fly-band{ flex-direction:column !important; align-items:stretch !important; gap:20px !important; padding:24px 20px !important; flex-wrap:nowrap !important; }
  .fly-left{ flex:none !important; }
  .fly-band-photo .fly-left, .fly-left{ padding:0 !important; }
  .fly-actions .btn{ width:100%; justify-content:center; }
  .fly-feats, .fly-band-photo .fly-feats{
    display:grid !important; grid-template-columns:repeat(2,1fr) !important;
    gap:20px 12px !important; padding:0 !important; width:100%;
    border-top:1px solid rgba(255,255,255,.15); padding-top:20px !important;
  }
  .fly-feat, .fly-band-photo .fly-feat{ min-width:0 !important; }
  /* remove the vertical dividers that don't fit a grid */
  .fly-band-photo .fly-feat:not(:last-child)::after{ display:none !important; }
}

/* ------------------------------------------------------------
   v273b — center the .fly-feat items (icon + label) in their
   grid cells on the Joy Ride CTA band.
   ------------------------------------------------------------ */
@media(max-width:768px){
  .fly-feats, .fly-band-photo .fly-feats{ justify-items:center !important; }
  .fly-feat, .fly-band-photo .fly-feat{ align-items:center !important; text-align:center !important; }
}

/* ------------------------------------------------------------
   v274 — Joy Ride CTA heading "Ready to Feel the Freedom?" on
   one line on mobile (was wrapping to 3 lines).
   ------------------------------------------------------------ */
@media(max-width:768px){
  .fly-band .fly-left h2, .fly-band-photo .fly-left h2{
    font-size:18px !important; line-height:1.25 !important; white-space:nowrap !important; margin:0 0 8px !important;
  }
}
@media(max-width:400px){
  .fly-band .fly-left h2, .fly-band-photo .fly-left h2{ font-size:16.5px !important; }
}

/* ------------------------------------------------------------
   v274b — Joy Ride CTA paragraph "Book your Joy Ride today..."
   was wrapping to 4 narrow lines; let it use full band width
   so it reads in ~2 lines.
   ------------------------------------------------------------ */
@media(max-width:768px){
  .fly-band .fly-left, .fly-band-photo .fly-left{ width:100% !important; max-width:none !important; align-self:stretch !important; }
  .fly-band .fly-left p, .fly-band-photo .fly-left p{
    max-width:none !important; width:100% !important; font-size:14px !important; line-height:1.5 !important;
  }
}

/* ------------------------------------------------------------
   v274c — Joy Ride CTA "CONTACT US" button -> orange (filled)
   on mobile (was a white ghost/outline button).
   ------------------------------------------------------------ */
@media(max-width:768px){
  .fly-band .fly-actions .btn,
  .fly-band-photo .fly-actions .btn,
  .fly-band .fly-actions .btn-ghost-white{
    background:var(--orange,#FF6E02) !important;
    color:#fff !important;
    border:1px solid var(--orange,#FF6E02) !important;
  }
}

/* ------------------------------------------------------------
   v275 — Air Ambulance hero call button (.btn-outline) ->
   orange outline (transparent bg, orange border + text).
   ------------------------------------------------------------ */
@media(max-width:768px){
  .hub-hero-copy .hero-actions .btn-outline,
  .hub-hero .hero-actions .btn-outline{
    background:transparent !important;
    color:var(--orange,#FF6E02) !important;
    border:2px solid var(--orange,#FF6E02) !important;
  }
  .hub-hero-copy .hero-actions .btn-outline i{ color:var(--orange,#FF6E02) !important; }
}

/* ------------------------------------------------------------
   v276 — Air Ambulance "How It Works" (.grid.g5 icards):
   2 per row (3 rows) on mobile instead of 1 column.
   ------------------------------------------------------------ */
@media(max-width:768px){
  .grid.g5{ grid-template-columns:repeat(2,1fr) !important; gap:14px 12px !important; }
  .grid.g5 .icard{ padding:18px 12px !important; }
  .grid.g5 .icard .ico{ width:60px !important; height:60px !important; font-size:26px !important; }
  .grid.g5 .icard h3{ font-size:16px !important; white-space:normal !important; }
  .grid.g5 .icard p{ font-size:13.5px !important; }
}

/* ------------------------------------------------------------
   v277 — Marine Cargo "Shipping Process" (.process-flow):
   make it smaller/compact on mobile.
   ------------------------------------------------------------ */
@media(max-width:768px){
  .process-flow{ gap:10px 8px !important; padding:14px 10px !important; }
  .process-flow .feature-cell{ padding:8px 4px !important; }
  .process-flow .feature-cell .ico{ font-size:20px !important; height:24px !important; margin-bottom:6px !important; }
  .process-flow .feature-cell .t{ font-size:12px !important; line-height:1.25 !important; }
}

/* ------------------------------------------------------------
   v278 — Bus Charter hero heading: keep it ORANGE on mobile
   (the generic .hub-hero-copy h1 rule forces navy, overriding
   the inline .text-orange class).
   ------------------------------------------------------------ */
@media(max-width:768px){
  .bus-hero .hub-hero-copy h1.text-orange,
  .bus-hero .hub-hero-copy h1{ color:var(--orange,#FF6E02) !important; }
}

/* ------------------------------------------------------------
   v279 — Bus Charter "Get in Touch" navy card: a generic
   .split-2 > div:first-child{padding:0!important} rule was
   stripping the card's inner padding, clipping the heading &
   rows against the left edge. Restore padding here.
   ------------------------------------------------------------ */
@media(max-width:768px){
  .bus-enq > .bus-getin,
  .split-2 > .bus-getin:first-child{ padding:28px 22px !important; }
}

/* ------------------------------------------------------------
   v280 — Bus Charter "Get in Touch" rows: vertically center the
   text block against its icon (was top-aligned by the global
   .info-row{align-items:flex-start} rule).
   ------------------------------------------------------------ */
@media(max-width:768px){
  .bus-getin .info-row{ align-items:center !important; gap:14px; }
  .bus-getin .info-row .ico{ margin-top:0 !important; }
}

/* ------------------------------------------------------------
   v281 — Daily Tours hero (.page-hero.dt-hero): match the other
   hubs on mobile — banner photo as the section background with
   text overlaid on a soft white veil, instead of text-then-image.
   Scoped to .dt-hero so other .page-hero pages are unaffected.
   ------------------------------------------------------------ */
@media(max-width:768px){
  .page-hero.dt-hero{
    position:relative;
    background-image:url('../img/hero-dailytours.jpg?v=267') !important;
    background-size:cover !important;
    background-position:65% center !important;
    display:block !important;
    grid-template-columns:none !important;
  }
  /* white veil edge-to-edge so navy/orange text stays readable */
  .page-hero.dt-hero::before{
    content:""; position:absolute; inset:0;
    background:rgba(255,255,255,.82); z-index:1;
  }
  /* hide the standalone image (it's now the background) */
  .page-hero.dt-hero .hero-media{ display:none !important; }
  .page-hero.dt-hero .hero-copy{
    position:relative; z-index:2;
    padding:30px 18px !important;
    max-width:100% !important;
  }
}

/* ------------------------------------------------------------
   v282 — Daily Tours hero badges: 2 rows of 3 (3 per row)
   ------------------------------------------------------------ */
@media(max-width:768px){
  .page-hero.dt-hero .hero-badges,
  .page-hero.dt-hero .hero-badges.badges-3col{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:18px 8px !important;
    justify-items:center;
  }
  .page-hero.dt-hero .hero-badge{ width:auto !important; }
  .page-hero.dt-hero .hero-badge .ico{ width:50px !important; height:50px !important; font-size:21px !important; }
  .page-hero.dt-hero .hero-badge span{ font-size:11.5px !important; line-height:1.25 !important; }
}

/* ------------------------------------------------------------
   v283 — Daily Tours hero "VIEW ALL TOURS" button: orange outline
   ------------------------------------------------------------ */
@media(max-width:768px){
  .page-hero.dt-hero .hero-actions .btn-outline{
    background:transparent !important;
    color:var(--orange,#FF6E02) !important;
    border:2px solid var(--orange,#FF6E02) !important;
  }
  .page-hero.dt-hero .hero-actions .btn-outline i{ color:var(--orange,#FF6E02) !important; }
}

/* ------------------------------------------------------------
   v284 — City Tours hero (.page-hero.ct-hero): same overlay
   treatment as Daily Tours — banner background + white veil +
   text overlaid, badges as 2 rows of 3. Scoped to .ct-hero.
   ------------------------------------------------------------ */
@media(max-width:768px){
  .page-hero.ct-hero{
    position:relative;
    background-image:url('../img/attr-mysore.jpg?v=273') !important;
    background-size:cover !important;
    background-position:65% center !important;
    display:block !important;
    grid-template-columns:none !important;
  }
  .page-hero.ct-hero::before{
    content:""; position:absolute; inset:0;
    background:rgba(255,255,255,.82); z-index:1;
  }
  .page-hero.ct-hero .hero-media{ display:none !important; }
  .page-hero.ct-hero .hero-copy{
    position:relative; z-index:2;
    padding:30px 18px !important;
    max-width:100% !important;
  }
  /* badges: 2 rows of 3 */
  .page-hero.ct-hero .hero-badges,
  .page-hero.ct-hero .hero-badges.badges-3col{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:18px 8px !important;
    justify-items:center;
  }
  .page-hero.ct-hero .hero-badge{ width:auto !important; }
  .page-hero.ct-hero .hero-badge .ico{ width:50px !important; height:50px !important; font-size:21px !important; }
  .page-hero.ct-hero .hero-badge span{ font-size:11.5px !important; line-height:1.25 !important; }
}

/* ------------------------------------------------------------
   v285 — Investors hero: restore the banner-overlay look to
   match the other hubs (v260 had collapsed it to plain white).
   Banner photo as background + soft white veil + text overlaid.
   ------------------------------------------------------------ */
@media(max-width:768px){
  .inv-hero-banner{
    position:relative !important;
    aspect-ratio:auto !important;
    min-height:300px !important;
    height:auto !important;
    width:100% !important;
    left:auto !important; right:auto !important;
    margin-left:0 !important; margin-right:0 !important;
    display:flex !important; align-items:center !important;
    overflow:hidden !important;
    padding:34px 18px !important;
    background-image:url('../img/hero-investors-banner.jpg?v=192') !important;
    background-size:cover !important;
    background-position:65% center !important;
  }
  /* soft white veil for readability */
  .inv-hero-banner .inv-hero-scrim{
    display:block !important;
    position:absolute !important; inset:0 !important;
    background:rgba(255,255,255,.82) !important;
    z-index:1 !important;
  }
  .inv-hero-banner .inv-hero-copy{
    position:relative !important; z-index:2 !important;
    width:100% !important; margin-left:0 !important; padding:0 !important;
  }
}

/* ------------------------------------------------------------
   v286 — Investors "Investment Highlights" icard grid:
   3 rows of 2 (2 per row) on mobile.
   ------------------------------------------------------------ */
@media(max-width:768px){
  .grid.g3:has(.icard){
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:14px 12px !important;
  }
  .grid.g3 .icard{ padding:18px 14px !important; }
  .grid.g3 .icard .ico{ width:54px !important; height:54px !important; font-size:22px !important; }
  .grid.g3 .icard h3{ font-size:15.5px !important; }
  .grid.g3 .icard p{ font-size:13px !important; line-height:1.4 !important; }
}

/* ------------------------------------------------------------
   v287 — Investors "Expansion Roadmap" cards: center-aligned
   on mobile (number badge, heading, year and checklist centered).
   ------------------------------------------------------------ */
@media(max-width:768px){
  .roadmap .road-col{ text-align:center !important; }
  .roadmap .road-col .road-num{ margin-left:auto !important; margin-right:auto !important; }
  .roadmap .road-col h4,
  .roadmap .road-col .yr{ text-align:center !important; }
  .roadmap .road-col ul{ display:inline-block !important; text-align:left !important; margin:0 auto !important; }
}

/* ------------------------------------------------------------
   v288 — Careers "Employee Promise" stat-bar: vertically center
   each icon's label (was top-aligned by the global stat-item
   align-items:flex-start rule).
   ------------------------------------------------------------ */
@media(max-width:768px){
  .promise-bar .stat-item{ align-items:center !important; gap:12px; }
  .promise-bar .stat-item .ico{ margin-top:0 !important; }
  .promise-bar .stat-item .lbl{ line-height:1.3 !important; }
}

/* ------------------------------------------------------------
   v289 — Careers "Employee Promise": make the title a single
   full-width line spanning the top of the card, then the 5
   promise items below it.
   ------------------------------------------------------------ */
@media(max-width:768px){
  .promise-bar{ position:relative; }
  /* the first stat-item holds the title — span full width, one line */
  .promise-bar > .stat-item:first-child{
    grid-column:1 / -1 !important;
    border:0 !important;
    margin-bottom:6px !important;
    justify-content:flex-start !important;
  }
  .promise-bar > .stat-item:first-child > div{
    white-space:nowrap !important;
    font-size:16px !important;
  }
}

/* ------------------------------------------------------------
   v290 — Gallery hero (.page-hero.gal-hero): banner-overlay
   treatment to match the other hubs. Scoped to .gal-hero.
   ------------------------------------------------------------ */
@media(max-width:768px){
  .page-hero.gal-hero{
    position:relative;
    background-image:url('../img/hero-dailytours.jpg?v=273') !important;
    background-size:cover !important;
    background-position:65% center !important;
    display:block !important;
    grid-template-columns:none !important;
  }
  .page-hero.gal-hero::before{
    content:""; position:absolute; inset:0;
    background:rgba(255,255,255,.82); z-index:1;
  }
  .page-hero.gal-hero .hero-media{ display:none !important; }
  .page-hero.gal-hero .hero-copy{
    position:relative; z-index:2;
    padding:34px 18px !important;
    max-width:100% !important;
  }
}

/* ------------------------------------------------------------
   v291 — About hero (.page-hero.ab-hero): banner-overlay
   treatment to match the other hubs. Scoped to .ab-hero.
   ------------------------------------------------------------ */
@media(max-width:768px){
  .page-hero.ab-hero{
    position:relative;
    background-image:url('../img/hero-home.jpg') !important;
    background-size:cover !important;
    background-position:65% center !important;
    display:block !important;
    grid-template-columns:none !important;
  }
  .page-hero.ab-hero::before{
    content:""; position:absolute; inset:0;
    background:rgba(255,255,255,.82); z-index:1;
  }
  .page-hero.ab-hero .hero-media{ display:none !important; }
  .page-hero.ab-hero .hero-copy{
    position:relative; z-index:2;
    padding:34px 18px !important;
    max-width:100% !important;
  }
}

/* ------------------------------------------------------------
   v292 — About hero "INVESTORS" button: orange outline
   ------------------------------------------------------------ */
@media(max-width:768px){
  .page-hero.ab-hero .hero-actions .btn-outline{
    background:transparent !important;
    color:var(--orange,#FF6E02) !important;
    border:2px solid var(--orange,#FF6E02) !important;
  }
  .page-hero.ab-hero .hero-actions .btn-outline i{ color:var(--orange,#FF6E02) !important; }
}

/* ------------------------------------------------------------
   v293 — About "Our Story" checklist: vertically center the
   orange tick against each line so the list aligns cleanly.
   ------------------------------------------------------------ */
@media(max-width:768px){
  .split-2 .checklist li{ align-items:center !important; gap:10px; }
  .split-2 .checklist .tick{ margin-top:0 !important; flex:none; }
}

/* ------------------------------------------------------------
   v294 — Contact "Get In Touch" info rows: vertically center
   the icon against its text block (was top-aligned globally).
   ------------------------------------------------------------ */
@media(max-width:768px){
  .info-card .info-row{ align-items:center !important; gap:14px; }
  .info-card .info-row .ico{ margin-top:0 !important; flex:none; }
}

/* ------------------------------------------------------------
   v295 — Contact "Get In Touch" card: add breathing room at the
   top so the heading isn't cramped against the card border.
   A high-specificity .split-2 > div:first-child{padding:0} rule
   was beating the plain .info-card padding, so raise the top
   space via the heading's margin (which isn't being zeroed).
   ------------------------------------------------------------ */
@media(max-width:768px){
  .split-2 > .info-card,
  .split-2 > .info-card:first-child{ padding-top:26px !important; }
  .info-card > h2:first-child{ margin-top:14px !important; }
}

/* ------------------------------------------------------------
   v302 — FIX: .svc-card .svc-badge is position:absolute but
   .svc-card had no position:relative, so on mobile the badges
   escaped their cards and stacked near the top of the page,
   overlapping the Careers hero text. Anchor each badge to its
   own card.
   ------------------------------------------------------------ */
@media(max-width:768px){
  .svc-card{ position:relative !important; }
}

/* ============================================================
   CARAVAN PAGE — mobile-only fixes (v307)
   Matches the same mobile treatment applied to other pages:
   tighter section padding, scaled headings, comfortable hero,
   full-width CTAs. Scoped to .caravan-page and ≤768px ONLY so
   it never affects desktop or any other page.
   ============================================================ */
@media(max-width:768px){
  /* Section rhythm — match other pages' compact mobile spacing */
  .caravan-page section{ padding:40px 0 !important; }

  /* Headings scale down like other pages (h1 34 / h2 24 on mobile) */
  .caravan-page .cv-head h2{ font-size:24px !important; }
  .caravan-page .cv-cta-copy h2{ font-size:24px !important; }

  /* Hero copy padding + buttons full-width (other-page pattern) */

  /* Lounge / Meet bodies read better stacked on mobile */
  .caravan-page .cv-meet-body,
  .caravan-page .cv-lounge-copy{ padding:18px 0 0 !important; }

  /* CTA band padding eased on small screens */
  .caravan-page .cv-cta-copy{ padding:26px 20px !important; }

  /* Gallery tabs: let them wrap and centre instead of overflowing */
  .caravan-page .cv-gal-tabs{ flex-wrap:wrap; justify-content:center; gap:8px; }
}

/* ---- Large phone (≤600px): tighter still, matches other pages ---- */
@media(max-width:600px){
  .caravan-page section{ padding:34px 0 !important; }
  .caravan-page .cv-head h2{ font-size:21px !important; }
  .caravan-page .btn{ font-size:14px; }
}

/* ============================================================
   CARAVAN HERO — mobile fix (v308)
   The desktop banner (caravan-hero.jpg) fades to white on the
   LEFT and shows the van on the RIGHT (background-position:
   center right). On a narrow phone you only see the empty white
   fade — the van looks "missing". On mobile, center the image so
   the van is visible, darken with a scrim, and put white text on
   top. Scoped to .caravan-page + ≤768px ONLY (desktop untouched).
   ============================================================ */
@media(max-width:768px){
    background-position:center center !important;
    background-size:cover !important;
    min-height:340px !important;
    position:relative;
  }
  /* dark scrim so the copy stays readable over the photo */
    content:""; position:absolute; inset:0; z-index:0;
    background:linear-gradient(180deg, rgba(8,27,51,.45) 0%, rgba(8,27,51,.55) 45%, rgba(8,27,51,.80) 100%);
  }
}
@media(max-width:600px){
}

/* ============================================================
   CARAVAN — Meet section mobile layout fix (v310)
   The .cv-meet-body is locked to aspect-ratio:16/9 on desktop,
   which on a phone can't contain the 8-item spec list + button,
   so the "Reserve This Caravan" button overflowed off-screen.
   On mobile: let the card grow to fit content, give the image a
   real height (not squished), and make the button full-width so
   it stays inside the card. Scoped .caravan-page + ≤768px only.
   ============================================================ */
@media(max-width:768px){
  .caravan-page .cv-meet-body{
    aspect-ratio:auto !important;
    height:auto !important;
    padding:24px 20px !important;
    justify-content:flex-start !important;
  }
  .caravan-page .cv-meet-img{
    aspect-ratio:16/9 !important;
    min-height:200px;
  }
  .caravan-page .cv-spec-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
    margin:0 0 20px !important;
  }
  /* keep the Reserve button inside the card, full-width */
  .caravan-page .cv-meet-body .btn{
    width:100% !important;
    justify-content:center !important;
    box-sizing:border-box;
  }
  /* lounge image keeps a real height too */
  .caravan-page .cv-lounge-img{ aspect-ratio:16/9 !important; min-height:200px; }
}

/* ============================================================
   CARAVAN — mobile overflow + alignment hardening (v311)
   Guarantees no horizontal overflow on the caravan page and
   keeps the Meet card + Reserve button fully inside the screen.
   Scoped .caravan-page + ≤768px only.
   ============================================================ */
@media(max-width:768px){
  /* hard stop any horizontal scroll/bleed */
  .caravan-page{ overflow-x:hidden; }
  .caravan-page .container{ width:100%; max-width:100%; box-sizing:border-box; }

  /* Meet: stack cleanly, nothing wider than the viewport */
  .caravan-page .cv-meet{ grid-template-columns:1fr !important; gap:18px !important; }
  .caravan-page .cv-meet-img,
  .caravan-page .cv-meet-body{ width:100%; max-width:100%; box-sizing:border-box; }
  .caravan-page .cv-meet-body{ overflow:hidden; }

  /* Reserve button: never exceed the card */
  .caravan-page .cv-meet-body .btn{
    display:flex; width:100% !important; max-width:100% !important;
    box-sizing:border-box; padding-left:16px !important; padding-right:16px !important;
    white-space:nowrap;
  }

  /* Why-Choose: keep icons + text centered and tidy */
  .caravan-page .cv-why{ grid-template-columns:1fr 1fr !important; gap:14px !important; }
  .caravan-page .cv-why-card{ padding:24px 16px 22px !important; }
  .caravan-page .cv-why-card h3{ font-size:16px !important; }
  .caravan-page .cv-why-card p{ font-size:13px !important; }

  /* Give the last content section room so the floating WhatsApp
     bubble doesn't cover card text */
  .caravan-page section:last-of-type{ padding-bottom:90px !important; }
}



/* ============================================================
   CARAVAN HERO (.cv-page-hero) — mobile: SAME as other pages
   (dt-hero/ct-hero pattern). Banner photo as the section
   background with a white veil and text overlaid, image hidden,
   badges as 3-per-row. Scoped .cv-page-hero + ≤768px only. (v315)
   ============================================================ */
@media(max-width:768px){
  .page-hero.cv-page-hero{
    position:relative;
    background-image:url('../img/caravan-exterior.jpg?v=5') !important;
    background-size:cover !important;
    background-position:65% center !important;
    display:block !important;
    grid-template-columns:none !important;
  }
  .page-hero.cv-page-hero::before{
    content:""; position:absolute; inset:0;
    background:rgba(255,255,255,.82); z-index:1;
  }
  .page-hero.cv-page-hero .hero-media{ display:none !important; }
  .page-hero.cv-page-hero .hero-copy{
    position:relative; z-index:2;
    padding:30px 18px !important;
    max-width:100% !important;
  }
  /* badges: 3 per row, centered icons */
  .page-hero.cv-page-hero .hero-badges,
  .page-hero.cv-page-hero .hero-badges.badges-3col{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:18px 8px !important;
    justify-items:center;
  }
  .page-hero.cv-page-hero .hero-badge{ width:auto !important; align-items:center; text-align:center; }
  .page-hero.cv-page-hero .hero-badge .ico{ width:50px !important; height:50px !important; font-size:21px !important; margin:0 auto !important; }
  .page-hero.cv-page-hero .hero-badge span{ font-size:11.5px !important; line-height:1.25 !important; }
}