/* ==========================================================================
   MidCity Movers — header & footer chrome
   Split from the approved mockup design system (redesign/style.css), rev 2.
   Load order: design-system -> components -> header-footer -> overrides.

   @package MidCity_Movers
   @author  SlingSoft Apps <https://slingsoft.app>
   ========================================================================== */


/* ── 6. HEADER (TRANSPARENT OVER VIDEO, SOLID BAR ON SCROLL) ─────────────── */
.top-announcement-bar {
  display: none !important;
}
.announcement-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.announcement-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--c-yellow);
  font-weight: 700;
}

body.admin-bar .main-header-v2 {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .main-header-v2 {
    top: 46px;
  }
}
@media screen and (max-width: 600px) {
  /* On mobile screens, WordPress admin bar scrolls offscreen.
     When scrolled, the header must stick directly to the top with zero gap. */
  body.admin-bar .main-header-v2.is-scrolled {
    top: 0 !important;
  }
}

.main-header-v2 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(10, 19, 36, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.85rem 0;
  transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.main-header-v2.is-scrolled,
.main-header-v2.is-solid {
  padding: 0.65rem 0;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1.5px solid var(--line-border);
  box-shadow: 0 10px 30px rgba(10, 19, 36, 0.08);
}

.header-v2-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

.brand-v2 {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
  text-decoration: none;
}
.brand-v2.brand-logo-only {
  gap: 0;
}
.brand-v2 .custom-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  text-decoration: none;
}
.brand-v2 img.brand-mark {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 13px;
  object-fit: contain;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.brand-v2 .custom-logo,
.brand-v2 img.custom-logo,
.custom-logo-link img {
  width: var(--midcity-logo-width, 180px);
  max-width: var(--midcity-logo-width, 180px);
  height: auto;
  max-height: var(--midcity-logo-max-height, 55px);
  object-fit: contain;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block;
}
.brand-text-v2 {
  display: flex;
  flex-direction: column;
}
.brand-mark {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 13px;
  object-fit: contain;
}
.brand-title-v2 {
  font-family: var(--f-sans);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: -0.03em;
  transition: color 0.3s ease;
}
.main-header-v2:not(.is-scrolled):not(.is-solid) .brand-title-v2 span {
  color: var(--c-yellow);
}
.main-header-v2.is-scrolled .brand-title-v2,
.main-header-v2.is-solid .brand-title-v2 {
  color: var(--text-title);
}
.brand-title-v2 span { color: var(--c-gold-text); }
.brand-sub-v2 {
  font-family: var(--f-sans);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-yellow);
  margin-top: 3px;
}

.nav-v2 {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.nav-v2 a, .nav-v2 .nav-item-btn {
  font-family: var(--f-sans);
  font-size: 0.92rem;
  font-weight: 700;
  color: #F1F5F9;
  padding: 0.55rem 1.05rem;
  border-radius: var(--r-pill);
  transition: all 0.25s ease;
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.main-header-v2.is-scrolled .nav-v2 a,
.main-header-v2.is-solid .nav-v2 a,
.main-header-v2.is-scrolled .nav-v2 .nav-item-btn,
.main-header-v2.is-solid .nav-v2 .nav-item-btn {
  color: var(--text-head);
}
.nav-v2 a:hover, .nav-v2 a.active,
.nav-v2 .nav-has-mega:hover .nav-item-btn {
  color: var(--bg-obsidian) !important;
  background: var(--c-yellow);
}

/* ── SERVICES MEGA MENU ── */
.nav-has-mega {
  position: static;
}
.header-v2-container {
  position: relative;
}
.mega-menu-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  right: auto;
  width: 920px;
  max-width: calc(100vw - 32px);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--r-xl);
  border: 1.5px solid var(--c-yellow-border);
  box-shadow: 0 20px 50px rgba(10, 19, 36, 0.16), 0 4px 14px rgba(0, 0, 0, 0.05);
  padding: 1.35rem 1.6rem 1.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 1000;
}
.mega-menu-dropdown::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 0;
  width: 100%;
  height: 24px;
  background: transparent;
}
.nav-has-mega:hover .mega-menu-dropdown,
.nav-has-mega:focus-within .mega-menu-dropdown,
.mega-menu-dropdown:hover {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.mega-menu-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 260px;
  gap: 1.5rem;
}
.mega-menu-3col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 260px;
  gap: 1.5rem;
  align-items: stretch;
}
@media (max-width: 991px) {
  .mega-menu-dropdown {
    display: none !important;
  }
}
.mega-col-title {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-gold-text);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1.5px solid var(--bg-warm-subtle);
}
.mega-service-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mega-service-link {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem !important;
  border-radius: 8px !important;
  text-decoration: none;
  transition: all 0.2s ease;
  background: transparent !important;
}
.mega-service-link:hover {
  background: var(--bg-warm-subtle) !important;
  transform: translateX(4px);
}
.mega-service-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(245, 197, 24, 0.18);
  color: #8A6100;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.mega-service-link:hover .mega-service-icon {
  background: var(--c-yellow);
  color: var(--bg-obsidian);
}
.mega-service-info {
  display: flex;
  flex-direction: column;
}
.mega-service-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-title) !important;
  line-height: 1.2;
}
.mega-service-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.3;
  margin-top: 2px;
}
.mega-promo-card {
  background: linear-gradient(145deg, #0A1324 0%, #172642 100%);
  border-radius: 12px;
  padding: 1.25rem;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 210, 0, 0.25);
}
.mega-promo-card h4 {
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
}
.mega-promo-card p {
  color: #CBD5E1;
  font-size: 0.78rem;
  line-height: 1.4;
  margin-bottom: 0.85rem;
}
.mega-promo-card .btn-whatsapp {
  font-size: 0.82rem;
  padding: 0.65rem 1rem;
  justify-content: center;
}
.mega-menu-footer {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.mega-menu-footer a {
  color: var(--c-gold-text) !important;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 !important;
  background: transparent !important;
}
.mega-menu-footer a:hover {
  text-decoration: underline;
}

.header-v2-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.phone-badge-v2 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  padding: 0.55rem 1.15rem;
  border-radius: var(--r-pill);
  font-family: var(--f-sans);
  font-size: 0.86rem;
  font-weight: 800;
  color: #FFFFFF;
  transition: all var(--trans);
}
.main-header-v2.is-scrolled .phone-badge-v2,
.main-header-v2.is-solid .phone-badge-v2 {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  color: var(--text-title);
}
.phone-badge-v2:hover {
  border-color: var(--c-yellow);
  color: var(--c-yellow-dark);
}
.phone-badge-v2 i {
  color: var(--c-yellow);
}
.main-header-v2.is-scrolled .phone-badge-v2 i,
.main-header-v2.is-solid .phone-badge-v2 i {
  color: #D99800;
}

/* Mobile Hamburger Button */
.burger-v2 {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  flex-direction: column;
  gap: 5px;
}
.burger-v2 span {
  display: block;
  width: 26px;
  height: 2.5px;
  background: #FFFFFF;
  border-radius: 2px;
  transition: 0.3s;
}
.main-header-v2.is-scrolled .burger-v2 span,
.main-header-v2.is-solid .burger-v2 span {
  background: var(--text-title);
}

/* Mobile Navigation Drawer */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 19, 36, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 998;
  display: flex;
  flex-direction: column;
  padding: 6.5rem 2rem 2.5rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
  transition: all 0.35s var(--ease);
  overflow-y: auto;
}
.mobile-nav-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 2.5rem;
}
.mobile-nav-links a {
  font-family: var(--f-sans);
  font-size: 1.35rem;
  font-weight: 800;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0.75rem;
}
.mobile-nav-links a:hover,
.mobile-nav-links a.active {
  color: var(--c-yellow);
}
.mobile-nav-links a i {
  font-size: 0.9rem;
  color: var(--c-yellow);
}
.mobile-nav-contact {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: auto;
}

/* ── 19b. INNER PAGE HERO (Darkened Obsidian Ground likened to Home) ───── */
.inner-page-hero {
  position: relative;
  background:
    radial-gradient(85% 75% at 85% 15%, rgba(255, 210, 0, 0.08) 0%, transparent 60%),
    radial-gradient(60% 60% at 12% 85%, rgba(26, 44, 76, 0.55) 0%, transparent 70%),
    linear-gradient(145deg, #0A1324 0%, #0F1D33 50%, #080F1E 100%) !important;
  color: #FFFFFF !important;
  border-bottom: 1.5px solid rgba(255, 210, 0, 0.22) !important;
  padding: clamp(5.5rem, 8.5vh, 6.8rem) 0 clamp(3rem, 5vh, 4.2rem) !important;
  overflow: hidden;
  isolation: isolate;
}

body.admin-bar .inner-page-hero {
  padding-top: clamp(7.2rem, 11vh, 8.5rem) !important;
}

/* Subtle micro-dot pattern texture for depth */
.inner-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* Glowing gold accent rule along bottom edge */
.inner-page-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 210, 0, 0.35) 20%, rgba(255, 210, 0, 0.75) 50%, rgba(255, 210, 0, 0.35) 80%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.inner-page-hero > .container {
  position: relative;
  z-index: 1;
}

/* Typography & High-Contrast Overrides */
.inner-page-hero h1,
.inner-page-hero h2,
.inner-page-hero .mb-md {
  color: #FFFFFF !important;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.inner-page-hero em,
.inner-page-hero .serif-head,
.inner-page-hero .serif-head.text-gold,
.inner-page-hero .text-gold {
  color: var(--c-yellow, #FFD200) !important;
  font-family: var(--f-serif, 'Playfair Display', Georgia, serif);
  font-style: italic;
  font-weight: 700;
  text-shadow: 0 2px 16px rgba(255, 210, 0, 0.28);
}

.inner-page-hero p,
.inner-page-hero .prose-lg,
.inner-page-hero .section-lede {
  color: #CBD5E1 !important;
  line-height: 1.75;
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  font-weight: 450;
  max-width: 800px;
}

/* Eyebrow badge pill */
.inner-page-hero .badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  border-radius: var(--r-pill, 9999px);
  font-family: var(--f-sans);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 210, 0, 0.12) !important;
  border: 1.5px solid rgba(255, 210, 0, 0.42) !important;
  color: var(--c-yellow, #FFD200) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  margin-bottom: 1.25rem;
}
.inner-page-hero .badge-pill i {
  color: var(--c-yellow, #FFD200) !important;
}

/* Buttons inside hero */
.inner-page-hero .ct-hero-actions,
.inner-page-hero .pre-footer-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.9rem;
}

.inner-page-hero .btn-whatsapp {
  background: var(--c-whatsapp, #25D366) !important;
  color: #FFFFFF !important;
  border: 1.5px solid var(--c-whatsapp, #25D366) !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.28);
}
.inner-page-hero .btn-whatsapp:hover {
  background: var(--c-whatsapp-dark, #128C7E) !important;
  border-color: var(--c-whatsapp-dark, #128C7E) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.38);
}

.inner-page-hero .btn-primary {
  background: var(--c-yellow, #FFD200) !important;
  color: var(--bg-obsidian, #0A1324) !important;
  border: 1.5px solid var(--c-yellow, #FFD200) !important;
  font-weight: 800;
  box-shadow: 0 6px 22px rgba(255, 210, 0, 0.3);
}
.inner-page-hero .btn-primary:hover {
  background: var(--c-yellow-hover, #F5B800) !important;
  border-color: var(--c-yellow-hover, #F5B800) !important;
  color: var(--bg-obsidian, #0A1324) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(255, 210, 0, 0.4);
}
.inner-page-hero .btn-primary i {
  color: var(--bg-obsidian, #0A1324) !important;
}

.inner-page-hero .btn-secondary {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.32) !important;
  color: #FFFFFF !important;
  font-weight: 700;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: all 0.25s ease;
}
.inner-page-hero .btn-secondary i {
  color: var(--c-yellow, #FFD200) !important;
  transition: color 0.25s ease;
}
.inner-page-hero .btn-secondary:hover,
.inner-page-hero .btn-secondary:focus-visible {
  background: var(--c-yellow, #FFD200) !important;
  border-color: var(--c-yellow, #FFD200) !important;
  color: var(--bg-obsidian, #0A1324) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 210, 0, 0.35);
}
.inner-page-hero .btn-secondary:hover i,
.inner-page-hero .btn-secondary:focus-visible i {
  color: var(--bg-obsidian, #0A1324) !important;
}

/* Contact hero meta chips */
.inner-page-hero .ct-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.8rem;
  margin-top: 1.6rem;
  font-family: var(--f-sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: #CBD5E1 !important;
}
.inner-page-hero .ct-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #CBD5E1 !important;
}
.inner-page-hero .ct-hero-meta i {
  color: var(--c-yellow, #FFD200) !important;
  font-size: 0.92rem;
}

@media (max-width: 768px) {
  .inner-page-hero {
    padding: clamp(5.2rem, 10vh, 6.2rem) 0 clamp(2.5rem, 4vh, 3.2rem) !important;
  }
  .inner-page-hero .ct-hero-actions,
  .inner-page-hero .pre-footer-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .inner-page-hero .ct-hero-actions > a,
  .inner-page-hero .pre-footer-buttons > a {
    width: 100%;
    justify-content: center;
  }
  .inner-page-hero .ct-hero-meta {
    flex-direction: column;
    gap: 0.5rem;
  }
}


/* ── 20. RICH 4-COLUMN FOOTER ────────────────────────────────────────────── */
.rich-footer {
  background: var(--bg-obsidian);
  color: #FFFFFF;
  padding: 3.2rem 0 1.5rem;
  border-top: 1px solid var(--line-dark);
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: clamp(1.5rem, 2.5vw, 2.2rem);
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line-dark);
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
}
.footer-brand-col p {
  color: var(--text-muted-dark);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0.75rem 0 1rem;
}
.footer-badges-wrap {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.footer-badge-item {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--c-yellow);
}

.footer-col-title {
  color: #FFFFFF;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.footer-col-title i {
  color: var(--c-yellow);
}

.footer-links-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.footer-links-list a {
  color: var(--text-muted-dark);
  font-size: 0.93rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.footer-links-list a:hover {
  color: var(--c-yellow);
  transform: translateX(3px);
}

.footer-contact-box {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.footer-contact-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--text-muted-dark);
}
.footer-contact-row i {
  color: var(--c-yellow);
  font-size: 1rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.footer-contact-row a {
  color: #FFFFFF;
  font-weight: 700;
}
.footer-contact-row a:hover {
  color: var(--c-yellow);
}

.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding-top: 1.2rem;
  font-size: 0.82rem;
  color: #94A3B8;
}
.footer-legal-links {
  display: flex;
  gap: 1.4rem;
}
.footer-legal-links a {
  color: #94A3B8;
}
.footer-legal-links a:hover {
  color: var(--c-yellow);
}


/* ── RESPONSIVE (header/footer rules from mockup section 21) ── */

/* ── 21. RESPONSIVE BREAKPOINTS ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-top-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .top-announcement-bar { display: none; }
  .nav-v2 { display: none !important; }
  .burger-v2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    z-index: 999;
    padding: 0;
  }
  .main-header-v2.is-scrolled .burger-v2, .main-header-v2.is-solid .burger-v2 {
    background: var(--bg-warm-subtle);
    border: 1px solid var(--line-border);
  }
  .burger-v2 span {
    display: block;
    width: 22px;
    height: 2px;
    background: #FFFFFF;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    margin: 2.5px 0;
  }
  .main-header-v2.is-scrolled .burger-v2 span, .main-header-v2.is-solid .burger-v2 span {
    background: var(--text-title);
  }
  .burger-v2.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    background: #FFFFFF !important;
  }
  .burger-v2.is-active span:nth-child(2) {
    opacity: 0;
  }
  .burger-v2.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    background: #FFFFFF !important;
  }
  .phone-badge-v2 span { display: none; }
  .phone-badge-v2 {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .header-v2-actions .btn-whatsapp {
    padding: 0.5rem 0.9rem;
    font-size: 0.78rem;
  }
}
@media (max-width: 600px) {
  .header-v2-container {
    gap: 0.6rem;
  }
  .brand-title-v2 {
    font-size: 1.15rem;
  }
  .brand-v2 img.brand-mark {
    width: 38px;
    height: 38px;
  }
  .brand-v2 .custom-logo,
  .brand-v2 img.custom-logo,
  .custom-logo-link img {
    width: var(--midcity-logo-width-mobile, 135px) !important;
    max-width: var(--midcity-logo-width-mobile, 135px) !important;
    max-height: 46px !important;
  }
  .brand-sub-v2 {
    font-size: 0.58rem;
  }
  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
}
@media (max-width: 480px) {
  .header-v2-container {
    gap: 0.4rem;
  }
  .brand-text-v2 .brand-sub-v2 {
    display: none;
  }
  .header-v2-actions {
    gap: 0.4rem;
  }
  .header-v2-actions .btn-whatsapp .wa-txt {
    display: none;
  }
  .header-v2-actions .btn-whatsapp {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .phone-badge-v2 {
    width: 40px;
    height: 40px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   22. POLISH PASS — unified header/footer utilities, form semantics,
       responsive grid modifiers, and accessibility affordances.
       Added when the mockups were consolidated for the WordPress port.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 22.1 Announcement bar ────────────────────────────────────────────── */
.announcement-group {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  flex-wrap: wrap;
}
.announcement-sep {
  opacity: 0.35;
}
.announcement-icon {
  color: var(--c-yellow);
}
.announcement-phone {
  color: var(--c-yellow);
  font-weight: 800;
}
.announcement-phone:hover {
  color: #FFFFFF;
}

/* ── 22.2 Header nav & mega menu ──────────────────────────────────────── */
.nav-caret {
  font-size: 0.7rem;
  margin-left: 2px;
}
.mega-menu-grid.mega-menu-4col,
.mega-menu-grid.mega-menu-3col {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 260px;
  gap: 1.5rem;
}
.hover-bridge {
  position: absolute;
  top: -24px;
  left: 0;
  width: 100%;
  height: 24px;
}
.badge-pill-dark {
  background: rgba(255, 210, 0, 0.15);
  color: var(--c-yellow);
  border: 1px solid rgba(255, 210, 0, 0.3);
  font-size: 0.7rem;
  padding: 0.25rem 0.65rem;
  margin-bottom: 0.5rem;
  border-radius: var(--r-pill);
}

/* ── Sharp, high-contrast button styling — eliminates blurred / dark text ── */
.mega-promo-card .mega-promo-btn,
.nav-v2 .mega-promo-card a.mega-promo-btn,
.main-header-v2.is-solid .nav-v2 .mega-promo-card a.mega-promo-btn,
.main-header-v2.is-scrolled .nav-v2 .mega-promo-card a.mega-promo-btn {
  background: #FFD200 !important;
  background-color: #FFD200 !important;
  color: #0A1324 !important;
  font-family: var(--f-sans) !important;
  font-weight: 800 !important;
  font-size: 0.84rem !important;
  letter-spacing: 0.01em !important;
  padding: 0.65rem 1.15rem !important;
  border-radius: var(--r-pill) !important;
  border: 1.5px solid #FFD200 !important;
  box-shadow: 0 4px 14px rgba(255, 210, 0, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  text-decoration: none !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.mega-promo-card .mega-promo-btn i,
.nav-v2 .mega-promo-card a.mega-promo-btn i {
  color: #0A1324 !important;
  font-size: 0.85rem !important;
}
.mega-promo-card .mega-promo-btn:hover,
.nav-v2 .mega-promo-card a.mega-promo-btn:hover {
  background: #E5BD00 !important;
  background-color: #E5BD00 !important;
  border-color: #E5BD00 !important;
  color: #0A1324 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(255, 210, 0, 0.5) !important;
}

.mega-footer-icon {
  color: var(--c-yellow);
  margin-right: 6px;
}
@media (max-width: 1200px) {
  .mega-menu-dropdown {
    width: 840px;
    padding: 1.2rem 1.4rem 1rem;
  }
  .mega-menu-grid.mega-menu-4col,
  .mega-menu-grid.mega-menu-3col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 240px;
    gap: 1.2rem;
  }
}
@media (max-width: 991px) {
  .mega-menu-dropdown {
    display: none !important;
  }
}

/* ── Standard Navigation Dropdowns ────────────────────────────────────── */
.nav-has-dropdown {
  position: relative;
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: #ffffff;
  border-radius: 12px;
  border: 1.5px solid var(--c-yellow-border);
  box-shadow: 0 16px 40px rgba(10, 19, 36, 0.12);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.nav-has-dropdown:hover .nav-dropdown-menu,
.nav-has-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown-menu a {
  color: var(--text-title) !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  padding: 0.5rem 0.85rem !important;
  border-radius: 8px !important;
  display: block !important;
  white-space: nowrap !important;
  background: transparent !important;
}
.nav-dropdown-menu a:hover {
  background: var(--bg-warm-subtle) !important;
  color: var(--c-gold-text) !important;
}

/* ── 22.3 Mobile drawer ───────────────────────────────────────────────── */
.mobile-nav-cta {
  justify-content: center;
  padding: 1rem;
}

/* ── 22.4 Footer ──────────────────────────────────────────────────────── */
.footer-brand-link {
  margin-bottom: 0.5rem;
}
.brand-title-light {
  color: #FFFFFF;
}
.brand-title-light span {
  color: var(--c-yellow);
}
.brand-sub-light {
  color: var(--c-yellow);
}
.footer-links-list a {
  justify-content: space-between;
}
.footer-links-list a i {
  font-size: 0.72rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.2s ease;
}
.footer-links-list a:hover i {
  opacity: 1;
  transform: translateX(0);
}
.footer-contact-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.footer-label-yellow { color: var(--c-yellow); }
.footer-label-green  { color: var(--c-whatsapp); }

.footer-social-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.footer-social-link {
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font-size: 0.92rem;
  transition: all 0.2s ease;
}
.footer-social-link:hover {
  background: var(--c-yellow);
  border-color: var(--c-yellow);
  color: var(--bg-obsidian);
  transform: translateY(-2px);
}

.footer-credit-bar {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-dim);
}
.footer-credit-bar a {
  color: var(--c-yellow);
  font-weight: 700;
}
.footer-credit-bar a:hover {
  color: #FFFFFF;
}


/* ── FOOTER REDESIGN (rev 2) ── */

/* ══════════════════════════════════════════════════════════════════════════
   25. FOOTER REDESIGN (rev 2)
       The previous footer was a flat 4-column link list. This adds the CTA
       band, the payment/assurance strip, and the hours note that make it
       read as a proper close rather than a sitemap dump.
   ══════════════════════════════════════════════════════════════════════════ */

.footer-cta-band {
  background:
    radial-gradient(90% 140% at 88% 0%, rgba(255, 210, 0, 0.16) 0%, rgba(255, 210, 0, 0) 62%),
    var(--bg-obsidian-card);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: clamp(2.2rem, 4vw, 3.2rem) 0;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.footer-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}
.footer-cta-copy { max-width: 62ch; }
.footer-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-sans);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-yellow);
  margin-bottom: 0.7rem;
}
.footer-cta-copy h3 {
  color: #FFFFFF;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  margin-bottom: 0.5rem;
  text-wrap: balance;
}
.footer-cta-copy p {
  color: var(--text-dim);
  font-size: 0.96rem;
  margin: 0;
}
.footer-cta-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.footer-hours-note {
  margin-top: 0.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.82rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.footer-hours-note i { color: var(--c-yellow); }

.footer-assurance-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.footer-assurance-item {
  background: var(--bg-obsidian);
  padding: 1.05rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.footer-assurance-item i {
  font-size: 1.35rem;
  color: var(--c-yellow);
  flex: none;
}
.footer-assurance-item strong {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.88rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.3;
}
.footer-assurance-item span {
  font-size: 0.8rem;
  color: var(--text-dim);
}

@media (max-width: 900px) {
  .footer-assurance-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-cta-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .footer-assurance-strip { grid-template-columns: 1fr; }
  .footer-cta-actions { width: 100%; }
  .footer-cta-actions > a { flex: 1 1 100%; justify-content: center; }
}


/* ── FOOTER DENSITY (rev 3) ── */

/* ══════════════════════════════════════════════════════════════════════════
   28. FOOTER DENSITY (rev 3)

       The footer carried four stacked columns plus a four-row assurance
       strip on a phone, which came to roughly three and a half screens of
       scrolling after the page content ended. The information is all worth
       keeping, so this pass shortens it by laying it out in pairs rather
       than by deleting anything:

         tablet  brand | contact  over  services | company
         phone   brand full-width, then services | company side by side,
                 contact full-width, assurance strip 2x2

       Nothing here hides content or depends on JavaScript.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .footer-top-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
    padding-bottom: 1.8rem;
  }
  .footer-brand-col p { margin: 0.65rem 0 0.85rem; }
  .rich-footer { padding-top: 2.2rem; }
}

@media (max-width: 760px) {
  .footer-top-grid {
    /* Two short link lists sit side by side instead of stacking; the wide
       blocks keep the full width. */
    grid-template-columns: 1fr 1fr;
    gap: 1.3rem 1.2rem;
    padding-bottom: 1.5rem;
  }
  .footer-brand-col,
  .footer-contact-box { grid-column: 1 / -1; }

  .footer-brand-col p {
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0.6rem 0 0.8rem;
  }
  .footer-badges-wrap { gap: 0.35rem; }
  .footer-social-wrap { margin-top: 0.7rem; }

  .footer-col-title { margin-bottom: 0.55rem; }
  .footer-links-list { gap: 0.35rem; }
  .footer-links-list a { font-size: 0.9rem; }

  /* Contact block reads as two columns of detail rather than four stacked
     rows — the phone and WhatsApp numbers pair naturally. */
  .footer-contact-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 1rem;
    align-items: start;
  }
  .footer-contact-box > .footer-col-title { grid-column: 1 / -1; }
  .footer-contact-row { font-size: 0.87rem; }
  .footer-hours-note {
    grid-column: 1 / -1;
    margin-top: 0.1rem;
    padding-top: 0.6rem;
    font-size: 0.78rem;
  }

  .footer-assurance-strip { margin-top: 1.4rem; }
  .footer-assurance-item { padding: 0.7rem 0.75rem; gap: 0.5rem; }
  .footer-assurance-item i { font-size: 1.1rem; }
  .footer-assurance-item strong { font-size: 0.8rem; }
  .footer-assurance-item span { font-size: 0.72rem; line-height: 1.35; }

  .footer-cta-band { padding: 1.5rem 0; }
  .footer-cta-inner { gap: 1rem; }
  .footer-cta-copy h3 { font-size: 1.2rem; }
  .footer-cta-copy p { font-size: 0.88rem; }
  .footer-cta-eyebrow { margin-bottom: 0.4rem; font-size: 0.68rem; }

  .rich-footer { padding-top: 1.8rem; }
  .footer-bottom-bar { padding: 0.8rem 0; gap: 0.5rem; font-size: 0.8rem; }
  .footer-legal-links { gap: 0.9rem; }
  .footer-credit-bar { padding: 0.6rem 0; font-size: 0.75rem; }
}

@media (max-width: 560px) {
  /* Keep the assurance strip paired rather than letting it run to four
     full-width rows, which was the single tallest block on a phone. */
  .footer-assurance-strip { grid-template-columns: 1fr 1fr; }
  .footer-assurance-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.8rem 0.75rem;
  }
}

@media (max-width: 400px) {
  /* Below this the two link columns start to wrap awkwardly. */
  .footer-contact-box { grid-template-columns: 1fr; gap: 0.72rem; }
}

/* ── 28b. Contact block density ──────────────────────────────────────────
   The booking line and the WhatsApp line were the same number on two
   stacked rows. They are one row now, with the chat link sitting beside
   the number instead of under it. */

.footer-contact-row-dual > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
}
.footer-contact-row-dual .footer-contact-label { flex: 1 0 100%; }
.footer-wa-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-family: var(--f-sans);
  font-size: 0.73rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.3rem 0.55rem;
  border-radius: var(--r-pill);
  color: #25D366;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.3);
  transition: background var(--t-fast), color var(--t-fast);
}
.footer-wa-chip:hover,
.footer-wa-chip:focus-visible { background: #25D366; color: #04210F; }

@media (max-width: 1024px) {
  /* Tablet keeps the 2x2 arrangement, which packs better than stacking —
     the saving comes from the blocks themselves, not the column count. */
  .footer-contact-row { font-size: 0.87rem; gap: 0.6rem; }
  .footer-contact-label { font-size: 0.66rem; letter-spacing: 0.1em; }
  .footer-contact-box { gap: 0.72rem; }
  .footer-brand-col p { font-size: 0.89rem; line-height: 1.6; }
  .footer-badges-wrap { gap: 0.35rem; }
  .footer-badges-wrap > * { font-size: 0.66rem; padding: 0.26rem 0.5rem; }
  .footer-hours-note { font-size: 0.76rem; padding-top: 0.7rem; }
  .footer-col-title { font-size: 0.82rem; margin-bottom: 0.65rem; }
  .footer-links-list { gap: 0.38rem; }
  .footer-links-list a { font-size: 0.88rem; }
  .footer-cta-band { padding: 1.9rem 0; }
  .footer-cta-copy h3 { font-size: 1.25rem; }
  .footer-cta-copy p { font-size: 0.9rem; }
}

/* ── 28c. Small-screen trims ─────────────────────────────────────────────
   Two details that cost more height than they are worth on a phone: the
   trailing arrow on each footer link (which squeezes the label into a
   second line inside a narrow column), and the CTA buttons being forced
   to full width so they stack. */

@media (max-width: 760px) {
  .footer-links-list a i { display: none; }
  .footer-links-list a { gap: 0; }
}

@media (max-width: 560px) {
  /* Side by side rather than stacked; both stay comfortably tappable. */
  .footer-cta-actions { width: 100%; gap: 0.55rem; }
  .footer-cta-actions > a {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    font-size: 0.85rem;
    white-space: nowrap;
  }
}

/* The full number does not fit beside the WhatsApp button on a narrow
   phone, and tapping dials it anyway — the number itself is still printed
   in the Move Desk block a little further down. */
.cta-num-short { display: none; }
@media (max-width: 560px) {
  .cta-num-full { display: none; }
  .cta-num-short { display: inline; }
}



/* ── HEADER ON A LIGHT HERO (rev 4) ── */

/* ── 30b. Header on a light hero ─────────────────────────────────────────
   The bar was drawn to float over dark video: navy tint, white nav, white
   phone badge. With the hero inverted there is no dark ground left on any
   page, so the resting state now matches what it already became on scroll.
   Kept as its own block so the scrolled/solid rules stay untouched. */

.main-header-v2 {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(14, 24, 38, 0.08);
}
.main-header-v2.is-scrolled,
.main-header-v2.is-solid {
  background: rgba(255, 255, 255, 0.98);
}

.brand-title-v2,
.main-header-v2:not(.is-scrolled):not(.is-solid) .brand-title-v2 {
  color: var(--text-title);
}
.main-header-v2:not(.is-scrolled):not(.is-solid) .brand-title-v2 span {
  color: var(--c-gold-text);
}
.brand-sub-v2 { color: var(--c-gold-text); }

.nav-v2 a,
.nav-v2 .nav-item-btn { color: var(--text-head); }

.phone-badge-v2 {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  color: var(--text-title);
}
.phone-badge-v2 i { color: #D99800; }

.burger-v2 span { background: var(--text-title); }