@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

:root {
  --navy: #171b20 !important;
  --blue: #242a30 !important;
  --mid: #343c43 !important;
  --accent: #c86f3d !important;
  --gold2: #e29a6f !important;
  --teal: #526f6b !important;
  --cream: #f7f5f1 !important;
  --offwhite: #eeece7 !important;
  --white: #ffffff !important;
  --text: #20262b !important;
  --muted: #667078 !important;
  --border: #ddd9d2 !important;
  --radius-sm: 6px !important;
  --radius-md: 12px !important;
  --radius-lg: 18px !important;
  --shadow-sm: 0 6px 18px rgba(25, 31, 35, .06) !important;
  --shadow-md: 0 14px 38px rgba(25, 31, 35, .10) !important;
  --shadow-lg: 0 24px 64px rgba(12, 16, 19, .18) !important;
}

body { background: var(--cream) !important; }
header { background: rgba(247, 245, 241, .97) !important; backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--border) !important; }
.header-inner { min-height: 82px !important; }
header nav a { color: #343c43 !important; text-transform: uppercase; letter-spacing: .07em; font-size: .76rem !important; }
header nav a:hover, header nav a.active { color: #c86f3d !important; background: transparent !important; }
header .logo-text .l1 { color: #20262b !important; }
header .logo-text .l2 { color: #667078 !important; }
.hamburger { align-items: center !important; gap: 4px !important; color: #20262b !important; }
.hamburger span { background: #20262b !important; }
.hamburger::after { content: "MENU"; display: block; margin-top: 2px; font: 700 .64rem/1 var(--font-body); letter-spacing: .12em; color: currentColor; }
.topbar { background: #101316 !important; }
.hero { background: #171b20 !important; padding-top: 76px !important; }
.hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr) !important; gap: 72px !important; }
.hero h1 { font-family: var(--font-body) !important; font-weight: 600 !important; letter-spacing: -.045em !important; }
.hero h1 em { font-family: var(--font-display) !important; font-weight: 500 !important; letter-spacing: 0 !important; display: block; margin-top: 12px; }
.hero-card { background: #f7f5f1 !important; border: 0 !important; color: #20262b !important; backdrop-filter: none !important; border-radius: 4px !important; }
.hero-card h2 { color: #20262b !important; }
.hero-card .card-sub, .hero-card .price-route, .hero-card .card-note { color: #667078 !important; }
.hero-card .price-row { border-color: #ddd9d2 !important; }
.hero::before { opacity: .22 !important; }
.nav-book, .m-book, .btn-gold, .card-cta, .p-card.top .p-btn {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.nav-book:hover, .btn-gold:hover, .card-cta:hover { background: #ad5930 !important; }
.final-cta { background: #526f6b !important; }
.service-card.featured, .review-feature, .agents-strip, .p-head,
.compare-box, .exp-card.exp-dark { background: linear-gradient(145deg, #20252a, #30383d) !important; }
.section-label, .svc-link, .addon-price { color: #526f6b !important; }
.section-title, .svc-title, .p-line .amt, .faq-q { color: #20262b !important; }
.service-card, .review-card, .p-card, .addon, .faq-item, .exp-card.exp-light {
  box-shadow: 0 1px 0 rgba(18, 25, 29, .03);
}
header .logo img, footer img[src*="mco"] {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.logo-text .l1 { letter-spacing: .01em !important; }
.logo-text .l2 { letter-spacing: .14em !important; }

/* Keep the homepage navigation treatment clear and consistent site-wide. */
header,
.main-header {
  background: rgba(247, 245, 241, .98) !important;
  color: #20262b !important;
  border-bottom: 1px solid #ddd9d2 !important;
  box-shadow: 0 4px 18px rgba(25, 31, 35, .08) !important;
}

header nav > a,
header .desktop-nav > a,
header .nav-dropdown > a,
.main-header nav > a,
.main-header .desktop-nav > a,
.main-header .nav-dropdown > a {
  color: #343c43 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

header nav > a:hover,
header .desktop-nav > a:hover,
header .nav-dropdown > a:hover,
header nav > a.active,
header .desktop-nav > a.active,
.main-header nav > a:hover,
.main-header .desktop-nav > a:hover,
.main-header .nav-dropdown > a:hover,
.main-header nav > a.active,
.main-header .desktop-nav > a.active {
  color: #c86f3d !important;
  background: transparent !important;
}

header .dropdown-menu,
header .nav-dropdown > span,
.main-header .dropdown-menu,
.main-header .nav-dropdown > span {
  background: #fff !important;
  border-color: #ddd9d2 !important;
}

header .dropdown-menu a,
header .nav-dropdown > span a,
.main-header .dropdown-menu a,
.main-header .nav-dropdown > span a {
  color: #20262b !important;
  opacity: 1 !important;
}

header .dropdown-menu a:hover,
header .nav-dropdown > span a:hover,
.main-header .dropdown-menu a:hover,
.main-header .nav-dropdown > span a:hover {
  color: #171b20 !important;
  background: #f3ede4 !important;
}

header .nav-book,
.main-header .nav-book {
  color: #fff !important;
  background: #c86f3d !important;
}

.mobile-nav,
#mobileNav {
  background: rgba(23, 27, 32, .99) !important;
}

.mobile-nav a,
#mobileNav a {
  color: rgba(255, 255, 255, .94) !important;
  opacity: 1 !important;
}

.mobile-nav a:hover,
#mobileNav a:hover {
  color: #e29a6f !important;
}

/* One navigation type system for every legacy and current page template. */
header nav,
header .desktop-nav,
.main-header nav,
.main-header .desktop-nav {
  font-family: "Outfit", Arial, sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.07em !important;
}

header nav > a,
header .desktop-nav > a,
header .has-dropdown > a,
header .nav-dropdown > a,
.main-header nav > a,
.main-header .desktop-nav > a,
.main-header .has-dropdown > a,
.main-header .nav-dropdown > a {
  font-family: "Outfit", Arial, sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

header .dropdown-menu a,
header .nav-dropdown > span a,
.main-header .dropdown-menu a,
.main-header .nav-dropdown > span a {
  font-family: "Outfit", Arial, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

header .nav-book,
.main-header .nav-book {
  font-family: "Outfit", Arial, sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.mobile-nav a,
#mobileNav a,
.mobile-nav .m-book,
#mobileNav .m-book {
  font-family: "Outfit", Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

@media (max-width: 768px) {
  .hero { padding-left: 20px !important; padding-right: 20px !important; }
  .logo-text .l1 { font-size: 1rem !important; }
  header { background: #171b20 !important; }
  header .logo-text .l1 { color: #fff !important; }
  header .logo-text .l2 { color: rgba(255,255,255,.62) !important; }
  .hamburger { color: #fff !important; }
  .hamburger span { background: #fff !important; }
  .hero-inner { grid-template-columns: 1fr !important; gap: 36px !important; }
}
