/* =====================================================================
   Kenga Bus — widget stylesheet

   Ported from the static site's styles.css. The original used CSS
   cascade layers; inside WordPress that backfires, because an unlayered
   theme stylesheet outranks every layered rule regardless of specificity.
   The blocks below are therefore flat, emitted in the layer order the
   original declared (reset, base, components, utilities, animations,
   responsive) so equal-specificity precedence is unchanged.
   ===================================================================== */

/* ---------- reset ---------- */
html {
  box-sizing: border-box;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body,
header,
main,
section,
article,
footer,
nav,
form,
dialog,
div,
a,
button,
input,
select,
img,
span,
ul,
li,
h1,
h2,
h3,
h4,
p {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

button,
input,
select,
textarea {
  box-sizing: border-box;
  font: inherit;
}

/* Components below set `display` on classes that also carry [hidden];
     without this the attribute silently loses. */
[hidden] {
  display: none !important;
}

img {
  display: block;
  max-inline-size: 100%;
}

/* ---------- base ---------- */
:root {
  --orange: #F15A24;
  --orange-deep: #D94815;
  --navy: #2A2765;
  --navy-dark: #140F50;
  --black: #000000;
  --ink: #1A1C1C;
  --gray: #4B5563;
  --gray-dark: #374151;
  --light-gray: #F8F9FA;
  --line: #E5E7EB;
  --white: #ffffff;
  --surface: #F8F9FA;
  --shadow: 0 10px 30px rgba(42, 39, 101, 0.08);
  --shadow-hover: 0 16px 36px rgba(42, 39, 101, 0.14);
  --container: 73.75rem;
  --font-display: "Barlow", sans-serif;
  --font-body: "Inter", sans-serif;
  --radius: 0.625rem;
  color-scheme: light;
}

body {
  min-inline-size: 20rem;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: clip;
}

body:has(dialog[open]) {
  overflow: hidden;
}

h1,
h2,
h3,
h4 {
  color: var(--black);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2.15rem, 2.8vw, 3.2rem);
}

/* Kept in the base layer on purpose: as a bare element selector in the
     responsive layer this would outrank every component's own heading
     size (layer order beats specificity) and blow up footer, card and
     price headings on phones. */
@media (max-width: 43.75rem) {
  h2 {
    font-size: clamp(2rem, 9.5vw, 2.7rem);
  }
}

a {
  color: inherit;
  text-decoration: none;
}

:where(a, button, input, select, summary):focus-visible {
  outline: 0.1875rem solid var(--orange);
  outline-offset: 0.1875rem;
}

::selection {
  background: var(--orange);
  color: var(--white);
}

.container {
  inline-size: min(calc(100% - 3rem), var(--container));
  margin-inline: auto;
}

.section {
  padding-block: 5rem;
}

.section-copy {
  color: var(--gray);
  line-height: 1.55;
  max-inline-size: 42rem;
  text-wrap: pretty;
}

.section-copy.light {
  color: #c8c8c8;
}

.eyebrow {
  margin-block-end: 0.9rem;
  color: var(--orange);
  font-weight: 700;
}

/* ---------- components ---------- */
.skip-link {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 200;
  translate: 0 -160%;
  border-radius: 0.35rem;
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
  padding: 0.75rem 1rem;
  transition: translate 180ms ease;
}

.skip-link:focus {
  translate: 0;
}

.site-header {
  position: absolute;
  inset-block-start: 1.875rem;
  inset-inline: 0;
  z-index: 50;
  transition: inset-block-start 220ms ease;
}

.site-header.is-sticky {
  position: fixed;
  inset-block-start: 0;
  padding-block: 0.55rem;
  animation: header-drop 260ms ease both;
}

@keyframes header-drop {
  from {
    translate: 0 -100%;
  }

  to {
    translate: 0;
  }
}

.header-shell {
  display: flex;
  align-items: stretch;
  inline-size: min(calc(100% - 3rem), var(--container));
  min-block-size: 5.2rem;
  margin-inline: auto;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 0.375rem 1.25rem rgb(0 0 0 / 8%);
  overflow: visible;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 13.3rem;
  min-block-size: 3rem;
  padding-inline: 1.45rem;
}

.brand img {
  inline-size: 10.5rem;
  block-size: auto;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  gap: clamp(1rem, 2.1vw, 2.15rem);
  padding-inline: 1rem;
  font-size: 0.97rem;
}

.desktop-nav>a,
.nav-dropdown-trigger {
  min-block-size: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--black);
  cursor: pointer;
  padding: 0.7rem 0;
  white-space: nowrap;
  transition: color 180ms ease;
}

.desktop-nav>a:hover,
.desktop-nav>a.active,
.nav-dropdown-trigger:hover,
.nav-dropdown.is-open>.nav-dropdown-trigger {
  color: var(--orange);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.nav-dropdown-trigger i {
  font-size: 0.68rem;
  transition: rotate 180ms ease;
}

.nav-dropdown:is(:hover, .is-open) .nav-dropdown-trigger i {
  rotate: 180deg;
}

.dropdown-menu {
  position: absolute;
  inset-block-start: calc(100% + 0.85rem);
  inset-inline-start: -1.2rem;
  z-index: 20;
  min-inline-size: 12rem;
  border-block-start: 0.1875rem solid var(--orange);
  border-radius: 0.25rem;
  background: var(--white);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  translate: 0 0.55rem;
  transition: opacity 170ms ease, translate 170ms ease, visibility 170ms ease;
}

.dropdown-menu-right {
  inset-inline-start: auto;
  inset-inline-end: -1.2rem;
}

.nav-dropdown:is(:hover, .is-open) .dropdown-menu {
  opacity: 1;
  visibility: visible;
  translate: 0;
}

.dropdown-menu a {
  display: block;
  padding: 0.78rem 1.2rem;
  transition: background-color 160ms ease, color 160ms ease, padding-inline-start 160ms ease;
}

.dropdown-menu li:not(:last-child) a {
  border-block-end: 0.0625rem solid var(--line);
}

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible {
  background: #fff5f0;
  color: var(--orange);
  padding-inline-start: 1.5rem;
}

.header-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 11.7rem;
  gap: 0.8rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--orange);
  color: var(--light-gray);
  transition: background-color 280ms ease, color 280ms ease;
}

.header-contact:hover {
  background: var(--navy);
}

.header-contact>i {
  font-size: 1rem;
  margin-left: -3rem;
  background-color: var(--orange);
  padding: .7em;
  border-radius: var(--radius);
}

.header-contact span {
  display: grid;
  gap: 0.15rem;
}

.header-contact strong {
  font-size: 0.97rem;
}

.header-contact small {
  font-size: 0.8rem;
  white-space: nowrap;
}

.mobile-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  min-inline-size: 3rem;
  min-block-size: 3rem;
  margin: auto 1rem auto auto;
  border: 0;
  background: transparent;
  color: var(--orange);
  cursor: pointer;
  font-size: 1.6rem;
}

.mobile-drawer {
  inset: 0 auto 0 0;
  inline-size: min(88vw, 21.5rem);
  block-size: 100dvh;
  max-block-size: none;
  margin: 0;
  border: 0;
  background: var(--white);
  color: var(--ink);
  padding: 1.7rem;
  translate: -100% 0;
  transition: translate 280ms ease, display 280ms allow-discrete, overlay 280ms allow-discrete;
}

.mobile-drawer[open] {
  translate: 0;
}

@starting-style {
  .mobile-drawer[open] {
    translate: -100% 0;
  }
}

.mobile-drawer::backdrop {
  background: rgb(0 0 0 / 58%);
  opacity: 0;
  transition: opacity 280ms ease, display 280ms allow-discrete, overlay 280ms allow-discrete;
}

.mobile-drawer[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .mobile-drawer[open]::backdrop {
    opacity: 0;
  }
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 2rem;
}

.drawer-header .brand {
  flex-basis: auto;
  padding: 0;
}

.drawer-header .brand img {
  inline-size: 9.5rem;
}

.drawer-close {
  display: grid;
  place-items: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1.25rem;
}

.mobile-nav {
  display: grid;
  gap: 0.1rem;
}

.mobile-nav>a,
.mobile-nav summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: 3.25rem;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}

.mobile-nav summary::-webkit-details-marker {
  display: none;
}

.mobile-nav>a.active {
  color: var(--orange);
}

.mobile-nav details[open] summary i {
  rotate: 180deg;
}

.mobile-nav summary i {
  font-size: 0.75rem;
  transition: rotate 180ms ease;
}

.mobile-submenu {
  display: grid;
  margin-block: 0.2rem 0.7rem;
  border-radius: 0.4rem;
  background: var(--white);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.mobile-submenu a {
  padding: 0.85rem 1.4rem;
}

.mobile-submenu a:hover {
  background: #fff5f0;
  color: var(--orange);
}

.hero {
  position: relative;
  min-block-size: 53.45rem;
  background: var(--kb-bg-image, none) center / cover no-repeat;
  color: var(--white);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(0 0 0 / 28%) 0%, rgb(0 0 0 / 74%) 100%);
}

.hero-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  min-block-size: 53.45rem;
  padding-block-start: 15.95rem;
}

.hero-copy {
  inline-size: min(100%, 46rem);
}

.hero h1 {
  color: var(--white);
  font-size: clamp(3.3rem, 4.5vw, 4.25rem);
  line-height: 1.02;
}

.hero h1 span,
.accent-underline {
  position: relative;
  z-index: 0;
  white-space: nowrap;
  font-weight: bold;
}

.accent-underline::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0.1em;
  z-index: -1;
  block-size: .7rem;
  background: var(--orange);
}

.hero p {
  margin-block-start: 1.45rem;
  color: #f0f0f0;
  font-size: 1rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-start: 1.8rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-block-size: 3.55rem;
  border-radius: 999px;
  font-weight: 700;
  padding-inline: 2.45rem;
  white-space: nowrap;
  transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease;
}

.button-primary {
  background: var(--orange);
  color: var(--white);
  box-shadow: none;
}

.button-primary:hover {
  background: var(--navy);
  color: var(--white);
  box-shadow: none;
  transform: none;
  translate: none;
}

.video-trigger {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-block-size: 3.7rem;
  border: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  font-weight: 700;
  padding: 0;
}

.play-button {
  display: grid;
  place-items: center;
  inline-size: 3.6rem;
  block-size: 3.6rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--orange);
  transition: scale 180ms ease;
}

.video-trigger:hover .play-button {
  scale: 1.08;
}

/* =================================================================
     Booking widget
     ================================================================= */

.booking-wrap {
  position: relative;
  z-index: 20;
  padding-block: 0 6rem;
  /* Fleet CTAs jump here via #booking; keep the card clear of the
       fixed header on arrival. */
  scroll-margin-block-start: 6.5rem;
}

.kb-booking {
  margin-block-start: -8rem;
  border-radius: 1.5rem;
  background: var(--white);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow:
    0 0.125rem 0.25rem rgba(15, 23, 42, 0.04),
    0 1.5rem 3.5rem rgba(15, 23, 42, 0.12);
  overflow: visible;
}

/* --- Card header: service tabs + trip type on one row --- */
.kb-booking-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline-end: 0.75rem;
  border-block-end: 1px solid var(--line);
  background: linear-gradient(180deg, #F4F6FA 0%, #FBFCFE 100%);
  border-start-start-radius: 1.5rem;
  border-start-end-radius: 1.5rem;
  /* The card itself stays visible so dropdowns can escape it; clipping
       here keeps the scrolling tab strip inside the rounded corners. */
  overflow: hidden;
}

@media (max-width: 62rem) {
  .kb-booking-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-inline-end: 0;
  }
}

.kb-booking-tabs {
  display: flex;
  gap: 0.2rem;
  padding: 0.3rem 0.3rem 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.kb-booking-tabs::-webkit-scrollbar {
  display: none;
}

.kb-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border: 0;
  border-start-start-radius: 0.7rem;
  border-start-end-radius: 0.7rem;
  background: transparent;
  color: var(--gray);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease;
}

.kb-tab i {
  font-size: 0.95rem;
  opacity: 0.75;
}

.kb-tab:hover {
  color: var(--navy-dark);
  background: rgba(255, 255, 255, 0.7);
}

.kb-tab.is-active {
  background: var(--white);
  color: var(--navy-dark);
  box-shadow: 0 -0.125rem 0.75rem rgba(15, 23, 42, 0.06);
}

.kb-tab.is-active i {
  color: var(--orange);
  opacity: 1;
}

/* --- Form body --- */
.kb-booking-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.15rem 1.5rem 1.1rem;
}

@media (max-width: 36rem) {
  .kb-booking-body {
    padding: 1rem 1rem 0.9rem;
    gap: 0.8rem;
  }
}

/* --- Trip type toggle --- */
.kb-triptype {
  display: inline-flex;
  flex-shrink: 0;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: #E7EBF2;
}

@media (max-width: 62rem) {
  .kb-triptype {
    align-self: flex-start;
    margin: 0.65rem 0.9rem 0.75rem;
  }
}

.kb-triptype-option {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--gray);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.kb-triptype-option i {
  font-size: 0.75rem;
}

.kb-triptype-option:hover {
  color: var(--navy-dark);
}

.kb-triptype-option.is-active {
  background: var(--white);
  color: var(--navy-dark);
  box-shadow: 0 0.0625rem 0.25rem rgba(15, 23, 42, 0.12);
}

.kb-triptype-option.is-active i {
  color: var(--orange);
}

/* --- Field primitives --- */
.kb-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-inline-size: 0;
}

.kb-field>label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray);
}

.kb-required {
  color: var(--orange);
}

.kb-optional {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gray);
}

.kb-control {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  inline-size: 100%;
  min-block-size: 2.875rem;
  padding-inline: 0.8rem;
  border: 1.5px solid var(--line);
  border-radius: 0.75rem;
  background: #FAFBFD;
  text-align: start;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.kb-control:hover {
  border-color: #CBD5E1;
}

.kb-control:focus-within,
.kb-control-button:focus-visible {
  border-color: var(--orange);
  background: var(--white);
  box-shadow: 0 0 0 0.25rem rgba(241, 90, 36, 0.14);
  outline: none;
}

.kb-control-icon {
  flex-shrink: 0;
  font-size: 1rem;
  color: #94A3B8;
  transition: color 180ms ease;
}

.kb-control:focus-within .kb-control-icon,
.kb-field.is-resolved .kb-control-icon,
.kb-control-button.is-filled .kb-control-icon {
  color: var(--orange);
}

.kb-control input,
.kb-control textarea {
  inline-size: 100%;
  min-inline-size: 0;
  padding-block: 0.6rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  outline: none;
}

.kb-control input::placeholder,
.kb-control textarea::placeholder {
  color: #9AA5B4;
  font-weight: 500;
}

.kb-control-textarea {
  align-items: flex-start;
  padding-block: 0.25rem;
}

.kb-control textarea {
  font-weight: 500;
  line-height: 1.5;
  resize: vertical;
}

.kb-control-button {
  cursor: pointer;
  color: var(--gray);
  font-size: 0.9375rem;
  font-weight: 600;
}

.kb-control-button [data-kb-datetext] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-control-button.is-filled {
  color: var(--ink);
}

.kb-control-caret {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: #94A3B8;
  transition: rotate 200ms ease;
}

.kb-control-button[aria-expanded="true"] .kb-control-caret {
  rotate: 180deg;
}

.kb-field.has-error .kb-control {
  border-color: #DC2626;
  background: #FEF2F2;
}

.kb-field.has-error .kb-control-icon {
  color: #DC2626;
}

/* --- Route row --- */
.kb-route {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 0.7rem;
}

.kb-swap {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin-block-end: 0.2rem;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, rotate 320ms ease;
}

.kb-swap:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}

.kb-swap.is-swapping {
  rotate: 180deg;
}

@media (max-width: 48rem) {
  .kb-route {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* Stacked fields swap along the vertical axis, so the arrows turn too.
       The pull is upward only — a negative bottom margin would drag the
       button onto the destination field's label. */
  .kb-swap {
    justify-self: end;
    margin-block: -0.9rem 0;
    rotate: 90deg;
  }

  .kb-swap.is-swapping {
    rotate: 270deg;
  }
}

/* Flex, not grid: the return-date field collapses when the trip is
     one-way and the remaining fields share the freed space. */
.kb-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.kb-details>.kb-field {
  flex: 1 1 13rem;
}

@media (max-width: 48rem) {
  .kb-details>.kb-field {
    flex-basis: 100%;
  }
}

/* --- Passenger stepper --- */
.kb-stepper {
  gap: 0.3rem;
  padding-inline: 0.3rem;
}

.kb-stepper input {
  padding-inline: 0.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.kb-stepper input::-webkit-outer-spin-button,
.kb-stepper input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.kb-stepper-btn {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 2rem;
  block-size: 2rem;
  border: 0;
  border-radius: 0.5rem;
  background: #EDF1F7;
  color: var(--navy-dark);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.kb-stepper-btn:hover {
  background: var(--orange);
  color: var(--white);
}

/* --- Footer: estimate + submit --- */
.kb-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  gap: 0.7rem;
  padding-block-start: 0.85rem;
  border-block-start: 1px solid var(--line);
}

@media (max-width: 48rem) {
  .kb-footer {
    grid-template-columns: 1fr;
  }
}

.kb-estimate {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 1rem;
  border-radius: 0.75rem;
  background: #F5F7FA;
  color: var(--gray);
  font-size: 0.85rem;
}

.kb-estimate>i {
  color: #94A3B8;
}

.kb-estimate p {
  margin: 0;
}

.kb-estimate.is-live {
  justify-content: space-between;
  background: linear-gradient(120deg, rgba(241, 90, 36, 0.08) 0%, rgba(42, 39, 101, 0.06) 100%);
  border: 1px solid rgba(241, 90, 36, 0.22);
}

.kb-estimate-route {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.kb-estimate-km {
  font-family: var(--font-display);
  font-size: 0.975rem;
  font-weight: 700;
  color: var(--navy-dark);
}

.kb-estimate-meta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray);
}

.kb-estimate-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}

.kb-estimate-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
}

.kb-estimate-price strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--orange-deep);
}

.kb-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-block-size: 3rem;
  padding-inline: 1.75rem;
  border: 0;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
  color: var(--white);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 180ms ease, translate 180ms ease, box-shadow 180ms ease;
}

.kb-submit:hover {
  filter: brightness(1.06);
  translate: 0 -0.125rem;
  box-shadow: 0 0.75rem 1.5rem rgba(217, 72, 21, 0.28);
}

.kb-submit:active {
  translate: 0;
}

.kb-submit-wide {
  inline-size: 100%;
}

.kb-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: -0.15rem 0 0;
  font-size: 0.725rem;
  line-height: 1.45;
  color: #94A3B8;
}

.kb-disclaimer i {
  margin-block-start: 0.15rem;
}

/* Touch devices latch :hover after a tap, leaving controls stuck in
     their hover paint. Reset the filled states there and give taps a
     press state instead. */
@media (hover: none) {
  .kb-swap:hover {
    background: var(--white);
    border-color: var(--line);
    color: var(--navy);
  }

  .kb-stepper-btn:hover {
    background: #EDF1F7;
    color: var(--navy-dark);
  }

  .kb-tab:hover:not(.is-active) {
    background: transparent;
    color: var(--gray);
  }

  .kb-triptype-option:hover:not(.is-active) {
    color: var(--gray);
  }

  .kb-control:hover {
    border-color: var(--line);
  }

  .kb-submit:hover {
    filter: none;
    translate: 0;
    box-shadow: none;
  }

  .kb-datepicker-nav:hover:not(:disabled),
  .kb-datepicker-quick:hover {
    background: #F1F4F9;
    color: var(--navy-dark);
  }

  .kb-day:hover:not(:disabled):not(.is-selected) {
    background: transparent;
  }

  .kb-swap:active,
  .kb-stepper-btn:active {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--white);
  }

  .kb-submit:active {
    filter: brightness(0.94);
  }
}

/* =================================================================
     Location autocomplete
     ================================================================= */

.kb-ac-list {
  position: absolute;
  inset-block-start: calc(100% + 0.4rem);
  inset-inline: 0;
  z-index: 60;
  max-block-size: 19rem;
  margin: 0;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 0.875rem;
  background: var(--white);
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.16);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.kb-ac-option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.625rem;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.kb-ac-option i {
  font-size: 0.8rem;
  color: #94A3B8;
}

.kb-ac-option:hover,
.kb-ac-option.is-active {
  background: rgba(241, 90, 36, 0.08);
}

.kb-ac-option:hover i,
.kb-ac-option.is-active i {
  color: var(--orange);
}

.kb-ac-option-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.kb-ac-option-text strong {
  font-size: 0.925rem;
  font-weight: 600;
  color: var(--ink);
}

.kb-ac-option-text small {
  font-size: 0.75rem;
  color: var(--gray);
}

.kb-ac-empty {
  padding: 0.85rem 0.7rem;
  font-size: 0.825rem;
  line-height: 1.45;
  color: var(--gray);
}

/* =================================================================
     Date picker
     ================================================================= */

.kb-datepicker {
  position: absolute;
  inset-block-start: calc(100% + 0.4rem);
  inset-inline-start: 0;
  z-index: 60;
  inline-size: 20rem;
  max-inline-size: calc(100vw - 2rem);
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--white);
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.18);
}

.kb-datepicker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-end: 0.65rem;
}

.kb-datepicker-head strong {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy-dark);
}

.kb-datepicker-nav {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 0;
  border-radius: 0.5rem;
  background: #F1F4F9;
  color: var(--navy-dark);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.kb-datepicker-nav:hover:not(:disabled) {
  background: var(--orange);
  color: var(--white);
}

.kb-datepicker-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.kb-datepicker-weekdays,
.kb-datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.15rem;
}

.kb-datepicker-weekdays span {
  padding-block: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
  color: #94A3B8;
}

.kb-day {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.kb-day.is-blank {
  cursor: default;
}

.kb-day.is-weekend {
  color: var(--orange-deep);
}

.kb-day:hover:not(:disabled):not(.is-selected) {
  background: rgba(241, 90, 36, 0.1);
}

.kb-day:disabled {
  color: #CBD5E1;
  cursor: not-allowed;
}

.kb-day.is-today:not(.is-selected) {
  box-shadow: inset 0 0 0 1.5px var(--line);
}

.kb-day.is-selected {
  background: var(--orange);
  color: var(--white);
}

.kb-day:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}

.kb-datepicker-foot {
  display: flex;
  gap: 0.35rem;
  margin-block-start: 0.75rem;
  padding-block-start: 0.7rem;
  border-block-start: 1px solid var(--line);
}

.kb-datepicker-quick {
  flex: 1;
  padding-block: 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: #F1F4F9;
  color: var(--navy-dark);
  font-size: 0.775rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.kb-datepicker-quick:hover {
  background: var(--navy);
  color: var(--white);
}

/* =================================================================
     Booking summary page
     ================================================================= */

.kb-summary-header {
  padding-block: 8.5rem 0;
  background: linear-gradient(180deg, #F6F8FB 0%, var(--white) 100%);
  border-block-end: 1px solid var(--line);
}


.kb-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  margin: 1.1rem 0 0;
  padding: 0 0 1.25rem;
}

.kb-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #94A3B8;
}

.kb-step-dot {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  font-size: 0.775rem;
}

.kb-step.is-done {
  color: var(--gray);
}

.kb-step.is-done .kb-step-dot {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--white);
}

.kb-step.is-current {
  color: var(--navy-dark);
}

.kb-step.is-current .kb-step-dot {
  border-color: var(--navy);
  color: var(--navy-dark);
}

.kb-summary-section {
  padding-block: 2.75rem 4.5rem;
}

.kb-summary-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
  gap: 2.5rem;
}

@media (max-width: 62rem) {
  .kb-summary-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.kb-summary-intro h1 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
}

.kb-summary-intro p {
  max-inline-size: 40rem;
  margin-block-start: 0.7rem;
  color: var(--gray);
}

.kb-summary-form {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-block-start: 2rem;
}

.kb-fieldset {
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1.125rem;
  background: var(--white);
}

.kb-fieldset legend {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-inline: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy-dark);
}

.kb-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin-block-start: 0.5rem;
}

@media (max-width: 36rem) {
  .kb-form-grid {
    grid-template-columns: 1fr;
  }

  .kb-fieldset {
    padding: 1.15rem;
  }
}

.kb-field-wide {
  grid-column: 1 / -1;
}

.kb-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gray);
}

.kb-consent input {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin-block-start: 0.1rem;
  accent-color: var(--orange);
  flex-shrink: 0;
}

.kb-success {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-block-start: 1.75rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(22, 163, 74, 0.35);
  border-radius: 0.875rem;
  background: rgba(22, 163, 74, 0.07);
}

.kb-success>i {
  margin-block-start: 0.15rem;
  font-size: 1.25rem;
  color: #16A34A;
}

.kb-success p {
  margin-block-start: 0.2rem;
  font-size: 0.875rem;
  color: var(--gray);
}

.kb-success a {
  color: var(--orange-deep);
  font-weight: 600;
  text-decoration: underline;
}

/* --- Recap card --- */
.kb-summary-aside {
  position: sticky;
  inset-block-start: 6.5rem;
}

@media (max-width: 62rem) {
  .kb-summary-aside {
    position: static;
  }
}

.kb-recap {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--white);
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.08);
}

.kb-recap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-end: 1.25rem;
}

.kb-recap-badge {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(42, 39, 101, 0.08);
  color: var(--navy-dark);
  font-size: 0.775rem;
  font-weight: 700;
}

.kb-recap-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--orange-deep);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.kb-recap-edit:hover {
  text-decoration: underline;
}

.kb-recap-route {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--line);
}

.kb-recap-stop {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.kb-recap-stop small {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
}

.kb-recap-stop strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy-dark);
}

.kb-recap-marker {
  position: relative;
  flex-shrink: 0;
  inline-size: 0.85rem;
  block-size: 0.85rem;
  margin-block-start: 0.35rem;
  border-radius: 50%;
}

.kb-recap-marker-start {
  border: 0.1875rem solid var(--navy);
}

.kb-recap-marker-start::after {
  content: "";
  position: absolute;
  inset-block-start: 1.1rem;
  inset-inline-start: 50%;
  inline-size: 0.125rem;
  block-size: 1.9rem;
  translate: -50% 0;
  background: repeating-linear-gradient(180deg, var(--line) 0 0.25rem, transparent 0.25rem 0.5rem);
}

.kb-recap-marker-end {
  background: var(--orange);
}

.kb-recap-list {
  margin: 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.kb-recap-list>div,
.kb-price-rows>div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.kb-recap-list dt,
.kb-price-rows dt {
  font-size: 0.825rem;
  color: var(--gray);
}

.kb-recap-list dd,
.kb-price-rows dd {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: end;
  color: var(--ink);
}

.kb-price-rows dt small {
  display: block;
  font-size: 0.7rem;
  color: #94A3B8;
}

.kb-price {
  margin-block-start: 1.35rem;
  padding: 1.25rem;
  border-radius: 1rem;
  background: linear-gradient(150deg, rgba(241, 90, 36, 0.07) 0%, rgba(42, 39, 101, 0.05) 100%);
  border: 1px solid rgba(241, 90, 36, 0.2);
}

.kb-price h2 {
  font-size: 1.05rem;
  color: var(--navy-dark);
}

.kb-price-rows {
  margin: 0.9rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.kb-price-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 1rem;
  padding-block-start: 0.9rem;
  border-block-start: 1px dashed rgba(42, 39, 101, 0.25);
}

.kb-price-total span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy-dark);
}

.kb-price-total strong {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--orange-deep);
}

.kb-price-sub {
  margin-block-start: 0.3rem;
  font-size: 0.775rem;
  font-weight: 600;
  text-align: end;
  color: var(--gray);
}

.kb-price-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-block-start: 0.9rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--gray);
}

.kb-price-note i {
  margin-block-start: 0.15rem;
  color: #94A3B8;
}

.kb-price-empty p {
  margin-block-start: 0.5rem;
  font-size: 0.875rem;
  color: var(--gray);
}

.kb-trust {
  margin-block-start: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.kb-trust li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--gray);
}

.kb-trust i {
  inline-size: 1rem;
  color: var(--orange);
}

/* --- Step 1 on booking.html: the widget as a standalone page block --- */
.kb-request-section {
  padding-block: 2.75rem 4.5rem;
}

.kb-request-intro {
  max-inline-size: 44rem;
  margin-block-end: 1.75rem;
}

.kb-request-intro h1 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
}

.kb-request-intro p {
  margin-block-start: 0.7rem;
  color: var(--gray);
}

/* The homepage card tucks under the hero; here it sits on the page. */
.kb-booking-standalone {
  margin-block-start: 0;
}

.kb-trust-row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.7rem 2rem;
  margin-block-start: 1.5rem;
}

.about-section {
  padding-block: 6rem 4.4rem;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  align-items: center;
  gap: 5.3rem;
}

.contact-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.3fr;
  align-items: start;
  gap: 3rem;
}

.about-copy h2 {
  margin-block-end: 1.5rem;
}

.about-copy .button {
  margin-top: 2rem;
}

.checklists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
  margin-block: 1.35rem 2.1rem;
}

.checklists ul {
  display: grid;
  gap: 0.85rem;
}

.checklists li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--gray);
}

.checklists i {
  color: var(--orange);
}

.about-visual {
  position: relative;
  min-block-size: 40rem;
}

.about-main-image {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 76%;
  block-size: 36.6rem;
  border-radius: var(--radius);
  object-fit: cover;
}

.about-small-image {
  position: absolute;
  inset-block-start: 5rem;
  inset-inline-end: 0;
  inline-size: 41.5%;
  block-size: 18.6rem;
  border: 0.8rem solid var(--white);
  border-radius: var(--radius);
  object-fit: cover;
}

.experience-badge {
  position: absolute;
  inset-inline-start: 7.5%;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border-radius: var(--radius);
  background: var(--orange);
  color: var(--white);
  padding: 1.35rem 1.6rem;
  box-shadow: var(--shadow);
}

.experience-badge strong {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
}

.experience-badge sup {
  font-size: 1rem;
}

.experience-badge span {
  line-height: 1.2;
}

.why-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-block-size: 48.5rem;
}

.why-image-panel {
  position: relative;
  min-block-size: 48.5rem;
  background: var(--kb-bg-image, none) center / cover no-repeat;
}

.why-promo {
  position: absolute;
  inset-inline-start: max(1rem, calc((100vw - var(--container)) / 5));
  inset-block-end: -4rem;
  inline-size: min(30rem, calc(100% - 2rem));
  border-radius: var(--radius);
  background: var(--orange);
  color: var(--white);
  padding: 2rem;
}

.why-promo h3 {
  color: var(--white);
  font-size: 1.7rem;
}

.why-promo p {
  margin-block: 1.35rem;
  line-height: 1.5;
}

.why-promo a {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
}

.trust-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-block-end: 1.35rem;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.why-content {
  display: flex;
  align-items: center;
  min-block-size: 48.5rem;
  background: var(--black);
  color: var(--white);
}

.why-content-inner {
  inline-size: min(100%, 50rem);
  padding: 3rem clamp(2rem, 4vw, 4rem);
}

.why-content h2 {
  margin-block-end: 1.45rem;
  color: var(--white);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.3rem 2rem;
  margin-block-start: 2.6rem;
}

.stat {
  display: grid;
  grid-template-columns: 3.7rem 1fr;
  align-items: center;
  gap: 0.8rem;
}

.stat>i {
  color: var(--orange);
  font-size: 2.65rem;
}

.stat strong {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
}

.stat sup {
  margin-inline-start: 0.25rem;
  color: var(--orange);
  font-size: 0.9rem;
}

.stat span {
  display: block;
  margin-block-start: 0.4rem;
  color: #d3d3d3;
}

.section-heading.centered {
  max-inline-size: 49rem;
  margin-inline: auto;
  text-align: center;
}

.section-heading>p:last-child {
  max-inline-size: 37rem;
  margin: 1.1rem auto 0;
  color: var(--gray);
}

.section-heading.light h2,
.section-heading.light>p:last-child {
  color: var(--white);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem 1.85rem;
  margin-block-start: 6rem;
}

.service-card {
  min-block-size: 20.25rem;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  padding: 3.15rem 2.5rem 2.25rem;
  transition: translate 220ms ease, box-shadow 220ms ease, background-color 220ms ease, color 220ms ease;
}

.service-card.featured {
  background: var(--orange);
  color: var(--white);
  translate: 0 -3rem;
}

.service-card.raised {
  translate: 0 -3.4rem;
}

.service-card:hover {
  box-shadow: var(--shadow-hover);
  translate: 0 -0.4rem;
}

.service-card.featured:hover {
  translate: 0 -3.4rem;
}

.service-card.raised:hover {
  translate: 0 -3.8rem;
}

.service-icon {
  margin-block-end: 1.5rem;
  color: var(--orange);
  font-size: 2.8rem;
}

.service-card h3 {
  margin-block-end: 1rem;
  font-size: 1.7rem;
}

.service-card p {
  color: var(--gray);
  line-height: 1.55;
  text-wrap: pretty;
}

.service-card a {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-block-start: 1.3rem;
  color: var(--orange);
  font-weight: 700;
}

.service-card.featured :where(.service-icon, h3, p, a) {
  color: var(--white);
}

.fleet-heading {
  display: grid;
  grid-template-columns: 3fr 1fr auto;
  align-items: center;
  gap: 3.2rem;
  margin-block-end: 3.5rem;
}

.fleet-heading>div>p {
  color: var(--gray);
  margin-top: 1.1rem;
}

.fleet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.9rem;
}

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}

.photo-gallery-item {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.photo-gallery-item>img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1.33;
  object-fit: cover;
  transition: scale 320ms ease;
}

.photo-gallery-item:hover>img {
  scale: 1.05;
}

.bus-card {
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: translate 220ms ease, box-shadow 220ms ease;
}

.bus-card:hover {
  box-shadow: var(--shadow-hover);
  translate: 0 -0.35rem;
}

.bus-card>img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1.48;
  object-fit: cover;
}

.bus-card-body {
  min-block-size: 28.9rem;
  padding: 1.75rem 2.45rem 2rem;
}

.bus-card h3 {
  font-size: 1.8rem;
}

.price {
  margin-block: 0.75rem 1.25rem;
  color: var(--gray);
}

.price strong {
  color: var(--orange);
  font-family: var(--font-display);
  font-size: 1.65rem;
}

.price span {
  margin-inline-start: 0.2rem;
}

.bus-card ul {
  display: grid;
  gap: 0.75rem;
  margin-block: 1.2rem 1.7rem;
  border-block-start: 0.0625rem solid var(--line);
  padding-block-start: 1.25rem;
}

.bus-card li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.75rem;
  align-items: center;
  color: var(--gray);
}

.bus-card li i {
  color: var(--orange);
}

.bus-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
}

.bus-actions .button {
  min-block-size: 3.25rem;
  padding-inline: 1.5rem;
}

.details-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--black);
  font-weight: 600;
  white-space: nowrap;
}

.details-link:hover {
  color: var(--orange);
}

.badge-highlight {
  background: var(--orange);
  color: var(--white);
  padding: 0.15rem 0.65rem;
  border-radius: 0.25rem;
  display: inline-block;
}

.carousel-btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 200ms ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.carousel-btn:hover {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
  transform: scale(1.05);
}

.carousel-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.carousel-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  border: none;
  background: #cbd5e1;
  cursor: pointer;
  transition: all 250ms ease;
  padding: 0;
}

.carousel-dot.is-active {
  background: var(--orange);
  width: 1.5rem;
  border-radius: 1rem;
}

.blog-section {
  padding-block: 5rem 10.3rem;
}

.blog-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-block-end: 3rem;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.85rem;
}

.blog-image {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}

.blog-image img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1.48;
  object-fit: cover;
  transition: scale 420ms ease;
}

.blog-card:hover .blog-image img {
  scale: 1.045;
}

.blog-tag {
  position: absolute;
  inset-inline-start: 1.25rem;
  inset-block-end: 1.25rem;
  border-radius: 0.25rem;
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
  padding: 0.65rem 1rem;
}

.blog-card h3 {
  margin-block: 1.2rem 0.85rem;
  font-size: 1.45rem;
}

.blog-card h3 a:hover {
  color: var(--orange);
}

.blog-card>p {
  color: var(--gray);
  line-height: 1.55;
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-block-start: 1.15rem;
  color: var(--orange);
  font-weight: 700;
}

.read-more i {
  transition: translate 160ms ease;
}

.read-more:hover i {
  translate: 0.25rem;
}

.site-footer {
  background: var(--black);
  color: #d4d4d4;
  padding-block: 6rem 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.75fr 1.05fr 1.35fr;
  gap: 3.6rem;
}

.footer-grid h2 {
  margin-block-end: 1.5rem;
  color: var(--white);
  font-size: 1.65rem;
}

.footer-grid p {
  line-height: 1.55;
}

.footer-brand>img {
  inline-size: 15.7rem;
  block-size: auto;
  margin-block-end: 1.3rem;
}

.social-links {
  display: flex;
  gap: 1.15rem;
  margin-block-start: 1.4rem;
}

.social-links a {
  display: grid;
  place-items: center;
  inline-size: 2.45rem;
  block-size: 2.45rem;
  border-radius: 0.25rem;
  background: var(--orange);
  color: var(--white);
  transition: background-color 180ms ease, translate 180ms ease;
}

.social-links a:hover {
  background: var(--orange-deep);
  translate: 0 -0.2rem;
}

.footer-links {
  display: grid;
  gap: 0.8rem;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  transition: color 160ms ease, translate 160ms ease;
}

.footer-links i,
.contact-list i {
  color: var(--orange);
}

.footer-links a:hover {
  color: var(--orange);
  translate: 0.2rem;
}

.contact-list {
  display: grid;
  font-style: normal;
}

.contact-list a,
.contact-list p {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.85rem;
  align-items: center;
  padding-block: 0.85rem;
  border-block-end: 0.0625rem solid #2d2d2d;
}

.contact-list p {
  margin: 0;
}

.contact-list a:hover span {
  color: var(--white);
}

.newsletter-form {
  display: grid;
  grid-template-columns: 1fr 4.2rem;
  margin-block-start: 1.5rem;
  border-radius: 0.25rem;
  overflow: hidden;
}

.newsletter-form input {
  min-inline-size: 0;
  min-block-size: 3.4rem;
  border: 0;
  background: var(--white);
  color: var(--black);
  font-size: 1rem;
  padding-inline: 1rem;
}

.newsletter-form input:user-invalid {
  outline: 0.15rem solid #ff7269;
  outline-offset: -0.15rem;
}

.newsletter-form button {
  border: 0;
  background: var(--orange);
  color: var(--white);
  cursor: pointer;
}

.newsletter-form button:hover {
  background: var(--orange-deep);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-block-start: 2.8rem;
  border-block-start: 0.0625rem solid #2d2d2d;
  padding-block: 1.6rem;
  font-size: 0.9rem;
}

.video-dialog {
  inline-size: min(calc(100% - 2rem), 56rem);
  border: 0;
  border-radius: var(--radius);
  background: var(--black);
  color: var(--white);
  padding: 0;
  box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 45%);
}

.video-dialog::backdrop {
  background: rgb(0 0 0 / 78%);
  backdrop-filter: blur(0.2rem);
}

.video-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
}

.video-dialog-head h2 {
  color: var(--white);
  font-size: 1.25rem;
}

.video-dialog-head button {
  display: grid;
  place-items: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: #262626;
  color: var(--white);
  cursor: pointer;
}

.video-frame {
  aspect-ratio: 16 / 9;
  background: #111;
}

.video-frame iframe {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

.toast {
  position: fixed;
  inset-inline-end: 1.5rem;
  inset-block-end: 1.5rem;
  z-index: 110;
  max-inline-size: min(24rem, calc(100% - 3rem));
  border-inline-start: 0.3rem solid var(--orange);
  border-radius: 0.35rem;
  background: var(--black);
  color: var(--white);
  box-shadow: var(--shadow-hover);
  opacity: 0;
  pointer-events: none;
  translate: 0 1rem;
  padding: 1rem 1.2rem;
  transition: opacity 200ms ease, translate 200ms ease;
}

.toast.is-visible {
  opacity: 1;
  translate: 0;
}

/* ---------- utilities ---------- */
.visually-hidden:where(:not(:focus-within, :active)) {
  position: absolute !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  inline-size: 0.0625rem !important;
  block-size: 0.0625rem !important;
  margin: -0.0625rem !important;
  border: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

.js .reveal {
  opacity: 0;
  translate: 0 1.75rem;
  transition: opacity 620ms ease, translate 620ms ease;
}

.js .reveal.is-visible {
  opacity: 1;
  translate: 0;
}

/* Interactive Hover & Micro-Animations */

/* 1. Global Arrow Slide Effect */
:where(a, button) i.fa-arrow-right,
.details-link i,
.read-more i,
.service-link i,
.blog-link i {
  display: inline-block;
  transition: transform 220ms ease;
}

:where(a, button):hover i.fa-arrow-right,
.details-link:hover i,
.read-more:hover i,
.service-link:hover i,
.blog-link:hover i,
.bus-card:hover .details-link i,
.service-card:hover a i,
.blog-card:hover .read-more i {
  transform: translateX(0.35rem);
}

/* 2. Image Scale / Zoom on Card Hover */
.bus-card,
.blog-card,
.team-card,
.blog-image {
  overflow: hidden;
}

.bus-card img,
.blog-card img,
.blog-image img,
.team-card img {
  transition: transform 500ms cubic-bezier(0.25, 1, 0.5, 1), filter 500ms ease;
}

.bus-card:hover img,
.blog-card:hover img,
.blog-image:hover img,
.team-card:hover img {
  transform: scale(1.06);
}

/* 3. Button Color Transition (Exact Original Template Behavior) */
.button,
.button-primary,
.newsletter-form button {
  position: relative;
  box-shadow: none;
  transform: none;
  translate: none;
  transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease;
}

.button-primary:hover,
.newsletter-form button:hover {
  background-color: var(--navy) !important;
  color: var(--white) !important;
  box-shadow: none !important;
  transform: none !important;
  translate: none !important;
}

.button-primary:active {
  transform: none !important;
  translate: none !important;
  box-shadow: none !important;
}

/* 4. Service Card & Icon Micro-Animations */
.service-card {
  transition: transform 280ms ease, box-shadow 280ms ease, background-color 280ms ease, color 280ms ease;
}

.service-icon {
  display: inline-block;
  transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1), color 300ms ease;
}

.service-card h3 {
  transition: color 220ms ease;
}

.service-card:hover h3 {
  color: var(--orange);
}

.service-card.featured:hover h3 {
  color: var(--white);
}

/* 5. Team Card & Social Icon Motion */
.team-card {
  transition: transform 300ms ease, box-shadow 300ms ease;
}

.team-card:hover {
  transform: translateY(-0.45rem);
  box-shadow: var(--shadow-hover);
}

.social-links a {
  transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.social-links a:hover {
  background: var(--orange);
  color: var(--white);
  transform: translateY(-0.15rem) scale(1.1);
}

/* 6. Contact & Step Card Interactive Hovers */
.contact-card,
.step-card {
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}

.contact-card:hover,
.step-card:hover {
  transform: translateY(-0.35rem);
  box-shadow: var(--shadow-hover);
  border-color: var(--orange);
}

.contact-card-icon {
  transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1), background-color 300ms ease, color 300ms ease;
}

.contact-card:hover .contact-card-icon {
  transform: scale(1.12) rotate(-4deg);
  background: var(--orange);
  color: var(--white);
}

/* 7. Sidebar Widgets & Footer Link Slide Effects */
.widget-list a {
  transition: color 180ms ease, transform 180ms ease;
}

.widget-list a:hover {
  color: var(--orange);
  transform: translateX(0.35rem);
}

.footer-col a {
  transition: color 180ms ease, padding-left 180ms ease;
}

.footer-col a:hover {
  color: var(--orange);
  padding-left: 0.35rem;
}

/* 8. Form Inputs Focus Glow */
.form-group input,
.form-group select,
.form-group textarea {
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 0.2rem rgba(240, 101, 43, 0.18);
  outline: none;
}

/* Steps Section / How It Works */
.steps-section {
  padding-block: 6rem;
  background: var(--white);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-block-start: 3.5rem;
}

.step-card {
  position: relative;
  background: var(--surface);
  padding: 2.25rem 1.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.step-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--shadow-hover);
}

.step-num {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--orange);
  line-height: 1;
  margin-block-end: 1rem;
}

.step-card h3 {
  font-size: 1.25rem;
  margin-block-end: 0.75rem;
}

.step-card p {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Page Header / Subpage Hero Banner */
.page-header {
  position: relative;
  background: var(--navy) var(--kb-bg-image, none) center / cover no-repeat;
  padding-block: 10rem 4.5rem;
  color: var(--white);
}

.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 15, 80, 0.85) 0%, rgba(20, 15, 80, 0.94) 100%);
}

.page-header-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}

.page-header h1 {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--white);
  margin-block-end: 0.75rem;
}

.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}

.breadcrumb a {
  color: var(--orange);
  font-weight: 500;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* .breadcrumb above is built for the dark page-header; the booking
     summary sits on a light one. */
.kb-summary-header .breadcrumb {
  justify-content: flex-start;
  color: var(--gray);
  font-size: 0.875rem;
}

/* Bus Detail Page */
.bus-detail-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 3rem;
  margin-block: 4rem;
}

.bus-main-img {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 1.5;
  object-fit: cover;
}

.bus-detail-content h2 {
  font-size: 2.2rem;
  margin-block-end: 1rem;
}

.bus-detail-price {
  font-size: 2rem;
  color: var(--orange);
  font-weight: 700;
  font-family: var(--font-display);
  margin-block-end: 1.5rem;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 1.5rem;
}

.spec-table th,
.spec-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.spec-table th {
  color: var(--black);
  font-weight: 600;
  width: 35%;
}

.spec-table td {
  color: var(--gray);
}

.detail-sidebar {
  background: var(--white);
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  height: fit-content;
}

.detail-sidebar h3 {
  font-size: 1.4rem;
  margin-block-end: 1.25rem;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 0.5rem;
}

.form-group {
  margin-block-end: 1.25rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-block-end: 0.4rem;
  font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.95rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--navy);
}

/* Team Grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-block: 4rem;
}

.team-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: center;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.team-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.team-info {
  padding: 1.5rem;
}

.team-info h3 {
  font-size: 1.25rem;
  margin-block-end: 0.25rem;
}

.team-info p {
  color: var(--orange);
  font-weight: 600;
  font-size: 0.9rem;
  margin-block-end: 1rem;
}

.social-links {
  display: flex;
  justify-content: start;
  gap: 0.75rem;
}

.social-links a {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--light-gray);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: background 200ms ease, color 200ms ease;
}

.social-links a:hover {
  background: var(--orange);
  color: var(--white);
}

/* FAQ Section & Accordion */
.faq-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-block: 2.5rem 3.5rem;
}

.faq-tab-btn {
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--white);
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.faq-tab-btn.is-active,
.faq-tab-btn:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.faq-group.is-hidden {
  display: none;
}

.accordion-list {
  display: grid;
  gap: 1.25rem;
  max-width: 900px;
  margin-inline: auto;
}

.accordion-item {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid var(--line);
}

.accordion-header {
  width: 100%;
  padding: 1.25rem 1.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}

.accordion-header i {
  color: var(--orange);
  transition: transform 200ms ease;
}

.accordion-item.is-active .accordion-header i {
  transform: rotate(180deg);
}

.accordion-body {
  display: none;
  padding: 0 1.75rem 1.5rem;
  color: var(--gray);
  line-height: 1.6;
}

.accordion-item.is-active .accordion-body {
  display: block;
}

/* Blog Layout & Single Post */
.blog-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  margin-block: 4rem;
}

.pagination {
  display: flex;
  gap: 0.5rem;
  margin-block-start: 3rem;
}

.pagination a,
.pagination span {
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  color: var(--navy);
  font-weight: 600;
}

.pagination a.active,
.pagination a:hover {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}

.sidebar-widget {
  background: var(--white);
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-block-end: 2rem;
}

.sidebar-widget h3 {
  font-size: 1.25rem;
  margin-block-end: 1.25rem;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 0.4rem;
}

.widget-list {
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.widget-list a {
  color: var(--gray);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.widget-list a:hover {
  color: var(--orange);
}

.single-post-body {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--gray);
}

.single-post-body h2 {
  font-size: 1.8rem;
  color: var(--navy);
  margin-block: 2rem 1rem;
}

.single-post-body blockquote {
  border-left: 4px solid var(--orange);
  padding-left: 1.5rem;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--navy);
  margin-block: 2rem;
}

.author-box {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  background: var(--light-gray);
  padding: 2rem;
  border-radius: var(--radius);
  margin-block: 3rem;
}

.author-box img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
}

/* Contact Page */
.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.contact-card {
  background: var(--white);
  padding: 2.5rem 2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}

.contact-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-block-end: 1.25rem;
  flex-shrink: 0;
}

.contact-card.compact {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  text-align: left;
  padding: 1.5rem 1.75rem;
}

.contact-card.compact .contact-card-icon {
  margin-block-end: 0;
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.15rem;
}

.map-container {
  width: 100%;
  height: 400px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-block: 3rem;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* 404 Page */
.error-page-wrap {
  text-align: center;
  padding-block: 6rem;
}

.error-code {
  font-family: var(--font-display);
  font-size: 8rem;
  font-weight: 800;
  color: var(--orange);
  line-height: 1;
  margin-block-end: 1rem;
}

.error-page-wrap h2 {
  font-size: 2.5rem;
  margin-block-end: 1rem;
}

.error-page-wrap p {
  max-width: 500px;
  margin-inline: auto;
  color: var(--gray);
  margin-block-end: 2rem;
}

/* ---------- animations ---------- */

/* ---------------------------------------------------------------
     Motion tokens
     --------------------------------------------------------------- */

:root {
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --reveal-duration: 620ms;
  --reveal-step: 90ms;
}

/* ---------------------------------------------------------------
     Scroll reveal — base + directional variants
     The stagger index is set per group by script.js.
     --------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  translate: 0 1.75rem;
  transition:
    opacity var(--reveal-duration) var(--ease-out-soft),
    translate var(--reveal-duration) var(--ease-out-soft),
    scale var(--reveal-duration) var(--ease-out-soft);
  transition-delay: calc(var(--reveal-index, 0) * var(--reveal-step));
  will-change: opacity, translate;
}

.js .reveal.is-visible {
  opacity: 1;
  translate: 0;
  scale: 1;
  will-change: auto;
}

.js .reveal-left {
  translate: -2.25rem 0;
}

.js .reveal-right {
  translate: 2.25rem 0;
}

.js .reveal-scale {
  translate: 0 1rem;
  scale: 0.94;
}

.js .reveal-fade {
  translate: 0;
}

/* Cards get a touch of scale so a grid reads as one motion, not twelve. */
.js :is(.service-card, .bus-card, .kb-process-card, .kb-value-card, .blog-card).reveal {
  scale: 0.97;
}

/* ---------------------------------------------------------------
     Accent underline draws itself in behind the headline
     --------------------------------------------------------------- */

.js .reveal .accent-underline::after,
.js .reveal.accent-underline::after {
  transform-origin: left center;
  scale: 0 1;
  transition: scale 520ms var(--ease-out-soft);
  transition-delay: calc(240ms + var(--reveal-index, 0) * var(--reveal-step));
}

.js .reveal.is-visible .accent-underline::after,
.js .reveal.is-visible.accent-underline::after {
  scale: 1 1;
}

@media (prefers-reduced-motion: no-preference) {

  /* -------------------------------------------------------------
       Hero entrance — plays on load rather than on scroll
       ------------------------------------------------------------- */

  .js .hero-copy.reveal {
    opacity: 1;
    translate: 0;
    transition: none;
  }

  .hero-copy>* {
    animation: hero-rise 820ms var(--ease-out-soft) backwards;
  }

  .hero-copy>h1 {
    animation-delay: 120ms;
  }

  .hero-copy>p {
    animation-delay: 260ms;
  }

  .hero-copy>.hero-actions {
    animation-delay: 400ms;
  }

  /* The underline is drawn by the shared .reveal rule above; it just needs
       to wait for the headline to finish rising. */
  .js .hero-copy.reveal .accent-underline::after {
    transition-delay: 700ms;
  }

  @keyframes hero-rise {
    from {
      opacity: 0;
      translate: 0 2rem;
    }
  }

  /* -------------------------------------------------------------
       Buttons — light sweep on hover
       ------------------------------------------------------------- */

  .button-primary {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    align-content: center;
  }

  .button-primary::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -35%;
    z-index: -1;
    inline-size: 35%;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / 28%), transparent);
  }

  .button-primary:hover::after,
  .button-primary:focus-visible::after {
    animation: button-sweep 720ms ease;
  }

  @keyframes button-sweep {
    to {
      translate: 400% 0;
    }
  }

  /* -------------------------------------------------------------
       Video trigger — breathing ring
       ------------------------------------------------------------- */

  .play-button {
    position: relative;
  }

  .play-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 0.125rem solid var(--white);
    border-radius: 50%;
    animation: play-pulse 2600ms ease-out infinite;
    pointer-events: none;
  }

  @keyframes play-pulse {
    from {
      opacity: 0.55;
      scale: 1;
    }

    to {
      opacity: 0;
      scale: 1.6;
    }
  }

  /* -------------------------------------------------------------
       Accordion panels ease open
       ------------------------------------------------------------- */

  .accordion-item.is-active .accordion-body {
    animation: accordion-open 320ms var(--ease-out-soft) both;
  }

  @keyframes accordion-open {
    from {
      opacity: 0;
      translate: 0 -0.5rem;
    }
  }

  /* -------------------------------------------------------------
       Card icons react to hover
       ------------------------------------------------------------- */

  .service-icon,
  .kb-process-icon,
  .stat>i {
    transition: translate 340ms var(--ease-spring), scale 340ms var(--ease-spring), rotate 340ms var(--ease-spring);
  }

  .service-card:hover .service-icon,
  .kb-process-card:hover .kb-process-icon {
    translate: 0 -0.25rem;
    scale: 1.12;
    rotate: -6deg;
  }

  .stat:hover>i {
    scale: 1.18;
  }

  .bus-card li i,
  .kb-checklist li i {
    transition: scale 260ms var(--ease-spring);
  }

  .bus-card:hover li i,
  .kb-checklist li:hover i {
    scale: 1.15;
  }

  /* -------------------------------------------------------------
       Desktop nav underline
       ------------------------------------------------------------- */

  .desktop-nav>a,
  .nav-dropdown-trigger {
    position: relative;
  }

  .desktop-nav>a::after,
  .nav-dropdown-trigger::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0.35rem;
    block-size: 0.125rem;
    background: var(--orange);
    scale: 0 1;
    transform-origin: left center;
    transition: scale 240ms var(--ease-out-soft);
  }

  .desktop-nav>a:hover::after,
  .desktop-nav>a.active::after,
  .nav-dropdown-trigger:hover::after,
  .nav-dropdown.is-open>.nav-dropdown-trigger::after {
    scale: 1 1;
  }

  /* -------------------------------------------------------------
       Social icons
       ------------------------------------------------------------- */

  .social-links a {
    transition: background-color 180ms ease, translate 220ms var(--ease-spring), rotate 220ms var(--ease-spring);
  }

  .social-links a:hover {
    rotate: -6deg;
  }

  /* -------------------------------------------------------------
       Toast slides in from the side instead of popping
       ------------------------------------------------------------- */

  .toast {
    translate: 1.5rem 0;
    transition: opacity 260ms var(--ease-out-soft), translate 260ms var(--ease-out-soft);
  }

  .toast.is-visible {
    translate: 0;
  }
}

/* ---------------------------------------------------------------
     Honour the reduced-motion preference everywhere above
     --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    translate: 0;
    scale: 1;
    transition-delay: 0s;
    transition-duration: 0.01ms;
  }

  .js .reveal .accent-underline::after,
  .js .reveal.accent-underline::after {
    scale: 1 1;
    transition: none;
  }
}

/* ---------- responsive ---------- */
@media (max-width: 67.5rem) {
  .desktop-nav {
    gap: 1rem;
    font-size: 0.88rem;
    padding-inline: 0.5rem;
  }

  .brand {
    flex-basis: 11rem;
    padding-inline: 1rem;
  }

  .brand img {
    inline-size: 8.9rem;
  }

  .header-contact {
    flex-basis: 10.3rem;
  }

  .about-grid {
    gap: 3rem;
  }

  .service-card,
  .bus-card-body {
    padding-inline: 1.8rem;
  }

  .why-content-inner {
    padding-inline: 2.5rem;
  }

  .footer-grid {
    gap: 2rem;
  }
}

@media (max-width: 56.25rem) {
  .site-header {
    inset-block-start: 1rem;
  }

  .site-header.is-sticky {
    padding-block: 0.4rem;
  }

  .header-shell {
    min-block-size: 4.6rem;
  }

  .desktop-nav,
  .header-contact {
    display: none;
  }

  .mobile-menu-button {
    display: inline-flex;
  }

  .hero,
  .hero-inner {
    min-block-size: 48rem;
  }

  .hero-copy {
    inline-size: 55%;
  }

  .kb-booking {
    margin-block-start: -2.5rem;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  .about-copy {
    max-inline-size: 44rem;
  }

  .about-visual {
    inline-size: min(100%, 42rem);
    margin-inline: auto;
  }

  .why-section {
    grid-template-columns: 1fr;
  }

  .why-image-panel,
  .why-content {
    min-block-size: 38rem;
  }

  .why-promo {
    inset-block-end: 2rem;
  }

  .why-content-inner {
    inline-size: min(100%, 46rem);
    margin-inline: auto;
    padding-block: 5rem;
  }

  .service-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-block-start: 4rem;
  }

  .service-card:is(.featured, .raised) {
    translate: 0;
  }

  .service-card:is(.featured, .raised):hover {
    translate: 0 -0.4rem;
  }

  .app-grid {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .app-copy {
    padding-inline-start: 1rem;
  }

  .fleet-heading {
    grid-template-columns: 1fr auto;
  }

  .fleet-heading>p {
    grid-column: 1 / -1;
    grid-row: 2;
    max-inline-size: 40rem;
  }

  .fleet-grid,
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fleet-grid> :last-child,
  .blog-grid> :last-child {
    grid-column: 1 / -1;
    inline-size: calc(50% - 0.95rem);
    margin-inline: auto;
  }

  .photo-gallery {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
}

@media (max-width: 43.75rem) {

  .photo-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }


  .container,
  .header-shell {
    inline-size: min(calc(100% - 2rem), var(--container));
  }

  .section {
    padding-block: 4.5rem;
  }

  .header-shell {
    min-block-size: 4.5rem;
  }

  .header-shell .brand {
    flex-basis: auto;
  }

  .header-shell .brand img {
    inline-size: 9.25rem;
  }

  .hero {
    min-block-size: 47rem;
    background-position: 42% center;
  }

  .hero-inner {
    align-items: start;
    justify-content: flex-start;
    min-block-size: 47rem;
    padding-block-start: 11.6rem;
  }

  .hero-copy {
    inline-size: 100%;
  }

  .hero h1 {
    max-inline-size: 21rem;
    font-size: clamp(2.7rem, 12vw, 3.55rem);
    line-height: 1.03;
  }

  .hero h1 span {
    white-space: normal;
  }

  .hero p {
    max-inline-size: 35rem;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  .booking-wrap {
    padding-block: 0 3.5rem;
  }

  .kb-booking {
    margin-block-start: -1.5rem;
  }

  .about-section {
    padding-block-start: 5rem;
  }

  .about-grid {
    gap: 3.5rem;
  }

  .checklists {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .about-visual {
    min-block-size: 29rem;
  }

  .about-main-image {
    inline-size: 88%;
    block-size: 26rem;
  }

  .about-small-image {
    inset-block-start: 4rem;
    inline-size: 47%;
    block-size: 15rem;
    border-width: 0.45rem;
  }

  .experience-badge {
    inset-inline-start: 1rem;
    padding: 1rem 1.2rem;
  }

  .experience-badge strong {
    font-size: 2.5rem;
  }

  .why-section {
    margin-block-start: 0;
  }

  .why-image-panel {
    min-block-size: 35rem;
  }

  .why-content {
    min-block-size: auto;
  }

  .why-content-inner {
    padding: 4.5rem 1rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .services-section {
    padding-block: 5rem;
  }

  .service-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-block-start: 3rem;
  }

  .service-card {
    min-block-size: auto;
  }

  .app-section,
  .app-grid {
    min-block-size: 54rem;
  }

  .app-grid {
    grid-template-columns: 1fr;
    align-content: center;
    padding-block: 4rem;
  }

  .app-copy {
    order: -1;
    padding: 0;
  }

  .app-visual {
    min-block-size: 27rem;
  }

  .app-visual img {
    inset-inline: 50% auto;
    inset-block-end: -5rem;
    translate: -50% 0;
    inline-size: 29rem;
    max-inline-size: 130%;
  }

  .store-buttons {
    flex-wrap: wrap;
  }

  .store-buttons img {
    block-size: 2.8rem;
  }

  .fleet-heading {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-block-end: 2.5rem;
  }

  .fleet-heading>p {
    grid-column: auto;
    grid-row: auto;
  }

  .fleet-heading .button {
    justify-self: start;
  }

  .fleet-grid,
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .fleet-grid> :last-child,
  .blog-grid> :last-child {
    grid-column: auto;
    inline-size: 100%;
  }

  .bus-card-body {
    padding-inline: 1.5rem;
  }

  .bus-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .blog-section {
    padding-block: 4rem 5rem;
  }

  .blog-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  /* The footer ran over 1.5 screens tall on a phone; these bring it
       back to roughly one. */
  .site-footer {
    padding-block-start: 3.5rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .footer-grid h2 {
    margin-block-end: 1rem;
    font-size: 1.35rem;
  }

  .footer-brand>img {
    inline-size: 11rem;
    margin-block-end: 1rem;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    margin-block-start: 3.5rem;
  }

  .toast {
    inset-inline: 1rem;
    inset-block-end: 1rem;
    max-inline-size: none;
  }
}


@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .reveal,
  .js .reveal.is-visible,
  .site-header,
  .button,
  .blog-image img,
  .mobile-drawer,
  .mobile-drawer::backdrop {
    animation: none;
    opacity: 1;
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    translate: 0;
  }
}

@media (forced-colors: active) {

  .button,
  .service-card,
  .bus-card,
  .header-shell {
    border: 0.0625rem solid ButtonText;
  }
}

/* Services UI Extensions */
.kb-services-hero {
  position: relative;
  background: linear-gradient(135deg, #140F50 0%, #2A2765 60%, #1A1744 100%);
  padding-block: 6rem 5rem;
  color: var(--white);
  overflow: hidden;
}

.kb-services-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(241, 90, 36, 0.12) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  opacity: 0.6;
  pointer-events: none;
}


.kb-services-hero .page-header-inner {
  position: relative;
  z-index: 2;
  text-align: left;
  margin-inline: auto;
  margin-top: 5em;
}

.kb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1.1rem;
  border-radius: 50px;
  background: rgba(241, 90, 36, 0.15);
  border: 1px solid rgba(241, 90, 36, 0.35);
  color: var(--orange);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-block-end: 1rem;
}

.kb-service-card {
  position: relative;
  background: var(--white);
  border-radius: 12px;
  padding: 2.5rem;
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.kb-service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(42, 39, 101, 0.12);
  border-color: rgba(241, 90, 36, 0.3);
}

.kb-service-card.navy-accent {
  border-top: 4px solid var(--navy);
}

.kb-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 16px;
  background: #FFF4F0;
  color: var(--orange);
  font-size: 1.85rem;
  margin-block-end: 1.5rem;
  transition: background-color 300ms ease, color 300ms ease, transform 300ms ease;
}

.kb-service-card.navy-accent .kb-card-icon {
  background: #F0F2FB;
  color: var(--navy);
}

.kb-service-card:hover .kb-card-icon {
  background: var(--orange);
  color: var(--white);
  transform: scale(1.06);
}

.kb-service-card.navy-accent:hover .kb-card-icon {
  background: var(--navy);
  color: var(--white);
}

.kb-card-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--black);
  margin-block-end: 0.85rem;
  line-height: 1.25;
}

.kb-card-desc {
  color: var(--gray);
  font-size: 0.975rem;
  line-height: 1.6;
  margin-block-end: 1.25rem;
}

.kb-checklist {
  margin-block-end: 2rem;
  display: grid;
  gap: 0.65rem;
}

.kb-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.935rem;
  color: var(--ink);
  font-weight: 500;
}

.kb-checklist i {
  color: var(--orange);
  font-size: 1rem;
  margin-top: 0.15rem;
}

.kb-card-footer {
  margin-block-start: auto;
  padding-block-start: 1rem;
}

.kb-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--navy);
  font-size: 0.95rem;
  transition: color 200ms ease, gap 200ms ease;
}

.kb-link-btn i {
  transition: transform 200ms ease;
}

.kb-link-btn:hover {
  color: var(--orange);
  gap: 0.75rem;
}

.kb-link-btn:hover i {
  transform: translateX(4px);
}

/* Process Steps */
.kb-process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
  position: relative;
  margin-block-start: 3.5rem;
}

.kb-process-card {
  position: relative;
  background: var(--white);
  border-radius: 12px;
  padding: 2.25rem 1.75rem;
  text-align: center;
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03);
  transition: transform 280ms ease, box-shadow 280ms ease;
}

.kb-process-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(42, 39, 101, 0.1);
}

.kb-process-number {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--navy);
  font-weight: 800;
  font-size: 0.875rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
}

.kb-process-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
  color: var(--white);
  font-size: 1.75rem;
  margin-block-end: 1.25rem;
}

.kb-process-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--black);
  margin-block-end: 0.65rem;
}

.kb-process-desc {
  color: var(--gray);
  font-size: 0.925rem;
  line-height: 1.55;
}

/* Split Feature Section */
.kb-split-section {
  padding-block: 6rem;
}

.kb-split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 3.5rem;
  align-items: center;
}

.kb-split-media {
  position: relative;
}

.kb-split-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.kb-experience-badge {
  position: absolute;
  bottom: -1.5rem;
  right: 1.5rem;
  background: var(--navy);
  color: var(--white);
  padding: 1.25rem 1.75rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20, 15, 80, 0.25);
  display: flex;
  align-items: center;
  gap: 1rem;
  border-left: 5px solid var(--orange);
}

.kb-experience-badge strong {
  font-size: 2.25rem;
  line-height: 1;
  color: var(--orange);
}

.kb-experience-badge span {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

@media (max-width: 48rem) {
  .kb-service-card {
    padding: 1.75rem;
  }

  .kb-experience-badge {
    position: static;
    margin-block-start: 1rem;
  }
}

/* Values/Services Grid (about-us.html) */
.kb-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-block-start: 3.5rem;
}

.kb-value-card {
  background: var(--white);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  box-shadow: 0 10px 30px rgba(42, 39, 101, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}

.kb-value-card:hover {
  transform: translateY(-6px);
  border-color: rgba(241, 90, 36, 0.2);
}

.kb-value-icon {
  font-size: 2.5rem;
  color: var(--orange);
  margin-block-end: 1.25rem;
  display: inline-block;
}

.kb-value-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--black);
  margin-block-end: 0.75rem;
  font-family: var(--font-display);
}

.kb-value-desc {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-block-end: 1.75rem;
}

.kb-value-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--orange);
  font-size: 0.95rem;
  margin-block-start: auto;
  transition: gap 200ms ease, color 200ms ease;
}

.kb-value-link i {
  transition: transform 200ms ease;
}

.kb-value-link:hover {
  gap: 0.75rem;
}

.kb-value-link:hover i {
  transform: translateX(4px);
}

/* Featured Orange Card */
.kb-value-card.featured {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
  color: var(--white);
  border: none;
}

.kb-value-card.featured:hover {
  transform: translateY(-6px);
}

.kb-value-card.featured .kb-value-icon {
  color: var(--white);
}

.kb-value-card.featured .kb-value-title {
  color: var(--white);
}

.kb-value-card.featured .kb-value-desc {
  color: rgba(255, 255, 255, 0.92);
}

.kb-value-card.featured .kb-value-link {
  color: var(--white);
}

@media (max-width: 62rem) {
  .kb-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 43.75rem) {
  .kb-values-grid {
    grid-template-columns: 1fr;
  }
}

/* Google Places Autocomplete Styling */
.pac-container {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-hover);
  font-family: var(--font-body);
  margin-top: 4px;
  z-index: 10000 !important;
}

.pac-item {
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  color: var(--ink);
  border-top-color: var(--line);
  cursor: pointer;
}

.pac-item:hover,
.pac-item-selected {
  background-color: var(--light-gray);
}

.pac-icon {
  margin-right: 0.5rem;
}

.pac-item-query {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
}


/* =====================================================================
   WordPress / Elementor integration

   Everything above is the site's own stylesheet. This block is the only
   part that knows it is running inside WordPress: it re-asserts the brand
   base styles at a specificity that clears a theme's element selectors,
   neutralises Elementor's own wrappers, and adds the section/background/
   button helpers the widgets emit.
   ===================================================================== */

/* Re-assert the brand reset inside Elementor's wrapper. Everything here is
   wrapped in :where() so it adds no specificity: these rules must beat a
   theme's bare-element defaults but must never outrank a component above —
   `.why-content-inner h2` and the white-on-photo hero heading both set their
   own colour, and a scoped :is() selector would silently win against them. */
:where(.elementor-widget-container) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--black);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}

:where(.elementor-widget-container) :is(p, ul, ol, figure) {
  margin: 0;
}

:where(.elementor-widget-container) ul {
  padding: 0;
  list-style: none;
}

:where(.elementor-widget-container) a {
  text-decoration: none;
}

:where(.elementor-widget-container) img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

:where(.elementor-widget-container) :is(button, input, select, textarea) {
  font: inherit;
}

.e-con-full.e-flex,
.e-con.e-flex>.e-con-inner {
  row-gap: 0;
}

/* Elementor renders library icons as inline SVG. Without an explicit box an
   <svg> with only a viewBox stretches to the container width, and its fill
   defaults to black instead of following the icon colour. */
.elementor-widget-container .e-font-icon-svg {
  inline-size: 1em;
  block-size: 1em;
  fill: currentColor;
}

/* Elementor pads and constrains its own wrapper; the sections below manage
   their own rhythm and full-bleed backgrounds. */
[class*="elementor-widget-kengabus-"]>.elementor-widget-container {
  padding: 0;
}

/* --- Section shell ------------------------------------------------- */

.kb-section {
  position: relative;
}

.kb-bg-white {
  background: var(--white);
}

.kb-bg-surface {
  background: var(--surface);
}

.kb-bg-navy {
  background: var(--navy);
  color: var(--white);
}

.kb-bg-navy :is(h1, h2, h3, h4) {
  color: var(--white);
}

.kb-bg-navy p,
.kb-bg-navy .section-copy {
  color: rgba(255, 255, 255, 0.9);
}

/* Lets a widget span the viewport even inside a boxed Elementor container. */
.kb-full-bleed {
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* --- Button variants ----------------------------------------------- */

.kb-button-orange {
  background: var(--orange);
  color: var(--white);
}

.kb-button-orange:hover,
.kb-button-orange:focus-visible {
  background: var(--navy);
  color: var(--white);
}

.kb-button-navy {
  background: var(--navy);
  color: var(--white);
}

.kb-button-navy:hover,
.kb-button-navy:focus-visible {
  background: var(--orange);
  color: var(--white);
}

.kb-button-ghost {
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.kb-button-ghost:hover,
.kb-button-ghost:focus-visible {
  background: var(--white);
  color: var(--navy);
}

.kb-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.kb-actions-center {
  justify-content: center;
}

/* --- Editor affordances -------------------------------------------- */

/* The reveal animation starts elements at opacity 0, which makes a widget
   look empty while it is being edited. Inside the editor they stay put. */
.elementor-editor-active .reveal,
.elementor-editor-preview .reveal {
  opacity: 1;
  transform: none;
}

.kb-editor-note {
  display: block;
  padding: 1.25rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--gray);
  font-size: 0.9rem;
  text-align: center;
}

/* --- Classes introduced by the widgets ----------------------------- */

/* Header drawer CTA (was an inline style in the static markup). */
.mobile-drawer-cta {
  margin-block-start: 1.5rem;
  padding-inline: 1rem;
}

.mobile-drawer-cta .button {
  display: block;
  text-align: center;
}

/* Page banner copy under the H1. */
.kb-page-banner-copy {
  color: rgba(255, 255, 255, 0.9);
  margin-block-start: 0.75rem;
  max-inline-size: 44rem;
}

.kb-page-banner .breadcrumb {
  margin-block-start: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* CTA banner. */
.kb-cta-inner {
  margin-top: 5rem;
}

.kb-cta-inner>*+* {
  margin-block-start: 1rem;
}

.kb-cta-copy {
  color: rgba(255, 255, 255, 0.9);
}

.kb-cta-copy-center {
  margin-inline: auto;
}

.kb-cta-inner .kb-actions {
  margin-block-start: 2rem;
}

/* Hero overlay variants. */
.kb-overlay-solid {
  background: linear-gradient(90deg, rgba(20, 15, 80, 0.65) 0%, rgba(20, 15, 80, 0.9) 100%);
}

/* Fleet card intro line. */
.bus-card-intro {
  color: var(--gray);
  font-size: 0.9rem;
  margin-block-end: 0.75rem;
}

/* FAQ widget. */
.kb-faq-container {
  max-inline-size: 900px;
}

.kb-faq-footer {
  text-align: center;
  margin-block-start: 2.5rem;
}

.kb-faq-footer .section-copy {
  margin-inline: auto;
  margin-block-end: 1.25rem;
}

/* Contact details column. */
.kb-contact-cards {
  display: grid;
  gap: 1rem;
}

.kb-contact-label {
  font-size: 1rem;
  margin-block-end: 0.15rem;
  color: var(--gray);
  font-weight: 500;
}

.kb-contact-value {
  color: var(--navy);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0;
}

.kb-contact-note {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: 2rem;
  margin-block-start: 1.25rem;
}

.kb-contact-note h3 {
  color: var(--white);
  font-size: 1.15rem;
  margin-block-end: 1rem;
}

.kb-contact-note .kb-checklist span {
  color: rgba(255, 255, 255, 0.9);
}

/* Contact form. */
.kb-contact-form {
  background: var(--white);
  padding: 2.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* .kb-contact-form .form-group + .form-group,
.kb-contact-form .kb-contact-row + .form-group,
.kb-contact-form .form-group + .kb-contact-row,
.kb-contact-form .kb-contact-row + .kb-contact-row {
  margin-block-start: 1rem;
} */

.kb-contact-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
}

.kb-contact-form :is(input, select, textarea) {
  inline-size: 100%;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.kb-contact-form button[type="submit"] {
  margin-block-start: 1.5rem;
  inline-size: 100%;
}

/* Vehicle detail. */
.kb-detail-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 3rem;
}

.kb-detail-image {
  inline-size: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-block-end: 2rem;
}

.kb-detail-main .section-copy {
  margin-block: 1rem 1.5rem;
}

.kb-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
  margin-block-end: 2rem;
}

.kb-spec-tile {
  background: var(--surface);
  padding: 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.kb-spec-tile i {
  color: var(--orange);
  font-size: 1.5rem;
  margin-block-end: 0.5rem;
  display: block;
}

.kb-spec-tile p {
  font-size: 0.875rem;
  color: var(--gray);
  margin-block-start: 0.25rem;
}

.kb-inquiry-card {
  background: var(--white);
  padding: 2.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-block-start: 5px solid var(--orange);
  align-self: start;
}

.kb-inquiry-card h3 {
  font-size: 1.5rem;
  color: var(--navy);
  margin-block-end: 0.5rem;
}

.kb-inquiry-card>p {
  color: var(--gray);
  font-size: 0.95rem;
  margin-block-end: 1.5rem;
}

.kb-inquiry-card .form-group+.form-group {
  margin-block-start: 1rem;
}

.kb-inquiry-card :is(input, textarea) {
  inline-size: 100%;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  resize: vertical;
}

.kb-inquiry-card button[type="submit"] {
  margin-block-start: 1.5rem;
  inline-size: 100%;
}

/* 404 search. */
.kb-404-search {
  display: flex;
  gap: 0.5rem;
  max-inline-size: 26rem;
  margin: 1.5rem auto 2rem;
}

.kb-404-search input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.kb-404-search button {
  padding-inline: 1.25rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--orange);
  color: var(--white);
  cursor: pointer;
}

/* The quote widget only tucks under the hero when asked to. */
.kb-booking-inline {
  margin-block-start: 0;
}

/* Alignment is a class rather than a generated selector, because the markup
   branches on it too — Elementor keeps selectors-only controls out of the
   frontend settings array. */
.kb-align-left {
  text-align: left;
}

.kb-align-center {
  text-align: center;
}

/* --- Elementor image reset compatibility ---------------------------
   Elementor's frontend CSS ships `.elementor img { border: none;
   border-radius: 0; box-shadow: none; height: auto; }`. That selector is
   more specific than the single-class rules above, so the framed images
   lose their border, corner radius and fixed height. Only the properties
   Elementor actually resets are restored here — width, aspect-ratio and
   object-fit come through untouched — and the `.elementor` prefix is what
   wins the specificity tie. */

.elementor .about-main-image {
  block-size: 36.6rem;
  border-radius: var(--radius);
}

.elementor .about-small-image {
  block-size: 18.6rem;
  border: 0.8rem solid var(--white);
  border-radius: var(--radius);
}

@media (max-width: 43.75rem) {
  .elementor .about-main-image {
    block-size: 26rem;
  }

  .elementor .about-small-image {
    block-size: 15rem;
    border-width: 0.45rem;
  }
}

.elementor .bus-main-img {
  border-radius: var(--radius);
}

.elementor .kb-detail-image {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.elementor .kb-split-img {
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.elementor .author-box img {
  block-size: 90px;
  border-radius: 50%;
}

.elementor .store-buttons img {
  block-size: 2.8rem;
}

/* The gradient page-header variant coloured its heading with an inline style
   in the static markup, so the stylesheet never carried a rule for it. The
   photo variant (.page-header) already has one. */
.kb-services-hero .page-header-inner :is(h1, h2, h3, h4) {
  color: var(--white);
}

/* .kb-services-hero .page-header-inner .kb-page-banner-copy {
  margin-inline: auto;
} */

/* --- Spacing the static markup carried as inline styles --------------
   These gaps lived in `style=""` attributes on the original pages, so the
   stylesheet never had a rule for them. Values measured off the live
   static site rather than guessed. */

.kb-faq-container .accordion-list {
  margin-block-start: 2.5rem;
}

/* The promo card is meant to straddle the boundary into the next section.
   `.kb-section { position: relative }` above turns every following section
   into a positioned box, which would otherwise paint over the card. */
.why-promo {
  z-index: 2;
}

/* Centre alignment should centre the copy block too, not just its text. */
/* .page-header-inner.kb-align-center .kb-page-banner-copy,
.kb-services-hero .page-header-inner .kb-page-banner-copy {
  margin-inline: auto;
} */

/* --- Server-side form feedback ------------------------------------- */

.kb-form-message {
  margin-block-start: 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  line-height: 1.5;
}

.kb-form-message.is-success {
  background: rgba(34, 139, 84, 0.1);
  color: #1c7a4a;
}

.kb-form-message.is-error {
  background: var(--error-container, #ffdad6);
  color: var(--on-error-container, #93000a);
}

.kb-bg-navy .kb-form-message.is-success,
.kb-recap .kb-form-message.is-success {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
}

button.is-sending,
.kb-submit.is-sending {
  opacity: 0.7;
  cursor: progress;
}

/* Honeypot: present for bots, unreachable for people and screen readers. */
.kb-hp {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- WhatsApp Floating Action Button (FAB) ------------------------- */

.kb-whatsapp-fab {
  position: fixed;
  bottom: clamp(1.25rem, 3vh, 2rem);
  right: clamp(1.25rem, 3vw, 2rem);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}

.kb-whatsapp-fab--bottom-left {
  right: auto;
  left: clamp(1.25rem, 3vw, 2rem);
  align-items: flex-start;
}

.kb-whatsapp-fab--inline {
  position: relative;
  bottom: auto;
  right: auto;
  left: auto;
  z-index: 1;
  display: inline-flex;
  align-items: center;
}

.kb-whatsapp-fab__btn,
.kb-whatsapp-fab__tooltip {
  pointer-events: auto;
}

.kb-whatsapp-fab__btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.kb-whatsapp-fab__btn:hover,
.kb-whatsapp-fab__btn:focus-visible {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.55), 0 6px 16px rgba(0, 0, 0, 0.22);
  color: #ffffff;
  outline: none;
}

.kb-whatsapp-fab__btn:active {
  transform: scale(0.96) translateY(0);
}

.kb-whatsapp-fab__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.kb-whatsapp-fab__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.kb-whatsapp-fab__pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: kb-wa-pulse 2.2s infinite cubic-bezier(0.4, 0, 0.6, 1);
  pointer-events: none;
}

@keyframes kb-wa-pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.85;
  }
  70% {
    transform: scale(1.4);
    opacity: 0;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.kb-whatsapp-fab__tooltip {
  background: var(--navy-dark, #140F50);
  color: #ffffff;
  padding: 0.6rem 0.9rem 0.6rem 1.1rem;
  border-radius: 1.25rem;
  font-size: 0.875rem;
  font-family: var(--font-body, "Inter", sans-serif);
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(20, 15, 80, 0.25);
  margin-bottom: 0.75rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  animation: kb-wa-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kb-whatsapp-fab__tooltip::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: 22px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--navy-dark, #140F50);
}

.kb-whatsapp-fab--bottom-left .kb-whatsapp-fab__tooltip::after {
  right: auto;
  left: 22px;
}

.kb-whatsapp-fab__tooltip.is-hidden {
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  pointer-events: none;
}

.kb-whatsapp-fab__tooltip-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.15rem;
  margin-left: 0.25rem;
  transition: color 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kb-whatsapp-fab__tooltip-close:hover {
  color: #ffffff;
  transform: scale(1.15);
}

@keyframes kb-wa-bounce {
  0% {
    opacity: 0;
    transform: translateY(15px) scale(0.85);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 480px) {
  .kb-whatsapp-fab {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    right: 1rem;
  }

  .kb-whatsapp-fab--bottom-left {
    left: 1rem;
    right: auto;
  }

  .kb-whatsapp-fab__btn {
    width: 54px;
    height: 54px;
  }

  .kb-whatsapp-fab__icon {
    width: 25px;
    height: 25px;
  }

  .kb-whatsapp-fab__tooltip {
    font-size: 0.8125rem;
    padding: 0.5rem 0.8rem 0.5rem 1rem;
  }
}