/* Homepage sections. Every size, weight, radius, and ratio here was measured
   off the reference at a 1920px viewport — see README. */

.hl {
  color: var(--rnx-accent);
}

.section-head {
  text-align: center;
}

.section-head p {
  margin-left: auto;
  margin-right: auto;
}

.section-head--light h2,
.section-head--light p {
  color: var(--rnx-white);
}

/* ---- Overlay card -------------------------------------------------------- *
 * The theme's signature card: image, content pinned to the bottom, and a
 * notched bottom-left corner holding a circular button. Shared by the about
 * media, service cards, car-type tiles, and article cards.                    */

.ov-card {
  position: relative;
  border-radius: var(--rnx-radius-card);
  overflow: hidden;
}

.ov-card__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform var(--rnx-dur-slow) var(--rnx-ease);
}

.ov-card:hover .ov-card__img {
  transform: scale(1.05);
}

.ov-card__fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgb(0, 0, 0) 0%,
    rgba(0, 0, 0, 0.737) 19%,
    rgba(0, 0, 0, 0.54) 34%,
    rgba(0, 0, 0, 0.3) 52%,
    rgba(0, 0, 0, 0) 100%
  );
}

.ov-card__text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 20px 25px 110px;
  color: var(--rnx-white);
}

.ov-card__cat {
  margin: 0 0 4px;
  color: var(--rnx-accent);
  font-size: var(--rnx-size-eyebrow);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--rnx-tracking-eyebrow);
  text-transform: uppercase;
}

.ov-card__title {
  margin: 0;
  color: var(--rnx-white);
  font-size: var(--rnx-size-card-title);
  font-weight: var(--rnx-weight-card-title);
  line-height: var(--rnx-lh-card-title);
}

.ov-card__title a {
  color: var(--rnx-white);
}

.ov-card__title a:hover {
  color: var(--rnx-accent);
}

/* Stretch the title link over the whole card so the image is clickable
   without adding a second link for assistive tech to announce. */
.ov-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ov-card__corner {
  position: absolute;
  left: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: var(--rnx-corner-size);
  height: var(--rnx-corner-size);
  background: var(--rnx-white);
  border-radius: 0 45px 0 0;
}

.ov-card__btn {
  display: grid;
  place-items: center;
  width: var(--rnx-corner-btn);
  height: var(--rnx-corner-btn);
  border-radius: 50%;
  background: var(--rnx-accent);
  color: var(--rnx-ink);
  font-size: 17px;
  font-weight: 600;
  transition: transform var(--rnx-dur) var(--rnx-ease);
}

.ov-card:hover .ov-card__btn {
  transform: scale(1.06);
}

/* Article cards are portrait; everything else is square. */
.ov-card--post .ov-card__img {
  aspect-ratio: 5 / 6;
}

/* Smaller corner: 90px notch with a 60px button. The reference uses this on
   the about, car-type and process blocks, and the larger 100/70 on the
   service and article cards. */
.ov-card--corner-sm .ov-card__corner {
  width: 90px;
  height: 90px;
  border-radius: 0 40px 0 0;
}

.ov-card--corner-sm .ov-card__btn {
  width: 60px;
  height: 60px;
}

/* Car types put the label at the top and carry no bottom fade. */
.ov-card__text--top {
  top: 0;
  bottom: auto;
  padding: 30px;
}

.ov-card__fade--top {
  inset: 0 0 auto 0;
  height: 45%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Service cards swap the gradient for a solid bar. */
.ov-card--service .ov-card__text {
  padding: 22px 26px 22px 110px;
  background: var(--rnx-bg-dark);
  border-radius: 0 var(--rnx-radius-card-all) 0 0;
}

/* On a soft-grey section the notch has to match the section, not the page. */
.bg-soft .ov-card__corner {
  background: var(--rnx-bg-soft);
}

/* ---- 1. Hero ------------------------------------------------------------- */

.hero {
  position: relative;
}

.hero-slide {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--rnx-white);
  /* Comes from the custom property the template writes, so the media query in
     responsive.css can swap in the portrait crop. An inline background-image
     could not be overridden by a media query. */
  background-image: var(--hero-img);
}

/* The copy sits on the left, so weight the scrim that way — the car stays
   visible on the right while the headline keeps its contrast over a light
   colour like the white Cullinan. */
.hero-slide::before {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.55) 35%,
    rgba(0, 0, 0, 0.25) 65%,
    rgba(0, 0, 0, 0.35) 100%
  );
}

.hero-slide__copy {
  max-width: 780px;
  padding-top: var(--rnx-header-h);
}

.hero-slide__title {
  margin: 0 0 10px;
  color: var(--rnx-white);
  font-family: var(--rnx-font);
  font-size: var(--rnx-size-hero);
  font-weight: 700;
  line-height: var(--rnx-lh-hero);
  letter-spacing: normal;
}

.hero-slide__meta {
  display: flex;
  /* Wraps rather than forcing one line: a long name like "Rolls-Royce Ghost
     Black Badge" otherwise broke across two lines *inside* the flex row while
     the price stayed beside it on a mismatched baseline. */
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 22px 0 30px;
  font-size: 16px;
  font-weight: 300;
}

/* Rate and unit travel together when the name takes the whole first line. */
.hero-slide__rate {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

.hero-slide__meta strong {
  color: var(--rnx-accent);
  font-size: 24px;
  font-weight: 700;
}

.hero-slide__per {
  font-size: 12px;
  letter-spacing: var(--rnx-tracking-ui);
  text-transform: uppercase;
  opacity: 0.8;
}

.hero-slide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-pagination {
  position: absolute;
  bottom: 34px !important;
  z-index: 5;
}

.swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  border: 1px solid var(--rnx-accent);
  border-radius: 50%;
  background: transparent;
  opacity: 1;
  transition: background var(--rnx-dur) var(--rnx-ease);
}

.swiper-pagination-bullet-active {
  background: var(--rnx-accent);
}

/* ---- 2. About ------------------------------------------------------------ */

.about__content .eyebrow {
  margin-bottom: 6px;
}

.about__content h2 {
  margin-bottom: 22px;
}

.about__list {
  margin: 26px 0 32px;
}

.about__list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: var(--rnx-ink);
  font-weight: 400;
}

.about__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 14px;
  height: 2px;
  background: var(--rnx-accent);
}

/* ---- 3. Services --------------------------------------------------------- */

/* Room for the dots: 10px gap plus the dot row, as in the reference. */
.services-swiper,
.blog-swiper,
.types-swiper {
  padding-bottom: 41px;
}

/* ---- 4. Booking ---------------------------------------------------------- */

/* The reference varies the gap under the head by section: 30px is the norm,
   but the booking band uses 15px and the video band none at all. */
.booking .section-head {
  margin-bottom: 15px;
}

.promo-video .section-head {
  margin-bottom: 0;
}

/* 1176x90 pill, per the reference. */
.booking-form {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 60px;
  background: var(--rnx-white);
  box-shadow: var(--rnx-shadow);
}

.booking-field {
  flex: 1;
  min-width: 0;
  padding: 0 6px;
  border-left: 1px solid var(--rnx-rule);
}

.booking-field:first-child {
  border-left: 0;
}

.booking-field select,
.booking-field input {
  width: 100%;
  padding: 16px 12px;
  line-height: 28px;
  border: 0;
  background: none;
  color: var(--rnx-body);
  font-family: inherit;
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;

  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5b754' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
}

.booking-field input[type="date"] {
  background-image: none;
}

.booking-field select:focus,
.booking-field input:focus {
  outline: none;
  color: var(--rnx-ink);
}

.booking-field select:invalid {
  color: var(--rnx-muted);
}

.booking-submit {
  flex: none;
  justify-content: center;
  min-width: 160px;
  padding: 20px 30px;
}

.form-status--booking {
  margin-top: 14px;
  text-align: center;
  color: var(--rnx-white);
}

/* ---- 5. Fleet ------------------------------------------------------------ */

/* The reference sizes the carousel track to exactly one 800px slide, centres
   it, and lets overflow show — that is what puts the neighbouring cars off
   both edges. Swiper clips by default, so overflow has to be re-enabled. */
/* Full-width wrapper that clips at the viewport edge, so the neighbouring cars
   bleed to both edges without the page gaining a horizontal scroll. */
.fleet-swiper-outer {
  overflow: hidden;
}

.fleet-swiper {
  width: var(--rnx-slide-w);
  margin: 0 auto;
  overflow: visible;
}

.fleet-swiper .swiper-slide {
  width: var(--rnx-slide-w);
}

/* Prev / next: 55px amber circles inset 10px, centred on the photo.
   9/32 is half of the image's 9:16 height, so they stay centred as the slide
   scales down. */
.fleet-nav {
  position: absolute;
  z-index: 5;
  top: calc(var(--rnx-slide-w) * 9 / 32 - 27.5px);
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  border: 0;
  border-radius: 50%;
  background: var(--rnx-accent);
  color: var(--rnx-ink);
  cursor: pointer;
  transition: background var(--rnx-dur) var(--rnx-ease);
}

.fleet-nav:hover {
  background: var(--rnx-white);
}

.fleet-nav .ico {
  width: 18px;
  height: 18px;
}

.fleet-nav--prev {
  left: 15px;
}

.fleet-nav--prev .ico {
  transform: rotate(90deg);
}

.fleet-nav--next {
  right: 15px;
}

.fleet-nav--next .ico {
  transform: rotate(-90deg);
}

.car-card {
  height: 100%;
}

.car-card__img {
  display: block;
  border-radius: var(--rnx-radius-card-all);
  overflow: hidden;
}

.car-card__img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--rnx-dur-slow) var(--rnx-ease);
}

.car-card:hover .car-card__img img {
  transform: scale(1.05);
}

/* Card is a column so panels stay level across a row of grid cards. */
.car-card {
  display: flex;
  flex-direction: column;
}

/* Information panel: inset 25px each side, lifted 55px over the photo.
   Split 58.33 / 41.67 with 12px gutters, matching the reference's
   col-md-7 / col-md-5 row. */
.car-card__con {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  margin: -55px 25px 0;
  padding: 30px 25px;
  border-radius: var(--rnx-radius-card-all);
  background: var(--rnx-bg-soft);
}

.car-card__main {
  flex: 0 0 58.3333%;
  min-width: 0;
  padding-right: 12px;
}

/* No gap under the title — the reference butts the spec row straight up
   against it, which is what makes the panel exactly 113px tall. */
.car-card__title {
  margin-bottom: 0;
  font-size: var(--rnx-size-card-title);
  line-height: 1.2;
}

/* Spacing matched to the reference so all four specs sit on one line: 10px
   between items, 3px between an icon and its label. */
.car-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: 14px;
  font-weight: 300;
}

.car-card__specs li {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.car-card__specs .ico {
  width: 14px;
  height: 14px;
  color: var(--rnx-accent);
}

.car-card__book {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 41.6667%;
  padding-left: 12px;
}

/* Amber pill, same shape as the site buttons but sized to the panel. */
.car-card__btn {
  padding: 14px 21px;
  border: 1px solid var(--rnx-accent);
  border-radius: var(--rnx-radius);
  background: var(--rnx-accent);
  color: var(--rnx-ink);
  font-size: 14px;
  font-weight: 300;
  /* Not the 1.95 body line-height: the reference's pill is 51px tall, which is
     1px border + 14px padding + 21px of line box, twice over. */
  line-height: 21px;
  white-space: nowrap;
  transition:
    background var(--rnx-dur) var(--rnx-ease),
    color var(--rnx-dur) var(--rnx-ease);
}

.car-card__btn:hover {
  background: transparent;
  color: var(--rnx-ink);
}

.car-card__price {
  margin: 0;
  text-align: right;
  line-height: 1.2;
}

/* "AED 4,500" is far longer than the reference's "$900" — without this it
   breaks after the currency and doubles the panel height. */
.car-card__price strong {
  display: block;
  color: var(--rnx-accent);
  font-size: var(--rnx-size-card-title);
  font-weight: 700;
  white-space: nowrap;
}

.car-card__price span {
  font-size: 14px;
  font-weight: 300;
}

/* In the carousel the panel belongs to the centred slide only, as in the
   reference — the cars either side read as photographs. Written as a single
   :not() rule so there is no pair of competing declarations to reason about.
   Outside the carousel (grids, listings) the panel is always shown. */
.fleet-swiper .car-card__con {
  transition: opacity var(--rnx-dur) var(--rnx-ease);
}

.fleet-swiper .swiper-slide:not(.swiper-slide-active) .car-card__con {
  opacity: 0;
}

/* ---- 6. Car types -------------------------------------------------------- */

/* Three across with a 30px gap, which lands each tile on the reference's
   372px inside a 1176px container. Bootstrap's gutters cannot produce that. */
.car-types__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.type-grid {
  row-gap: 30px;
}

/* ---- 7. Process ---------------------------------------------------------- */

.process__row {
  row-gap: 40px;
}

/* Grey panel with the step number in a notched bottom-left corner. */
/* 90px of bottom padding reserves the notch, so the number never sits on the
   text — the reference leaves a 20px gap between the two. */
.process-step {
  position: relative;
  height: 100%;
  padding: 60px 40px 90px;
  border-radius: var(--rnx-radius-card);
  background: var(--rnx-bg-soft);
}

.process-step h4 {
  margin-bottom: 15px;
}

.process-step__text {
  padding-bottom: 20px;
}

.process-step__corner {
  position: absolute;
  left: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 90px;
  height: 90px;
  background: var(--rnx-white);
  border-radius: 0 40px 0 0;
}

.process-step__num {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--rnx-bg-soft);
  color: var(--rnx-ink);
  font-size: 14px;
  font-weight: 700;
}

.process__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
  padding: 15px 0;
  font-size: 14px;
  font-weight: 300;
}

.process__note-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--rnx-accent);
  color: var(--rnx-ink);
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
}

/* ---- 8. Promo video ------------------------------------------------------ */

.promo-video {
  text-align: center;
}


.promo-video__play {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--rnx-accent);
  color: var(--rnx-ink);
  font-size: 26px;
  padding-left: 6px;
  transition: transform var(--rnx-dur) var(--rnx-ease);
}

.promo-video__play:hover {
  transform: scale(1.07);
  color: var(--rnx-ink);
}

.promo-video__play::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid var(--rnx-accent);
  animation: rnx-pulse 2s ease-out infinite;
}

@keyframes rnx-pulse {
  to {
    transform: scale(1.7);
    opacity: 0;
  }
}

/* ---- 9. Blog ------------------------------------------------------------- */

.blog-grid {
  row-gap: 40px;
}

/* ---- 11. CTA ------------------------------------------------------------- */

.cta__inner {
  text-align: center;
}

.cta__inner h2 {
  margin-bottom: 15px;
  color: var(--rnx-white);
}

.cta__inner p {
  margin-bottom: 15px;
  color: var(--rnx-white);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 15px;
}

/* ---- 12. Clients --------------------------------------------------------- */

/* The reference gives this band no padding of its own — the 20px above and
   below the logos comes from the row. */
.clients {
  padding: 0;
  background: var(--rnx-bg-soft);
}

.clients__grid {
  padding: 20px 0;
}

/* auto-fit keeps the strip evenly spread whatever the marque count. */
.clients__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  align-items: center;
  justify-items: center;
  gap: 30px;
}

/* The reference's logos are 86px tall; holding that keeps the band 126px
   whether a cell shows a logo file or a wordmark. */
.clients__grid > li {
  display: grid;
  place-items: center;
  min-height: 86px;
}

/* Badges are sized by HEIGHT, not width. Marque marks differ wildly in aspect
   — the Mercedes star is square, the Land Rover oval is nearly 3:1 — and
   sizing on width would render them at obviously different visual weights.
   A common height plus object-fit: contain makes a mixed set look deliberate. */
/* Badges are sized by HEIGHT, not width — marque marks differ wildly in aspect
   (the Bentley wings are 1.99:1, the Rolls-Royce monogram 0.57:1) and sizing on
   width would render them at obviously different visual weights.

   Height alone is not enough either: a tall narrow shield covers far less area
   than a wide oval at the same height, so it reads smaller. `--logo-scale` in
   brands.json nudges each mark to optical parity. Raise it for a mark that
   looks lost, lower it for one that shouts. */
.clients__grid img {
  height: calc(52px * var(--logo-scale, 1));
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
  /* Seven brand palettes side by side fight each other, so the resting state is
     desaturated to match the wordmarks; colour returns on hover. Detailed
     badges need more presence than the 0.55 the text marks used, or the finer
     ones (the Cadillac crest especially) turn to grey mush. */
  filter: grayscale(100%);
  opacity: 0.85;
  transition:
    opacity var(--rnx-dur) var(--rnx-ease),
    filter var(--rnx-dur) var(--rnx-ease);
}

.clients__grid img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Wordmark shown until a real logo file is supplied. */
.brand-mark {
  display: block;
  text-align: center;
  color: var(--rnx-ink);
  opacity: 0.55;
  transition: opacity var(--rnx-dur) var(--rnx-ease);
}

.brand-mark:hover {
  opacity: 1;
}

.brand-mark strong {
  display: block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.brand-mark em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: var(--rnx-tracking-eyebrow);
  text-transform: uppercase;
}