/**
 * Main theme styles. Depends on variables.css (enqueued before this).
 */
/* -------------------------------------------------------------------------
   Base & layout
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-white);
    background-color: var(--color-white);
	-webkit-font-smoothing: antialiased;
}
   
   body.menu-open {
       overflow: hidden;
   }
   
   a {
       color: inherit;
       text-decoration: none;
   }
   
   a:hover {
       opacity: 0.9;
   }
   
   img {
       max-width: 100%;
       height: auto;
       display: block;
   }
   
   /* -------------------------------------------------------------------------
      Site header (transparent over hero, white text)
      ------------------------------------------------------------------------- */
   .site-header {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 1000;
       padding: var(--spacing-xs) var(--spacing-sm);
       transition: background-color 0.25s ease, backdrop-filter 0.25s ease, transform 0.3s ease;
   }
   .site-header.is-header-hidden {
       transform: translateY(-100%);
   }
   
   .site-header .header-inner {
       display: flex;
       align-items: center;
       justify-content: space-between;
   }
   
   .site-header .header-logo {
       flex-shrink: 0;
   }
   
   .site-header .logo-link {
       display: inline-flex;
       align-items: center;
       font-weight: 600;
       font-size: 1.25rem;
       letter-spacing: 0.01em;
       text-transform: uppercase;
       color: #fff;
   }
   
   .site-header .logo-text {
       white-space: nowrap;
   }
   
   .site-header .custom-logo-link img {
       max-height: 42px;
       width: auto;
   }
   
   /* Center nav */
   .main-navigation {
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
   }
   
   .main-navigation .nav-menu {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: var(--spacing-sm);
       margin: 0;
       padding: 0;
       list-style: none;
   }
   
   .main-navigation .nav-menu > li > a {
       font-size: 0.9rem;
       font-weight: 500;
       letter-spacing: 0.01em;
       color: var(--color-white);
       white-space: nowrap;
       padding: 0.5rem 0.75rem;
       border-radius: var(--nav-hover-border-radius);
       transition: background-color var(--transition-fast), opacity var(--transition-fast);
   }
   
   .main-navigation .nav-menu > li > a:hover,
   .main-navigation .nav-menu > li:hover > a {
       background-color: var(--nav-hover-bg);
       opacity: 1;
   }

   /* Mega menu: fleet grid left, links right */
   .mega-menu-wrap {
       position: absolute;
       left: 0;
       right: 0;
       top: 100%;
       z-index: 999;
       visibility: hidden;
       opacity: 0;
       transform: translateY(-4px);
       transition: visibility 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
   }
   .mega-menu-wrap.is-open {
       visibility: visible;
       opacity: 1;
       transform: translateY(0);
   }
   .mega-menu-panel {
       background: #fff;
       padding: var(--spacing-lg) var(--spacing-sm);
   }
   .mega-menu-inner {
       display: flex;
       gap: var(--spacing-lg);
   }
   .mega-menu-left {
       flex: 1;
       min-width: 0;
   }
   .mega-menu-fleet-grid {
       display: grid;
       grid-template-columns: repeat(5, 1fr);
       gap: var(--spacing-lg) var(--spacing-sm);
   }
   .mega-menu-fleet-item {
       display: flex;
       flex-direction: column;
       background: #fff;
   }
   .mega-menu-fleet-image {
       width: 100%;
       padding-bottom: 56%;
       background-size: cover;
       background-position: center;
       border-radius: var(--radius-card);
   }
   .mega-menu-fleet-image-placeholder {
       background-image: none;
       background-color: #eee;
   }
   .mega-menu-fleet-info {
       padding: 0.75rem 0 0;
   }
   .mega-menu-fleet-name {
       display: block;
       font-family: var(--font-secondary);
       font-size: var(--font-size-xl);
       font-weight: 500;
       color: var(--color-text-light);
       margin-bottom: 0.5rem;
   }
   .mega-menu-fleet-actions {
       display: flex;
       flex-wrap: wrap;
       gap: 0 1.25rem;
       font-size: 0.875rem;
       font-weight: 400;
   }
   .mega-menu-fleet-actions a {
       color: #000;
       text-decoration: underline;
       text-underline-offset: 3px;
   }
   .mega-menu-fleet-actions a:hover {
       opacity: 0.7;
   }
   @media (max-width: 1000px) {
       .mega-menu-fleet-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }
   .mega-menu-right {
       flex-shrink: 0;
       width: 200px;
       padding-left: var(--spacing-sm);
       border-left: 1px solid #eee;
   }
   .mega-menu-links {
       list-style: none;
       margin: 0;
       padding: 0;
   }
   .mega-menu-links li {
       margin: 0;
       padding: 0.35rem 0;
   }
   .mega-menu-links a {
       font-size: 0.9rem;
       color: var(--color-text-light);
       text-decoration: none;
   }
   .mega-menu-links a:hover {
       text-decoration: underline;
   }
   
   /* Header actions (right) */
   .header-actions {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       flex-shrink: 0;
   }
   
   .header-icon {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 40px;
       height: 40px;
       padding: 0;
       border: none;
       background: transparent;
       color: var(--color-white);
       cursor: pointer;
       border-radius: var(--nav-hover-border-radius);
       transition: opacity var(--transition-fast), background var(--transition-fast);
   }
   
   .header-icon:hover {
       opacity: 0.9;
       background: var(--nav-hover-bg);
   }
   
   .header-icon-support {
       text-decoration: none;
   }
   
   .header-icon-support .action-label {
       display: none;
   }
   
   .header-icon .icon {
       flex-shrink: 0;
   }

   .header-social {
       display: flex;
       align-items: center;
       gap: 0.25rem;
   }
   .header-social .header-social-link .icon {
       width: 20px;
       height: 20px;
   }

   .toggle-mobile-menu {
    display: none;
    position: relative;
    margin-right: -7px;
   }
   .toggle-mobile-menu .icon-menu,
   .toggle-mobile-menu .icon-close {
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
   }
   
   /* Support label on larger screens */
   @media (min-width: 900px) {
       .header-icon-support {
           width: auto;
           padding: 0 0.75rem;
           gap: 0.35rem;
       }
   
       .header-icon-support .action-label {
           display: inline;
           font-size: 0.9rem;
           font-weight: 500;
       }
   }
   
   /* Scrolled state: subtle background */
   .site-header.is-scrolled {
       background: rgba(0, 0, 0, 0.85);
       backdrop-filter: blur(8px);
   }

   /* White header when mega menu is open */
   .site-header.is-mega-open {
       background: #fff;
       backdrop-filter: none;
   }
   .site-header.is-mega-open .nav-menu > li > a,
   .site-header.is-mega-open .header-icon {
       color: var(--color-text-light);
   }
   .site-header.is-mega-open .header-icon:hover,
   .site-header.is-mega-open .nav-menu > li > a:hover,
   .site-header.is-mega-open .nav-menu > li:hover > a {
       background-color: rgba(0, 0, 0, 0.06);
   }
   .site-header.is-mega-open .logo-link {
       color: var(--color-text-light);
   }
   .site-header.is-mega-open .custom-logo-link img {
       filter: invert(1);
   }

   /* White header when mobile menu is open */
   body.menu-open .site-header {
       background: #fff;
       backdrop-filter: none;
   }
   body.menu-open .site-header .nav-menu > li > a,
   body.menu-open .site-header .header-icon {
       color: var(--color-text-light);
   }
   body.menu-open .site-header .header-icon:hover,
   body.menu-open .site-header .nav-menu > li > a:hover,
   body.menu-open .site-header .nav-menu > li:hover > a {
       background-color: rgba(0, 0, 0, 0.06);
   }
   body.menu-open .site-header .logo-link {
       color: var(--color-text-light);
   }
   body.menu-open .site-header .custom-logo-link img {
       filter: invert(1);
   }

   /* Toggle: show menu icon by default, close icon when menu open */
   .toggle-mobile-menu .icon-close {
       display: none;
   }
   body.menu-open .toggle-mobile-menu .icon-menu {
       display: none;
   }
   body.menu-open .toggle-mobile-menu .icon-close {
       display: block;
   }
   
   /* Mobile nav – full screen, fade in */
   .mobile-nav {
       position: fixed;
       inset: 0;
       width: 100%;
       height: 100%;
       height: 100dvh;
       min-height: 100vh;
       min-height: 100dvh;
       background: #fff;
       opacity: 0;
       visibility: hidden;
       transition: opacity 0.3s ease, visibility 0.3s ease;
       z-index: 999;
       overflow-y: auto;
       display: flex;
       flex-direction: column;
   }
   
   .mobile-nav.is-open {
       opacity: 1;
       visibility: visible;
   }
   
   .mobile-nav-inner {
       display: flex;
       flex-direction: column;
       flex: 1;
       min-height: 100%;
       min-height: 100dvh;
       padding: var(--spacing-sm) var(--container-padding);
   }
   
   .mobile-nav-header {
       flex-shrink: 0;
       display: flex;
       justify-content: flex-end;
       align-items: center;
       min-height: 48px;
   }
   
   .mobile-nav-close {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 44px;
       height: 44px;
       padding: 0;
       border: none;
       background: transparent;
       color: #444;
       cursor: pointer;
       border-radius: 6px;
       transition: background 0.2s ease, color 0.2s ease;
   }
   .mobile-nav-close .icon {
       display: block;
       flex-shrink: 0;
   }
   
   .mobile-nav-close:hover {
       background: rgba(0, 0, 0, 0.06);
       color: #111;
   }
   
   .mobile-nav-body {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 1.5rem;
   }
   
   .mobile-nav .mobile-menu-list,
   .mobile-nav .nav-menu {
       list-style: none;
       margin: 0;
       padding: 0;
       display: flex;
       flex-direction: column;
       gap: 0;
       align-items: stretch;
   }
   
   .mobile-nav .nav-menu > li {
       margin: 0;
       padding: 0;
   }
   
   .mobile-nav .nav-menu a {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 1rem 0;
       font-size: 1rem;
       font-weight: 400;
       color: #333;
       text-decoration: none;
       transition: color 0.2s ease;
   }
   
   .mobile-nav .nav-menu a:hover {
       color: #111;
   }
   
   .mobile-nav .nav-menu a::after {
       content: '';
       width: 20px;
       height: 20px;
       flex-shrink: 0;
       margin-left: 0.5rem;
       background: currentColor;
       opacity: 0.5;
       mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
       mask-size: contain;
       mask-repeat: no-repeat;
       mask-position: center;
       -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
       -webkit-mask-size: contain;
       -webkit-mask-repeat: no-repeat;
       -webkit-mask-position: center;
   }

   .mobile-nav-social {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 1rem;
       margin-top: auto;
   }
   .mobile-nav-social-link {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       color: var(--color-text-light);
   }
   .mobile-nav-social-link .icon {
       flex-shrink: 0;
   }
   
   .mobile-nav-utility {
       display: flex;
       flex-direction: column;
       gap: 0.25rem;
       margin-top: auto;
       padding-top: 1.5rem;
       border-top: 1px solid rgba(0, 0, 0, 0.08);
   }
   
   .mobile-nav-row {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       padding: 1rem 0;
       font-size: 1rem;
       font-weight: 400;
       color: #333;
       text-decoration: none;
       background: none;
       border: none;
       cursor: pointer;
       width: 100%;
       text-align: left;
       transition: color 0.2s ease;
   }
   
   .mobile-nav-row:hover {
       color: #111;
   }
   
   .mobile-nav-row-icon {
       flex-shrink: 0;
       color: #666;
   }
   
   .mobile-nav-row-text {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 0.15rem;
   }
   
   .mobile-nav-row-primary {
       font-size: 1rem;
       color: inherit;
   }
   
   .mobile-nav-row-secondary {
       font-size: 0.875rem;
       color: #666;
   }
   
   .mobile-nav-account .mobile-nav-row-text {
       flex-direction: row;
   }
   
   .mobile-nav-chevron {
       flex-shrink: 0;
       color: #999;
   }
   
   @media (min-width: 768px) {
       .mobile-nav {
           display: none;
       }
   }
   
   @media (max-width: 767px) {
    .toggle-mobile-menu {
        display: block;
    }
       .main-navigation {
           display: none;
       }
       .mega-menu-wrap {
           display: none !important;
       }

       .hero-actions {
        display: none !important;
       }
   }
   
   /* -------------------------------------------------------------------------
      Hero section (full-width, sunset-style background, centered title)
      ------------------------------------------------------------------------- */
   .hero-section {
       position: relative;
       min-height: 90vh;
       display: flex;
       align-items: flex-start;
       justify-content: center;
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
       background-image: var(--hero-bg-mobile);
       text-align: center;
       padding: var(--spacing-2xl) var(--container-padding);
   }

   body.about-page-hero .hero-section,
   body.locations-page-hero .hero-section {
    min-height: 100vh;
   }

   @media (min-width: 768px) {
       .hero-section {
           background-image: var(--hero-bg);
       }
   }

   .hero-video {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       z-index: 0;
   }
   .hero-video-desktop {
       display: none;
   }
   .hero-video-mobile {
       display: block;
   }
   @media (min-width: 768px) {
       .hero-video-desktop {
           display: block;
       }
       .hero-video-mobile {
           display: none;
       }
   }
   
   .hero-overlay {
       position: absolute;
       inset: 0;
       z-index: 1;
       background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.85) 100%);
       pointer-events: none;
   }
   
   .hero-content {
       position: relative;
       z-index: 1;
       padding-left: var(--container-padding);
       padding-right: var(--container-padding);
   }
   
   .hero-title {
       margin: 0 0 0.5rem;
       font-size: clamp(4rem, 10vw, 7rem);
       font-weight: 700;
       letter-spacing: 0.01em;
       color: #fff;
       line-height: 0.9;
   }
   
   .hero-subtitle {
       margin: 0 0 2rem;
       font-size: clamp(1rem, 2.5vw, 1.25rem);
       font-weight: 400;
       color: rgba(255, 255, 255, 0.95);
       letter-spacing: 0.01em;
       text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
   }
   
   .hero-actions {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
       gap: 1rem;
   }

   /* Hero scroll-down arrow (front page: anchor to fleet) */
   .hero-scroll-arrow {
       position: absolute;
       bottom: 1.5rem;
       left: 50%;
       transform: translateX(-50%);
       z-index: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       color: rgba(255, 255, 255, 0.9);
       transition: color 0.2s ease, opacity 0.2s ease;
   }
   .hero-scroll-arrow:hover {
       color: #fff;
       opacity: 1;
   }
   .hero-scroll-arrow svg {
       animation: hero-arrow-bounce 2s ease-in-out infinite;
   }
   @keyframes hero-arrow-bounce {
       0%, 100% { transform: translateY(0); }
       50% { transform: translateY(6px); }
   }

   /* -------------------------------------------------------------------------
      Shared buttons (use .btn + .btn-primary | .btn-dark | .btn-outline)
      ------------------------------------------------------------------------- */
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: var(--spacing-xs);
       padding: var(--spacing-xs) var(--spacing-sm);
       font-family: var(--font-body);
       font-size: var(--font-size-base);
       font-weight: 500;
       letter-spacing: 0.01em;
       border-radius: var(--radius-card);
       text-decoration: none;
       transition: opacity var(--transition-fast), transform var(--transition-fast);
   }
   .btn:hover {
       opacity: 0.95;
       transform: translateY(-1px);
   }
   .btn-primary {
       background: var(--color-white);
       color: var(--color-text-light);
       border: none;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   }
   .btn-dark {
       background: var(--color-background);
       color: var(--color-white);
       border: none;
   }
   .btn-light {
       background: var(--color-white);
       color: var(--color-text-light);
       border: 1px solid var(--color-border-light);
       box-shadow: none;
   }
   .btn-outline {
       background: transparent;
       color: var(--color-white);
       border: 1px solid var(--color-border-light);
       box-shadow: none;
   }
   .btn-icon {
       flex-shrink: 0;
   }

   /* -------------------------------------------------------------------------
      Section heading & subtitle (reused across sections; hero uses .hero-title / .hero-subtitle)
      ------------------------------------------------------------------------- */
   .section-heading {
       margin: 0 0 var(--spacing-md);
       font-size: clamp(2rem, 4vw, 4em);
       font-weight: 600;
       color: var(--color-light-black);
       line-height: var(--line-height-small);
   }
   .subtitle {
       margin: 0 0 1rem;
       font-size: var(--font-size-xl);
       color: var(--color-text-muted);
       line-height: var(--line-height-base);
       font-weight: 500;
   }
   .benefits-section .section-heading {
       color: var(--color-white);
   }
   .benefits-section .subtitle {
       color: var(--color-light-white);
   }

   @media (max-width: 767px) {
    .hero-section {
        align-items: flex-start;

    }
   }
   
   /* About page hero: no action buttons (title + subtitle only) */
   .hero-section--about .hero-actions {
       display: none;
   }

   /* Locations page hero: same as about (title + subtitle only, full height) */
   .hero-section--locations .hero-actions {
       display: none;
   }

   /* Only front page and about page get full hero; other pages need top padding for fixed header */
   body:not(.front-page-hero):not(.about-page-hero):not(.locations-page-hero) .site-main {
       padding-top: 72px;
   }
   
   /* -------------------------------------------------------------------------
      Site main & footer
      ------------------------------------------------------------------------- */
   .site-main {
       min-height: 40vh;
   }
   
   .site-footer {
       padding: 1.5rem;
       background: #111;
       text-align: center;
       color: rgba(255, 255, 255, 0.7);
       font-size: 0.875rem;
   }
   
   .site-footer .footer-inner {
       padding-left: var(--container-padding);
       padding-right: var(--container-padding);
   }
   
   .footer-nav .footer-logo img {
       filter: invert(1);
   }
   
   .footer-copy {
       margin: 0;
   }

   /* -------------------------------------------------------------------------
      Fleet section (carousel after hero)
      ------------------------------------------------------------------------- */
  .fleet-section {
      background: var(--color-background);
      padding: var(--spacing-3xl) var(--spacing-sm) var(--spacing-lg);
      overflow-x: hidden;
  }
  .fleet-inner {
      max-width: 100%;
      margin: 0 auto;
  }
  .fleet-slider {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-card);
      touch-action: pan-y; /* allow vertical scroll, we handle horizontal swipe */
      cursor: grab;
  }
  .fleet-slider:active {
      cursor: grabbing;
  }
  .fleet-track {
      display: flex;
      transition: transform 0.4s ease;
  }
  .fleet-slide {
      flex: 0 0 auto;
      padding: 0 6px;
      box-sizing: border-box;
  }
  .fleet-slide:first-child {
      padding-left: 0;
  }
   .fleet-card {
       position: relative;
       border-radius: var(--radius-card);
       min-height: 580px;
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
       background-color: var(--color-dark);
       display: flex;
       align-items: flex-end;
       padding: var(--spacing-sm) var(--spacing-sm);
   }
   .fleet-card-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
       border-radius: var(--radius-card);
       pointer-events: none;
   }
   .fleet-card-content {
       position: relative;
       z-index: 1;
       width: 100%;
       max-width: fit-content;
   }
   .fleet-vehicle-type {
       position: absolute;
       top: var(--spacing-sm);
       left: var(--spacing-sm);
       z-index: 1;
       font-size: var(--font-size-small);
       font-weight: 500;
       color: var(--color-white);
       text-transform: uppercase;
       letter-spacing: 0.01em;
   }
   .fleet-model-name {
       margin: 0;
       font-size: clamp(1.5rem, 4vw, 2.25rem);
       font-weight: 700;
       color: #fff;
       letter-spacing: 0.01em;
       line-height: 1.2;
   }
  .fleet-nav-prev,
  .fleet-nav-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border: none;
      border-radius: 8px;
      background: rgba(255,255,255,0.9);
      color: #333;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      transition: background var(--transition-fast), color var(--transition-fast);
  }
  .fleet-nav-prev {
      left: 12px;
  }
  .fleet-nav-next {
      right: 12px;
  }
  .fleet-nav-prev:hover,
  .fleet-nav-next:hover {
      background: #fff;
      color: #000;
  }
  .fleet-nav-prev.is-hidden,
  .fleet-nav-next.is-hidden {
      visibility: hidden;
      pointer-events: none;
  }
   .fleet-dots {
       display: flex;
       justify-content: center;
       gap: 8px;
       margin-top: var(--spacing-lg);
       padding: 0;
   }
   .fleet-dot {
       width: 12px;
       height: 12px;
       border-radius: 50%;
       border: none;
       padding: 0;
       background: rgba(255,255,255,0.4);
       cursor: pointer;
       transition: background var(--transition-fast);
   }
   .fleet-dot.is-active {
       background: rgba(255,255,255,0.95);
   }
   .fleet-dot:hover {
       background: rgba(255,255,255,0.7);
   }

  /* -------------------------------------------------------------------------
     Locations section (carousel after fleet, title + subtext, no buttons)
     ------------------------------------------------------------------------- */
  .locations-section {
      padding: var(--spacing-3xl) var(--spacing-sm) var(--spacing-lg);
      overflow-x: hidden;
  }
  .locations-inner {
      max-width: 100%;
      margin: 0 auto;
  }
  .locations-slider {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-card);
      touch-action: pan-y;
      cursor: grab;
  }
  .locations-slider:active {
      cursor: grabbing;
  }
  .locations-track {
      display: flex;
      transition: transform 0.4s ease;
  }
  .locations-slide {
      flex: 0 0 auto;
      padding: 0 6px;
      box-sizing: border-box;
  }
  .locations-slide:first-child {
      padding-left: 0;
  }
   .locations-card {
       position: relative;
       border-radius: var(--radius-card);
       min-height: 580px;
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
       background-color: var(--color-dark);
       display: flex;
       align-items: flex-end;
       padding: var(--spacing-sm) var(--spacing-sm);
   }
   .locations-card-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
       border-radius: var(--radius-card);
       pointer-events: none;
   }
   .locations-card-content {
       position: relative;
       z-index: 1;
       width: 100%;
       max-width: fit-content;
   }
   .locations-card-title {
       margin: 0 0 0.5rem;
       font-size: clamp(1.5rem, 4vw, 2.25rem);
       font-weight: 700;
       color: #fff;
       letter-spacing: 0.01em;
       line-height: 1.2;
   }
   .locations-card-subtext {
       margin: 0;
       font-size: var(--font-size-base);
       color: rgba(255,255,255,0.9);
       line-height: 1.4;
       max-width: 32em;
   }
   .locations-card-actions {
       margin: 1rem 0 0;
   }
  .locations-nav-prev,
  .locations-nav-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border: none;
      border-radius: 8px;
      background: rgba(255,255,255,0.9);
      color: #333;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      transition: background var(--transition-fast), color var(--transition-fast);
  }
  .locations-nav-prev {
      left: 12px;
  }
  .locations-nav-next {
      right: 12px;
  }
  .locations-nav-prev:hover,
  .locations-nav-next:hover {
      background: #fff;
      color: #000;
  }
  .locations-nav-prev.is-hidden,
  .locations-nav-next.is-hidden {
      visibility: hidden;
      pointer-events: none;
  }
   .locations-dots {
       display: flex;
       justify-content: center;
       gap: 8px;
       margin-top: var(--spacing-lg);
       padding: 0;
   }
   .locations-dot {
       width: 12px;
       height: 12px;
       border-radius: 50%;
       border: none;
       padding: 0;
       background: rgba(0,0,0,0.4);
       cursor: pointer;
       transition: background var(--transition-fast);
   }
   .locations-dot.is-active {
       background: rgba(0,0,0,1);
   }
   .locations-dot:hover {
       background: rgba(0,0,0,0.7);
   }

  /* -------------------------------------------------------------------------
     Locations page: main section grid (4 columns, same card style as carousel)
     ------------------------------------------------------------------------- */
  .locations-page-grid-section {
      padding: var(--spacing-3xl) var(--container-padding) var(--spacing-3xl);
  }
  .locations-page-grid-inner {
      max-width: var(--container-max);
      margin: 0 auto;
  }
  .locations-page-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--spacing-lg);
      list-style: none;
      margin: 0;
      padding: 0;
  }
  @media (min-width: 640px) {
      .locations-page-grid {
          grid-template-columns: repeat(2, 1fr);
      }
  }
  @media (min-width: 1024px) {
      .locations-page-grid {
          grid-template-columns: repeat(4, 1fr);
          gap: var(--spacing-md);
      }
  }
  .locations-page-grid-item {
      margin: 0;
  }
  .locations-page-grid .locations-card {
      min-height: 320px;
  }
  @media (min-width: 1024px) {
      .locations-page-grid .locations-card {
          min-height: 380px;
      }
  }

  /* -------------------------------------------------------------------------
     About page: Text carousel (fleet-like carousel with text cards)
     ------------------------------------------------------------------------- */
  .about-carousel-section {
      padding: var(--spacing-xl) 0 var(--spacing-2xl) var(--spacing-md);
      overflow-x: hidden;
      max-width: 1550px;
      margin-left: auto;
      margin-right: 0;
  }
  .about-carousel-header {
      max-width: var(--container-max);
      margin: 0 0 var(--spacing-md) auto;
  }
  .about-carousel-header-inner {
      max-width: 42em;
  }
  .about-carousel-learn-link {
      font-size: var(--font-size-large);
      color: var(--color-accent);
      text-decoration: underline;
  }
  .about-carousel-learn-link:hover {
      color: var(--color-light-black);
  }
  .about-carousel-inner {
      max-width: 100%;
      margin-left: auto;
      margin-right: 0;
  }
  .about-carousel-slider {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-card);
      touch-action: pan-y;
  }
  .about-carousel-track {
      display: flex;
      transition: transform 0.4s ease;
  }
  .about-carousel-slide {
      flex: 0 0 auto;
      padding: 0 6px;
      box-sizing: border-box;
  }
  .about-carousel-slide:first-child {
      padding-left: 0;
  }
  .about-carousel-card {
      background: var(--color-grey-background);
      border-radius: var(--radius-card);
      padding: var(--spacing-md) var(--spacing-sm);
      min-height: 400px;
      display: flex;
      flex-direction: column;
  }
  .about-carousel-card .section-heading {
      font-size: clamp(1.5rem, 3vw, 2rem);
      margin: 0 0 1rem;

  }
  .about-carousel-card-body {
      flex: 1;
      font-size: var(--font-size-base);
      color: var(--color-text-muted);
      line-height: var(--line-height-base);
      letter-spacing: 0.01em;
  }
  .about-carousel-card-body p {
      margin: 0 0 0.75rem;
      letter-spacing: 0.01em;
      font-size: var(--font-size-xl);
      font-weight: 500;
  }
  .about-carousel-card-body p:last-child {
      margin-bottom: 0;
      letter-spacing: 0.01em;
  }
  .about-carousel-card-learn {
      margin-top: 1rem;
      font-size: var(--font-size-base);
      color: var(--color-accent);
      text-decoration: underline;
      letter-spacing: 0.01em;
      text-decoration: none;
  }
  .about-carousel-card-learn:hover {
      color: var(--color-light-black);
  }
  .about-carousel-nav-prev,
  .about-carousel-nav-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border: none;
      border-radius: 8px;
      background: rgba(0,0,0,0.08);
      color: var(--color-light-black);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      transition: background var(--transition-fast), color var(--transition-fast);
  }
  .about-carousel-nav-prev {
      left: 12px;
  }
  .about-carousel-nav-next {
      right: 12px;
  }
  .about-carousel-nav-prev:hover,
  .about-carousel-nav-next:hover {
      background: rgba(0,0,0,0.12);
  }
  .about-carousel-nav-prev.is-hidden,
  .about-carousel-nav-next.is-hidden {
      visibility: hidden;
      pointer-events: none;
  }
  .about-carousel-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 1.5rem;
      padding: 0;
  }
  .about-carousel-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: none;
      padding: 0;
      background: rgba(0,0,0,0.2);
      cursor: pointer;
      transition: background var(--transition-fast);
  }
  .about-carousel-dot.is-active {
      background: var(--color-light-black);
  }
  .about-carousel-dot:hover {
      background: rgba(0,0,0,0.4);
  }

  /* -------------------------------------------------------------------------
     About page: Sustainability section (centered text + CTA, image below)
     ------------------------------------------------------------------------- */
  .about-sustainability-section {
      display: flex;
      flex-direction: column;
      background: var(--color-white);
  }
  .about-sustainability-content {
      background: var(--color-white);
      padding: var(--spacing-2xl) var(--container-padding) var(--spacing-xl);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
  }
  .about-sustainability-inner {
      max-width: 42em;
      margin: 0 auto;
  }
  .about-sustainability-title {
      margin: 0 0 1rem;
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 700;
      color: var(--color-light-black);
      line-height: var(--line-height-tight);
  }
  .about-sustainability-body {
      margin: 0 0 1.5rem;
      font-size: var(--font-size-large);
      color: var(--color-text-muted);
      line-height: var(--line-height-base);
  }
  .about-sustainability-image {
      min-height: 100vh;
      background-image: var(--about-sustainability-bg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
  }

  /* -------------------------------------------------------------------------
     Benefits section (light background, two-card layout)
     ------------------------------------------------------------------------- */
  .benefits-section {
      background: var(--color-white);
      padding: var(--spacing-4xl) var(--spacing-sm) var(--spacing-2xl);
  }
  .benefits-grid {
      display: grid;
      grid-template-columns: 3fr 2fr;
      gap: var(--spacing-sm);
  }
  .benefits-card {
      position: relative;
      border-radius: var(--radius-card);
      min-height: 500px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: flex;
      align-items: flex-end;
      padding: var(--spacing-md);
      overflow: hidden;
  }
  .benefits-card-primary {
      background-color: #1a2744;
      background-image: linear-gradient(135deg, #1a2744 0%, #2d3a5c 100%);
  }
  .benefits-card-secondary {
      background-color: #2c2c2c;
      background-image: linear-gradient(135deg, #2c2c2c 0%, #3d3d3d 100%);
  }
  .benefits-card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%);
      border-radius: var(--radius-card);
      pointer-events: none;
  }
  .benefits-card-content {
      position: relative;
      z-index: 1;
      width: 100%;
  }
  .benefits-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
  }
  @media (max-width: 767px) {
      .benefits-grid {
          grid-template-columns: 1fr;
      }
      .benefits-card {
          min-height: 320px;
          padding: var(--spacing-sm);
      }
      .fleet-card {
        min-height: 400px;
        padding: var(--spacing-sm);
    }
    .fleet-vehicle-type {
        top: var(--spacing-sm);
        left: var(--spacing-sm);
    }
    .fleet-model-name {
        font-size: clamp(1.25rem, 3vw, 1.5rem);
    }
    .about-carousel-section {
        padding: var(--spacing-xl) var(--spacing-sm);
    }
  }

  /* -------------------------------------------------------------------------
     Why section – headline, intro copy, optional image
     ------------------------------------------------------------------------- */
  .why-section {
       display: flex;
       background: var(--color-white);
       padding: var(--spacing-2xl) var(--spacing-sm);
       font-family: var(--font-body);
       overflow-x: hidden;
       max-width: 100%;
   }
   .why-inner {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       gap: var(--spacing-lg);
       align-items: start;
       width: 100%;
       max-width: 100%;
       min-width: 0;
   }
   .why-heading {
       display: flex;
       flex-direction: column;
       flex: 1 1  min(100%, 420px);
       min-width: 0;
   }
   .why-section-label {
       display: block;
       font-size: var(--font-size-small);
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.08em;
       color: var(--color-text-light);
       margin-bottom: var(--spacing-sm);
   }
   .why-intro {
       margin-bottom: 0;
   }
   .why-intro p {
       font-size: clamp(1rem, 1.25vw, 1.125rem);
       color: rgba(0, 0, 0, 0.8);
       line-height: 1.6;
       margin: 0 0 var(--spacing-sm);
       max-width: 72ch;
   }
   .why-intro p:last-child {
       margin-bottom: 0;
   }
   .why-image {
       display: flex;
       flex-direction: column;
       align-items: start;
       flex: 1 1 min(100%, 640px);
       min-width: 0;
   }
   .why-image img {
       width: 100%;
       max-width: 100%;
       height: auto;
       object-fit: cover;
       border-radius: var(--radius-md, 8px);
       display: block;
   }
   @media (max-width: 900px) {
       .why-inner {
           flex-direction: column;
       }
       .why-heading {
           order: 1;
           flex: 1 1 100%;
           min-width: 0;
           width: 100%;
       }
       .why-image {
        display: none;
       }
   }

   /* -------------------------------------------------------------------------
      FAQ section – light background, dark content (accordion + CTA column)
      ------------------------------------------------------------------------- */
   .faq-section {
       background: var(--color-white);
       padding: var(--spacing-2xl) var(--spacing-sm);
   }
   .faq-inner {
       display: flex;
       flex-wrap: wrap;
       gap: var(--spacing-xl);
       align-items: start;
       max-width: 1400px;
       justify-content: flex-start;
   }
   .faq-list-column {
       flex: 1 1 300px;
       min-width: 0;
   }
   .faq-cta-column {
       flex: 0 0 500px;
       min-width: 300px;
   }
   .faq-list {
       margin: 0;
       padding: 0;
       list-style: none;
   }
   .faq-item {
       border-bottom: 1px solid var(--color-border);
   }
   .faq-item:last-child {
       border-bottom: none;
   }
   .faq-question {
       margin: 0;
   }
   .faq-question-btn {
       display: flex;
       align-items: center;
       justify-content: space-between;
       width: 100%;
       padding: 1rem 0;
       background: none;
       border: none;
       font-family: var(--font-body);
       font-size: var(--font-size-large);
       font-weight: 500;
       color: var(--color-text-light);
       text-align: left;
       cursor: pointer;
       transition: color var(--transition-fast);
   }
   .faq-question-btn:hover {
       color: var(--color-background);
   }
   .faq-question-text {
       flex: 1;
       padding-right: 1rem;
   }
   .faq-icon {
       flex-shrink: 0;
       width: 24px;
       height: 24px;
       position: relative;
       border: 1px solid var(--color-border-light);
       border-radius: var(--radius-card);
       transition: transform var(--transition-base), border-color var(--transition-fast), background var(--transition-fast);
   }
   .faq-question-btn:hover .faq-icon,
   .faq-question-btn[aria-expanded="true"] .faq-icon {
       border-color: var(--color-background);
   }
   .faq-icon::before,
   .faq-icon::after {
       content: '';
       position: absolute;
       left: 50%;
       top: 50%;
       background: var(--color-text-light);
       transition: background var(--transition-fast);
   }
   .faq-question-btn:hover .faq-icon::before,
   .faq-question-btn:hover .faq-icon::after,
   .faq-question-btn[aria-expanded="true"] .faq-icon::before,
   .faq-question-btn[aria-expanded="true"] .faq-icon::after {
       background: var(--color-background);
   }
   .faq-icon::before {
       width: 10px;
       height: 1px;
       margin-left: -5px;
       margin-top: -0.5px;
   }
   .faq-icon::after {
       width: 1px;
       height: 10px;
       margin-left: -0.5px;
       margin-top: -5px;
   }
   .faq-question-btn[aria-expanded="true"] .faq-icon::after {
       display: none;
   }
   .faq-answer {
       margin: 0;
       overflow: hidden;
   }
   .faq-answer-inner {
       padding: 0 0 1rem;
       font-size: var(--font-size-base);
       color: var(--color-text-muted);
       line-height: 1.6;
   }
   .faq-cta-column {
       position: sticky;
       top: calc(var(--header-height, 80px) + var(--spacing-sm));
   }
   .faq-help-text {
       font-size: var(--font-size-base);
       color: var(--color-text-muted);
       line-height: 1.6;
       margin: 0 0 var(--spacing-sm);
   }
   @media (max-width: 900px) {
       .faq-list-column {
           flex: 1 1 100%;
       }
       .faq-cta-column {
           flex: 1 1 100%;
           position: static;
           padding: 0;
       }
   }

   /* -------------------------------------------------------------------------
      Sticky bar (global)
      ------------------------------------------------------------------------- */
   .sticky-bar {
       position: fixed;
       bottom: 0;
       left: 0;
       right: 0;
       z-index: 999;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 1rem;
       padding: var(--spacing-sm) var(--container-padding);
       background: var(--color-light-black);
       backdrop-filter: blur(8px);
       -webkit-backdrop-filter: blur(8px);
       border-top: 1px solid rgba(255,255,255,0.1);
   }
   body.menu-open .sticky-bar {
       visibility: hidden;
       opacity: 0;
       pointer-events: none;
   }
   .sticky-bar-question,
   .sticky-bar-drive {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       padding: var(--spacing-xs) var(--spacing-sm);
       border-radius: var(--radius-card);
       font-size: var(--font-size-base);
       font-weight: 500;
       text-decoration: none;
       transition: opacity var(--transition-fast), background var(--transition-fast);
   }
   .sticky-bar-question {
       background: var(--color-border-light);
       color: var(--color-white);
       border: 1px solid var(--color-border-light);
   }
   .sticky-bar-question:hover {
       opacity: 0.9;
   }
   .sticky-bar-questions-wrap {
       display: inline-block;
       min-width: 280px;
       max-width: 360px;
       vertical-align: middle;
   }
   .sticky-bar-questions-cycle {
       display: block;
       color: #888;
       font-weight: 400;
       transition: opacity 0.22s ease, transform 0.22s ease;
   }
   .sticky-bar-questions-cycle.is-fading {
       opacity: 0;
       transform: translateY(-6px);
   }
   .sticky-bar-questions-cycle.is-entering {
       opacity: 0;
       transform: translateY(8px);
   }
   .sticky-bar-drive {
       background: var(--color-white);
       color: var(--color-text-light);
   }
   .sticky-bar-drive:hover {
       opacity: 0.95;
   }
   .sticky-bar-icon {
       flex-shrink: 0;
   }
   body {
       padding-bottom: var(--spacing-xl);
   }

   /* Sticky bar: mobile – questions = icon only, drive = icon + text, single row */
   @media (max-width: 767px) {
       body {
           padding-bottom: 64px;
       }
       .sticky-bar {
           flex-wrap: nowrap;
           gap: 0.5rem;
           padding: 0.5rem var(--container-padding);
           justify-content: stretch;
       }
       .sticky-bar-question {
           flex: 0 0 auto;
           min-width: 0;
           padding: 0.6rem;
           justify-content: center;
           aspect-ratio: 1;
       }
       .sticky-bar-question .sticky-bar-question-label,
       .sticky-bar-question .sticky-bar-questions-wrap,
       .sticky-bar-question .sticky-bar-arrow-up {
           display: none;
       }
       .sticky-bar-question .sticky-bar-icon {
           margin: 0;
       }
       .sticky-bar-drive {
           flex: 1 1 auto;
           min-width: 0;
           padding: 0.6rem 0.75rem;
           font-size: var(--font-size-small);
           gap: 0.35rem;
           justify-content: center;
       }
   }

   /* -------------------------------------------------------------------------
      Footer (minimal, white, horizontal links)
      ------------------------------------------------------------------------- */
   .site-footer {
       background: var(--color-white);
       color: var(--color-text-muted);
       padding: var(--spacing-lg) var(--container-padding);
       border-top: 1px solid var(--color-border);
   }
   .site-footer .footer-inner {
       max-width: 1200px;
       margin: 0 auto;
   }
   .footer-nav {
       display: flex;
       flex-direction: column;
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
       gap: 1rem 1.5rem;
       margin: 0;
       padding: 0;
       list-style: none;
       font-size: var(--font-size-small);
   }
   .footer-nav .footer-logo img {
       filter: invert(1);
   }
   .footer-nav .footer-copy {
       margin: 0;
       color: var(--color-text-muted);
   }
   .footer-nav a {
       color: var(--color-text-muted);
   }
   .footer-nav a:hover {
       color: var(--color-light-black);
       opacity: 1;
   }

   .footer-credit {
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: var(--color-background);
       gap: var(--spacing-xs);
       font-size: var(--font-size-small);
       color: var(--color-light-black);
       font-family: var(--font-secondary);
       letter-spacing: var(--letter-spacing-tight);
       text-transform: uppercase;
       padding: var(--spacing-xs);
       text-decoration: none;
       transition: opacity var(--transition-fast);
       max-width: fit-content;
       margin: var(--spacing-xl) auto 0;
   }

   .footer-credit:hover {
       opacity: 0.8;
   }

   .footer-credit span {
       line-height: 1;
       color: var(--color-white);
   }

   .footer-credit .pulse {
       width: 0.4em;
       height: 0.4em;
       border-radius: 50%;
       background-color: var(--color-white);
       animation: pulse 1.5s ease-in-out infinite;
   }

   @keyframes pulse {
       0%, 100% {
           opacity: 1;
       }
       50% {
           opacity: 0.4;
       }
   }

   .footer-credit img {
       height: 1.25em;
       width: auto;
       display: block;
       filter: brightness(0) invert(1);
   }

/**
 * Contact popup modal (CF7) – dark bg, blur, white text
 *
 * @package Horse_Taxi
 */
.contact-popup {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-sm);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-base), visibility var(--transition-base);
}

.contact-popup.is-open {
	opacity: 1;
	visibility: visible;
}

.contact-popup-backdrop {
	position: absolute;
	inset: 0;
	background: var(--color-overlay);
	cursor: pointer;
}

.contact-popup-inner {
	position: relative;
	width: 100%;
	max-width: 600px;
	max-height: 90vh;
	overflow: auto;
	background: rgba(4, 5, 5, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: var(--radius-card);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
	border: 1px solid var(--color-border-light);
}

.contact-popup-close {
	position: absolute;
	top: var(--spacing-sm);
	right: var(--spacing-sm);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-white);
	cursor: pointer;
	border-radius: var(--radius-card);
	transition: background var(--transition-fast), color var(--transition-fast);
}

.contact-popup-close:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-white);
}

.contact-popup-content {
	padding: var(--spacing-md) var(--spacing-sm) var(--spacing-lg);
}

.contact-popup-header {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	margin-bottom: var(--spacing-xs);
	padding-bottom: var(--spacing-sm);
	border-bottom: 1px solid var(--color-border-light);
}

.contact-popup-title-icon {
	flex-shrink: 0;
	color: var(--color-white);
}

.contact-popup-title {
	margin: 0;
	font-family: var(--font-secondary);
	font-size: var(--font-size-xl);
	font-weight: 600;
	line-height: var(--line-height-small);
	color: var(--color-white);
}

.contact-popup-intro {
	margin: 0 0 var(--spacing-md);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	font-weight: 500;
	color: var(--color-white);
	opacity: 0.9;
	line-height: var(--line-height-base);
}

.contact-popup-form-wrap {
	margin-bottom: 0;
}

.contact-popup-form-wrap .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.contact-popup-form-wrap .wpcf7-form p {
	margin: 0;
}

.contact-popup-form-wrap .wpcf7-form label {
	display: block;
	font-family: var(--font-secondary);
	font-size: var(--font-size-small);
	font-weight: 500;
	color: var(--color-white);
	opacity: 0.9;
	margin-bottom: 0.25rem;
}

.contact-popup-form-wrap .wpcf7-form input[type="text"],
.contact-popup-form-wrap .wpcf7-form input[type="email"],
.contact-popup-form-wrap .wpcf7-form input[type="tel"],
.contact-popup-form-wrap .wpcf7-form textarea {
	width: 100%;
	padding: var(--spacing-xs) var(--spacing-sm);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	color: var(--color-white);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-card);
	transition: border-color var(--transition-fast), background var(--transition-fast);
	margin-bottom: var(--spacing-xs);
}

.contact-popup-form-wrap .wpcf7-form input::placeholder,
.contact-popup-form-wrap .wpcf7-form textarea::placeholder {
	color: var(--color-light-white);
	margin-bottom: var(--spacing-xs);
}

.contact-popup-form-wrap .wpcf7-form input:focus,
.contact-popup-form-wrap .wpcf7-form textarea:focus {
	outline: none;
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.12);
}

.contact-popup-form-wrap .wpcf7-form textarea {
	min-height: 120px;
	resize: vertical;
}

.contact-popup-form-wrap .wpcf7-form .wpcf7-submit {
	width: 100%;
	margin-top: var(--spacing-xs);
	padding: var(--spacing-xs) var(--spacing-sm);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--color-light-black);
	background: var(--color-white);
	border: none;
	border-radius: var(--radius-card);
	cursor: pointer;
	transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.contact-popup-form-wrap .wpcf7-form .wpcf7-submit:hover {
	opacity: 0.95;
	transform: translateY(-1px);
}

.contact-popup-or {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-sm);
	padding-top: var(--spacing-xs);
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-popup-buttons {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--spacing-sm);
}

.contact-popup-or-label {
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	font-weight: 500;
	color: var(--color-white);
	opacity: 0.9;
}

/* Email: .btn .btn-primary (white bg); Phone: .btn .btn-outline (transparent + border) */
.contact-popup-or .btn-outline {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--color-white);
}

.contact-popup-or .btn-outline:hover {
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.8);
}

body.contact-popup-open {
	overflow: hidden;
}

@media (max-width: 640px) {
	.contact-popup-inner {
		max-height: 85vh;
	}

	.contact-popup-title {
		font-size: var(--font-size-xl);
	}
}