/* ============================================================
   Ride X — home (the story arc)
   HOOK → TENSION → PROMISE → PROOF → FIT → TRUST → GROUND → CLOSE
   ============================================================ */

main > section[id] { scroll-margin-block-start: 5rem; }

/* ---------------- 8.1 HOOK ---------------- */
.hero {
  position: relative;
  min-block-size: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--navy-950);
  color: var(--white);
  overflow: hidden;
  padding-block-start: calc(var(--topbar-h) + 2rem);
  padding-block-end: clamp(4.5rem, 8vh, 7rem);
}

/* pinned to exactly one screen tall, anchored to the top — independent of
   .hero's actual height, which can grow past 100svh when wrapped copy needs
   more room than a short/non-maximized window provides. Without this the
   photo, its darkening overlay, and the route line would stretch to match,
   shifting the crop and pushing the near-opaque bottom fade further into
   view right where the trip card sits. */
.hero__media { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 100svh; }
/* first-load: the photograph settles from a slight push-in */
html.rx-motion .hero__media { animation: hero-media-in 1.8s var(--ease-out) both; }
@keyframes hero-media-in { from { scale: 1.045; opacity: 0.35; } }
.hero__media img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: 62% 50%;
}
html.rx-motion .hero__media img {
  transform: translate3d(0, calc(var(--p, 0) * -3.5%), 0) scale(1.08);
  will-change: transform;
}
.hero__grade { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 100svh; }
.hero__grade::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6, 14, 31, 0.86) 0%, rgba(6, 14, 31, 0.45) 45%, rgba(6, 14, 31, 0.12) 75%);
}
[dir="rtl"] .hero__grade::before {
  background: linear-gradient(270deg, rgba(6, 14, 31, 0.86) 0%, rgba(6, 14, 31, 0.45) 45%, rgba(6, 14, 31, 0.12) 75%);
}
.hero__grade::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 14, 31, 0.62) 0%, rgba(6, 14, 31, 0.08) 30%, rgba(10, 23, 48, 0.55) 78%, rgba(10, 23, 48, 0.92) 100%);
}

.hero__ribbon { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 100svh; pointer-events: none; opacity: 0.55; }
.hero__ribbon svg { inline-size: 100%; block-size: 100%; }
.hero__ribbon .rt-leg { stroke: rgba(245, 247, 250, 0.4); }

.hero__layout {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.hero__copy .display-hero { max-inline-size: 13ch; }
.hero__sub {
  font-size: var(--text-lead);
  line-height: 1.75;
  color: var(--mist);
  max-inline-size: 34em;
  margin-block: var(--sp-5) var(--sp-7);
}

/* the operational trip module */
.trip {
  justify-self: end;
  inline-size: min(100%, 23.5rem);
  background: color-mix(in srgb, var(--navy-850) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-l);
  padding: var(--sp-5) var(--sp-6);
}
html.rx-motion .trip { animation: trip-in 0.9s var(--ease-spring, var(--ease-out)) 0.9s both; }
@keyframes trip-in {
  from { opacity: 0; translate: 0 2.25rem; }
  to { opacity: 1; translate: 0 0; }
}
.trip__head {
  display: flex; align-items: center; gap: 0.625rem;
  padding-block-end: var(--sp-4);
  border-block-end: 1px solid var(--line-on-dark);
}
.trip__pulse {
  inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%;
  background: var(--red); flex: none;
}
html.rx-motion .trip__pulse { animation: trip-pulse 2.4s ease-in-out infinite; }
@keyframes trip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.trip__status { font-weight: 600; font-size: 0.9375rem; margin-inline-end: auto; }
.trip__wa { inline-size: 1.125rem; block-size: 1.125rem; color: var(--mist); }

.trip__route { padding-block: var(--sp-4); }
.trip__route svg { inline-size: 100%; }
.trip__route-labels {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  font-size: 0.8125rem; color: var(--mist);
  margin-block-start: 0.375rem;
}
.trip__rows { display: grid; gap: 0.625rem; padding-block-start: var(--sp-2); font-size: 0.9375rem; }
.trip__rows li { display: flex; align-items: center; gap: 0.625rem; }
.trip__k { color: var(--mist); }
.trip__v { font-weight: 600; margin-inline-start: auto; }
.trip__ok svg { inline-size: 1rem; block-size: 1rem; color: var(--red); flex: none; }

/* the module fills in like a live confirmation: route draws
   (data-draw-delay in markup), then rows land, checks tick in */
html.rx-motion .trip__rows li {
  opacity: 0;
  translate: 0 0.5rem;
  transition: opacity 0.55s var(--ease-out), translate 0.55s var(--ease-out);
}
html.rx-motion .trip__rows li:nth-child(1) { transition-delay: 1.35s; }
html.rx-motion .trip__rows li:nth-child(2) { transition-delay: 2.15s; }
html.rx-motion .trip__rows li:nth-child(3) { transition-delay: 2.4s; }
html.rx-motion .trip__route.is-drawn ~ .trip__rows li { opacity: 1; translate: 0 0; }
html.rx-motion .trip__ok svg {
  scale: 0.3;
  transition: scale 0.55s var(--ease-spring, var(--ease-out));
}
html.rx-motion .trip__rows li:nth-child(2) svg { transition-delay: 2.3s; }
html.rx-motion .trip__rows li:nth-child(3) svg { transition-delay: 2.55s; }
html.rx-motion .trip__route.is-drawn ~ .trip__rows .trip__ok svg { scale: 1; }

/* anchored to the fixed 100svh photo band (see .hero__media above), not to
   .hero's own bottom edge — .hero can grow taller than one screen when
   copy wraps more than expected, and a cue tied to that variable bottom
   drifts down into the overflow area and ends up sitting on top of
   whatever content (the trip card, in stacked layouts) happens to land
   there instead of hinting at what's below the first screen. */
.hero__cue {
  position: absolute; z-index: 1;
  inset-inline: 0; inset-block-start: 0;
  block-size: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-block-end: 1.25rem;
  margin-inline: auto; inline-size: fit-content;
  gap: 0.5rem;
  text-decoration: none;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mist);
  pointer-events: none;
}
.hero__cue > * { pointer-events: auto; }
html[lang="ar"] .hero__cue { letter-spacing: 0; text-transform: none; font-size: 0.8125rem; }
.hero__cue-line {
  inline-size: 1px; block-size: 2.75rem;
  background: linear-gradient(180deg, var(--mist), transparent);
}
html.rx-motion .hero__cue-line { animation: cue-drift 2.2s var(--ease-inout) infinite; }
html.rx-motion .hero__cue { animation: rx-fade 0.9s var(--ease-out) 2s both; }
@keyframes cue-drift {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(0.5rem); opacity: 0.45; }
}

/* ---------------- 8.2 TENSION ---------------- */
.tension {
  min-block-size: 72vh;
  display: flex; align-items: center;
  text-align: center;
  overflow: hidden;
}
.tension__line {
  position: relative; z-index: 1;
  max-inline-size: 34ch;
  margin-inline: auto;
  color: var(--white);
}
/* the pickup ring at architectural scale — the motif as a
   quiet watermark behind the doubt line */
.tension__mark {
  position: absolute;
  inset-block-start: 50%;
  /* logical start: bleeds off the left in LTR, the right in RTL */
  inset-inline-start: -9rem;
  translate: 0 -50%;
  inline-size: clamp(18rem, 36vw, 32rem);
  aspect-ratio: 1;
  pointer-events: none;
}
.tension__mark .rt { inline-size: 100%; block-size: 100%; opacity: 0.14; }
@media (max-width: 48rem) {
  .tension__mark { inline-size: 20rem; inset-inline-start: -11rem; }
}

/* ---------------- 8.3 PROMISE ---------------- */
.promise__line { max-inline-size: 26ch; margin-block-end: clamp(3rem, 6vw, 5rem); }

.confirm {
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-l);
  background: var(--navy-850);
  padding: clamp(1.75rem, 4vw, 3.5rem);
}
.confirm__route svg { inline-size: 100%; }
.confirm__ends {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  font-size: var(--text-small); color: var(--mist);
  margin-block-start: var(--sp-2);
}
.confirm__states {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sp-5);
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--line-on-dark);
}
.confirm__states li {
  display: flex; align-items: center; gap: 0.625rem;
  font-weight: 500; font-size: 0.9375rem;
}
.confirm__states svg { inline-size: 1.125rem; block-size: 1.125rem; color: var(--red); flex: none; }

.assure {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-6);
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
}
.assure li { display: flex; align-items: center; gap: var(--sp-4); }
.assure__num {
  inline-size: 2.25rem; block-size: 2.25rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-on-dark); border-radius: 50%;
  font-family: var(--font-display); font-size: 0.875rem; color: var(--mist);
}
.assure p { font-weight: 500; }

/* ---------------- 8.4 PROOF — the spine ---------------- */
.spine {
  --p: 1; /* fully drawn unless the scrub engine takes over */
  position: relative;
  padding-inline-start: 5.5rem;
  max-inline-size: 46rem;
}
.spine__rail {
  position: absolute;
  inset-block: 0.25rem;
  inset-inline-start: calc(1.375rem - 1px);
  inline-size: 2px;
}
.spine__track {
  position: absolute; inset-block: 0.875rem; inset-inline: 0;
  background: var(--line-on-dark);
}
.spine__fill {
  position: absolute; inset-block: 0.875rem; inset-inline: 0;
  background: rgba(245, 247, 250, 0.8);
  transform: scaleY(var(--p));
  transform-origin: top;
}
.spine__cap {
  position: absolute;
  inline-size: 1.75rem; block-size: 1.75rem;
  inset-inline-start: 50%;
  margin-inline-start: -0.875rem;
}
.spine__cap--start { inset-block-start: -0.875rem; }
.spine__cap--end { inset-block-end: -0.875rem; }

.spine__steps { display: grid; gap: clamp(3.5rem, 8vh, 5.5rem); padding-block: 0.5rem; }
.spine__step { position: relative; }
.spine__num {
  position: absolute;
  inset-inline-start: -5.5rem;
  inset-block-start: -0.375rem;
  inline-size: 2.75rem; block-size: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--navy-850);
  border: 1px solid var(--line-on-dark);
  font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem;
  color: var(--mist);
  transition: background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease;
  z-index: 1;
}
.spine__step.is-active .spine__num {
  background: var(--red); border-color: var(--red); color: #fff;
}
/* a single locate-ping as each step arrives — the pickup-ring motif */
html.rx-motion .spine__num::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--red);
  opacity: 0;
  pointer-events: none;
}
html.rx-motion .spine__step.is-active .spine__num::after {
  animation: spine-ping 0.9s var(--ease-out) 0.15s;
}
@keyframes spine-ping {
  0% { opacity: 0.85; scale: 1; }
  100% { opacity: 0; scale: 2.1; }
}
html.rx-motion .spine__body {
  opacity: 0.3; translate: 0 0.625rem;
  transition: opacity 0.55s var(--ease-out), translate 0.55s var(--ease-out);
}
html.rx-motion .spine__step.is-active .spine__body { opacity: 1; translate: 0 0; }
.spine__body h3 { margin-block-end: 0.5rem; }
.spine__body p { color: var(--mist); max-inline-size: 34em; }

/* ---------------- 8.5 FIT ---------------- */
.svcgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.svc {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: var(--sp-6);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius);
  background: var(--navy-850);
  text-decoration: none;
  transition: border-color 0.3s ease, translate 0.3s var(--ease-out);
}
html.rx-motion .svc:hover { translate: 0 -4px; }
.svc:hover { border-color: rgba(245, 247, 250, 0.34); }
.svc__route svg { inline-size: 100%; max-inline-size: 13rem; }
.svc__ends {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  font-size: 0.75rem; color: var(--mist);
  max-inline-size: 13rem;
  margin-block-start: 0.25rem;
}
.svc h3 { font-size: 1.25rem; margin-block-start: var(--sp-3); }
.svc p { color: var(--mist); font-size: 0.9375rem; line-height: 1.65; }
.svc__best { font-size: 0.8125rem; opacity: 0.85; margin-block-start: auto; padding-block-start: var(--sp-3); }
.svc__more { font-weight: 600; font-size: 0.875rem; color: var(--white); }
.svc__more::after {
  content: "\2192";
  display: inline-block;
  margin-inline-start: 0.375rem;
  transition: translate 0.3s var(--ease-out);
}
[dir="rtl"] .svc__more::after { content: "\2190"; }
html.rx-motion .svc:hover .svc__more::after,
html.rx-motion .svc:focus-visible .svc__more::after { translate: 4px 0; }
html[dir="rtl"].rx-motion .svc:hover .svc__more::after,
html[dir="rtl"].rx-motion .svc:focus-visible .svc__more::after { translate: -4px 0; }

/* fleet selector */
.fleetsel { margin-block-start: clamp(4rem, 8vw, 7rem); }
.fleetsel__head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-4);
  margin-block-end: var(--sp-6);
}
.fleetsel__head .eyebrow { margin-block-end: 0; }
.fleetsel__panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* panel switch: the photograph wipes open in the reading
   direction while the spec sheet re-stacks line by line */
html.rx-motion .fleetsel__panel:not([hidden]) .fleetsel__media {
  animation: fleet-media 0.75s var(--ease-out) both;
}
html[dir="rtl"].rx-motion .fleetsel__panel:not([hidden]) .fleetsel__media {
  animation-name: fleet-media-rtl;
}
html.rx-motion .fleetsel__panel:not([hidden]) .fleetsel__media img {
  animation: fleet-img 1s var(--ease-out) both;
}
html.rx-motion .fleetsel__panel:not([hidden]) .fleetsel__info > * {
  animation: fleet-item 0.6s var(--ease-out) both;
  animation-delay: calc(0.08s + var(--fi, 0) * 0.07s);
}
.fleetsel__info > *:nth-child(1) { --fi: 0; }
.fleetsel__info > *:nth-child(2) { --fi: 1; }
.fleetsel__info > *:nth-child(3) { --fi: 2; }
.fleetsel__info > *:nth-child(4) { --fi: 3; }
.fleetsel__info > *:nth-child(5) { --fi: 4; }
@keyframes fleet-media {
  from { clip-path: inset(0 100% 0 0 round var(--radius)); }
  to { clip-path: inset(0 0 0 0 round var(--radius)); }
}
@keyframes fleet-media-rtl {
  from { clip-path: inset(0 0 0 100% round var(--radius)); }
  to { clip-path: inset(0 0 0 0 round var(--radius)); }
}
@keyframes fleet-img {
  from { scale: 1.08; }
  to { scale: 1; }
}
@keyframes fleet-item {
  from { opacity: 0; translate: 0 0.75rem; }
  to { opacity: 1; translate: 0 0; }
}
.fleetsel__media { aspect-ratio: 4 / 3.1; }
.fleetsel__media img { object-position: 50% 58%; }
.fleetsel__flag {
  display: inline-block;
  background: var(--red); color: #fff;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.25rem 0.75rem; border-radius: 999px;
  margin-block-end: var(--sp-4);
}
html[lang="ar"] .fleetsel__flag { letter-spacing: 0; text-transform: none; }
.fleetsel__pos { color: var(--mist); font-size: var(--text-lead); margin-block: var(--sp-3) var(--sp-6); max-inline-size: 30em; }
.fleetsel__specs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
  border-block-start: 1px solid var(--line-on-dark);
  padding-block-start: var(--sp-5);
  margin-block-end: var(--sp-6);
}
.fleetsel__specs dt {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mist);
  margin-block-end: 0.375rem;
}
html[lang="ar"] .fleetsel__specs dt { letter-spacing: 0; text-transform: none; font-size: 0.875rem; }
.fleetsel__specs dd { font-weight: 500; font-size: 0.9375rem; line-height: 1.55; }

/* ---------------- 8.6 TRUST ---------------- */
.trust__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-5);
  margin-block-end: clamp(3.5rem, 7vw, 6rem);
}
.trust__stats .stat {
  display: flex; flex-direction: column-reverse; gap: var(--sp-3);
  justify-content: flex-end;
  background: #fff;
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  transition: translate 0.35s var(--ease-out), border-color 0.35s ease;
}
html.rx-motion .trust__stats .stat:hover {
  translate: 0 -4px;
  border-color: rgba(10, 23, 48, 0.3);
}
.trust__stats .stat__label { margin-block-start: 0; color: var(--slate); }
.trust__stats .stat__value { color: var(--ink); }
.trust__stats .is-placeholder {
  color: var(--slate); opacity: 1;
  border-block-end-color: var(--line-on-light);
}
.stat__unit { font-size: 0.45em; font-weight: 600; align-self: center; margin-inline-start: 0.25rem; }

/* ===== reviews: rating lockup + testimonial carousel ===== */
.reviews { max-inline-size: 58rem; }

/* rating lockup — confident score + stars + link */
.reviews__rating {
  display: inline-flex;
  align-items: center;
  gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  margin-block-end: clamp(2rem, 4vw, 3rem);
  text-decoration: none;
  color: var(--ink);
}
.reviews__score {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 2rem + 2vw, 3.25rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.reviews__summary { display: grid; gap: 0.4rem; }
.reviews__stars { display: inline-flex; gap: 0.2rem; }
.reviews__count { font-size: var(--text-small); color: var(--slate); }
.reviews__go {
  display: inline-grid; place-items: center;
  inline-size: 2.5rem; block-size: 2.5rem;
  border: 1px solid var(--line-on-light);
  border-radius: 50%;
  color: var(--ink);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.reviews__go svg { inline-size: 1rem; block-size: 1rem; }
html[dir="rtl"] .reviews__go { scale: -1 1; }
.reviews__rating:hover .reviews__go,
.reviews__rating:focus-visible .reviews__go { background: var(--red); border-color: var(--red); color: #fff; }

/* shared star glyph */
.rvw-sprite { position: absolute; }
.rvw-star { inline-size: 1.15rem; block-size: 1.15rem; color: var(--red); flex: none; }
.reviews__stars .rvw-star { inline-size: 1rem; block-size: 1rem; }
.rvw-star.is-off { color: var(--line-on-light); }

/* carousel: full-width slides, gap 0 for exact index math */
.reviews__carousel { max-inline-size: 58rem; }
.reviews__carousel .carousel__track { gap: 0; }

/* card */
.voice {
  position: relative;
  display: flex;
  flex-direction: column;
  min-block-size: clamp(14rem, 11rem + 10vw, 17rem);
  padding: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  padding-block-start: clamp(2.75rem, 2rem + 3vw, 3.75rem);
  background: #fff;
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius-l);
}
.voice::before {
  content: "\201C";
  position: absolute;
  inset-block-start: clamp(0.35rem, 1.5vw, 1rem);
  inset-inline-start: clamp(1.5rem, 1rem + 1.5vw, 2.75rem);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(4rem, 3rem + 4vw, 6rem);
  line-height: 1;
  color: var(--red);
  opacity: 0.13;
  pointer-events: none;
}
.voice__stars { display: inline-flex; gap: 0.25rem; margin-block-end: var(--sp-5); }
.voice blockquote { margin: 0; }
.voice blockquote p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
  max-inline-size: 36ch;
}
html[lang="ar"] .voice blockquote p { font-weight: 600; line-height: 1.85; }
.voice__by {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block-start: auto;
  padding-block-start: clamp(1.5rem, 3vw, 2.25rem);
}
.voice__avatar {
  flex: none;
  inline-size: 2.875rem;
  block-size: 2.875rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy-900);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}
.voice__who { display: grid; gap: 0.1rem; min-inline-size: 0; }
.voice__name { font-weight: 600; color: var(--ink); }
.voice__svc { font-size: var(--text-small); color: var(--slate); }

/* per-arrival settle-in — stars → quote → author cascade in as each slide
   arrives (motion.js re-fires .is-in on every rotation) */
html.rx-motion .v-armed .voice__stars,
html.rx-motion .v-armed .voice blockquote p,
html.rx-motion .v-armed .voice__by {
  opacity: 0;
  translate: 0 0.9rem;
  transition: opacity 0.55s var(--ease-out), translate 0.55s var(--ease-out);
}
html.rx-motion .v-armed .voice.is-in .voice__stars { opacity: 1; translate: 0 0; transition-delay: 0.04s; }
html.rx-motion .v-armed .voice.is-in blockquote p { opacity: 1; translate: 0 0; transition-delay: 0.12s; }
html.rx-motion .v-armed .voice.is-in .voice__by { opacity: 1; translate: 0 0; transition-delay: 0.22s; }
.trust .carousel__btn { border-color: var(--line-on-light); }
.trust .carousel__dot { background: var(--line-on-light); }
.trust .carousel__dot[aria-current="true"] { background: var(--red); }

.trust__lineage {
  display: flex; align-items: center; gap: var(--sp-5);
  margin-block-start: clamp(3.5rem, 7vw, 6rem);
  color: var(--slate); font-weight: 500;
  text-align: center;
}
.trust__lineage::before, .trust__lineage::after {
  content: ""; flex: 1; block-size: 1px; background: var(--line-on-light);
}

/* assurance credentials strip — hairline-divided cells (grid-gap technique) */
.trust__assure {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-on-light);
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius-l);
  overflow: hidden;
  margin-block-end: clamp(3rem, 6vw, 5rem);
}
.trust__assure-item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: #fff;
  padding: clamp(1.5rem, 1.15rem + 1.4vw, 2.15rem);
}
.trust__assure-node { flex: none; inline-size: 1.5rem; block-size: 1.5rem; margin-block-start: 0.0625rem; }
.trust__assure-node .rt { inline-size: 100%; block-size: 100%; }
.trust__assure-body { display: grid; gap: 0.3rem; min-inline-size: 0; }
.trust__assure-t { font-weight: 600; color: var(--ink); font-size: 1.0625rem; line-height: 1.3; }
html[lang="ar"] .trust__assure-t { font-size: 1.125rem; }
.trust__assure-d { color: var(--slate); font-size: var(--text-small); line-height: 1.5; }
@media (max-width: 62rem) { .trust__assure { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .trust__assure { grid-template-columns: 1fr; } }


/* trusted-by / partners */
.trust__partners {
  margin-block-start: clamp(3.5rem, 7vw, 6rem);
  padding-block-start: clamp(2.5rem, 5vw, 3.5rem);
  border-block-start: 1px solid var(--line-on-light);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.trust__partner-label, .trust__sectors-label {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 600;
  margin-block-end: var(--sp-4);
}
html[lang="ar"] .trust__partner-label,
html[lang="ar"] .trust__sectors-label { text-transform: none; letter-spacing: 0; }
.trust__partner-lockup { display: inline-flex; }
.trust__partner-lockup img {
  block-size: clamp(1.9rem, 1.6rem + 1vw, 2.6rem);
  inline-size: auto;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.trust__partner-lockup:hover img,
.trust__partner-lockup:focus-visible img { filter: none; opacity: 1; }
.trust__sectors { border-inline-start: 1px solid var(--line-on-light); padding-inline-start: clamp(2rem, 5vw, 4.5rem); }
.trust__sectors-list { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.trust__sectors-list li {
  font-size: var(--text-small);
  color: var(--ink);
  font-weight: 500;
  padding-block: 0.45rem;
  padding-inline: var(--sp-4);
  background: #fff;
  border: 1px solid var(--line-on-light);
  border-radius: 999px;
}
@media (max-width: 48rem) {
  .trust__partners { grid-template-columns: 1fr; gap: var(--sp-6); }
  .trust__sectors { border-inline-start: 0; padding-inline-start: 0; }
}

/* ---------------- 8.7 GROUND ---------------- */
.jmap {
  max-inline-size: 60rem;
  margin-inline: auto;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-l);
  background: var(--navy-850);
  overflow: hidden;
}
.jmap__svg { inline-size: 100%; block-size: auto; display: block; }
.jmap text {
  font-family: var(--font-body);
  font-size: 15px;
}
.jmap__label { fill: var(--mist); }
.jmap__label--strong { fill: var(--white); font-weight: 600; }
.jmap__sea {
  fill: rgba(174, 183, 198, 0.45);
  font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase;
}
html[lang="ar"] .jmap__sea { letter-spacing: 0; text-transform: none; }
.jmap__dash {
  fill: none;
  stroke: var(--mist); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 2 10;
  opacity: 0.9;
}
/* the beyond-Jeddah dashes travel outward once the map has drawn */
html.rx-motion .jmap.is-drawn .jmap__dash { animation: jdash 8s linear infinite; }
@keyframes jdash { to { stroke-dashoffset: -96; } }

/* nodes pop and labels fade in, sequenced with the drawing legs */
html.rx-motion .jmap circle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: scale 0.6s var(--ease-spring, var(--ease-out));
}
html.rx-motion .jmap:not(.is-drawn) circle { scale: 0; }
html.rx-motion .jmap text { transition: opacity 0.7s ease; }
html.rx-motion .jmap:not(.is-drawn) text { opacity: 0; }
html.rx-motion .jmap circle:nth-of-type(1) { transition-delay: 1.15s; } /* KAIA pin */
html.rx-motion .jmap circle:nth-of-type(2),
html.rx-motion .jmap circle:nth-of-type(3) { transition-delay: 0.1s; }  /* hotels ring */
html.rx-motion .jmap circle:nth-of-type(4),
html.rx-motion .jmap circle:nth-of-type(5) { transition-delay: 0.45s; } /* homes ring */
html.rx-motion .jmap circle:nth-of-type(6) { transition-delay: 1s; }    /* corniche */
html.rx-motion .jmap circle:nth-of-type(7) { transition-delay: 0.7s; }  /* business */
html.rx-motion .jmap circle:nth-of-type(8) { transition-delay: 1.25s; } /* al balad */
html.rx-motion .jmap circle:nth-of-type(9) { transition-delay: 1.7s; }  /* beyond pin */
html.rx-motion .jmap text:nth-of-type(1) { transition-delay: 0.2s; }    /* sea */
html.rx-motion .jmap text:nth-of-type(2) { transition-delay: 1.3s; }    /* KAIA */
html.rx-motion .jmap text:nth-of-type(3) { transition-delay: 0.25s; }   /* hotels */
html.rx-motion .jmap text:nth-of-type(4) { transition-delay: 0.6s; }    /* homes */
html.rx-motion .jmap text:nth-of-type(5) { transition-delay: 1.15s; }   /* corniche */
html.rx-motion .jmap text:nth-of-type(6) { transition-delay: 0.85s; }   /* business */
html.rx-motion .jmap text:nth-of-type(7) { transition-delay: 1.4s; }    /* al balad */
html.rx-motion .jmap text:nth-of-type(8) { transition-delay: 1.85s; }   /* beyond */

/* mobile corridor — on wide screens it stays in the accessibility tree
   (visually hidden) as the text equivalent of the aria-hidden map svg */
.jcorr {
  position: relative;
  max-inline-size: 26rem;
  margin-inline: auto;
  padding-inline-start: 2.75rem;
}
@media (min-width: 48.001rem) {
  .jcorr {
    position: absolute; inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}
.jcorr::before {
  content: "";
  position: absolute;
  inset-block: 1.25rem;
  inset-inline-start: calc(0.875rem - 1px);
  inline-size: 2px;
  background: var(--line-on-dark);
}
/* the corridor rail grows downward as its stops reveal
   (:has-gated on both sides so non-supporting browsers
   simply keep the rail fully visible) */
html.rx-motion .jcorr:has(li[data-reveal])::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.2s var(--ease-inout) 0.15s;
}
html.rx-motion .jcorr:has(li.in-view)::before { transform: scaleY(1); }
.jcorr__stop { position: relative; padding-block: 0.875rem; font-weight: 500; }
.jcorr__node {
  position: absolute;
  inset-inline-start: -2.75rem;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 1.75rem; block-size: 1.75rem;
  display: block;
}
.jcorr__node::before {
  content: "";
  position: absolute; inset: 0.5rem;
  border-radius: 50%;
  background: var(--mist);
}
.jcorr__stop--start .jcorr__node::before {
  inset: 0.3125rem;
  background: transparent;
  border: 2px solid var(--gold);
}
.jcorr__stop--end .jcorr__node::before {
  inset: 0.375rem;
  background: var(--red);
}
.jcorr__stop--end { color: var(--white); }

/* ---------------- interactive place map ---------------- */
.ground__viz { position: relative; margin-block-start: clamp(2rem, 4vw, 3rem); }
.ground__hint {
  text-align: center;
  color: var(--mist);
  font-size: var(--text-small);
  margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}
/* geography never mirrors → hotspots use PHYSICAL left/top to stay aligned
   with the non-mirrored SVG in both LTR and RTL */
.jmap-wrap { position: relative; max-inline-size: 60rem; margin-inline: auto; }
.jmap__spots { position: absolute; inset: 0; }
.jspot {
  position: absolute;
  left: var(--hx); top: var(--hy);
  transform: translate(-50%, -50%);
  inline-size: 2.75rem; block-size: 2.75rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.jspot__dot {
  position: relative;
  inline-size: 0.85rem; block-size: 0.85rem;
  border-radius: 50%;
  border: 2px solid rgba(245, 247, 250, 0.65);
  background: rgba(6, 14, 31, 0.35);
  transition: scale 0.25s var(--ease-out), background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.jspot:hover .jspot__dot,
.jspot:focus-visible .jspot__dot,
.jspot[aria-expanded="true"] .jspot__dot {
  background: var(--red); border-color: var(--red);
  scale: 1.2;
  box-shadow: 0 0 0 6px rgba(211, 35, 46, 0.2);
}
.jspot:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; border-radius: 50%; }
/* gentle attention pulse so the map reads as interactive (motion only) */
html.rx-motion .jspot__dot::after {
  content: ""; position: absolute; inset: -2px;
  border-radius: 50%; border: 2px solid var(--red);
  opacity: 0; pointer-events: none;
  animation: jspot-pulse 3s var(--ease-out) infinite;
}
html.rx-motion .jspot:nth-child(2) .jspot__dot::after { animation-delay: 0.5s; }
html.rx-motion .jspot:nth-child(3) .jspot__dot::after { animation-delay: 1s; }
html.rx-motion .jspot:nth-child(4) .jspot__dot::after { animation-delay: 1.5s; }
html.rx-motion .jspot:nth-child(5) .jspot__dot::after { animation-delay: 2s; }
html.rx-motion .jspot:nth-child(6) .jspot__dot::after { animation-delay: 2.5s; }
html.rx-motion .jspot:nth-child(7) .jspot__dot::after { animation-delay: 1.3s; }
html.rx-motion .jspot:hover .jspot__dot::after,
html.rx-motion .jspot[aria-expanded="true"] .jspot__dot::after { animation: none; }
@keyframes jspot-pulse {
  0% { opacity: 0.55; scale: 1; }
  70% { opacity: 0; scale: 2.6; }
  100% { opacity: 0; scale: 2.6; }
}

/* detail card */
.place-card {
  position: absolute;
  z-index: 6;
  inline-size: 20rem;
  max-inline-size: min(20rem, 92%);
  background: var(--navy-800);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
}
.place-card[hidden] { display: none; }
html.rx-motion .place-card {
  animation: place-in 0.4s var(--ease-out);
}
@keyframes place-in { from { opacity: 0; scale: 0.96; } to { opacity: 1; scale: 1; } }
.place-card__media { aspect-ratio: 3 / 2; background: var(--navy-850); }
.place-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.place-card__ph {
  inline-size: 100%; block-size: 100%;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(211, 35, 46, 0.12), transparent 60%),
    linear-gradient(160deg, var(--navy-800), var(--navy-950));
}
.place-card__ph svg { inline-size: 55%; block-size: auto; opacity: 0.9; }
.place-card__body { padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem); }
.place-card__eyebrow {
  font-size: var(--text-eyebrow); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--red); font-weight: 600;
  margin-block-end: var(--sp-2);
}
html[lang="ar"] .place-card__eyebrow { letter-spacing: 0; text-transform: none; }
.place-card__title { font-size: 1.25rem; color: var(--white); line-height: 1.2; }
.place-card__desc { margin-block-start: var(--sp-3); color: var(--mist); font-size: var(--text-small); line-height: 1.6; }
.place-card__meta {
  margin-block-start: var(--sp-4); padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line-on-dark);
  color: var(--white); font-size: 0.8125rem; font-weight: 500;
}
.place-card__cta { margin-block-start: var(--sp-4); inline-size: 100%; }
.place-card__close {
  position: absolute; z-index: 2;
  inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3);
  inline-size: 2rem; block-size: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(6, 14, 31, 0.55); border: 1px solid var(--line-on-dark);
  color: var(--white); cursor: pointer;
  transition: background-color 0.2s ease;
}
.place-card__close:hover { background: var(--red); border-color: var(--red); }
.place-card__close svg { inline-size: 1rem; block-size: 1rem; }

/* mobile: corridor is the interactive list; card becomes a bottom sheet */
.jcorr__btn {
  inline-size: 100%;
  display: flex; align-items: center; gap: var(--sp-3);
  background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; text-align: start; font: inherit;
}
.jcorr__name { flex: 1; min-inline-size: 0; }
.jcorr__chev {
  flex: none; inline-size: 1.1rem; block-size: 1.1rem; color: var(--mist);
  transition: color 0.2s ease, translate 0.2s var(--ease-out);
}
[dir="rtl"] .jcorr__chev { scale: -1 1; }
.jcorr__btn:hover .jcorr__chev,
.jcorr__btn:focus-visible .jcorr__chev { color: var(--red); translate: 3px 0; }
[dir="rtl"] .jcorr__btn:hover .jcorr__chev,
[dir="rtl"] .jcorr__btn:focus-visible .jcorr__chev { translate: -3px 0; }
.jcorr__btn[aria-expanded="true"] .jcorr__name { color: var(--white); }
.jcorr__btn[aria-expanded="true"] .jcorr__chev { color: var(--red); }

.ground__credits {
  margin-block-start: clamp(2rem, 4vw, 3rem);
  text-align: center;
  color: rgba(174, 183, 198, 0.6);
  font-size: 0.75rem; line-height: 1.6;
  max-inline-size: 52rem; margin-inline: auto;
}

@media (min-width: 48.001rem) {
  .jcorr { display: none; }
}
@media (max-width: 48rem) {
  .jmap-wrap { display: none; }
  .ground__hint { display: none; }
  .place-card {
    position: fixed; z-index: var(--z-topbar);
    inset-inline: 0; inset-block-end: 0; inset-block-start: auto;
    inline-size: auto; max-inline-size: none;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    animation: place-sheet 0.4s var(--ease-out);
  }
  @keyframes place-sheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .place-card__media { aspect-ratio: 16 / 9; }
}

/* ---------------- 8.8 CLOSE ---------------- */
.homeclose { text-align: center; padding-block: clamp(6rem, 12vh, 10rem); }
.homeclose__route { max-inline-size: 42rem; margin-inline: auto; margin-block-end: var(--sp-7); }
.homeclose__route svg { inline-size: 100%; }
.homeclose .display-breathe { max-inline-size: 20ch; margin-inline: auto; }
.homeclose__ctas { justify-content: center; margin-block-start: var(--sp-7); }

/* ============ responsive ============ */
@media (max-width: 68rem) {
  .svcgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 62rem) {
  .hero__layout { grid-template-columns: 1fr; align-items: start; }
  .trip { justify-self: start; }
  .hero { padding-block-end: 5.5rem; }
  /* copy and trip card stack here, so "100svh from the top" no longer
     means "below both" — it can land mid-stack, above the card. Drop the
     cue back into normal flow so it renders after whichever stacks last
     (the card), with its own breathing room instead of a hard 100svh pin. */
  .hero__cue {
    position: static;
    block-size: auto;
    padding-block: 2.5rem 0;
    pointer-events: auto;
  }
}

@media (max-width: 48rem) {
  .fleetsel__panel { grid-template-columns: 1fr; }
  .fleetsel__media { aspect-ratio: 16 / 10; }
  .confirm__states { gap: var(--sp-4); }
  .assure { gap: var(--sp-4); }
  .jmap { display: none; }
  .jcorr { display: block; }
}

@media (max-width: 40rem) {
  .svcgrid { grid-template-columns: 1fr; }
  .trust__stats { gap: var(--sp-3); }
  .trust__stats .stat { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .spine { padding-inline-start: 3.75rem; }
  .spine__rail { inset-inline-start: calc(1rem - 1px); }
  .spine__num {
    inset-inline-start: -3.75rem;
    inline-size: 2rem; block-size: 2rem;
    font-size: 0.8125rem;
    inset-block-start: -0.125rem;
  }
  .tension { min-block-size: 60vh; }
  .hero__cue { display: none; }
  .fleetsel__specs { grid-template-columns: 1fr; gap: var(--sp-4); }
}