:root {
  --green: #0b5d4b;
  --green-dark: #063c32;
  --champagne: #d9b66f;
  --ink: #14251d;
  --muted: #5e6d65;
  --soft: #f3f7f4;
  --white: #fff;
  --line: #dce7df;
  --shadow: 0 18px 50px rgba(10, 58, 34, 0.12);
  --radius: 22px;
  --container: 1180px;
  --font: 'Noto Sans Devanagari', sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.7;
  background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.28 !important;
  padding-top: 0.08em;
  overflow: visible;
}
body.menu-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
.container {
  width: min(var(--container), calc(100% - 40px));
  margin: auto;
}
.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  background: var(--green-dark);
  color: #fff;
  padding: 12px 18px;
  z-index: 200;
}
.skip-link:focus {
  top: 12px;
}
.topbar {
  background: var(--green-dark);
  color: #dceae2;
  font-size: 0.83rem;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 38px;
}
.topbar a {
  margin-left: 20px;
  color: #fff;
}
.site-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: 0.25s;
}
.site-header.scrolled {
  box-shadow: 0 8px 30px rgba(10, 58, 34, 0.09);
  border-color: var(--line);
}
.nav-wrap {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  gap: 11px;
  align-items: center;
  line-height: 1.15;
}
.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--green);
  color: #fff;
  font-size: 1.55rem;
  font-weight: 800;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.16);
}
.brand strong {
  display: block;
  color: var(--green-dark);
  font-size: 1.25rem;
}
.brand small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-weight: 600;
}
.main-nav a {
  position: relative;
}
.main-nav a:not(.nav-cta):after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -8px;
  height: 2px;
  background: var(--champagne);
  transition: 0.25s;
}
.main-nav a:hover:after,
.main-nav a[aria-current='page']:after {
  right: 0;
}
.nav-cta {
  background: var(--champagne);
  color: #063c32;
  padding: 11px 18px;
  border-radius: 12px;
}
.menu-toggle {
  display: none;
  background: none;
  border: 0;
}
.hero {
  min-height: 700px;
  display: grid;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, #f2f8f4 0%, #fff 57%, #e8f4ed 100%);
}
.hero:after {
  content: '';
  position: absolute;
  right: -5%;
  bottom: -22%;
  width: 50%;
  height: 78%;
  background: var(--green);
  border-radius: 50% 0 0 0;
  opacity: 0.06;
}
.hero-grid,
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 70px;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.eyebrow:before {
  content: '';
  width: 28px;
  height: 3px;
  background: var(--champagne);
  border-radius: 9px;
}
.hero h1 {
  font-size: clamp(2.35rem, 5vw, 4.35rem);
  line-height: 1.18;
  margin: 20px 0;
  color: var(--green-dark);
  letter-spacing: -0.025em;
}
.hero h1 span {
  color: var(--champagne);
}
.lead {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 680px;
}
.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 0;
  border-radius: 13px;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #d9b66f;
  outline-offset: 3px;
}
.btn-primary {
  background: var(--champagne);
  color: #063c32;
  box-shadow: 0 12px 25px rgba(217, 182, 111, 0.24);
}
.btn-whatsapp {
  background: #148c4a;
  color: #fff;
}
.btn-outline {
  border: 1px solid var(--green);
  color: var(--green);
  background: #fff;
}
.btn-light {
  background: #fff;
  color: var(--green-dark);
}
.hero-visual {
  position: relative;
}
.hero-image,
.feature-image {
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin: 0;
}
.hero-image img,
.feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-image {
  aspect-ratio: 4/3;
  transform: rotate(1.5deg);
}
.hero-badge {
  position: absolute;
  left: -30px;
  bottom: 25px;
  background: #fff;
  border-radius: 17px;
  padding: 16px 20px;
  box-shadow: var(--shadow);
  font-weight: 800;
}
.trust-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 28px;
  color: var(--green-dark);
  font-weight: 700;
  font-size: 0.9rem;
}
.trust-row span:before {
  content: '✓';
  color: var(--champagne);
  margin-right: 7px;
}
.section {
  padding: 96px 0;
}
.soft {
  background: var(--soft);
}
.section-head {
  max-width: 720px;
  margin: 0 auto 42px;
  text-align: center;
}
.section h2,
.final-cta h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.65rem);
  line-height: 1.3;
  color: var(--green-dark);
  margin: 12px 0;
}
.service-grid,
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card,
.info-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: 0.3s;
}
.service-card:hover,
.hover-lift:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow);
}
.service-card figure {
  margin: 0;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.service-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.service-card:hover img {
  transform: scale(1.055);
}
.card-body {
  padding: 24px;
}
.card-body h3,
.info-card h3 {
  font-size: 1.25rem;
  color: var(--green-dark);
  margin: 0 0 9px;
}
.card-icon {
  display: inline-grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border: 1px solid rgba(11, 93, 75, 0.1);
  border-radius: 15px;
  background: #e7f2ee;
  color: #0b5d4b;
  transition: transform 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}
.card-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.info-card:hover .card-icon,
.service-card:hover .card-icon {
  transform: translateY(-2px) rotate(-2deg);
  background: #d9b66f;
  color: #063c32;
}
.card-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.card-heading-row .card-number {
  margin: 0 0 0 auto;
}
.icon-info-card > .card-icon {
  margin-bottom: 20px;
}
.icon-info-card h3 {
  margin-top: 0;
}
.card-body > .card-icon {
  margin: 12px 0 14px;
}
.image-info-card-body > .card-icon {
  margin-bottom: 14px;
}
.card-body p,
.info-card p {
  color: var(--muted);
  margin: 0 0 15px;
}
.text-link {
  color: var(--champagne);
  font-weight: 800;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat {
  background: #fff;
  padding: 30px;
  text-align: center;
}
.stat strong {
  display: block;
  font: 700 1.55rem Poppins;
  color: var(--green);
}
.timeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  list-style: none;
  padding: 0;
  margin: 50px 0 0;
  position: relative;
}
.timeline:before {
  content: '';
  position: absolute;
  left: 7%;
  right: 7%;
  top: 22px;
  height: 3px;
  background: linear-gradient(90deg, var(--champagne), var(--green));
}
.timeline li {
  position: relative;
  text-align: center;
  padding: 0 10px;
}
.timeline li span,
.card-number {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font: 700 0.9rem Poppins;
  z-index: 1;
}
.timeline strong {
  display: block;
  line-height: 1.45;
}
.night {
  background: #061b11;
  color: #e8f5ed;
  position: relative;
  overflow: hidden;
}
.night:after {
  content: '';
  position: absolute;
  width: 70%;
  height: 4px;
  left: 15%;
  bottom: 18%;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  filter: blur(2px);
  opacity: 0.35;
}
.night h2 {
  color: #fff;
}
.night .eyebrow {
  color: #9de5b9;
}
.page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--green-dark), var(--green));
  color: #fff;
  padding: 82px 0 126px;
}
.page-hero:after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.12), transparent 32%);
}
.hero-driving-scene,
.hero-driving-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-driving-scene {
  z-index: 0;
  display: block;
}
.hero-driving-shade {
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(3, 32, 27, 0.88) 0%,
    rgba(6, 60, 50, 0.64) 52%,
    rgba(6, 60, 50, 0.16) 100%
  );
  pointer-events: none;
}
.page-hero .container {
  position: relative;
  z-index: 2;
}
.page-hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.8rem);
  line-height: 1.25;
  margin: 22px 0 10px;
  max-width: 900px;
}
.page-hero p {
  font-size: 1.1rem;
  max-width: 720px;
  color: #d8ebe1;
}
.breadcrumbs {
  display: flex;
  gap: 9px;
  font-size: 0.88rem;
}
.breadcrumbs a {
  text-decoration: underline;
}
.hero-highway {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 145px;
  overflow: hidden;
  perspective: 520px;
  pointer-events: none;
}
.highway-horizon {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 440px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(242, 214, 135, 0.52),
    rgba(217, 182, 111, 0.12) 48%,
    transparent 72%
  );
  filter: blur(14px);
  transform: translateX(-50%);
}
.highway-surface {
  position: absolute;
  top: 8px;
  bottom: -48px;
  left: 50%;
  width: min(1180px, 94vw);
  border-right: 7px solid #d9b66f;
  border-left: 7px solid #d9b66f;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 18% 82%, rgba(255, 255, 255, 0.1)),
    repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 16px),
    #172622;
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  box-shadow:
    0 -9px 26px rgba(2, 23, 19, 0.35),
    inset 0 20px 35px rgba(255, 255, 255, 0.025);
  transform: translateX(-50%);
}
.highway-speed-glow {
  position: absolute;
  right: 8%;
  bottom: 0;
  left: 8%;
  height: 68px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 8%,
    rgba(217, 182, 111, 0.12) 8.5%,
    transparent 9.5% 17%
  );
  filter: blur(6px);
  opacity: 0.7;
  animation: highwayGlow 1.4s linear infinite;
}
.highway-rail {
  position: absolute;
  z-index: 2;
  top: 16px;
  bottom: -20px;
  width: 5px;
  border-radius: 4px;
  background: linear-gradient(#f8f7f2, #879b94 60%, #d9b66f);
  box-shadow:
    0 0 0 2px rgba(6, 60, 50, 0.45),
    0 5px 12px rgba(0, 0, 0, 0.35);
  transform-origin: top;
}
.highway-rail-left {
  left: 46%;
  transform: rotate(66deg);
}
.highway-rail-right {
  right: 46%;
  transform: rotate(-66deg);
}
.highway-surface::before,
.highway-surface::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(255, 255, 255, 0.8);
}
.highway-surface::before {
  left: 7%;
}
.highway-surface::after {
  right: 7%;
}
.highway-lane {
  position: absolute;
  top: -140%;
  bottom: -50%;
  width: 4px;
  background: repeating-linear-gradient(180deg, #f2d687 0 24px, transparent 24px 55px);
  transform-origin: center bottom;
  animation: highwayRush 1.15s linear infinite;
}
.highway-reflectors {
  position: absolute;
  top: -80%;
  bottom: -30%;
  width: 5px;
  background: repeating-linear-gradient(180deg, #f8f7f2 0 5px, transparent 5px 28px);
  filter: drop-shadow(0 0 4px rgba(242, 214, 135, 0.9));
  animation: highwayRush 0.9s linear infinite;
}
.highway-reflectors-left {
  left: 9%;
}
.highway-reflectors-right {
  right: 9%;
}
.highway-lane-left {
  left: 33.333%;
}
.highway-lane-centre {
  left: 50%;
}
.highway-lane-right {
  left: 66.666%;
}
.highway-car {
  position: absolute;
  z-index: 3;
  bottom: 16px;
  left: 50%;
  width: 72px;
  filter: drop-shadow(0 12px 8px rgba(0, 0, 0, 0.42));
  animation: highwayCarDrive 5.2s ease-in infinite;
}
.highway-car svg {
  display: block;
  width: 100%;
}
.car-body {
  fill: #d9b66f;
  stroke: #063c32;
  stroke-width: 2;
}
.car-glass {
  fill: #16302b;
  stroke: rgba(248, 247, 242, 0.42);
  stroke-width: 1;
}
.car-trim {
  fill: none;
  stroke: rgba(248, 247, 242, 0.38);
  stroke-width: 1.2;
}
.car-plate {
  fill: #f8f7f2;
}
.car-light {
  fill: #f6df8f;
  filter: drop-shadow(0 0 5px #f2d687);
}
.car-road-shadow {
  position: absolute;
  z-index: -1;
  right: 4%;
  bottom: -5px;
  left: 4%;
  height: 15px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.58);
  filter: blur(6px);
}
.car-wheel {
  fill: #101916;
}
@keyframes highwayRush {
  to {
    background-position-y: 110px;
  }
}
@keyframes highwayGlow {
  to {
    transform: translateX(9%);
  }
}
@keyframes highwayCarDrive {
  0% {
    bottom: 98px;
    opacity: 0;
    transform: translateX(-50%) scale(0.18);
  }
  12% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  100% {
    bottom: -42px;
    opacity: 0;
    transform: translateX(-50%) scale(1.25);
  }
}
@media (prefers-reduced-motion: reduce) {
  .highway-lane,
  .highway-reflectors,
  .highway-speed-glow {
    animation: none;
  }
  .highway-car {
    bottom: 10px;
    opacity: 1;
    animation: none;
    transform: translateX(-50%) scale(0.72);
  }
}

/* Authentic client media additions */
.client-feature-portrait img {
  object-position: center 28%;
}
.client-video-section {
  padding-top: 32px;
}
.client-video-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  padding: 26px;
  border: 1px solid rgba(11, 93, 75, 0.18);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f7faf8, #e8f2ed);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.client-video-copy h2 {
  margin: 0;
  color: var(--green-dark);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
}
.client-video-card video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius) - 6px);
  background: transparent;
  object-fit: cover;
  box-shadow: 0 14px 34px rgba(6, 60, 50, 0.2);
}
.gallery-item img,
.story-tile img,
.service-image-row img,
.feature-image img,
.why-image img {
  transition: transform 0.45s ease, filter 0.45s ease;
}
.gallery-item:hover img,
.story-tile:hover img,
.service-image-row figure:hover img {
  transform: scale(1.035);
}
@media (max-width: 700px) {
  .client-video-section {
    padding-top: 18px;
  }
  .client-video-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
  .client-video-card video {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}
.feature-image {
  aspect-ratio: 4/3;
}
.check-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
}
.check-list li {
  padding-left: 30px;
  position: relative;
}
.check-list li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--champagne);
  font-weight: 900;
}
.info-card {
  padding: 28px;
}
.info-card .card-number {
  margin: 0 0 18px;
}
.contact-card {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 55px;
  align-items: start;
}
.compact-form,
.contact-panel {
  background: #fff;
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-grid label {
  display: grid;
  gap: 7px;
  font-weight: 700;
  font-size: 0.9rem;
}
.form-grid .full {
  grid-column: 1/-1;
}
.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  border: 1px solid #bccbc2;
  background: #fff;
  border-radius: 12px;
  padding: 13px 14px;
  color: var(--ink);
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(17, 94, 56, 0.09);
  outline: 0;
}
.hp {
  position: absolute;
  left: -9999px;
}
.form-status {
  display: none;
  margin: 16px 0;
  padding: 14px;
  border-radius: 11px;
}
.form-status.success {
  display: block;
  background: #e7f7ed;
  color: #07552b;
}
.form-status.error {
  display: block;
  background: #f8eee2;
  color: #78542a;
}
.submit-btn[disabled] {
  opacity: 0.65;
  cursor: wait;
}
.enquiry-form .submit-btn {
  min-width: 190px;
  margin-top: 22px;
  align-self: flex-start;
}
.enquiry-form textarea {
  display: block;
  resize: vertical;
}
.related-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.related-links a {
  border: 1px solid var(--line);
  padding: 10px 15px;
  border-radius: 999px;
  font-weight: 700;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gallery-item {
  border: 0;
  background: none;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.gallery-item:nth-child(3n + 1) {
  grid-row: span 2;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  transition: 0.4s;
}
.gallery-item:hover img {
  transform: scale(1.05);
}
.gallery-item span {
  position: absolute;
  inset: auto 0 0;
  padding: 28px 15px 12px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  text-align: left;
}
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 300;
  display: none;
  place-items: center;
  padding: 40px;
}
.lightbox.open {
  display: grid;
}
.lightbox img {
  max-height: 80vh;
  border-radius: 14px;
}
.lightbox button {
  position: absolute;
  top: 20px;
  right: 25px;
  border: 0;
  background: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.4rem;
}
.faq-list {
  max-width: 850px;
  margin: auto;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-button {
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  padding: 23px 4px;
  font-weight: 800;
  color: var(--green-dark);
  display: flex;
  justify-content: space-between;
}
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s;
}
.faq-answer > div {
  overflow: hidden;
}
.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}
.faq-answer p {
  padding: 0 4px 22px;
  margin: 0;
  color: var(--muted);
}
.map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.map-wrap iframe {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
}
.branch-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.branch-tab[aria-selected='true'] {
  background: var(--green);
  color: #fff;
}
.branch-address {
  display: none;
}
.branch-address.active {
  display: block;
}
.final-cta {
  background: var(--champagne);
  color: #063c32;
  padding: 58px 0;
}
.final-cta .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.final-cta h2 {
  color: #fff;
  max-width: 770px;
  margin-bottom: 0;
}
.final-cta .eyebrow {
  color: #fff;
}
.final-cta .eyebrow:before {
  background: #fff;
}
footer {
  background: #061b11;
  color: #c9d8d0;
  padding: 70px 0 22px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.9fr 1.3fr;
  gap: 45px;
}
.footer-grid h3 {
  color: #fff;
}
.footer-grid a {
  display: block;
  margin: 9px 0;
}
.footer-brand strong {
  color: #fff;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 45px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}
.floating-wa {
  position: fixed;
  right: 24px;
  bottom: 25px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #148c4a;
  color: #fff;
  display: grid;
  place-items: center;
  font: 700 1.3rem Poppins;
  z-index: 90;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  animation: pulse 2.6s infinite;
}
.mobile-actions {
  display: none;
}
.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.scale-in,
.stagger-item {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}
.reveal-left {
  transform: translateX(-30px);
}
.reveal-right {
  transform: translateX(30px);
}
.scale-in {
  transform: scale(0.96);
}
.is-visible {
  opacity: 1;
  transform: none;
}
.stagger-item:nth-child(2) {
  transition-delay: 0.08s;
}
.stagger-item:nth-child(3) {
  transition-delay: 0.16s;
}
.stagger-item:nth-child(4) {
  transition-delay: 0.24s;
}
@keyframes road {
  to {
    transform: translateX(118px);
  }
}
@keyframes pulse {
  50% {
    box-shadow: 0 0 0 11px rgba(20, 140, 74, 0.13);
  }
}
@media (max-width: 900px) {
  body {
    padding-top: 72px;
  }
  .site-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
  }
  .topbar span {
    display: none;
  }
  .topbar .container {
    justify-content: center;
  }
  .nav-wrap {
    height: 72px;
  }
  .menu-toggle {
    position: relative;
    z-index: 1002;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 4px;
    min-width: 48px;
    min-height: 48px;
    justify-content: center;
    cursor: pointer;
  }
  .menu-toggle span {
    width: 25px;
    height: 2px;
    background: var(--green-dark);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .menu-toggle b {
    font-size: 0.7rem;
  }
  .main-nav {
    position: absolute;
    z-index: 1001;
    top: 100%;
    right: 0;
    left: 0;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    padding: 24px 28px 35px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    transform: translateY(-18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
    box-shadow: var(--shadow);
  }
  .main-nav.open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .menu-toggle[aria-expanded='true'] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .menu-toggle[aria-expanded='true'] span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle[aria-expanded='true'] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  .main-nav a {
    padding: 11px;
  }
  .hero {
    min-height: auto;
    padding: 70px 0;
  }
  .hero-grid,
  .split,
  .contact-card {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .hero-visual {
    max-width: 650px;
  }
  .service-grid,
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .timeline {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .timeline:before {
    left: 22px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 3px;
    height: auto;
  }
  .timeline li {
    display: flex;
    align-items: center;
    gap: 18px;
    text-align: left;
    padding: 0 0 24px;
  }
  .timeline li span {
    margin: 0;
    flex: none;
  }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .final-cta .container {
    align-items: flex-start;
    flex-direction: column;
  }
  .floating-wa {
    display: none;
  }
  .mobile-actions {
    position: fixed;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    z-index: 120;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.1);
  }
  .mobile-actions a {
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    color: var(--green-dark);
  }
  .mobile-actions span {
    font-size: 0.67rem;
    font-weight: 700;
  }
  body {
    padding-bottom: 68px;
  }
}
@media (max-width: 600px) {
  .container {
    width: min(100% - 28px, var(--container));
  }
  .topbar a {
    margin: 0 7px;
    font-size: 0.75rem;
  }
  .brand-mark {
    width: 42px;
    height: 42px;
  }
  .brand strong {
    font-size: 1.05rem;
  }
  .brand small {
    font-size: 0.68rem;
  }
  .section {
    padding: 68px 0;
  }
  .hero {
    padding: 52px 0;
  }
  .hero-grid {
    gap: 35px;
  }
  .hero h1 {
    font-size: 2.25rem;
  }
  .hero-badge {
    left: 10px;
    bottom: 10px;
  }
  .trust-row {
    gap: 10px;
    display: grid;
  }
  .service-grid,
  .feature-grid,
  .form-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .form-grid .full {
    grid-column: auto;
  }
  .enquiry-form .submit-btn {
    width: 100%;
    margin-top: 18px;
  }
  .stats {
    grid-template-columns: 1fr;
  }
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-item:nth-child(3n + 1) {
    grid-row: auto;
  }
  .page-hero {
    padding: 62px 0 98px;
  }
  .hero-highway {
    bottom: 0;
    height: 100px;
  }
  .highway-surface {
    width: 120vw;
  }
  .highway-car {
    width: 55px;
  }
  .highway-rail {
    display: none;
  }
  .compact-form,
  .contact-panel {
    padding: 22px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
  }
  .cta-row .btn {
    width: 100%;
  }
  .map-wrap iframe {
    height: 360px;
  }
}

/* Client preference: eyebrow labels are disabled site-wide. */
.eyebrow {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .reveal,
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .scale-in,
  .stagger-item {
    opacity: 1;
    transform: none;
  }
}

/* Premium emerald/champagne visual system */
body {
  background: #f8f7f2;
}
.site-header {
  background: rgba(248, 247, 242, 0.94);
}
.brand-mark {
  background: linear-gradient(145deg, #0b5d4b, #063c32);
  color: #d9b66f;
  border-radius: 50%;
}
.nav-cta,
.btn-primary {
  background: #d9b66f;
  color: #063c32;
  box-shadow: 0 14px 30px rgba(90, 69, 30, 0.18);
}
.btn-primary:hover,
.nav-cta:hover {
  background: #e5c989;
}
.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  background: rgba(6, 60, 50, 0.22);
}
.btn-champagne {
  background: #d9b66f;
  color: #063c32;
}
.text-link {
  color: #0b5d4b;
}
.eyebrow:before {
  background: #d9b66f;
}
.soft {
  background: #e7f2ee;
}
.final-cta {
  background: linear-gradient(115deg, #0b5d4b, #063c32);
}
.cinematic-hero {
  min-height: calc(100vh - 120px);
  background: #063c32;
  color: #fff;
  isolation: isolate;
}
.cinematic-hero:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(3, 32, 27, 0.98) 0%,
    rgba(6, 60, 50, 0.84) 45%,
    rgba(6, 60, 50, 0.24) 100%
  );
  z-index: -1;
}
.hero-backdrop {
  position: absolute;
  inset: 0;
  background: url('https://images.pexels.com/photos/25225803/pexels-photo-25225803.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=1900&h=1100')
    center/cover;
  z-index: -2;
  animation:
    heroReveal 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    cinematicMove 18s ease-in-out infinite alternate;
}
.cinematic-hero h1 {
  color: #fff;
  font-size: clamp(2.8rem, 5.8vw, 5.8rem);
  max-width: 880px;
}
.cinematic-hero .lead {
  color: #d8e9e2;
  max-width: 700px;
}
.champagne-text {
  color: #d9b66f !important;
}
.clip-line {
  display: block;
  clip-path: inset(0 100% 0 0);
  animation: clipReveal 0.9s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.clip-line + .clip-line {
  animation-delay: 0.45s;
}
.hero-copy .lead {
  opacity: 0;
  transform: translateY(18px);
  animation: copyIn 0.7s 0.75s forwards;
}
.hero-actions {
  opacity: 0;
  animation: copyIn 0.6s 1s forwards;
}
.hero-kicker {
  color: #d9b66f;
}
.cinematic-frame {
  border: 1px solid rgba(217, 182, 111, 0.5);
  transform: rotate(0);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.35);
}
.hero-badge {
  background: #f8f7f2;
  color: #063c32;
  border-left: 4px solid #d9b66f;
}
.hero-badge small,
.hero-badge strong {
  display: block;
}
.scroll-cue {
  position: absolute;
  bottom: 24px;
  left: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  z-index: 3;
}
.scroll-cue span {
  width: 1px;
  height: 34px;
  background: #d9b66f;
  margin-bottom: 7px;
  animation: scrollCue 1.6s infinite;
}
.hero-road {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, transparent 0 52px, #d9b66f 52px 104px);
  opacity: 0.55;
  animation: road 9s linear infinite;
}
.trust-band {
  background: #d9b66f;
  color: #063c32;
  padding: 17px 0;
  font-weight: 800;
}
.trust-band .container {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.trust-band i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #063c32;
}
.intro-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 100px;
  align-items: end;
}
.editorial-intro h2 {
  font-size: clamp(2.2rem, 4.6vw, 4.6rem);
  line-height: 1.18;
}
.editorial-intro em {
  color: #0b5d4b;
  font-style: normal;
}
.premium-services {
  grid-template-columns: repeat(12, 1fr);
}
.premium-services .service-card {
  grid-column: span 4;
  border: 0;
  box-shadow: 0 12px 40px rgba(6, 60, 50, 0.08);
}
.premium-services .service-card:nth-child(1),
.premium-services .service-card:nth-child(4) {
  grid-column: span 7;
}
.premium-services .service-card:nth-child(2),
.premium-services .service-card:nth-child(5) {
  grid-column: span 5;
}
.premium-services .service-card figure {
  aspect-ratio: 16/9;
  position: relative;
}
.premium-services .service-card:hover {
  transform: translateY(-10px) rotateX(1deg);
}
.premium-services .card-body small {
  color: #9a7836;
  font-weight: 800;
  text-transform: uppercase;
}
.premium-services .card-body b {
  display: block;
  color: #65756e;
  font-size: 0.78rem;
  margin-bottom: 16px;
}
.premium-services .text-link {
  display: flex;
  justify-content: space-between;
}
.premium-services .text-link i,
.btn i {
  font-style: normal;
  transition: transform 0.25s;
}
.premium-services .text-link:hover i,
.btn:hover i {
  transform: translateX(5px);
}
.image-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, rgba(6, 60, 50, 0.5));
  opacity: 0;
  transition: 0.35s;
}
.service-card:hover .image-wash {
  opacity: 1;
}
.why-section {
  background: #f8f7f2;
}
.why-image {
  margin: 32px 0 0;
  overflow: hidden;
  border-radius: 2px 80px 2px 2px;
}
.why-image img {
  aspect-ratio: 4/3;
  object-fit: cover;
}
.why-grid {
  grid-template-columns: repeat(2, 1fr);
}
.why-grid .info-card {
  border-left: 3px solid #d9b66f;
  border-radius: 2px 18px 18px 2px;
}
.safety-section {
  background: #063c32;
  color: #d7e7e0;
}
.safety-section h2 {
  color: #fff;
}
.safety-section .eyebrow {
  color: #d9b66f;
}
.safety-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.safety-card {
  padding: 26px 18px;
  border-top: 1px solid rgba(217, 182, 111, 0.5);
  background: rgba(255, 255, 255, 0.035);
}
.safety-card > span {
  font-size: 2rem;
  color: #d9b66f;
}
.safety-card h3 {
  color: #fff;
}
.safety-card p {
  font-size: 0.86rem;
  color: #b8cbc2;
}
.training-day {
  background: #e7f2ee;
}
.journey-scroll {
  list-style: none;
  display: flex;
  overflow-x: auto;
  padding: 20px 0 30px;
  margin: 0;
  scroll-snap-type: x mandatory;
}
.journey-scroll li {
  min-width: 210px;
  scroll-snap-align: start;
  position: relative;
  padding: 25px;
  border-top: 2px solid #d9b66f;
  background: #fff;
}
.journey-scroll li:not(:last-child):after {
  content: '→';
  position: absolute;
  right: -8px;
  color: #0b5d4b;
}
.journey-scroll span {
  font: 700 0.8rem Poppins;
  color: #9a7836;
  display: block;
  margin-bottom: 30px;
}
.editorial-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 230px;
  gap: 14px;
}
.story-tile {
  position: relative;
  overflow: hidden;
  margin: 0;
}
.story-tile:nth-child(1),
.story-tile:nth-child(6) {
  grid-column: span 2;
  grid-row: span 2;
}
.story-tile:nth-child(4) {
  grid-column: span 2;
}
.story-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}
.story-tile:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, rgba(3, 32, 27, 0.78));
}
.story-tile:hover img {
  transform: scale(1.06);
}
.story-tile figcaption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  color: #fff;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
}
.center-action {
  text-align: center;
  margin-top: 35px;
}
.video-section {
  background: #172a2a;
  color: #d6e2dd;
}
.video-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 60px;
  margin-bottom: 35px;
}
.video-heading h2 {
  color: #fff;
}
.video-heading p {
  max-width: 450px;
}
.video-poster {
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  border-radius: 40px;
  cursor: pointer;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.28);
}
.video-frame {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: #031f1b;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.28);
  aspect-ratio: 16 / 9;
}
.video-frame .video-poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  height: 100%;
  border-radius: inherit;
  box-shadow: none;
}
.video-frame .video-poster img {
  height: 100%;
}
.video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  border-radius: inherit;
}
.video-frame.is-playing .video-poster {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.video-poster img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  filter: brightness(0.62);
}
.play-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d9b66f;
  color: #063c32;
  font-size: 1.5rem;
  box-shadow: 0 0 0 18px rgba(217, 182, 111, 0.18);
  animation: playPulse 2.3s infinite;
}
.video-poster strong {
  position: absolute;
  left: 32px;
  bottom: 26px;
  color: #fff;
}
.video-highlights {
  display: flex;
  justify-content: center;
  gap: 45px;
  margin-top: 28px;
  color: #d9b66f;
}
.video-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(3, 25, 22, 0.92);
  z-index: 400;
  padding: 30px;
  place-items: center;
}
.video-modal.open {
  display: grid;
}
.video-dialog {
  position: relative;
  width: min(1000px, 100%);
  background: #f8f7f2;
  padding: 30px;
  border-radius: 24px;
}
.video-dialog video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: transparent;
  border-radius: 12px;
}
.video-close {
  position: absolute;
  right: 16px;
  top: 12px;
  border: 0;
  background: #d9b66f;
  color: #063c32;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1.5rem;
}
.video-slot-note {
  font-size: 0.85rem;
}
@media (max-width: 600px) {
  .video-modal {
    padding: 12px;
  }
  .video-dialog {
    width: min(100%, 390px);
    max-height: calc(100dvh - 24px);
    padding: 58px 18px 18px;
    overflow-y: auto;
    border-radius: 22px;
  }
  .video-dialog h2 {
    margin: 0 0 14px;
    font-size: 1.22rem;
    line-height: 1.35;
  }
  .video-dialog video {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: transparent;
    border-radius: 12px;
  }
}
.confidence-section {
  background: #f8f7f2;
}
.confidence-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  background: #fff;
  padding: 34px;
  border: 1px solid #d8e4de;
}
.confidence-card div {
  display: grid;
  gap: 10px;
}
.confidence-card small {
  color: #947130;
}
.confidence-card > span {
  font-size: 2rem;
  color: #d9b66f;
}
.photo-stack {
  position: relative;
  padding: 0 80px 80px 0;
}
.photo-stack img:first-child {
  border-radius: 80px 2px 2px 2px;
}
.photo-stack img:last-child {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 45%;
  border: 8px solid #f8f7f2;
}
.cinematic-night {
  background: #031813;
}
.cinematic-night .feature-image {
  border: 1px solid rgba(217, 182, 111, 0.4);
}
.light-trail {
  position: absolute;
  width: 70%;
  height: 200px;
  right: -10%;
  top: 15%;
  background: radial-gradient(ellipse, rgba(217, 182, 111, 0.22), transparent 65%);
  filter: blur(20px);
}
.contact-shortcuts {
  display: grid;
  gap: 12px;
  margin-top: 25px;
  color: #0b5d4b;
  font-weight: 800;
}
.form-status.error {
  background: #f4e8d7;
  color: #705126;
}
.form-status.success {
  border-left: 4px solid #d9b66f;
}
.final-cta {
  position: relative;
  overflow: hidden;
}
.final-cta:after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 45%;
  background: repeating-linear-gradient(
    110deg,
    transparent 0 50px,
    rgba(217, 182, 111, 0.1) 50px 54px
  );
}
@keyframes heroReveal {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0);
  }
}
@keyframes clipReveal {
  to {
    clip-path: inset(0);
  }
}
@keyframes copyIn {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes cinematicMove {
  to {
    transform: scale(1.05) translateX(-1%);
  }
}
@keyframes scrollCue {
  50% {
    transform: scaleY(0.45);
    transform-origin: bottom;
  }
}
@keyframes playPulse {
  50% {
    box-shadow: 0 0 0 28px rgba(217, 182, 111, 0.05);
  }
}
@media (max-width: 900px) {
  .cinematic-hero {
    min-height: auto;
    padding: 80px 0 110px;
  }
  .intro-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .premium-services .service-card,
  .premium-services .service-card:nth-child(n) {
    grid-column: span 6;
  }
  .safety-track {
    grid-template-columns: repeat(3, 1fr);
  }
  .editorial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .video-heading {
    display: block;
  }
  .video-highlights {
    gap: 15px;
    flex-wrap: wrap;
  }
  .photo-stack {
    max-width: 650px;
  }
  .scroll-cue {
    display: none;
  }
}
@media (max-width: 600px) {
  .cinematic-hero h1 {
    font-size: 2.55rem;
  }
  .cinematic-hero:before {
    background: linear-gradient(rgba(3, 32, 27, 0.85), rgba(3, 32, 27, 0.98));
  }
  .hero-visual {
    margin-top: 20px;
  }
  .trust-band .container {
    font-size: 0.72rem;
  }
  .premium-services .service-card,
  .premium-services .service-card:nth-child(n) {
    grid-column: 1/-1;
  }
  .why-grid {
    grid-template-columns: 1fr;
  }
  .safety-track {
    grid-template-columns: repeat(2, 1fr);
  }
  .editorial-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 260px;
  }
  .story-tile:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }
  .video-poster {
    border-radius: 18px;
  }
  .play-ring {
    width: 66px;
    height: 66px;
  }
  .video-highlights {
    font-size: 0.78rem;
  }
  .confidence-card {
    grid-template-columns: 1fr;
  }
  .confidence-card > span {
    transform: rotate(90deg);
    justify-self: start;
  }
  .photo-stack {
    padding: 0 35px 45px 0;
  }
}
.service-image-row {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 16px;
}
.service-image-row figure {
  margin: 0;
  overflow: hidden;
  min-height: 320px;
}
.service-image-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.service-image-row figure:hover img {
  transform: scale(1.05);
}
@media (max-width: 700px) {
  .service-image-row {
    grid-template-columns: 1fr;
  }
  .service-image-row figure {
    min-height: 250px;
  }
}

/* Visibility and layout stabilization after rendered-page QA */
.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.scale-in,
.stagger-item {
  opacity: 1;
  transform: none;
}
.section {
  padding: 80px 0;
}
.premium-services {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.premium-services .service-card,
.premium-services .service-card:nth-child(n) {
  grid-column: auto;
}
.premium-services .service-card figure {
  height: 260px;
  aspect-ratio: auto;
}
.premium-services .service-card {
  display: flex;
  flex-direction: column;
}
.premium-services .card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.premium-services .card-body .text-link {
  margin-top: auto;
}
.why-image {
  max-height: 500px;
}
.why-image img {
  width: 100%;
  height: 500px;
}
.safety-card {
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(217, 182, 111, 0.75);
}
.safety-card p {
  color: #d5e4dd;
}
.editorial-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 300px;
}
.story-tile:nth-child(n) {
  grid-column: auto;
  grid-row: auto;
}
.story-tile:after {
  background: linear-gradient(
    to top,
    rgba(3, 32, 27, 0.78) 0,
    rgba(3, 32, 27, 0.08) 58%,
    transparent 100%
  );
}
.image-story {
  background: #f8f7f2;
}
.video-section .container {
  max-width: 1100px;
}
.video-poster {
  border-radius: 26px;
}
.video-poster img {
  max-height: 620px;
}
.ladies-premium .photo-stack {
  max-height: 650px;
}
.photo-stack img:first-child {
  width: 100%;
  height: 570px;
  object-fit: cover;
}
.final-cta {
  color: #fff;
}
.final-cta p,
.final-cta span,
.final-cta a {
  color: #fff;
}
.final-cta .btn-light {
  color: #063c32;
}
.final-cta .btn-whatsapp {
  color: #fff;
}
@media (max-width: 900px) {
  .premium-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 270px;
  }
  .safety-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .section {
    padding: 68px 0;
  }
}
@media (max-width: 600px) {
  .premium-services,
  .editorial-grid {
    grid-template-columns: 1fr;
  }
  .premium-services .service-card figure {
    height: 230px;
  }
  .editorial-grid {
    grid-auto-rows: 260px;
  }
  .safety-track {
    grid-template-columns: 1fr;
  }
  .photo-stack img:first-child {
    height: 420px;
  }
  .video-heading p {
    margin-top: 12px;
  }
  .video-poster strong {
    left: 18px;
    bottom: 14px;
    font-size: 0.78rem;
  }
}

/* Homepage Section 5: cinematic safety experience */
.kds-safety-section {
  position: relative;
  overflow: hidden;
  padding: clamp(86px, 9vw, 138px) 0 112px;
  color: #d8e9e2;
  background:
    radial-gradient(circle at 20% 25%, rgba(185, 228, 216, 0.1), transparent 30%),
    linear-gradient(145deg, #063c32 0%, #052f29 56%, #172a2a 100%);
  isolation: isolate;
}
.kds-safety-section:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.12;
  background: repeating-radial-gradient(
    ellipse at 82% 42%,
    transparent 0 45px,
    rgba(185, 228, 216, 0.2) 46px 47px
  );
  animation: kdsSafetyContours 18s ease-in-out infinite alternate;
}
.kds-safety-glow {
  position: absolute;
  z-index: -1;
  left: -8%;
  top: 28%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(11, 93, 75, 0.45);
  filter: blur(110px);
  animation: kdsSafetyGlow 12s ease-in-out infinite alternate;
}
.kds-safety-header {
  max-width: 860px;
  margin: 0 auto 68px;
  text-align: center;
}
.kds-safety-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #d9b66f;
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}
.kds-safety-kicker:before,
.kds-safety-kicker:after {
  content: '';
  width: 34px;
  height: 1px;
  background: #d9b66f;
}
.kds-safety-header h2 {
  margin: 18px 0;
  color: #fff;
  font-size: clamp(2.35rem, 4.7vw, 4.8rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.kds-safety-header h2 span {
  display: block;
  opacity: 0;
  transform: translateY(105%);
  clip-path: inset(-0.16em 0 100%);
}
.kds-safety-header p {
  max-width: 690px;
  margin: auto;
  color: #bfd2ca;
  font-size: 1.03rem;
}
.kds-safety-section.is-visible .kds-safety-header h2 span {
  animation: kdsSafetyHeading 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.kds-safety-section.is-visible .kds-safety-header h2 span + span {
  animation-delay: 0.16s;
  color: #d9b66f;
}
.kds-safety-editorial {
  display: grid;
  grid-template-columns: minmax(0, 58%) minmax(320px, 42%);
  align-items: center;
  gap: clamp(44px, 6vw, 92px);
}
.kds-safety-visual {
  position: relative;
  min-height: 610px;
  opacity: 0;
  transform: translateX(-45px);
  clip-path: inset(0 28% 0 0);
  transition:
    opacity 0.85s 0.18s,
    transform 0.85s 0.18s,
    clip-path 1.1s 0.18s;
}
.kds-safety-section.is-visible .kds-safety-visual {
  opacity: 1;
  transform: none;
  clip-path: inset(0);
}
.kds-safety-frame {
  position: absolute;
  inset: 15px 48px 90px 0;
  margin: 0;
  overflow: hidden;
  border-radius: 4px 90px 4px 38px;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.34);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.035);
  transition:
    opacity 0.55s,
    visibility 0.55s,
    transform 0.8s;
}
.kds-safety-frame.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.kds-safety-frame:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(3, 24, 19, 0.78));
}
.kds-safety-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s;
}
.kds-safety-frame:hover img {
  transform: scale(1.04);
}
.kds-safety-frame figcaption {
  position: absolute;
  z-index: 2;
  left: 28px;
  right: 28px;
  bottom: 22px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #fff;
  font-weight: 750;
}
.kds-safety-frame figcaption i {
  font-style: normal;
  color: #d9b66f;
  transition: transform 0.25s;
}
.kds-safety-frame:hover figcaption i {
  transform: translate(4px, -4px);
}
.kds-safety-thumb {
  position: absolute;
  z-index: 4;
  overflow: hidden;
  border: 6px solid #063c32;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.33);
  opacity: 0;
  transition:
    opacity 0.7s 0.55s,
    transform 0.85s 0.55s;
}
.kds-safety-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}
.kds-safety-thumb:hover img {
  transform: scale(1.06);
}
.kds-safety-thumb-one {
  right: -20px;
  top: -20px;
  width: 210px;
  height: 145px;
  border-radius: 44px 4px 4px 4px;
  transform: translate(30px, -20px) rotate(3deg);
}
.kds-safety-thumb-two {
  right: 5px;
  bottom: 28px;
  width: 165px;
  height: 165px;
  border-radius: 4px 4px 50%;
  transform: translate(25px, 24px) rotate(-3deg);
}
.kds-safety-section.is-visible .kds-safety-thumb {
  opacity: 1;
  transform: rotate(0);
}
.kds-safety-badge {
  position: absolute;
  z-index: 5;
  left: 18px;
  bottom: 2px;
  display: grid;
  gap: 4px;
  padding: 17px 22px;
  border-left: 4px solid #d9b66f;
  border-radius: 3px 16px 16px 3px;
  background: rgba(248, 247, 242, 0.94);
  color: #063c32;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  animation: kdsSafetyFloat 4s ease-in-out infinite;
}
.kds-safety-badge small {
  font-size: 0.7rem;
  color: #64756e;
}
.kds-safety-badge strong {
  font-size: 0.98rem;
}
.kds-safety-story {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.75s 0.42s,
    transform 0.75s 0.42s;
}
.kds-safety-section.is-visible .kds-safety-story {
  opacity: 1;
  transform: none;
}
.kds-safety-story-label {
  color: #d9b66f;
  font-weight: 800;
  font-size: 0.8rem;
}
.kds-safety-story h3 {
  margin: 15px 0;
  color: #fff;
  font-size: clamp(1.75rem, 2.7vw, 2.65rem);
  line-height: 1.25;
}
.kds-safety-story > p {
  color: #bcd0c7;
}
.kds-safety-story ol {
  list-style: none;
  margin: 28px 0;
  padding: 0;
  border-left: 1px solid rgba(217, 182, 111, 0.42);
}
.kds-safety-story li {
  position: relative;
  padding: 7px 0 7px 27px;
  color: #e7f2ee;
  font-weight: 650;
  opacity: 0.45;
  transform: translateX(-8px);
}
.kds-safety-story li:before {
  content: '';
  position: absolute;
  left: -5px;
  top: 15px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d9b66f;
  box-shadow: 0 0 0 6px rgba(217, 182, 111, 0.09);
}
.kds-safety-section.is-visible .kds-safety-story li {
  animation: kdsSafetyStep 0.45s forwards;
}
.kds-safety-section.is-visible .kds-safety-story li:nth-child(2) {
  animation-delay: 0.1s;
}
.kds-safety-section.is-visible .kds-safety-story li:nth-child(3) {
  animation-delay: 0.2s;
}
.kds-safety-section.is-visible .kds-safety-story li:nth-child(4) {
  animation-delay: 0.3s;
}
.kds-safety-section.is-visible .kds-safety-story li:nth-child(5) {
  animation-delay: 0.4s;
}
.kds-safety-cta {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  color: #d9b66f;
  font-weight: 800;
}
.kds-safety-cta i {
  font-style: normal;
  transition: transform 0.25s;
}
.kds-safety-cta:hover i {
  transform: translateX(5px);
}
.kds-safety-principles {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 76px;
  padding: 52px 48px;
}
.kds-safety-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.kds-safety-route path {
  fill: none;
  stroke: rgba(185, 228, 216, 0.13);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kds-safety-route .kds-safety-route-dash {
  stroke: #d9b66f;
  stroke-width: 2.2;
  stroke-dasharray: 16 18;
  stroke-dashoffset: 1250;
  opacity: 0.72;
}
.kds-safety-section.is-visible .kds-safety-route-dash {
  animation: kdsSafetyRoute 2.6s 0.55s ease forwards;
}
.kds-safety-principle {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 17px;
  min-height: 108px;
  padding: 17px 20px;
  text-align: left;
  color: #d8e9e2;
  border: 1px solid rgba(185, 228, 216, 0.15);
  border-radius: 18px;
  background: rgba(248, 247, 242, 0.045);
  backdrop-filter: blur(7px);
  cursor: pointer;
  opacity: 0;
  transform: translateY(24px);
  transition:
    border-color 0.3s,
    background 0.3s,
    transform 0.3s,
    box-shadow 0.3s;
}
.kds-safety-section.is-visible .kds-safety-principle {
  animation: kdsSafetyModule 0.55s forwards;
}
.kds-safety-section.is-visible .kds-safety-principle:nth-of-type(2) {
  animation-delay: 0.12s;
}
.kds-safety-section.is-visible .kds-safety-principle:nth-of-type(3) {
  animation-delay: 0.22s;
}
.kds-safety-section.is-visible .kds-safety-principle:nth-of-type(4) {
  animation-delay: 0.32s;
}
.kds-safety-section.is-visible .kds-safety-principle:nth-of-type(5) {
  animation-delay: 0.42s;
}
.kds-safety-section.is-visible .kds-safety-principle:nth-of-type(6) {
  animation-delay: 0.52s;
}
.kds-safety-principle:hover,
.kds-safety-principle.is-active {
  border-color: rgba(217, 182, 111, 0.72);
  background: rgba(185, 228, 216, 0.1);
  transform: translateY(-5px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.2);
}
.kds-safety-principle:focus-visible {
  outline: 3px solid #d9b66f;
  outline-offset: 4px;
}
.kds-safety-number {
  align-self: start;
  color: #d9b66f;
  font: 700 0.72rem Poppins;
  transition: transform 0.3s;
}
.kds-safety-principle:hover .kds-safety-number,
.kds-safety-principle.is-active .kds-safety-number {
  transform: translateY(-5px);
}
.kds-safety-icon {
  width: 42px;
  height: 42px;
  color: #d9b66f;
}
.kds-safety-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s;
}
.kds-safety-copy {
  display: grid;
  gap: 5px;
}
.kds-safety-copy strong {
  color: #fff;
  font-size: 1.03rem;
}
.kds-safety-copy small {
  color: #aec4bb;
  line-height: 1.45;
}
.kds-safety-principle > i {
  opacity: 0;
  color: #d9b66f;
  font-style: normal;
  transform: translate(-5px, 5px);
  transition: 0.25s;
}
.kds-safety-principle:hover > i,
.kds-safety-principle.is-active > i {
  opacity: 1;
  transform: none;
}
.kds-safety-principle:nth-of-type(1):hover svg,
.kds-safety-principle:nth-of-type(1).is-active svg {
  transform: rotateY(14deg);
}
.kds-safety-principle:nth-of-type(2):hover svg,
.kds-safety-principle:nth-of-type(2).is-active svg {
  transform: translate(2px, 2px);
}
.kds-safety-principle:nth-of-type(3):hover svg,
.kds-safety-principle:nth-of-type(3).is-active svg {
  transform: translateX(5px);
}
.kds-safety-principle:nth-of-type(4):hover svg,
.kds-safety-principle:nth-of-type(4).is-active svg {
  transform: skewX(-7deg);
}
.kds-safety-principle:nth-of-type(5):hover svg,
.kds-safety-principle:nth-of-type(5).is-active svg {
  transform: scaleX(1.12);
}
.kds-safety-principle:nth-of-type(6):hover svg,
.kds-safety-principle:nth-of-type(6).is-active svg {
  animation: kdsSafetyRadar 1.4s ease infinite;
}
.kds-safety-exit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46px;
  display: flex;
  justify-content: center;
  gap: 65px;
  overflow: hidden;
  opacity: 0.32;
}
.kds-safety-exit span {
  width: 8px;
  height: 80px;
  background: #d9b66f;
  transform: rotate(62deg);
}
@keyframes kdsSafetyHeading {
  to {
    opacity: 1;
    transform: none;
    clip-path: inset(-0.16em 0 -0.12em);
  }
}
@keyframes kdsSafetyStep {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes kdsSafetyModule {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes kdsSafetyRoute {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes kdsSafetyFloat {
  50% {
    transform: translateY(-7px);
  }
}
@keyframes kdsSafetyRadar {
  50% {
    transform: scale(1.1);
    opacity: 0.72;
  }
}
@keyframes kdsSafetyContours {
  to {
    transform: translate3d(-12px, 8px, 0);
  }
}
@keyframes kdsSafetyGlow {
  to {
    transform: translate(45px, -30px);
    opacity: 0.7;
  }
}
@media (max-width: 1000px) {
  .kds-safety-editorial {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .kds-safety-visual {
    min-height: 570px;
    max-width: 800px;
  }
  .kds-safety-story {
    max-width: 760px;
  }
  .kds-safety-principles {
    grid-template-columns: repeat(2, 1fr);
    padding: 12px 0;
  }
  .kds-safety-route {
    display: none;
  }
}
@media (max-width: 600px) {
  .kds-safety-section {
    padding: 76px 0 86px;
  }
  .kds-safety-header {
    margin-bottom: 38px;
    text-align: left;
  }
  .kds-safety-kicker:after {
    display: none;
  }
  .kds-safety-header h2 {
    font-size: clamp(2.1rem, 10vw, 3rem);
  }
  .kds-safety-header p {
    font-size: 0.94rem;
  }
  .kds-safety-visual {
    min-height: 490px;
  }
  .kds-safety-frame {
    inset: 0 0 150px;
    border-radius: 4px 48px 4px 24px;
  }
  .kds-safety-thumb-one {
    top: auto;
    right: auto;
    left: 0;
    bottom: 24px;
    width: 54%;
    height: 130px;
    border-radius: 25px 4px 4px;
  }
  .kds-safety-thumb-two {
    right: 0;
    bottom: 16px;
    width: 40%;
    height: 125px;
  }
  .kds-safety-badge {
    left: 12px;
    top: 14px;
    bottom: auto;
    padding: 12px 15px;
    animation: none;
  }
  .kds-safety-story {
    margin-top: 18px;
  }
  .kds-safety-principles {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 48px;
  }
  .kds-safety-principle {
    min-height: 104px;
    padding: 16px;
  }
  .kds-safety-copy small {
    font-size: 0.78rem;
  }
  .kds-safety-exit {
    gap: 42px;
  }
}
@media (max-width: 360px) {
  .kds-safety-visual {
    min-height: 445px;
  }
  .kds-safety-thumb-one,
  .kds-safety-thumb-two {
    height: 112px;
  }
  .kds-safety-principle {
    grid-template-columns: auto auto 1fr;
  }
  .kds-safety-principle > i {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kds-safety-section:before,
  .kds-safety-glow,
  .kds-safety-badge,
  .kds-safety-route-dash,
  .kds-safety-principle:nth-of-type(6) svg {
    animation: none !important;
  }
  .kds-safety-header h2 span,
  .kds-safety-visual,
  .kds-safety-thumb,
  .kds-safety-story,
  .kds-safety-story li,
  .kds-safety-principle {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
    animation: none !important;
  }
  .kds-safety-route-dash {
    stroke-dashoffset: 0;
  }
  .kds-safety-frame,
  .kds-safety-frame img {
    transition: none;
  }
}

/* Homepage section below safety: training-day journey */
.kds-journey-section {
  position: relative;
  overflow: hidden;
  padding: clamp(88px, 9vw, 140px) 0 110px;
  background: linear-gradient(145deg, #edf6f2 0%, #e7f2ee 56%, #f8f7f2 100%);
  isolation: isolate;
}
.kds-journey-contours {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.38;
  background:
    radial-gradient(circle at 85% 18%, rgba(185, 228, 216, 0.7), transparent 28%),
    repeating-radial-gradient(
      ellipse at 12% 80%,
      transparent 0 55px,
      rgba(11, 93, 75, 0.07) 56px 57px
    );
}
.kds-journey-header {
  max-width: 900px;
  margin: 0 auto 58px;
  text-align: center;
}
.kds-journey-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #0b5d4b;
  font-weight: 800;
  font-size: 0.84rem;
}
.kds-journey-kicker:before {
  content: '';
  width: 34px;
  height: 2px;
  background: #d9b66f;
}
.kds-journey-header h2 {
  margin: 18px 0;
  color: #063c32;
  font-size: clamp(2.35rem, 4.4vw, 4.5rem);
  line-height: 1.13;
  letter-spacing: -0.025em;
}
.kds-journey-header h2 span {
  display: block;
  opacity: 0;
  transform: translateY(100%);
  clip-path: inset(-0.16em 0 100%);
}
.kds-journey-header h2 span + span {
  color: #0b5d4b;
}
.kds-journey-header p {
  max-width: 720px;
  margin: auto;
  color: #53675e;
}
.kds-journey-section.is-visible .kds-journey-header h2 span {
  animation: kdsJourneyHeading 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.kds-journey-section.is-visible .kds-journey-header h2 span + span {
  animation-delay: 0.15s;
}
.kds-journey-map {
  position: relative;
  min-height: 650px;
  margin-top: 18px;
}
.kds-journey-road {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 590px;
  overflow: visible;
  filter: drop-shadow(0 8px 10px rgba(6, 60, 50, 0.08));
}
.kds-journey-road path {
  fill: none;
  stroke-linecap: round;
}
.kds-journey-road-base {
  stroke: rgba(6, 60, 50, 0.15);
  stroke-width: 34;
}
.kds-journey-road-progress {
  stroke: #d9b66f;
  stroke-width: 3;
  stroke-dasharray: 14 18;
  stroke-dashoffset: 2300;
}
.kds-journey-section.is-visible .kds-journey-road-progress {
  animation: kdsJourneyRoad 3.2s 0.3s ease forwards;
}
.kds-journey-car {
  position: absolute;
  z-index: 5;
  left: 20px;
  top: 53px;
  width: 58px;
  height: 36px;
  color: #063c32;
  opacity: 0;
  filter: drop-shadow(0 8px 7px rgba(6, 60, 50, 0.25));
}
.kds-journey-car svg {
  width: 100%;
  height: 100%;
  fill: #d9b66f;
  stroke: #063c32;
  stroke-width: 2;
  stroke-linejoin: round;
}
.kds-journey-section.is-visible .kds-journey-car {
  animation: kdsJourneyCar 4.6s 0.55s cubic-bezier(0.45, 0.05, 0.22, 1) forwards;
}
.kds-journey-stop {
  position: absolute;
  z-index: 3;
  width: min(280px, 23%);
  display: grid;
  grid-template-columns: auto 46px 1fr;
  gap: 12px;
  align-items: start;
  padding: 18px;
  border: 1px solid rgba(11, 93, 75, 0.13);
  border-radius: 18px;
  background-image:
    linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.94) 54%,
      rgba(231, 242, 238, 0.72) 100%
    ),
    var(--journey-image);
  background-position: center;
  background-size: cover;
  box-shadow: 0 15px 42px rgba(6, 60, 50, 0.1);
  opacity: 0;
  transform: translateY(28px);
  transition:
    transform 0.3s,
    box-shadow 0.3s,
    border-color 0.3s;
  backdrop-filter: blur(8px);
}
.kds-journey-stop:hover {
  transform: translateY(-6px);
  border-color: rgba(217, 182, 111, 0.8);
  box-shadow: 0 22px 52px rgba(6, 60, 50, 0.16);
}
.kds-journey-index {
  color: #a67f35;
  font: 700 0.7rem Poppins;
}
.kds-journey-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #e7f2ee;
  color: #0b5d4b;
  transition:
    background 0.3s,
    color 0.3s,
    transform 0.3s;
}
.kds-journey-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kds-journey-stop:hover .kds-journey-icon {
  color: #063c32;
  background: #d9b66f;
  transform: rotate(-3deg) scale(1.06);
}
.kds-journey-stop h3 {
  margin: 0 0 6px;
  color: #063c32;
  font-size: 1rem;
}
.kds-journey-stop p {
  margin: 0;
  color: #61736b;
  font-size: 0.78rem;
  line-height: 1.5;
}
.kds-journey-one {
  left: 1%;
  top: 9%;
}
.kds-journey-two {
  left: 27%;
  top: 2%;
}
.kds-journey-three {
  right: 23%;
  top: 12%;
}
.kds-journey-four {
  right: 0;
  top: 32%;
}
.kds-journey-five {
  right: 19%;
  bottom: 10%;
}
.kds-journey-six {
  left: 28%;
  bottom: 0;
}
.kds-journey-seven {
  left: 1%;
  bottom: 17%;
}
.kds-journey-section.is-visible .kds-journey-stop {
  animation: kdsJourneyStop 0.55s forwards;
}
.kds-journey-section.is-visible .kds-journey-two {
  animation-delay: 0.15s;
}
.kds-journey-section.is-visible .kds-journey-three {
  animation-delay: 0.3s;
}
.kds-journey-section.is-visible .kds-journey-four {
  animation-delay: 0.45s;
}
.kds-journey-section.is-visible .kds-journey-five {
  animation-delay: 0.6s;
}
.kds-journey-section.is-visible .kds-journey-six {
  animation-delay: 0.75s;
}
.kds-journey-section.is-visible .kds-journey-seven {
  animation-delay: 0.9s;
}
.kds-journey-mobile-line {
  display: none;
}
.kds-journey-cta {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 10px;
  margin: 20px auto 0;
  padding: 14px 20px;
  border-bottom: 2px solid #d9b66f;
  color: #063c32;
  font-weight: 800;
}
.kds-journey-cta i {
  font-style: normal;
  transition: transform 0.25s;
}
.kds-journey-cta:hover i {
  transform: translateX(6px);
}
.floating-wa svg {
  width: 30px;
  height: 30px;
  display: block;
}
.mobile-actions a[href*='wa.me'] > span:before {
  content: '';
}
@keyframes kdsJourneyHeading {
  to {
    opacity: 1;
    transform: none;
    clip-path: inset(-0.16em 0 -0.12em);
  }
}
@keyframes kdsJourneyRoad {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes kdsJourneyStop {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes kdsJourneyCar {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(-10deg);
  }
  10% {
    opacity: 1;
  }
  28% {
    transform: translate(370px, 40px) rotate(18deg);
  }
  52% {
    transform: translate(810px, 110px) rotate(-5deg);
  }
  74% {
    transform: translate(650px, 385px) rotate(155deg);
  }
  100% {
    opacity: 1;
    transform: translate(100px, 460px) rotate(188deg);
  }
}
@media (max-width: 1050px) {
  .kds-journey-map {
    min-height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .kds-journey-road,
  .kds-journey-car {
    display: none;
  }
  .kds-journey-stop {
    position: relative;
    inset: auto !important;
    width: auto;
    min-height: 125px;
  }
  .kds-journey-mobile-line {
    display: block;
    position: absolute;
    left: 50%;
    top: 300px;
    bottom: 115px;
    width: 2px;
    background: linear-gradient(#d9b66f, #0b5d4b);
    opacity: 0.2;
  }
}
@media (max-width: 600px) {
  .kds-journey-section {
    padding: 78px 0 86px;
  }
  .kds-journey-header {
    text-align: left;
    margin-bottom: 38px;
  }
  .kds-journey-header h2 {
    font-size: clamp(2rem, 9.5vw, 2.9rem);
  }
  .kds-journey-map {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-left: 18px;
  }
  .kds-journey-stop {
    grid-template-columns: auto 44px 1fr;
    min-height: 0;
    padding: 16px;
  }
  .kds-journey-stop:before {
    content: '';
    position: absolute;
    left: -22px;
    top: 29px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d9b66f;
    box-shadow: 0 0 0 6px rgba(217, 182, 111, 0.2);
  }
  .kds-journey-mobile-line {
    left: 20px;
    top: 340px;
    bottom: 120px;
    opacity: 0.45;
  }
  .kds-journey-cta {
    margin-top: 36px;
    font-size: 0.88rem;
  }
}
@media (max-width: 360px) {
  .kds-journey-stop {
    grid-template-columns: auto 38px 1fr;
    padding: 13px;
  }
  .kds-journey-icon {
    width: 36px;
    height: 36px;
  }
  .kds-journey-stop p {
    font-size: 0.74rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kds-journey-header h2 span,
  .kds-journey-stop,
  .kds-journey-car {
    opacity: 1;
    transform: none;
    clip-path: none;
    animation: none !important;
  }
  .kds-journey-road-progress {
    stroke-dashoffset: 0;
    animation: none !important;
  }
  .kds-journey-stop,
  .kds-journey-icon {
    transition: none;
  }
}

/* Exact SVG road-following motion for the journey car */
.kds-journey-road .kds-journey-car {
  position: static;
  display: block;
  width: auto;
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 7px 6px rgba(6, 60, 50, 0.28));
  animation: none;
}
.kds-journey-section.is-visible .kds-journey-road .kds-journey-car {
  opacity: 1;
  animation: none;
}
.kds-journey-road .kds-car-body {
  fill: #d9b66f;
  stroke: #063c32;
  stroke-width: 2;
  stroke-linejoin: round;
}
.kds-journey-road .kds-car-window {
  fill: #b9e4d8;
  stroke: #063c32;
  stroke-width: 2;
}
.kds-journey-road .kds-journey-car circle {
  fill: #063c32;
  stroke: #e7f2ee;
  stroke-width: 2;
}
.kds-journey-road .kds-journey-car > g {
  transform-box: fill-box;
  transform-origin: center;
}
.kds-journey-section.is-visible .kds-journey-road .kds-journey-car > g {
  animation: kdsJourneySuspension 0.8s ease-in-out infinite alternate;
}
@keyframes kdsJourneySuspension {
  to {
    translate: 0 -1.5px;
  }
}
@media (max-width: 1050px) {
  .kds-journey-road .kds-journey-car {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kds-journey-road .kds-journey-car {
    display: none;
  }
  .kds-journey-road .kds-journey-car > g {
    animation: none !important;
  }
}

/* Top-view scooter remains visually upright through every road direction. */
.kds-journey-road .kds-journey-scooter .kds-scooter-wheel {
  fill: #172a2a;
  stroke: #f8f7f2;
  stroke-width: 1.5;
}
.kds-journey-road .kds-journey-scooter .kds-scooter-body {
  fill: #d9b66f;
  stroke: #063c32;
  stroke-width: 2;
  stroke-linejoin: round;
}
.kds-journey-road .kds-journey-scooter .kds-scooter-deck {
  fill: #0b5d4b;
  stroke: #063c32;
  stroke-width: 1.5;
}
.kds-journey-road .kds-journey-scooter .kds-scooter-handle {
  fill: none;
  stroke: #063c32;
  stroke-width: 2;
  stroke-linecap: round;
}
.kds-journey-road .kds-journey-scooter .kds-scooter-seat {
  fill: #172a2a;
  stroke: #b9e4d8;
  stroke-width: 1.5;
}
.kds-journey-road .kds-journey-scooter .kds-scooter-light {
  fill: #f8f7f2;
  stroke: #d9b66f;
  stroke-width: 1;
}
.kds-journey-section.is-visible .kds-journey-road .kds-journey-scooter > g {
  animation: kdsScooterBalance 0.7s ease-in-out infinite alternate;
}
@keyframes kdsScooterBalance {
  to {
    translate: 0 -1px;
  }
}

/* Premium top-view motorcycle for the animated training road. */
.kds-journey-road .kds-journey-bike .kds-bike-wheel {
  fill: #172a2a;
  stroke: #f8f7f2;
  stroke-width: 1.5;
}
.kds-journey-road .kds-journey-bike .kds-bike-frame {
  fill: #d9b66f;
  stroke: #063c32;
  stroke-width: 2;
  stroke-linejoin: round;
}
.kds-journey-road .kds-journey-bike .kds-bike-tank {
  fill: #0b5d4b;
  stroke: #063c32;
  stroke-width: 1.8;
}
.kds-journey-road .kds-journey-bike .kds-bike-seat {
  fill: #172a2a;
  stroke: #b9e4d8;
  stroke-width: 1.5;
}
.kds-journey-road .kds-journey-bike .kds-bike-fork,
.kds-journey-road .kds-journey-bike .kds-bike-handle {
  fill: none;
  stroke: #063c32;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kds-journey-road .kds-journey-bike .kds-bike-rider {
  fill: #f8f7f2;
  stroke: #063c32;
  stroke-width: 1.5;
}
.kds-journey-road .kds-journey-bike .kds-bike-light {
  fill: #f8f7f2;
  stroke: #d9b66f;
  stroke-width: 2;
  filter: drop-shadow(3px 0 4px rgba(217, 182, 111, 0.9));
}
.kds-journey-road .kds-journey-bike .kds-bike-light-beam {
  fill: none;
  stroke: #d9b66f;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.8;
  animation: kdsBikeLight 1.2s ease-in-out infinite alternate;
}
.kds-journey-section.is-visible .kds-journey-road .kds-journey-bike > g {
  animation: kdsBikeBalance 0.58s ease-in-out infinite alternate;
}
@keyframes kdsBikeBalance {
  to {
    translate: 0 -1.2px;
  }
}
@keyframes kdsBikeLight {
  to {
    opacity: 0.3;
  }
}

/* Generated photorealistic Indian scooter cutout. */
.kds-journey-road .kds-journey-premium-scooter {
  filter: drop-shadow(0 8px 7px rgba(6, 60, 50, 0.34));
}
.kds-journey-road .kds-premium-scooter-image {
  transform-box: fill-box;
  transform-origin: center;
  animation: kdsPremiumScooterRide 0.65s ease-in-out infinite alternate;
}
@keyframes kdsPremiumScooterRide {
  to {
    transform: translateY(-1.2px) rotate(0.45deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .kds-journey-road .kds-premium-scooter-image {
    animation: none;
  }
}
.cinematic-hero .trust-row {
  color: #f3f7f4;
}
.cinematic-hero .trust-row span {
  opacity: 1;
}
@media (max-width: 600px) {
  .cinematic-hero h1 {
    font-size: 2.35rem;
    line-height: 1.2;
  }
  .cinematic-hero .lead {
    font-size: 1rem;
  }
  .cinematic-hero .trust-row {
    font-size: 0.78rem;
  }
  .cinematic-hero .hero-image {
    margin-top: 4px;
  }
  .cinematic-hero .hero-badge {
    position: relative;
    left: auto;
    bottom: auto;
    margin: -20px 12px 0;
  }
  .trust-band {
    padding: 13px 0;
  }
}

/* Accessible three-slide hero carousel */
.hero-carousel {
  position: relative;
  height: clamp(620px, calc(100vh - 120px), 820px);
  min-height: 620px;
  overflow: hidden;
  background: #063c32;
  color: #fff;
}
.hero-slides,
.hero-slide,
.slide-bg,
.slide-overlay {
  position: absolute;
  inset: 0;
}
.hero-slide {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.8s ease,
    visibility 0.8s;
  isolation: isolate;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
.slide-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.1) saturate(1.04);
  transform: scale(1.04);
  transition: transform 7s ease;
}
.hero-slide.is-active .slide-bg img {
  transform: scale(1);
}
.slide-overlay {
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(3, 32, 27, 0.82) 0%,
    rgba(6, 60, 50, 0.56) 44%,
    rgba(6, 60, 50, 0.08) 100%
  );
}
.slide-overlay.warm {
  background: linear-gradient(
    90deg,
    rgba(3, 32, 27, 0.82),
    rgba(11, 93, 75, 0.53) 54%,
    rgba(39, 54, 48, 0.07)
  );
}
.slide-overlay.night-glow {
  background:
    linear-gradient(90deg, rgba(1, 17, 14, 0.84), rgba(3, 32, 27, 0.56) 52%, rgba(3, 24, 19, 0.1)),
    radial-gradient(circle at 78% 55%, rgba(217, 182, 111, 0.2), transparent 28%);
}
.hero-slide[data-slide='1'] .slide-bg img {
  object-position: center bottom;
  filter: brightness(1.32) saturate(1.08);
}
.hero-slide[data-slide='1'] .slide-overlay.warm {
  background: linear-gradient(
    90deg,
    rgba(3, 32, 27, 0.68),
    rgba(11, 93, 75, 0.38) 54%,
    rgba(39, 54, 48, 0.02)
  );
}
.slide-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  padding-bottom: 85px;
}
.slide-content > * {
  max-width: 780px;
}
.slide-content .eyebrow {
  color: #d9b66f;
}
.slide-content h1,
.slide-content h2 {
  margin: 18px 0;
  font-size: clamp(2.8rem, 5.6vw, 5.6rem);
  line-height: 1.16;
  color: #fff;
  letter-spacing: -0.025em;
}
.slide-content h1 em,
.slide-content h2 em {
  color: #d9b66f;
  font-style: normal;
}
.slide-content p {
  max-width: 690px;
  margin: 0;
  color: #e2eee9;
  font-size: 1.12rem;
}
.hero-slide.is-active .slide-content .eyebrow,
.hero-slide.is-active .slide-content h1,
.hero-slide.is-active .slide-content h2,
.hero-slide.is-active .slide-content p,
.hero-slide.is-active .slide-content .cta-row {
  animation: carouselText 0.7s both;
}
.hero-slide.is-active .slide-content h1,
.hero-slide.is-active .slide-content h2 {
  animation-delay: 0.08s;
}
.hero-slide.is-active .slide-content p {
  animation-delay: 0.18s;
}
.hero-slide.is-active .slide-content .cta-row {
  animation-delay: 0.28s;
}
.hero-controls {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 35px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 13px;
}
.carousel-arrow,
.carousel-pause {
  width: 45px;
  height: 45px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(3, 32, 27, 0.52);
  color: #fff;
  font-size: 1.55rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.carousel-pause {
  font-size: 0.78rem;
  margin-left: 5px;
}
.carousel-arrow:hover,
.carousel-pause:hover {
  background: #d9b66f;
  color: #063c32;
  border-color: #d9b66f;
}
.carousel-dots {
  display: flex;
  gap: 9px;
  padding: 0 7px;
}
.carousel-dots button {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: 0.3s;
}
.carousel-dots button.is-active {
  width: 34px;
  background: #d9b66f;
}
.carousel-progress {
  position: absolute;
  z-index: 7;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
}
.carousel-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: #d9b66f;
}
.hero-carousel.is-playing .carousel-progress span {
  animation: carouselProgress 3.5s linear forwards;
}
.hero-carousel.is-paused .carousel-progress span {
  animation-play-state: paused;
}
.hero-carousel .btn-ghost {
  background: rgba(3, 32, 27, 0.38);
}
@keyframes carouselText {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes carouselProgress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@media (max-width: 700px) {
  .hero-carousel {
    height: 720px;
    min-height: 720px;
  }
  .slide-overlay,
  .slide-overlay.warm,
  .slide-overlay.night-glow {
    background: linear-gradient(
      180deg,
      rgba(3, 32, 27, 0.3) 0%,
      rgba(3, 32, 27, 0.72) 62%,
      rgba(3, 31, 26, 0.92) 100%
    );
  }
  .hero-slide[data-slide='1'] .slide-overlay.warm {
    background: linear-gradient(
      180deg,
      rgba(3, 32, 27, 0.08) 0%,
      rgba(3, 32, 27, 0.56) 60%,
      rgba(3, 31, 26, 0.9) 100%
    );
  }
  .slide-bg img {
    object-position: center;
  }
  .slide-content {
    justify-content: flex-end;
    padding-bottom: 115px;
  }
  .slide-content h1,
  .slide-content h2 {
    font-size: clamp(2.2rem, 10vw, 3.15rem);
    line-height: 1.18;
  }
  .slide-content p {
    font-size: 0.96rem;
  }
  .slide-content .cta-row {
    width: 100%;
    gap: 10px;
  }
  .slide-content .cta-row .btn {
    width: 100%;
    min-height: 48px;
  }
  .hero-controls {
    bottom: 28px;
    justify-content: center;
  }
  .carousel-arrow,
  .carousel-pause {
    width: 40px;
    height: 40px;
  }
  .carousel-dots button.is-active {
    width: 27px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .slide-bg img {
    transition: none;
  }
  .hero-slide.is-active .slide-content > * {
    animation: none !important;
  }
  .carousel-progress span {
    animation: none !important;
    width: 100%;
  }
}

/* Homepage section two, premium driving story */
.driving-story {
  position: relative;
  overflow: hidden;
  min-height: 940px;
  background:
    radial-gradient(circle at 82% 32%, rgba(185, 228, 216, 0.42), transparent 28%),
    linear-gradient(140deg, #f8f7f2, #f4f5ef 58%, #e7f2ee);
  isolation: isolate;
}
.driving-story:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.14;
  background: repeating-radial-gradient(
    ellipse at 18% 75%,
    transparent 0 48px,
    rgba(11, 93, 75, 0.18) 49px 50px
  );
}
.story-glow {
  position: absolute;
  right: 15%;
  top: 22%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(217, 182, 111, 0.14);
  filter: blur(70px);
}
.story-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 42px;
  color: #0b5d4b;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.story-label:before {
  content: '';
  width: 36px;
  height: 3px;
  background: #d9b66f;
}
.story-layout {
  display: grid;
  grid-template-columns: minmax(0, 45%) minmax(0, 55%);
  gap: 68px;
  align-items: center;
}
.story-copy {
  position: relative;
  z-index: 4;
}
.story-heading {
  margin: 0 0 24px;
  font-size: clamp(2.5rem, 4.2vw, 4.45rem);
  line-height: 1.17;
  color: #063c32;
  letter-spacing: -0.025em;
}
.story-heading span {
  display: block;
  overflow: hidden;
}
.story-heading b {
  display: block;
  font-weight: 800;
  transform: translateY(108%);
  transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.driving-story.story-visible .story-heading span:nth-child(1) b {
  transform: none;
  transition-delay: 0.18s;
}
.driving-story.story-visible .story-heading span:nth-child(2) b {
  transform: none;
  transition-delay: 0.33s;
}
.driving-story.story-visible .story-heading span:nth-child(3) b {
  transform: none;
  transition-delay: 0.48s;
  color: #0b5d4b;
}
.story-lead {
  max-width: 610px;
  margin: 0;
  color: #55675e;
  font-size: 1.02rem;
  opacity: 0;
  transform: translateY(20px);
  transition: 0.65s 0.62s;
}
.driving-story.story-visible .story-lead {
  opacity: 1;
  transform: none;
}
.training-principles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 34px;
  background: rgba(11, 93, 75, 0.16);
  border: 1px solid rgba(11, 93, 75, 0.13);
}
.training-principles article {
  position: relative;
  padding: 19px 21px;
  background: rgba(248, 247, 242, 0.94);
  opacity: 0;
  transform: translateY(16px);
  transition: 0.55s;
}
.driving-story.story-visible .training-principles article {
  opacity: 1;
  transform: none;
}
.driving-story.story-visible .training-principles article:nth-child(1) {
  transition-delay: 0.72s;
}
.driving-story.story-visible .training-principles article:nth-child(2) {
  transition-delay: 0.82s;
}
.driving-story.story-visible .training-principles article:nth-child(3) {
  transition-delay: 0.92s;
}
.driving-story.story-visible .training-principles article:nth-child(4) {
  transition-delay: 1.02s;
}
.training-principles article > span {
  font: 700 0.72rem Poppins;
  color: #a07d39;
}
.training-principles h3 {
  margin: 7px 0 3px;
  color: #063c32;
  font-size: 1rem;
}
.training-principles p {
  margin: 0;
  color: #65766e;
  font-size: 0.78rem;
  line-height: 1.55;
}
.story-cta {
  position: relative;
  display: inline-flex;
  gap: 10px;
  margin-top: 28px;
  color: #0b5d4b;
  font-weight: 800;
}
.story-cta:after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 1px;
  background: #d9b66f;
  transition: right 0.3s;
}
.story-cta i {
  font-style: normal;
  transition: transform 0.3s;
}
.story-cta:hover:after {
  right: 0;
}
.story-cta:hover i {
  transform: translateX(6px);
}
.story-collage {
  position: relative;
  min-height: 670px;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition:
    opacity 0.8s 0.08s,
    clip-path 1s 0.08s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.driving-story.story-visible .story-collage {
  opacity: 1;
  clip-path: inset(0);
}
.story-collage figure {
  margin: 0;
}
.story-main-image {
  position: absolute;
  right: -8%;
  top: 0;
  width: 88%;
  height: 510px;
  overflow: hidden;
  border-radius: 80px 4px 34px 4px;
  box-shadow: 0 30px 80px rgba(6, 60, 50, 0.2);
  border-top: 2px solid rgba(217, 182, 111, 0.75);
}
.story-main-image img,
.story-secondary-image img,
.story-small-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}
.story-main-image:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(6, 60, 50, 0.58), transparent 42%);
  opacity: 0.2;
  transition: opacity 0.4s;
}
.story-main-image:hover img {
  transform: scale(1.045);
}
.story-main-image:hover:after {
  opacity: 0.65;
}
.story-main-image figcaption {
  position: absolute;
  z-index: 2;
  left: 25px;
  right: 25px;
  bottom: 20px;
  color: #fff;
  font-weight: 800;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.35s;
}
.story-main-image:hover figcaption {
  opacity: 1;
  transform: none;
}
.story-main-image figcaption i {
  float: right;
  font-style: normal;
}
.frame-label {
  position: absolute;
  z-index: 3;
  right: 18px;
  top: 18px;
  padding: 7px 11px;
  background: #d9b66f;
  color: #063c32;
  font: 700 0.63rem Poppins;
  letter-spacing: 0.09em;
}
.story-secondary-image {
  position: absolute;
  left: -2%;
  bottom: 6px;
  width: 59%;
  height: 270px;
  overflow: hidden;
  border-radius: 5px 34px 5px 34px;
  border: 7px solid #f8f7f2;
  box-shadow: 0 20px 55px rgba(6, 60, 50, 0.17);
  transform: translate(-22px, 28px);
  opacity: 0;
  transition:
    opacity 0.65s 0.8s,
    transform 0.65s 0.8s;
}
.driving-story.story-visible .story-secondary-image {
  opacity: 1;
  transform: none;
}
.story-small-image {
  position: absolute;
  right: 2%;
  bottom: 0;
  width: 34%;
  height: 210px;
  overflow: hidden;
  border-radius: 50% 50% 8px 8px;
  border: 7px solid #f8f7f2;
  box-shadow: 0 18px 45px rgba(6, 60, 50, 0.16);
  transform: scale(0.88) translate(18px, -20px);
  opacity: 0;
  transition:
    opacity 0.65s 0.95s,
    transform 0.65s 0.95s;
}
.driving-story.story-visible .story-small-image {
  opacity: 1;
  transform: none;
}
.story-floating-card {
  position: absolute;
  z-index: 5;
  right: 27%;
  top: 455px;
  display: grid;
  padding: 15px 18px;
  background: rgba(231, 242, 238, 0.94);
  border: 1px solid rgba(217, 182, 111, 0.58);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(6, 60, 50, 0.16);
  opacity: 0;
  transform: translateY(18px);
  transition: 0.55s 1.05s;
}
.driving-story.story-visible .story-floating-card {
  opacity: 1;
  transform: none;
}
.story-floating-card strong {
  color: #063c32;
  font-size: 0.88rem;
}
.story-floating-card span {
  color: #60736a;
  font-size: 0.74rem;
}
.story-route {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -35px;
  width: 104%;
  height: 225px;
  pointer-events: none;
}
.story-route path {
  fill: none;
  stroke: rgba(11, 93, 75, 0.13);
  stroke-width: 28;
  stroke-linecap: round;
  stroke-dasharray: 1650;
  stroke-dashoffset: 1650;
}
.story-route-center {
  stroke: #d9b66f !important;
  stroke-width: 3 !important;
  stroke-dasharray: 15 22 !important;
}
.driving-story.story-visible .story-route path {
  animation: storyRoadDraw 1.9s 1.05s ease forwards;
}
.driving-story.story-visible .story-route-center {
  animation:
    storyRoadDraw 1.9s 1.05s ease forwards,
    roadDrift 12s 3s linear infinite;
}
@keyframes storyRoadDraw {
  to {
    stroke-dashoffset: 0;
  }
}
@media (max-width: 1000px) and (min-width: 701px) {
  .story-layout {
    grid-template-columns: 46% 54%;
    gap: 38px;
  }
  .story-heading {
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  }
  .story-main-image {
    width: 94%;
    height: 470px;
  }
  .story-collage {
    min-height: 630px;
  }
  .story-floating-card {
    right: 20%;
  }
}
@media (max-width: 700px) {
  .driving-story {
    min-height: auto;
    padding: 72px 0 110px;
  }
  .story-label {
    margin-bottom: 25px;
    font-size: 0.77rem;
  }
  .story-layout {
    display: flex;
    flex-direction: column;
    gap: 38px;
  }
  .story-heading {
    font-size: clamp(2rem, 9vw, 2.75rem);
    line-height: 1.2;
  }
  .story-lead {
    font-size: 0.94rem;
  }
  .story-collage {
    order: 2;
    width: 100%;
    min-height: 525px;
  }
  .story-main-image {
    position: relative;
    right: auto;
    width: 100%;
    height: 340px;
    border-radius: 52px 4px 28px 4px;
  }
  .story-main-image figcaption {
    opacity: 1;
    transform: none;
    font-size: 0.82rem;
  }
  .story-secondary-image {
    left: 0;
    bottom: 0;
    width: 62%;
    height: 205px;
    border-width: 5px;
  }
  .story-small-image {
    right: 0;
    bottom: 12px;
    width: 39%;
    height: 170px;
    border-width: 5px;
  }
  .story-floating-card {
    right: 16px;
    top: 310px;
    padding: 12px 14px;
  }
  .training-principles {
    order: 3;
    margin-top: 28px;
  }
  .story-route {
    height: 130px;
    bottom: -20px;
  }
  .story-copy {
    display: contents;
  }
  .story-copy .story-heading,
  .story-copy .story-lead {
    order: 0;
  }
  .training-principles,
  .story-cta {
    order: 3;
  }
  .story-cta {
    align-self: flex-start;
  }
}
@media (max-width: 390px) {
  .training-principles {
    grid-template-columns: 1fr;
  }
  .story-collage {
    min-height: 500px;
  }
  .story-main-image {
    height: 310px;
  }
  .story-secondary-image {
    height: 190px;
  }
  .story-small-image {
    height: 155px;
  }
  .story-floating-card {
    top: 282px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .story-heading b,
  .story-lead,
  .training-principles article,
  .story-collage,
  .story-secondary-image,
  .story-small-image,
  .story-floating-card {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  .story-route path {
    stroke-dashoffset: 0;
    animation: none !important;
  }
  .story-main-image img {
    transition: none;
  }
}
.hero-carousel {
  height: clamp(620px, calc(100vh - 82px), 820px);
}
.slide-content h1,
.slide-content h2 {
  font-size: clamp(2.45rem, 3.8vw, 4.25rem);
  line-height: 1.2;
  max-width: 760px;
  margin: 16px 0;
  letter-spacing: -0.02em;
}
/* Mobile hero: content lifted toward the upper-middle, CTA group kept
   apart from the bottom slider controls, and the whole hero sized to sit
   comfortably above the fixed mobile bottom action bar. */
@media (max-width: 700px) {
  .hero-carousel {
    height: auto;
    min-height: calc(100vh - 72px - 68px - env(safe-area-inset-bottom));
  }
  @supports (height: 100svh) {
    .hero-carousel {
      min-height: calc(100svh - 72px - 68px - env(safe-area-inset-bottom));
    }
  }
  .slide-content {
    justify-content: flex-start;
    padding: clamp(76px, 11svh, 104px) 0 132px;
  }
  .slide-content h1,
  .slide-content h2 {
    font-size: clamp(1.5rem, 6.6vw, 1.65rem);
    line-height: 1.24;
    margin: 0 0 12px;
    max-width: min(20rem, 100%);
    text-wrap: balance;
  }
  .slide-content p {
    max-width: min(26rem, 100%);
    margin: 0 0 20px;
    font-size: 0.94rem;
    line-height: 1.6;
  }
  .slide-content .cta-row {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 11px;
    margin-top: 0;
  }
  .slide-content .cta-row .btn {
    width: 100%;
    max-width: 330px;
    min-height: 50px;
  }
  .hero-controls {
    bottom: calc(20px + env(safe-area-inset-bottom));
    justify-content: center;
  }
  .carousel-arrow,
  .carousel-pause {
    width: 40px;
    height: 40px;
  }
  .carousel-dots button.is-active {
    width: 27px;
  }
}
@media (max-width: 360px) {
  .slide-content {
    padding-top: 68px;
    padding-bottom: 122px;
  }
  .slide-content h1,
  .slide-content h2 {
    font-size: clamp(1.45rem, 6.5vw, 1.55rem);
    line-height: 1.26;
    margin-bottom: 10px;
  }
  .slide-content p {
    margin-bottom: 16px;
    font-size: 0.9rem;
    line-height: 1.55;
  }
  .slide-content .cta-row {
    gap: 10px;
  }
  .slide-content .cta-row .btn {
    min-height: 48px;
  }
}

/* Give the homepage's primary visual priority to real two-wheeler training. */
.hero-slide[data-slide='0'] .slide-bg img {
  content: url('/assets/images/client/hero-two-wheeler-training.webp');
  object-position: center 52%;
  filter: brightness(1.13) saturate(1.05);
}
.hero-slide[data-slide='0'] .slide-overlay {
  background: linear-gradient(
    90deg,
    rgba(3, 32, 27, 0.82) 0%,
    rgba(6, 60, 50, 0.56) 46%,
    rgba(6, 60, 50, 0.08) 100%
  );
}
@media (max-width: 700px) {
  .hero-slide[data-slide='0'] .slide-bg img {
    object-position: 61% center;
    filter: brightness(1.1) saturate(1.04);
  }
  .hero-slide[data-slide='0'] .slide-overlay {
    background: linear-gradient(
      180deg,
      rgba(3, 32, 27, 0.28) 0%,
      rgba(3, 32, 27, 0.7) 54%,
      rgba(3, 31, 26, 0.92) 100%
    );
  }
}

/* Keep learner and instructor faces inside every hero crop. */
.hero-slide[data-slide='0'] .slide-bg img {
  object-position: center 38%;
  filter: brightness(1.25) saturate(1.07);
}
.hero-slide[data-slide='1'] .slide-bg img {
  object-position: center 22%;
  filter: brightness(1.42) saturate(1.08);
}
.hero-slide[data-slide='2'] .slide-bg img {
  object-position: center 28%;
  filter: brightness(1.38) saturate(1.08);
}
.hero-slide[data-slide='0'] .slide-overlay {
  background: linear-gradient(90deg, rgba(3, 32, 27, 0.64), rgba(6, 60, 50, 0.38) 48%, rgba(6, 60, 50, 0.03));
}
.hero-slide[data-slide='1'] .slide-overlay.warm {
  background: linear-gradient(90deg, rgba(3, 32, 27, 0.56), rgba(11, 93, 75, 0.3) 54%, transparent);
}
.hero-slide[data-slide='2'] .slide-overlay.night-glow {
  background:
    linear-gradient(90deg, rgba(1, 17, 14, 0.65), rgba(3, 32, 27, 0.38) 52%, rgba(3, 24, 19, 0.04)),
    radial-gradient(circle at 78% 55%, rgba(217, 182, 111, 0.14), transparent 28%);
}
.slide-content h1,
.slide-content h2,
.slide-content p {
  text-shadow: 0 2px 16px rgba(1, 20, 16, 0.48);
}
@media (max-width: 700px) {
  .hero-slide[data-slide='0'] .slide-bg img {
    object-position: 62% center;
    filter: brightness(1.22) saturate(1.06);
  }
  .hero-slide[data-slide='1'] .slide-bg img {
    object-position: 47% center;
    filter: brightness(1.35) saturate(1.07);
  }
  .hero-slide[data-slide='2'] .slide-bg img {
    object-position: 48% center;
    filter: brightness(1.3) saturate(1.06);
  }
  .hero-slide[data-slide='0'] .slide-overlay,
  .hero-slide[data-slide='1'] .slide-overlay.warm,
  .hero-slide[data-slide='2'] .slide-overlay.night-glow {
    background: linear-gradient(180deg, rgba(3, 32, 27, 0.08), rgba(3, 32, 27, 0.42) 57%, rgba(3, 31, 26, 0.86));
  }
}

/* Homepage women training editorial experience */
.kds-ladies-section {
  position: relative;
  overflow: hidden;
  padding: clamp(90px, 9vw, 145px) 0;
  background: linear-gradient(135deg, #f8f7f2 0%, #f3f6f1 58%, #e7f2ee 100%);
  isolation: isolate;
}
.kds-ladies-glow {
  position: absolute;
  z-index: -1;
  right: 4%;
  top: 10%;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: rgba(185, 228, 216, 0.42);
  filter: blur(105px);
}
.kds-ladies-layout {
  display: grid;
  grid-template-columns: minmax(0, 54%) minmax(380px, 46%);
  gap: clamp(65px, 7vw, 110px);
  align-items: center;
}
.kds-ladies-gallery {
  position: relative;
  min-height: 700px;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translateX(-35px);
  transition:
    opacity 0.85s,
    clip-path 1.05s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.85s;
}
.kds-ladies-section.is-visible .kds-ladies-gallery {
  opacity: 1;
  clip-path: inset(0);
  transform: none;
}
.kds-ladies-gallery figure {
  margin: 0;
  overflow: hidden;
}
.kds-ladies-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.75s;
}
.kds-ladies-gallery figure:hover img {
  transform: scale(1.05);
}
.kds-ladies-main {
  position: absolute;
  left: 0;
  top: 0;
  width: 76%;
  height: 590px;
  border-radius: 100px 4px 40px 4px;
  box-shadow: 0 38px 90px rgba(6, 60, 50, 0.2);
}
.kds-ladies-main:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(6, 60, 50, 0.67), transparent 44%);
  opacity: 0.35;
  transition: opacity 0.35s;
}
.kds-ladies-main:hover:after {
  opacity: 0.7;
}
.kds-ladies-main figcaption {
  position: absolute;
  z-index: 2;
  left: 28px;
  right: 28px;
  bottom: 24px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-weight: 800;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.35s;
}
.kds-ladies-main:hover figcaption {
  opacity: 1;
  transform: none;
}
.kds-ladies-main figcaption i {
  font-style: normal;
  color: #d9b66f;
}
.kds-ladies-secondary {
  position: absolute;
  z-index: 3;
  right: 0;
  top: 45px;
  width: 43%;
  height: 500px;
  border: 8px solid #f8f7f2;
  border-radius: 4px 55px 4px 30px;
  box-shadow: 0 28px 70px rgba(6, 60, 50, 0.22);
  opacity: 0;
  transform: translate(34px, -20px);
  transition:
    opacity 0.7s 0.45s,
    transform 0.8s 0.45s;
}
.kds-ladies-section.is-visible .kds-ladies-secondary {
  opacity: 1;
  transform: none;
}
.kds-ladies-detail {
  position: absolute;
  z-index: 4;
  left: 34%;
  bottom: 0;
  width: 36%;
  height: 225px;
  border: 7px solid #f8f7f2;
  border-radius: 50% 50% 8px 8px;
  box-shadow: 0 24px 58px rgba(6, 60, 50, 0.18);
  opacity: 0;
  transform: translateY(32px) scale(0.9);
  transition:
    opacity 0.7s 0.7s,
    transform 0.7s 0.7s;
}
.kds-ladies-section.is-visible .kds-ladies-detail {
  opacity: 1;
  transform: none;
}
.kds-ladies-badge {
  position: absolute;
  z-index: 6;
  left: 17px;
  bottom: 70px;
  display: grid;
  gap: 4px;
  padding: 17px 22px;
  border-left: 4px solid #d9b66f;
  border-radius: 3px 16px 16px 3px;
  background: rgba(248, 247, 242, 0.95);
  box-shadow: 0 18px 48px rgba(6, 60, 50, 0.2);
  color: #063c32;
  opacity: 0;
  transform: translateY(20px);
  transition: 0.6s 0.92s;
  animation: kdsLadiesFloat 4.2s ease-in-out infinite;
}
.kds-ladies-section.is-visible .kds-ladies-badge {
  opacity: 1;
  transform: none;
}
.kds-ladies-badge span {
  color: #64756e;
  font-size: 0.72rem;
}
.kds-ladies-badge strong {
  font-size: 0.92rem;
}
.kds-ladies-route {
  position: absolute;
  z-index: 5;
  left: -4%;
  right: -4%;
  bottom: 12px;
  width: 108%;
  height: 190px;
  pointer-events: none;
}
.kds-ladies-route path {
  fill: none;
  stroke: rgba(11, 93, 75, 0.15);
  stroke-width: 28;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}
.kds-ladies-route-dash {
  stroke: #d9b66f !important;
  stroke-width: 3 !important;
  stroke-dasharray: 14 19 !important;
}
.kds-ladies-section.is-visible .kds-ladies-route path {
  animation: kdsLadiesRoute 2s 0.75s ease forwards;
}
.kds-ladies-content {
  position: relative;
  z-index: 4;
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.75s 0.25s,
    transform 0.75s 0.25s;
}
.kds-ladies-section.is-visible .kds-ladies-content {
  opacity: 1;
  transform: none;
}
.kds-ladies-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #0b5d4b;
  font-weight: 800;
  font-size: 0.84rem;
}
.kds-ladies-kicker:before {
  content: '';
  width: 35px;
  height: 2px;
  background: #d9b66f;
}
.kds-ladies-content h2 {
  margin: 20px 0 24px;
  color: #063c32;
  font-size: clamp(2.45rem, 4.2vw, 4.35rem);
  line-height: 1.17;
  letter-spacing: -0.025em;
}
.kds-ladies-content h2 span {
  display: block;
  overflow: hidden;
  opacity: 0;
  transform: translateY(100%);
}
.kds-ladies-section.is-visible .kds-ladies-content h2 span {
  animation: kdsLadiesHeading 0.72s 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.kds-ladies-section.is-visible .kds-ladies-content h2 span + span {
  animation-delay: 0.54s;
  color: #0b5d4b;
}
.kds-ladies-content > p {
  max-width: 600px;
  color: #56695f;
  font-size: 1rem;
}
.kds-ladies-features {
  display: grid;
  gap: 1px;
  margin: 34px 0;
  background: rgba(11, 93, 75, 0.13);
  border: 1px solid rgba(11, 93, 75, 0.12);
}
.kds-ladies-features article {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 15px;
  padding: 17px 18px;
  background: rgba(248, 247, 242, 0.94);
  opacity: 0;
  transform: translateX(22px);
  transition:
    background 0.3s,
    transform 0.3s;
}
.kds-ladies-section.is-visible .kds-ladies-features article {
  animation: kdsLadiesFeature 0.5s 0.72s forwards;
}
.kds-ladies-section.is-visible .kds-ladies-features article:nth-child(2) {
  animation-delay: 0.86s;
}
.kds-ladies-section.is-visible .kds-ladies-features article:nth-child(3) {
  animation-delay: 1s;
}
.kds-ladies-features article:hover {
  background: #e7f2ee;
  transform: translateX(5px);
}
.kds-ladies-features article > span {
  color: #a47d35;
  font: 700 0.72rem Poppins;
}
.kds-ladies-features h3 {
  margin: 0 0 3px;
  color: #063c32;
  font-size: 0.98rem;
}
.kds-ladies-features p {
  margin: 0;
  color: #65766e;
  font-size: 0.78rem;
}
.kds-ladies-actions {
  display: flex;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
}
.kds-ladies-link {
  position: relative;
  color: #0b5d4b;
  font-weight: 800;
  font-size: 0.88rem;
}
.kds-ladies-link:after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 1px;
  background: #d9b66f;
  transition: right 0.3s;
}
.kds-ladies-link:hover:after {
  right: 0;
}
.kds-ladies-lanes {
  position: absolute;
  right: -20px;
  bottom: -45px;
  display: flex;
  gap: 55px;
  opacity: 0.16;
  transform: rotate(-20deg);
}
.kds-ladies-lanes span {
  width: 7px;
  height: 180px;
  background: #0b5d4b;
}
.kds-ladies-lanes span:nth-child(2) {
  background: #d9b66f;
}
@keyframes kdsLadiesHeading {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes kdsLadiesFeature {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes kdsLadiesRoute {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes kdsLadiesFloat {
  50% {
    translate: 0 -7px;
  }
}
@media (max-width: 1000px) {
  .kds-ladies-layout {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .kds-ladies-gallery {
    max-width: 800px;
    min-height: 650px;
  }
  .kds-ladies-content {
    max-width: 760px;
  }
  .kds-ladies-main {
    height: 540px;
  }
  .kds-ladies-secondary {
    height: 455px;
  }
}
@media (max-width: 600px) {
  .kds-ladies-section {
    padding: 78px 0 90px;
  }
  .kds-ladies-layout {
    gap: 34px;
  }
  .kds-ladies-gallery {
    min-height: 530px;
  }
  .kds-ladies-main {
    width: 100%;
    height: 355px;
    border-radius: 58px 4px 30px 4px;
  }
  .kds-ladies-main figcaption {
    opacity: 1;
    transform: none;
    font-size: 0.78rem;
  }
  .kds-ladies-secondary {
    right: 0;
    top: 280px;
    width: 47%;
    height: 215px;
    border-width: 5px;
    border-radius: 4px 35px 4px 22px;
  }
  .kds-ladies-detail {
    left: 0;
    bottom: 0;
    width: 48%;
    height: 185px;
    border-width: 5px;
  }
  .kds-ladies-badge {
    left: 15px;
    bottom: 164px;
    padding: 12px 15px;
  }
  .kds-ladies-route {
    height: 120px;
    bottom: 3px;
  }
  .kds-ladies-content h2 {
    font-size: clamp(2.1rem, 9.6vw, 2.9rem);
  }
  .kds-ladies-content > p {
    font-size: 0.93rem;
  }
  .kds-ladies-features {
    margin: 27px 0;
  }
  .kds-ladies-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .kds-ladies-actions .btn {
    width: 100%;
  }
  .kds-ladies-link {
    text-align: center;
  }
  .kds-ladies-lanes {
    display: none;
  }
}
@media (max-width: 360px) {
  .kds-ladies-gallery {
    min-height: 500px;
  }
  .kds-ladies-main {
    height: 330px;
  }
  .kds-ladies-secondary {
    top: 262px;
    height: 205px;
  }
  .kds-ladies-detail {
    height: 170px;
  }
  .kds-ladies-badge {
    bottom: 152px;
  }
  .kds-ladies-features article {
    padding: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kds-ladies-gallery,
  .kds-ladies-secondary,
  .kds-ladies-detail,
  .kds-ladies-badge,
  .kds-ladies-content,
  .kds-ladies-content h2 span,
  .kds-ladies-features article {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
    animation: none !important;
  }
  .kds-ladies-route path {
    stroke-dashoffset: 0;
    animation: none !important;
  }
  .kds-ladies-badge {
    animation: none;
  }
  .kds-ladies-gallery img {
    transition: none;
  }
}

/* Services directory: homepage-scale typography and light automotive backdrop. */
.services-directory {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f8f7f2, #e7f2ee);
  isolation: isolate;
}
.services-directory:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 20%, rgba(185, 228, 216, 0.52), transparent 30%),
    repeating-radial-gradient(
      ellipse at 88% 72%,
      transparent 0 58px,
      rgba(11, 93, 75, 0.06) 59px 60px
    );
}
.services-directory-road {
  position: absolute;
  right: -5%;
  bottom: -80px;
  width: 48%;
  height: 260px;
  border: 28px solid rgba(11, 93, 75, 0.07);
  border-left: 0;
  border-bottom: 0;
  border-radius: 70% 0 0 0;
  transform: rotate(-8deg);
}
.services-directory-road:after {
  content: '';
  position: absolute;
  left: 8%;
  right: 0;
  top: 12px;
  border-top: 2px dashed rgba(217, 182, 111, 0.62);
}
.services-directory-grid {
  position: relative;
  z-index: 2;
  gap: 22px;
}
.services-directory-grid .info-card {
  display: flex;
  min-height: 320px;
  flex-direction: column;
  padding: 30px;
  border: 1px solid rgba(11, 93, 75, 0.13);
  border-radius: 22px;
  background-image:
    linear-gradient(
      110deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(255, 255, 255, 0.94) 52%,
      rgba(238, 247, 243, 0.72) 100%
    ),
    url('https://images.pexels.com/photos/19477337/pexels-photo-19477337.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=900&h=650');
  background-size: cover;
  background-position: center;
  box-shadow: 0 16px 46px rgba(6, 60, 50, 0.08);
  transition:
    transform 0.3s,
    box-shadow 0.3s,
    border-color 0.3s;
}
.services-directory-grid .info-card:nth-child(1) {
  background-position: 42% center;
}
.services-directory-grid .info-card:nth-child(2) {
  background-position: 58% center;
}
.services-directory-grid .info-card:nth-child(3) {
  background-position: 70% center;
}
.services-directory-grid .info-card:nth-child(4) {
  background-position: 28% center;
}
.services-directory-grid .info-card:nth-child(5) {
  background-position: 82% center;
}
.services-directory-grid .info-card:nth-child(6) {
  background-position: center 65%;
}
.services-directory-grid .info-card:hover {
  transform: translateY(-7px);
  border-color: rgba(217, 182, 111, 0.7);
  box-shadow: 0 24px 58px rgba(6, 60, 50, 0.14);
}
.services-directory-grid .card-number {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 23px;
  border-radius: 50%;
  background: #0b5d4b;
  color: #fff;
  font: 700 0.76rem Poppins;
}
.services-directory-grid h2 {
  margin: 0 0 15px;
  color: #063c32;
  font-size: clamp(1.28rem, 1.65vw, 1.55rem);
  line-height: 1.35;
  letter-spacing: -0.012em;
}
.services-directory-grid p {
  margin: 0;
  color: #62736b;
  font-size: 0.9rem;
  line-height: 1.65;
}
.services-directory-grid .text-link {
  margin-top: auto;
  padding-top: 22px;
  color: #0b5d4b;
  font-size: 0.88rem;
  font-weight: 800;
}
.services-directory-grid .text-link:hover {
  color: #063c32;
}
@media (max-width: 900px) {
  .services-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .services-directory-grid .info-card {
    min-height: 285px;
  }
  .services-directory {
    background-position: 58% center;
  }
}
@media (max-width: 600px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }
  img,
  video,
  iframe,
  svg {
    max-width: 100%;
  }
  .container {
    width: min(var(--container), calc(100% - 28px));
  }
  .services-directory {
    padding: 64px 0;
    background: linear-gradient(135deg, #f8f7f2, #e7f2ee);
  }
  .services-directory-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .services-directory-grid .info-card {
    min-height: 0;
    padding: 23px;
    border-radius: 18px;
    background-image:
      linear-gradient(110deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.91)),
      url('https://images.pexels.com/photos/19477337/pexels-photo-19477337.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=700&h=500');
  }
  .services-directory-grid .card-number {
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
  }
  .services-directory-grid h2 {
    font-size: 1.25rem;
  }
  .services-directory-grid p {
    font-size: 0.86rem;
  }
  .services-directory-road {
    display: none;
  }
  .page-hero h1 {
    overflow-wrap: anywhere;
  }
  .cta-row > .btn {
    max-width: 100%;
  }
  .footer-grid {
    gap: 30px;
  }
}

/* A separate title-matched photograph for every services directory card. */
.services-directory-grid .info-card:nth-child(1) {
  background-image:
    linear-gradient(
      110deg,
      rgba(255, 255, 255, 0.97),
      rgba(255, 255, 255, 0.91) 58%,
      rgba(238, 247, 243, 0.72)
    ),
    url('https://images.pexels.com/photos/210019/pexels-photo-210019.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=900&h=650');
  background-position: center;
}

/* Authentic, title-matched service imagery with a localized reading layer. */
.services-directory-grid .info-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #eef5f2;
}
.services-directory-grid .info-card::before,
.services-directory-grid .info-card::after {
  position: absolute;
  inset: 0;
  content: '';
}
.services-directory-grid .info-card::before {
  z-index: -2;
  background-image: var(--service-image);
  background-position: var(--service-position, center);
  background-size: cover;
  filter: brightness(1.03) contrast(1.08) saturate(1.04);
  transform: scale(1.01);
  transition: transform 0.55s ease, filter 0.55s ease;
}
.services-directory-grid .info-card::after {
  z-index: -1;
  background: linear-gradient(90deg, rgba(250,252,250,.9), rgba(250,252,250,.74) 48%, rgba(244,249,247,.32) 72%, rgba(238,247,243,.04));
}
.services-directory-grid .info-card:hover::before {
  filter: brightness(1.06) contrast(1.1) saturate(1.06);
  transform: scale(1.04);
}
@media (max-width: 600px) {
  .services-directory-grid .info-card {
    background: #eef5f2;
  }
  .services-directory-grid .info-card::after {
    background: linear-gradient(90deg, rgba(250,252,250,.92), rgba(250,252,250,.76) 56%, rgba(238,247,243,.12));
  }
}
.services-directory-grid .info-card:nth-child(2) {
  background-image:
    linear-gradient(
      110deg,
      rgba(255, 255, 255, 0.97),
      rgba(255, 255, 255, 0.91) 58%,
      rgba(238, 247, 243, 0.72)
    ),
    url('https://images.pexels.com/photos/1118448/pexels-photo-1118448.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=900&h=650');
  background-position: center;
}
.services-directory-grid .info-card:nth-child(3) {
  background-image:
    linear-gradient(
      110deg,
      rgba(255, 255, 255, 0.97),
      rgba(255, 255, 255, 0.91) 58%,
      rgba(238, 247, 243, 0.72)
    ),
    url('https://images.pexels.com/photos/376729/pexels-photo-376729.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=900&h=650');
  background-position: center;
}
.services-directory-grid .info-card:nth-child(4) {
  background-image:
    linear-gradient(
      110deg,
      rgba(255, 255, 255, 0.97),
      rgba(255, 255, 255, 0.91) 58%,
      rgba(238, 247, 243, 0.72)
    ),
    url('https://images.pexels.com/photos/261985/pexels-photo-261985.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=900&h=650');
  background-position: center;
}
.services-directory-grid .info-card:nth-child(5) {
  background-image:
    linear-gradient(
      110deg,
      rgba(255, 255, 255, 0.97),
      rgba(255, 255, 255, 0.91) 58%,
      rgba(238, 247, 243, 0.72)
    ),
    url('https://images.pexels.com/photos/5905445/pexels-photo-5905445.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=900&h=650');
  background-position: center;
}
.services-directory-grid .info-card:nth-child(6) {
  background-image:
    linear-gradient(
      110deg,
      rgba(255, 255, 255, 0.97),
      rgba(255, 255, 255, 0.91) 58%,
      rgba(238, 247, 243, 0.72)
    ),
    url('https://images.pexels.com/photos/7735630/pexels-photo-7735630.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=900&h=650');
  background-position: center;
}

/* Training options use the same compact image-card language as the services page. */
.training-directory {
  position: relative;
  background: linear-gradient(135deg, #f8f7f2, #e7f2ee);
}
.training-directory-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.training-directory-card {
  position: relative;
  display: flex;
  min-height: 255px;
  padding: 26px;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(11, 93, 75, 0.13);
  border-radius: 22px;
  background: #eef5f2;
  box-shadow: 0 16px 46px rgba(6, 60, 50, 0.08);
  transition: transform 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.training-directory-card::before,
.training-directory-card::after {
  position: absolute;
  inset: 0;
  content: '';
}
.training-directory-card::before {
  z-index: -2;
  background-image: var(--training-image);
  background-position: var(--training-position, center);
  background-size: cover;
  filter: brightness(1.03) contrast(1.08) saturate(1.04);
  transform: scale(1.01);
  transition: transform 0.55s ease, filter 0.55s ease;
}
.training-directory-card::after {
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(250, 252, 250, 0.9) 0%,
    rgba(250, 252, 250, 0.74) 42%,
    rgba(244, 249, 247, 0.3) 64%,
    rgba(238, 247, 243, 0.03) 100%
  );
}
.training-directory-card > div {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
}
.training-directory .training-directory-card h2 {
  max-width: 420px;
  margin: 9px 0 10px;
  color: #063c32;
  font-size: clamp(1.28rem, 1.65vw, 1.55rem);
  line-height: 1.35;
  letter-spacing: -0.012em;
}
.training-directory-card p {
  max-width: 430px;
  margin: 0;
  color: #62736b;
  font-size: 0.86rem;
  line-height: 1.55;
}
.training-card-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9a7530;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.035em;
}
.training-card-kicker::before {
  content: '';
  width: 18px;
  height: 2px;
  background: #d9b66f;
}
.training-card-points {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0;
  margin: 15px 0 0;
  list-style: none;
}
.training-card-points li {
  padding: 5px 9px;
  border: 1px solid rgba(11, 93, 75, 0.12);
  border-radius: 999px;
  background: rgba(231, 242, 238, 0.9);
  color: #0b5d4b;
  font-size: 0.7rem;
  font-weight: 750;
}
.training-directory-card .text-link {
  margin-top: auto;
  padding-top: 17px;
  color: #0b5d4b;
  font-size: 0.88rem;
  font-weight: 800;
}
.training-directory-card:hover {
  transform: translateY(-4px);
  border-color: rgba(217, 182, 111, 0.7);
  box-shadow: 0 24px 58px rgba(6, 60, 50, 0.14);
}
.training-directory-card:hover::before {
  filter: brightness(1.06) contrast(1.1) saturate(1.06);
  transform: scale(1.04);
}
.training-directory-card:hover .text-link {
  transform: translateX(3px);
}
.training-directory-card .text-link {
  transition: transform 0.45s ease;
}
@media (max-width: 700px) {
  .training-directory-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .training-directory-card {
    min-height: 225px;
    padding: 21px;
    border-radius: 18px;
  }
  .training-directory-card::after {
    background: linear-gradient(
      90deg,
      rgba(250, 252, 250, 0.92) 0%,
      rgba(250, 252, 250, 0.76) 54%,
      rgba(238, 247, 243, 0.12) 100%
    );
  }
  .training-directory .training-directory-card h2 {
    font-size: 1.25rem;
  }
  .training-directory-card p {
    font-size: 0.86rem;
  }
}

/* Licence and vehicle services cards share the compact, image-led directory system. */
.vehicle-services-directory {
  position: relative;
  background: linear-gradient(135deg, #f8f7f2, #e7f2ee);
}
.vehicle-services-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.vehicle-services-card {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(11, 93, 75, 0.13);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 46px rgba(6, 60, 50, 0.08);
  transition: transform 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.vehicle-services-card::before,
.vehicle-services-card::after {
  display: none;
}
.vehicle-card-media {
  height: 220px;
  margin: 0;
  overflow: hidden;
  background: #e7f2ee;
}
.vehicle-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease, filter 0.55s ease;
}
.vehicle-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 24px 24px;
}
.vehicle-services-card:hover {
  transform: translateY(-4px);
  border-color: rgba(217, 182, 111, 0.7);
  box-shadow: 0 24px 58px rgba(6, 60, 50, 0.14);
}
.vehicle-services-card:hover .vehicle-card-media img {
  filter: brightness(1.04) saturate(1.05);
  transform: scale(1.045);
}
.vehicle-services-card:hover .vehicle-card-link {
  transform: translateX(3px);
}
.vehicle-services-directory .vehicle-services-card .card-number {
  width: 42px;
  height: 42px;
  margin: 0;
  font-size: 0.7rem;
}
.vehicle-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  width: 100%;
}
.vehicle-card-top .card-number {
  margin-left: auto;
}
.vehicle-services-directory .vehicle-services-card h2 {
  margin: 0 0 9px;
  color: #063c32;
  font-size: clamp(1.28rem, 1.65vw, 1.55rem);
  line-height: 1.35;
  letter-spacing: -0.012em;
}
.vehicle-services-card p {
  margin: 0;
  color: #62736b;
  font-size: 0.84rem;
  line-height: 1.55;
}

/* Shared image-first card: service and training directories use one visual system. */
.image-info-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(11, 93, 75, 0.13);
  border-radius: 22px;
  box-shadow: 0 16px 46px rgba(6, 60, 50, 0.08);
}
.services-directory-grid .image-info-card::before,
.services-directory-grid .image-info-card::after,
.training-directory-card.image-info-card::before,
.training-directory-card.image-info-card::after {
  display: none;
}
.image-info-card-media {
  width: 100%;
  height: 220px;
  margin: 0;
  overflow: hidden;
  background: #e7f2ee;
}
.image-info-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transform: none;
  transition: transform 0.55s ease, filter 0.55s ease;
}
.image-info-card:hover .image-info-card-media img {
  filter: brightness(1.04) saturate(1.05);
  transform: scale(1.045);
}
.image-info-card-body {
  display: flex;
  width: 100%;
  min-height: 245px;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 24px 24px;
}
.image-info-card-top {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.image-info-card-top .card-number {
  margin: 0 0 0 auto;
}
.training-directory .image-info-card .card-number {
  width: 42px;
  height: 42px;
  margin: 0 0 0 auto;
  font-size: 0.7rem;
}
.services-directory-grid .image-info-card .text-link,
.training-directory-card.image-info-card .text-link {
  margin-top: auto;
  padding-top: 18px;
}
@media (max-width: 600px) {
  .image-info-card {
    min-height: 0;
    padding: 0;
    border-radius: 18px;
  }
  .image-info-card-media {
    height: 210px;
  }
  .image-info-card-body {
    min-height: 225px;
    padding: 19px 20px 21px;
  }
}
.vehicle-services-card .training-card-points {
  margin-top: 14px;
}
.vehicle-card-link {
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.84rem;
  transition: transform 0.45s ease;
}
/* Training journey: reusable numbered icon-card progression. */
.training-journey {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(185, 228, 216, 0.45), transparent 25%),
    linear-gradient(145deg, #edf6f2, #e7f2ee 58%, #f8f7f2);
}
.journey-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.journey-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: journey;
}
.journey-step {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 16px;
  min-height: 190px;
  padding: 24px 20px;
  border: 1px solid rgba(11, 93, 75, 0.13);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 15px 38px rgba(6, 60, 50, 0.08);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.journey-step:not(:nth-child(4n))::after {
  content: '→';
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -15px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #d9b66f;
  color: #063c32;
  font-weight: 900;
  transform: translateY(-50%);
}
.journey-step:hover {
  z-index: 3;
  transform: translateY(-7px);
  border-color: rgba(217, 182, 111, 0.8);
  box-shadow: 0 24px 52px rgba(6, 60, 50, 0.14);
}
.journey-step-number {
  position: absolute;
  top: 17px;
  right: 18px;
  color: #a17b32;
  font:
    700 0.72rem Poppins,
    sans-serif;
  letter-spacing: 0.08em;
}
.journey-step-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 16px;
  background: #e7f2ee;
  color: #0b5d4b;
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}
.journey-step-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.journey-step-icon .card-icon {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  transform: none;
}
.journey-step:hover .journey-step-icon {
  color: #063c32;
  background: #d9b66f;
  transform: rotate(-4deg) scale(1.07);
}
.journey-step > div {
  align-self: center;
  padding-top: 18px;
}
.journey-step strong {
  display: block;
  color: #063c32;
  font-size: 1rem;
  line-height: 1.45;
}
.journey-step p {
  margin: 7px 0 0;
  color: #62736b;
  font-size: 0.78rem;
  line-height: 1.55;
}
@media (max-width: 960px) {
  .journey-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .journey-step:not(:nth-child(4n))::after {
    display: none;
  }
}
@media (max-width: 600px) {
  .journey-steps {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .journey-step {
    min-height: 0;
    grid-template-columns: 48px 1fr;
    padding: 18px;
    border-radius: 16px;
  }
  .journey-step-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .journey-step-icon svg {
    width: 28px;
    height: 28px;
  }
  .journey-step > div {
    padding-top: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .journey-step,
  .journey-step-icon {
    transition: none;
  }
}

/* Journey card image and route-arrow refinement. */
.journey-steps .journey-step {
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: #fff;
}
.journey-step-photo {
  position: relative;
  height: 145px;
  margin: 0;
  overflow: hidden;
  border-radius: 19px 19px 0 0;
  background: #dce9e3;
}
.journey-step-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(6, 60, 50, 0.44));
}
.journey-step-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}
.journey-step:hover .journey-step-photo img {
  transform: scale(1.07);
}
.journey-step > .journey-step-content {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 14px;
  min-height: 132px;
  padding: 20px 18px 22px;
  background: linear-gradient(135deg, #fff, #f7fbf9);
  border-radius: 0 0 19px 19px;
}
.journey-step-copy {
  align-self: center;
  min-width: 0;
}
.journey-steps .journey-step-number {
  z-index: 3;
  top: 14px;
  right: 14px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(6, 60, 50, 0.9);
  color: #fff;
  font-size: 0.68rem;
  backdrop-filter: blur(7px);
}
.journey-steps .journey-step-icon {
  width: 50px;
  height: 50px;
}
.journey-steps .journey-step:not(:nth-child(4n))::after {
  content: '➜';
  z-index: 6;
  top: 47%;
  right: -20px;
  width: 40px;
  height: 40px;
  border: 4px solid #e7f2ee;
  background: #d9b66f;
  font-size: 1.05rem;
  box-shadow: 0 8px 22px rgba(6, 60, 50, 0.2);
}
@media (max-width: 960px) {
  .journey-steps .journey-step:not(:nth-child(4n))::after {
    display: none;
  }
  .journey-steps .journey-step:not(:nth-child(2n))::after {
    display: grid;
  }
}
@media (max-width: 600px) {
  .journey-step-photo {
    height: 180px;
    border-radius: 15px 15px 0 0;
  }
  .journey-step > .journey-step-content {
    min-height: 0;
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 17px;
    border-radius: 0 0 15px 15px;
  }
  .journey-steps .journey-step:not(:last-child)::after,
  .journey-steps .journey-step:not(:nth-child(2n))::after {
    content: '↓';
    top: auto;
    right: 50%;
    bottom: -25px;
    display: grid;
    transform: translateX(50%);
  }
  .journey-steps .journey-step:last-child::after {
    display: none;
  }
}
.vehicle-services-card:hover {
  border-color: rgba(217, 182, 111, 0.7);
  box-shadow: 0 24px 58px rgba(6, 60, 50, 0.14);
}
@media (max-width: 900px) {
  .vehicle-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vehicle-services-card {
    min-height: 0;
  }
}
@media (max-width: 600px) {
  .vehicle-services-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .vehicle-services-card {
    min-height: 0;
    padding: 0;
    border-radius: 18px;
  }
  .vehicle-card-media {
    height: 210px;
  }
  .vehicle-card-body {
    padding: 19px 20px 21px;
  }
  .vehicle-services-directory .vehicle-services-card .card-number {
    width: 42px;
    height: 42px;
    margin: 0;
  }
  .vehicle-services-directory .vehicle-services-card h2 {
    font-size: 1.25rem;
  }
  .vehicle-services-card p {
    font-size: 0.86rem;
  }
}