/* Shalom Bus Service & Transport brand refresh */
:root {
  --brand: 222 92% 31%;
  --brand-glow: 41 100% 56%;
  --brand-dark: 225 95% 14%;
  --background: 218 38% 98%;
  --foreground: 224 45% 13%;
  --card: 0 0% 100%;
  --card-foreground: 224 45% 13%;
  --popover: 0 0% 100%;
  --popover-foreground: 224 45% 13%;
  --primary: var(--brand);
  --primary-foreground: 0 0% 100%;
  --secondary: 43 100% 94%;
  --secondary-foreground: 224 50% 18%;
  --muted: 216 42% 96%;
  --muted-foreground: 219 20% 42%;
  --accent: 43 95% 88%;
  --accent-foreground: 224 50% 15%;
  --border: 219 35% 88%;
  --input: 219 35% 90%;
  --ring: 41 100% 56%;
  --gradient-brand: linear-gradient(135deg, hsl(222 92% 31%) 0%, hsl(216 96% 46%) 44%, hsl(41 100% 56%) 100%);
  --gradient-dark: linear-gradient(135deg, hsl(225 95% 10%) 0%, hsl(222 92% 25%) 55%, hsl(41 100% 37%) 100%);
  --shadow-brand: 0 18px 55px -22px hsl(222 92% 31% / .72), 0 0 38px hsl(41 100% 56% / .18);
  --shadow-glow: 0 0 42px hsl(41 100% 56% / .36);
  --neon-glow: 0 0 8px hsl(41 100% 56% / .38), 0 0 18px hsl(216 96% 46% / .26), 0 0 32px hsl(41 100% 56% / .16);
}

body {
  background:
    radial-gradient(circle at 12% 8%, hsl(41 100% 56% / .14), transparent 26rem),
    radial-gradient(circle at 88% 4%, hsl(216 96% 46% / .12), transparent 28rem),
    hsl(var(--background));
}

nav.fixed {
  background: linear-gradient(90deg, hsl(225 95% 10% / .94), hsl(222 92% 23% / .90), hsl(43 100% 35% / .78)) !important;
  border-bottom-color: hsl(41 100% 56% / .28) !important;
}

nav.fixed a {
  color: hsl(0 0% 100% / .92) !important;
}

nav.fixed img {
  height: 4.5rem !important;
  width: auto !important;
  max-width: 17rem !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 18px hsl(225 95% 8% / .55));
}

nav.fixed a.flex.items-center.group {
  min-width: clamp(10rem, 16vw, 15rem);
  perspective: 700px;
}

nav.fixed a.flex.items-center.group img {
  display: block !important;
}

nav.fixed a.flex.items-center.group::after {
  content: "SHALOM";
  display: none !important;
  font-family: Outfit, "Arial Black", Impact, sans-serif;
  font-size: clamp(2.05rem, 4vw, 3.55rem);
  font-weight: 950;
  font-style: italic;
  line-height: .82;
  letter-spacing: .015em;
  color: transparent;
  background: linear-gradient(135deg, #073894 0%, #0b63e5 34%, #ffffff 48%, #f8b718 60%, #ffe76d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1.2px #ffd45c;
  transform: rotate(-4deg) skewX(-8deg) translateZ(0);
  text-shadow:
    2px 2px 0 #061a5a,
    4px 4px 0 #00123d,
    6px 6px 0 #d48100,
    0 0 14px rgb(255 204 55 / .58),
    0 12px 22px rgb(0 0 0 / .48);
  transition: transform .3s ease, filter .3s ease;
}

nav.fixed a.flex.items-center.group:hover::after {
  transform: rotate(-4deg) skewX(-8deg) translateY(-2px) scale(1.035);
  filter: drop-shadow(0 0 14px rgb(255 205 48 / .5));
}

nav.fixed .container {
  min-height: 5.25rem;
}

section#home .absolute.inset-x-0.top-16.bottom-0 > div {
  background: transparent;
  border: 1px solid hsl(41 100% 56% / .35);
  box-shadow: 0 30px 90px hsl(225 95% 8% / .18), 0 0 52px hsl(41 100% 56% / .16);
}

section#home img[alt="Luxury coach bus on highway"] {
  object-fit: contain !important;
  object-position: center center !important;
  opacity: .55 !important;
}

section#home .bg-gray-900\/45 {
  background:
    linear-gradient(90deg, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .34) 30%, transparent 62%, transparent 100%) !important;
}

section#home > .absolute.inset-x-0.top-16.bottom-0.z-10 {
  display: none !important;
}

.hero-category-shortcut {
  min-height: 3rem;
  border: 1px solid hsl(216 96% 55% / .42);
  border-radius: .75rem;
  padding: 0 1.15rem;
  color: #fff;
  font-size: .88rem;
  font-weight: 800;
  line-height: 1;
  background-image: linear-gradient(135deg, hsl(222 92% 31%), hsl(216 96% 43%));
  box-shadow: 0 14px 28px hsl(222 92% 15% / .26);
  transition: transform .25s ease, background-image .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}

.hero-category-shortcut:hover,
.hero-category-shortcut.active {
  transform: translateY(-2px);
  color: hsl(225 95% 10%);
  border-color: hsl(41 100% 60% / .95);
  background-image: linear-gradient(135deg, #f2a900, #ffe16a 52%, #f6b21a);
  box-shadow: 0 18px 34px hsl(41 100% 34% / .35), 0 0 22px hsl(41 100% 56% / .28);
}

.hero-category-shortcut.request-anything {
  border-color: hsl(41 100% 60% / .55);
}

.mobile-hero-category-menu {
  display: none;
}

.mobile-hero-category-menu summary {
  min-height: 3.25rem;
  border: 1px solid hsl(41 100% 60% / .5);
  border-radius: .85rem;
  padding: .35rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  color: #fff;
  background: linear-gradient(135deg, hsl(222 92% 22% / .95), hsl(216 96% 42% / .86));
  box-shadow: 0 16px 34px hsl(222 92% 15% / .28);
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.mobile-hero-category-menu summary::-webkit-details-marker {
  display: none;
}

.mobile-hero-category-menu summary::after {
  content: "⌄";
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: hsl(225 95% 10%);
  background: linear-gradient(135deg, #f2a900, #ffe16a);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform .2s ease;
}

.mobile-hero-category-menu[open] summary::after {
  transform: rotate(180deg);
}

.mobile-hero-category-menu summary span,
.mobile-hero-category-menu summary b {
  display: block;
}

.mobile-hero-category-menu summary b {
  color: hsl(41 100% 70%);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mobile-hero-category-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin-top: .7rem;
  padding: .75rem;
  border: 1px solid hsl(216 96% 55% / .28);
  border-radius: 1rem;
  background: hsl(225 95% 8% / .72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 46px hsl(225 95% 8% / .32);
}

.mobile-hero-category-option {
  min-height: 2.75rem;
  border: 1px solid hsl(216 96% 55% / .36);
  border-radius: .75rem;
  padding: 0 .65rem;
  color: #fff;
  background: hsl(216 96% 43% / .78);
  font-size: .82rem;
  font-weight: 900;
  text-align: center;
}

.mobile-hero-category-option:hover,
.mobile-hero-category-option.active {
  color: hsl(225 95% 10%);
  border-color: hsl(41 100% 60% / .95);
  background: linear-gradient(135deg, #f2a900, #ffe16a);
}

.mobile-hero-category-option.request-anything {
  grid-column: 1 / -1;
}

.shalom-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(circle at 50% 38%, #123f91 0%, #03133d 48%, #010616 100%);
  opacity: 1;
  transition: opacity .7s ease, visibility .7s ease;
}

.shalom-intro.is-hiding {
  opacity: 0;
  visibility: hidden;
}

.shalom-intro__bg {
  position: absolute;
  inset: -4%;
  background: url("/assets/shalombrandlogo-v2.png?v=20260828-hero-fit") center / contain no-repeat;
  opacity: .42;
  filter: saturate(1.25) contrast(1.08);
  animation: introPan 5.2s ease-in-out forwards;
}

.shalom-intro__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#f9c6381f 1px, transparent 1px), linear-gradient(90deg, #f9c6381a 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle, #000 0%, transparent 72%);
  animation: introGrid 4.2s linear infinite;
}

.shalom-intro__route {
  position: absolute;
  width: min(72vw, 920px);
  height: min(38vw, 360px);
  border-top: 4px solid #ffbf24;
  border-radius: 50%;
  transform: rotate(-10deg);
  box-shadow: 0 -12px 32px #ffbf2440;
  animation: routeDraw 2.4s cubic-bezier(.2,.85,.2,1) both;
}

.shalom-intro__route:before,
.shalom-intro__route:after {
  content: "";
  position: absolute;
  top: -10px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ffbf24;
  box-shadow: 0 0 28px #ffbf24;
}

.shalom-intro__route:before { left: 8%; }
.shalom-intro__route:after { right: 8%; }

.shalom-intro__content {
  position: relative;
  z-index: 2;
  width: min(760px, 88vw);
  text-align: center;
  transform: translateY(18px);
  animation: introRise 1.1s .35s ease forwards;
  opacity: 0;
}

.shalom-intro__logo {
  width: min(520px, 84vw);
  margin: 0 auto 22px;
  filter: drop-shadow(0 18px 34px #000a);
}

.shalom-intro__title {
  margin: 0;
  font: 800 clamp(22px, 4vw, 46px)/1.05 Outfit, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.shalom-intro__copy {
  margin: 14px auto 26px;
  max-width: 560px;
  color: #dce8ff;
}

.shalom-intro__bar {
  width: min(440px, 72vw);
  height: 6px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 999px;
  background: #ffffff24;
}

.shalom-intro__bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #0049c7, #ffbf24, #fff24d);
  animation: introLoad 6.5s ease forwards;
}

.shalom-intro__skip {
  position: absolute;
  right: 24px;
  bottom: 22px;
  z-index: 3;
  color: #fff;
  border: 1px solid #ffffff40;
  border-radius: 999px;
  padding: 10px 16px;
  background: #ffffff1c;
  font-weight: 700;
}

.shalom-intro--real {
  background: #020817;
}

.shalom-intro__real-bg {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
  transform: scale(1.08);
  animation: realIntroPush 6.5s cubic-bezier(.2,.8,.2,1) forwards;
}

.shalom-intro__real-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.06);
}

.shalom-intro__real-bg img:first-child {
  grid-row: 1 / 3;
}

.shalom-intro__real-bg img:nth-child(2) {
  animation: realPanelReveal 5s ease forwards;
}

.shalom-intro__real-bg img:nth-child(3) {
  animation: realPanelReveal 5s ease .35s forwards;
}

.shalom-intro__film {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #020817f2 0%, #051746cc 38%, #04102e72 68%, #020817d9 100%),
    linear-gradient(0deg, #020817e8 0%, transparent 36%, #0208178c 100%);
}

.shalom-intro__real-lanes {
  position: absolute;
  inset: auto -12vw 10vh 12vw;
  height: 24vh;
  transform: skewY(-8deg);
  opacity: .84;
}

.shalom-intro__real-lanes span {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ffbf24, #0d7cf3, transparent);
  box-shadow: 0 0 24px #ffbf2452;
  animation: realLaneRun 2.2s linear infinite;
}

.shalom-intro__real-lanes span:nth-child(1) { top: 18%; animation-delay: 0s; }
.shalom-intro__real-lanes span:nth-child(2) { top: 48%; animation-delay: -.7s; }
.shalom-intro__real-lanes span:nth-child(3) { top: 78%; animation-delay: -1.3s; }

.shalom-intro__real-card {
  position: relative;
  z-index: 2;
  width: min(720px, 88vw);
  margin-right: auto;
  margin-left: clamp(22px, 7vw, 104px);
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid #ffffff24;
  border-radius: 24px;
  background: linear-gradient(135deg, #061333d9, #063b9fd1 58%, #a8740fbd);
  box-shadow: 0 28px 90px #000b, inset 0 0 0 1px #ffffff14;
  backdrop-filter: blur(10px);
  transform: translateY(18px);
  opacity: 0;
  animation: introRise 1.1s .3s ease forwards;
}

.shalom-intro__real-card .shalom-intro__logo {
  width: min(340px, 75vw);
  margin: 0 0 14px;
}

.shalom-intro__eyebrow {
  display: inline-flex;
  margin-bottom: 10px;
  color: #ffdf6b;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
}

.shalom-intro__real-card .shalom-intro__copy {
  margin-left: 0;
  margin-right: 0;
}

.shalom-intro__real-stops {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  color: #fff;
  font-size: 13px;
  font-weight: 850;
}

.shalom-intro__real-stops i {
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0d7cf3, #ffbf24);
}

.shalom-intro--real .shalom-intro__bar {
  margin-left: 0;
}

@keyframes realIntroPush {
  0% { transform: scale(1.16); filter: blur(4px); }
  18% { filter: blur(0); }
  100% { transform: scale(1.04); filter: blur(0); }
}

@keyframes realPanelReveal {
  0% { opacity: 0; transform: translateX(28px); }
  24%, 100% { opacity: 1; transform: translateX(0); }
}

@keyframes realLaneRun {
  from { transform: translateX(-16%); }
  to { transform: translateX(16%); }
}

@media (max-width: 720px) {
  .shalom-intro__real-bg {
    grid-template-columns: 1fr;
    grid-template-rows: 58% 42%;
  }

  .shalom-intro__real-bg img:first-child {
    grid-row: auto;
  }

  .shalom-intro__real-bg img:nth-child(3) {
    display: none;
  }

  .shalom-intro__real-card {
    width: calc(100vw - 28px);
    margin: auto 14px 74px;
    padding: 22px;
    align-self: end;
  }

  .shalom-intro__real-stops {
    gap: 7px;
    font-size: 12px;
  }

  .shalom-intro__real-stops i {
    width: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shalom-intro__real-bg,
  .shalom-intro__real-bg img,
  .shalom-intro__real-lanes span,
  .shalom-intro__real-card {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

.shalom-intro--map {
  background:
    radial-gradient(circle at 25% 18%, #ffbf2430, transparent 22rem),
    radial-gradient(circle at 72% 22%, #0d7cf33a, transparent 24rem),
    linear-gradient(135deg, #020817 0%, #06194d 48%, #0c2e74 100%);
}

.shalom-intro--map .shalom-intro__content {
  position: absolute;
  left: clamp(18px, 5vw, 72px);
  bottom: clamp(28px, 6vw, 70px);
  width: min(430px, 88vw);
  text-align: left;
}

.shalom-intro--map .shalom-intro__logo {
  width: min(320px, 78vw);
  margin: 0 0 16px;
}

.shalom-intro--map .shalom-intro__bar {
  margin-left: 0;
}

.shalom-intro__map {
  position: absolute;
  inset: clamp(76px, 10vw, 118px) clamp(18px, 7vw, 104px) clamp(168px, 19vw, 220px);
  overflow: hidden;
  border: 1px solid #ffbf2447;
  border-radius: 26px;
  background:
    radial-gradient(circle at 44% 76%, #ffbf241f 0 34px, transparent 35px),
    radial-gradient(circle at 77% 24%, #0d7cf330 0 42px, transparent 43px),
    linear-gradient(135deg, #061233e8, #082a63d9 58%, #8a640c42);
  box-shadow: 0 24px 90px #0009, inset 0 0 70px #0f7cff20;
}

.shalom-intro__map:before,
.shalom-intro__map:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.shalom-intro__map:before {
  background-image:
    linear-gradient(#ffffff10 1px, transparent 1px),
    linear-gradient(90deg, #ffffff10 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 58% 44%, #000 0 56%, transparent 78%);
}

.shalom-intro__map:after {
  border-radius: inherit;
  box-shadow: inset 0 0 90px #00102f, inset 0 0 0 1px #ffffff12;
}

.shalom-intro__map-shape {
  display: none;
}

.shalom-intro__route-line {
  display: none;
}

.shalom-intro__map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.shalom-map-country {
  fill: url(#shalom-land);
  stroke: #7cc6ff;
  stroke-width: 4;
  filter: drop-shadow(0 0 17px #55b9ff80);
}

.shalom-map-country.zambia {
  animation: mapPulse 2.4s ease-in-out infinite alternate;
}

.shalom-map-border,
.shalom-map-river {
  fill: none;
  stroke: #9bd5ff88;
  stroke-width: 2;
  stroke-dasharray: 8 9;
}

.shalom-map-route-shadow,
.shalom-map-route {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shalom-map-route-shadow {
  stroke: #061333;
  stroke-width: 18;
  opacity: .78;
}

.shalom-map-route {
  stroke: url(#shalom-route);
  stroke-width: 8;
  filter: url(#shalom-glow);
  stroke-dasharray: 980;
  stroke-dashoffset: 980;
  animation: svgRouteDraw 5.8s cubic-bezier(.2,.85,.2,1) .25s forwards;
}

.shalom-map-label,
.shalom-map-city {
  fill: #e8f2ff;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: .08em;
  paint-order: stroke;
  stroke: #061333;
  stroke-width: 6px;
}

.shalom-map-label {
  font-size: 26px;
}

.shalom-map-city {
  fill: #ffe071;
  font-size: 17px;
  letter-spacing: .04em;
}

.shalom-map-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  animation: pinDrop .45s ease forwards;
  animation-delay: var(--delay);
}

.shalom-map-pin i {
  display: block;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #ffbf24;
  box-shadow: 0 0 0 5px #ffbf2426, 0 0 18px #ffbf24;
}

.shalom-map-pin.hub i {
  width: 18px;
  height: 18px;
  background: #ff4d1f;
  box-shadow: 0 0 0 7px #ff4d1f26, 0 0 24px #ffbf24;
}

.shalom-map-pin b {
  position: absolute;
  left: 15px;
  top: -7px;
  padding: 3px 6px;
  border-radius: 6px;
  color: #fff;
  background: #04143dcc;
  border: 1px solid #ffffff30;
  font-size: clamp(8px, .75vw, 11px);
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 20px #0007;
}

.shalom-map-pin.hub b {
  color: #ffe071;
  font-weight: 900;
}

@keyframes pinDrop {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes introPan {
  0% { transform: scale(1.18) translateY(3%); opacity: 0; }
  18% { opacity: .42; }
  100% { transform: scale(1) translateY(0); opacity: .42; }
}

@keyframes introGrid {
  to { background-position: 72px 72px; }
}

@keyframes routeDraw {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes svgRouteDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes mapPulse {
  to { filter: drop-shadow(0 0 27px #ffbf2490); }
}

@keyframes introRise {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes introLoad {
  to { width: 100%; }
}

.bg-primary,
.hover\:bg-primary\/90:hover {
  background-image: linear-gradient(135deg, hsl(222 92% 31%), hsl(216 96% 43%)) !important;
}

.hover\:bg-primary:hover,
.group:hover .group-hover\:bg-primary {
  background-image: linear-gradient(135deg, hsl(222 92% 31%), hsl(41 100% 50%)) !important;
}

.text-primary,
.hover\:text-primary:hover,
.group:hover .group-hover\:text-primary {
  color: hsl(222 92% 31%) !important;
}

.border-primary\/50,
.hover\:border-primary\/50:hover {
  border-color: hsl(41 100% 56% / .62) !important;
}

.route-card {
  background: linear-gradient(180deg, hsl(0 0% 100% / .92), hsl(216 55% 98% / .84));
}

.route-card:before {
  background: linear-gradient(135deg, hsl(222 92% 31% / .11), hsl(41 100% 56% / .14) 52%, transparent);
}

footer,
.bg-secondary\/30 {
  background-color: hsl(216 42% 96% / .78) !important;
}

section#home img[src*="shalombrandlogo"] {
  opacity: .55 !important;
  filter: saturate(.86) contrast(.9) brightness(.82) !important;
}

section#home img[src*="shalombrandlogo"] + div.absolute.inset-0 {
  background:
    linear-gradient(90deg, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .34) 30%, transparent 62%, transparent 100%) !important;
}

@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
    scroll-padding-top: 5.25rem;
  }

  nav.fixed .container {
    min-height: 4.45rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  nav.fixed a.flex.items-center.group {
    min-width: auto;
  }

  nav.fixed a.flex.items-center.group::after {
    display: none !important;
  }

  nav.fixed img {
    height: 3.35rem !important;
    max-width: 12rem !important;
  }

  section#home {
    min-height: auto !important;
    padding-top: 5.4rem;
    padding-bottom: 1.1rem;
    align-items: start !important;
  }

  section#home .absolute.inset-x-0.top-16.bottom-0 {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 0 .75rem;
  }

  section#home .absolute.inset-x-0.top-16.bottom-0 > div {
    width: 100% !important;
    height: auto !important;
    min-height: calc(100svh - 6.5rem);
    border-radius: 1.15rem !important;
    overflow: hidden;
  }

  section#home img[alt="Luxury coach bus on highway"],
  section#home img[src*="shalombrandlogo"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    opacity: .42 !important;
  }

  section#home img[src*="shalombrandlogo"] + div.absolute.inset-0,
  section#home .bg-gray-900\/45 {
    background:
      linear-gradient(180deg, rgb(1 8 28 / .58) 0%, rgb(1 8 28 / .7) 42%, rgb(1 8 28 / .86) 100%),
      linear-gradient(90deg, rgb(0 0 0 / .48), transparent 78%) !important;
  }

  section#home .bg-gray-900\/45 {
    align-items: center !important;
    padding: 1.25rem !important;
  }

  section#home h1 {
    max-width: 100% !important;
    font-size: clamp(2.25rem, 12vw, 3.45rem) !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
  }

  section#home p {
    max-width: 100% !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  section#home .flex.flex-wrap {
    width: 100%;
    gap: .65rem !important;
  }

  .hero-category-shortcut {
    display: none;
  }

  .mobile-hero-category-menu {
    display: block;
    width: 100%;
    flex: 1 1 100%;
  }

  section#home .flex.flex-wrap > a {
    flex: 1 1 100%;
    justify-content: center;
  }

  section#home .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
    margin-top: 1.15rem !important;
    padding-top: 1rem !important;
  }

  .section-padding {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media (max-width: 420px) {
  nav.fixed .container {
    min-height: 4.15rem;
  }

  nav.fixed a.flex.items-center.group::after {
    display: none !important;
  }

  section#home {
    padding-top: 5rem;
  }

  section#home .absolute.inset-x-0.top-16.bottom-0 > div {
    min-height: calc(100svh - 5.9rem);
  }

  section#home h1 {
    font-size: clamp(2rem, 13vw, 2.95rem) !important;
  }

  .hero-category-shortcut {
    flex-basis: 100%;
  }

  .mobile-hero-category-panel {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) {
  #features .grid.md\:grid-cols-2 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  #features .route-card {
    min-height: 16rem;
    padding: 1.15rem !important;
  }

  #features .route-card h3 {
    font-size: 1.05rem !important;
    line-height: 1.18 !important;
  }

  #features .route-card p {
    font-size: .92rem !important;
    line-height: 1.45 !important;
  }
}