/*=================================
   Brand — Rodriguez Luxury Cars
   Header logo sizing.

   The supplied mark is a crest (crown + laurel wreath), roughly 1.63:1,
   where the previous wordmark was 5.6:1. A crest must therefore be sized
   by HEIGHT, not width — constraining it by the container's width would
   make it far taller than the 100px header strip.
==================================*/

.header-logo img,
.header-logo .logo,
.header-logo .logo2 {
  height: 68px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* The header strip is 100px on desktop; keep the crest centred in it */
.header-logo {
  display: flex;
  align-items: center;
}

@media (max-width: 1199px) {
  .header-logo img,
  .header-logo .logo,
  .header-logo .logo2 { height: 58px; }
}

/* Mobile header strip drops to 60px */
@media (max-width: 767px) {
  .header-logo img,
  .header-logo .logo,
  .header-logo .logo2 { height: 44px; }
}

@media (max-width: 375px) {
  .header-logo img,
  .header-logo .logo,
  .header-logo .logo2 { height: 38px; }
}

/*=================================
   Dark header
   The nav bar was white while the top bar and the logo panel were already
   #0C0F14, so the header read as two separate strips. Everything is now the
   same near-black, which also lets the gold crest and the gold CTA carry the
   colour.
==================================*/

/* --- The bar itself --- */
.header-layout2 .sticky-wrapper,
.header-layout2 .sticky-active,
.header-layout2 .sticky-active.active {
  background-color: var(--title-color);
}

/* The logo panel used to be the only dark block; it now sits flush */
.header-layout2 .header-logo::before {
  background-color: var(--title-color);
  border-radius: 0;
}

/* --- Top level links --- */
.header-layout2 .main-menu > ul > li > a,
.header-layout2 .sticky-active.active ul > li a {
  color: rgba(255, 255, 255, 0.86);
}

.header-layout2 .main-menu > ul > li > a:hover,
.header-layout2 .sticky-active.active ul > li a:hover {
  color: var(--white-color);
}

/* Hover wash was a peach gradient built for a white bar */
.header-layout2 .main-menu > ul > li > a:hover {
  background: linear-gradient(180deg, rgba(192, 160, 98, 0) 0%, rgba(192, 160, 98, 0.22) 100%);
  border-color: var(--theme-color);
}

/* Current page stays gold, which reads correctly on black */
.header-layout2 .main-menu > ul > li.active > a,
.header-layout2 ul > li.active > a,
.header-layout2 .sticky-active.active ul > li.active > a {
  color: var(--theme-color);
}

/* The dropdown caret was drawn in near-black */
.header-layout2 .menu-item-has-children > a::after,
.header-layout2 .main-menu > ul > li > a::before {
  background-color: rgba(255, 255, 255, 0.86);
}

.header-layout2 .menu-item-has-children.active > a::after {
  background-color: var(--theme-color);
}

/* --- Dropdown panels --- */
.header-layout2 .main-menu ul.sub-menu,
.header-layout2 .main-menu ul.mega-menu {
  background-color: #12161C;
  border-bottom-color: var(--theme-color);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}

.header-layout2 .main-menu ul.sub-menu a,
.header-layout2 .main-menu ul.mega-menu a,
.header-layout2 .main-menu ul.mega-menu > li > a {
  color: rgba(255, 255, 255, 0.82);
}

.header-layout2 .main-menu ul.sub-menu li a:hover,
.header-layout2 .main-menu ul.mega-menu li a:hover,
.header-layout2 .main-menu ul.sub-menu li.active > a {
  color: var(--theme-color);
}

/* --- Search button: was a dark disc, invisible on a dark bar --- */
.header-layout2 .header-buttons .vs-icon,
.header-layout2 .sticky-active.active .vs-icon {
  background-color: transparent;
  border: 1px solid rgba(192, 160, 98, 0.55);
  color: var(--theme-color);
}

.header-layout2 .header-buttons .vs-icon i,
.header-layout2 .sticky-active.active .vs-icon i {
  color: var(--theme-color);
}

.header-layout2 .header-buttons .vs-icon:hover,
.header-layout2 .sticky-active.active .vs-icon:hover {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
}

.header-layout2 .header-buttons .vs-icon:hover i,
.header-layout2 .sticky-active.active .vs-icon:hover i {
  color: var(--title-color);
}

/* --- Mobile toggle --- */
.header-layout2 .vs-menu-toggle,
.header-layout2 .sticky-active.active .vs-menu-toggle {
  background-color: var(--theme-color);
  color: var(--title-color);
}

.header-layout2 .vs-menu-toggle:hover {
  background-color: var(--white-color);
  color: var(--title-color);
}

/* Hairline so the bar separates from the hero video behind it */
.header-layout2 .sticky-wrapper {
  border-bottom: 1px solid rgba(192, 160, 98, 0.18);
}

/*=================================
   Preloader — dark, with the crest
   The white preloader flashed bright before a black header and a dark hero.
   It is now the same near-black, which also lets the crest (near-white
   lettering) actually read.
==================================*/

.preloader {
  background-color: var(--title-color);
}

.preloader-inner img {
  width: 200px;
  height: auto;
  margin: 0 auto 22px auto;
}

/* One loader dot was drawn in --title-color, invisible on a dark ground */
.preloader .loader:after {
  box-shadow: 30px 0 0 var(--white-color);
}

.preloader .preloaderCls {
  background-color: transparent;
  border: 1px solid rgba(192, 160, 98, 0.55);
  color: var(--theme-color);
}

.preloader .preloaderCls:hover {
  background-color: var(--theme-color);
  color: var(--title-color);
}

@media (max-width: 575px) {
  .preloader-inner img { width: 150px; margin-bottom: 18px; }
}

/* The escape-hatch button sat loose in the top-left corner. Centre it under
   the loader so the whole screen reads as one composed unit. */
.preloader .preloaderCls {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  padding: 11px 26px;
  font-size: 12px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/*=================================
   Footer — black
   Was a flat navy JPEG (#051F38) sitting on a white .bg-body, with #011528
   panels. Now the same near-black as the header, built in CSS so the
   1920x600 background image is no longer requested on any page.
==================================*/

.footer-layout1,
.footer-layout1.bg-body {
  background-color: var(--title-color) !important;
  background-image: none !important;
}

/* Newsletter panel: one step lighter so it still reads as a distinct card */
.footer-layout1 .newsletter-area1 {
  background-color: #161A21;
  border: 1px solid rgba(192, 160, 98, 0.14);
}

/* Copyright bar: one step darker, with a gold hairline above it */
.footer-layout1 .copyright-wrap,
.copyright-wrap {
  background-color: #050609;
  border-top: 1px solid rgba(192, 160, 98, 0.16);
}

/* The contact blocks in the footer head sat on the navy; give them a subtle
   surface so they do not float on flat black */
.footer-layout1 .footer-info {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 34px;
}

.footer-layout1 .contact-box1 .contact-icon {
  color: var(--theme-color);
}

/* Links and body copy: lift the contrast a touch off pure black */
.footer-layout1 .footer-widget.widget_nav_menu a,
.footer-layout1 .footer-text,
.footer-layout1 p {
  color: rgba(255, 255, 255, 0.66);
}

.footer-layout1 .footer-widget.widget_nav_menu a:hover {
  color: var(--theme-color);
}

.footer-layout1 .widget_title {
  color: var(--white-color);
}

.footer-layout1 .copyright-text,
.footer-layout1 .copyright-wrap a {
  color: rgba(255, 255, 255, 0.6);
}

.footer-layout1 .copyright-wrap a:hover {
  color: var(--theme-color);
}

/*=================================
   Footer CTA band
   The last thing on the page should ask for the booking. Gold hairline,
   ambient glow, oversized headline, and a click-to-call beside the button.
==================================*/

.footer-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 54px 0;
  background:
    radial-gradient(70% 160% at 22% 50%, rgba(192, 160, 98, 0.16) 0%, transparent 68%),
    linear-gradient(180deg, #10141B 0%, #0C0F14 100%);
  border-top: 1px solid rgba(192, 160, 98, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* A slow sweep of light across the band */
.footer-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 45%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(100deg, transparent 0%, rgba(192, 160, 98, 0.09) 50%, transparent 100%);
  animation: footer-sweep 9s ease-in-out infinite;
}

@keyframes footer-sweep {
  0%, 100% { transform: translateX(0); opacity: 0; }
  40%      { opacity: 1; }
  70%      { transform: translateX(240%); opacity: 0; }
}

.footer-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--theme-color);
  margin-bottom: 10px;
}

.footer-cta__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--theme-color);
}

.footer-cta__title {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--white-color);
  margin: 0 0 10px 0;
  text-wrap: balance;
}

.footer-cta__note {
  margin: 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

.footer-cta__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.footer-cta__btn {
  box-shadow: 0 14px 34px rgba(192, 160, 98, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.footer-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(192, 160, 98, 0.42);
}

.footer-cta__call { display: flex; flex-direction: column; text-decoration: none; }

.footer-cta__call-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 2px;
}

.footer-cta__call-num {
  font-family: var(--title-font);
  font-size: 21px;
  font-weight: 700;
  color: var(--white-color);
  transition: color 0.25s ease;
}

.footer-cta__call:hover .footer-cta__call-num { color: var(--theme-color); }

/*------------------- Fleet list (replaced 6 grey placeholders) -------------------*/
.footer-fleet { list-style: none; margin: 0 0 18px 0; padding: 0; min-width: 0; }

.footer-fleet li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  grid-template-areas: "icon name rate" "icon meta rate";
  align-items: center;
  column-gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.footer-fleet li:last-child { border-bottom: 0; }
.footer-fleet i { grid-area: icon; color: var(--theme-color); font-size: 15px; }

.footer-fleet__name {
  grid-area: name;
  font-family: var(--title-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--white-color);
  line-height: 1.25;
}

.footer-fleet__meta {
  grid-area: meta;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.3;
}

.footer-fleet__rate {
  grid-area: rate;
  font-family: var(--title-font);
  font-size: 17px;
  font-weight: 700;
  color: var(--theme-color);
  white-space: nowrap;
}

.footer-fleet__rate small { font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, 0.45); }

.footer-fleet__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--theme-color);
  text-decoration: none;
  transition: gap 0.25s ease;
}

.footer-fleet__link:hover { gap: 13px; color: var(--white-color); }

/*------------------- Responsive -------------------*/
@media (max-width: 991px) {
  .footer-cta { padding: 40px 0; }
  .footer-cta__inner { gap: 26px; }
  .footer-cta__actions { gap: 20px; }
}

@media (max-width: 575px) {
  .footer-cta__actions { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-cta__note { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-cta::after { animation: none; opacity: 0; }
  .footer-cta__btn, .footer-fleet__link { transition: none; }
  .footer-cta__btn:hover { transform: none; }
}

/* The crest is a tall mark; the footer slot has no width constraint of its
   own, so it rendered at full column width. Size it like the header. */
.footer-logo img,
.mobile-logo img,
.vs-widget-about img.logo {
  width: auto;
  max-width: 100%;
  height: 84px;
  object-fit: contain;
}

.footer-logo { margin-bottom: 8px; }

@media (max-width: 767px) {
  .footer-logo img,
  .mobile-logo img,
  .vs-widget-about img.logo { height: 66px; }
}

/*=================================
   Footer polish
   Fixes found at ~1000px: the "Useful Links" heading wrapped and threw its
   underline out of alignment, the email overflowed the container, the
   contact icon stacked above its label, and the copyright line was clipped.
   Type was also oversized for a footer (24px headings with a 42px gap).
==================================*/

/* --- Column headings: smaller, tighter, and they must not wrap --- */
.footer-layout1 .widget_title {
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 22px 0;
  white-space: nowrap;
}

.footer-layout1 .widget_title::before { bottom: -8px; height: 3px; width: 42px; }

/* --- Contact blocks: icon beside the text, never stacked --- */
.footer-layout1 .footer-contact {
  gap: 34px;
  padding-bottom: 34px;
  flex-wrap: wrap;
}

.footer-layout1 .contact-box1 {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.footer-layout1 .contact-box1 .contact-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.footer-layout1 .contact-box1 .contact-content { min-width: 0; }

.footer-layout1 .contact-title {
  font-size: 16px;
  line-height: 1.3;
  margin: 0;
  /* long email addresses must wrap rather than run off the container */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.footer-layout1 .contact-box1 .contact-text,
.footer-layout1 .contact-box1 > span:first-child {
  font-size: 12.5px;
}

/* --- Link lists: a touch smaller, comfortable rhythm --- */
.footer-layout1 .footer-widget.widget_nav_menu a {
  font-size: 14.5px;
  padding: 5px 0;
}

/* --- Newsletter --- */
.footer-layout1 .newsletter-area1 { padding: 28px; }
.footer-layout1 .newsletter-area1 p,
.footer-layout1 .newsletter-text { font-size: 14px; line-height: 1.55; }

/* --- Fleet list: keep the rate column from crowding the edge --- */
.footer-fleet li { column-gap: 9px; padding: 9px 0; }
.footer-fleet__name { font-size: 14px; }
.footer-fleet__meta { font-size: 11.5px; }
.footer-fleet__rate { font-size: 15.5px; }

/* --- CTA band: restrained rather than shouty --- */
.footer-cta { padding: 44px 0; }
.footer-cta__title { font-size: clamp(24px, 2.4vw, 34px); margin-bottom: 8px; }
.footer-cta__note { font-size: 14px; }
.footer-cta__call-num { font-size: 19px; }

/* --- Copyright: smaller, wraps cleanly, never clipped --- */
.footer-layout1 .copyright-wrap { padding: 20px 0; }
.footer-layout1 .copyright-text,
.footer-layout1 .copyright-wrap a { font-size: 13.5px; line-height: 1.6; }
.footer-layout1 .copyright-menu { flex-wrap: wrap; }

/* --- Narrow columns: let headings wrap rather than overflow --- */
@media (max-width: 1199px) {
  .footer-layout1 .widget_title { font-size: 17.5px; }
  .footer-layout1 .footer-contact { gap: 26px; }
}

@media (max-width: 767px) {
  .footer-layout1 .widget_title { white-space: normal; }
  .footer-layout1 .footer-contact { gap: 20px; }
  .footer-cta { padding: 34px 0; }
}

/* The back-to-top button is fixed bottom-right and sits over the copyright
   row once the user reaches the footer. Keep the links clear of it. */
.footer-layout1 .copyright-wrap .copyright-menu,
.footer-layout1 .copyright-wrap [class*="text-lg-end"],
.footer-layout1 .copyright-wrap [class*="text-end"] {
  padding-right: 78px;
}

@media (max-width: 767px) {
  .footer-layout1 .copyright-wrap .copyright-menu,
  .footer-layout1 .copyright-wrap [class*="text-lg-end"],
  .footer-layout1 .copyright-wrap [class*="text-end"] { padding-right: 0; }
  .footer-layout1 .copyright-wrap { padding-bottom: 86px; }
}

/*=================================
   Credentials section
   Replaced a carousel of four invented staff members ("Leslie Alexander",
   "Bessie Cooper"...) shown behind placeholder photos. Publishing fictional
   people is a trust liability; these are commitments the business can
   actually stand behind, and they need no photography.
==================================*/

.credentials-section {
  position: relative;
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(192, 160, 98, 0.07) 0%, transparent 65%),
    var(--smoke-color);
}

.credentials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 8px;
}

.credential {
  position: relative;
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 30px 28px 28px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* A gold rule that draws itself across the top on hover */
.credential::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--theme-color);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}

.credential:hover {
  transform: translateY(-4px);
  border-color: rgba(192, 160, 98, 0.45);
  box-shadow: 0 18px 44px rgba(12, 15, 20, 0.1);
}

.credential:hover::after { transform: scaleX(1); }

.credential__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 13px;
  background: rgba(192, 160, 98, 0.12);
  color: var(--theme-color);
  font-size: 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.credential:hover .credential__icon {
  background: var(--theme-color);
  color: var(--white-color);
}

.credential__title {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 9px 0;
  color: var(--title-color);
}

.credential__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--text-color);
}

@media (max-width: 991px) {
  .credentials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .credential { padding: 26px 24px 24px; }
}

@media (max-width: 575px) {
  .credentials-grid { grid-template-columns: minmax(0, 1fr); }
  .credential__title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .credential, .credential::after, .credential__icon { transition: none; }
  .credential:hover { transform: none; }
  .credential:hover::after { transform: scaleX(1); }
}

/* The CTA band's background is a placeholder; give it a real treatment so the
   headline reads cleanly until photography arrives. Swap the gradient for
   url(...) on .contact-style1 when the shot is ready. */
.contact-style1 {
  background-color: #0C0F14 !important;
  background-image:
    radial-gradient(60% 140% at 22% 50%, rgba(192, 160, 98, 0.20) 0%, transparent 68%),
    linear-gradient(180deg, #12161C 0%, #0A0C11 100%) !important;
  background-size: cover !important;
  background-position: center !important;
}

.contact-style1 .sec-title,
.contact-style1 h2 { color: var(--white-color); }

/*=================================
   Accessibility & interaction polish
==================================*/

/* Skip link: hidden until focused, then the first thing a keyboard user sees.
   Without it, tabbing to the booking form means passing the whole header
   and a 5-item menu on every single page. */
.skip-to-content {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10000;
  display: inline-block;
  padding: 12px 22px;
  border-radius: 0 0 8px 8px;
  background: var(--theme-color);
  color: var(--title-color);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-to-content:focus {
  top: 0;
  outline: 3px solid var(--white-color);
  outline-offset: 2px;
}

/* The theme strips outlines in seven places. Restore a visible, consistent
   focus ring for keyboard users without bringing back mouse-click outlines. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--theme-color);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Main landmark should not show a focus ring when targeted by the skip link */
main:focus { outline: none; }

/* Comfortable tap targets on touch devices (WCAG 2.5.5 asks for 44px) */
@media (pointer: coarse) {
  .main-menu a,
  .footer-widget.widget_nav_menu a,
  .copyright-wrap a,
  .header-links a,
  .social-links a,
  .header-social a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Anything that navigates should say so on hover */
a { cursor: pointer; }

/* Respect reduced motion globally for the theme's scroll animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}

/*=================================
   About page — what we do / service area
==================================*/

.about-detail { background: var(--smoke-color); }

.about-detail__lede {
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--title-color);
  margin-bottom: 16px;
}

.about-detail__body {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-color);
  margin-bottom: 24px;
}

.about-points { list-style: none; margin: 0 0 30px; padding: 0; }

.about-points li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  font-size: 15px;
  color: var(--title-color);
  border-bottom: 1px solid var(--border-color);
}

.about-points li:last-child { border-bottom: 0; }

.about-points i {
  flex: 0 0 auto;
  margin-top: 3px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(192, 160, 98, 0.15);
  color: var(--theme-color);
  font-size: 10px;
}

/* --- Service-area panel: dark card against the light section --- */
.about-areas {
  position: relative;
  overflow: hidden;
  padding: 34px 32px;
  border-radius: 16px;
  background:
    radial-gradient(70% 90% at 80% 0%, rgba(192, 160, 98, 0.16) 0%, transparent 62%),
    linear-gradient(165deg, #12161C 0%, #0A0C11 100%);
  box-shadow: 0 26px 60px rgba(12, 15, 20, 0.22);
}

.about-areas__title {
  font-size: 21px;
  font-weight: 700;
  color: var(--white-color);
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(192, 160, 98, 0.28);
}

.about-areas__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
}

.about-area {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 15px;
  background: #10141A;
  transition: background-color 0.25s ease;
}

.about-area:hover { background: #161B23; }

.about-area__name {
  font-family: var(--title-font);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--white-color);
}

.about-area__note {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.52);
}

.about-areas__foot {
  margin: 18px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

/*=================================
   FAQ page
==================================*/

.faq-intro { max-width: 720px; margin: 0 auto 46px; }

.faq-intro__lede {
  margin: 14px auto 0;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-color);
}

/* --- Closing CTA --- */
.faq-cta { padding: 0 0 100px; }

.faq-cta__panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
  padding: 40px 44px;
  border-radius: 16px;
  background:
    radial-gradient(60% 140% at 18% 50%, rgba(192, 160, 98, 0.18) 0%, transparent 66%),
    linear-gradient(165deg, #12161C 0%, #0A0C11 100%);
  border: 1px solid rgba(192, 160, 98, 0.22);
}

.faq-cta__title {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white-color);
  margin: 0 0 8px;
}

.faq-cta__text {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
}

.faq-cta__actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

.faq-cta__call { display: flex; flex-direction: column; text-decoration: none; }

.faq-cta__call-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.faq-cta__call-num {
  font-family: var(--title-font);
  font-size: 19px;
  font-weight: 700;
  color: var(--white-color);
  transition: color 0.25s ease;
}

.faq-cta__call:hover .faq-cta__call-num { color: var(--theme-color); }

@media (max-width: 991px) {
  .about-areas { margin-top: 34px; padding: 28px 24px; }
  .faq-cta__panel { padding: 32px 26px; }
}

@media (max-width: 575px) {
  .about-areas__grid { grid-template-columns: minmax(0, 1fr); }
  .faq-cta__actions { flex-direction: column; align-items: flex-start; gap: 18px; }
  .faq-cta { padding-bottom: 70px; }
}

/*=================================
   FOOTER — rebuilt
   ---------------------------------
   The previous footer put five columns into a twelve-column row
   (4+3+2+3+3), so "Our Fleet" wrapped to its own line and sat alone
   with a large void beside it. Fixed structurally: the fleet rates are
   a price list, not a nav column, so they get a full-width band and
   the link grid returns to 4+3+3+2.

   Restraint is the point here. One accent (the existing gold), tight
   type, generous rhythm, hairlines instead of boxes. Nothing glows
   except the one band that is already doing it above.
==================================*/

.footer-layout1 .footer-top {
  padding-top: 64px;
  padding-bottom: 8px;
}

/*------------------- Fleet rate band -------------------*/
.fleet-band {
  margin-bottom: 62px;
  padding-bottom: 54px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fleet-band__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 26px;
  margin-bottom: 26px;
}

.fleet-band__title {
  margin: 0;
  font-family: var(--title-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--theme-color);
}

.fleet-band__note {
  margin: 0;
  flex: 1 1 256px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5) !important;
}

.fleet-band__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--title-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease, gap 0.25s ease;
}

.fleet-band__link i { font-size: 12px; color: var(--theme-color); }

.fleet-band__link:hover,
.fleet-band__link:focus-visible { color: var(--theme-color); gap: 14px; }

.fleet-band__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 288px, not 240px: the card puts the rate and the minimum in an auto
     column beside the name, and below ~280px that column gets crushed and
     clips against overflow:hidden. A larger floor drops to two cards
     before it ever gets that tight. */
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 14px;
}

/* Each card: hairline box, gold rail on the left that grows on hover. */
.fleet-card {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  grid-template-areas:
    "icon name rate"
    "icon meta min";
  align-items: center;
  column-gap: 12px;
  row-gap: 3px;
  padding: 20px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.012) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.28s ease, transform 0.28s ease, background 0.28s ease;
}

.fleet-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--theme-color);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.fleet-card:hover {
  border-color: rgba(192, 160, 98, 0.42);
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(192, 160, 98, 0.07) 0%, rgba(255, 255, 255, 0.015) 100%);
}

.fleet-card:hover::before { transform: scaleY(1); }

.fleet-card i {
  grid-area: icon;
  justify-self: center;
  font-size: 20px;
  color: var(--theme-color);
  opacity: 0.9;
}

.fleet-card__name {
  grid-area: name;
  min-width: 0;
  font-family: var(--title-font);
  font-size: 16px;
  font-weight: 600;
  color: var(--white-color);
  line-height: 1.2;
}

.fleet-card__meta {
  grid-area: meta;
  min-width: 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.48);
  line-height: 1.35;
}

.fleet-card__rate {
  grid-area: rate;
  justify-self: end;
  font-family: var(--title-font);
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
  color: var(--theme-color);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fleet-card__rate small {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.42);
  margin-left: 1px;
}

.fleet-card__min {
  grid-area: min;
  justify-self: end;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

/*------------------- Link columns -------------------*/
.footer-main { padding-bottom: 4px; }

.footer-layout1 .footer-main .widget_title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--theme-color);
  margin-bottom: 22px;
}

.footer-layout1 .footer-main .widget_nav_menu .menu li { margin-bottom: 2px; }

.footer-layout1 .footer-main .widget_nav_menu a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
  transition: color 0.22s ease, transform 0.22s ease;
}

.footer-layout1 .footer-main .widget_nav_menu a i {
  font-size: 11px;
  color: rgba(192, 160, 98, 0.55);
  transition: color 0.22s ease;
}

.footer-layout1 .footer-main .widget_nav_menu a:hover,
.footer-layout1 .footer-main .widget_nav_menu a:focus-visible {
  color: var(--white-color);
  transform: translateX(4px);
}

.footer-layout1 .footer-main .widget_nav_menu a:hover i { color: var(--theme-color); }

/*------------------- Newsletter / call panel -------------------*/
.footer-signup {
  padding: 30px 30px 26px;
  background: #14181F;
  border: 1px solid rgba(192, 160, 98, 0.16);
  border-radius: 5px;
}

.footer-signup__title {
  margin: 0 0 10px;
  font-family: var(--title-font);
  font-size: 18px;
  font-weight: 600;
  color: var(--white-color);
  line-height: 1.3;
}

.footer-signup__note {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55) !important;
}

.footer-signup__form { display: flex; flex-wrap: wrap; gap: 10px; }

.footer-signup__input {
  flex: 1 1 176px;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  font-size: 14px;
  color: var(--white-color);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 4px;
  transition: border-color 0.22s ease, background 0.22s ease;
}

.footer-signup__input::placeholder { color: rgba(255, 255, 255, 0.38); }

.footer-signup__input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--theme-color);
}

.footer-signup__btn {
  height: 48px;
  padding: 0 22px;
  font-family: var(--title-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #0C0F14;
  background: var(--theme-color);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.22s ease, transform 0.22s ease;
}

.footer-signup__btn:hover { background: #D4B77A; transform: translateY(-1px); }

.footer-signup__call {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  text-decoration: none;
}

.footer-signup__call i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 14px;
  color: var(--theme-color);
  border: 1px solid rgba(192, 160, 98, 0.3);
  border-radius: 50%;
  transition: background 0.22s ease, color 0.22s ease;
}

.footer-signup__call span {
  display: flex;
  flex-direction: column;
  font-family: var(--title-font);
  font-size: 18px;
  font-weight: 700;
  color: var(--white-color);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  transition: color 0.22s ease;
}

.footer-signup__call small {
  font-family: var(--body-font);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 3px;
}

.footer-signup__call:hover i { background: var(--theme-color); color: #0C0F14; }
.footer-signup__call:hover span { color: var(--theme-color); }

/*------------------- Credential strip -------------------*/
.footer-creds {
  list-style: none;
  margin: 56px 0 0;
  padding: 24px 0 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 38px;
}

.footer-creds li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
}

.footer-creds i { font-size: 13px; color: var(--theme-color); opacity: 0.85; }

/*------------------- Responsive -------------------*/
/* Between 768 and 991 the grid fits exactly two cards, which leaves the
   third orphaned beside a gap. Let it span the row so the shortfall reads
   as a deliberate layout rather than a wrap artefact. */
@media (min-width: 768px) and (max-width: 991px) {
  .fleet-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 1199px) {
  .fleet-card { padding: 18px 18px; column-gap: 10px; }
  .fleet-card__rate { font-size: 21px; }
  .fleet-card__min { font-size: 11px; }
}

/* Very narrow single-column: stack the price under the name rather than
   letting the side column fight the text for room. */
@media (max-width: 400px) {
  .fleet-card {
    grid-template-columns: 30px 1fr;
    grid-template-areas: "icon name" "icon meta" "icon rate" "icon min";
    row-gap: 2px;
  }
  .fleet-card__rate { justify-self: start; margin-top: 8px; }
  .fleet-card__min { justify-self: start; }
}

@media (max-width: 991px) {
  .footer-layout1 .footer-top { padding-top: 52px; }
  .fleet-band { margin-bottom: 46px; padding-bottom: 40px; }
  .footer-signup { margin-bottom: 8px; }
  .footer-creds { margin-top: 42px; gap: 12px 28px; }
}

@media (max-width: 575px) {
  .fleet-band__head { gap: 6px 16px; }
  .fleet-card {
    grid-template-columns: 30px 1fr auto;
    padding: 16px 16px;
  }
  .fleet-card__rate { font-size: 19px; }
  .fleet-card__min { font-size: 11px; }
  .footer-signup { padding: 24px 20px 22px; }
  .footer-signup__form { flex-direction: column; }
  .footer-signup__btn { width: 100%; }
  .footer-creds { flex-direction: column; gap: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .fleet-card,
  .fleet-card::before,
  .footer-layout1 .footer-main .widget_nav_menu a,
  .footer-signup__btn { transition: none; }
  .fleet-card:hover { transform: none; }
  .footer-layout1 .footer-main .widget_nav_menu a:hover { transform: none; }
}

/*------------------- Footer info strip -------------------*/
/* Was a 4/8 Bootstrap split that left the contact blocks floating in
   the middle of the right half with a void beside them. Now a flex row
   that pushes them to the opposite edge. */
.footer-layout1 .footer-info {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 34px 0;
}

.footer-info__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px 40px;
}

.footer-info__logo img {
  height: 66px;
  width: auto;
  display: block;
}

.footer-info__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 44px;
}

.footer-info__item {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
}

.footer-info__item i {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: var(--theme-color);
  border: 1px solid rgba(192, 160, 98, 0.28);
  border-radius: 50%;
  transition: background 0.24s ease, color 0.24s ease, border-color 0.24s ease;
}

.footer-info__item span {
  display: flex;
  flex-direction: column;
  font-family: var(--title-font);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--white-color);
  transition: color 0.24s ease;
}

.footer-info__item small {
  font-family: var(--body-font);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 3px;
}

.footer-info__item:hover i {
  background: var(--theme-color);
  color: #0C0F14;
  border-color: var(--theme-color);
}

.footer-info__item:hover span { color: var(--theme-color); }

/*------------------- Copyright bar -------------------*/
/* Now wraps .container instead of sitting inside it, so the dark band
   and its gold hairline run the full width of the viewport. */
.footer-layout1 .copyright-wrap,
.copyright-wrap {
  background-color: #050609;
  border-top: 1px solid rgba(192, 160, 98, 0.16);
  padding: 22px 0;
  margin: 0;
}

.footer-layout1 .copyright-wrap .row { align-items: center; }

.footer-layout1 .copyright-text { margin: 0; font-size: 13.5px; }

.footer-layout1 .copyright-menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 22px;
  margin: 0;
}

.footer-layout1 .copyright-menu li { padding: 0; margin: 0; }
.footer-layout1 .copyright-menu li::before,
.footer-layout1 .copyright-menu li::after { display: none; }
.footer-layout1 .copyright-menu a { font-size: 13.5px; }

@media (max-width: 991px) {
  .footer-info__row { justify-content: flex-start; }
  .footer-layout1 .copyright-menu ul { justify-content: flex-start; margin-top: 8px; }
}

@media (max-width: 575px) {
  .footer-info__logo img { height: 54px; }
  .footer-info__contacts { gap: 14px 24px; }
  .footer-info__item span { font-size: 15px; }
}

/*------------------- Copyright bar: three-part layout -------------------*/
.copyright-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 32px;
}

.footer-layout1 .copyright-inner .copyright-text {
  margin: 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
}

.copyright-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.copyright-links li { margin: 0; padding: 0; }
.copyright-links li::before, .copyright-links li::after { display: none; }

.copyright-links a {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.22s ease;
}

.copyright-links a:hover,
.copyright-links a:focus-visible { color: var(--theme-color); }

/* Build credit: understated by design. An agency line should be findable,
   not competing with the client's own name two inches to its left. */
.footer-layout1 .copyright-credit {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.34) !important;
}

.footer-layout1 .copyright-credit a {
  color: rgba(255, 255, 255, 0.62);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(192, 160, 98, 0.35);
  padding-bottom: 1px;
  transition: color 0.22s ease, border-color 0.22s ease;
}

.footer-layout1 .copyright-credit a:hover,
.footer-layout1 .copyright-credit a:focus-visible {
  color: var(--theme-color);
  border-bottom-color: var(--theme-color);
}

@media (max-width: 767px) {
  .copyright-inner { justify-content: flex-start; gap: 8px 20px; }
}

/*=================================
   HEADER — refined
   ---------------------------------
   Fixes carried out here, all verified against computed styles:

   1. ACTIVE STATE was a filled slab: a peach gradient
      (rgba(238,172,135,.27)) inherited from the light template plus a
      3px gold top border. Beside the logo it read as a broken box.
      Replaced with a gold rule under the label.

   2. DROPDOWN MARKER was a "+" built from two pseudo-element bars
      (8x2 and 2x8). A plus sign reads as a mobile accordion, not a
      desktop menu. Replaced with a chevron that rotates on open.

   3. PADDING was asymmetric — 19px left, 29px right — to clear that
      marker, so the gaps between items were visibly uneven.

   One accent, hairlines instead of fills, and nothing moves that
   does not need to.
==================================*/

/*------------------- Top bar -------------------*/
.header-layout2 .header-top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 11px 0;
}

.header-layout2 .header-links ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
}

.header-layout2 .header-links ul li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0 22px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  border-right: 1px solid rgba(255, 255, 255, 0.11);
  line-height: 1.4;
}

.header-layout2 .header-links ul li:first-child { padding-left: 0; }
.header-layout2 .header-links ul li:last-child { border-right: 0; padding-right: 0; }

/* the theme drew its own separators as list bullets */
.header-layout2 .header-links ul li::before,
.header-layout2 .header-links ul li::after { display: none !important; }

.header-layout2 .header-links ul li i {
  font-size: 13px;
  color: var(--theme-color);
  opacity: 0.85;
}

.header-layout2 .header-links ul li a {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  transition: color 0.2s ease;
}

.header-layout2 .header-links ul li a:hover { color: var(--theme-color); }

.header-layout2 .social-style1 {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-layout2 .social-title {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

/*------------------- Main bar -------------------*/
.header-layout2 .sticky-active {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Stuck: a gold hairline and a shadow so the bar detaches from content */
.header-layout2 .sticky-active.active {
  border-bottom-color: rgba(192, 160, 98, 0.4);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}

/* The logo panel had a pseudo-element block behind it that squared off
   against the first nav item. */
.header-layout2 .header-logo::before { display: none; }

.header-layout2 .header-logo { padding-right: 26px; }

/*------------------- Top-level links -------------------*/
.header-layout2 .main-menu > ul > li > a {
  position: relative;
  padding: 34px 20px !important;      /* symmetric — was 19/29 */
  font-family: var(--title-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.055em;
  border: 0 !important;               /* kills the 3px slab border */
  background: none !important;        /* kills the peach gradient */
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.24s ease;
}

/* Items with a dropdown need room for the chevron */
.header-layout2 .main-menu > ul > li.menu-item-has-children > a {
  padding-right: 32px !important;
}

.header-layout2 .main-menu > ul > li > a:hover,
.header-layout2 .main-menu > ul > li:hover > a {
  color: var(--white-color);
  background: none !important;
  border-color: transparent !important;
}

.header-layout2 .main-menu > ul > li.active > a { color: var(--theme-color); }

/* The indicator: a gold rule that grows from the centre. Replaces the
   filled block entirely. */
.header-layout2 .main-menu > ul > li > a::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 26px;
  top: auto;
  width: auto;
  height: 2px;
  background-color: var(--theme-color) !important;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 1px;
}

.header-layout2 .main-menu > ul > li:hover > a::before,
.header-layout2 .main-menu > ul > li.active > a::before { transform: scaleX(1); }

.header-layout2 .main-menu > ul > li.menu-item-has-children > a::before { right: 32px; }

/*------------------- Dropdown chevron -------------------*/
/* Was a "+" made of two bars. A chevron reads as a desktop menu. */
@media (min-width: 992px) {
  .header-layout2 .menu-item-has-children > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 6px;
    height: 6px;
    background: none !important;
    border: 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    border-radius: 0;
    opacity: 0.75;
    transform: translateY(-72%) rotate(45deg);
    transition: transform 0.28s ease, opacity 0.24s ease;
  }

  .header-layout2 .main-menu > ul > li.menu-item-has-children:hover > a::after {
    transform: translateY(-20%) rotate(-135deg);
    opacity: 1;
  }
}

/*------------------- Dropdown panels -------------------*/
.header-layout2 .main-menu ul.sub-menu {
  padding: 12px 0;
  border-radius: 4px;
  border-top: 2px solid var(--theme-color);
  border-bottom: 0;
  min-width: 232px;
}

/* The theme set these uppercase with a 30px line-height, so an
   eight-item dropdown ran 57px per row and read as a wall of caps.
   Top level stays uppercase; the dropdown is sentence case, which is
   what makes a long list scannable. */
.header-layout2 .main-menu ul.sub-menu li { padding: 0 !important; margin: 0 !important; }

.header-layout2 .main-menu ul.sub-menu li a {
  padding: 9px 24px !important;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45 !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
  transition: color 0.2s ease, padding-left 0.2s ease, background 0.2s ease;
}

.header-layout2 .main-menu ul.sub-menu li a:hover {
  padding-left: 30px;
  background: rgba(192, 160, 98, 0.07);
}

/*------------------- Buttons -------------------*/
.header-layout2 .header-buttons {
  display: flex;
  align-items: center;
  gap: 18px;
}

.header-layout2 .header-buttons .vs-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background 0.24s ease, border-color 0.24s ease;
}

.header-layout2 .header-buttons .vs-btn {
  padding: 15px 30px;
  font-size: 14px;
  letter-spacing: 0.07em;
}

/*------------------- Laptop fitting -------------------*/
@media (min-width: 1200px) and (max-width: 1499px) {
  .header-layout2 .main-menu > ul > li > a {
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: 14px;
    letter-spacing: 0.03em;
  }
  .header-layout2 .main-menu > ul > li.menu-item-has-children > a { padding-right: 26px !important; }
  .header-layout2 .main-menu > ul > li > a::before { left: 14px; right: 14px; }
  .header-layout2 .main-menu > ul > li.menu-item-has-children > a::before { right: 26px; }
  .header-layout2 .menu-item-has-children > a::after { right: 13px; }
  .header-layout2 .header-buttons { gap: 12px; }
  .header-layout2 .header-buttons .vs-btn { padding: 14px 22px; font-size: 13px; }
  .header-layout2 .header-logo { padding-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .header-layout2 .main-menu > ul > li > a::before,
  .header-layout2 .menu-item-has-children > a::after,
  .header-layout2 .main-menu ul.sub-menu li a { transition: none; }
}

/*------------------- Header trust strip -------------------*/
/* The theme's double-pipe separator was two 2px bars in #4F6478, a
   slate blue from the original palette that appears nowhere else on
   this site. Killed rather than recoloured — the strip reads better
   without them. */
.social-style1 .social-title::before,
.social-style1 .social-title::after { display: none !important; }

.header-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
}

.header-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.header-trust i {
  font-size: 13px;
  color: var(--theme-color);
  opacity: 0.9;
}

@media (max-width: 1199px) {
  .header-trust span:last-child { display: none; }
}