/* Shift Transport Batam: shared brand tokens and responsive component finish. */
:root {
  --primary: #02A8D4;
  --primary-dark: #00738F;
  --primary-deeper: #076983;
  --primary-light: #61D6F5;
  --primary-lighter: #EAFAFE;
  --primary-pale: #F4FCFE;
  --navy: #103B46;
  --navy-mid: #174E5C;
  --text: #21414A;
  --text-muted: #52737C;
  --border: #DDECF0;
  --light: #F4FCFE;
  --qt-font-body: "Inter", system-ui, sans-serif;
  --qt-font-heading: "Manrope", "Inter", system-ui, sans-serif;
  --qt-accessible-blue: var(--primary-dark);
  --qt-accessible-blue-dark: var(--primary-deeper);
  --qt-focus-ring: var(--primary-dark);
  --qt-title-section: clamp(1.8rem, 3.5vw, 2.8rem);
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow: 0 8px 28px rgba(16,59,70,.06);
  --shadow-lg: 0 18px 48px rgba(16,59,70,.10);
}
body { color: var(--text); background: #fff; }
body :is(.container,.blog-container) { max-width: 1200px; }
body :is(.section-pad,.section-padding) { padding-block: clamp(56px,7vw,96px); }
body :is(.section-title,.about-hero h1,.faq-page-hero h1,.blog-hero h1) { font-weight: 800; letter-spacing: -.035em; line-height: 1.18; }
body main :is(p,li) { text-align: start; text-align-last: auto; }
body main :is(.section-header,.section-heading,.text-center,.blog-hero,.about-hero,.faq-page-hero) > p { text-align: center; }
body :is(.section-subtitle,.hero-sub) { line-height: 1.75; }
#header, #header.scrolled, body > header:not(#header) {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(16,59,70,.04);
}
body > header :is(.nav-logo,.logo) { min-width: 0; flex-shrink: 1; gap: 10px; }
body > header :is(.nav-logo-icon,.logo-icon) {
  width: 62px; height: 62px; flex: 0 0 62px;
  background: #fff; border-radius: 10px; padding: 0; box-shadow: none;
}
body :is(header,footer) img[src*="shift-logo-travel-batam"] {
  width: 100%; height: 100%; object-fit: contain; filter: none; border-radius: 0;
}
body > header :is(.nav-logo-name,.logo-text .logo-heading) {
  color: var(--navy); font-size: 14px; font-weight: 800;
  letter-spacing: -.025em; white-space: normal; max-width: 190px; line-height: 1.3;
}
body > header :is(.nav-logo-tagline,.logo-text p) { color: var(--text-muted); letter-spacing: .03em; }
body > header nav a { font-weight: 600; }
body :is(.btn,.hero-btns .btn-lg) { border-radius: 12px; font-weight: 700; min-height: 48px; padding: 13px 23px; }
/* Logo cyan for primary actions; dark text keeps labels readable. */
body .btn-primary { color: #103B46 !important; background: var(--primary) !important; border-color: var(--primary) !important; box-shadow: 0 6px 18px rgba(2,168,212,.16); }
body .btn-primary:hover { color: #fff !important; background: var(--primary-deeper) !important; border-color: var(--primary-deeper) !important; }
body .btn-white { color: var(--primary-deeper); background: #fff; }
body .btn-white:hover { background: var(--primary-lighter); }
body .hero { min-height: 700px; }
body .hero-content-wrap { padding-top: 150px; padding-bottom: 80px; }
body .hero-headline { font-size: clamp(2.4rem,5vw,4rem); font-weight: 800; max-width: 19ch; line-height: 1.12; }
body .hero-overlay { background: linear-gradient(90deg,rgba(10,41,49,.93),rgba(10,41,49,.68) 48%,rgba(10,41,49,.16)); }
body .hero-label { color: #B5EFFF !important; letter-spacing: .12em; font-weight: 700; }
body .hero-trust { border-top: 1px solid rgba(255,255,255,.22); gap: 28px; }
body :is(.why-card,.car-card,.testi-card,.blog-card,.real-experience-card) {
  border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden;
}
body :is(.why-card,.testi-card) { padding: clamp(24px,3vw,32px); }
body :is(.why-icon,.service-choice-icon) { color: var(--primary-dark); background: var(--primary-lighter); border-radius: 14px; }
body :is(.car-card,.blog-card,.real-experience-card):hover { box-shadow: var(--shadow-lg); border-color: #B4E7F5; }
body :is(.services-section,.booking-cta-section,.about-hero,.faq-page-hero,.blog-hero) {
  background: linear-gradient(125deg,var(--primary-deeper),var(--primary-dark) 65%,var(--primary)) !important;
}
body .services-section .service-card { border: 1px solid rgba(255,255,255,.24); border-radius: 18px; background: rgba(255,255,255,.08); box-shadow: none; }
body :is(input,select,textarea) { border-radius: 10px; border-color: var(--border); }
body :is(input,select,textarea):focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(2,168,212,.12); }
body footer { background: var(--navy); }
body footer :is(.footer-logo-icon,.logo-icon) { width: 76px; height: 76px; flex: 0 0 76px; background: #fff; border-radius: 12px; padding: 0; }
body footer .footer-logo-name { font-size: 18px; line-height: 1.35; max-width: 220px; }
body footer .footer-logo { align-items: center; }
body footer .footer-bottom { border-top-color: rgba(255,255,255,.16); }
@media (max-width: 1024px) {
  body .hero { min-height: 0; }
  body .hero-content-wrap { padding-top: 120px; padding-bottom: 64px; }
  body > header :is(.nav-logo-name,.logo-text .logo-heading) { max-width: 200px; }
}
@media (max-width: 768px) {
  body :is(.container,.blog-container) { width: 100%; padding-inline: 20px; }
  body > header :is(.nav-logo-icon,.logo-icon) { width: 50px; height: 50px; flex-basis: 50px; }
  body > header :is(.nav-logo-name,.logo-text .logo-heading) { font-size: 12px; max-width: 155px; }
  body > header :is(.nav-logo-tagline,.logo-text p) { font-size: 9px; }
  body .hero-headline { font-size: clamp(2.2rem,8.5vw,3.4rem); }
  body .hero-content-wrap { padding-top: 104px; padding-bottom: 56px; }
  body .hero-overlay { background: linear-gradient(180deg,rgba(10,41,49,.83),rgba(10,41,49,.70)); }
  body .hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }
  body .hero-btns .btn { width: 100%; justify-content: center; }
  body .hero-trust { gap: 16px; flex-wrap: wrap; }
  body .hero-trust-num { font-size: 1.5rem; }
  body :is(.car-card,.blog-card,.why-card,.service-card) { min-width: 0; }
  body :is(input,select,textarea) { font-size: 16px; }
}
@media (max-width: 380px) {
  body > header :is(.nav-logo-name,.logo-text .logo-heading) { max-width: 124px; }
  body > header :is(.nav-logo-tagline,.logo-text p) { white-space: normal; }
  body > header :is(.nav-logo,.logo) { gap: 6px; }
}
/* Compact footer variant used by company and legal pages. */
body footer .footer-brand > img[src*="shift-logo-travel-batam"] {
  width: 68px; height: 68px; flex: 0 0 68px;
  object-fit: contain; background: #fff; border-radius: 12px;
}

/* Solid white navigation matches the logo background on every screen. */
body > header nav { background-color: #fff !important; }

/* Consistent footer branding and readable copy across page layouts. */
body footer :is(.footer-logo-wrap, .footer-logo-container, .footer-inner .footer-brand) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin: 0 0 20px;
  text-align: left;
}
body footer :is(.footer-logo-icon, .logo-icon),
body footer .footer-brand > img[src*="shift-logo-travel-batam"] {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 12px;
  overflow: hidden;
}
body footer :is(.footer-logo-wrap > div:last-child, .logo-text, .footer-brand > span) {
  min-width: 0;
  flex: 1;
}
body footer :is(.footer-logo-name, .footer-h1, .logo-heading, .footer-brand > span > strong) {
  display: block;
  margin: 0;
  color: #fff;
  font-family: var(--qt-font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.02em;
  white-space: normal;
  text-wrap: balance;
}
body footer :is(.footer-logo-tagline, .logo-text p, .footer-brand > span > small) {
  display: block;
  margin: 5px 0 0;
  color: #C6DFE5;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .06em;
}
body footer .footer-desc {
  max-width: 36ch;
  margin: 0 0 22px;
  color: #C6DFE5;
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
}
body footer :is(.footer-socials, .social-links) { gap: 10px; flex-wrap: wrap; }
body footer .footer-copyright { align-items: center; }
body footer .footer-copyright p { color: #C6DFE5; }
@media (max-width: 768px) {
  body footer :is(.footer-logo-icon, .logo-icon),
  body footer .footer-brand > img[src*="shift-logo-travel-batam"] {
    width: 64px; height: 64px; flex-basis: 64px;
  }
  body footer :is(.footer-logo-wrap, .footer-logo-container, .footer-inner .footer-brand) { gap: 14px; }
  body footer .footer-desc { max-width: 40ch; }
  body footer .footer-copyright { gap: 6px; padding-block: 20px; }
}

/* High-contrast small text and selected controls in the cyan palette. */
:root { --about-primary-dark: #00738F; }
body .filter-btn.active { color: #fff !important; }
body .btn-primary i { color: inherit; }

/* Frosted glass for the expanded mobile navigation panel. */
@media (max-width: 1024px) {
  body > #header nav.qt-mobile-nav,
  body > header:not(#header) nav.qt-mobile-nav {
    background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(234,250,254,.60)) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid rgba(255,255,255,.6) !important;
    border-top: 1px solid rgba(255,255,255,.85) !important;
    box-shadow: 0 20px 50px rgba(2,22,27,.22), inset 0 1px 0 rgba(255,255,255,.7) !important;
  }
  body > #header nav.qt-mobile-nav a,
  body > header:not(#header) nav.qt-mobile-nav a { color: #103B46 !important; }
  body > #header nav.qt-mobile-nav a:is(:hover, :focus-visible, .active),
  body > header:not(#header) nav.qt-mobile-nav a:is(:hover, :focus-visible, .active) {
    color: #07576C !important;
    background: rgba(2,168,212,.16) !important;
    border-color: rgba(2,168,212,.28) !important;
  }
  body > #header nav.qt-mobile-nav .language-toggle,
  body > header:not(#header) nav.qt-mobile-nav .language-toggle {
    color: #103B46;
    background: rgba(255,255,255,.28);
    border-color: rgba(255,255,255,.55);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body > #header nav.qt-mobile-nav,
    body > header:not(#header) nav.qt-mobile-nav { background: rgba(234,250,254,.95) !important; }
  }
}