/* ============================================================
   air16 — Caravan (Land Hub) landing page styles
   Brand: Navy #0B2545 / Orange #FF6E02
   Builds on style.css tokens & shared classes.
   ============================================================ */

/* ---------- HERO ---------- */
.cv-hero{
  position:relative; background:#fff; overflow:hidden;
}

/* Full-bleed banner hero (real photo fades to white on the left for the copy) */
.cv-hero-banner{
  background-size:cover; background-position:center right; background-repeat:no-repeat;
  display:flex; align-items:center; min-height:clamp(360px,30vw,460px);
}
.cv-hero-banner .container{ width:100%; }
.cv-hero-banner .cv-hero-copy{ padding:40px 0; max-width:560px; }
.cv-hero-grid{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:30px; min-height:380px;
}
.cv-hero-copy{ padding:24px 0; max-width:560px; }
.cv-hero-eyebrow{ color:var(--orange); font-weight:700; font-style:italic; font-size:18px; margin:0 0 10px; }
.cv-hero-copy h1{
  font-size:clamp(40px,5.2vw,64px); line-height:1.02; letter-spacing:-1.5px;
  color:var(--ink); margin:0 0 18px; font-weight:800;
}
.cv-hero-copy p.lead{ color:var(--text); font-size:16px; line-height:1.6; margin:0 0 26px; max-width:480px; }
.cv-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.btn-wa{ background:#25D366; color:#fff; }
.btn-wa:hover{ background:#1da851; color:#fff; }
.btn-dark{ background:var(--navy); color:#fff; }
.btn-dark:hover{ background:var(--navy-2); }
.cv-hero-media{
  position:relative; align-self:stretch; min-height:440px;
  background-size:cover; background-position:center; border-radius:0;
}
.cv-hero-media .ph{ position:absolute; inset:0; border-radius:0; }

/* feature strip under hero */
.cv-featstrip{ background:var(--navy-deep); padding:0; }
.cv-featstrip .container{
  display:grid; grid-template-columns:repeat(6,1fr); gap:0;
}
.cv-feat{
  display:flex; align-items:center; gap:16px; color:#fff;
  padding:16px 18px; border-right:1px solid rgba(255,255,255,.12);
}
.cv-feat:last-child{ border-right:0; }
.cv-feat i{ font-size:30px; color:var(--orange); flex:none; }
.cv-feat .ft{ font-size:16px; font-weight:600; line-height:1.3; }

/* ---------- section heading helper ---------- */
.cv-head{ text-align:center; margin:0 0 34px; }
.cv-head h2{ font-size:clamp(24px,2.6vw,32px); color:var(--ink); margin:0; }
.cv-head .div{ width:64px; height:3px; background:var(--orange); border-radius:3px; margin:12px auto 0; }

/* ---------- Why Choose cards (clean icon-feature style) ---------- */
.cv-why{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.cv-why-card{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow-sm); padding:34px 24px 30px; text-align:center;
  transition:transform .2s, box-shadow .2s;
}
.cv-why-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.cv-why-ic{
  width:72px; height:72px; margin:0 auto 18px; border-radius:50%;
  background:var(--orange-tint); color:var(--orange);
  display:flex; align-items:center; justify-content:center; font-size:30px;
}
.cv-why-card h3{ font-size:18px; color:var(--ink); margin:0 0 10px; }
.cv-why-card p{ font-size:14px; color:var(--text); margin:0; line-height:1.55; }

/* ---------- Meet the caravan (split spec) ---------- */
.cv-meet{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:stretch; }
.cv-meet-img{ border-radius:16px; aspect-ratio:16/9; background-size:cover; background-position:center; overflow:hidden; }
.cv-meet-img .ph{ height:100%; border-radius:16px; }
.cv-meet-body{ aspect-ratio:16/9; background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px 28px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; justify-content:center; }
.cv-meet-body h2{ font-size:clamp(22px,2.4vw,28px); margin:0 0 18px; color:var(--ink); }
.cv-spec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; margin:0 0 22px; }
.cv-spec{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--text); }
.cv-spec i{ color:var(--orange); font-size:16px; flex:none; }

/* ---------- Lounge comfort ---------- */
.cv-lounge{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.cv-lounge-copy h2{ font-size:clamp(24px,2.6vw,32px); margin:0 0 14px; color:var(--ink); }
.cv-lounge-copy > p{ color:var(--text); font-size:16px; line-height:1.65; margin:0 0 28px; max-width:460px; }
.cv-mini-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px 24px; }
.cv-mini{ display:flex; align-items:center; gap:14px; }
.cv-mini i{ color:var(--orange); font-size:30px; flex:none; width:34px; text-align:center; }
.cv-mini span{ font-size:15px; color:var(--ink); font-weight:600; line-height:1.35; }
.cv-lounge-img{ border-radius:16px; aspect-ratio:16/9; background-size:cover; background-position:center; overflow:hidden; }
.cv-lounge-img .ph{ height:100%; border-radius:16px; }

/* ---------- Perfect for every journey (icon tiles) ---------- */
.cv-journey{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.cv-jtile{
  background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow-sm); text-align:center;
}
.cv-jtile .cv-jimg{ aspect-ratio:16/9; background-size:cover; background-position:center; overflow:hidden; }
.cv-jtile .cv-jimg .ph{ height:100%; border-radius:0; }
.cv-jtile .cv-jbody{ padding:10px 8px; }
.cv-jtile .cv-jbody i{ color:var(--orange); font-size:20px; }
.cv-jtile .cv-jbody div{ font-size:12.5px; font-weight:600; color:var(--ink); margin-top:0; line-height:1.25; }

/* ---------- Popular routes ---------- */
.cv-routes{ display:grid; grid-template-columns:repeat(8,1fr); gap:14px; }
.cv-route{
  background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow-sm); text-align:center;
}
.cv-route .cv-rimg{ height:74px; background-size:cover; background-position:center; }
.cv-route .cv-rimg .ph{ height:100%; border-radius:0; font-size:10px; }
.cv-route .cv-rlbl{ padding:10px 4px; font-size:11.5px; color:var(--ink); font-weight:600; line-height:1.3; }
.cv-route .cv-rlbl i{ color:var(--orange); font-size:11px; margin-right:2px; }
.cv-routes-cta{ text-align:center; margin-top:22px; }

/* ---------- Road trip experiences ---------- */
.cv-exp{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.cv-expcard{ background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); }
.cv-expcard .cv-eimg{ aspect-ratio:16/9; background-size:cover; background-position:center; overflow:hidden; }
.cv-expcard .cv-eimg .ph{ height:100%; border-radius:0; }
.cv-expcard .cv-elbl{ padding:14px 10px; font-size:13px; font-weight:600; color:var(--ink); text-align:center; line-height:1.3; }

/* ---------- Amenities on board ---------- */
.cv-amen{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px 16px; max-width:920px; margin:0 auto; }
.cv-amen-item{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.cv-amen-item i{ color:var(--orange); font-size:38px; }
.cv-amen-item span{ font-size:15px; color:var(--ink); font-weight:600; line-height:1.3; }

/* ---------- Gallery ---------- */
.cv-gal-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 22px; }
.cv-gal-tab{
  padding:8px 18px; border-radius:30px; border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--text); cursor:pointer; transition:.2s;
}
.cv-gal-tab.active, .cv-gal-tab:hover{ background:var(--orange); color:#fff; border-color:var(--orange); }
.cv-gal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cv-gal-grid .cv-gitem{ aspect-ratio:16/9; border-radius:12px; background-size:cover; background-position:center; overflow:hidden; }
.cv-gal-grid .cv-gitem .ph{ height:100%; border-radius:12px; }
.cv-gal-grid .cv-gitem .cv-gimg{ width:100%; height:100%; background-size:cover; background-position:center; border-radius:12px; }

/* ---------- Testimonials ---------- */
.cv-tests{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cv-test{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 22px; box-shadow:var(--shadow-sm); }
.cv-test .stars{ color:var(--orange); font-size:13px; margin:0 0 10px; letter-spacing:2px; }
.cv-test p{ font-size:14px; color:var(--text); line-height:1.55; margin:0 0 16px; }
.cv-test .who{ display:flex; align-items:center; gap:10px; }
.cv-test .who .av{ width:38px; height:38px; border-radius:50%; background-size:cover; background-position:center; background-color:var(--orange-tint); flex:none; }
.cv-test .who .nm{ font-size:13.5px; font-weight:700; color:var(--ink); }
.cv-test .who .ct{ font-size:12px; color:var(--muted); }

/* ---------- Bottom CTA band ---------- */
.cv-cta{ position:relative; border-radius:18px; overflow:hidden; min-height:230px; display:flex; align-items:center;
  background-color:var(--navy); background-size:cover; background-position:center; }
.cv-cta-scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,27,51,.82) 0%, rgba(8,27,51,.55) 60%, rgba(8,27,51,.25) 100%); }
.cv-cta-copy{ position:relative; z-index:1; padding:36px 40px; color:#fff; width:100%; text-align:center; }
.cv-cta-copy h2{ color:#fff; font-size:clamp(24px,3vw,34px); margin:0 0 6px; }
.cv-cta-copy p{ color:rgba(255,255,255,.92); font-size:15px; margin:0 0 20px; }
.cv-cta-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* ---------- Enquiry form (in dark band) ---------- */
.cv-enquiry{ background:var(--navy); }
.cv-enquiry .container{ padding-top:40px; padding-bottom:40px; }
.cv-enquiry h2{ color:#fff; font-size:22px; margin:0 0 18px; }
.cv-form .row{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:12px; }
.cv-form input, .cv-form select, .cv-form textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff; font-family:var(--ff); font-size:14px;
}
.cv-form input::placeholder, .cv-form textarea::placeholder{ color:rgba(255,255,255,.6); }
.cv-form select{ color:#fff; }
.cv-form select:invalid{ color:rgba(255,255,255,.6); }
.cv-form select option{ color:#16263B; background:#fff; }
.cv-form textarea{ min-height:46px; resize:vertical; }
.cv-form .row-2{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:start; }
.cv-form button{ white-space:nowrap; }

/* header Book Caravan CTA — show on desktop, hide on mobile (hero has its own) */
.nav-cta{ margin-left:4px; }

/* ============================================================
   RESPONSIVE — ordered LARGEST → SMALLEST so later (smaller)
   breakpoints correctly win the cascade. Scoped tablet/desktop
   container tweaks to .caravan-page so other pages aren't touched.
   ============================================================ */

/* (Caravan uses the site-wide standard .container max-width of 1200px —
   no per-page widening, so it matches every other page.) */

/* ---- Tablet landscape (≤1200px): ease the densest grids ---- */
@media(max-width:1200px){
  .cv-routes{ grid-template-columns:repeat(4,1fr); }
  .cv-amen{ grid-template-columns:repeat(5,1fr); row-gap:18px; }
  .cv-journey{ grid-template-columns:repeat(3,1fr); }
  .cv-exp{ grid-template-columns:repeat(3,1fr); }
}

/* ---- Tablet / small laptop (≤1024px): hide header CTA when the
        hamburger appears so it doesn't crowd the menu button ---- */
@media(max-width:1024px){
  .nav-cta{ display:none !important; }
}

/* ---- Tablet portrait (≤980px): hero stacks, splits collapse ---- */
@media(max-width:980px){
  .cv-hero-grid{ grid-template-columns:1fr; min-height:0; }
  .cv-hero-media{ min-height:300px; order:-1; }
  .cv-hero-copy{ padding:34px 0; }
  .cv-featstrip .container{ grid-template-columns:repeat(3,1fr); }
  .cv-feat{ border-bottom:1px solid rgba(255,255,255,.12); }
  .cv-why{ grid-template-columns:1fr 1fr; }
  .cv-meet, .cv-lounge{ grid-template-columns:1fr; }
  .cv-journey{ grid-template-columns:repeat(3,1fr); }
  .cv-routes{ grid-template-columns:repeat(4,1fr); }
  .cv-exp{ grid-template-columns:repeat(3,1fr); }
  .cv-amen{ grid-template-columns:repeat(5,1fr); row-gap:18px; }
  .cv-gal-grid{ grid-template-columns:repeat(3,1fr); }
  .cv-tests{ grid-template-columns:1fr; }
  .cv-form .row{ grid-template-columns:1fr 1fr; }
}

/* ---- Large phone (≤600px): 2-col grids across the board ---- */
@media(max-width:600px){
  .cv-featstrip .container{ grid-template-columns:repeat(2,1fr); }
  .cv-why{ grid-template-columns:1fr 1fr; }
  .cv-journey{ grid-template-columns:repeat(2,1fr); }
  .cv-routes{ grid-template-columns:repeat(2,1fr); }
  .cv-exp{ grid-template-columns:1fr 1fr; }
  .cv-amen{ grid-template-columns:repeat(4,1fr); }
  .cv-gal-grid{ grid-template-columns:1fr 1fr; }
  .cv-spec-grid{ grid-template-columns:1fr; }
  .cv-mini-grid{ grid-template-columns:1fr 1fr; }
  .cv-form .row, .cv-form .row-2{ grid-template-columns:1fr; }
  .cv-hero-actions .btn{ flex:1 1 100%; justify-content:center; }
}

/* ---- Small phones (≤400px): tighten so nothing is cramped ---- */
@media(max-width:400px){
  .cv-hero-copy h1{ font-size:34px; letter-spacing:-1px; }
  .cv-hero-eyebrow{ font-size:16px; }
  .cv-amen{ grid-template-columns:repeat(3,1fr); }
  .cv-feat{ padding:14px 12px; gap:10px; }
  .cv-feat i{ font-size:19px; }
  .cv-feat .ft{ font-size:12.5px; }
}

/* ---- Tiny phones (≤360px): safe fallbacks, no overflow ---- */
@media(max-width:360px){
  .cv-featstrip .container{ grid-template-columns:1fr 1fr; }
  .cv-hero-copy h1{ font-size:30px; }
}

/* ------------------------------------------------------------
   Section titles must ALWAYS be visible — never let the scroll
   reveal animation leave a .cv-head heading hidden.
   ------------------------------------------------------------ */
.cv-head[data-reveal]{ opacity:1 !important; transform:none !important; }

/* ------------------------------------------------------------
   NO-JS / reveal fallback — content must be visible even if the
   scroll-reveal script doesn't run (e.g. opening the file
   directly with file:// where some setups block local JS).
   On this page reveal is a nice-to-have, never a gate.
   ------------------------------------------------------------ */
.caravan-page [data-reveal],
.caravan-page [data-reveal-group]>*{ opacity:1 !important; transform:none !important; }