/* ===========================================================================
   Routes — Capsley home
   Port of capsley-master (Next.js + Tailwind v4) to a framework-free layer that
   rides on top of the existing Vite SPA.

   Structure
     1  Tokens
     2  Site-wide consistency  (applies on every route, not just home)
     3  Primitives             (shell, type, eyebrow, buttons, reveal)
     4  Header + route rail
     5  Hero + booking deck
     6  Promise band
     7  Offers
     8  Fleet
     9  How it works
    10  Shuttle
    11  Proof + rating
    12  Next trip
    13  Destinations
    14  Finale + wordmark
    15  Motion keyframes + reduced motion

   Everything is scoped under `.rc` except sections 1 and 2, which are the
   deliberate exceptions: the tokens have to be readable by the SPA for the
   consistency pass to work at all.
   =========================================================================== */

/* ------------------------------------------------------------------ 1 tokens */

:root {
  --rc-ink: #0e1116;
  --rc-ink-soft: #3d4452;
  --rc-ink-muted: #6b7280;
  --rc-surface: #f6f7f9;
  --rc-surface-2: #eef1f6;
  --rc-line: #e7e9ee;

  --rc-brand-50: #eef1fb;
  --rc-brand-100: #d9e0f6;
  --rc-brand-200: #b3c1ee;
  --rc-brand-300: #8298e0;
  --rc-brand-400: #4f6bd0;
  --rc-brand-500: #1e3aa8;
  --rc-brand-600: #132a8e;
  --rc-brand-700: #0f2170;
  --rc-brand-800: #0b1957;
  --rc-brand-900: #071138;

  --rc-accent-100: #ffe1c7;
  --rc-accent-300: #ffa766;
  --rc-accent-400: #ff8c3a;
  --rc-accent-500: #ff7a1a;
  --rc-accent-600: #e8650a;

  --rc-mint: #10b981;
  --rc-amber: #fbbf24;
  --rc-sand: #f4ece1;
  --rc-rose: #e11d48;

  /* Fluid type. The page is carried by typography and photography, so the
     display sizes lean large on purpose. */
  --rc-text-hero: clamp(2.6rem, 7.4vw, 6.5rem);
  --rc-text-h1: clamp(2.1rem, 4.6vw, 4rem);
  --rc-text-h2: clamp(1.75rem, 3.2vw, 2.9rem);
  --rc-text-h3: clamp(1.25rem, 1.8vw, 1.7rem);
  --rc-text-lead: clamp(1rem, 1.15vw, 1.2rem);

  --rc-radius-card: 1.5rem;
  --rc-radius-pill: 999px;

  --rc-shadow-soft: 0 1px 2px rgb(14 17 22 / 0.04), 0 12px 32px -14px rgb(14 17 22 / 0.14);
  --rc-shadow-lift: 0 28px 64px -24px rgb(19 42 142 / 0.3);
  --rc-shadow-deck: 0 2px 4px rgb(14 17 22 / 0.04), 0 40px 90px -36px rgb(11 25 87 / 0.6);

  /* One curve for every transition on the page. */
  --rc-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* One vertical rhythm for every section, so the page has a pulse instead of
     nine different amounts of air. */
  --rc-section-y: clamp(4.5rem, 8vw, 8rem);
  --rc-gutter: 1.25rem;
}

@media (min-width: 48rem) {
  :root {
    --rc-gutter: 2rem;
  }
}
@media (min-width: 80rem) {
  :root {
    --rc-gutter: 3.5rem;
  }
}

/* -------------------------------------------------- 2 site-wide consistency */

/* The SPA shipped DM Sans for body and Plus Jakarta Sans for display. Two
   grotesques this close together read as inconsistency rather than hierarchy —
   weight and scale do that job. Collapsing to one family is the single largest
   consistency win available, and it costs a font download rather than adding
   one. Both custom properties are already the SPA's own hooks, so this reaches
   every page without touching the bundle. */
:root {
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --default-font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

html {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--rc-accent-500);
  color: #fff;
}

/* One focus treatment everywhere, instead of the browser default on some
   controls and nothing at all on others. */
:focus-visible {
  outline: 2px solid var(--rc-accent-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* While the home overlay owns the viewport the SPA tree stays mounted — its
   router and stores keep running — but it is taken out of the layout so there
   is only ever one page on screen. */
html.rc-on #root {
  display: none !important;
}

html.rc-on,
html.rc-on body {
  overflow-x: clip;
  background: #fff;
}

html.rc-locked body {
  overflow: hidden;
}

/* -------------------------------------------------------------- 3 primitives */

.rc {
  color: var(--rc-ink);
  font-family: var(--font-sans);
  line-height: 1.5;
  background: #fff;
}

.rc *,
.rc *::before,
.rc *::after {
  box-sizing: border-box;
}

/* The reset is wrapped in :where() so it contributes no specificity at all.
   Written as `.rc p` it would score 0,1,1 and quietly beat every single-class
   rule below it — `.rc-hero__lead { margin-top }` and its like — collapsing the
   vertical rhythm of the whole page. */
.rc :where(p, h1, h2, h3, h4, figure, blockquote, dl, dd, ul, ol) {
  margin: 0;
}

.rc :where(ul, ol) {
  padding: 0;
  list-style: none;
}

.rc :where(a) {
  color: inherit;
  text-decoration: none;
}

.rc :where(img) {
  display: block;
  max-width: 100%;
}

.rc :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.rc :where(input) {
  font: inherit;
  color: inherit;
}

.rc-shell {
  margin-inline: auto;
  width: 100%;
  max-width: 96rem;
  padding-inline: var(--rc-gutter);
}

/* --- type ---------------------------------------------------------------- */

.rc-h1,
.rc-h2,
.rc-h3,
.rc-hero-type {
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* The SPA's compiled bundle sets font-size and line-height on bare h1/h2/h3
   with !important, from inside `@layer base`. Layer order runs backwards for
   important declarations, so a layered !important outranks an unlayered one no
   matter how specific the selector — the overlay has to answer from a layer of
   its own, declared ahead of Tailwind's in index.html. Only these two
   properties are contested, so only these two live here. */
@layer rc {
  .rc-h1,
  .rc-h2,
  .rc-h3,
  .rc-hero-type,
  .rc-stop__name {
    line-height: 0.95 !important;
  }

  .rc-h1 {
    font-size: var(--rc-text-h1) !important;
  }
  .rc-h2 {
    font-size: var(--rc-text-h2) !important;
  }
  .rc-h3 {
    font-size: var(--rc-text-h3) !important;
  }
  .rc-hero-type {
    font-size: var(--rc-text-hero) !important;
  }
  .rc-stop__name {
    font-size: clamp(1.35rem, 1.9vw, 1.9rem) !important;
    line-height: 1.05 !important;
  }
}

.rc-lead {
  font-size: var(--rc-text-lead);
  line-height: 1.6;
  color: var(--rc-ink-soft);
}

.rc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rc-accent-600);
}

.rc-eyebrow__rule {
  display: block;
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.75;
}

.rc-eyebrow__dot {
  position: relative;
  display: inline-flex;
  width: 0.375rem;
  height: 0.375rem;
  flex: none;
}

.rc-eyebrow__dot::before,
.rc-eyebrow__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--rc-accent-500);
}

.rc-eyebrow__dot::before {
  animation: rc-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* --- section heads ------------------------------------------------------- */

/* Every section opens the same way — eyebrow, heading, optional aside on the
   right — so the page has one recognisable entry pattern. */
.rc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
}

.rc-head__title {
  margin-top: 0.75rem;
}

.rc-head__aside {
  max-width: 22rem;
  font-size: 0.95rem;
  color: var(--rc-ink-soft);
}

/* --- buttons ------------------------------------------------------------- */

.rc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-radius: var(--rc-radius-pill);
  padding: 0.85rem 1.5rem;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background-color 0.3s var(--rc-ease), color 0.3s var(--rc-ease),
    border-color 0.3s var(--rc-ease), transform 0.3s var(--rc-ease);
}

.rc-btn svg {
  transition: transform 0.3s var(--rc-ease);
}
.rc-btn:hover svg {
  transform: translateX(3px);
}

.rc-btn--accent {
  background: var(--rc-accent-500);
  color: #fff;
  box-shadow: 0 20px 44px -18px rgb(255 122 26 / 0.95);
}
.rc-btn--accent:hover {
  background: var(--rc-accent-600);
}

.rc-btn--ink {
  background: var(--rc-ink);
  color: #fff;
}
.rc-btn--ink:hover {
  background: var(--rc-brand-800);
}

.rc-btn--light {
  background: #fff;
  color: var(--rc-ink);
}
.rc-btn--light:hover {
  background: var(--rc-accent-500);
  color: #fff;
}

.rc-btn--ghost {
  border: 1px solid rgb(255 255 255 / 0.25);
  color: #fff;
}
.rc-btn--ghost:hover {
  border-color: rgb(255 255 255 / 0.6);
  background: rgb(255 255 255 / 0.1);
}

.rc-btn--lg {
  padding: 1rem 1.75rem;
  font-size: 1rem;
}

/* Text link with a trailing arrow — the quiet counterpart to .rc-btn. */
.rc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--rc-brand-600);
  transition: color 0.3s var(--rc-ease);
}
.rc-link svg {
  transition: transform 0.3s var(--rc-ease);
}
.rc-link:hover svg {
  transform: translateX(3px);
}
.rc-link--onDark {
  color: var(--rc-accent-400);
}

/* --- reveal -------------------------------------------------------------- */

/* One entrance for the whole page, driven by IntersectionObserver rather than
   nine bespoke scroll listeners. */
.rc-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.7s var(--rc-ease), transform 0.7s var(--rc-ease);
  transition-delay: var(--rc-delay, 0s);
}

.rc-reveal.is-in {
  opacity: 1;
  transform: none;
}

.rc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — the first thing in the DOM and the first thing to receive focus. */
.rc-skip {
  position: absolute;
  left: -9999px;
}
.rc-skip:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  border-radius: 999px;
  background: var(--rc-ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
}

/* ------------------------------------------------------- 4 header + rail */

.rc-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  padding-top: 0.75rem;
}

@media (min-width: 40rem) {
  .rc-header {
    padding-top: 1rem;
  }
}

/* Detaching is a single move: the bar insets, gains a surface, and drops its
   own shadow — one transition, not four. */
.rc-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--rc-radius-pill);
  border: 1px solid rgb(255 255 255 / 0.14);
  background: rgb(255 255 255 / 0);
  padding: 0.5rem 0.25rem;
  transition: background-color 0.45s var(--rc-ease), border-color 0.45s var(--rc-ease),
    box-shadow 0.45s var(--rc-ease), padding 0.45s var(--rc-ease);
}

.rc-header.is-detached .rc-bar {
  background: rgb(255 255 255 / 0.86);
  border-color: rgb(231 233 238 / 0.9);
  box-shadow: 0 20px 44px -28px rgb(11 25 87 / 0.4);
  padding-inline: 0.875rem 0.625rem;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Two logo files rather than a CSS filter: inverting the real mark turns the
   blue type and the orange swoosh the same white and it stops being readable.
   The light variant knocks only the type out. */
.rc-logo {
  position: relative;
  display: flex;
  height: 2rem;
  flex: none;
  align-items: center;
  padding: 0.25rem 0.375rem;
}

.rc-logo img {
  height: 1.75rem;
  width: auto;
  transition: opacity 0.4s var(--rc-ease);
}

@media (min-width: 40rem) {
  .rc-logo img {
    height: 2rem;
  }
}

.rc-logo__light {
  position: absolute;
  left: 0.375rem;
}

.rc-header .rc-logo__dark {
  opacity: 0;
}
.rc-header.is-detached .rc-logo__dark {
  opacity: 1;
}
.rc-header.is-detached .rc-logo__light {
  opacity: 0;
}

.rc-nav {
  display: none;
  margin-left: 0.75rem;
  align-items: center;
  gap: 0.125rem;
}

@media (min-width: 64rem) {
  .rc-nav {
    display: flex;
  }
}

.rc-nav__link {
  position: relative;
  border-radius: var(--rc-radius-pill);
  padding: 0.5rem 0.875rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.85);
  transition: color 0.3s var(--rc-ease), background-color 0.3s var(--rc-ease);
}

.rc-nav__link:hover {
  color: #fff;
  background: rgb(255 255 255 / 0.15);
}

.rc-header.is-detached .rc-nav__link {
  color: var(--rc-ink-soft);
}
.rc-header.is-detached .rc-nav__link:hover {
  color: var(--rc-ink);
  background: var(--rc-surface-2);
}

.rc-bar__end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* The search pill only appears once the hero's own booking deck is genuinely
   gone, so the primary action is always present but never duplicated. */
.rc-bar__search {
  display: none;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  white-space: nowrap;
  border-radius: var(--rc-radius-pill);
  background: var(--rc-accent-500);
  padding: 0.625rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 10px 24px -12px rgb(255 122 26 / 0.9);
  opacity: 0;
  max-width: 0;
  transform: scale(0.9);
  transition: opacity 0.35s var(--rc-ease), max-width 0.35s var(--rc-ease),
    transform 0.35s var(--rc-ease), background-color 0.3s var(--rc-ease);
}

@media (min-width: 40rem) {
  .rc-bar__search {
    display: inline-flex;
  }
}

.rc-header.is-past-hero .rc-bar__search {
  opacity: 1;
  max-width: 14rem;
  transform: none;
}

/* Fallback for browser-driven jumps (a pasted #hash, find-in-page). In-page
   links go through scrollToId, which measures the pinned bar instead. */
.rc [id] {
  scroll-margin-top: 15.5rem;
}

/* Real sticky deck replaces the pill — keep one primary search control. */
html.rc-deck-sticky .rc-header .rc-bar__search {
  opacity: 0 !important;
  max-width: 0 !important;
  transform: scale(0.9);
  pointer-events: none;
  padding-inline: 0;
}

.rc-bar__search:hover {
  background: var(--rc-accent-600);
}

.rc-bar__signin {
  display: none;
  border-radius: var(--rc-radius-pill);
  padding: 0.625rem 1rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.85);
  transition: color 0.3s var(--rc-ease);
}

@media (min-width: 40rem) {
  .rc-bar__signin {
    display: block;
  }
}

.rc-bar__signin:hover {
  color: #fff;
}
.rc-header.is-detached .rc-bar__signin {
  color: var(--rc-ink-soft);
}
.rc-header.is-detached .rc-bar__signin:hover {
  color: var(--rc-ink);
}

.rc-burger {
  display: grid;
  place-items: center;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: var(--rc-radius-pill);
  border: 1px solid rgb(255 255 255 / 0.25);
  color: #fff;
  transition: background-color 0.3s var(--rc-ease), border-color 0.3s var(--rc-ease),
    color 0.3s var(--rc-ease);
}

.rc-burger:hover {
  background: rgb(255 255 255 / 0.1);
}

@media (min-width: 64rem) {
  .rc-burger {
    display: none;
  }
}

.rc-header.is-detached .rc-burger {
  border-color: var(--rc-line);
  color: var(--rc-ink);
}
.rc-header.is-detached .rc-burger:hover {
  background: var(--rc-surface-2);
}

/* --- destinations panel -------------------------------------------------- */

/* Not a dropdown list: hovering a country cross-fades its photograph into the
   panel, so choosing where to go is already a visual decision. */
/* Out of flow, or the closed panel silently makes the fixed header 500px tall
   and its backdrop-filter covers the top half of the hero. */
.rc-menu {
  display: none;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  padding-top: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.28s var(--rc-ease), transform 0.28s var(--rc-ease),
    visibility 0s linear 0.28s;
}

@media (min-width: 64rem) {
  .rc-menu {
    display: block;
  }
}

.rc-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}

.rc-menu__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  overflow: hidden;
  border-radius: 1.6rem;
  border: 1px solid var(--rc-line);
  background: rgb(255 255 255 / 0.96);
  box-shadow: 0 40px 80px -40px rgb(11 25 87 / 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.rc-menu__body {
  padding: 1.75rem;
}

.rc-menu__label {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rc-ink-muted);
}

.rc-menu__featured {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
}

.rc-menu__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid rgb(231 233 238 / 0.7);
  padding: 0.625rem 0;
  color: var(--rc-ink-soft);
  transition: color 0.3s var(--rc-ease);
}

.rc-menu__item:hover,
.rc-menu__item.is-active {
  color: var(--rc-ink);
}

.rc-menu__name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.rc-menu__count {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rc-ink-muted);
}

.rc-menu__rest {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
}

.rc-menu__rest a {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--rc-ink-muted);
  transition: color 0.3s var(--rc-ease);
}

.rc-menu__rest a:hover {
  color: var(--rc-brand-600);
}

.rc-menu__preview {
  position: relative;
  min-height: 19rem;
  overflow: hidden;
  background: var(--rc-ink);
}

.rc-menu__preview img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.5s var(--rc-ease), transform 0.5s var(--rc-ease);
}

.rc-menu__preview img.is-active {
  opacity: 1;
  transform: none;
}

.rc-menu__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(14 17 22 / 0.85), rgb(14 17 22 / 0.2), transparent);
}

.rc-menu__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.75rem;
  color: #fff;
}

.rc-menu__caption strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.rc-menu__caption span {
  margin-top: 0.375rem;
  display: block;
  max-width: 24rem;
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.7);
}

/* --- mobile menu --------------------------------------------------------- */

.rc-mobile {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--rc-ink);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem 2.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--rc-ease), visibility 0.25s;
}

.rc-mobile.is-open {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 64rem) {
  .rc-mobile {
    display: none;
  }
}

.rc-mobile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rc-mobile__top img {
  height: 1.75rem;
  width: auto;
}

.rc-mobile__close {
  display: grid;
  place-items: center;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: var(--rc-radius-pill);
  border: 1px solid rgb(255 255 255 / 0.2);
  color: #fff;
}

.rc-mobile__nav {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
}

.rc-mobile__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  padding: 1.25rem 0;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--rc-ease), transform 0.5s var(--rc-ease);
}

.rc-mobile.is-open .rc-mobile__link {
  opacity: 1;
  transform: none;
}

.rc-mobile__link svg {
  color: var(--rc-accent-400);
}

.rc-mobile__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rc-mobile__foot .rc-btn {
  padding-block: 1rem;
}

/* --- route rail ---------------------------------------------------------- */

/* The page's spine: a thin vertical route with a stop per section that fills
   orange as you scroll. Desktop only — on narrow screens it would be chrome
   competing with the content it is meant to serve. */
.rc-rail {
  display: none;
  position: fixed;
  right: 1.25rem;
  top: 50%;
  z-index: 40;
  transform: translateY(-50%);
  transition: opacity 0.4s var(--rc-ease), transform 0.4s var(--rc-ease);
}

@media (min-width: 80rem) {
  .rc-rail {
    display: block;
  }
}

.rc-rail.is-hidden {
  opacity: 0;
  transform: translateY(-50%) translateX(16px);
  pointer-events: none;
}

.rc-rail__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--rc-radius-pill);
  border: 1px solid rgb(255 255 255 / 0.25);
  background: rgb(255 255 255 / 0.25);
  padding: 0.75rem 0.375rem;
  box-shadow: 0 10px 24px -18px rgb(11 25 87 / 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.rc-rail__track,
.rc-rail__fill {
  position: absolute;
  left: 50%;
  top: 1rem;
  bottom: 1rem;
  width: 1px;
  transform: translateX(-50%);
}

.rc-rail__track {
  background: rgb(14 17 22 / 0.15);
}

.rc-rail__fill {
  background: var(--rc-accent-500);
  transform-origin: top;
  transform: translateX(-50%) scaleY(var(--rc-progress, 0));
}

.rc-rail__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.rc-rail__stop {
  position: relative;
  display: grid;
  place-items: center;
  height: 0.75rem;
  width: 0.75rem;
}

.rc-rail__dot {
  display: block;
  height: 5px;
  width: 5px;
  border-radius: 999px;
  border: 1px solid rgb(14 17 22 / 0.35);
  background: rgb(255 255 255 / 0.85);
  transition: background-color 0.4s var(--rc-ease), border-color 0.4s var(--rc-ease);
}

.rc-rail__stop.is-done .rc-rail__dot,
.rc-rail__stop.is-active .rc-rail__dot {
  border-color: var(--rc-accent-500);
  background: var(--rc-accent-500);
}

.rc-rail__stop.is-active::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  border: 1px solid rgb(255 122 26 / 0.4);
}

.rc-rail__tip {
  position: absolute;
  right: 1.5rem;
  white-space: nowrap;
  border-radius: var(--rc-radius-pill);
  background: var(--rc-ink);
  padding: 0.25rem 0.625rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fff;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.3s var(--rc-ease), transform 0.3s var(--rc-ease);
  pointer-events: none;
}

.rc-rail__stop:hover .rc-rail__tip,
.rc-rail__stop:focus-visible .rc-rail__tip {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------- 5 hero + booking deck */

.rc-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  margin-bottom: -3.25rem;
}

@media (min-width: 48rem) {
  .rc-hero {
    margin-bottom: -4rem;
  }
}

.rc-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--rc-ink);
  border-bottom-left-radius: var(--rc-hero-corner, 0rem);
  border-bottom-right-radius: var(--rc-hero-corner, 0rem);
}

/* The film drifts up slightly slower than the page and darkens as it leaves,
   which hands the eye off to the next section instead of just scrolling away. */
.rc-hero__plate {
  position: absolute;
  inset: 0;
  transform: translate3d(0, var(--rc-hero-y, 0%), 0) scale(var(--rc-hero-scale, 1));
  will-change: transform;
}

.rc-hero__plate img,
.rc-hero__plate video {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.rc-hero__plate video {
  opacity: 0;
  transition: opacity 1.1s var(--rc-ease);
}

.rc-hero__plate video.is-ready {
  opacity: 1;
}

/* Two-stop scrim: dark at the top so the header reads, dark and heavier at the
   base so the headline and deck sit on solid ground. */
.rc-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(14 17 22 / 0.65), rgb(14 17 22 / 0.15), rgb(14 17 22 / 0.8));
}

.rc-hero__scrim--side {
  background: linear-gradient(to right, rgb(14 17 22 / 0.55), transparent 55%);
}

.rc-hero__veil {
  position: absolute;
  inset: 0;
  background: var(--rc-ink);
  opacity: var(--rc-hero-veil, 0);
}

.rc-hero__inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 8rem;
}

.rc-hero__copy {
  max-width: 56rem;
  padding-bottom: 2.5rem;
  transform: translateY(var(--rc-hero-copy-y, 0px));
  opacity: var(--rc-hero-copy-o, 1);
}

@media (min-width: 48rem) {
  .rc-hero__copy {
    padding-bottom: 3.5rem;
  }
}

.rc-hero__copy .rc-eyebrow {
  color: rgb(255 255 255 / 0.7);
}

.rc-hero__title {
  margin-top: 1.25rem;
  color: #fff;
}

/* Direct children only — word-by-word animation wraps each word in a span, and
   a blanket `span { display:block }` would stack "Drive" / "the" / "difference"
   as three lines instead of the intended two. */
.rc-hero__title > span {
  display: block;
}

/* The logo sets its wordmark over an angled orange swoosh; the headline borrows
   the gesture as a rule under the second line, sized to the word rather than to
   the column. */
.rc-hero__swoosh {
  position: relative;
  display: inline-block;
}

.rc-hero__swoosh::after {
  content: "";
  position: absolute;
  bottom: -0.02em;
  left: 0;
  height: 0.1em;
  width: 102%;
  transform-origin: left;
  transform: skewY(-1.2deg);
  border-radius: 999px;
  background: var(--rc-accent-500);
  animation: rc-rule-in 0.8s var(--rc-ease) 0.55s both;
}

.rc-hero__lead {
  margin-top: 1.5rem;
  max-width: 28rem;
  font-size: var(--rc-text-lead);
  font-weight: 500;
  color: rgb(255 255 255 / 0.75);
}

.rc-hero__trust {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.7);
}

.rc-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.rc-hero__trust svg {
  color: var(--rc-amber);
}

.rc-hero__deck {
  position: relative;
  z-index: 20;
}

/* Word-by-word entrance, run as CSS rather than JS so it plays on first paint. */
.rc-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-block: 0.08em;
  margin-block: -0.08em;
}

.rc-word > span {
  display: inline-block;
  animation: rc-word-in 0.85s var(--rc-ease) var(--rc-delay, 0s) both;
}

.rc-rise {
  animation: rc-rise-in 0.6s var(--rc-ease) var(--rc-delay, 0s) both;
}

/* --- booking deck -------------------------------------------------------- */

/* Built as a ticket rather than a card: segments divided by hairlines and a
   perforated foot row. It overhangs the bottom of the hero so it bridges two
   sections instead of floating on one.

   The markup is shaped so the SPA's own enhancers take it over — the location
   picker swaps the destination/branch cells for its searchable field, and the
   date-range enhancer swaps the two datetime inputs for a calendar. Submission
   is the picker's, which is what makes this a real search rather than a
   picture of one. */
.rc-deck {
  position: relative;
  border-radius: var(--rc-radius-card);
  border: 1px solid rgb(255 255 255 / 0.7);
  background: rgb(255 255 255 / 0.95);
  box-shadow: var(--rc-shadow-deck);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Same form, pinned under the header once the hero scrolls away. Compact foot
   keeps the bar from eating the viewport on the way down the page. */
.rc-deck.is-sticky {
  position: fixed;
  left: 50%;
  z-index: 55;
  width: min(calc(100% - 2 * var(--rc-gutter)), 96rem);
  transform: translateX(-50%);
  border-color: var(--rc-line);
  background: rgb(255 255 255 / 0.96);
  box-shadow: 0 18px 48px -28px rgb(11 25 87 / 0.45);
  animation: rc-deck-stick 0.32s var(--rc-ease) both;
}

@keyframes rc-deck-stick {
  from {
    opacity: 0.55;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.rc-deck.is-sticky .rc-deck__foot {
  display: none;
}

.rc-deck.is-sticky .rc-deck__grid > .rlp-slot,
.rc-deck.is-sticky .rc-deck__grid > .rdp-field,
.rc-deck.is-sticky .rc-deck__grid > .rdp-timeslot,
.rc-deck.is-sticky .rc-deck__cell {
  padding: 0.55rem 0.85rem;
}

.rc-deck.is-sticky .rc-deck__cell--submit {
  padding: 0.45rem;
}

.rc-deck.is-sticky .rc-deck__submit {
  padding: 0.7rem 1.35rem;
  font-size: 0.88rem;
}

@media (max-width: 39.99rem) {
  .rc-deck.is-sticky .rlp-extras {
    display: none;
  }

  .rc-deck.is-sticky .rc-deck__submit {
    font-size: 0.84rem;
    padding: 0.75rem 1rem;
  }
}

.rc-deck__grid {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border-radius: var(--rc-radius-card) var(--rc-radius-card) 0 0;
  background: rgb(231 233 238 / 0.7);
}

@media (min-width: 60rem) {
  .rc-deck__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.2fr) minmax(0, 1.1fr) auto;
    align-items: stretch;
  }
}

/* Every cell in the row — the two the enhancers inject and the submit cell —
   sits on the same white ground with the same padding, which is what makes
   three separately-authored controls read as one ticket. */
.rc-deck__grid > .rlp-slot,
.rc-deck__grid > .rdp-field,
.rc-deck__grid > .rdp-timeslot,
.rc-deck__cell {
  background: #fff;
  padding: 0.75rem 1rem;
  margin: 0;
  min-width: 0;
}

.rc-deck__cell--submit {
  display: flex;
  align-items: stretch;
  padding: 0.625rem;
}

.rc-deck__submit {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 1.05rem;
  background: var(--rc-accent-500);
  padding: 0.875rem 1.75rem;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  box-shadow: 0 14px 30px -14px rgb(255 122 26 / 0.95);
  transition: background-color 0.3s var(--rc-ease);
}

.rc-deck__submit:hover {
  background: var(--rc-accent-600);
}

/* Field labels, shared by the native cells and the enhancer-injected ones so
   the row has a single label voice. */
.rc-deck__label,
.rc-deck .rlp-label,
.rc-deck .rdp-field__label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rc-ink-muted);
  margin: 0 0 0.35rem;
}

.rc-deck__ph {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rc-ink-muted);
}

/* The perforated foot. */
.rc-deck__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  border-top: 1px dashed var(--rc-line);
  padding: 0.875rem 1.25rem;
}

.rc-deck__promo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--rc-ink-soft);
}

.rc-deck__promo svg {
  color: var(--rc-accent-500);
  flex: none;
}

.rc-deck__promo input {
  width: 7rem;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--rc-ink);
}

.rc-deck__promo input::placeholder {
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--rc-ink-muted);
}

.rc-deck__facts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--rc-ink-muted);
}

.rc-deck__facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.rc-deck__facts svg {
  color: var(--rc-amber);
}

@media (max-width: 40rem) {
  .rc-deck__facts li:not(:first-child) {
    display: none;
  }
}

/* --- enhancer overrides -------------------------------------------------- */

/* The picker and date-range layers ship their own card chrome for use inside
   the SPA's forms. Inside the deck each is one segment of a shared ticket, so
   the borders, radii and shadows come off and the deck's hairline grid does the
   dividing instead. */
.rc-deck .rlp-slot {
  grid-column: auto;
}

.rc-deck .rlp-trigger,
.rc-deck .rdp-field__surface,
.rc-deck .rdp-timeslot__surface {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  width: 100%;
}

.rc-deck .rlp-trigger__title,
.rc-deck .rdp-field__primary,
.rc-deck .rdp-timebtn__value {
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: var(--rc-ink) !important;
}

.rc-deck .rlp-trigger__sub,
.rc-deck .rdp-field__secondary {
  font-size: 0.76rem !important;
  color: var(--rc-ink-muted) !important;
}

.rc-deck .rlp-trigger__ph {
  color: var(--rc-ink-muted) !important;
  font-weight: 700;
}

/* The date chip repeats what the label above it already says. */
.rc-deck .rdp-field__chip {
  display: none !important;
}

.rc-deck .rdp-timeslot__labels {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.rc-deck .rdp-timeslot__surface {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rc-deck .rdp-timebtn {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

.rc-deck .rdp-timeslot__divider {
  width: 1px;
  height: 0.875rem;
  background: var(--rc-line);
  flex: none;
}

/* Drop-off toggle and its field sit under the row, full width, so opening it
   never reflows the four segments above. */
.rc-deck .rlp-extras {
  padding: 0.75rem 1.25rem 0;
  border-top: 1px solid rgb(231 233 238 / 0.7);
}

.rc-deck .rlp-check {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--rc-ink-soft);
  cursor: pointer;
}

.rc-deck .rlp-check input {
  accent-color: var(--rc-accent-500);
  width: 1.05rem;
  height: 1.05rem;
}

.rc-deck .rlp-drop {
  padding-top: 0.75rem;
}

.rc-deck .rlp-error {
  color: var(--rc-rose) !important;
  font-size: 0.72rem;
  font-weight: 600;
}

/* Until the enhancers mount, the native cells are what is on screen — they must
   look like the finished thing, not like scaffolding. */
.rc-deck .rlp-legacy-hidden,
.rc-deck .rdp-native-hidden {
  display: none !important;
}

.rc-deck__native {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rc-deck__native input {
  min-width: 0;
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rc-ink);
  cursor: pointer;
}

/* ------------------------------------------------------------ 6 promise band */

/* A transition device, not a section: no heading and no claim of its own. It
   catches the deck's overhang on brand blue and carries the promise list past
   the eye on the way down. */
.rc-promise {
  position: relative;
  overflow: hidden;
  background: var(--rc-brand-600);
  color: #fff;
  padding: 6rem 0 1.75rem;
}

@media (min-width: 48rem) {
  .rc-promise {
    padding-top: 7rem;
  }
}

.rc-promise__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 12% 0%, rgb(255 122 26 / 0.3), transparent 45%),
    radial-gradient(circle at 88% 100%, rgb(255 122 26 / 0.16), transparent 45%);
}

.rc-promise__tracks {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.rc-marquee {
  display: flex;
  overflow: hidden;
}

.rc-marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  will-change: transform;
  animation: rc-marquee-left var(--rc-duration, 38s) linear infinite;
}

.rc-marquee--reverse .rc-marquee__track {
  animation-name: rc-marquee-right;
}

.rc-marquee:hover .rc-marquee__track {
  animation-play-state: paused;
}

.rc-marquee__item {
  display: flex;
  flex: none;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

@media (min-width: 40rem) {
  .rc-marquee__item {
    font-size: 2.35rem;
  }
}

.rc-marquee__dot {
  display: inline-block;
  flex: none;
  margin-inline: 1.5rem;
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 999px;
  background: var(--rc-accent-500);
}

@media (min-width: 40rem) {
  .rc-marquee__dot {
    margin-inline: 2.25rem;
  }
}

.rc-marquee--muted {
  color: rgb(255 255 255 / 0.35);
}

.rc-marquee--muted .rc-marquee__dot {
  background: rgb(255 255 255 / 0.25);
}

/* Fades the tracks out at the edges so they read as continuous rather than as
   two strips that stop at the viewport. */
.rc-promise__fade {
  position: absolute;
  inset-block: 0;
  width: 3.5rem;
  pointer-events: none;
}

@media (min-width: 40rem) {
  .rc-promise__fade {
    width: 8rem;
  }
}

.rc-promise__fade--l {
  left: 0;
  background: linear-gradient(to right, var(--rc-brand-600), transparent);
}

.rc-promise__fade--r {
  right: 0;
  background: linear-gradient(to left, var(--rc-brand-600), transparent);
}

/* ------------------------------------------------------------------ 7 offers */

/* The photograph lives inside the typography: each offer's key word is set at
   full width and filled with that offer's own image, and the image pans slowly
   inside the letterforms as you scroll. */
.rc-offers {
  position: relative;
  overflow: hidden;
  background: var(--rc-surface);
}

.rc-offers__field {
  position: absolute;
  inset-inline: 0;
  top: -12%;
  height: 124%;
  pointer-events: none;
}

.rc-offers__field img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: scale(1.1) translateY(var(--rc-offers-y, 0%));
  filter: blur(64px);
  opacity: 0;
  transition: opacity 0.8s var(--rc-ease);
}

.rc-offers__field img.is-active {
  opacity: 0.34;
}

.rc-offers__field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(246 247 249 / 0.72);
}

.rc-offers__head {
  position: relative;
  padding-top: var(--rc-section-y);
}

.rc-offers__wordwrap {
  position: relative;
  margin-top: 2.5rem;
  user-select: none;
}

.rc-offers__word {
  padding-inline: 0.75rem;
  text-align: center;
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.055em;
  font-size: clamp(4.4rem, 18.5vw, 16rem);
  color: var(--rc-accent-500);
  background-size: 118% auto;
  background-position: center var(--rc-offers-fill, 50%);
  background-repeat: no-repeat;
  transition: opacity 0.55s var(--rc-ease);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .rc-offers__word {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* A print of the same photograph, tilted so the composition has a foreground as
   well as a middle and a back. */
.rc-offers__print {
  position: absolute;
  bottom: -4rem;
  right: 2vw;
  display: none;
  width: 11.5rem;
  overflow: hidden;
  border-radius: 1.1rem;
  box-shadow: 0 36px 70px -28px rgb(11 25 87 / 0.55);
  outline: 1px solid rgb(255 255 255 / 0.7);
  transform: rotate(4.5deg) translateY(var(--rc-offers-card-y, 0px));
  transition: transform 0.6s var(--rc-ease);
}

@media (min-width: 64rem) {
  .rc-offers__print {
    display: block;
  }
}

@media (min-width: 80rem) {
  .rc-offers__print {
    right: 4vw;
    width: 13rem;
  }
}

.rc-offers__print:hover {
  transform: rotate(0deg) scale(1.03);
}

.rc-offers__print > div {
  position: relative;
  aspect-ratio: 3 / 4;
}

.rc-offers__print img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s var(--rc-ease);
}

.rc-offers__print img.is-active {
  opacity: 1;
}

.rc-offers__print span {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  background: linear-gradient(to top, rgb(14 17 22 / 0.8), transparent);
  padding: 2rem 1rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #fff;
}

.rc-offers__rule {
  height: 1px;
  width: 100%;
  background: rgb(14 17 22 / 0.1);
}

.rc-offers__foot {
  position: relative;
  margin-top: -1rem;
  padding-bottom: var(--rc-section-y);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.rc-offers__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
}

/* The coupon, with the perforation punched out of its own edges. */
.rc-coupon {
  display: inline-flex;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: stretch;
  overflow: hidden;
  border-radius: 1.1rem;
  background: #fff;
  box-shadow: 0 26px 54px -26px rgb(11 25 87 / 0.45);
  outline: 1px solid var(--rc-line);
}

.rc-coupon__code {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
}

.rc-coupon__code svg {
  flex: none;
  color: var(--rc-accent-500);
}

.rc-coupon__label {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rc-ink-muted);
}

.rc-coupon__value {
  margin-top: 0.125rem;
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.rc-coupon__perf {
  position: relative;
  width: 1px;
  align-self: stretch;
}

.rc-coupon__perf::before {
  content: "";
  position: absolute;
  inset-block: 0.625rem;
  left: 0;
  width: 0;
  border-left: 2px dashed var(--rc-line);
}

.rc-coupon__perf::after,
.rc-coupon__notch {
  content: "";
  position: absolute;
  left: 50%;
  height: 1rem;
  width: 1rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--rc-surface);
}

.rc-coupon__perf::after {
  top: -0.5rem;
}

.rc-coupon__notch {
  bottom: -0.5rem;
}

.rc-coupon__copy {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--rc-brand-600);
  transition: background-color 0.3s var(--rc-ease);
}

.rc-coupon__copy:hover {
  background: var(--rc-surface);
}

.rc-coupon__copy.is-copied {
  color: var(--rc-mint);
}

.rc-offers__note {
  width: 100%;
  font-size: 0.74rem;
  color: var(--rc-ink-muted);
}

.rc-offers__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1.5rem;
  border-top: 1px solid rgb(14 17 22 / 0.1);
  padding-top: 1.25rem;
  max-width: 36rem;
}

.rc-tab {
  position: relative;
  padding-bottom: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rc-ink-muted);
  transition: color 0.3s var(--rc-ease);
}

.rc-tab:hover {
  color: var(--rc-ink-soft);
}

.rc-tab.is-active {
  color: var(--rc-ink);
}

.rc-tab::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--rc-accent-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--rc-ease);
}

.rc-tab.is-active::after {
  transform: scaleX(1);
}

/* ------------------------------------------------------------------- 8 fleet */

/* The four vehicle photographs are studio shots lit orange-left and blue-right —
   the brand's own colours. Cards would waste that, so here the photograph is
   the section: full bleed, one car at a time, with the family name set large
   enough to run off the left edge behind it. */
.rc-fleet {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 92svh;
  overflow: hidden;
  background: var(--rc-ink);
  color: #fff;
}

.rc-fleet__stage {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.rc-fleet__stage img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.1s var(--rc-ease), transform 1.1s var(--rc-ease);
}

.rc-fleet__stage img.is-active {
  opacity: 1;
  transform: none;
}

.rc-fleet__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--rc-ink), rgb(14 17 22 / 0.45), rgb(14 17 22 / 0.7)),
    linear-gradient(to right, rgb(14 17 22 / 0.7), transparent, rgb(14 17 22 / 0.4));
}

/* The one thing that tells you the whole stage changed, not just the car. */
.rc-fleet__glow {
  position: absolute;
  bottom: -38%;
  left: 50%;
  height: 52vh;
  width: 58vw;
  transform: translateX(-50%);
  border-radius: 999px;
  filter: blur(130px);
  opacity: 0.3;
  pointer-events: none;
  transition: background-color 1.2s var(--rc-ease);
}

.rc-fleet__word {
  position: absolute;
  inset-block: 0;
  left: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
}

.rc-fleet__word span {
  margin-left: -0.06em;
  white-space: nowrap;
  font-size: clamp(6rem, 21vw, 19rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.055em;
  color: rgb(255 255 255 / 0.13);
  transition: opacity 0.6s var(--rc-ease);
}

/* padding-block, not the shorthand: these elements also carry .rc-shell, and a
   shorthand would reset its padding-inline to zero and drop the page gutter. */
.rc-fleet__inner {
  position: relative;
  display: flex;
  min-height: 92svh;
  flex-direction: column;
  padding-block: 7rem 2.5rem;
}

@media (min-width: 40rem) {
  .rc-fleet__inner {
    padding-top: 8rem;
  }
}

.rc-fleet .rc-eyebrow {
  color: var(--rc-accent-400);
}

.rc-fleet__head p:last-child {
  margin-top: 1rem;
  max-width: 24rem;
  font-size: 0.98rem;
  color: rgb(255 255 255 / 0.6);
}

.rc-fleet__spacer {
  flex: 1;
  min-height: 6rem;
}

.rc-fleet__selector {
  margin-top: 2rem;
}

.rc-fleet__now {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.rc-fleet__note {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

@media (min-width: 40rem) {
  .rc-fleet__note {
    font-size: 1.6rem;
  }
}

.rc-fleet__spec {
  margin-top: 0.25rem;
  font-size: 0.86rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rc-accent-400);
}

.rc-count {
  flex: none;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8rem;
  font-weight: 700;
  color: rgb(255 255 255 / 0.4);
}

.rc-fleet__pills {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  border-top: 1px solid rgb(255 255 255 / 0.15);
  padding-top: 1.25rem;
}

.rc-fleet__pills-label {
  margin-right: 0.25rem;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgb(255 255 255 / 0.4);
}

@media (max-width: 40rem) {
  .rc-fleet__pills-label {
    display: none;
  }
}

/* Named options read as prose; a segmented control reads as something you
   operate. Pill, border, a swatch in the family's own colour, and the autoplay
   clock running along the active one so the rotation is visibly a selection. */
.rc-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  border-radius: var(--rc-radius-pill);
  border: 1px solid rgb(255 255 255 / 0.25);
  padding: 0.625rem 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgb(255 255 255 / 0.7);
  transition: all 0.3s var(--rc-ease);
}

@media (min-width: 40rem) {
  .rc-pill {
    padding-inline: 1.25rem;
  }
}

.rc-pill:hover {
  border-color: rgb(255 255 255 / 0.6);
  color: #fff;
}

.rc-pill.is-active {
  border-color: #fff;
  background: #fff;
  color: var(--rc-ink);
  box-shadow: 0 10px 28px -14px rgb(0 0 0 / 0.8);
}

.rc-pill__swatch {
  height: 0.375rem;
  width: 0.375rem;
  flex: none;
  border-radius: 999px;
  opacity: 0.6;
}

.rc-pill.is-active .rc-pill__swatch {
  opacity: 1;
}

.rc-pill__clock {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--rc-accent-500);
}

.rc-pill.is-active .rc-pill__clock.is-running {
  transform: scaleX(1);
  transition: transform 6s linear;
}

.rc-fleet__classes {
  margin-left: auto;
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

@media (min-width: 64rem) {
  .rc-fleet__classes {
    display: flex;
  }
}

.rc-fleet__classes span {
  margin-right: 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgb(255 255 255 / 0.35);
}

.rc-chip {
  border-radius: var(--rc-radius-pill);
  border: 1px solid rgb(255 255 255 / 0.15);
  padding: 0.375rem 0.75rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.65);
  transition: border-color 0.3s var(--rc-ease), color 0.3s var(--rc-ease);
}

.rc-chip:hover {
  border-color: rgb(255 255 255 / 0.45);
  color: #fff;
}

/* ------------------------------------------------------------ 9 how it works */

/* Three steps is a small idea, so it gets one frame rather than three screens
   of sticky scrolling. The photograph is the section — full bleed, edge to
   edge, drifting — and everything else is set over it: the step copy at
   reading size, a film-scrubber track along the bottom, and the three rental
   policies on glass beneath it. One fold, one picture, no cards. */
.rc-steps {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100svh;
  overflow: hidden;
  background: #05070d;
  color: #fff;
}

/* --- the frame --- */

.rc-steps__stage {
  position: absolute;
  inset: -8% 0;
  z-index: -1;
  will-change: transform;
}

.rc-steps__stage img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  /* Fallback; each frame overrides this with its own focus point. */
  object-position: 55% 35%;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 1.2s var(--rc-ease), transform 1.2s var(--rc-ease);
}

/* The active frame keeps drifting for the whole time it holds, so the section
   is never a still photograph behind moving text. */
.rc-steps__stage img.is-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1.2s var(--rc-ease), transform 7s linear;
}

/* Three passes: a wash that lifts the whole frame off white, a left-hand ramp
   under the copy, and a floor under the track and policies. */
.rc-steps__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgb(5 7 13 / 0.94) 0%, rgb(5 7 13 / 0.55) 34%, rgb(5 7 13 / 0) 68%),
    linear-gradient(to right, rgb(5 7 13 / 0.86) 0%, rgb(5 7 13 / 0.4) 45%, rgb(5 7 13 / 0.05) 78%),
    radial-gradient(120% 90% at 62% 38%, transparent 38%, rgb(5 7 13 / 0.55) 100%),
    linear-gradient(rgb(5 7 13 / 0.24), rgb(5 7 13 / 0.24));
}

/* --- layout --- */

/* Padding-top clears the pinned booking bar, whose real height the deck
   publishes as --rc-deck-inset while it is stuck. */
.rc-steps__inner {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-rows: auto 1fr auto auto;
  gap: clamp(1.5rem, 3vh, 2.75rem);
  padding-top: calc(var(--rc-deck-inset, 7rem) + clamp(1.25rem, 3vh, 2.5rem));
  padding-bottom: clamp(1.5rem, 3.5vh, 2.75rem);
}

.rc-steps__eyebrow {
  color: var(--rc-accent-300);
}

.rc-steps__eyebrow .rc-eyebrow__rule {
  background: var(--rc-accent-300);
}

.rc-steps__title {
  margin-top: 0.65rem;
  max-width: 18ch;
  color: #fff;
  text-wrap: balance;
}

/* --- the active step --- */

.rc-steps__now {
  display: grid;
  align-content: center;
  gap: clamp(0.75rem, 2vh, 1.5rem);
  max-width: 34rem;
}

@media (min-width: 64rem) {
  .rc-steps__now {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
    max-width: 46rem;
  }
}

/* Outlined, not filled — a solid numeral this size would fight the photograph
   it is sitting on. */
.rc-steps__numeral {
  font-size: clamp(3.25rem, 9vh, 9rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 2px rgb(255 255 255 / 0.6);
  text-shadow: 0 8px 40px rgb(5 7 13 / 0.6);
}

.rc-steps__copy {
  min-width: 0;
}

.rc-steps__copy.is-running {
  animation: rc-steps-copy 0.62s var(--rc-ease) both;
}

@keyframes rc-steps-copy {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.rc-steps__name {
  font-size: clamp(1.75rem, 3.4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #fff;
}

.rc-steps__body {
  margin-top: 0.65rem;
  max-width: 34ch;
  font-size: clamp(0.95rem, 1.15vw, 1.15rem);
  line-height: 1.55;
  color: rgb(255 255 255 / 0.74);
}

.rc-steps__stat {
  margin-top: 1.1rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  border-left: 2px solid var(--rc-accent-500);
  padding-left: 0.85rem;
}

.rc-steps__stat strong {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}

.rc-steps__stat small {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgb(255 255 255 / 0.6);
}

/* --- the track --- */

/* A scrubber, not a list of cards: three hairlines side by side, the live one
   filling left to right for as long as its frame holds. */
.rc-steps__track {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 22rem) {
  .rc-steps__track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

@media (min-width: 40rem) {
  .rc-steps__track {
    gap: 1.5rem;
  }
}

.rc-track {
  display: block;
  width: 100%;
  text-align: left;
  color: inherit;
}

.rc-track__bar {
  position: relative;
  display: block;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.22);
}

.rc-track__clock {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--rc-accent-500);
}

.rc-track.is-active .rc-track__clock.is-running {
  transform: scaleX(1);
  transition: transform 5.2s linear;
}

/* Steps already played keep their line lit, so the track reads as progress. */
.rc-track__row {
  margin-top: 0.7rem;
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  opacity: 0.5;
  transition: opacity 0.4s var(--rc-ease);
}

.rc-track:hover .rc-track__row,
.rc-track.is-active .rc-track__row {
  opacity: 1;
}

.rc-track__n {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--rc-accent-300);
}

.rc-track__label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

@media (min-width: 40rem) {
  .rc-track__label {
    font-size: 0.95rem;
  }
}

/* --- the policies --- */

/* The three questions people actually ask at the counter, answered on the same
   screen as the steps and on the same photograph. */
.rc-policies {
  display: grid;
  gap: 0.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  padding-top: clamp(1rem, 2.5vh, 1.75rem);
}

@media (min-width: 52rem) {
  .rc-policies {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
  }
}

.rc-policy__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.rc-policy__ico {
  display: grid;
  place-items: center;
  height: 1.75rem;
  width: 1.75rem;
  flex: none;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.18);
  background: rgb(255 255 255 / 0.08);
  color: var(--rc-accent-300);
}

.rc-policy__body {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgb(255 255 255 / 0.66);
}

/* Below sm the booking bar takes half the screen, so the policies drop to three
   stacked chips — the bodies are what push the frame past the fold, and the
   titles alone already answer the question. */
@media (max-width: 51.999rem) {
  .rc-policy__body {
    display: none;
  }

  .rc-policies {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .rc-policy__title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.78rem;
    line-height: 1.25;
  }
}

/* ---------------------------------------------------------------- 10 shuttle */

/* The shuttle's defining fact is that it never stops — one leaves every ten
   minutes, around the clock. So the section never stops either: a wall of
   transfer photography butted together like a film reel and looped. */
.rc-shuttle {
  position: relative;
  isolation: isolate;
  display: flex;
  height: 86svh;
  min-height: 34rem;
  flex-direction: column;
  overflow: hidden;
  background: var(--rc-ink);
  color: #fff;
}

.rc-shuttle__reel {
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate3d(var(--rc-reel-x, 0%), 0, 0);
}

.rc-shuttle__strip {
  display: flex;
  height: 100%;
  width: max-content;
  animation: rc-marquee-left 78s linear infinite;
}

.rc-shuttle__frame {
  position: relative;
  height: 100%;
  width: clamp(15rem, 24vw, 22rem);
  flex: none;
  border-right: 1px solid rgb(14 17 22 / 0.7);
}

.rc-shuttle__frame img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Dense under the type on the left, then out of the way — the photography is
   the point of the section, it should not be dimmed into a texture. */
.rc-shuttle__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      100deg,
      var(--rc-ink) 4%,
      rgb(14 17 22 / 0.88) 34%,
      rgb(14 17 22 / 0.35) 62%,
      rgb(14 17 22 / 0.12) 100%
    ),
    linear-gradient(to top, rgb(14 17 22 / 0.9), transparent, rgb(14 17 22 / 0.45));
}

.rc-shuttle__type {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding-block: 4rem;
}

.rc-shuttle .rc-eyebrow {
  color: var(--rc-accent-400);
}

.rc-shuttle__title {
  margin-top: 1.25rem;
  max-width: 16ch;
  color: #fff;
}

.rc-shuttle__title em {
  font-style: normal;
  color: var(--rc-accent-500);
}

.rc-shuttle__lead {
  margin-top: 1.5rem;
  max-width: 24rem;
  font-size: var(--rc-text-lead);
  color: rgb(255 255 255 / 0.65);
}

.rc-shuttle__cta {
  margin-top: 2.25rem;
}

.rc-shuttle__base {
  position: relative;
  padding-bottom: 1.75rem;
}

.rc-shuttle__baserow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Terminal → Your car, kept to a hairline. */
.rc-shuttle__line {
  display: none;
  min-width: 0;
  flex: 1;
}

@media (min-width: 40rem) {
  .rc-shuttle__line {
    display: block;
  }
}

.rc-shuttle__track {
  position: relative;
  height: 1px;
  width: 100%;
  max-width: 28rem;
  background: rgb(255 255 255 / 0.2);
}

.rc-shuttle__track::before,
.rc-shuttle__track::after {
  content: "";
  position: absolute;
  top: -2px;
  height: 5px;
  width: 5px;
  border-radius: 999px;
}

.rc-shuttle__track::before {
  left: 0;
  background: rgb(255 255 255 / 0.5);
}

.rc-shuttle__track::after {
  right: 0;
  background: var(--rc-accent-500);
}

.rc-shuttle__bus {
  position: absolute;
  top: -1px;
  height: 3px;
  width: 2.5rem;
  border-radius: 999px;
  background: var(--rc-accent-500);
  animation: rc-shuttle-run 9s ease-in-out infinite;
}

.rc-shuttle__ends {
  margin-top: 0.625rem;
  display: flex;
  width: 100%;
  max-width: 28rem;
  justify-content: space-between;
  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgb(255 255 255 / 0.35);
}

.rc-shuttle__ends span:last-child {
  color: var(--rc-accent-400);
}

/* The tracker: one small chip, and nothing more. */
.rc-shuttle__chip {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.875rem;
  border-radius: var(--rc-radius-pill);
  border: 1px solid rgb(255 255 255 / 0.15);
  background: rgb(255 255 255 / 0.1);
  padding: 0.625rem 1rem;
  box-shadow: 0 18px 40px -22px rgb(0 0 0 / 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.rc-shuttle__bay {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(255 255 255 / 0.55);
}

.rc-shuttle__live {
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 999px;
  background: var(--rc-mint);
  animation: rc-pulse-ring 2.4s infinite;
}

.rc-shuttle__divider {
  height: 1rem;
  width: 1px;
  background: rgb(255 255 255 / 0.2);
}

.rc-shuttle__eta {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.rc-shuttle__eta small {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgb(255 255 255 / 0.5);
}

/* Split-flap (Solari) digits — each slat has the seam of a real flap. */
.rc-flap {
  display: inline-flex;
  gap: 2px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

.rc-flap span {
  position: relative;
  display: grid;
  width: 0.72em;
  place-items: center;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.1);
  padding-block: 0.25rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.rc-flap span::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: rgb(14 17 22 / 0.45);
}

/* ------------------------------------------------------- 11 proof + rating */

/* Four real reviews, set as display typography rather than dropped into
   testimonial cards. */
.rc-proof {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--rc-ink);
  color: #fff;
  padding-block: var(--rc-section-y);
}

.rc-proof__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.rc-proof__bg img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.18);
  transition: opacity 1.2s var(--rc-ease), transform 9s linear;
}

.rc-proof__bg img.is-active {
  opacity: 0.24;
  transform: scale(1.04);
}

.rc-proof__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--rc-ink), rgb(14 17 22 / 0.55), var(--rc-ink));
}

/* The place name, bleeding off the bottom-left corner. */
.rc-proof__ghost {
  position: absolute;
  bottom: 0;
  left: 0;
  display: none;
  overflow: hidden;
  pointer-events: none;
}

@media (min-width: 64rem) {
  .rc-proof__ghost {
    display: block;
  }
}

.rc-proof__ghost span {
  display: block;
  margin-bottom: -0.2em;
  margin-left: -0.05em;
  white-space: nowrap;
  font-size: 11rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgb(255 255 255 / 0.055);
  transition: opacity 0.8s var(--rc-ease);
}

.rc-proof__plate {
  position: absolute;
  inset-block: 0;
  right: 0;
  display: none;
  width: 38%;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  pointer-events: none;
}

@media (min-width: 80rem) {
  .rc-proof__plate {
    display: flex;
  }
}

.rc-proof__plate > div {
  position: relative;
  margin-right: 4vw;
  height: 62%;
  width: 19rem;
  overflow: hidden;
  border-radius: var(--rc-radius-card);
  box-shadow: 0 50px 90px -40px rgb(0 0 0 / 0.9);
  outline: 1px solid rgb(255 255 255 / 0.1);
}

.rc-proof__plate img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.85s var(--rc-ease);
}

.rc-proof__plate img.is-active {
  opacity: 1;
}

.rc-proof__platecap {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
  background: linear-gradient(to top, rgb(14 17 22 / 0.8), transparent);
  width: 100%;
}

.rc-proof__platecap small {
  display: block;
  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--rc-accent-400);
}

.rc-proof__platecap strong {
  margin-top: 0.25rem;
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.rc-proof__head {
  max-width: 48rem;
}

.rc-proof .rc-eyebrow {
  color: var(--rc-accent-400);
}

.rc-proof__head h2 {
  margin-top: 1rem;
  color: #fff;
}

.rc-proof__head p {
  margin-top: 1rem;
  max-width: 28rem;
  font-size: 0.95rem;
  color: rgb(255 255 255 / 0.5);
}

.rc-proof__stage {
  position: relative;
  margin-top: 3rem;
  min-height: 15rem;
}

@media (min-width: 40rem) {
  .rc-proof__stage {
    margin-top: 3.5rem;
    min-height: 13rem;
  }
}

.rc-proof__quote {
  max-width: 56rem;
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.035em;
}

.rc-proof__quote i {
  font-style: normal;
  color: var(--rc-accent-500);
}

/* Word by word from behind a mask, so the quote arrives at reading speed
   instead of appearing all at once. */
.rc-proof__quote .rc-word > span {
  animation-duration: 0.6s;
}

.rc-proof__by {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  animation: rc-rise-in 0.5s var(--rc-ease) 0.25s both;
}

.rc-proof__avatar {
  display: grid;
  height: 2.75rem;
  width: 2.75rem;
  flex: none;
  place-items: center;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.2);
}

.rc-proof__by strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.rc-proof__by small {
  display: block;
  font-size: 0.8rem;
  color: rgb(255 255 255 / 0.5);
}

.rc-proof__picker {
  margin-top: 2.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rc-proof__dots {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.rc-dot {
  position: relative;
  display: grid;
  height: 2.5rem;
  width: 2.5rem;
  flex: none;
  place-items: center;
}

.rc-dot__mark {
  display: block;
  height: 0.625rem;
  width: 0.625rem;
  border-radius: 999px;
  opacity: 0.45;
  transition: all 0.5s var(--rc-ease);
}

.rc-dot:hover .rc-dot__mark {
  opacity: 0.85;
}

.rc-dot.is-active .rc-dot__mark {
  height: 1rem;
  width: 1rem;
  opacity: 1;
}

/* The ring is the autoplay clock — the rotation becomes legible instead of
   just happening. */
.rc-dot__ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
  opacity: 0;
  pointer-events: none;
}

.rc-dot.is-active .rc-dot__ring {
  opacity: 1;
}

.rc-dot__ring circle {
  fill: none;
  stroke-width: 1.5;
}

.rc-dot__ring .rc-dot__bg {
  stroke: rgb(255 255 255 / 0.18);
}

.rc-dot__ring .rc-dot__fg {
  stroke: var(--rc-accent-500);
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}

.rc-dot.is-active .rc-dot__fg.is-running {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 4.2s linear;
}

/* --- rating -------------------------------------------------------------- */

/* Split out of the testimonials and set at the end of the page, where it reads
   as the thing that backs everything above it. */
.rc-rating {
  position: relative;
  background: #fff;
  color: var(--rc-ink);
  padding-block: calc(var(--rc-section-y) * 0.8);
}

.rc-rating__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.5rem 3rem;
  border-bottom: 1px solid var(--rc-line);
  padding-bottom: 2.5rem;
}

.rc-rating__score {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
}

.rc-rating__num {
  font-size: clamp(4.5rem, 10vw, 9rem);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.055em;
}

.rc-rating__stars {
  display: flex;
  gap: 0.25rem;
  color: var(--rc-amber);
}

.rc-rating__scale {
  padding-bottom: 0.5rem;
}

.rc-rating__caption {
  margin-top: 0.625rem;
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--rc-ink-muted);
}

.rc-rating__lead {
  max-width: 24rem;
  padding-bottom: 0.75rem;
}

.rc-rating__list {
  display: grid;
  gap: 1.5rem 2.5rem;
  padding-top: 2.25rem;
}

@media (min-width: 40rem) {
  .rc-rating__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .rc-rating__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.rc-rating__list strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.rc-rating__list small {
  margin-top: 0.25rem;
  display: block;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--rc-ink-muted);
}

/* -------------------------------------------------------------- 12 next trip */

/* Scrolling this section is a camera move, not a layout change: a frame held in
   the dark opens out to the bleed while the picture inside counter-zooms, then
   the car arrives and the booking line resolves underneath. */
.rc-trip {
  position: relative;
  background: var(--rc-ink);
  color: #fff;
}

@media (min-width: 64rem) {
  .rc-trip.is-pinned {
    height: 260svh;
  }
}

.rc-trip__stage {
  position: relative;
  display: flex;
  min-height: 94svh;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

@media (min-width: 64rem) {
  .rc-trip.is-pinned .rc-trip__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 0;
  }

  /* Clearance for the pinned booking bar — otherwise it slides over the section
     instead of above it, which is the "not fitting" the viewport shows. */
  html.rc-deck-sticky .rc-trip.is-pinned .rc-trip__stage {
    padding-top: 9.5rem;
  }
}

.rc-trip__glow {
  position: absolute;
  bottom: -33%;
  left: 50%;
  height: 80vh;
  width: 80vw;
  transform: translateX(-50%);
  border-radius: 999px;
  filter: blur(140px);
  opacity: 0.4;
  pointer-events: none;
  transition: background-color 1.2s var(--rc-ease);
}

.rc-trip__name {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: var(--rc-trip-name-o, 0.12);
  transform: scale(var(--rc-trip-name-s, 1)) translateX(var(--rc-trip-name-x, 0%));
}

.rc-trip__name span {
  white-space: nowrap;
  font-size: 15vw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: #fff;
}

.rc-trip__frame {
  position: absolute;
  top: var(--rc-trip-inset, 0%);
  right: var(--rc-trip-inset, 0%);
  bottom: var(--rc-trip-inset, 0%);
  left: var(--rc-trip-inset, 0%);
  overflow: hidden;
  border-radius: var(--rc-trip-radius, 0rem);
}

.rc-trip__photos {
  position: absolute;
  inset: 0;
  transform: scale(var(--rc-trip-photo-s, 1));
}

.rc-trip__photos img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s var(--rc-ease);
}

.rc-trip__photos img.is-active {
  opacity: 1;
}

.rc-trip__scrim {
  position: absolute;
  inset: 0;
  opacity: var(--rc-trip-scrim, 1);
  background: linear-gradient(
    85deg,
    var(--rc-ink) 2%,
    rgb(14 17 22 / 0.8) 30%,
    rgb(14 17 22 / 0.25) 62%,
    transparent 100%
  );
}

.rc-trip__scrim--v {
  opacity: 1;
  background: linear-gradient(to top, rgb(14 17 22 / 0.85), transparent, rgb(14 17 22 / 0.35));
}

/* The studio plate is feathered on its left edge so it joins the scene rather
   than sitting on it as a rectangle. */
.rc-trip__car {
  position: absolute;
  inset-block: 0;
  right: 0;
  display: none;
  width: 46%;
  pointer-events: none;
  transform: translateX(var(--rc-trip-car-x, 0%));
}

@media (min-width: 64rem) {
  .rc-trip__car {
    display: block;
  }
}

.rc-trip__car > div {
  position: relative;
  height: 100%;
  width: 100%;
  mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 100%);
}

.rc-trip__car img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 42% center;
}

.rc-trip__carcap {
  position: absolute;
  right: 2rem;
  top: 22%;
  text-align: right;
}

@media (min-width: 80rem) {
  .rc-trip__carcap {
    right: 3.5rem;
  }
}

.rc-trip__carcap small {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--rc-accent-400);
}

.rc-trip__carcap strong {
  margin-top: 0.375rem;
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.rc-trip__words {
  position: relative;
  padding-bottom: 2.5rem;
  opacity: var(--rc-trip-copy-o, 1);
  transform: translateY(var(--rc-trip-copy-y, 0px));
}

.rc-trip .rc-eyebrow {
  color: rgb(255 255 255 / 0.55);
}

.rc-trip__title {
  margin-top: 1.25rem;
  max-width: 14ch;
  color: #fff;
}

.rc-trip__cta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
}

.rc-trip__cta span {
  font-size: 0.84rem;
  color: rgb(255 255 255 / 0.45);
}

.rc-trip__base {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  padding-block: 1.25rem;
}

.rc-trip__stops {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
}

.rc-trip__stops > li:first-child {
  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgb(255 255 255 / 0.35);
}

.rc-trip__stop {
  position: relative;
  padding-bottom: 0.375rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgb(255 255 255 / 0.4);
  transition: color 0.3s var(--rc-ease);
}

.rc-trip__stop:hover {
  color: rgb(255 255 255 / 0.75);
}

.rc-trip__stop.is-active {
  color: #fff;
}

.rc-trip__stop::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--rc-accent-500);
  transform: scaleX(0);
  transition: transform 0.4s var(--rc-ease);
}

.rc-trip__stop.is-active::after {
  transform: scaleX(1);
}

.rc-trip__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgb(255 255 255 / 0.4);
}

.rc-trip__meta em {
  font-style: normal;
  color: var(--rc-accent-400);
}

.rc-trip__meta i {
  height: 0.75rem;
  width: 1px;
  background: rgb(255 255 255 / 0.2);
}

/* ----------------------------------------------------------- 13 destinations */

/* One treatment for every stop: the photograph fills a tile of the strip's own
   height and the name sits on it. Only the crop alternates — portrait and
   landscape plates give the row its rhythm, while a shared height keeps the
   names on one baseline instead of colliding with the heading and the footer,
   which is what two treatments and per-tile offsets used to do. */
.rc-dest {
  position: relative;
  background: var(--rc-sand);
  color: var(--rc-ink);
}

.rc-dest__sticky {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 64rem) {
  .rc-dest.is-pinned .rc-dest__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
  }
}

/* Clears the pinned booking bar, whose real height the deck publishes. */
.rc-dest__head {
  flex: none;
  padding-top: var(--rc-section-y);
  padding-bottom: clamp(1.25rem, 2.5vh, 2rem);
}

html.rc-deck-sticky .rc-dest__head {
  padding-top: calc(var(--rc-deck-inset, 7rem) + clamp(1rem, 2.5vh, 2rem));
}

.rc-dest__strip {
  display: flex;
  align-items: stretch;
}

.rc-dest.is-pinned .rc-dest__strip {
  min-height: 0;
  flex: 1;
}

.rc-dest:not(.is-pinned) .rc-dest__strip {
  height: min(30rem, 58svh);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.rc-dest:not(.is-pinned) .rc-dest__strip::-webkit-scrollbar {
  display: none;
}

.rc-dest__track {
  display: flex;
  height: 100%;
  align-items: stretch;
  gap: 1.25rem;
  padding-inline: 1.25rem;
  will-change: transform;
  transform: translate3d(var(--rc-dest-x, 0px), 0, 0);
}

@media (min-width: 48rem) {
  .rc-dest__track {
    gap: 1.75rem;
    padding-inline: 2rem;
  }
}

@media (min-width: 80rem) {
  .rc-dest__track {
    gap: 2.25rem;
    padding-inline: 3.5rem;
  }
}

/* Width follows from the shared height, so the tiles can never outgrow the band
   they sit in however short the viewport gets. */
.rc-stop {
  position: relative;
  display: block;
  flex: none;
  height: 100%;
  width: auto;
  max-width: 84vw;
  isolation: isolate;
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--rc-surface-2);
  box-shadow: var(--rc-shadow-soft);
  scroll-snap-align: center;
  transition: transform 0.5s var(--rc-ease), box-shadow 0.5s var(--rc-ease);
}

.rc-stop--portrait {
  aspect-ratio: 3 / 4;
}

.rc-stop--wide {
  aspect-ratio: 3 / 2;
}

.rc-stop:hover {
  transform: translateY(-4px);
  box-shadow: var(--rc-shadow-lift);
}

.rc-stop__img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--rc-ease);
}

.rc-stop:hover .rc-stop__img {
  transform: scale(1.05);
}

/* One scrim under the name on every tile — deep enough to carry white type over
   a bright sky, short enough to leave the photograph alone. */
.rc-stop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(8 11 18 / 0.82) 0%, rgb(8 11 18 / 0.28) 38%, transparent 66%);
}

.rc-stop__place {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  border-radius: var(--rc-radius-pill);
  background: rgb(255 255 255 / 0.88);
  padding: 0.25rem 0.625rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rc-ink);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.rc-stop__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  padding: 1.25rem 1.35rem;
  color: #fff;
}

.rc-stop__name {
  display: block;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #fff;
}

.rc-stop__region {
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgb(255 255 255 / 0.72);
}

.rc-stop__region svg {
  color: var(--rc-accent-400);
  transition: transform 0.3s var(--rc-ease);
}

.rc-stop:hover .rc-stop__region svg {
  transform: translate(2px, -2px);
}

/* The remaining destinations arrive as a typographic index grouped by region —
   26 more photo tiles is exactly the grid this section avoids. */
.rc-index {
  position: relative;
  flex: none;
  align-self: stretch;
  scroll-snap-align: center;
}

.rc-index__panel {
  display: flex;
  height: 100%;
  width: min(42rem, 84vw);
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--rc-brand-600);
  padding: 1.75rem;
  color: #fff;
}

@media (min-width: 40rem) {
  .rc-index__panel {
    padding: 2.25rem;
  }
}

.rc-index__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.rc-index__top .rc-eyebrow {
  color: var(--rc-accent-300);
}

.rc-index__top h3 {
  margin-top: 0.55rem;
  font-size: clamp(1.35rem, 1.9vw, 1.9rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.rc-index__go {
  display: grid;
  height: 2.5rem;
  width: 2.5rem;
  flex: none;
  place-items: center;
  border-radius: 999px;
  background: var(--rc-accent-500);
  color: #fff;
  transition: transform 0.3s var(--rc-ease);
}

.rc-index__go:hover {
  transform: scale(1.05);
}

/* Multi-column rather than a grid: Europe has eleven entries and Asia has one,
   so a grid would size every row to Europe and leave most of the panel empty. */
.rc-index__cols {
  margin-top: 1.5rem;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  columns: 2;
  column-gap: 2rem;
  scrollbar-width: none;
}

.rc-index__cols::-webkit-scrollbar {
  display: none;
}

@media (min-width: 64rem) {
  .rc-index__cols {
    columns: 3;
  }
}

.rc-index__group {
  margin-bottom: 1rem;
  break-inside: avoid;
}

.rc-index__group p {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rc-accent-300);
}

.rc-index__group ul {
  margin-top: 0.25rem;
}

.rc-index__group a {
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.7);
  transition: color 0.3s var(--rc-ease);
}

.rc-index__group a:hover {
  color: #fff;
}

.rc-index__foot {
  margin-top: auto;
  border-top: 1px solid rgb(255 255 255 / 0.15);
  padding-top: 1rem;
  font-size: 0.8rem;
  color: rgb(255 255 255 / 0.55);
}

.rc-dest__foot {
  flex: none;
  padding-block: clamp(1rem, 2.5vh, 1.75rem) clamp(1.5rem, 3vh, 2.25rem);
}

.rc-dest__footrow {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rc-dest__hint {
  flex: none;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rc-ink-muted);
}

.rc-dest__rail {
  position: relative;
  height: 1px;
  flex: 1;
  background: rgb(14 17 22 / 0.12);
}

.rc-dest__rail span {
  position: absolute;
  inset-block: 0;
  left: 0;
  display: block;
  width: var(--rc-dest-progress, 4%);
  background: var(--rc-accent-500);
}

/* --------------------------------------------------- 14 finale + wordmark */

/* The last screen is a scene with real distance in it rather than a photograph
   with a panel on top: three passes of the same plate at three rates, with the
   closing line set between them. */
.rc-finale {
  position: relative;
  background: var(--rc-ink);
  color: #fff;
}

.rc-finale__scene {
  position: relative;
  height: 128svh;
}

.rc-finale__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.rc-finale__layer {
  position: absolute;
  inset-inline: 0;
}

.rc-finale__layer img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.rc-finale__far {
  top: -12%;
  bottom: -12%;
  transform: translateY(var(--rc-fin-far, 0%));
}

.rc-finale__far img {
  transform: scale(1.35);
  filter: blur(9px);
}

.rc-finale__far::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(14 17 22 / 0.45);
}

.rc-finale__halo {
  position: absolute;
  bottom: -25%;
  left: 50%;
  height: 70vh;
  width: 70vw;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgb(255 122 26 / 0.25);
  filter: blur(150px);
  pointer-events: none;
}

.rc-finale__mid {
  top: -10%;
  bottom: -10%;
  transform: translateY(var(--rc-fin-mid, 0%));
  mask-image: linear-gradient(to bottom, transparent 6%, #000 30%, #000 76%, transparent 97%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 6%, #000 30%, #000 76%, transparent 97%);
}

.rc-finale__line {
  position: absolute;
  inset-inline: 0;
  top: 16svh;
  font-size: clamp(1.7rem, 4.6vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
  transform: translateY(var(--rc-fin-type, 0%));
  opacity: var(--rc-fin-type-o, 1);
}

.rc-finale__line span {
  display: block;
  color: rgb(255 255 255 / 0.45);
}

.rc-finale__near {
  top: -22%;
  bottom: -22%;
  transform: translateY(var(--rc-fin-near, 0%));
  mask-image: linear-gradient(to bottom, transparent 54%, #000 86%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 54%, #000 86%);
}

.rc-finale__near img {
  transform: scale(1.34);
  filter: blur(7px) brightness(0.38);
}

.rc-finale__canopy {
  top: -24%;
  bottom: -24%;
  transform: translateY(var(--rc-fin-canopy, 0%));
  mask-image: linear-gradient(to bottom, #000 0%, transparent 26%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 26%);
}

.rc-finale__canopy img {
  transform: scale(1.45);
  filter: blur(11px) brightness(0.5);
}

.rc-finale__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 38%, rgb(14 17 22 / 0.72) 100%);
}

.rc-finale__base {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 33%;
  pointer-events: none;
  background: linear-gradient(to top, var(--rc-ink), transparent);
}

/* Ordinary flow, pulled up over the sticky scene, so its full height — wordmark
   included — is always laid out and can never be clipped. */
.rc-finale__sheet {
  position: relative;
  z-index: 10;
  margin-top: -14svh;
  border-radius: 2rem 2rem 0 0;
  background: var(--rc-ink);
  box-shadow: 0 -40px 80px -20px rgb(0 0 0 / 0.8);
}

.rc-finale__inner {
  padding-block: 2.5rem 1.25rem;
}

@media (min-width: 40rem) {
  .rc-finale__inner {
    padding-top: 3rem;
  }
}

.rc-plus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  padding-bottom: 1.75rem;
}

.rc-plus .rc-eyebrow {
  color: var(--rc-accent-400);
  gap: 0.5rem;
}

.rc-plus__tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rc-plus__tier {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: var(--rc-radius-pill);
  border: 1px solid rgb(255 255 255 / 0.15);
  padding: 0.5rem 0.875rem;
  font-size: 0.78rem;
  transition: border-color 0.3s var(--rc-ease), background-color 0.3s var(--rc-ease);
}

.rc-plus__tier:hover {
  border-color: rgb(255 255 255 / 0.4);
  background: rgb(255 255 255 / 0.1);
}

.rc-plus__tier b {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.rc-plus__tier i {
  font-style: normal;
  color: rgb(255 255 255 / 0.35);
}

.rc-plus__tier em {
  font-style: normal;
  font-weight: 600;
  color: var(--rc-accent-300);
}

.rc-fnav {
  display: grid;
  gap: 1.75rem 2.5rem;
  padding-top: 1.75rem;
}

@media (min-width: 40rem) {
  .rc-fnav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .rc-fnav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.rc-fnav__blurb {
  max-width: 15rem;
  font-size: 0.84rem;
  line-height: 1.6;
  color: rgb(255 255 255 / 0.4);
}

.rc-fnav__heading {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgb(255 255 255 / 0.3);
}

.rc-fnav__links {
  margin-top: 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.rc-fnav__links a {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.6);
  transition: color 0.3s var(--rc-ease);
}

.rc-fnav__links a:hover {
  color: #fff;
}

/* The network, as one running line rather than five columns. */
.rc-network {
  margin-top: 2rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  padding-top: 1.25rem;
  font-size: 0.8rem;
  line-height: 1.95;
  color: rgb(255 255 255 / 0.3);
}

.rc-network__label {
  margin-right: 0.625rem;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.rc-network a {
  transition: color 0.3s var(--rc-ease);
}

.rc-network a:hover {
  color: #fff;
}

.rc-network__sep {
  margin-inline: 0.5rem;
  color: rgb(255 255 255 / 0.15);
}

.rc-network__peek {
  position: fixed;
  z-index: 50;
  display: none;
  height: 9.5rem;
  width: 13rem;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.9);
  outline: 1px solid rgb(255 255 255 / 0.15);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.22s var(--rc-ease), transform 0.22s var(--rc-ease);
  pointer-events: none;
}

@media (min-width: 64rem) {
  .rc-network__peek {
    display: block;
  }
}

.rc-network__peek.is-on {
  opacity: 1;
  transform: none;
}

.rc-network__peek img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.rc-legal {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  padding-top: 1.25rem;
  font-size: 0.76rem;
  color: rgb(255 255 255 / 0.35);
}

.rc-legal__links {
  display: flex;
  gap: 1.5rem;
}

.rc-legal a:hover {
  color: #fff;
}

/* --- wordmark ------------------------------------------------------------ */

/* The page signs its name: the logo's angled swoosh sweeps in behind the word
   as the footer arrives, with the two waves running through it. */
.rc-wordmark {
  position: relative;
  overflow: hidden;
  user-select: none;
}

.rc-wordmark__crop {
  overflow: hidden;
  padding-top: 10vw;
}

.rc-wordmark__stage {
  position: relative;
  padding-inline: 1.5vw;
}

.rc-wordmark__shape {
  position: absolute;
  left: 7.98%;
  width: 90.9%;
  top: -9.17vw;
  height: 27.8vw;
  background: var(--rc-accent-500);
  clip-path: polygon(81.7% 0%, 100% 100%, 0% 100%, 0.2% 89.9%);
  -webkit-clip-path: polygon(81.7% 0%, 100% 100%, 0% 100%, 0.2% 89.9%);
  mask-image: linear-gradient(
    20.6deg,
    #000 var(--rc-mark-sweep, 145%),
    transparent calc(var(--rc-mark-sweep, 145%) + 34%)
  );
  -webkit-mask-image: linear-gradient(
    20.6deg,
    #000 var(--rc-mark-sweep, 145%),
    transparent calc(var(--rc-mark-sweep, 145%) + 34%)
  );
  pointer-events: none;
}

.rc-wordmark__shape svg {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  mask-image: linear-gradient(
    to right,
    #000 var(--rc-mark-run, 140%),
    transparent calc(var(--rc-mark-run, 140%) + 30%)
  );
  -webkit-mask-image: linear-gradient(
    to right,
    #000 var(--rc-mark-run, 140%),
    transparent calc(var(--rc-mark-run, 140%) + 30%)
  );
}

.rc-wordmark__word {
  position: relative;
  margin-bottom: -0.6vw;
  padding-left: 0.055em;
  text-align: center;
  font-size: 25.4vw;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.78;
  letter-spacing: -0.055em;
  color: #fff;
}

/* ------------------------------------------------------------------ 15 motion */

@keyframes rc-rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rc-word-in {
  from {
    transform: translate3d(0, 110%, 0);
  }
  to {
    transform: none;
  }
}

@keyframes rc-rule-in {
  from {
    transform: skewY(-1.2deg) scaleX(0);
  }
  to {
    transform: skewY(-1.2deg) scaleX(1);
  }
}

@keyframes rc-marquee-left {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes rc-marquee-right {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rc-pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgb(255 122 26 / 0.5);
  }
  70% {
    box-shadow: 0 0 0 12px rgb(255 122 26 / 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(255 122 26 / 0);
  }
}

@keyframes rc-ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes rc-shuttle-run {
  0%,
  100% {
    left: 0%;
  }
  50% {
    left: 88%;
  }
}

/* Everything scroll- or loop-driven is switched off together, so the page has
   one coherent still state rather than a half-animated one. */
@media (prefers-reduced-motion: reduce) {
  .rc *,
  .rc *::before,
  .rc *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .rc-reveal {
    opacity: 1;
    transform: none;
  }

  .rc-word > span,
  .rc-rise,
  .rc-hero__swoosh::after {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .rc-hero__swoosh::after {
    transform: skewY(-1.2deg);
  }
}