:root{
  --bg:#111c2e;
  --card:#162236;
  --card2:#1a2a44;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#2563eb;
  --accent2:#38bdf8;
  --white:#ffffff;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--text); background:
  radial-gradient(1000px 650px at 12% 0%, rgba(255,190,110,0.18) 0%, transparent 55%),
  radial-gradient(900px 600px at 88% 12%, rgba(62,160,255,0.16) 0%, transparent 52%),
  linear-gradient(180deg, #101b2a 0%, #070a0f 100%);
}

a{color:inherit}
img{max-width:100%; display:block}

.container{width:min(1120px, 92%); margin:0 auto}

.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(10,14,20,.55);
  border-bottom:1px solid rgba(148,163,184,.15);
}

.nav{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0}
.nav__brand{font-weight:700; letter-spacing:.3px; text-decoration:none}
.nav__links{display:flex; gap:16px; font-size:14px; color:rgba(229,231,235,.85)}
.nav__links a{opacity:.9; text-decoration:none}
.nav__links a:hover{opacity:1}
.nav__cta{display:flex; gap:10px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.25);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  gap:8px;
  cursor:pointer;
  background:transparent;
  color:var(--text);
}
.btn--primary{background:var(--accent); border-color:rgba(37,99,235,.5)}
.btn--primary:hover{filter:brightness(1.05)}
.btn--ghost:hover{background:rgba(148,163,184,.12)}

.btn--sm{
  padding:8px 12px;
  font-size:13px;
}

.hero{
  position:relative;
  overflow:hidden;
}

.hero__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

.hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 80% at 25% 25%, rgba(0,0,0,.20) 0%, rgba(0,0,0,.78) 70%),
    linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.78) 100%);
}

.hero__content{
  position:relative; z-index:2;
  padding:90px 0 54px;
  min-height:78vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:980px;
}

.hero__badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px;
  color:rgba(229,231,235,.85);
  border:1px solid rgba(148,163,184,.25);
  border-radius:999px;
  padding:6px 10px;
  width:fit-content;
  background:rgba(10,14,20,.35);
}

.hero__title{font-size:48px; line-height:1.05; margin:14px 0 10px}
.hero__lead{font-size:18px; line-height:1.55; color:rgba(229,231,235,.85); margin:0; max-width:58ch}
.hero__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}

.hero__mini{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; color:rgba(229,231,235,.85); font-size:13px}
.hero__mini > span{border:1px solid rgba(148,163,184,.25); border-radius:999px; padding:6px 10px; background:rgba(10,14,20,.30)}

/* Small CTA cards at bottom of hero */
.heroCards{
  margin-top:auto;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  padding-top:22px;
}

.heroCard{
  text-decoration:none;
  color:var(--text);
  border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  border-radius:16px;
  padding:12px 12px;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}

.heroCard:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.08);
  border-color:rgba(148,163,184,.30);
}

.heroCard__title{font-weight:700; font-size:14px; margin:0 0 4px}
.heroCard__meta{font-size:12px; color:rgba(229,231,235,.78)}

.section{padding:68px 0}
.section--dark{background:rgba(3,5,8,.62)}
.section__head{margin-bottom:18px}
.section__head h2{margin:0 0 8px; font-size:28px}
.section__head p{margin:0; color:var(--muted)}

.muted{color:var(--muted)}

.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3, 1fr)}
.grid-4{grid-template-columns:repeat(4, 1fr)}

.card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(148,163,184,.18);
  border-radius:var(--radius);
  padding:18px;
}
.card--light{background:rgba(255,255,255,.06)}
.card h3{margin:0 0 10px; font-size:18px}
.card p{margin:0 0 10px; color:rgba(229,231,235,.85); font-size:14px; line-height:1.6}
.card ul{margin:0; padding-left:18px; color:rgba(229,231,235,.82); font-size:14px; line-height:1.6}
.card ul li{margin:6px 0}

/* Tour tabs below hero */
.tourTabs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}

.tourTab{
  border:1px solid rgba(148,163,184,.18);
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,.05);
  display:flex;
  flex-direction:column;
}

.tourTab__img{display:block}
.tourTab__img img{width:100%; height:150px; object-fit:cover}

.tourTab__body{padding:14px}
.tourTab__title{margin:0 0 4px; font-size:17px}
.tourTab__meta{font-size:13px; color:rgba(229,231,235,.75)}
.tourTab__actions{display:flex; gap:10px; margin-top:12px}

.gallery{
  display:grid; gap:14px;
  grid-template-columns:2fr 1fr 1fr;
  grid-auto-rows: 200px;
}
.gallery img{width:100%; height:100%; object-fit:cover; border-radius:18px}
.gallery img:nth-child(1){grid-row:span 2}
.gallery img:nth-child(2){grid-row:span 1}
.gallery img:nth-child(3){grid-row:span 1}

.form label{display:block; font-size:13px; color:rgba(229,231,235,.85)}
.form input,.form select,.form textarea{
  width:100%;
  margin-top:6px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.25);
  background:rgba(10,14,20,.55);
  color:var(--text);
  outline:none;
}
.form textarea{resize:vertical}

.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

.section__foot{margin-top:22px}
.section__foot h3{margin:0 0 10px; font-size:18px}
.faq{margin:0; padding-left:18px; color:rgba(229,231,235,.82); font-size:14px; line-height:1.6}
.faq li{margin:8px 0}

.footer{border-top:1px solid rgba(148,163,184,.15); padding:26px 0; background:rgba(10,14,20,.55)}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.footer__inner p{margin:0; color:rgba(229,231,235,.75); font-size:13px}
.footer__links{display:flex; gap:14px; font-size:13px; color:rgba(229,231,235,.75)}
.footer__links a{text-decoration:none; opacity:.9}
.footer__links a:hover{opacity:1}

.details__hero{position:relative; overflow:hidden}
.details__hero img{width:100%; height:420px; object-fit:cover; filter:brightness(.75)}
.details__hero .container{position:absolute; left:0; right:0; bottom:24px}
.details__hero h1{margin:0; font-size:42px}
.details__hero p{margin:6px 0 0; color:rgba(229,231,235,.85)}

.metaPills{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.metaPills > span{border:1px solid rgba(148,163,184,.25); border-radius:999px; padding:6px 10px; font-size:13px; background:rgba(10,14,20,.35)}

.mobileBar{display:none}

@media (max-width: 980px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .tourTabs{grid-template-columns:repeat(2, minmax(0,1fr))}
  .heroCards{grid-template-columns:repeat(2, minmax(0,1fr))}
  .gallery{grid-template-columns:1fr 1fr; grid-auto-rows:180px}
  .gallery img:nth-child(1){grid-row:span 1}
}

@media (max-width: 640px){
  .nav__links{display:none}
  .grid-2{grid-template-columns:1fr}
  .hero__title{font-size:36px}
  .hero__content{padding:76px 0 48px}
  .tourTabs{grid-template-columns:1fr}
  .heroCards{grid-template-columns:1fr 1fr}
  .mobileBar{display:flex}
}

/* --------------------------------------------------------------------------
   Legacy styles (tour detail pages)
   -------------------------------------------------------------------------- */

/* Allow using grid-2 / grid-3 / grid-4 without also adding .grid */
.grid-2,.grid-3,.grid-4{display:grid; gap:18px}

.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; letter-spacing:.3px}
.brand__mark{width:28px; height:28px; border-radius:10px; border:1px solid rgba(148,163,184,.25); background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center}
.brand__mark span{width:8px; height:8px; border-radius:999px; background:var(--accent2); display:block}
.brand__text{white-space:nowrap}

.navlinks{display:flex; gap:16px; font-size:14px; color:rgba(229,231,235,.85)}
.navlinks a{text-decoration:none; opacity:.9}
.navlinks a:hover{opacity:1}

.badge{display:inline-flex; align-items:center; gap:8px; width:fit-content; padding:6px 10px; border-radius:999px; border:1px solid rgba(148,163,184,.25); background:rgba(10,14,20,.35); font-size:12px; color:rgba(229,231,235,.9)}
.badge__dot{width:8px; height:8px; border-radius:999px; background:var(--accent2); display:inline-block}

/* Small dot inside meta pills / hero mini rows */
.pip{width:8px; height:8px; border-radius:999px; background:var(--accent2); display:inline-block; margin-right:8px; vertical-align:middle}

.hero__inner{position:relative; z-index:2; padding:90px 0 54px; max-width:980px}

.section--tight{padding:54px 0}
.section__header{margin-bottom:18px}
.section__header h2{margin:0 0 8px; font-size:28px}
.section__header p{margin:0; color:var(--muted)}
.lead{margin:0; color:rgba(229,231,235,.85); line-height:1.65}

.card__kicker{font-size:12px; color:rgba(229,231,235,.70); text-transform:uppercase; letter-spacing:.08em; margin:0 0 8px}
.card__title{margin:0 0 8px; font-size:18px}
.card__text{margin:0 0 10px; color:rgba(229,231,235,.85); font-size:14px; line-height:1.65}
.card__body{display:block}

.list{margin:0; padding-left:18px; color:rgba(229,231,235,.82); font-size:14px; line-height:1.6}
.list li{margin:6px 0}

.fineprint{margin:10px 0 0; color:rgba(148,163,184,.9); font-size:12px; line-height:1.5}

.formCard label{display:block; font-size:13px; color:rgba(229,231,235,.85)}
.formCard input,.formCard select,.formCard textarea{
  width:100%;
  margin-top:6px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.25);
  background:rgba(10,14,20,.55);
  color:var(--text);
  outline:none;
}
.formRow{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.formActions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

/* Footer layout on tour pages */
.footer__grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px; align-items:start}
.footer__brand{margin:0 0 8px; font-weight:700}
.footer__col p{margin:0; color:rgba(229,231,235,.75); font-size:13px; line-height:1.55}
.footer__title{margin:0 0 10px; font-size:14px; color:rgba(229,231,235,.9)}
.footer__list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; font-size:13px}
.footer__list a{text-decoration:none; color:rgba(229,231,235,.75)}
.footer__list a:hover{color:rgba(229,231,235,.95)}
.footer__bottom{border-top:1px solid rgba(148,163,184,.15); margin-top:18px; padding-top:14px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; color:rgba(229,231,235,.65); font-size:13px}

/* Mobile quick actions bar (tour pages) */
.mobileBar{
  position:fixed;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  width:min(560px, 92%);
  padding:10px;
  border-radius:999px;
  background:rgba(10,14,20,.68);
  border:1px solid rgba(148,163,184,.18);
  backdrop-filter: blur(10px);
  display:none;
  gap:8px;
  z-index:60;
}
.mobileBar__btn{
  flex:1;
  text-align:center;
  text-decoration:none;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.20);
  background:rgba(255,255,255,.06);
  color:rgba(229,231,235,.9);
  font-weight:700;
  font-size:13px;
}
.mobileBar__btn--primary{background:var(--accent); border-color:rgba(37,99,235,.55)}

@media (max-width: 980px){
  .footer__grid{grid-template-columns:1fr 1fr}
}

@media (max-width: 640px){
  .navlinks{display:none}
  .formRow{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .mobileBar{display:flex}
}


/* =========================
   V4 adjustments (premium / cleaner)
   ========================= */

/* Brand */
.brand{display:flex; flex-direction:column; gap:2px}
.brand__text{font-weight:850; letter-spacing:.14em; text-transform:uppercase; font-size:15px}
.brand__sub{font-size:12px; color:rgba(229,231,235,.72); letter-spacing:.2px}

/* Replace old nav class names used in v2 */
.nav__links{display:flex; gap:18px; align-items:center}
.nav__links a{color:rgba(229,231,235,.75); font-weight:600; font-size:14px}
.nav__links a:hover{color:rgba(255,255,255,.92)}
.nav__cta{display:flex; gap:10px; align-items:center}
.iconLink{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:999px; border:1px solid rgba(148,163,184,.22); background:rgba(255,255,255,.06)}
.iconLink svg{width:18px; height:18px; fill:rgba(229,231,235,.92)}

/* Hero tweaks */
.hero__eyebrow{font-size:12px; letter-spacing:.24px; text-transform:uppercase; color:rgba(229,231,235,.72); margin-bottom:10px}
.hero__sub{max-width:58ch}
.heroVideo{object-position:50% 58%; transform:scale(1.10)} /* adjusted focal point */
.hero__overlay--warm{
  background:
    radial-gradient(90% 70% at 70% 30%, rgba(255,193,128,.18) 0%, rgba(2,6,23,.10) 55%),
    linear-gradient(180deg, rgba(2,6,23,.25) 0%, rgba(2,6,23,.62) 60%, rgba(2,6,23,.74) 100%);
}
.heroVideo{
  filter: saturate(1.06) contrast(1.07) brightness(.92) sepia(.10);
}

/* Chips */
.hero__chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.chip{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.06);
  color:rgba(229,231,235,.9);
  font-weight:650;
  font-size:13px;
}

/* Tour tiles */
.tourGrid--tiles{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
}
.tourTile{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:rgba(15,23,42,.55);
  border:1px solid rgba(148,163,184,.16);
  min-height:320px;
  box-shadow:0 14px 40px rgba(0,0,0,.25);
}
.tourTile__media{position:absolute; inset:0}
.tourTile__media img{width:100%; height:100%; object-fit:cover; filter:saturate(1.08) contrast(1.08)}
.tourTile__overlay{
  position:absolute; inset:auto 0 0 0;
  padding:18px 18px 16px;
  background:linear-gradient(180deg, rgba(2,6,23,0) 0%, rgba(2,6,23,.66) 38%, rgba(2,6,23,.88) 100%);
}
.tourTile__overlay h3{margin:0 0 6px; font-size:20px}
.tourTile__overlay p{margin:0 0 12px; color:rgba(229,231,235,.78); font-size:13px}
.tourTile__cta{display:inline-flex; gap:8px; align-items:center; color:rgba(255,255,255,.92); font-weight:700; font-size:13px}
.tourTile:hover{transform:translateY(-2px); border-color:rgba(148,163,184,.28)}
.tourTile:hover .tourTile__media img{filter:saturate(1.15) contrast(1.12) brightness(1.02)}

/* Gallery warm veil */
.gallery__item img{filter:saturate(1.05) contrast(1.05)}
.gallery__item::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,190,120,.10) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,.08) 100%);
  pointer-events:none;
  opacity:.9;
}
.gallery__item{position:relative}

/* Meeting + contact cards (ensure dark styles still apply) */
.meetingGrid{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px}
.contactRows{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0}
.contactActions{display:flex; gap:10px; flex-wrap:wrap}

/* Testimonials container (optional JSON) */
.testimonials{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px}
.testimonial{
  border-radius:18px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.04);
  padding:16px 16px 14px;
}
.testimonial__stars{font-size:14px; letter-spacing:2px}
.testimonial__text{margin:10px 0 12px; color:rgba(229,231,235,.86)}
.testimonial__who{color:rgba(229,231,235,.72); font-size:13px}

/* Floating WhatsApp button */
.waFloat{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:60;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px 12px 12px;
  border-radius:999px;
  background:rgba(16,185,129,.96);
  color:#04110a;
  font-weight:800;
  box-shadow:0 14px 30px rgba(0,0,0,.28);
}
.waFloat__icon{
  width:34px; height:34px;
  display:inline-flex;
  align-items:center; justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.82);
}
.waFloat__icon svg{width:22px; height:22px; fill:#0f172a}
.waFloat__label{font-size:13px}
.waFloat:hover{transform:translateY(-1px)}
@media (max-width: 640px){
  .waFloat{right:14px; bottom:14px; padding:11px}
  .waFloat__label{display:none}
}

/* Footer */
.footer__inner{display:flex; justify-content:space-between; gap:14px; align-items:center}
.footer__right{display:flex; gap:14px; flex-wrap:wrap}
.footer__right a{color:rgba(229,231,235,.72)}
.footer__right a:hover{color:rgba(255,255,255,.92)}

/* Responsive */
@media (max-width: 980px){
  .tourGrid--tiles{grid-template-columns:repeat(2, 1fr)}
  .testimonials{grid-template-columns:repeat(2, 1fr)}
  .meetingGrid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .nav__links{display:none}
  .testimonials{grid-template-columns:1fr}
  .tourGrid--tiles{grid-template-columns:1fr}
}


/* Mobile menu */
.nav__toggle{
  display:none;
  width:42px; height:38px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.06);
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:10px;
}
.nav__toggle span{display:block; height:2px; width:18px; background:rgba(229,231,235,.9); border-radius:2px}
.navMobile{
  display:none;
  flex-direction:column;
  gap:10px;
  padding:12px 18px 16px;
  border-bottom:1px solid rgba(148,163,184,.15);
  background: rgba(10,14,20,.75);
}
.navMobile a{color:rgba(229,231,235,.86); text-decoration:none; font-weight:650}
.navMobile a:hover{color:rgba(255,255,255,.95)}
.navMobile.is-open{display:flex}
@media (max-width: 640px){
  .nav__toggle{display:inline-flex}
}


.eyebrowAccent{letter-spacing:.14em; font-weight:800}
.hero__meta{margin:14px 0 0; font-size:13px; letter-spacing:.02em}


/* Subtle “golden hour” veil for media */
.tourTile__media::after,
.gallery__item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,198,120,.18), rgba(255,120,80,.05));
  mix-blend-mode:overlay;
  opacity:.55;
  pointer-events:none;
}.hero__backBtn{
  position:absolute;
  top:18px;
  left:18px;
  z-index:6;
}
@media (max-width: 560px){
  .hero__backBtn{ top:14px; left:14px; }
}


/* ===== v8 quick fixes (focus, brightness, highlights UX) ===== */

/* 8) Make the OMIS SAILING eyebrow/brand slightly larger + more premium */
.brand__text{
  font-size: 18px; /* +20% from 15px */
  letter-spacing: 0.18em;
}

/* 1) Hero video focus: keep the boat centered (less crop) */
.heroVideo{
  object-position: 60% 55%;
  transform: translate(-50%, -50%) scale(1.04);
  filter: brightness(1.02) contrast(1.20) saturate(1.16) sepia(0.10);
}
@media (max-width: 720px){
  .heroVideo{
    object-position: 62% 52%;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

/* 1/2/3) Tour hero background images: brighter + golden-hour veil */
.hero__bg img{
  filter: brightness(1.05) contrast(1.18) saturate(1.14) sepia(0.12);
}

/* 2/3) Tour tiles too dark → brighten + a subtle golden-hour grade */
.tourTile__media img,
.tourTile__media video{
  filter: brightness(1.18) contrast(1.15) saturate(1.15) sepia(0.08);
}
.tourTile:hover .tourTile__media img,
.tourTile:hover .tourTile__media video{
  filter: brightness(1.22) contrast(1.17) saturate(1.18) sepia(0.08);
}
.tourTile__overlay{
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.42) 70%, rgba(0,0,0,0.68));
}

/* 6) "Back to tours" as a subtle pill at the top of the hero image */
.heroBackPill{
  position: absolute;
  top: 92px; /* below sticky nav */
  left: 22px;
  z-index: 6;
}
@media (max-width: 720px){
  .heroBackPill{
    top: 78px;
    left: 14px;
  }
}


/* ===== v9 ultra quick fixes (clean hero + brighter premium look) ===== */

/* Global typography (Microsoft YaHei vibe + cleaner letter shapes) */
body{
  font-family:"Microsoft YaHei","Microsoft YaHei UI","PingFang SC","Hiragino Sans GB","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1100px 720px at 12% 0%, rgba(255,190,110,0.22) 0%, transparent 60%),
    radial-gradient(1000px 720px at 88% 12%, rgba(62,160,255,0.22) 0%, transparent 60%),
    linear-gradient(180deg, #15263d 0%, #0b1323 100%);
}

/* Overall brightness (lift shadows but keep deep blue) */
.section--dark{background:rgba(3,5,8,.42)}
.section--soft{background:rgba(255,255,255,.02)}
.card{background:rgba(255,255,255,.06)}
.footer{background:rgba(10,14,20,.42)}
.form input,.form select,.form textarea,
.formCard input,.formCard select,.formCard textarea{
  background:rgba(10,14,20,.42);
}

/* Header: remove “bar” feel at top, keep readability on scroll */
.header{
  background: rgba(10,14,20,.10);
  border-bottom: 1px solid rgba(148,163,184,.08);
}
.header.is-scrolled{
  background: rgba(10,14,20,.55);
  border-bottom: 1px solid rgba(148,163,184,.16);
}

/* Mobile dropdown: overlay (doesn't push content) */
.navMobile{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  width:100%;
  max-height: calc(100vh - 76px);
  overflow:auto;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
}

/* Hero video: true full-bleed cover + centered focal point across breakpoints */
.hero--video .hero__bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  transform:none;
  filter:none;
}
.hero--video .heroVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: 50% 52%;
  transform: scale(1.06);
  transform-origin:center;
  filter: brightness(1.30) contrast(1.08) saturate(1.14) sepia(0.08);
}
@media (max-width: 980px){
  .hero--video .heroVideo{
    object-position: 50% 50%;
    transform: scale(1.12);
  }
}
@media (max-width: 640px){
  .hero--video .heroVideo{
    object-position: 50% 45%;
    transform: scale(1.18);
  }
}

/* Lighter (still premium) overlay so media reads brighter */
.hero__overlay{
  background:
    radial-gradient(60% 80% at 25% 25%, rgba(0,0,0,.12) 0%, rgba(0,0,0,.62) 70%),
    linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.58) 100%);
}
.hero__overlay--warm{
  background:
    radial-gradient(90% 70% at 70% 30%, rgba(255,193,128,.24) 0%, rgba(2,6,23,.06) 55%),
    linear-gradient(180deg, rgba(2,6,23,.16) 0%, rgba(2,6,23,.42) 60%, rgba(2,6,23,.54) 100%);
}

/* Smooth fade into the next section */
.hero__fade{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:120px;
  background: linear-gradient(180deg, rgba(11,19,35,0) 0%, rgba(11,19,35,1) 100%);
  pointer-events:none;
}

/* Hero: ultra minimal (title + subtitle + one pill) */
.hero__content--minimal{
  justify-content:space-between;
  padding:94px 0 44px;
}
.hero__content--minimal .hero__main{max-width: 62ch}
.hero__content--minimal .hero__title,
.hero__content--minimal .hero__lead{
  text-shadow: 0 14px 40px rgba(0,0,0,.55);
}
.hero__actions--single{margin-top:18px}
.hero__meta{
  margin:0;
  width:fit-content;
  align-self:center;
  text-align:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(10,14,20,.22);
  color:rgba(229,231,235,.88);
}
@media (max-width: 640px){
  .hero__content--minimal{padding:84px 0 38px}
}

/* Tours + galleries: lift brightness at least ~30% */
.tourTile{
  background:rgba(15,23,42,.42);
}
.tourTile__media img,
.tourTile__media video{
  filter: brightness(1.30) contrast(1.10) saturate(1.14) sepia(0.06);
}
.tourTile:hover .tourTile__media img,
.tourTile:hover .tourTile__media video{
  filter: brightness(1.36) contrast(1.12) saturate(1.18) sepia(0.06);
}
.tourTile__overlay{
  background: linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.34) 70%, rgba(0,0,0,0.56));
}

/* Tour detail hero images */
.hero__bg img{
  filter: brightness(1.30) contrast(1.08) saturate(1.12) sepia(0.08);
}

/* Details hero (legacy) */
.details__hero img{
  filter: brightness(1.10) contrast(1.06) saturate(1.10) sepia(0.06);
}

/* Gallery */
.gallery__item img{
  filter: brightness(1.14) contrast(1.05) saturate(1.06);
}

/* FAQ block on homepage */
.faq{padding-left:0}
.faq ul{margin:10px 0 0; padding-left:18px}

/* Homepage layout helpers (were previously unstyled) */
.sectionHead{margin-bottom:18px}
.sectionHead h2{margin:0 0 8px; font-size:28px}
.sectionHead p{margin:0}

.infoGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}
.infoCard{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(148,163,184,.18);
  border-radius:var(--radius);
  padding:18px;
}
.infoCard h3{margin:0 0 10px; font-size:18px}
.infoCard ul{margin:0; padding-left:18px; color:rgba(229,231,235,.84); font-size:14px; line-height:1.6}
.infoCard ul li{margin:6px 0}

.mapCard,
.contactCard{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(148,163,184,.18);
  border-radius:var(--radius);
  overflow:hidden;
}
.mapCard iframe{width:100%; height:100%; min-height:420px; display:block}
.contactCard{padding:18px}
.contactCard h3{margin:0 0 8px}

@media (max-width: 980px){
  .infoGrid{grid-template-columns:1fr}
  .mapCard iframe{min-height:360px}
}


/* ===== v10 tweaks (viewport stability + clean hero flow) ===== */

/* Kill horizontal “swim” */
html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; }

/* Fix background seams by keeping the gradient fixed (no “break” mid-text) */
body{
  background:#0b1323;
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(1100px 720px at 12% 0%, rgba(255,190,110,0.22) 0%, transparent 60%),
    radial-gradient(1000px 720px at 88% 12%, rgba(62,160,255,0.22) 0%, transparent 60%),
    linear-gradient(180deg, #15263d 0%, #0b1323 100%);
}

/* Header is overlay (doesn’t push the hero down) */
:root{ --header-h: 72px; }

.header{
  position:fixed;
  left:0;
  right:0;
  top:0;
}

/* Anchor scrolling should account for the fixed header */
section[id]{ scroll-margin-top: calc(var(--header-h) + 16px); }

/* Make hero a true full-viewport scene (prevents “Choose your tour” peeking) */
.hero--video .hero__content{
  min-height:100vh;
}
@supports (min-height: 100svh){
  .hero--video .hero__content{ min-height:100svh; }
}

/* More cinematic spacing: push everything away from the video */
.hero__content--minimal{
  padding-top: calc(var(--header-h) + 34px);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* Lower the “Family-run…” pill closer to the bottom edge */
.hero__meta{
  margin-bottom:0;
}

/* Softer, longer fade into the next section (and match fixed bg) */
.hero__fade{
  height:160px;
  background: linear-gradient(180deg, rgba(11,19,35,0) 0%, #0b1323 100%);
}

/* Remove eyebrow from header (we place info on hero instead) */
.brand__sub{ display:none !important; }

/* Mobile: remove dropdown menu entirely (less clutter, no overflow) */
@media (max-width: 640px){
  .nav__toggle{ display:none !important; }
  .navMobile{ display:none !important; }

  .hero__content--minimal{
    padding-top: calc(var(--header-h) + 28px);
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .hero__meta{
    font-size:12px;
    padding:8px 10px;
  }
}


/* Smooth native anchor scrolling (no JS) */
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}


/* Language switcher */
.langSwitch{display:flex; gap:6px; align-items:center}
.langSwitch a{font-size:12px; letter-spacing:.14em; font-weight:800; text-transform:uppercase; text-decoration:none; color:rgba(229,231,235,.9); padding:6px 10px; border-radius:999px; border:1px solid rgba(148,163,184,.22); background:rgba(255,255,255,.05); opacity:.9}
.langSwitch a:hover{opacity:1}
.langSwitch a.is-active{background:rgba(59,130,246,.22); border-color:rgba(59,130,246,.35); opacity:1}
.langMini{display:none; position:relative; align-items:center}
.langMini__btn{
  font-size:12px; letter-spacing:.14em; font-weight:800; text-transform:uppercase;
  color:rgba(229,231,235,.92);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.05);
  opacity:.95;
  cursor:pointer;
}
.langMini__btn:hover{opacity:1}
.langMini__btn::after{content:"▾"; margin-left:6px; opacity:.75}
.langMini__menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:120px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.22);
  background: rgba(10,18,32,.92);
  backdrop-filter: blur(12px);
  overflow:hidden;
  z-index: 9999;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.langMini__menu a{
  display:block;
  padding:10px 12px;
  font-size:12px;
  letter-spacing:.14em;
  font-weight:800;
  text-transform:uppercase;
  text-decoration:none;
  color:rgba(229,231,235,.88);
}
.langMini__menu a:hover{background:rgba(255,255,255,.08); color:rgba(255,255,255,.95)}
.langMini__menu a.is-active{background:rgba(59,130,246,.18); color:rgba(255,255,255,.96)}
@media (max-width: 640px){
  .langSwitch{display:none}
  .langMini{display:flex}
}
.navMobile__divider{height:1px; width:100%; background:rgba(148,163,184,.18); margin:6px 0}
.navMobile__langs{display:flex; gap:10px; flex-wrap:wrap}
.navMobile__langs a{font-weight:800}


/* Universal language hamburger (all breakpoints) */
.langBurger{
  position:relative;
  flex-shrink:0;
}
.langBurger__btn{
  list-style:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.14em;
  font-weight:900;
  text-transform:uppercase;
  color:rgba(229,231,235,.92);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.05);
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.langBurger__btn::-webkit-details-marker{ display:none; }
.langBurger__btn::after{
  content:"☰";
  font-size:12px;
  opacity:.75;
}
.langBurger[open] .langBurger__btn{opacity:1; background:rgba(255,255,255,.08);}

.langBurger__menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:120px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.22);
  background: rgba(10,18,32,.92);
  backdrop-filter: blur(12px);
  overflow:hidden;
  z-index: 9999;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.langBurger__menu a{
  display:block;
  padding:10px 12px;
  font-size:12px;
  letter-spacing:.14em;
  font-weight:900;
  text-transform:uppercase;
  text-decoration:none;
  color:rgba(229,231,235,.88);
}
.langBurger__menu a:hover{
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.95);
}
.langBurger__menu a.is-active{
  background:rgba(59,130,246,.18);
  color:rgba(255,255,255,.96);
}