/* ==========================================================================
   Red Sea Tour & Travel — landing design system
   Deep-sea cinematic. Scoped to .rs so nothing leaks into the app shell.
   Mobile-first: every rule is written for small screens, then widened.
   ========================================================================== */

.rs {
  /* Ground — never pure white, always carries the sea hue */
  --abyss:      #F7FAFC;   /* page ground */
  --deep:       #EDF3F8;   /* alternating section band */
  --surface:    #FFFFFF;   /* cards */
  --surface-2:  #F2F7FB;   /* inputs, elevated fills */
  --line:       #D7E3EC;   /* decorative rules and card edges */
  --line-strong:#728CA1;   /* 3.26:1 — for input borders, per WCAG 1.4.11 */
  --line-lit:   rgba(14, 110, 147, .30);

  /* Ink — contrast measured against --abyss / --surface / --surface-2 */
  --ink:        #0C1B26;   /* 16.7:1 */
  --ink-dim:    #3F5566;   /* 7.41:1 */
  --ink-faint:  #5A6E80;   /* 4.72:1 on --deep, the darkest ground it sits on */

  /* The one accent — sampled from the company logo.
     --cyan is a FILL only: at 2.5:1 on white it can never carry text.
     --cyan-ink is the text/icon form of the same hue, at 5.46:1. */
  --cyan:       #2CABE0;
  --cyan-ink:   #0E6E93;
  --cyan-lit:   #1B96CC;   /* hover deepens rather than lightens on a light ground */
  --cyan-deep:  #0E6E93;

  /* Shadows carry the ground's hue and stay soft — hard shadows read as dirt
     on a light page */
  --shadow-sm:  0 1px 2px rgba(16, 42, 60, .06);
  --shadow-md:  0 12px 28px -10px rgba(16, 42, 60, .16);
  --shadow-lg:  0 30px 60px -20px rgba(16, 42, 60, .20);
  --glow:       0 0 0 1px rgba(44, 171, 224, .35), 0 20px 50px -20px rgba(14, 110, 147, .35);

  /* Motion — default CSS easings are too weak for this */
  --e-out:      cubic-bezier(.23, 1, .32, 1);
  --e-inout:    cubic-bezier(.77, 0, .175, 1);
  --e-drawer:   cubic-bezier(.32, .72, 0, 1);

  --shell:      min(1320px, 100% - 2.5rem);
  --header-h:   4.25rem;

  --font-display: 'Sora', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-ethiopic:'Noto Sans Ethiopic', 'Plus Jakarta Sans', sans-serif;

  background: var(--abyss);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

/* ── Neutralise legacy globals ────────────────────────────────────────────
   styles.css ships bare `section`, `footer` and `header` rules from an older
   template. The `section` rule in particular sets opacity:0 and a light
   background, which would hide this entire page. Reset them inside .rs only —
   the app shell still gets the originals.                                    */
.rs section {
  padding: 0;
  background: transparent;
  opacity: 1;
  transform: none;
  transition: none;
}
.rs section:nth-of-type(even) { background: transparent; }
.rs footer {
  background: var(--deep);
  animation: none;
  color: var(--ink);
  padding: 0;
  text-align: start;
  overflow: visible;
}
.rs header { position: fixed; }

/* app-theme.css paints a dot-grid (body::before) and animated drifting blobs
   (body::after) for the dashboard chrome. Both are position:fixed at z-index:-1
   and bleed through this page wherever the ground is transparent — and the blob
   animation runs forever for nothing here. The old landing page switches them
   off the same way; this is the .rs equivalent. */
body:has(.rs)::before,
body:has(.rs)::after { display: none !important; content: none !important; }
body:has(.rs) { background: #F7FAFC !important; }

/* styles.css:2144 also hangs an animated white line-grid and a radial glow off
   footer::before / ::after (a 20s infinite animation). Not wanted here. */
.rs footer::before,
.rs footer::after { content: none !important; display: none !important; }

.rs h1, .rs h2, .rs h3, .rs h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .98;
  text-wrap: balance;
  margin: 0;
}

.rs p { text-wrap: pretty; margin: 0; }
.rs img { display: block; max-width: 100%; }
.rs :is(td, .num, .rs-stat-n) { font-variant-numeric: tabular-nums; }

/* Focus is never removed, only restyled */
.rs :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan-lit);
  outline-offset: 3px;
  border-radius: 6px;
}

.rs-shell { width: var(--shell); margin-inline: auto; }

.rs-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
}
.rs-skip:focus {
  left: 1rem; top: 1rem;
  background: var(--cyan); color: #041018;
  padding: .75rem 1.25rem; border-radius: .75rem;
  font-weight: 700;
}

/* Eyebrow label — mono, tracked out, used to open every section */
.rs-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono);
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cyan-ink);
}
.rs-eyebrow::before {
  content: ''; width: 1.75rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan));
}

.rs-lead {
  color: var(--ink-dim);
  font-size: 1rem; line-height: 1.7;
  max-width: 58ch;
}

.rs-ti { font-family: var(--font-ethiopic); }

/* ── Reading progress ─────────────────────────────────────────────────────
   #rsProgress is created and driven by landing-motion.js. landingScripts.js
   injects its own bar too, but removes and recreates it unpredictably — hide
   that one so only ours shows.                                              */
#rsProgress {
  position: fixed; top: 0; left: 0; width: 0;
  height: 2px; z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan), var(--cyan-lit));
  box-shadow: 0 0 12px rgba(44, 171, 224, .7);
}
#_landingScrollBar { display: none !important; }

/* ══ HEADER ═══════════════════════════════════════════════════════════════ */
.rs-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 90;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: transform .45s var(--e-out), background-color .4s var(--e-out),
              backdrop-filter .4s var(--e-out), border-color .4s var(--e-out);
  border-bottom: 1px solid transparent;
}
.rs-header.is-stuck {
  background: rgba(247, 250, 252, .82);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
.rs-header.is-hidden { transform: translateY(-100%); }

.rs-header-in {
  width: var(--shell); margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
}

.rs-header-actions {
  display: flex; align-items: center; gap: .625rem;
  flex: none;
}

.rs-brand {
  display: flex; align-items: center; gap: .625rem;
  text-decoration: none; color: inherit;
  margin-inline-end: auto;
  min-height: 44px;
}
.rs-brand svg { width: 2.375rem; height: auto; flex: none; }
.rs-brand-mark {
  width: 2.375rem; height: 2.375rem; flex: none;
  border-radius: 50%; object-fit: cover;
}
.rs-brand-tx { display: flex; flex-direction: column; line-height: 1; }
.rs-brand-tx b {
  font-family: var(--font-display);
  font-size: .8125rem; font-weight: 700; letter-spacing: -.02em;
}
.rs-brand-tx span {
  font-family: var(--font-ethiopic);
  font-size: .625rem; color: var(--cyan-ink); margin-top: .2rem;
}

/* ── Service switcher ─────────────────────────────────────────────────────
   Restored from the original layout. Desktop: a centred glass pill floating in
   the header band, matching the shape it had before. Mobile: a full-width bar
   pinned to the bottom, the same place the original moved it to.            */
.rs-svcnav {
  position: fixed;
  inset-inline: 0; bottom: 0; top: auto;
  z-index: 95;   /* above .rs-header (90) — it is a sibling now, not a child */
  padding: .5rem max(.75rem, env(safe-area-inset-left))
           calc(.5rem + env(safe-area-inset-bottom))
           max(.75rem, env(safe-area-inset-right));
  background: rgba(247, 250, 252, .88);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  border-top: 1px solid var(--line);
}
.rs-svcnav-in {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .375rem;
}
.rs-svctab {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 46px; padding: .5rem .5rem;
  border-radius: 1rem; border: 1px solid transparent;
  text-decoration: none; white-space: nowrap;
  font-size: .8125rem; font-weight: 700; color: var(--ink-dim);
  transition: background-color .28s var(--e-out), color .28s var(--e-out),
              border-color .28s var(--e-out), transform .16s var(--e-out);
}
.rs-svctab i { font-size: .7rem; opacity: .9; }
.rs-svctab:active { transform: scale(.97); }
.rs-svctab.is-active {
  background: var(--cyan); color: #041018;
  box-shadow: 0 12px 28px -12px rgba(44, 171, 224, .75);
}
@media (hover: hover) and (pointer: fine) {
  .rs-svctab:not(.is-active):hover {
    color: var(--ink);
    background: rgba(12, 27, 38, .07);
    border-color: var(--line);
  }
}

/* Sign in — restored to the top right, as it was */
.rs-signin {
  display: none; align-items: center; gap: .5rem;
  min-height: 44px; padding: .625rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(12, 27, 38, .06);
  color: var(--ink); text-decoration: none;
  font-size: .8125rem; font-weight: 700; white-space: nowrap;
  transition: background-color .3s var(--e-out), border-color .3s var(--e-out), transform .16s var(--e-out);
}
.rs-signin i { color: var(--cyan-ink); font-size: .75rem; }
.rs-signin:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .rs-signin:hover { background: rgba(12, 27, 38, .12); border-color: var(--line-lit); }
}

/* Anchor targets must clear the fixed header when jumped to. */
.rs :is(section[id], [id="booking"]) { scroll-margin-top: calc(var(--header-h) + 1rem); }

.rs-header-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .625rem 1rem;
  border-radius: 999px;
  background: var(--cyan); color: #041018;
  font-weight: 700; font-size: .8125rem;
  text-decoration: none; white-space: nowrap;
  transition: transform .16s var(--e-out), box-shadow .3s var(--e-out);
}
.rs-header-cta:active { transform: scale(.97); }

.rs-burger {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); border-radius: .875rem;
  background: rgba(255, 255, 255, .7); color: var(--ink);
  cursor: pointer;
}
.rs-burger span {
  display: block; width: 17px; height: 1.5px; background: currentColor;
  border-radius: 2px; transition: transform .35s var(--e-out), opacity .2s;
}
.rs-burger span + span { margin-top: 4px; }
.rs-burger.active span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.rs-burger.active span:nth-child(2) { opacity: 0; }
.rs-burger.active span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Slide-out nav */
.rs-navpanel {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 120;
  width: min(22rem, 88vw);
  background: var(--deep);
  border-inline-start: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform .5s var(--e-drawer);
  display: flex; flex-direction: column;
  padding: 1.5rem; gap: .25rem;
  overflow-y: auto;
}
.rs-navpanel.open { transform: translateX(0); }
.rs-navpanel-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.rs-navpanel-close {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: .875rem;
  background: transparent; color: var(--ink); cursor: pointer; font-size: 1.25rem;
}
.rs-navlink {
  display: flex; align-items: center; justify-content: space-between;
  padding: .95rem .25rem; min-height: 44px;
  color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 600;
  letter-spacing: -.03em;
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateX(1.25rem);
}
.rs-navpanel.open .rs-navlink {
  animation: rs-navin .5s var(--e-out) forwards;
  animation-delay: calc(var(--i, 0) * 55ms + 120ms);
}
@keyframes rs-navin { to { opacity: 1; transform: none; } }
.rs-navlink i { color: var(--cyan-ink); font-size: .8rem; }

.rs-navoverlay {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(12, 27, 38, .45);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--e-out), visibility .4s;
}
.rs-navoverlay.open { opacity: 1; visibility: visible; }

/* ══ HERO ═════════════════════════════════════════════════════════════════ */
.rs .rs-hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  /* the search panel lives in here now, so the stack grows past 100svh on
     narrow screens rather than being pinned to the bottom */
  padding-block: calc(var(--header-h) + 1.5rem) 3rem;
  /* NOT overflow:hidden — the popovers inside the search panel have to be able
     to leave the hero. The parallax image is clipped by .rs-hero-layer. */
  isolation: isolate;
}

/* Parallax layers — only transform is animated */
.rs-hero-layer {
  position: absolute; inset: 0;
  z-index: -3;
  overflow: hidden;        /* clips the oversized inner layer */
}
.rs-hero-layer-in {
  position: absolute; inset: -12% 0 -12% 0;
  will-change: transform;
}
.rs-hero-layer img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 42%;
}
/* Scrim: the white wash is confined to where the logo and headline actually
   sit (a corner pocket, not the whole top half) — everywhere else in the
   photo, including the right two-thirds and everything below the headline,
   stays fully clear. A second, colourless layer blends the bottom of the
   hero into the page ground so there is no hard seam behind the search
   panel; it carries no white tint of its own until it starts. */
.rs-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(46% 40% at 18% 12%, rgba(247, 250, 252, .95) 0%, rgba(247, 250, 252, .6) 55%, rgba(247, 250, 252, 0) 100%),
    linear-gradient(180deg, transparent 0%, transparent 55%, var(--abyss) 96%);
}
/* Cyan light-leak from the lower left, echoing the logo */
.rs-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 70% at 8% 100%, rgba(44, 171, 224, .14), transparent 62%);
}

.rs-hero-in { width: var(--shell); margin-inline: auto; position: relative; }

.rs-hero-mark {
  width: 3.5rem; margin-bottom: 1rem;
  border-radius: 50%; object-fit: cover;
  filter: drop-shadow(0 8px 30px rgba(44,171,224,.45));
}

.rs-hero h1 {
  /* Much smaller than a display-only hero: the search panel below it is the
     point of the section, and it has to be visible without scrolling. */
  font-size: clamp(1.875rem, 5.2vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -.04em;
  margin-bottom: .875rem;
}
.rs-hero h1 .rs-line { display: block; overflow: hidden; }
.rs-hero h1 .rs-line > span {
  display: block;
  transform: translateY(105%);
  animation: rs-riseline 1.05s var(--e-out) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 180ms);
}
@keyframes rs-riseline { to { transform: none; } }
.rs-hero h1 em {
  font-style: normal;
  color: var(--cyan-ink);
}

.rs-hero-sub {
  color: var(--ink-dim);
  font-size: .9375rem; line-height: 1.55;
  max-width: 52ch;
  margin-bottom: 1.25rem;
  opacity: 0; animation: rs-fadeup .9s var(--e-out) .62s forwards;
}
@keyframes rs-fadeup { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }

.rs-hero-actions {
  display: flex; flex-wrap: wrap; gap: .75rem;
  opacity: 0; animation: rs-fadeup .9s var(--e-out) .76s forwards;
}

.rs-hero-alt {
  margin-top: 1rem;
  font-size: .875rem; color: var(--ink-dim);
  opacity: 0; animation: rs-fadeup .9s var(--e-out) .8s forwards;
}
.rs-hero-alt a {
  color: var(--cyan-ink); font-weight: 700;
  text-underline-offset: 3px;
}

/* Trust strip under the hero copy */
.rs-hero-trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem;
  margin-top: 2.25rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  opacity: 0; animation: rs-fadeup .9s var(--e-out) .9s forwards;
}
.rs-trust-item {
  display: flex; align-items: center; gap: .5rem;
  font-size: .75rem; color: var(--ink-dim);
}
.rs-trust-item b {
  font-family: var(--font-display);
  font-size: 1.125rem; color: var(--ink); font-weight: 700;
}
.rs-trust-item i { color: var(--cyan-ink); }

@keyframes rs-cue { 0%, 100% { transform: scaleY(.3); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ══ BUTTONS ══════════════════════════════════════════════════════════════ */
.rs-btn {
  display: inline-flex; align-items: center; gap: .625rem;
  min-height: 48px; padding: .875rem 1.5rem;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: .9375rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: transform .16s var(--e-out), background-color .3s var(--e-out),
              border-color .3s var(--e-out), box-shadow .3s var(--e-out);
}
.rs-btn:active { transform: scale(.975); }

.rs-btn-primary {
  background: var(--cyan); color: #041018;
  box-shadow: 0 16px 40px -16px rgba(44,171,224,.7);
}
.rs-btn-ghost {
  background: rgba(12, 27, 38, .06);
  border-color: var(--line);
  color: var(--ink);
  backdrop-filter: blur(10px);
}
.rs-btn-icon {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; border-radius: 999px;
  background: rgba(4, 16, 24, .16);
  font-size: .7rem;
}
.rs-btn-ghost .rs-btn-icon { background: rgba(12, 27, 38, .1); }

@media (hover: hover) and (pointer: fine) {
  .rs-btn-primary:hover { background: var(--cyan-lit); box-shadow: 0 20px 52px -14px rgba(44,171,224,.85); }
  .rs-btn-ghost:hover { background: rgba(12, 27, 38, .12); border-color: var(--line-lit); }
  .rs-header-cta:hover { background: var(--cyan-lit); }
  .rs-navlink:hover { color: var(--cyan-ink); }
}

/* ══ SECTION FRAME ════════════════════════════════════════════════════════ */
.rs .rs-section { padding-block: 5rem; position: relative; }
.rs-section-head { margin-bottom: 2.5rem; }
.rs-section-head h2 {
  font-size: clamp(2rem, 8vw, 4rem);
  margin-block: 1rem .875rem;
}

/* ══ AIRLINE MARQUEE ══════════════════════════════════════════════════════ */
.rs-marquee {
  border-block: 1px solid var(--line);
  background: var(--deep);
  padding-block: 1.25rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.rs-marquee-track {
  display: flex; align-items: center; gap: 3rem;
  width: max-content;
  animation: rs-marquee 34s linear infinite;
}
@keyframes rs-marquee { to { transform: translateX(-50%); } }
.rs-marquee-item {
  display: flex; align-items: center; gap: .625rem;
  font-family: var(--font-display); font-weight: 600; font-size: .9375rem;
  color: var(--ink-faint); white-space: nowrap;
  transition: color .3s var(--e-out);
}
.rs-marquee-item i { color: var(--cyan-deep); font-size: .75rem; }
@media (hover: hover) and (pointer: fine) {
  .rs-marquee:hover .rs-marquee-track { animation-play-state: paused; }
  .rs-marquee-item:hover { color: var(--ink); }
}

/* ══ SERVICES — sliding cards, never a static 3-up row ═════════════════════ */
.rs-tile {
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: var(--surface);
  padding: 1.75rem;
  min-height: 15rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; color: inherit;
  transition: border-color .4s var(--e-out), transform .4s var(--e-out);
}
.rs-tile-media { position: absolute; inset: 0; z-index: -2; }
.rs-tile-media[data-speed] { transform: scale(1.12); will-change: transform; }
.rs-tile-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--e-out), filter .6s var(--e-out);
  filter: saturate(.75);
}

/* Cards with no on-brand photo to show (visa, hotel, insurance — this agency
   doesn't run a hotel or an insurer, so there is no honest photo for those)
   get a stylised backdrop instead: a brand-colour wash plus a large, faint
   duplicate of the card's own icon. Same layer order as .rs-tile-media, so
   the existing text-legibility fade in .rs-tile::after applies unchanged. */
.rs-tile-deco { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--surface-2); }
.rs-tile-deco-a { background: radial-gradient(120% 85% at 12% 8%, rgba(44, 171, 224, .22), transparent 62%), radial-gradient(90% 70% at 95% 100%, rgba(14, 110, 147, .14), transparent 65%), var(--surface-2); }
.rs-tile-deco-b { background: radial-gradient(120% 85% at 88% 6%, rgba(44, 171, 224, .2), transparent 60%), radial-gradient(100% 75% at 8% 100%, rgba(27, 150, 204, .14), transparent 65%), var(--surface-2); }
.rs-tile-deco-c { background: radial-gradient(110% 80% at 50% 0%, rgba(14, 110, 147, .18), transparent 60%), radial-gradient(90% 70% at 100% 100%, rgba(44, 171, 224, .14), transparent 65%), var(--surface-2); }
/* Anchored to the top of the card, above where .rs-tile::after starts its
   ramp to opaque at 50% height, so the watermark stays visible instead of
   disappearing under the text-legibility fade. */
.rs-tile-deco i { position: absolute; top: -.5rem; font-size: 6.5rem; line-height: 1; color: var(--cyan-ink); opacity: .16; }
.rs-tile-deco-a i { right: -.75rem; transform: rotate(-14deg); }
.rs-tile-deco-b i { right: -.5rem; transform: rotate(10deg); }
.rs-tile-deco-c i { right: -.75rem; transform: rotate(16deg); }
.rs-tile::after {
  /* Fully transparent over the photo, then a short hand-off to a flat, fully
     opaque fill behind the text block — the fade has to finish before the
     text starts, not keep drifting darker underneath it. */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(247, 250, 252, 0) 0%, rgba(247, 250, 252, 0) 50%, rgba(247, 250, 252, .97) 60%, rgba(247, 250, 252, .97) 100%);
}
.rs-tile-ico {
  width: 2.75rem; height: 2.75rem; border-radius: .875rem;
  display: grid; place-items: center;
  background: rgba(44, 171, 224, .12);
  border: 1px solid var(--line-lit);
  color: var(--cyan-ink);
  margin-bottom: auto;
}
.rs-tile h3 { font-size: 1.375rem; margin-top: 1.5rem; margin-bottom: .5rem; }
.rs-tile p { color: var(--ink-dim); font-size: .875rem; line-height: 1.6; }
.rs-tile-go {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.25rem;
  font-size: .8125rem; font-weight: 700; color: var(--cyan-ink);
}
.rs-tile-go i { transition: transform .3s var(--e-out); }

@media (hover: hover) and (pointer: fine) {
  .rs-tile:hover { border-color: var(--line-lit); }
  .rs-tile:hover .rs-tile-media img { transform: scale(1.07); filter: saturate(1); }
  .rs-tile:hover .rs-tile-go i { transform: translateX(4px); }
}

/* Slider variant: the wrapper div (not the img) carries the scroll-linked
   parallax transform, set per-frame in landing-motion.js — a base scale
   large enough that the horizontal drift never reveals the tile's edge,
   clipped by .rs-tile's own overflow:hidden. The img's own hover zoom above
   still applies on top of it; nested transforms compose without conflict. */
.rs-slider { position: relative; }

.rs-slider-track {
  display: flex; align-items: stretch; gap: 1rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 1.25rem;
  padding: .25rem 1.25rem 1.5rem;
  margin-inline: -1.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rs-slider-track::-webkit-scrollbar { display: none; }
.rs-slider-track:focus-visible {
  outline: 2px solid var(--cyan-lit); outline-offset: 4px; border-radius: 1.5rem;
}

.rs-slide { flex: 0 0 auto; scroll-snap-align: center; }
.rs-slide-feature { width: min(80vw, 22rem); min-height: 24rem; }
.rs-slide-compact { width: min(56vw, 15rem); min-height: 15rem; }

.rs-slider-controls {
  display: flex; align-items: center; justify-content: center; gap: 1.25rem;
  margin-top: .5rem;
}
.rs-slider-btn {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 999px; flex: none;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  cursor: pointer;
  transition: border-color .3s var(--e-out), background-color .3s var(--e-out),
              transform .16s var(--e-out), opacity .3s var(--e-out);
}
.rs-slider-btn:active { transform: scale(.92); }
.rs-slider-btn:disabled { opacity: .35; cursor: default; }
.rs-slider-btn:disabled:active { transform: none; }

.rs-slider-dots { display: flex; align-items: center; gap: .5rem; }
.rs-slider-dot {
  width: .5rem; height: .5rem; border-radius: 999px; flex: none;
  background: var(--line-strong); border: 0; padding: 0; cursor: pointer;
  transition: width .3s var(--e-out), background-color .3s var(--e-out);
}
.rs-slider-dot.is-active { width: 1.5rem; background: var(--cyan-ink); }

@media (hover: hover) and (pointer: fine) {
  .rs-slider-btn:hover:not(:disabled) { border-color: var(--line-lit); background: var(--surface-2); }
  .rs-slider-dot:hover { background: var(--cyan-ink); }
}

/* ══ PUBLIC LISTING PAGES — Car Rental, Booking ══════════════════════════ */
.rs-listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.25rem;
}
.rs-listing-card { min-height: 22rem; }
.rs-listing-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.rs-listing-cta { margin-top: 1.25rem; width: 100%; justify-content: center; }
.rs-listing-status {
  grid-column: 1 / -1;
  text-align: center; color: var(--ink-dim);
  padding: 3rem 1rem; font-size: .9375rem;
}

/* ══ SEARCH PANEL ═════════════════════════════════════════════════════════ */
.rs-search {
  border: 1px solid var(--line);
  border-radius: 1.75rem;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-lg);
  /* no overflow:hidden — it would clip the control popovers */
}
/* Double-bezel: an outer shell holding an inner core */
.rs-search-shell {
  padding: .5rem;
  border-radius: 2rem;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: var(--shadow-lg);
  opacity: 0; animation: rs-fadeup .9s var(--e-out) .66s forwards;
}
.rs-search-in { padding: 1.25rem; }

.rs-segment {
  display: inline-flex; padding: .25rem;
  border-radius: 999px; background: rgba(247, 250, 252, .55);
  border: 1px solid var(--line);
  margin-bottom: 1.25rem;
}
.rs-segment label { position: relative; }
.rs-segment input { position: absolute; opacity: 0; width: 0; height: 0; }
.rs-segment span {
  display: flex; align-items: center; gap: .45rem;
  min-height: 40px; padding: .5rem 1.125rem;
  border-radius: 999px; cursor: pointer; user-select: none;
  font-size: .8125rem; font-weight: 700; color: var(--ink-dim);
  transition: background-color .25s var(--e-out), color .25s var(--e-out);
}
.rs-segment input:checked + span { background: var(--cyan); color: #041018; }
.rs-segment input:focus-visible + span { outline: 2px solid var(--cyan-lit); outline-offset: 2px; }

.rs-field { position: relative; }
.rs-field > label {
  display: block; margin-bottom: .4rem;
  font-family: var(--font-mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim);
}
.rs-input {
  width: 100%;
  min-height: 52px;
  padding: .875rem 1rem .875rem 2.75rem;
  border-radius: 1rem;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px; /* keeps iOS from zooming the viewport on focus */
  font-weight: 600;
  transition: border-color .25s var(--e-out), background-color .25s var(--e-out);
}
.rs-input::placeholder { color: var(--ink-faint); font-weight: 500; }
.rs-input:focus { outline: none; border-color: var(--cyan-ink); background: var(--surface); box-shadow: 0 0 0 3px rgba(14, 110, 147, .14); }
.rs-input[readonly] { cursor: pointer; }
.rs-input:disabled, .rs-input.opacity-60 { opacity: .45; }
select.rs-input { appearance: none; padding-inline-end: 2.5rem; }

.rs-field-ico {
  position: absolute; inset-inline-start: 1rem; top: 2.05rem;
  color: var(--cyan-ink); font-size: .8125rem; pointer-events: none;
}
.rs-field-caret {
  position: absolute; inset-inline-end: 1rem; top: 2.05rem;
  color: var(--ink-faint); font-size: .7rem; pointer-events: none;
}

.rs-grid { display: grid; gap: .875rem; }

.rs-swap {
  display: none;
  position: absolute; inset-inline-start: 50%; top: 2.4rem;
  transform: translateX(-50%);
  width: 44px; height: 44px; z-index: 5;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--cyan-ink);
  cursor: pointer;
  transition: transform .3s var(--e-out), border-color .3s var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .rs-swap:hover { border-color: var(--cyan-ink); transform: translateX(-50%) rotate(180deg); }
}

/* Autocomplete list */
.rs-ac {
  position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + .4rem);
  max-height: 15rem; overflow-y: auto;
  border-radius: 1rem; border: 1px solid var(--line);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
}
.rs-ac.hidden { display: none; }
.rs-ac .ac-item {
  padding: .8rem 1rem; cursor: pointer; min-height: 44px;
  font-size: .875rem; color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
  transition: background-color .2s var(--e-out), color .2s var(--e-out);
}
.rs-ac .ac-item:last-child { border-bottom: 0; }
.rs-ac .ac-item:hover, .rs-ac .ac-item.active { background: rgba(44, 171, 224, .12); color: var(--ink); }

/* Passenger stepper */
.rs-pop {
  position: absolute; z-index: 30; inset-inline-start: 0; top: calc(100% + .4rem);
  width: min(20rem, calc(100vw - 3rem));
  padding: 1rem; border-radius: 1.25rem;
  border: 1px solid var(--line); background: var(--surface-2);
  box-shadow: var(--shadow-lg);
  transform-origin: top left;
}
.rs-pop.hidden { display: none; }
.rs-steprow {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: .625rem;
}
.rs-steprow + .rs-steprow { border-top: 1px solid var(--line); }
.rs-steprow-t { font-size: .875rem; font-weight: 700; }
.rs-steprow-t small { display: block; font-weight: 500; color: var(--ink-faint); font-size: .6875rem; margin-top: .1rem; }
.rs-stepper { display: flex; align-items: center; gap: .625rem; }
.rs-stepbtn {
  width: 36px; height: 36px; border-radius: .75rem;
  border: 1px solid var(--line); background: rgba(247, 250, 252, .6);
  color: var(--ink); cursor: pointer; font-size: .875rem;
  transition: border-color .2s var(--e-out), color .2s var(--e-out);
}
.rs-stepbtn:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .rs-stepbtn:hover { border-color: var(--cyan-ink); color: var(--cyan-ink); }
}
.rs-stepn { min-width: 1.5rem; text-align: center; font-weight: 700; }

.rs-search-foot {
  display: flex; flex-direction: column; gap: 1rem;
  margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.rs-check {
  display: flex; align-items: center; gap: .625rem;
  min-height: 44px; cursor: pointer;
  font-size: .875rem; color: var(--ink-dim);
}
.rs-check input {
  width: 20px; height: 20px; accent-color: var(--cyan);
  border-radius: 6px; flex: none;
}
.search-flights-btn { width: 100%; justify-content: center; }

/* Results — skeleton + cards */
.rs-results { margin-top: 1.75rem; display: grid; gap: .875rem; }
.rs-skel {
  height: 7rem; border-radius: 1.25rem;
  border: 1px solid var(--line);
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 220% 100%;
  animation: rs-shimmer 1.4s linear infinite;
}
@keyframes rs-shimmer { to { background-position: -120% 0; } }

.rs-empty {
  padding: 2.5rem 1.5rem; text-align: center;
  border: 1px dashed var(--line); border-radius: 1.25rem;
  /* sits on the search panel's tinted shell, where --ink-faint drops to 4.37:1 */
  color: var(--ink-dim);
}
.rs-empty i { font-size: 1.5rem; color: var(--cyan-deep); margin-bottom: .75rem; display: block; }

/* ── Result cards ─────────────────────────────────────────────────────────
   landingScripts.js builds these with hardcoded light Tailwind utilities
   (bg-white, text-slate-900, border-slate-200 …), which now match the page.
   The dark remapping that used to live here has been removed — only the
   rounding, shadow and accent colour are nudged to match this design.        */
.rs #results .shadow-md { box-shadow: var(--shadow-md) !important; }
.rs #results .rounded-xl { border-radius: 1.25rem !important; }
.rs #results .border-slate-200 { border-color: var(--line) !important; }

/* "Contact us" button on each offer */
.rs #results .js-contact {
  background: var(--cyan) !important;
  color: #041018 !important;
  box-shadow: 0 12px 28px -10px rgba(44, 171, 224, .6) !important;
  min-height: 44px;
}

/* Error state returned by the search */
.rs #results .bg-red-50 {
  background: #FEF3F2 !important;
  border-color: #FDA29B !important;
  color: #B42318 !important;
  border-radius: 1rem !important;
  padding: 1rem 1.25rem !important;
  font-size: .875rem;
}

/* ══ FLEET ════════════════════════════════════════════════════════════════ */
.rs-fleet-rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(78%, 22rem);
  gap: .875rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(1.25rem, calc(50vw - var(--shell) / 2));
  scrollbar-width: none;
}
.rs-fleet-rail::-webkit-scrollbar { display: none; }
.rs-fleet-card {
  scroll-snap-align: start;
  border: 1px solid var(--line); border-radius: 1.5rem;
  overflow: hidden; background: var(--surface);
}
.rs-fleet-card figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.rs-fleet-card img { width: 100%; height: 100%; object-fit: cover; }
.rs-fleet-body { padding: 1.25rem; }
.rs-fleet-body h3 { font-size: 1.125rem; margin-bottom: .35rem; }
.rs-fleet-body p { font-size: .8125rem; color: var(--ink-dim); line-height: 1.6; }
.rs-fleet-meta {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: .875rem;
}
.rs-chip {
  font-family: var(--font-mono); font-size: .625rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: .5rem;
  background: rgba(44, 171, 224, .10); border: 1px solid var(--line-lit);
  color: var(--cyan-ink);
}

/* ══ SPLIT (visa / insurance / about) ═════════════════════════════════════ */
.rs-split { display: grid; gap: 2.5rem; align-items: center; }
.rs-split-media {
  position: relative; border-radius: 1.75rem; overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
}
.rs-split-media img { width: 100%; height: 100%; object-fit: cover; }
.rs-split-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 40%, rgba(247, 250, 252, .7));
}

.rs-list { display: grid; gap: .25rem; margin-top: 1.75rem; }
.rs-list li {
  display: flex; gap: .875rem; align-items: flex-start;
  padding-block: .875rem;
  border-top: 1px solid var(--line);
  list-style: none;
}
.rs-list li:last-child { border-bottom: 1px solid var(--line); }
.rs-list i { color: var(--cyan-ink); font-size: .8125rem; margin-top: .25rem; flex: none; }
.rs-list b { display: block; font-size: .9375rem; margin-bottom: .2rem; }
.rs-list span { font-size: .8125rem; color: var(--ink-dim); line-height: 1.6; }

/* ══ STATS ════════════════════════════════════════════════════════════════ */
.rs-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 1.5rem; overflow: hidden;
}
.rs-stat { background: var(--surface); padding: 1.75rem 1.25rem; }
.rs-stat-n {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.875rem, 8vw, 3rem); letter-spacing: -.04em;
  color: var(--ink); line-height: 1;
}
.rs-stat-n em { font-style: normal; color: var(--cyan-ink); }
.rs-stat-l {
  margin-top: .5rem; font-size: .75rem; color: var(--ink-faint);
  line-height: 1.5;
}

/* ══ CERTIFICATE CAROUSEL (kept — real company documents) ═════════════════ */
.rs-cert {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border: 1px solid var(--line); border-radius: 1.5rem;
  overflow: hidden; background: var(--surface);
  cursor: pointer; padding: 0; display: block;
  perspective: 1200px;
}
.rs-cert .portfolio-carousel-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s var(--e-out), transform .8s var(--e-out);
}
.rs-cert .portfolio-carousel-img.active { opacity: 1; }
.rs-cert-cap {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: 1.5rem;
  background: linear-gradient(180deg, transparent, rgba(247, 250, 252, .94));
  text-align: start;
}

/* ══ CONTACT ══════════════════════════════════════════════════════════════ */
.rs-contact-grid { display: grid; gap: .875rem; }
.rs-contact-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.375rem;
  border: 1px solid var(--line); border-radius: 1.25rem;
  background: var(--surface);
  text-decoration: none; color: inherit;
  transition: border-color .3s var(--e-out), background-color .3s var(--e-out);
}
.rs-contact-item i {
  width: 2.5rem; height: 2.5rem; flex: none;
  display: grid; place-items: center; border-radius: .75rem;
  background: rgba(44, 171, 224, .12); border: 1px solid var(--line-lit);
  color: var(--cyan-ink); font-size: .875rem;
}
.rs-contact-item b { display: block; font-size: .9375rem; margin-bottom: .25rem; }
.rs-contact-item span { font-size: .8125rem; color: var(--ink-dim); line-height: 1.55; word-break: break-word; }
@media (hover: hover) and (pointer: fine) {
  .rs-contact-item:hover { border-color: var(--line-lit); background: var(--surface-2); }
}

/* ══ FOOTER ═══════════════════════════════════════════════════════════════ */
.rs .rs-footer {
  border-top: 1px solid var(--line);
  background: var(--deep);
  /* Extra bottom room so the fixed service bar never covers the last links.
     The >=640px block trims this back once the bar moves up to the header. */
  padding-block: 3rem calc(5.5rem + env(safe-area-inset-bottom));
}
.rs-footer-top { display: grid; gap: 2rem; }
.rs-footer h4 {
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 1rem;
}
.rs-footer a {
  display: flex; align-items: center; padding-block: .5rem; min-height: 44px;
  color: var(--ink-dim); text-decoration: none; font-size: .875rem;
  transition: color .25s var(--e-out);
}
@media (hover: hover) and (pointer: fine) { .rs-footer a:hover { color: var(--cyan-ink); } }
.rs-footer-bot {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .75rem; color: var(--ink-faint);
}

/* ══ ENQUIRY MODAL ════════════════════════════════════════════════════════
   styles.css:42-105 ships an ID-scoped fallback theme for #contactModal (card,
   labels, inputs, focus rings). ID selectors beat any class, so these overrides
   are written at the same strength rather than with !important.
   landingScripts.js toggles Tailwind's .hidden / .flex on the overlay.        */
.rs #contactModal {
  align-items: flex-end; justify-content: center;
  padding: 0;
  background: rgba(12, 27, 38, .45);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.rs-modal.hidden { display: none !important; }
.rs #contactModal.flex { display: flex; }

.rs #contactModal > .rs-modal-card {
  width: 100%; max-width: none; height: auto; max-height: 92svh;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 1.75rem 1.75rem 0 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  animation: rs-sheet .45s var(--e-drawer);
}
@keyframes rs-sheet { from { transform: translateY(3%); opacity: 0; } to { transform: none; opacity: 1; } }

.rs-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.5rem 1.25rem 1rem;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.rs-modal-body {
  display: grid; gap: .875rem;
  padding: 1.25rem;
  overflow-y: auto;
}
.rs-modal-foot {
  display: flex; gap: .625rem; justify-content: flex-end;
  padding-top: 1rem; margin-top: .25rem;
  border-top: 1px solid var(--line);
}
.rs-modal-foot .rs-btn { flex: 1; justify-content: center; }

/* Re-skin the fallback form controls to match the page's fields */
.rs #contactModal label {
  display: block;
  margin: 0 0 .4rem;
  font-family: var(--font-mono);
  font-size: .625rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.rs #contactModal :is(input, textarea, select) {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line-strong);
  border-radius: 1rem;
  padding: .875rem 1rem;
  font-family: var(--font-body);
  font-size: 16px; /* keeps iOS from zooming on focus */
  font-weight: 600;
  background: var(--surface);
  color: var(--ink);
  outline: none;
}
.rs #contactModal textarea { min-height: 5.5rem; resize: vertical; }
.rs #contactModal :is(input, textarea, select):focus {
  border-color: var(--cyan-ink);
  box-shadow: 0 0 0 3px rgba(14, 110, 147, .14);
}
.rs #contactModal ::placeholder { color: var(--ink-faint); font-weight: 500; }

.rs-err { margin-top: .35rem; font-size: .75rem; color: #B42318; }
.rs-err.hidden { display: none; }
.rs-input.border-red-500 { border-color: #D92D20; }

body.modal-open { overflow: hidden; }

@media (min-width: 640px) {
  .rs #contactModal { align-items: center; padding: 1.5rem; }
  .rs #contactModal > .rs-modal-card { max-width: 44rem; border-radius: 1.75rem; }
  .rs-modal-head, .rs-modal-body { padding-inline: 1.75rem; }
  .rs-modal-foot .rs-btn { flex: none; }
}

/* ══ REVEAL ═══════════════════════════════════════════════════════════════ */
.rs-rise {
  opacity: 0;
  transform: translateY(1.75rem);
  filter: blur(6px);
  transition: opacity .9s var(--e-out), transform .9s var(--e-out), filter .9s var(--e-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.rs-rise.in { opacity: 1; transform: none; filter: none; }

/* ══ RESPONSIVE ═══════════════════════════════════════════════════════════ */

/* Very narrow phones (320px): the wordmark wraps to four lines and shoves the
   header apart. Fall back to the mark alone — the link keeps its aria-label. */
@media (max-width: 361px) {
  .rs-brand-tx { display: none; }
  .rs-header-cta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rs-header-cta { padding: .625rem; width: 44px; justify-content: center; }
}

@media (min-width: 640px) {
  /* Above 640px the original showed this as a centred pill at the top; below
     it, as a full-width bottom bar. Same switch point, same shapes. */
  .rs-svcnav {
    /* Centred on the viewport, as the original was, floating in the header
       band. Fixed rather than absolute because it is no longer a child of the
       header. */
    position: fixed;
    left: 50%; top: 0; bottom: auto;
    height: var(--header-h);
    display: flex; align-items: center;
    transform: translateX(-50%);
    width: max-content;   /* hug the pill so the wrapper cannot cover the actions */
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-top: 0;
  }
  .rs-svcnav-in {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: max-content;
    width: max-content;
    gap: .25rem;
    padding: .3125rem;
    border-radius: 1.25rem;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
            backdrop-filter: blur(16px) saturate(140%);
    box-shadow: var(--shadow-md);
  }
  .rs-svctab { min-height: 40px; padding-inline: .875rem; border-radius: .95rem; }
  .rs-header-actions { margin-inline-start: auto; }
  .rs .rs-footer { padding-bottom: 2rem; }
  .rs-search-in { padding: 1.75rem; }
  .rs-search-foot { flex-direction: row; align-items: center; justify-content: space-between; }
  .search-flights-btn { width: auto; }
  .rs-grid-2 { grid-template-columns: 1fr 1fr; }
  .rs-stats { grid-template-columns: repeat(4, 1fr); }
  .rs-contact-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .rs { --shell: min(1320px, 100% - 4rem); --header-h: 5rem; }
  .rs .rs-section { padding-block: 7rem; }
  .rs-hero-mark { width: 4.5rem; margin-bottom: 1.5rem; }
  .rs-hero-sub { font-size: 1.0625rem; margin-bottom: 1.5rem; }
  .rs-swap { display: grid; place-items: center; }
  .rs-slide-feature { width: min(40vw, 26rem); min-height: 27rem; }
  .rs-slide-compact { width: min(24vw, 17rem); min-height: 17rem; }
  .rs-slider-track { padding-inline: 2rem 3rem; margin-inline: -2rem; scroll-padding-inline: 2rem; }
  .rs-footer-top { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

@media (min-width: 1024px) {
  .rs-signin { display: inline-flex; }
  .rs-brand svg { width: 2.75rem; }
  .rs-brand-mark { width: 2.75rem; height: 2.75rem; }
  .rs-brand-tx b { font-size: .9375rem; }
    .rs-split { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .rs-split-media { aspect-ratio: 3 / 4; }
  .rs-split-rev .rs-split-media { order: 2; }
  .rs-grid-3 { grid-template-columns: 1.4fr 1fr 1fr; }
  .rs-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .rs-section-head-split {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 3rem; align-items: end;
  }
}

/* ══ REDUCED MOTION — keep opacity and colour, drop movement ══════════════ */
@media (prefers-reduced-motion: reduce) {
  .rs *, .rs *::before, .rs *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .rs-hero-layer { transform: none !important; }
  .rs-rise { opacity: 1; transform: none; filter: none; }
  .rs-hero h1 .rs-line > span,
  .rs-hero-sub, .rs-hero-actions, .rs-hero-trust { opacity: 1; transform: none; animation: none; }
  .rs-marquee-track { animation: none; }
  .rs-navlink { opacity: 1; transform: none; }
  .rs-tile-media[data-speed] { transform: none; }
}

/* ══ APP DARK-MODE COMPATIBILITY ══════════════════════════════════════════
   The dashboard ships its own dark mode: `html.dark` plus css/dark-theme.css,
   whose rules target bare `header` and `body` with !important. A visitor whose
   system is set to dark gets that class before this page ever renders, which
   painted the header navy on an otherwise light page.

   This landing page is light in both app themes, so those rules are pinned
   back here. Selectors are deliberately more specific than dark-theme.css's
   (`html.dark .rs .rs-header` beats `html.dark header`) and carry !important,
   because the rules being overridden do too. */
html.dark body:has(.rs) {
  background: #F7FAFC !important;
  background-image: none !important;
}
html.dark .rs .rs-header {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}
html.dark .rs .rs-header.is-stuck {
  background: rgba(247, 250, 252, .82) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
          backdrop-filter: blur(18px) saturate(140%) !important;
  border-bottom-color: var(--line) !important;
}
html.dark .rs .text-foreground { color: var(--ink) !important; }

/* ══ FORM CONTROL OWNERSHIP ═══════════════════════════════════════════════
   app-theme.css:347 styles every input / select / textarea app-wide with
   !important, and puts an id inside :not(), which gives it (1,2,1) — more
   than any class selector here can reach. Its border resolves to about 1.2:1
   against white, below the 3:1 WCAG 1.4.11 needs for a field boundary.

   Routing these through #root (the real app container) clears that weight, so
   the landing page owns its own fields in both app themes. */
#root .rs input.rs-input,
#root .rs select.rs-input,
#root .rs textarea.rs-input,
#root .rs #contactModal input,
#root .rs #contactModal select,
#root .rs #contactModal textarea {
  border-radius: 1rem !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
#root .rs input.rs-input:focus,
#root .rs select.rs-input:focus,
#root .rs textarea.rs-input:focus,
#root .rs #contactModal input:focus,
#root .rs #contactModal select:focus,
#root .rs #contactModal textarea:focus {
  border-color: var(--cyan-ink) !important;
  box-shadow: 0 0 0 3px rgba(14, 110, 147, .14) !important;
  outline: none !important;
}
#root .rs textarea.rs-input,
#root .rs #contactModal textarea { min-height: 5.5rem !important; }

/* ══ FLIGHT REQUEST OUTCOME ═══════════════════════════════════════════════
   Replaces the old live-results list. Success and failure share a shape so the
   panel does not jump height between states. */
.rs-done,
.rs-fail {
  display: flex; align-items: flex-start; gap: .875rem;
  padding: 1.25rem 1.375rem;
  border-radius: 1.25rem;
  border: 1px solid var(--line);
  background: var(--surface);
}
.rs-done { border-color: #A6E4C4; background: #F0FDF6; }
.rs-fail { border-color: #FDA29B; background: #FEF3F2; }
.rs-done > i, .rs-fail > i { font-size: 1.125rem; margin-top: .1rem; flex: none; }
.rs-done > i { color: #077A48; }
.rs-fail > i { color: #B42318; }
.rs-done b, .rs-fail b { display: block; font-size: .9375rem; margin-bottom: .2rem; }
.rs-done b { color: #05603A; }
.rs-fail b { color: #912018; }
.rs-done span, .rs-fail span { display: block; font-size: .8125rem; line-height: 1.6; color: var(--ink-dim); }

/* ══ TELEPHONE: COUNTRY CODE + NUMBER ═════════════════════════════════════
   Two controls, one field: the wrapper carries the single visible border
   and focus ring, the flag trigger and the number input sit inside it
   borderless with a hairline divider between them, so it reads as one
   input rather than two boxes glued together. The select still carries the
   dialling code and the number input still holds only the national part. */
.rs-phone {
  display: flex; align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: 1rem;
  background: var(--surface);
  transition: border-color .25s var(--e-out), box-shadow .25s var(--e-out);
}
.rs-phone:focus-within,
.rs-phone:has(.rs-pick.is-open) {
  border-color: var(--cyan-ink);
  box-shadow: 0 0 0 3px rgba(14, 110, 147, .14);
}
.rs-phone .rs-pick-flagbtn {
  position: relative;
  border: none; border-radius: 1rem 0 0 1rem;
  background: transparent;
}
.rs-phone .rs-pick.is-open .rs-pick-flagbtn {
  border-color: transparent; box-shadow: none;   /* the wrapper owns the ring now */
}
.rs-phone .rs-pick-flagbtn::after {
  content: ''; position: absolute; inset-block: .625rem; inset-inline-end: 0;
  width: 1px; background: var(--line);
}
.rs-phone .rs-input.rs-phone-num {
  border: none; border-radius: 0 1rem 1rem 0;
  background: transparent; padding-inline-start: .625rem;
}
.rs-phone .rs-input.rs-phone-num:focus { box-shadow: none; }

/* ══ CUSTOM CONTROLS ══════════════════════════════════════════════════════
   Country picker, cabin listbox and date calendar. One popover surface shared
   between them so they read as a family, with internals shaped to each job.
   The native input/select stays in the DOM as the source of truth. */
.rs-pick { position: relative; }
/* While open, lift the whole control into its own stacking context so the
   panel is unambiguously above the fields that follow it in the grid, and
   above the fixed bottom service bar. */
.rs-pick.is-open { z-index: 110; }

.rs-pick-native {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip-path: inset(50%);
}

/* Trigger shaped like a field, so it sits level with the real inputs */
.rs-pick-field {
  display: flex; align-items: center; gap: .625rem;
  width: 100%; min-height: 52px;
  padding: .875rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 1rem;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  text-align: start; cursor: pointer;
  transition: border-color .2s var(--e-out), box-shadow .2s var(--e-out);
}
.rs-pick-field > i:first-child { color: var(--cyan-ink); font-size: .8125rem; flex: none; }
.rs-pick-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-pick-value.is-empty { color: var(--ink-faint); font-weight: 500; }
.rs-pick-caret {
  flex: none; font-size: .7rem; color: var(--ink-faint);
  transition: transform .2s var(--e-out);
}
.rs-pick.is-open .rs-pick-caret { transform: rotate(180deg); }
.rs-pick.is-open .rs-pick-field,
.rs-pick.is-open .rs-pick-flagbtn {
  border-color: var(--cyan-ink);
  box-shadow: 0 0 0 3px rgba(14, 110, 147, .14);
}
.rs-pick.is-disabled { opacity: .5; }
.rs-pick-trigger:disabled { cursor: not-allowed; }

/* Country trigger: flag only */
.rs-pick-flagbtn {
  display: flex; align-items: center; gap: .45rem;
  height: 52px; padding: 0 .7rem 0 .75rem;
  border: 1px solid var(--line-strong);
  border-radius: 1rem;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .2s var(--e-out), box-shadow .2s var(--e-out);
}
.rs-flag {
  width: 1.5rem; height: 1.125rem; flex: none;
  object-fit: cover; border-radius: 3px;
  /* A hairline stops flags with white fields (Japan, Nigeria) bleeding into
     the white field behind them */
  box-shadow: 0 0 0 1px rgba(12, 27, 38, .14);
}
.rs-pick-country { flex: 0 0 auto; }

/* ── Shared popover surface ─────────────────────────────────────────────── */
.rs-pop {
  /* Above .rs-svcnav (95), which is pinned to the bottom of the screen on
     phones; still below the slide-out menu (120) and the modal (200). */
  position: absolute; z-index: 110;
  inset-inline-start: 0; top: calc(100% + .4rem);
  min-width: 100%;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform-origin: top left;          /* grows out of the trigger, not the centre */
  animation: rs-pop-in .18s var(--e-out);
}
.rs-pop.is-up {
  top: auto; bottom: calc(100% + .4rem);
  transform-origin: bottom left;
}
@keyframes rs-pop-in {
  from { opacity: 0; transform: scale(.97) translateY(-.25rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .rs-pop { animation: none; } }

.rs-pop-list { list-style: none; margin: 0; padding: .375rem; max-height: 17rem; overflow-y: auto; }
.rs-pop-list:focus { outline: none; }

.rs-copt {
  display: flex; align-items: center; gap: .625rem;
  min-height: 44px; padding: .5rem .625rem;
  border-radius: .75rem; cursor: pointer;
  font-size: .875rem; color: var(--ink);
}
.rs-copt.is-active { background: rgba(12, 27, 38, .06); }
.rs-copt.is-sel { background: rgba(44, 171, 224, .12); font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .rs-copt:hover { background: rgba(12, 27, 38, .06); }
  .rs-copt.is-sel:hover { background: rgba(44, 171, 224, .18); }
}

.rs-pop-group {
  padding: .625rem .625rem .3rem;
  font-family: var(--font-mono); font-size: .5625rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
}
.rs-pop-empty { padding: 1.25rem .625rem; text-align: center; font-size: .8125rem; color: var(--ink-faint); }

/* ── Country picker ─────────────────────────────────────────────────────── */
.rs-pop-country { width: min(21rem, calc(100vw - 2.5rem)); }
.rs-pop-head {
  position: relative; display: flex; align-items: center;
  padding: .625rem; border-bottom: 1px solid var(--line);
}
.rs-pop-head > i { position: absolute; inset-inline-start: 1.25rem; color: var(--ink-faint); font-size: .75rem; }
.rs-pop-search {
  width: 100%; min-height: 40px;
  padding: .5rem .75rem .5rem 2.25rem;
  border: 1px solid var(--line); border-radius: .75rem;
  background: var(--surface-2); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
}
.rs-pop-search:focus { outline: none; border-color: var(--cyan-ink); background: var(--surface); }
.rs-copt-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-copt-dial { flex: none; font-family: var(--font-mono); font-size: .75rem; color: var(--ink-faint); }
.rs-copt.is-sel .rs-copt-dial { color: var(--cyan-ink); }

/* ── Cabin listbox ──────────────────────────────────────────────────────── */
.rs-pop-cabin { width: max(100%, 17rem); }
.rs-cabin-opt { align-items: flex-start; padding-block: .625rem; }
.rs-cabin-tick {
  flex: none; display: grid; place-items: center;
  width: 1.25rem; height: 1.25rem; margin-top: .1rem;
  border-radius: 999px; border: 1px solid var(--line-strong);
  color: transparent; font-size: .5rem;
}
.rs-copt.is-sel .rs-cabin-tick { background: var(--cyan); border-color: var(--cyan); color: #041018; }
.rs-cabin-tx b { display: block; font-size: .875rem; }
.rs-cabin-tx small { display: block; font-size: .75rem; color: var(--ink-faint); margin-top: .1rem; font-weight: 500; }

/* ── Calendar ───────────────────────────────────────────────────────────── */
.rs-pop-cal { width: min(20rem, calc(100vw - 2.5rem)); padding: .75rem; }
.rs-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: .5rem;
}
.rs-cal-title {
  font-family: var(--font-display); font-size: .9375rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--ink);
}
.rs-cal-nav {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: .75rem;
  background: var(--surface); color: var(--ink); cursor: pointer;
  font-size: .7rem;
  transition: border-color .2s var(--e-out), color .2s var(--e-out);
}
.rs-cal-nav:disabled { opacity: .35; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .rs-cal-nav:not(:disabled):hover { border-color: var(--cyan-ink); color: var(--cyan-ink); }
}

.rs-cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rs-cal-grid th {
  padding-block: .35rem;
  font-family: var(--font-mono); font-size: .5625rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.rs-cal-grid th abbr { text-decoration: none; }
.rs-cal-cell { padding: 1px; }
.rs-cal-day {
  width: 100%; aspect-ratio: 1; min-height: 36px;
  display: grid; place-items: center;
  border: 1px solid transparent; border-radius: .7rem;
  background: transparent; color: var(--ink);
  font-family: var(--font-body); font-size: .8125rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color .15s var(--e-out), color .15s var(--e-out), transform .12s var(--e-out);
}
/* Touch devices get the full 44px target; pointer devices keep the tighter
   grid, which reads better and is easy enough to hit with a mouse. */
@media (pointer: coarse) {
  .rs-cal-day { min-height: 44px; font-size: .875rem; }
  .rs-cal-nav { width: 44px; height: 44px; }
  .rs-cal-quick, .rs-cal-clear { min-height: 44px; }
}
.rs-cal-day:disabled { color: var(--line-strong); cursor: not-allowed; }
.rs-cal-day.is-today:not(.is-sel) { border-color: var(--line-strong); }
.rs-cal-day.is-sel {
  background: var(--cyan); color: #041018; font-weight: 800;
  box-shadow: 0 6px 16px -6px rgba(44, 171, 224, .8);
}
.rs-cal-day:active:not(:disabled) { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .rs-cal-day:not(:disabled):not(.is-sel):hover { background: rgba(44, 171, 224, .14); }
}

.rs-cal-foot {
  display: flex; align-items: center; gap: .375rem;
  margin-top: .625rem; padding-top: .625rem;
  border-top: 1px solid var(--line);
}
.rs-cal-quick, .rs-cal-clear {
  min-height: 36px; padding: .4rem .7rem;
  border: 1px solid var(--line); border-radius: .7rem;
  background: var(--surface); color: var(--ink-dim);
  font-family: var(--font-body); font-size: .75rem; font-weight: 700;
  cursor: pointer;
  transition: border-color .2s var(--e-out), color .2s var(--e-out);
}
.rs-cal-clear { margin-inline-start: auto; color: var(--ink-faint); }
@media (hover: hover) and (pointer: fine) {
  .rs-cal-quick:hover, .rs-cal-clear:hover { border-color: var(--cyan-ink); color: var(--cyan-ink); }
}

/* Popovers are clamped into the viewport by rsControls.js rather than by a
   media query: .rs-search-shell carries a backdrop-filter, which makes it the
   containing block for any position:fixed descendant, so a fixed bottom sheet
   would anchor to the panel instead of the screen. */
@media (max-width: 639px) {
  .rs-pop-country { width: min(21rem, calc(100vw - 1.5rem)); }
}