/* ============================================================
   Jetblack Travel — Main Stylesheet
   Colors: #0F172A navy / #0EA5E9 sky / #FFFFFF white
   Font:   Inter
   Radius: 2-3px square feel, no capsules
   ============================================================ */

/* ── Variables ── */
:root {
  --clr-white:       #FFFFFF;
  --clr-bg:          #F8FAFC;
  --clr-bg-alt:      #F1F5F9;
  --clr-primary:     #0F172A;
  --clr-sky:         #0EA5E9;
  --clr-sky-dark:    #0284C7;
  --clr-sky-light:   #E0F2FE;
  --clr-sky-xlight:  #F0F9FF;
  --clr-body:        #334155;
  --clr-muted:       #64748B;
  --clr-border:      #E2E8F0;
  --clr-border-dark: #CBD5E1;
  --clr-dark:        #020617;

  --font-main:       'Inter', sans-serif;

  --fs-h1:    52px;
  --fs-h2:    36px;
  --fs-h3:    24px;
  --fs-h4:    20px;
  --fs-body:  16px;
  --fs-sub:   15px;
  --fs-small: 13px;
  --fs-xs:    12px;

  --lh-h1:   1.1;
  --lh-h2:   1.25;
  --lh-h3:   1.35;
  --lh-body: 1.65;

  --radius-sm:  8px;
  --radius:     8px;
  --radius-md:  8px;
  --radius-lg:  9px;

  --shadow-sm:  0 1px 3px rgba(15,23,42,0.08);
  --shadow:     0 4px 16px rgba(15,23,42,0.08);
  --shadow-lg:  0 8px 32px rgba(15,23,42,0.12);

  --header-h:      64px;
  --bottom-nav-h:  60px;
  --transition:    0.18s ease;
  --max-w:         1200px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-main);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--clr-body);
  background: var(--clr-white);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ── Page wrap ── */
.page-wrap {
  min-height: calc(100vh - var(--header-h));
  padding-top: var(--header-h);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1 { font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-h1); color: var(--clr-primary); letter-spacing: -1.5px; }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-h2); color: var(--clr-primary); letter-spacing: -0.5px; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-h3); color: var(--clr-primary); }
h4 { font-size: var(--fs-h4); font-weight: 600; color: var(--clr-primary); }
p  { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--clr-body); }

.text-sky    { color: var(--clr-sky); }
.text-muted  { color: var(--clr-muted); }
.text-white  { color: var(--clr-white); }
.text-primary { color: var(--clr-primary); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: var(--fs-sub);
  line-height: 1;
  padding: 11px 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
  text-decoration: none;
}
.btn-primary {
  background: var(--clr-sky);
  color: var(--clr-white);
  border-color: var(--clr-sky);
}
.btn-primary:hover {
  background: var(--clr-sky-dark);
  border-color: var(--clr-sky-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14,165,233,0.3);
}
.btn-outline {
  background: transparent;
  color: var(--clr-primary);
  border-color: var(--clr-border-dark);
}
.btn-outline:hover {
  border-color: var(--clr-sky);
  color: var(--clr-sky);
}
.btn-ghost {
  background: transparent;
  color: var(--clr-body);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--clr-bg); color: var(--clr-primary); }

.btn-sm { padding: 8px 14px; font-size: var(--fs-small); }
.btn-lg { padding: 14px 28px; font-size: var(--fs-body); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  background: var(--clr-white);
  border-bottom: 1px solid var(--clr-border);
  transition: box-shadow var(--transition);
}
.site-header.scrolled {
  box-shadow: var(--shadow);
}

.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  margin-right: 16px;
  text-decoration: none;
}
.site-logo .custom-logo {
  height: 32px;
  width: auto;
  display: block;
}
.app-topbar-logo .custom-logo {
  height: 24px;
}
.logo-g {
  font-size: 22px;
  font-weight: 800;
  color: var(--clr-sky);
  letter-spacing: -0.5px;
  line-height: 1;
}
.logo-booky {
  font-size: 22px;
  font-weight: 700;
  color: var(--clr-primary);
  letter-spacing: -0.5px;
  line-height: 1;
}

/* Primary nav */
.primary-nav { margin-left: auto; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-item { position: relative; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-size: var(--fs-sub);
  font-weight: 500;
  color: var(--clr-body);
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.nav-link:hover { color: var(--clr-primary); background: var(--clr-bg); }
.nav-link.active { color: var(--clr-sky); }

/* Nav arrow */
.nav-chevron {
  width: 14px;
  height: 14px;
  color: var(--clr-muted);
  transition: transform var(--transition);
  flex-shrink: 0;
}
.nav-item:hover .nav-chevron,
.nav-item:focus-within .nav-chevron { transform: rotate(180deg); }

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  flex-shrink: 0;
}

/* Cart icon */
.cart-btn {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--clr-body);
  transition: background var(--transition), color var(--transition);
}
.cart-btn:hover { background: var(--clr-bg); color: var(--clr-primary); }

/* User avatar */
.user-avatar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--radius);
  border: 1px solid var(--clr-border);
  background: var(--clr-white);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  position: relative;
}
.user-avatar-btn:hover { border-color: var(--clr-border-dark); background: var(--clr-bg); }
.user-avatar-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--clr-sky-light);
  color: var(--clr-sky-dark);
  font-size: var(--fs-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
}
.user-firstname {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--clr-primary);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* User dropdown */
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  min-width: 200px;
  padding: 6px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 100;
}
.user-avatar-btn.open .user-dropdown,
.user-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.user-dropdown-header {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: 4px;
}
.user-dropdown-name {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--clr-primary);
}
.user-dropdown-email {
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  margin-top: 2px;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--clr-body);
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.dropdown-item:hover { background: var(--clr-bg); color: var(--clr-primary); }
.dropdown-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--clr-muted); }
.dropdown-item:hover svg { color: var(--clr-sky); }
.dropdown-divider { height: 1px; background: var(--clr-border); margin: 4px 0; }
.dropdown-item.logout { color: #DC2626; }
.dropdown-item.logout:hover { background: #FEF2F2; }
.dropdown-item.logout svg { color: #DC2626; }

/* ============================================================
   MOBILE TOP BAR (mobile-width only, see RESPONSIVE section)
   ============================================================ */
.app-top-bar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--clr-white);
  z-index: 1000;
  align-items: center;
  grid-template-columns: 40px 1fr 40px;
  padding: 0 8px;
}
.app-topbar-menu-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-body);
  border: none;
  outline: none;
  border-radius: var(--radius);
  transition: color var(--transition);
}
.app-topbar-menu-btn:hover { background: var(--clr-bg); color: var(--clr-primary); }
.app-topbar-logo {
  grid-column: 2;
  justify-self: center;
  margin-right: 0;
}
.app-topbar-spacer { width: 40px; }

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 7px;
  border-radius: var(--radius);
  margin-left: auto;
}
.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--clr-body);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.5);
  backdrop-filter: blur(3px);
  z-index: 1100;
  opacity: 0;
  transition: opacity var(--transition);
}
.mobile-overlay.open { opacity: 1; }

.mobile-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 280px;
  max-width: 88vw;
  background: var(--clr-white);
  border-left: 1px solid var(--clr-border);
  z-index: 1200;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-drawer.open { transform: translateX(0); }

/* Left-side variant (site-nav drawer) — same component, opens from the left */
.mobile-drawer-left {
  left: 0; right: auto;
  border-left: none;
  border-right: 1px solid var(--clr-border);
  transform: translateX(-100%);
}
.mobile-drawer-left.open { transform: translateX(0); }

.drawer-section + .drawer-section { margin-top: 20px; }
.drawer-section-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--clr-sky);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 0 4px 8px;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--clr-border);
}
.drawer-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  color: var(--clr-muted);
  font-size: 18px;
  transition: background var(--transition), color var(--transition);
}
.drawer-close:hover { background: var(--clr-bg); color: var(--clr-primary); }
.drawer-nav { padding: 10px 16px 24px; flex: 1; display: flex; flex-direction: column; }
.drawer-list { flex: 1; }
.drawer-item > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 4px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--clr-body);
  border-bottom: 1px solid var(--clr-border);
  transition: color var(--transition);
}
.drawer-item > a:hover { color: var(--clr-sky); }
.drawer-item > a svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--clr-muted); transition: color var(--transition); }
.drawer-item > a:hover svg { color: var(--clr-sky); }
.drawer-cta { margin-top: 20px; width: 100%; justify-content: center; }

/* Drawer user card (logged-in state, shown above the link list) — left-
   aligned row: avatar, then name/email/role stacked beside it. Matches the
   same row layout page-dashboard.php's own sidebar switches to on mobile
   (.dash-user-card at max-width:768px in dashboard.css). */
.drawer-user {
  padding: 18px;
  border-bottom: 1px solid var(--clr-border);
}
.drawer-user-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 14px;
}
.drawer-user-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--clr-sky);
  color: var(--clr-white);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.2);
}
.drawer-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.drawer-user-info { min-width: 0; }
.drawer-user-name {
  font-size: var(--fs-sub);
  font-weight: 700;
  color: var(--clr-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drawer-user-email {
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drawer-user-role {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--clr-sky-light);
  color: var(--clr-sky-dark);
}

/* Drawer footer (Account Settings / Logout, pinned below the link list) */
.drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--clr-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drawer-footer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  font-size: var(--fs-sub);
  font-weight: 500;
  color: var(--clr-body);
  transition: color var(--transition);
}
.drawer-footer-link svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--clr-muted); transition: color var(--transition); }
.drawer-footer-link:hover { color: var(--clr-sky); }
.drawer-footer-link:hover svg { color: var(--clr-sky); }
.drawer-footer-link.logout { color: #DC2626; }
.drawer-footer-link.logout svg { color: #DC2626; }
.drawer-footer-link.logout:hover { color: #B91C1C; }
.drawer-footer-link.logout:hover svg { color: #B91C1C; }

/* ============================================================
   APP BOTTOM NAV (mobile-width only, see RESPONSIVE section)
   ============================================================ */
.app-bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--clr-white);
  border-top: 1px solid var(--clr-border);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  align-items: stretch;
}
.app-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--clr-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  transition: color var(--transition);
}
.app-nav-item svg { transition: color var(--transition); }
.app-nav-item.active,
.app-nav-item[aria-expanded="true"] { color: var(--clr-sky); }
.app-nav-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--clr-sky-light);
  color: var(--clr-sky-dark);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  overflow: hidden;
  flex-shrink: 0;
}
.app-nav-avatar img { width: 100%; height: 100%; object-fit: cover; }
.app-nav-menu-btn[aria-expanded="true"] .app-nav-avatar { box-shadow: 0 0 0 2px var(--clr-sky); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--clr-primary);
  padding: 64px 0 0;
  margin-top: 0;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-logo { margin-bottom: 12px; }
.footer-logo .logo-g { color: var(--clr-sky); }
.footer-logo .logo-booky { color: var(--clr-white); }
.footer-tagline {
  font-size: var(--fs-sub);
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  margin-bottom: 20px;
}
.footer-socials { display: flex; gap: 8px; }
.social-link {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  color: rgba(255,255,255,0.5);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.social-link:hover { border-color: var(--clr-sky); color: var(--clr-sky); background: rgba(14,165,233,0.08); }
.footer-heading {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: var(--fs-sub);
  color: rgba(255,255,255,0.6);
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--clr-white); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.footer-copy { font-size: var(--fs-small); color: rgba(255,255,255,0.35); }
.footer-email {
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.4);
  transition: color var(--transition);
}
.footer-email:hover { color: var(--clr-sky); }

/* ============================================================
   UTILITY
   ============================================================ */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }

/* ============================================================
   GENERIC PAGE (fallback for plain WP Pages with no own template:
   Privacy Policy, Terms of Service, Cookie Policy, About, Contact, etc.)
   ============================================================ */
/* padding-top uses calc() instead of a plain shorthand value on purpose:
   .generic-page sits on the same <main class="page-wrap generic-page">
   element as .page-wrap's own padding-top: var(--header-h), and a padding
   shorthand here would silently overwrite that header clearance instead
   of adding to it (exactly what caused content to render under the fixed
   header before). This guarantees clearance regardless of cascade order. */
.generic-page {
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 80px;
}
.generic-page-inner { max-width: 760px; }
.generic-page-title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--clr-primary);
  margin: 0 0 32px;
}
.generic-page-content h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--clr-primary);
  margin: 36px 0 14px;
}
.generic-page-content h2:first-child { margin-top: 0; }
.generic-page-content p { margin: 0 0 16px; line-height: 1.75; }
.generic-page-content ul,
.generic-page-content ol { margin: 0 0 16px; padding-left: 22px; }
.generic-page-content li { margin-bottom: 8px; line-height: 1.7; }
.generic-page-content a { color: var(--clr-sky); text-decoration: underline; }
.generic-page-content a:hover { color: var(--clr-sky-dark); }
.generic-page-content strong { color: var(--clr-primary); }

@media (max-width: 640px) {
  .generic-page-title { font-size: 26px; }
}
.section-label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--clr-sky);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--clr-sky-light);
  color: var(--clr-sky-dark);
}
.divider { height: 1px; background: var(--clr-border); margin: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  :root { --fs-h1: 42px; --fs-h2: 30px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 26px;
    --fs-h3: 20px;
    --fs-body: 15px;
    /* Mobile uses its own minimal .app-top-bar instead of .site-header, so
       every template's .page-wrap / .generic-page padding-top (which reads
       this var) clears the shorter mobile bar instead of the desktop one. */
    --header-h: 52px;
  }
  /* Desktop header is replaced by the minimal .app-top-bar (site-nav
     hamburger + centered logo) plus the app-bottom-nav: Home tab covers
     navigation-to-home, Menu tab's drawer covers account/profile links that
     used to live in the avatar dropdown here. */
  .site-header { display: none; }
  .app-top-bar { display: grid; }
  .app-bottom-nav { display: flex; }
  body { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); }
  /* Footer's Trips/Company/Legal link columns are redundant on mobile —
     the same links already live in the left site-nav drawer (see
     header.php's #site-nav-drawer). Brand column (logo/tagline/socials)
     and the copyright bar stay. */
  .footer-top { grid-template-columns: 1fr; }
  .footer-top .footer-col:not(.footer-brand) { display: none; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
}

@media (max-width: 480px) {
  :root { --fs-h1: 28px; }
  .footer-top { grid-template-columns: 1fr; gap: 24px; }
  .section { padding: 56px 0; }
}

/* ============================================================
   THANK YOU PAGE (post-enquiry confirmation)
   ============================================================ */
.thank-you-page { background: var(--clr-bg); }
.ty-section {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.ty-wrap {
  max-width: 620px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ty-card {
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: 100%;
  padding: 48px 36px;
  text-align: center;
}
.ty-check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #16A34A;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.ty-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--clr-primary);
  margin: 0 0 8px;
}
.ty-sub {
  font-size: var(--fs-body, 15px);
  color: var(--clr-text-sub, #64748B);
  margin: 0;
}
.ty-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--clr-border);
}
.ty-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  object-fit: contain;
}

/* ============================================================
   BOOK A CALL (Calendly embed)
   ============================================================ */
.bac-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}
.ty-btn { display: flex; width: 100%; justify-content: center; }