/* OneDesq — shared sitewide chrome: promo bar, premium footer, header overrides.
   Loaded on every page so the homepage and all landing pages share one design language. */

/* ===========================
   0. ACCESSIBILITY BASELINE
   =========================== */
/* Skip-to-content link — visible only on keyboard focus */
.od-skip{
  position:absolute;top:-100px;left:8px;background:#0f51b2;color:#fff;
  padding:10px 18px;border-radius:6px;font-weight:700;font-size:14px;
  z-index:99999;text-decoration:none;transition:top .15s ease;
}
.od-skip:focus{top:8px;outline:3px solid #fff;outline-offset:2px;color:#fff;text-decoration:none;}
/* Honour user preference for reduced motion across the entire site */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .od-promo-bar__marquee-inner,.od-amen-marquee-track{animation:none !important;}
}


/* ===========================
   1. ANIMATED PROMO BAR
   =========================== */
.od-promo-bar{
  position:relative;z-index:1000;
  background:linear-gradient(90deg,#0f51b2 0%,#1668d4 50%,#0f51b2 100%);
  background-size:200% 100%;
  color:#fff;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;
  padding:10px 0;overflow:hidden;
  animation:od-promo-gradient 6s linear infinite;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
@keyframes od-promo-gradient{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.od-promo-bar__track{
  display:flex;align-items:center;justify-content:center;gap:32px;
  max-width:1400px;margin:0 auto;padding:0 60px 0 30px;
}
.od-promo-bar__marquee{display:flex;align-items:center;gap:40px;flex:1;white-space:nowrap;overflow:hidden;}
.od-promo-bar__marquee-inner{
  display:flex;align-items:center;gap:40px;
  animation:od-promo-scroll 28s linear infinite;
  padding-right:40px;
}
@keyframes od-promo-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.od-promo-bar:hover .od-promo-bar__marquee-inner{animation-play-state:paused}
.od-promo-item{display:inline-flex;align-items:center;gap:10px;font-weight:500;letter-spacing:0.2px;}
.od-promo-badge{
  display:inline-block;background:#fff;color:#0f51b2;
  padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  animation:od-promo-pulse 2s ease-in-out infinite;
}
@keyframes od-promo-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0.6)}
  50%{box-shadow:0 0 0 6px rgba(255,255,255,0)}
}
.od-promo-cta{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;color:#0f51b2;text-decoration:none;
  padding:6px 14px;border-radius:6px;font-weight:700;font-size:13px;
  white-space:nowrap;transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.od-promo-cta:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.15);color:#0f51b2;text-decoration:none;}
.od-promo-close{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:transparent;border:none;color:#fff;font-size:20px;
  line-height:1;cursor:pointer;padding:4px 8px;opacity:0.7;
  transition:opacity 0.2s ease;
}
.od-promo-close:hover{opacity:1}
@media (max-width:768px){
  .od-promo-bar{font-size:13px}
  .od-promo-bar__track{padding:0 40px 0 16px;gap:16px}
  .od-promo-bar__marquee-inner{animation-duration:22s;gap:28px}
  .od-promo-item{gap:8px}
}

/* ===========================
   2. UNIFIED HEADER SIZING — prominent logo, single-line nav
   Main logo: 100px · Sticky: 64px · Header total ~116px desktop / ~76px sticky.
   =========================== */
/* Main header — at top of page */
.main-header .header-lower{padding:8px 0 !important;}
.main-header .header-lower .logo-box img{height:100px !important;width:auto !important;display:block !important;image-rendering:auto !important;}
.main-header .header-lower .outer-box{min-height:0 !important;align-items:center !important;}

/* Sticky header — when user scrolls
   The theme's onedesq.min.css hides .sticky-header at ≤1200px (mobile-first theme assumption).
   We re-enable it from tablet up so the topbar-shrinks-on-scroll UX is consistent across
   laptops/tablets on EVERY page. Mobile (≤640px) stays hidden because it's annoying on phones. */
.main-header .sticky-header{padding:6px 0 !important;display:block !important;}
.main-header .sticky-header .logo-box img{height:64px !important;width:auto !important;display:block !important;image-rendering:auto !important;}
.main-header .sticky-header .outer-box{min-height:0 !important;align-items:center !important;}
@media (max-width:640px){
  .main-header .sticky-header{display:none !important;}
}

/* Subtle bottom shadow on sticky for separation from content */
.main-header .sticky-header{box-shadow:0 2px 12px rgba(10,22,40,0.06) !important;background:#fff !important;}

/* ===========================
   2b. DOUBLE-HEADER FIX
   When the user scrolls past ~150px, theme JS adds `.fixed-header` to
   `.main-header` and the `.sticky-header` becomes position:fixed at top.
   But `.header-lower` is still in the normal flow at the top of the page,
   so on subpages whose hero/banner is short, both bars overlap visually
   ("double header"). We collapse the in-flow `.header-lower` once the
   sticky has taken over. `display:none` removes it from layout entirely
   so there is no white-space placeholder. The user is already scrolled
   past it at this point, so the content does not visibly jump.
   =========================== */
.main-header.fixed-header .header-lower{display:none !important;}
/* On mobile (≤640px) the sticky header is disabled above, so we must NOT
   hide the header-lower or the user loses the nav entirely on scroll. */
@media (max-width:640px){
  .main-header.fixed-header .header-lower{display:block !important;}
}

/* Tablet */
@media (max-width:991px){
  .main-header .header-lower .logo-box img{height:80px !important;}
  .main-header .sticky-header .logo-box img{height:56px !important;}
  .main-header .header-lower{padding:6px 0 !important;}
  .main-header .sticky-header{padding:5px 0 !important;}
}

/* Mobile */
@media (max-width:480px){
  .main-header .header-lower .logo-box img{height:78px !important;}
  .main-header .sticky-header .logo-box img{height:56px !important;}
  .main-header .header-lower{padding:8px 0 !important;}
  .main-header .sticky-header{padding:5px 0 !important;}
}

/* The phone CTA in the header bar — sized to match the bar */
.main-header .menu-right-content .theme-btn.btn-one{padding:10px 18px !important;font-size:14px !important;line-height:1.2 !important;white-space:nowrap !important;}

/* ===========================
   MOBILE UTILITIES
   =========================== */
/* Hide elements only on mobile to keep mobile scroll length manageable.
   Apply to sections (or any element) that duplicates information already
   covered elsewhere on the page. */
@media (max-width:640px){
  .od-mobile-hide{display:none !important;}
}
/* Hide elements only on tablet+desktop, show on mobile */
@media (min-width:641px){
  .od-mobile-only{display:none !important;}
}

/* ===========================
   STICKY MOBILE CTA BAR
   Sticky bottom bar with Book Tour (WhatsApp) + Call CTAs.
   Sitewide on every page on mobile only. Hidden on tablet+desktop where
   the header CTA is visible.
   =========================== */
.od-mcta{
  position:fixed;left:0;right:0;bottom:0;z-index:998;
  display:none;
  background:#fff;
  border-top:1px solid #e5e9f2;
  box-shadow:0 -4px 16px rgba(10,22,40,0.08);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
}
.od-mcta__row{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:520px;margin:0 auto;}
.od-mcta a{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 10px;border-radius:10px;font-weight:700;font-size:14px;
  text-decoration:none;line-height:1;white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;
}
.od-mcta a:hover{text-decoration:none;}
.od-mcta a:active{transform:translateY(1px);}
/* Primary — Book a Tour: solid brand blue (matches hero's "Tour the space") */
.od-mcta .od-mcta-tour{background:#0f51b2;color:#fff;border:1px solid #0a3d8a;}
.od-mcta .od-mcta-tour i{font-size:15px;}
/* Secondary — Call Now: outline blue on white (matches hero's "Get a quote") */
.od-mcta .od-mcta-call{background:#fff;color:#0f51b2;border:1.5px solid #0f51b2;}
.od-mcta .od-mcta-call i{font-size:13px;}
@media (max-width:640px){
  .od-mcta{display:block;}
  /* Reserve space at page bottom so the sticky bar doesn't cover the footer */
  body{padding-bottom:74px;}
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px));}
  /* The promo bar's close button can also conflict near the bottom on small
     screens — but since the promo bar is at the top, no overlap. */
}
@media (max-width:991px){
  .main-header .menu-right-content .theme-btn.btn-one{padding:8px 14px !important;font-size:13px !important;}
}

/* ============= NAV LINKS + DROPDOWN ARROWS, caret on the RIGHT of text, single line ============= */
.main-header .navigation > li{white-space:nowrap !important;position:relative !important;}
.main-header .navigation > li > a{padding:10px 0 !important;line-height:1.4 !important;white-space:nowrap !important;position:relative !important;transition:color .2s ease !important;}
.main-header .navigation > li > a:hover{color:#0f51b2 !important;}

/* ===== ACTIVE NAV STATE (current page highlight) =====
   Applied either via hard-coded class="dropdown current" / class="current" on the <li>,
   or via JS in onedesq-site.js that detects the current page and adds .od-active. */
.main-header .navigation > li.current > a,
.main-header .navigation > li.od-active > a{
  color:#0f51b2 !important;
  font-weight:700 !important;
}
/* Subtle underline indicator beneath the active link */
.main-header .navigation > li.current > a::before,
.main-header .navigation > li.od-active > a::before{
  content:'' !important;
  position:absolute !important;
  left:0 !important;right:0 !important;bottom:-6px !important;
  height:3px !important;
  background:linear-gradient(90deg,#0f51b2,#1668d4) !important;
  border-radius:3px !important;
  display:block !important;
}
/* Caret on active dropdown matches the brand color */
.main-header .navigation > li.current.dropdown > a::after,
.main-header .navigation > li.od-active.dropdown > a::after{color:#0f51b2 !important;}

/* Kill any ::before caret the theme might inject (this was pushing arrows to LEFT).
   Exception: active dropdown items get a ::before underline (defined below in ACTIVE NAV STATE). */
.main-header .navigation > li.dropdown:not(.current):not(.od-active) > a::before{content:none !important;display:none !important;}

/* Position the dropdown caret cleanly on the RIGHT of the link text */
.main-header .navigation > li.dropdown > a::after{
  content:'\f107' !important;           /* Font Awesome 'chevron-down' */
  font-family:'Font Awesome 6 Free' !important;
  font-weight:900 !important;
  display:inline-block !important;
  vertical-align:middle !important;
  margin-left:6px !important;
  margin-right:0 !important;
  font-size:10px !important;
  color:#94a3b8 !important;
  position:static !important;
  float:none !important;
  clear:none !important;
  transition:transform .2s ease, color .2s ease !important;
}
.main-header .navigation > li.dropdown:hover > a::after{color:#0f51b2 !important;transform:rotate(180deg) !important;}

/* If the theme uses a separate <i>/<span> caret, hide it (we use ::after instead) */
.main-header .navigation > li.dropdown > a > i.fa-angle-down,
.main-header .navigation > li.dropdown > a > i.fa-chevron-down,
.main-header .navigation > li.dropdown > a > span.dropdown-arrow{display:none !important;}

/* ============= FORCE WHITE HEADER BACKGROUND (no transparency) ============= */
.main-header,
.main-header .header-lower,
.main-header .sticky-header{background:#fff !important;}
/* The whole header element gets a solid white background so scrolled content never bleeds through */
.main-header{position:relative;z-index:90;}

/* ===========================
   3. SCROLL-TO-TOP — bigger, brighter, always visible after scroll
   =========================== */
.scroll-to-top{
  position:fixed !important;
  display:block !important;            /* force visibility — JS toggles opacity */
  right:24px !important;
  bottom:32px !important;
  width:54px !important;
  height:54px !important;
  background:#fff !important;
  border-radius:50% !important;
  box-shadow:0 8px 28px rgba(15,81,178,0.28), 0 2px 6px rgba(10,22,40,0.08) !important;
  cursor:pointer !important;
  z-index:999 !important;
  /* opacity + visibility are controlled by onedesq-site.js (shows after 400px scroll) */
}
.scroll-to-top:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 14px 36px rgba(15,81,178,0.36), 0 2px 8px rgba(10,22,40,0.10) !important;
}
.scroll-to-top:active{transform:translateY(-1px) !important;}

/* Up-arrow icon inside the button */
.scroll-to-top::after{
  content:'' !important;
  position:absolute !important;
  left:50% !important;
  top:54% !important;
  width:14px !important;
  height:14px !important;
  border-top:3px solid #0f51b2 !important;
  border-right:3px solid #0f51b2 !important;
  transform:translate(-50%,-50%) rotate(-45deg) !important;
  border-radius:2px !important;
  color:transparent !important;
  font-size:0 !important;
}

/* The SVG progress ring — keep it but in brand colour */
.scroll-to-top .scroll-top-inner{
  position:absolute !important;
  inset:-2px !important;
  width:calc(100% + 4px) !important;
  height:calc(100% + 4px) !important;
  pointer-events:none !important;
}
.scroll-to-top .scroll-top-inner path{
  stroke:#0f51b2 !important;
  stroke-width:3 !important;
}

/* Lift above mobile sticky CTA bar */
@media (max-width:768px){
  .scroll-to-top{
    right:16px !important;
    bottom:96px !important;
    width:48px !important;
    height:48px !important;
  }
  .scroll-to-top::after{width:12px !important;height:12px !important;border-width:2.5px !important;}
}

/* ===========================
   3. PREMIUM FOOTER
   =========================== */
.od-footer{position:relative;background:#0a1628;color:rgba(255,255,255,0.72);font-size:14.5px;line-height:1.65;}
.od-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(96,165,250,0.45),transparent);}
/* Multi-centre teaser strip — hidden in UI for now, re-enable when Phase 2 starts */
.od-footer-strip{display:none !important;}
.od-footer-strip--enabled{display:flex !important;align-items:center;justify-content:center;gap:14px;padding:18px 28px;background:rgba(15,81,178,0.10);border-bottom:1px solid rgba(255,255,255,0.06);font-size:13.5px;letter-spacing:0.3px;flex-wrap:wrap;text-align:center;}
.od-footer-strip .pin{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:#60a5fa;background:rgba(96,165,250,0.12);padding:5px 12px;border-radius:20px;}
.od-footer-strip .pin .dot{width:6px;height:6px;border-radius:50%;background:#60a5fa;box-shadow:0 0 0 4px rgba(96,165,250,0.18);animation:odFooterPulse 2.4s ease-in-out infinite;}
@keyframes odFooterPulse{0%,100%{box-shadow:0 0 0 4px rgba(96,165,250,0.18);}50%{box-shadow:0 0 0 8px rgba(96,165,250,0.04);}}
.od-footer-strip .cities{color:#fff;font-weight:600;}
.od-footer-strip .cities span{color:rgba(255,255,255,0.55);font-weight:500;margin:0 6px;}
.od-footer-main{padding:72px 28px 56px;}
.od-footer-wrap{max-width:1240px;margin:0 auto;}
.od-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:48px;}
@media (max-width:1100px){.od-footer-grid{grid-template-columns:1.4fr 1fr 1fr;row-gap:48px;}}
@media (max-width:680px){.od-footer-grid{grid-template-columns:1fr 1fr;row-gap:40px;gap:32px;}}
@media (max-width:420px){.od-footer-grid{grid-template-columns:1fr;}}
.od-footer-brand img{height:100px;width:auto;margin-bottom:22px;display:block;margin-left:-8px;}
.od-footer-brand .addr{color:rgba(255,255,255,0.65);font-size:14px;line-height:1.7;margin:0 0 24px;}
.od-footer-brand .addr strong{color:#fff;font-weight:600;}
.od-footer-social{display:flex;gap:10px;list-style:none;padding:0;margin:0;}
.od-footer-social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.75);display:flex;align-items:center;justify-content:center;font-size:15px;transition:all .2s ease;text-decoration:none;}
.od-footer-social a:hover{background:#0f51b2;border-color:#0f51b2;color:#fff;transform:translateY(-2px);}
.od-footer-col h4{font-family:'Outfit','Inter',sans-serif;font-size:12.5px;color:#fff;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin:0 0 18px;position:relative;padding-bottom:12px;}
.od-footer-col h4::after{content:'';position:absolute;bottom:0;left:0;width:22px;height:2px;background:#0f51b2;border-radius:2px;}
.od-footer-col ul{list-style:none;padding:0;margin:0;}
.od-footer-col li{margin-bottom:10px;}
.od-footer-col a{color:rgba(255,255,255,0.65);text-decoration:none;font-size:14px;transition:color .2s ease, padding-left .2s ease;display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:100%;word-break:break-word;overflow-wrap:anywhere;}
.od-footer-col a:hover{color:#fff;text-decoration:none;padding-left:4px;}
.od-footer-col a i{margin-right:8px;color:#60a5fa;font-size:13px;width:14px;text-align:center;flex-shrink:0;margin-top:4px;}
.od-footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding:22px 28px;}
.od-footer-bottom-wrap{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;}
.od-footer-bottom-wrap p{margin:0;color:rgba(255,255,255,0.45);font-size:13px;}
.od-footer-bottom-wrap nav{display:flex;gap:22px;}
.od-footer-bottom-wrap nav a{color:rgba(255,255,255,0.55);font-size:13px;text-decoration:none;transition:color .2s ease;}
.od-footer-bottom-wrap nav a:hover{color:#fff;}
@media (max-width:680px){
  .od-footer-main{padding:48px 22px 40px;}
  .od-footer-bottom-wrap{flex-direction:column;text-align:center;gap:12px;}
}