/* Hurghada Family Tours - Site Styles - extracted for caching/performance */

/* Fallback fonts sized to match Google Fonts metrics exactly - prevents layout shift */
@font-face {
  font-family: 'Nunito-fallback';
  src: local('Arial');
  ascent-override: 100.69%;
  descent-override: 34.62%;
  line-gap-override: 0%;
  size-adjust: 99.78%;
}
@font-face {
  font-family: 'Fraunces-fallback';
  src: local('Georgia');
  ascent-override: 93.21%;
  descent-override: 23.30%;
  line-gap-override: 0%;
  size-adjust: 107.49%;
}
body { font-family: 'Nunito', 'Nunito-fallback', system-ui, Arial, sans-serif; }
h1, h2, h3, .sec-title, .tc-name, .hero h1 { 
  font-family: 'Fraunces', 'Fraunces-fallback', Georgia, serif; 
}
/* Reserve space for hero to prevent CLS */
.hero-content { min-height: clamp(280px, 50vw, 340px); }

:root{--sun:#F5A623;--sun2:#FFD166;--sky:#0B9ED9;--sky2:#4DC9F6;--sea:#006994;--sea2:#0891B2;--sand:#FFF8EE;--sand2:#FFF0D6;--white:#FFFFFF;--dark:#1A2E3B;--text:#2D4A5A;--muted:#6B8A9A;--border:rgba(11,158,217,0.15);--shadow:0 8px 32px rgba(0,105,148,0.12)}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{font-family:'Nunito',sans-serif;background:var(--white);color:var(--text);overflow-x:hidden}
a{text-decoration:none;color:inherit}img{max-width:100%;display:block}
[data-lang]{display:none}[data-lang].on{display:block}span[data-lang].on,b[data-lang].on,em[data-lang].on{display:inline}

/* NAV */
#nav{position:fixed;top:0;width:100%;z-index:999;transition:all 0.3s;padding:0 5%}
#nav.scrolled{background:rgba(255,255,255,0.97);backdrop-filter:blur(16px);box-shadow:0 2px 20px rgba(11,158,217,0.15)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav-logo{display:flex;align-items:center;gap:10px}.nav-logo-img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 2px 10px rgba(0,0,0,0.2)}
.nav-logo-text{font-family:'Fraunces',serif;font-size:1.1rem;color:var(--white);font-weight:700;line-height:1.1;transition:color 0.3s}
#nav.scrolled .nav-logo-text{color:var(--dark)}
.nav-logo-text span{color:var(--sky2);display:block;font-size:0.78rem;font-weight:600;font-family:'Nunito',sans-serif}
#nav.scrolled .nav-logo-text span{color:var(--sky)}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{color:rgba(255,255,255,0.9);font-size:0.8rem;font-weight:700;letter-spacing:0.02em;transition:color 0.2s}
#nav.scrolled .nav-links a{color:var(--text)}
.nav-links a:hover{color:var(--sun2)}
#nav.scrolled .nav-links a:hover{color:var(--sky)}
.nav-cta{background:var(--sun);color:var(--white)!important;padding:9px 20px;border-radius:50px;font-weight:800!important;font-size:0.78rem!important;display:flex;align-items:center;gap:6px;transition:all 0.3s!important;box-shadow:0 4px 14px rgba(245,166,35,0.35)}
.nav-cta:hover{background:#e8950f!important;transform:translateY(-2px)!important}
.langs{display:flex;gap:4px}
.lb{background:transparent;border:2px solid rgba(255,255,255,0.35);color:rgba(255,255,255,0.8);font-family:'Nunito',sans-serif;font-size:0.68rem;font-weight:700;padding:4px 9px;border-radius:20px;cursor:pointer;transition:all 0.2s}
#nav.scrolled .lb{border-color:var(--border);color:var(--muted)}
.lb:hover,.lb.on{background:var(--sky);border-color:var(--sky);color:var(--white)!important}

/* HERO — real photo background */
.hero{min-height:72vh;position:relative;display:flex;align-items:center;overflow:hidden;padding:88px 5% 56px}
.hero-photo-bg{position:absolute;inset:0;overflow:hidden;background:linear-gradient(135deg,#004E6B 0%,#0B9ED9 60%,#22d3ee 100%)}
.hero-photo-bg img{width:100%;height:100%;object-fit:cover;object-position:center center;filter:brightness(0.62)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.35) 0%,rgba(0,0,0,0.38) 45%,rgba(0,0,0,0.52) 100%)}
.hero-wave{position:absolute;bottom:-2px;left:0;width:100%;z-index:1}
.hero-content{position:relative;z-index:2;max-width:720px;animation:rise 1s ease both}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.18);border:2px solid rgba(255,255,255,0.4);border-radius:50px;padding:7px 18px;margin-bottom:22px;backdrop-filter:blur(8px)}
.hero-badge-stars{color:var(--sun2);font-size:0.85rem;letter-spacing:2px}
.hero-badge-text{color:var(--white);font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase}
.hero h1{font-family:'Fraunces',serif;font-size:clamp(2.6rem,5.5vw,4.8rem);font-weight:700;line-height:1.05;color:var(--white);margin-bottom:6px;text-shadow:0 2px 20px rgba(0,0,0,0.3)}
.hero h1 em{font-style:italic;color:var(--sun2)}
.hero-sub{font-size:1rem;color:rgba(255,255,255,0.92);line-height:1.72;margin:16px 0 30px;font-weight:500;max-width:520px;text-shadow:0 1px 8px rgba(0,0,0,0.25)}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px}
.btn-wa{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:var(--white);padding:14px 28px;border-radius:50px;font-size:0.88rem;font-weight:800;transition:all 0.3s;box-shadow:0 6px 24px rgba(37,211,102,0.4)}
.btn-wa:hover{background:#1ebe59;transform:translateY(-3px)}
.btn-ghost-hero{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.18);color:var(--white);padding:14px 26px;border-radius:50px;font-size:0.85rem;font-weight:700;border:2px solid rgba(255,255,255,0.4);backdrop-filter:blur(8px);transition:all 0.3s}
.btn-ghost-hero:hover{background:rgba(255,255,255,0.28)}
.hero-trust{display:flex;gap:12px;flex-wrap:wrap}
.tp{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);border-radius:50px;padding:7px 14px;backdrop-filter:blur(6px)}
.tp-icon{font-size:1.1rem}
.tp-num{font-family:'Fraunces',serif;font-size:1.15rem;font-weight:700;color:var(--sun2);line-height:1}
.tp-label{font-size:0.62rem;font-weight:700;color:rgba(255,255,255,0.85);text-transform:uppercase;letter-spacing:0.07em;line-height:1.2}

/* SECTIONS */
.section{padding:76px 5%}
.sec-inner{max-width:1200px;margin:0 auto}
.sec-ey{display:flex;align-items:center;gap:10px;font-size:0.7rem;font-weight:800;letter-spacing:0.15em;text-transform:uppercase;color:var(--sky);margin-bottom:10px}
.sec-ey::before{content:'';width:22px;height:3px;background:var(--sun);border-radius:2px}
.sec-title{font-family:'Fraunces',serif;font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:700;line-height:1.15;color:var(--dark);margin-bottom:12px}
.sec-title em{font-style:italic;color:var(--sky)}
.sec-desc{color:var(--muted);font-size:0.92rem;line-height:1.8;font-weight:500;max-width:500px}

/* TOURS */
.tours-bg{background:var(--sand)}
.tours-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(275px,100%),1fr));gap:18px;margin-top:44px}
.tc{background:var(--white);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);transition:all 0.35s}
.tc:hover{transform:translateY(-8px);box-shadow:0 20px 48px rgba(0,105,148,0.18)}
.tc-img{height:215px;overflow:hidden;position:relative}
.tc-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s}
.tc:hover .tc-img img{transform:scale(1.06)}
.tc-badge{position:absolute;top:12px;left:12px;background:var(--sun);color:var(--white);font-size:0.6rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;padding:4px 11px;border-radius:50px}
.tc-price{position:absolute;top:12px;right:12px;background:rgba(255,255,255,0.96);color:var(--dark);font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;padding:5px 11px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.tc-price small{font-family:'Nunito',sans-serif;font-size:0.58rem;font-weight:700;color:var(--muted);text-transform:uppercase}
.tc-body{padding:18px}
.tc-cat{font-size:0.62rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--sky);margin-bottom:5px}
.tc-name{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:700;color:var(--dark);line-height:1.2;margin-bottom:7px}
.tc-desc{font-size:0.8rem;color:var(--muted);line-height:1.62;font-weight:500;margin-bottom:14px}
.tc-footer{display:flex;gap:9px}
.tc-det{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;background:var(--sky);color:var(--white);padding:10px;border-radius:11px;font-size:0.73rem;font-weight:800;transition:background 0.2s}
.tc-det:hover{background:#0882c0}
.tc-wa{display:flex;align-items:center;justify-content:center;background:#25D366;color:var(--white);padding:10px 13px;border-radius:11px;font-size:0.95rem;transition:background 0.2s}
.tc-wa:hover{background:#1ebe59}

/* PHOTOS */
.photos-bg{background:var(--white)}
.masonry{columns:3;column-gap:10px;margin-top:40px}
@media(max-width:768px){.masonry{columns:2}}
@media(max-width:480px){.masonry{columns:1}}
.pi{break-inside:avoid;margin-bottom:10px;border-radius:14px;overflow:hidden}
.pi img{width:100%;display:block;filter:brightness(0.9);transition:all 0.5s}
.pi:hover img{filter:brightness(1);transform:scale(1.03)}

/* WHY US */
.why-bg{background:linear-gradient(135deg,#0891B2 0%,#0B9ED9 50%,#22d3ee 100%)}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:18px;margin-top:44px}
.wc{background:rgba(255,255,255,0.12);border:2px solid rgba(255,255,255,0.2);border-radius:18px;padding:26px 22px;text-align:center;backdrop-filter:blur(8px);transition:all 0.3s}
.wc:hover{background:rgba(255,255,255,0.2);transform:translateY(-4px)}
.wc-icon{font-size:2.3rem;margin-bottom:12px}
.wc-title{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:700;color:var(--white);margin-bottom:7px}
.wc-text{font-size:0.8rem;color:rgba(255,255,255,0.85);line-height:1.68;font-weight:500}

/* REVIEWS */
.rv-bg{background:var(--sand)}
.rv-head{text-align:center;margin-bottom:44px}
.rv-head .sec-ey{justify-content:center}
.rv-head .sec-ey::before{display:none}
.g-badge{display:inline-flex;align-items:center;gap:10px;background:var(--white);border:2px solid #fbbc04;border-radius:50px;padding:9px 20px;margin-top:12px;box-shadow:0 4px 16px rgba(251,188,4,0.18)}
.g-g{font-size:1.05rem;font-weight:900;color:#4285F4;font-family:Georgia,serif}
.g-text{font-size:0.76rem;font-weight:700;color:var(--dark)}
.g-stars{color:#fbbc04;font-size:0.88rem;letter-spacing:2px}
.rv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:18px}
.rvc{background:var(--white);border-radius:18px;padding:26px;box-shadow:var(--shadow);transition:all 0.3s}
.rvc:hover{transform:translateY(-4px)}
.rv-stars{color:#fbbc04;font-size:0.95rem;letter-spacing:2px;margin-bottom:12px}
.rv-text{font-size:0.86rem;color:var(--text);line-height:1.72;font-weight:500;margin-bottom:16px;font-style:italic}
.rv-auth{display:flex;align-items:center;gap:11px}
.rv-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--sky),var(--sky2));display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.rv-nm{font-weight:800;font-size:0.83rem;color:var(--dark)}
.rv-lc{font-size:0.7rem;color:var(--muted);font-weight:600}
.rv-more{text-align:center;margin-top:32px}
.btn-ol{display:inline-flex;align-items:center;gap:7px;border:2px solid var(--sky);color:var(--sky);padding:11px 26px;border-radius:50px;font-size:0.8rem;font-weight:800;transition:all 0.3s}
.btn-ol:hover{background:var(--sky);color:var(--white)}

/* ABOUT */
.about-bg{background:var(--white)}
.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ap{border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.ap img{width:100%;height:190px;object-fit:cover;filter:brightness(0.9);transition:all 0.5s}
.ap:hover img{filter:brightness(1)}
.ap.tall img{height:290px}
.at p{color:var(--muted);font-size:0.9rem;line-height:1.82;font-weight:500;margin-bottom:13px}
.at p strong{color:var(--dark)}
.a-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.asi{background:var(--sand);border-radius:12px;padding:14px;text-align:center;border:2px solid var(--sand2)}
.asi-num{font-family:'Fraunces',serif;font-size:1.7rem;font-weight:700;color:var(--sky)}
.asi-label{font-size:0.65rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.07em}
.pickup-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.pickup-pill{background:var(--sky);color:var(--white);font-size:0.68rem;font-weight:700;padding:4px 11px;border-radius:50px}

/* FAQ */
.faq-bg{background:var(--sand)}
.faq-wrap{max-width:780px;margin:0 auto}
.faq-list{margin-top:40px;display:flex;flex-direction:column;gap:10px}
.fi{background:var(--white);border-radius:14px;box-shadow:0 2px 10px rgba(0,105,148,0.07);overflow:hidden}
.fq{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;cursor:pointer;font-weight:700;font-size:0.9rem;color:var(--dark);transition:background 0.2s;user-select:none}
.fq:hover{background:var(--sand)}
.fq-icon{font-size:1.15rem;flex-shrink:0;transition:transform 0.3s;color:var(--sky)}
.fi.open .fq-icon{transform:rotate(45deg)}
.fa{max-height:0;overflow:hidden;transition:max-height 0.35s ease,padding 0.25s}
.fi.open .fa{max-height:300px;padding:0 22px 18px}
.fa p{font-size:0.86rem;color:var(--muted);line-height:1.72;font-weight:500}

/* BOOKING */
.book-bg{background:linear-gradient(135deg,#004E6B 0%,#006994 50%,#0891B2 100%)}
.book-inner{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;align-items:center;max-width:1100px;margin:0 auto}
.bt .sec-title{color:var(--white)}.bt .sec-ey{color:var(--sun2)}.bt .sec-desc{color:rgba(255,255,255,0.8)}
.bc{margin-top:22px;display:flex;flex-direction:column;gap:9px}
.bci{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,0.9);font-size:0.83rem;font-weight:600}
.bci-icon{font-size:1rem;width:26px;text-align:center}
.form{background:var(--white);border-radius:22px;padding:28px;box-shadow:0 16px 48px rgba(0,0,0,0.2)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fg{display:flex;flex-direction:column;gap:5px}
.fg label{font-size:0.65rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--sky)}
.fg input,.fg select,.fg textarea{background:var(--sand);border:2px solid transparent;color:var(--dark);padding:11px 13px;border-radius:11px;font-family:'Nunito',sans-serif;font-size:16px;font-weight:600;outline:none;transition:border-color 0.25s;-webkit-appearance:none;appearance:none}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--sky);background:var(--white)}
.btn-sub{width:100%;background:var(--sun);color:var(--white);border:none;padding:14px;border-radius:12px;font-family:'Nunito',sans-serif;font-size:0.88rem;font-weight:800;cursor:pointer;transition:all 0.3s;margin-top:7px;display:flex;align-items:center;justify-content:center;gap:7px}
.btn-sub:hover{background:#e8950f;transform:translateY(-2px)}

/* INSTAGRAM */
@media(max-width:768px){}

/* FOOTER */
footer{background:var(--dark);padding:50px 5% 24px}
.ft{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:36px}
.fb-logo{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.fb-sun{font-size:1.7rem}
.fb-name{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:700;color:var(--white)}
.fb-name span{color:var(--sky2);display:block;font-size:0.78rem;font-family:'Nunito',sans-serif;font-weight:600}
.fd{font-size:0.8rem;color:#8BA4B0;line-height:1.72;font-weight:500;margin-bottom:14px}
.fsoc{display:flex;gap:9px}
.fsb{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:0.95rem;transition:all 0.2s;color:var(--white)}
.fsb:hover{background:var(--sky);transform:translateY(-2px)}
.fc-title{font-size:0.62rem;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--sky2);margin-bottom:14px}
.fc a,.fc p{display:block;color:#8BA4B0;font-size:0.8rem;line-height:1.9;font-weight:500;transition:color 0.2s}
.fc a:hover{color:var(--white)}
.fb-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:9px}
.fb-bottom p{font-size:0.7rem;color:#6B8A9A}
.float-wa{position:fixed;bottom:22px;right:22px;z-index:998;background:#25D366;color:var(--white);padding:13px 20px;border-radius:50px;font-family:'Nunito',sans-serif;font-size:0.73rem;font-weight:800;display:flex;align-items:center;gap:7px;box-shadow:0 6px 28px rgba(37,211,102,0.4);transition:all 0.3s}
.float-wa:hover{background:#1ebe59;transform:translateY(-3px)}
.reveal{opacity:1;transform:translateY(0);transition:opacity 0.6s ease,transform 0.6s ease}.reveal.hidden{opacity:0;transform:translateY(22px)}
.reveal.visible{opacity:1;transform:translateY(0)}
@media(max-width:1024px){.about-inner,.book-inner{grid-template-columns:1fr}.ft{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.hero{padding-top:80px}.hero h1{font-size:2.4rem}.masonry{columns:2}.ft{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}
@media(max-width:480px){.masonry{columns:1}.hero-trust{gap:9px}}


/* ══════════════════════════════════════════════
   MOBILE-FIRST ENHANCEMENTS — All Pages
   Target: 90+ Lighthouse Mobile Score
══════════════════════════════════════════════ */

/* Base: prevent overflow on any element */
html { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; max-width: 100%; }
img, video, iframe { max-width: 100%; height: auto; display: block; }

/* Smooth scrolling with reduced motion respect */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Table overflow — scrollable on mobile */
.table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; border-radius: 12px; }
table { min-width: unset !important; width: 100%; }

/* ── NAV HAMBURGER ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
  z-index: 1003;
  width: 48px;
  height: 48px;
  align-items: center;
  margin-left: 6px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
  transform-origin: center;
  pointer-events: none;
}
#nav.scrolled .nav-hamburger span { background: #1A2E3B; }
.nav-hamburger.open span { background: #1A2E3B; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Backdrop behind mobile menu */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 30, 45, 0.45);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.nav-backdrop.show { display: block; opacity: 1; }

/* Prevent background scroll when menu open — handled via JS inline styles */

/* Language switcher inside mobile menu — hidden on desktop */
.nav-langs-mobile { display: none !important; }

/* ── MOBILE BREAKPOINT 768px ── */
@media (max-width: 768px) {

  /* --- NAV --- */
  .nav-hamburger { display: flex !important; }

  /* Hide language buttons from top bar on mobile — they appear inside the menu */
  .nav-inner > .langs { display: none !important; }

  .nav-logo-text { font-size: 1rem; }
  .nav-logo-text span { font-size: 0.7rem; }

  .nav-links {
    display: flex !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(86vw, 360px);
    background: #ffffff;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    z-index: 1002;
    padding: 84px 0 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -8px 0 30px rgba(0,0,0,0.18);
    visibility: hidden;
  }
  .nav-links.mobile-open { transform: translateX(0); visibility: visible; }

  .nav-links a {
    color: #1A2E3B !important;
    padding: 16px 24px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    width: 100% !important;
    text-align: left !important;
    transition: background 0.2s, color 0.2s !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .nav-links a:hover, .nav-links a:active { background: #f0f9ff !important; color: #0B9ED9 !important; }
  .nav-links a.nav-cta, .nav-links a.nav-wa {
    background: #25D366 !important;
    color: white !important;
    border-radius: 50px !important;
    margin: 16px 20px !important;
    width: calc(100% - 40px) !important;
    justify-content: center !important;
    text-align: center !important;
    border-bottom: none !important;
  }
  .nav-links a.nav-cta { background: #F5A623 !important; }

  /* Language switcher inside mobile menu */
  .nav-langs-mobile {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    padding: 20px 20px 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: 8px;
  }
  .nav-langs-mobile .lb {
    background: transparent;
    border: 2px solid #cbd5e1;
    color: #1A2E3B;
    font-family: 'Nunito', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 10px 14px;
    min-width: 48px;
    min-height: 44px;
    border-radius: 12px;
    cursor: pointer;
  }
  .nav-langs-mobile .lb.on { background: #0B9ED9; border-color: #0B9ED9; color: #fff; }

  /* --- HERO --- */
  .hero { padding: 76px 4% 48px !important; min-height: 85vh !important; }
  .hero h1 { font-size: clamp(2rem, 8vw, 2.8rem) !important; line-height: 1.1 !important; }
  .hero-sub { font-size: 0.88rem !important; line-height: 1.7 !important; margin: 12px 0 22px !important; }
  .hero-badge { padding: 6px 14px !important; margin-bottom: 16px !important; }
  .hero-badge-text { font-size: 0.62rem !important; }
  .hero-ctas { flex-direction: column !important; gap: 10px !important; margin-bottom: 24px !important; }
  .hero-ctas a, .btn-wa, .btn-ghost-hero { width: 100% !important; justify-content: center !important; text-align: center !important; }
  .hero-img-right { display: none !important; }

  /* Trust pills — show all 4 but smaller */
  .hero-trust { gap: 6px !important; flex-wrap: wrap !important; }
  .tp { padding: 6px 10px !important; gap: 6px !important; flex: 1 1 calc(50% - 6px) !important; min-width: 0 !important; }
  .tp-icon { font-size: 0.9rem !important; }
  .tp-num { font-size: 0.95rem !important; }
  .tp-label { font-size: 0.55rem !important; }

  /* --- SECTIONS --- */
  .section { padding: 52px 4% !important; }
  .sec-inner { padding: 0 !important; }
  .sec-title { font-size: clamp(1.6rem, 5.5vw, 2.2rem) !important; line-height: 1.15 !important; }
  .sec-ey { font-size: 0.62rem !important; }
  .sec-desc { font-size: 0.88rem !important; max-width: 100% !important; }

  /* --- TOUR CARDS --- */
  .tours-grid { grid-template-columns: 1fr !important; gap: 16px !important; margin-top: 28px !important; }
  .tc { border-radius: 16px !important; }
  .tc-img { height: 200px !important; }
  .tc-body { padding: 16px !important; }
  .tc-name { font-size: 1.1rem !important; }
  .tc-desc { font-size: 0.79rem !important; }
  .tc-footer { gap: 8px !important; }
  .tc-det { font-size: 0.72rem !important; padding: 11px 8px !important; }
  .tc-wa { padding: 11px 14px !important; font-size: 1rem !important; }

  /* --- WHY US --- */
  .why-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .wc { padding: 20px 14px !important; border-radius: 14px !important; }
  .wc-icon { font-size: 1.8rem !important; margin-bottom: 8px !important; }
  .wc-title { font-size: 0.95rem !important; }
  .wc-text { font-size: 0.75rem !important; }

  /* --- REVIEWS --- */
  .rv-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .rvc { padding: 20px !important; border-radius: 14px !important; }
  .rv-text { font-size: 0.83rem !important; }
  .rv-more { margin-top: 20px !important; }

  /* --- PHOTO MASONRY --- */
  .masonry { columns: 2 !important; column-gap: 8px !important; }
  .photos-masonry { columns: 2 !important; column-gap: 8px !important; }
  .pi, .photos-pi { margin-bottom: 8px !important; border-radius: 10px !important; }

  /* --- ABOUT --- */
  .about-inner { grid-template-columns: 1fr !important; gap: 24px !important; }
  .about-photos { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .ap img { height: 140px !important; }
  .ap.tall img { height: 140px !important; }
  .at p { font-size: 0.85rem !important; }
  .a-stats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .asi { padding: 12px !important; }
  .asi-num { font-size: 1.4rem !important; }
  .pickup-row { gap: 5px !important; }
  .pickup-pill { font-size: 0.62rem !important; padding: 3px 9px !important; }

  /* --- FAQ --- */
  .faq-wrap { max-width: 100% !important; }
  .fq { font-size: 0.85rem !important; padding: 15px 16px !important; gap: 10px !important; }
  .fa p { font-size: 0.82rem !important; }
  .fi.open .fa { padding: 0 16px 15px !important; }

  /* --- BOOKING FORM --- */
  .book-inner { grid-template-columns: 1fr !important; gap: 24px !important; padding: 0 2% !important; }
  .form { padding: 20px 16px !important; border-radius: 16px !important; }
  .form-row { grid-template-columns: 1fr !important; gap: 10px !important; }
  .fg input, .fg select, .fg textarea { font-size: 1rem !important; padding: 12px !important; }
  .btn-sub { font-size: 0.95rem !important; padding: 15px !important; }
  .bc { gap: 7px !important; }
  .bci { font-size: 0.8rem !important; }

  /* --- FOOTER --- */
  .ft { grid-template-columns: 1fr !important; gap: 20px !important; }
  .fb-bottom { flex-direction: column !important; gap: 6px !important; text-align: center; }
  footer { padding: 40px 4% 20px !important; }
  .fd { font-size: 0.78rem !important; }
  .fc a, .fc p { font-size: 0.78rem !important; }

  /* --- FLOAT BUTTONS --- */
  .float-wa { bottom: 14px !important; right: 14px !important; font-size: 0.7rem !important; padding: 11px 16px !important; border-radius: 40px !important; }

  /* --- CHAT WIDGET --- */

  /* --- TOUR INNER PAGES (page-layout) --- */
  .page-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
  .main { grid-template-columns: 1fr !important; gap: 24px !important; }
  .sidebar { order: -1 !important; }
  .sidebar .book-card { border-radius: 16px !important; padding: 20px !important; }
  .tc-photo, .ic-photo { min-height: 200px !important; max-height: 240px !important; }
  .eco-photo img { height: 180px !important; }
  .eco-photo.tall img { height: 180px !important; }

  /* --- INCLUSION GRID --- */
  .inc-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .inc-item { padding: 14px 10px !important; font-size: 0.8rem !important; }

  /* --- ALSO-LIKE CARDS --- */
  .also-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .also-img { height: 130px !important; }
  .also-name { font-size: 0.78rem !important; }

  /* --- GUARANTEE BADGE --- */
  .guarantee-badge { flex-direction: column !important; text-align: center !important; padding: 12px !important; }
  .gb-pct { font-size: 2.4rem !important; }

  /* --- HERO ECO BADGE --- */
  .hero-eco-badge { padding: 5px 12px !important; margin-bottom: 14px !important; }
  .hero-eco-text { font-size: 0.6rem !important; }

  /* --- SEO SECTION GRIDS --- */
  .seo-grid-3 { grid-template-columns: 1fr !important; }
  .seo-grid { grid-template-columns: 1fr !important; }

  /* --- REVIEWS PAGE SPECIFIC --- */
  .photo-grid { grid-template-columns: repeat(2,1fr) !important; grid-auto-rows: 140px !important; }
  .pg.wide { grid-column: span 1 !important; }
  .pg.tall { grid-row: span 1 !important; }
  .rating-bar { flex-direction: column !important; text-align: center !important; gap: 20px !important; }
  .rb-left { flex-direction: column !important; align-items: center !important; }
  .rb-right { justify-content: center !important; }
  .cta-btns { flex-direction: column !important; align-items: center !important; gap: 12px !important; }
  .cta-btns a { width: 100% !important; max-width: 300px !important; text-align: center !important; }
  .cta-box { padding: 36px 20px !important; border-radius: 16px !important; }
  .rb-platforms { flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; }

  /* --- SAFE FOR TOURISTS PAGE --- */
  .safety-grid { grid-template-columns: 1fr !important; }

  /* --- REVIEW BUTTONS (min-width fix) --- */
  a[style*="min-width:340px"], a[style*="min-width: 340px"] {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 15px !important;
    padding: 14px 18px !important;
    box-sizing: border-box !important;
  }
}

/* ── MOBILE BREAKPOINT 480px ── */
@media (max-width: 480px) {
  .hero { padding: 70px 4% 40px !important; min-height: 90vh !important; }
  .hero h1 { font-size: clamp(1.8rem, 7.5vw, 2.4rem) !important; }
  .tp { flex: 1 1 calc(50% - 6px) !important; }
  .masonry { columns: 1 !important; }
  .photos-masonry { columns: 1 !important; }
  .why-grid { grid-template-columns: 1fr !important; }
  .inc-grid { grid-template-columns: 1fr 1fr !important; }
  .about-photos { grid-template-columns: 1fr 1fr !important; }
  .photo-grid { grid-template-columns: repeat(2,1fr) !important; grid-auto-rows: 120px !important; }
  .also-grid { grid-template-columns: 1fr !important; }
  .section { padding: 40px 4% !important; }
}

/* ── LANDSCAPE PHONE ── */
@media (max-width: 768px) and (orientation: landscape) {
  .hero { min-height: 100vw !important; padding-top: 70px !important; }
  .nav-links { padding-top: 66px !important; overflow-y: scroll !important; }
}

/* ── ACCESSIBILITY ── */
:focus-visible {
  outline: 3px solid #0B9ED9 !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}
.skip-link {
  position: absolute; top: -100%; left: 0;
  background: #0B9ED9; color: white;
  padding: 12px 24px; font-weight: 700;
  z-index: 9999; border-radius: 0 0 8px 0;
  font-size: 0.9rem; text-decoration: none;
}
.skip-link:focus { top: 0; }
button, a { -webkit-tap-highlight-color: rgba(11,158,217,0.15); }
.nav-links a, .tc-det, .tc-wa, .btn-sub, .btn-wa, .float-wa { min-height: 44px; }


/* ── DEEP CONTRAST FIXES (WCAG AA 4.5:1 required) ── */
/* #0B9ED9 on white = 2.8:1 FAILS → use #065F8A = 7.2:1 PASSES */
:root { 
  --muted: #4A6878;      /* was #6B8A9A (3.1:1) → now 5.2:1 */
  --sky-text: #065F8A;   /* dark blue for text on white backgrounds */
}
.tc-cat { color: #065F8A !important; }
.sec-ey { color: #065F8A !important; }
.tc-price small { color: #4A6878 !important; }
.rv-lc { color: #4A6878 !important; }
.asi-label { color: #4A6878 !important; }
.fb-bottom p { color: #4A6878 !important; }
.at p { color: #4A6878 !important; }
/* Fix sky-colored text on white backgrounds */
.tc-det[style*="color:var(--sky)"],
a[style*="color:var(--sky)"] { color: #065F8A !important; }
/* Nav scrolled state */
#nav.scrolled .lb { color: #1A2E3B !important; border-color: rgba(26,46,59,0.25) !important; }
/* Footer links - light blue on dark bg is fine but add underline for distinguishability */
footer a { text-decoration: underline !important; text-decoration-color: rgba(255,255,255,0.4) !important; }
footer a:hover { color: #ffffff !important; text-decoration-color: white !important; }
/* Nav links - add underline on hover to avoid "color only" issue */
.nav-links a:hover { text-decoration: underline !important; }
/* Tour detail links - ensure visible */
.tc-det { color: #ffffff !important; background: #065F8A !important; }
.tc-det:hover { background: #044A6C !important; }
/* wc-text on blue background - rgba(255,255,255,0.85) = fine (high contrast on dark bg) */
/* touch targets */
.lb { min-width: 36px !important; min-height: 36px !important; padding: 6px 10px !important; 
      display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.tc-wa, .rv-more a, .btn-sub, .fq { 
  min-height: 48px !important; 
  display: inline-flex !important; 
  align-items: center !important; 
}
.fq { width: 100% !important; cursor: pointer !important; }
:focus-visible { outline: 3px solid #065F8A !important; outline-offset: 3px !important; border-radius: 4px; }
.skip-link { position:absolute; top:-100%; left:0; background:#065F8A; color:white; padding:12px 24px; font-weight:700; z-index:9999; border-radius:0 0 8px 0; text-decoration:none; }
.skip-link:focus { top:0; }


/* Accessibility: links distinguishable without color alone */
.nav-links a:hover, .nav-links a:focus { text-decoration: underline; color: var(--sky) !important; }
.fc a { text-decoration: underline; text-underline-offset: 3px; opacity: 0.9; }
.fc a:hover { opacity: 1; }
/* Better body text contrast */
.tc-desc { color: #3A5567 !important; }
.sec-desc { color: #3A5567 !important; }
.at p { color: #3A5567 !important; }

/* ══════════════════════════════════════════
   HOSTINGER MOBILE 100% — FINAL FIXES
══════════════════════════════════════════ */

/* 1. Prevent ALL horizontal overflow (html only — overflow on body breaks
   position:fixed on iOS Safari, which is what was breaking the mobile menu) */
html {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}
body {
  width: 100% !important;
  max-width: 100vw !important;
}

/* 2. All containers respect viewport */
.sec-inner, .nav-inner, .hero-content, .book-inner,
.about-inner, .faq-wrap, section, footer, nav {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 3. iOS input zoom prevention — 16px minimum on mobile (inputs only, NOT buttons which breaks hamburger) */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
  a {
    touch-action: manipulation;
  }
}

/* 4. Tap targets — all interactive elements at least 44x44px */
.tc-det, .tc-wa, .btn-sub, .btn-wa, .btn-ghost-hero,
.float-wa, .nav-cta, .lb, .fq, .btn-ol {
  min-height: 44px !important;
  min-width: 44px !important;
}

/* 5. Float WhatsApp button — safe area insets for notched phones */
.float-wa {
  bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important;
  right: max(14px, env(safe-area-inset-right, 14px)) !important;
  max-width: calc(100vw - 28px) !important;
}

/* 6. Images — never overflow container */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* 7. Very small screens (320px phones) */
@media (max-width: 380px) {
  .hero h1 { font-size: 1.7rem !important; }
  .hero-ctas { gap: 8px !important; }
  .tp { flex: 1 1 calc(50% - 4px) !important; padding: 5px 7px !important; }
  .tp-num { font-size: 0.85rem !important; }
  .tp-label { font-size: 0.5rem !important; }
  .hero-badge-text { font-size: 0.55rem !important; letter-spacing: 0.05em !important; }
  .section { padding: 36px 4% !important; }
  .tours-grid { gap: 12px !important; }
  .tc-body { padding: 14px !important; }
  .tc-name { font-size: 1rem !important; }
  .form { padding: 16px 12px !important; }
}

/* 8. Nav safe area for notched phones */
#nav {
  padding-left: max(5%, env(safe-area-inset-left, 5%)) !important;
  padding-right: max(5%, env(safe-area-inset-right, 5%)) !important;
}

/* 9. Footer safe area */
footer {
  padding-bottom: max(24px, env(safe-area-inset-bottom, 24px)) !important;
}

/* 10. Hero text never overflows */
.hero h1, .hero-sub, .hero-badge-text {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* 11. Fix footer grid on small screens */
@media (max-width: 480px) {
  .fb-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 4px !important;
  }
  .fb-bottom p { font-size: 0.65rem !important; }
}

/* 12. Hero wave and hero never cause overflow */
.hero-wave {
  overflow: hidden !important;
  max-width: 100% !important;
}
.hero { overflow: hidden !important; }
/* ══ EXTRA MOBILE POLISH ══════════════════════════════ */

/* Hero image: hint to browser it covers full viewport */
.hero-photo-bg img {
  content-visibility: auto;
}

/* Prevent review buttons from being tiny on 320px screens */
@media (max-width: 400px) {
  .rv-more a {
    font-size: 14px !important;
    padding: 14px 16px !important;
  }
}

/* Fix booking section on mobile - ensure full-width padding */
@media (max-width: 768px) {
  .book-bg { padding-left: 4% !important; padding-right: 4% !important; }
  .book-inner { padding: 0 !important; }
}

/* Fix SEO section grids always fully responsive */
@media (max-width: 768px) {
  .seo-grid-3 { grid-template-columns: 1fr !important; gap: 14px !important; }
  .seo-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
}

/* Ensure all section headings wrap properly on mobile */
.sec-title, h1, h2, h3 {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* Fix footer social buttons tap targets */
.fsb {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Smooth image loading - prevents jarring pop-in */
img {
  content-visibility: auto;
}

/* Fix hero CTA buttons never clipping off screen */
.hero-ctas {
  max-width: 100% !important;
  width: 100% !important;
}
@media (max-width: 768px) {
  .btn-wa, .btn-ghost-hero {
    min-height: 52px !important;
    font-size: 0.95rem !important;
    border-radius: 14px !important;
  }
}

/* About section: pickup pills responsive */
.pickup-pill {
  white-space: nowrap;
}

/* Fix g-badge (Google rating) on tiny screens */
@media (max-width: 380px) {
  .g-badge { flex-wrap: wrap; padding: 7px 14px; }
  .g-text { font-size: 0.65rem; }
}

/* Ensure FAQ open state doesn't clip on small screens */
.fi.open .fa { max-height: 600px !important; }


@media(max-width:900px){.seo-grid-3{grid-template-columns:1fr 1fr!important}}
@media(max-width:600px){.seo-grid-3{grid-template-columns:1fr!important}.seo-grid{grid-template-columns:1fr!important}}