/*
Theme Name: Roovio
Theme URI: https://roovio.app
Author: Roovio
Author URI: https://roovio.app
Description: Roovio marketing theme — trust-led travel brand. Currently ships the dynamic About page (content driven entirely by meta boxes), plus a reusable header and footer. Design system extracted from the Roovio Design System kit (General Sans type, deep-green + coral palette, soft rounded cards).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: roovio
*/

/* ============================================================
   Webfonts — General Sans (self-hosted)
   ============================================================ */
@font-face {
  font-family: "General Sans";
  src: url("assets/fonts/GeneralSans-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("assets/fonts/GeneralSans-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("assets/fonts/GeneralSans-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("assets/fonts/GeneralSans-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("assets/fonts/GeneralSans-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Design tokens — Roovio
   ============================================================ */
:root {
  /* Brand green */
  --green-950: #02160F;
  --green-900: #02301F;
  --green-800: #0A3D2A;
  --green-700: #154E39;
  --green-600: #1F5F48;
  --green-500: #2C7659;
  --green-400: #4F9579;
  --green-300: #86B9A4;
  --green-200: #BCDBCF;
  --green-100: #E2F0E9;
  --green-50: #F1F8F4;
  /* Coral */
  --coral-700: #D8542B;
  --coral-600: #ED6537;
  --coral-500: #FD7C50;
  --coral-400: #FE9572;
  --coral-300: #FFB59B;
  --coral-200: #FFD3C3;
  --coral-100: #FFE7DD;
  --coral-50: #FFF3EE;
  /* Vermillion */
  --vermillion-600: #CF2D26;
  --vermillion-500: #E73C34;
  --vermillion-100: #FBDAD8;
  /* Sunshine yellow */
  --yellow-500: #FDEB42;
  --yellow-400: #FCDE2A;
  --yellow-200: #FEF4A6;
  --yellow-100: #FEFAD2;
  /* Gold */
  --gold-600: #8C6500;
  --gold-500: #B07F00;
  /* Slate */
  --slate-700: #2E3B4A;
  --slate-600: #425368;
  --slate-400: #7C8A9B;
  --slate-200: #C7D0DA;
  /* Ink + neutral */
  --ink-900: #1A1A1A;
  --ink-800: #252525;
  --ink-700: #3A3A38;
  --neutral-500: #6E6E68;
  --neutral-400: #9A9A92;
  --neutral-300: #C9C8BF;
  --neutral-200: #E6E4DA;
  --neutral-100: #F0EFE8;
  /* Surfaces */
  --cream: #FDFAF1;
  --cream-deep: #F6F0E2;
  --paper: #FEFEFE;
  --white: #FFFFFF;

  /* Semantic aliases */
  --bg-page: var(--cream);
  --bg-page-alt: var(--cream-deep);
  --bg-inverse: var(--green-900);
  --surface-card: var(--white);
  --surface-sunken: var(--neutral-100);
  --text-primary: var(--ink-800);
  --text-heading: var(--green-900);
  --text-secondary: var(--slate-600);
  --text-muted: var(--neutral-500);
  --text-on-dark: var(--cream);
  --text-on-coral: var(--white);
  --text-link: var(--gold-500);
  --accent: var(--coral-500);
  --accent-hover: var(--coral-600);
  --accent-press: var(--coral-700);
  --accent-soft: var(--coral-100);
  --brand: var(--green-600);
  --brand-hover: var(--green-700);
  --brand-deep: var(--green-900);
  --highlight: var(--yellow-500);
  --sunset-bright: #FF9E54;
  --gradient-sunset: linear-gradient(to top right, var(--coral-600) 0%, var(--coral-500) 45%, var(--sunset-bright) 100%);
  --gradient-sunset-deep: linear-gradient(to top right, var(--coral-700) 0%, var(--coral-600) 48%, var(--coral-500) 100%);
  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-on-dark: rgba(255, 255, 255, 0.16);
  --focus-ring: var(--coral-500);

  /* Typography */
  --font-sans: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --text-display: 4.5rem;
  --text-h1: 3.75rem;
  --text-h2: 2.5rem;
  --text-h3: 1.75rem;
  --text-body-lg: 2.25rem;
  --text-body-xl: 1.5rem;
  --text-body: 1.125rem;
  --text-body-sm: 1rem;
  --text-caption: 0.875rem;
  --text-eyebrow: 0.8125rem;
  --lh-tight: 1.1;
  --lh-heading: 1.3;
  --lh-body: 1.55;
  --lh-relaxed: 1.7;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-eyebrow: 0.28em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(2, 48, 32, 0.06);
  --shadow-sm: 0 2px 8px rgba(2, 48, 32, 0.06);
  --shadow-md: 0 8px 24px rgba(2, 48, 32, 0.08);
  --shadow-lg: 0 18px 48px rgba(2, 48, 32, 0.10);
  --shadow-card: 4px 6px 40px rgba(0, 0, 0, 0.07);
  --shadow-coral: 0 12px 28px rgba(253, 124, 80, 0.30);
  /* Layout */
  --container-max: 1200px;
  --container-wide: 1320px;
  --container-narrow: 60rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-med: 240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   Base
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--text-link);
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
}

p {
  margin: 0;
}

/* Layout helpers */
.rv-container {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.rv-section {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.rv-section--alt {
  background: var(--cream-deep);
}

.rv-eyebrow {
  display: inline-block;
  color: var(--green-600);
  font-weight: var(--fw-semibold);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.rv-section__head {
  max-width: 42rem;
  margin-bottom: 2.5rem;
}

.rv-section__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.rv-section__head h2 {
  margin: 0.9rem 0 0;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.12;
  color: var(--text-heading);
}

.rv-section__head p {
  margin: 0.85rem 0 0;
  max-width: 38rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.rv-section__head--center p {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   Buttons
   ============================================================ */
.rv-btn {
  --_bg: var(--coral-500);
  --_fg: var(--text-on-coral);
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  border: 1.5px solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
  font-size: 1rem;
  padding: 0 1.25rem;
  height: 48px;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.rv-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--focus-ring);
}

.rv-btn--sm {
  font-size: 0.875rem;
  padding: 0 0.95rem;
  height: 40px;
}

.rv-btn--md {
  font-size: 1rem;
  padding: 0 1.25rem;
  height: 48px;
}

.rv-btn--lg {
  font-size: 1.0625rem;
  padding: 0 1.6rem;
  height: 56px;
}

.rv-btn .rv-icon {
  width: 1.15em;
  height: 1.15em;
}

/* Solid orange, matching the Homepage nav CTA (.rv-nav__cta) for a unified
   orange-button look across all pages. */
.rv-btn--primary {
  --_bg: var(--coral-500);
  --_fg: #fff;
  /* box-shadow: var(--shadow-coral); */
}

.rv-btn--primary:hover {
  --_bg: var(--coral-600);
  transform: translateY(-1px);
}

.rv-btn--primary:active {
  --_bg: var(--coral-700);
  transform: translateY(0) scale(0.985);
  box-shadow: var(--shadow-sm);
}

.rv-btn--secondary {
  --_bg: var(--green-600);
  --_fg: var(--cream);
}

.rv-btn--secondary:hover {
  --_bg: var(--green-700);
  transform: translateY(-1px);
}

.rv-btn--outline {
  --_bg: transparent;
  --_fg: var(--green-700);
  --_bd: var(--green-600);
}

.rv-btn--outline:hover {
  --_bg: var(--green-50);
}

.rv-btn--ghost {
  --_bg: transparent;
  --_fg: var(--green-700);
  --_bd: transparent;
  box-shadow: none;
}

.rv-btn--ghost:hover {
  --_bg: rgba(31, 95, 72, 0.08);
}

/* Base icon: sized in em so the parent font-size controls it (matches design-system RvIcons). */
.rv-icon {
  display: inline-block;
  vertical-align: middle;
  flex: none;
  width: 1em;
  height: 1em;
}

/* ============================================================
   Header / Nav
   ============================================================ */
.rv-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 14px clamp(1rem, 5vw, 100px) 0;
  pointer-events: none;
}

.rv-nav__inner {
  pointer-events: auto;
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  min-height: 70px;
  padding: 0.6rem 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* background: rgba(255, 255, 255, 0.45); */
  background: #fff;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-radius: 100px;
  box-shadow: 0 4px 80px 0 rgba(145, 145, 145, 0.25);
  transition: background var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

/* Slightly more opaque once scrolled, for legibility over busy content. */
.rv-nav.is-scrolled .rv-nav__inner {
  background: rgba(255, 255, 255, 0.82);
}

.rv-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  flex: none;
}

.rv-nav__logo {
  width: 33px;
  height: 44px;
  display: block;
  flex: none;
}

.rv-nav__word {
  font-family: "Montserrat", var(--font-sans);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #252525;
  white-space: nowrap;
}

/* Right cluster: links + CTA. */
.rv-nav__menu {
  display: flex;
  align-items: center;
  gap: 40px;
}

.rv-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 2.6vw, 50px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.rv-nav__links a {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  color: #2a2223;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.rv-nav__links a:hover {
  color: var(--green-600);
}

.rv-nav__links .current-menu-item>a,
.rv-nav__links .current_page_item>a,
.rv-nav__links a[aria-current="page"] {
  color: var(--green-600);
  font-weight: 600;
}

.rv-nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  height: 46px;
  padding: 0 24px;
  border-radius: 107px;
  background: var(--coral-500);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 25px;
  text-transform: capitalize;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.rv-nav__cta:hover {
  background: var(--coral-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-coral);
}

.rv-nav__cta .rv-icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

/* Hamburger toggle — hidden on desktop (shown via responsive.css). */
.rv-nav__toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex: none;
}

.rv-nav__bars,
.rv-nav__bars::before,
.rv-nav__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: #252525;
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.rv-nav__bars {
  position: relative;
}

.rv-nav__bars::before,
.rv-nav__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.rv-nav__bars::before {
  top: -7px;
}

.rv-nav__bars::after {
  top: 7px;
}

.rv-nav__toggle[aria-expanded="true"] .rv-nav__bars {
  background: transparent;
}

.rv-nav__toggle[aria-expanded="true"] .rv-nav__bars::before {
  transform: translateY(7px) rotate(45deg);
}

.rv-nav__toggle[aria-expanded="true"] .rv-nav__bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* Brand logo image classes — used by the footer (roovio_brand). */
.rv-brand__icon {
  height: 30px;
  width: auto;
  display: block;
  flex: none;
}

.rv-brand__name {
  height: 18px;
  width: auto;
  display: block;
}

/* Page re-theme — match the Trips Listing white atmosphere: remap the cream
   surface tokens at page scope so the base fills white and the "cream" (alt)
   sections use the exact same tone as the Trips Listing page. */
.ab-page {
  --cream: #FFFFFF;
  --cream-deep: #F4F2EA;
  background: var(--cream);
}

/* ============================================================
   Hero (Section 1)
   ============================================================ */
/* Light green-wash hero, consistent with the Trips Listing / Real Reviews
   inner-page heroes (cream bg + radial green gradient, centered head). */
.ab-hero {
  position: relative;
  overflow: hidden;
  background: var(--white);
}

.ab-hero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ab-hero__grad {
  position: absolute;
  inset: 0;
  background: radial-gradient(1100px 460px at 82% -12%, var(--green-100), transparent 60%), radial-gradient(760px 420px at 4% 0%, var(--green-50), transparent 64%);
}

.ab-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: calc(var(--rv-nav-h) + clamp(2.75rem, 5vw, 4rem)) var(--gutter) clamp(2.75rem, 5vw, 4.5rem);
}

.ab-hero__content {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

.ab-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eaf6f0;
  color: var(--green-600);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

.ab-hero__eyebrow .rv-icon {
  width: 1rem;
  height: 1rem;
}

.ab-hero h1 {
  margin: 16px auto 0;
  max-width: 20ch;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(2.1rem, 4.4vw, 3.25rem);
  line-height: 1.07;
  color: var(--text-heading);
  text-wrap: balance;
}

.ab-hero h1 span {
  color: var(--green-600);
}

.ab-hero__sub {
  margin: 1.05rem auto 0;
  max-width: 44rem;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--text-secondary);
}

.ab-hero__cta {
  margin-top: 1.9rem;
  display: flex;
  gap: 0.9rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.ab-page .ab-hero__cta {
  display: none;
}

.ab-page .ab-story.rv-section--alt {
  background: #fff;
}

.ab-hero__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.6rem;
}

.ab-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #eaf6f0;
  border: none;
  color: var(--green-600);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
}

.ab-chip .rv-icon {
  width: 1rem;
  height: 1rem;
}

/* ============================================================
   Manifesto (Section 2)
   ============================================================ */
.ab-manifesto {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--white);
}

.ab-manifesto__inner {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.ab-manifesto h2 {
  margin: 1rem 0 0;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.1;
  color: var(--text-heading);
  max-width: 20ch;
}

.ab-manifesto__intro {
  margin: 1.6rem 0 0;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.55;
  color: var(--text-secondary);
}

.ab-manifesto__stance {
  margin: 1.3rem 0 0;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--text-primary);
  font-weight: 500;
}

.hl-coral {
  color: var(--coral-500);
}

.hl-green {
  color: var(--green-700);
  font-weight: 700;
}

/* ============================================================
   How it works (Section 3)
   ============================================================ */
/* Step-flow / process timeline — 3 horizontal bands (node · arrow · desc).
   Each .ab-flow-step uses display:contents so its 3 children flow into the
   shared grid: column-by-column, 3 rows tall. Keeps Roovio green palette. */
/* ===== About · How it works — sequential step flow (matches reference) =====
   A connected timeline: dashed rail + coloured dots + arches over alternate
   cards lead the eye step → step; chevron arrows carry the titles; dashed
   boxes hold the descriptions. Roovio green palette throughout. */
.ab-how__flow {
  --flow-gap: clamp(1.1rem, 2.4vw, 2rem);
  --node-h: 8rem;
  --rail-y: calc(0.5rem + (var(--node-h) / 2));
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-rows: var(--node-h) auto;
  align-items: stretch;
  column-gap: var(--flow-gap);
  row-gap: 1.25rem;
  padding-top: 0.5rem;
}

/* upward arrow — final endpoint at the top of the right-hand drop */
.ab-how__flow::after {
  content: "";
  position: absolute;
  right: calc(-1.8rem - 5px);
  top: calc(var(--rail-y) - 9px);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 9px solid var(--neutral-400);
  z-index: 0;
}

.ab-flow-step {
  display: contents;
  --c: var(--green-600);
}

.ab-flow-step:nth-child(1) {
  --c: var(--green-700);
}

.ab-flow-step:nth-child(2) {
  --c: var(--green-600);
}

.ab-flow-step:nth-child(3) {
  --c: var(--green-500);
}

.ab-flow-step:nth-child(4) {
  --c: var(--green-400);
}

.ab-flow-step:nth-child(5) {
  --c: var(--green-600);
}

.ab-flow-step:nth-child(6) {
  --c: var(--green-500);
}

/* Layer 1 — white icon card */
.ab-flow-step__node {
  position: relative;
  z-index: 1;
  /* background: var(--white); */
  border-radius: var(--radius-xl);
  /* box-shadow: var(--shadow-sm); */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* connector dot on the rail, in the gap to the left of each card */
.ab-flow-step__node::before {
  content: "";
  position: absolute;
  left: calc(-1 * (var(--flow-gap) / 2) - 0.45rem);
  top: 50%;
  transform: translateY(-50%);
  width: 0.9rem;
  height: 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--c);
  box-shadow: 0 0 0 4px var(--bg-page-alt), 0 0 0 5.5px var(--neutral-300);
  z-index: 3;
}

/* dotted U-connector passing UNDER the arrow, joining consecutive rail dots:
   down from the left dot, across beneath the chevron, up to the right dot */
.ab-flow-step:nth-child(odd):not(:last-child) .ab-flow-step__bar-wrap::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--flow-gap) / 2);
  width: calc(100% + var(--flow-gap));
  top: calc(-1 * (var(--node-h) / 2 + 1.25rem));
  bottom: -1.25rem;
  border: 1.5px dashed var(--neutral-400);
  border-top: 0;
  border-radius: 0 0 1.4rem 1.4rem;
  z-index: 0;
}

/* dotted arch passing OVER the cards, joining consecutive rail dots:
   up from the left dot, across above the card, down to the right dot */
.ab-flow-step:nth-child(even):not(:last-child) .ab-flow-step__node::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--flow-gap) / 2);
  width: calc(100% + var(--flow-gap));
  top: -1.9rem;
  height: calc(var(--node-h) / 2 + 1.9rem);
  border: 1.5px dashed var(--neutral-400);
  border-bottom: 0;
  border-radius: 1.4rem 1.4rem 0 0;
  z-index: 0;
}

.ab-flow-step__icon {
  position: relative;
  width: 5.6rem;
  height: 5.6rem;
  flex: none;
  color: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ab-flow-step__icon .rv-icon {
  width: 60px;
  height: auto;
}

/* Layer 2 — chevron arrow banner holding the step title + description */
.ab-flow-step__bar-wrap {
  position: relative;
  height: 100%;
}

.ab-flow-step__bar {
  position: relative;
  z-index: 1;
  background: var(--c);
  color: var(--cream);
  height: 100%;
  min-height: 3.4rem;
  padding: 1.1rem 2.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%, 24px 50%);
}

.ab-flow-step__title {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.25;
}

.ab-flow-step__body {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--cream);
  opacity: 0.92;
}

/* last card → endpoint: down from the dot, across the rounded bottom,
   and up the right side to the upward arrow (single U, both corners curved) */
.ab-flow-step:last-child .ab-flow-step__bar-wrap::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--flow-gap) / 2);
  right: -1.8rem;
  top: calc(-1 * (var(--node-h) / 2 + 1.25rem));
  bottom: -1.25rem;
  border-left: 1.5px dashed var(--neutral-400);
  border-right: 1.5px dashed var(--neutral-400);
  border-bottom: 1.5px dashed var(--neutral-400);
  border-radius: 0 0 1.4rem 1.4rem;
  z-index: 0;
}

/* Stack into a single column on narrow viewports. */

/* ============================================================
   Pillars (Section 4)
   ============================================================ */
.ab-pillars__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.ab-pillar {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.9rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}

.ab-pillar__icon {
  width: 3.2rem;
  height: 3.2rem;
  flex: none;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1.5px solid var(--green-600);
  color: var(--green-700);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.ab-pillar:hover .ab-pillar__icon {
  background: var(--green-600);
  border-color: var(--green-600);
  color: var(--cream);
}

.ab-pillar__icon .rv-icon {
  width: 1.6rem;
  height: 1.6rem;
}

.ab-pillar h3 {
  margin: 0.2rem 0 0.45rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-heading);
}

.ab-pillar p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ============================================================
   Story (Section 5)
   ============================================================ */
.ab-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.ab-story h2 {
  margin: 1rem 0 0;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.12;
  color: var(--text-heading);
  max-width: 18ch;
}

.ab-story__body p {
  margin: 1.5rem 0 0;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.ab-story__media {
  position: relative;
}

.ab-story__img {
  aspect-ratio: 4/5;
  border-radius: var(--radius-2xl);
  background-image: var(--rvw-bg, none);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-lg);
}

.ab-story__card {
  position: absolute;
  left: -1.25rem;
  bottom: 1.5rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 0.9rem 1.1rem;
  max-width: 14rem;
}

.ab-story__card-title {
  font-weight: 700;
  color: var(--text-heading);
  font-size: 1rem;
}

.ab-story__card-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

/* ============================================================
   Proof (Section 6)
   ============================================================ */
.ab-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}

.ab-proof__item {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ab-itinerary {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.ab-itinerary:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Creator header — people before place */
.ab-itinerary__creator {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
}

.ab-itinerary__avatar {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--green-100);
  color: var(--green-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  background-image: var(--rvw-bg, none);
  background-size: cover;
  background-position: center;
}

.ab-itinerary__avatar.is-ring {
  box-shadow: 0 0 0 2.5px var(--white), 0 0 0 4.5px var(--coral-500);
}

.ab-itinerary__cmeta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ab-itinerary__creator-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-heading);
  line-height: 1.2;
}

.ab-itinerary__creator-persona {
  font-size: 0.78rem;
  color: var(--coral-600);
  font-weight: 500;
}

.ab-itinerary__follow {
  margin-left: auto;
  flex: none;
  border: 1.5px solid var(--green-600);
  background: transparent;
  color: var(--green-700);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  line-height: 1;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.ab-itinerary__follow:hover {
  background: var(--green-50);
}

.ab-itinerary__follow[data-following="true"] {
  background: var(--green-600);
  color: var(--cream);
}

.ab-itinerary__follow[data-following="true"]:hover {
  background: var(--green-700);
}

/* Media */
.ab-itinerary__media {
  position: relative;
  aspect-ratio: 3/2;
  background: var(--green-100);
  overflow: hidden;
}

.ab-itinerary__img {
  position: absolute;
  inset: 0;
  background-image: var(--rvw-bg, none);
  background-size: cover;
  background-position: center;
  transition: transform var(--dur-slow) var(--ease-out);
}

.ab-itinerary:hover .ab-itinerary__img {
  transform: scale(1.04);
}

.ab-itinerary__save {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--green-700);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.ab-itinerary__save:hover {
  background: var(--green-50);
  transform: translateY(-1px);
}

.ab-itinerary__save .rv-icon {
  width: 1.05rem;
  height: 1.05rem;
}

.ab-itinerary__save[aria-pressed="true"] {
  color: var(--coral-500);
}

.ab-itinerary__save[aria-pressed="true"] .rv-icon {
  fill: none;
  stroke: var(--coral-500);
}

.ab-itinerary__loc {
  position: absolute;
  left: 0.7rem;
  bottom: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  background: rgba(2, 48, 32, 0.62);
  color: #fff;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.35em 0.7em;
  border-radius: var(--radius-pill);
}

.ab-itinerary__loc .rv-icon {
  width: 0.95em;
  height: 0.95em;
  color: #fff;
}

/* Body */
.ab-itinerary__body {
  padding: 0.85rem 1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ab-itinerary__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.ab-itinerary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ab-itinerary__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

.ab-itinerary__stars {
  display: inline-flex;
  gap: 1px;
  line-height: 0;
}

.ab-star {
  width: 15px;
  height: 15px;
  display: block;
}

.ab-star.is-full {
  color: var(--coral-500);
}

.ab-star.is-empty {
  color: var(--neutral-300);
}

.ab-itinerary__rval {
  font-weight: 600;
  color: var(--text-heading);
  font-size: 0.9rem;
}

.ab-itinerary__rcount {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.ab-itinerary__days {
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.ab-itinerary__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ab-itinerary__tag {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--green-700);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  padding: 0.25em 0.6em;
  border-radius: var(--radius-pill);
}

.ab-proof__note {
  margin: 0;
  padding: 0 0.4rem;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--text-secondary);
  font-style: italic;
}

/* ============================================================
   Belief (Section 7)
   ============================================================ */
.ab-belief {
  padding: clamp(2rem, 4vw, 3.5rem) var(--gutter);
}

.ab-belief__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  background: var(--green-900);
  color: var(--cream);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}

.ab-belief__icon .rv-icon {
  width: 2.6rem;
  height: 2.6rem;
  color: #fff;
  margin-bottom: 1rem;
}

.ab-belief__quote {
  margin: 0 auto;
  max-width: 30ch;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 3.8vw, 2.9rem);
  line-height: 1.18;
  color: var(--cream);
}

.ab-belief__quote .hl {
  color: #fff;
}

.ab-belief__attr {
  margin: 1.75rem auto 0;
  font-size: 1rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ============================================================
   Values (Section 8)
   ============================================================ */
.ab-values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 1.8vw, 1.4rem);
}

.ab-value {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-xs);
}

.ab-value__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: var(--green-100);
  color: var(--green-700);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.ab-value__icon .rv-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.ab-value h3 {
  margin: 0 0 0.45rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-heading);
}

.ab-value p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ============================================================
   Team (Section 9)
   ============================================================ */
.ab-team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 1.8vw, 1.4rem);
}

.ab-team-card {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  text-align: center;
  box-shadow: var(--shadow-xs);
}

.ab-team-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-pill);
  margin: 0 auto 1rem;
  background: var(--green-200);
  color: var(--green-800);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.4rem;
  background-image: var(--rvw-bg, none);
  background-size: cover;
  background-position: center;
}

.ab-team-card__name {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-heading);
}

.ab-team-card__role {
  font-size: 0.95rem;
  color: var(--coral-600);
  font-weight: 600;
  margin-top: 0.15rem;
}

.ab-team-card p {
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* ============================================================
   Press (Section 10)
   ============================================================ */
.ab-press {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.ab-press__head {
  text-align: center;
  margin-bottom: 1.75rem;
}

.ab-press__logos {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  justify-content: center;
  align-items: center;
  opacity: 0.55;
}

.ab-press__logo {
  height: 1.9rem;
  min-width: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}

.ab-press__logo img {
  max-height: 1.9rem;
  width: auto;
  filter: grayscale(1);
}

.ab-press__logo--ph {
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--border-strong);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ab-press__ratings {
  margin: 1.75rem 0 0;
  text-align: center;
  font-size: 1rem;
  color: var(--text-secondary);
}

.ab-press__ratings b {
  color: var(--text-heading);
}

/* ============================================================
   CTA (Section 11)
   ============================================================ */
.ab-cta {
  padding: clamp(4rem, 8vw, 7rem) var(--gutter);
  text-align: center;
}

.ab-cta__inner {
  max-width: 50rem;
  margin: 0 auto;
}

.ab-cta h2 {
  margin: 0 auto;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.06;
  color: var(--text-heading);
  max-width: 16ch;
}

.ab-cta__btns {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.ab-cta__note {
  margin: 1.5rem 0 0;
  font-size: 1.02rem;
  color: var(--text-muted);
}

/* ============================================================
   Footer (Section 13)
   ============================================================ */
.rv-footer {
  background: #252525;
  color: #fff;
}

.rv-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 0px 20px 0px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.rv-footer__top {
  display: flex;
  justify-content: space-between;
  gap: 40px 60px;
  flex-wrap: wrap;
}

/* Brand column */
.rv-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 320px;
  max-width: 100%;
}

.rv-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 9.8px;
  text-decoration: none;
}

.rv-footer__logo-mark {
  width: 37px;
  height: 50px;
  display: block;
  flex: none;
}

.rv-footer__word {
  font-family: "Montserrat", var(--font-sans);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
}

.rv-footer__tag {
  margin: -4px 0 0;
  max-width: 320px;
  font-size: 14px;
  line-height: 1.625;
  color: #fff;
}

.rv-footer__social {
  display: flex;
  gap: 16px;
}

.rv-footer__soc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: #252525;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.rv-footer__soc svg {
  display: block;
}

.rv-footer__soc:hover {
  background: var(--coral-500);
  color: #fff;
  transform: translateY(-2px);
}

/* Link columns */
.rv-footer__links {
  display: flex;
  gap: 140px;
  flex-wrap: wrap;
}

/* Subscribe keeps its wider separation; only the Explore↔Company gap tightens. */
.rv-footer__subscribe {
  margin-left: 20px;
}

.rv-footer__links h4 {
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
}

.rv-footer__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rv-footer__links a {
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.rv-footer__links a:hover {
  color: #fff;
}

/* Subscribe column */
.rv-footer__subscribe {
  width: 298px;
  max-width: 100%;
}

.rv-footer__subtext {
  margin: 0 0 16px;
  max-width: 242px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.5);
}

.rv-footer__form {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 298px;
  max-width: 100%;
  height: 45px;
  padding: 4px 4px 4px 18px;
  background: #fff;
  border-radius: 68px;
  box-shadow: 0 2.7px 20px rgba(0, 0, 0, 0.1);
}

.rv-footer__msg {
  margin: 12px 0 0;
  max-width: 298px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}

.rv-footer__msg[data-state="success"] {
  color: #7ee0b6;
}

.rv-footer__msg[data-state="error"] {
  color: #ff9a8a;
}

.rv-footer__email {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: #252525;
}

.rv-footer__email::placeholder {
  color: #252525;
  opacity: 1;
}

.rv-footer__submit {
  flex: none;
  width: 35px;
  height: 35px;
  border: 0;
  border-radius: 50%;
  background: var(--coral-500);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.rv-footer__submit:hover {
  background: var(--coral-600);
  transform: translateY(-1px);
}

.rv-footer__submit .rv-icon {
  width: 14px;
  height: 14px;
}

/* Legal bar */
.rv-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
}

.rv-footer__copy {
  font-size: 14px;
  color: #fff;
}

.rv-footer__copy strong {
  font-weight: 700;
  text-transform: uppercase;
}

.rv-footer__copy a {
  color: #fff;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.rv-footer__copy a:hover {
  color: var(--coral-400);
}

.rv-footer__legal {
  display: inline-flex;
  align-items: center;
  gap: 15px;
}

.rv-footer__legal a {
  font-size: 14px;
  color: #fafafa;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.rv-footer__legal a:hover {
  color: var(--coral-400);
}

.rv-footer__sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   Responsive
   All width-based media queries live in responsive.css (loaded after
   this file). Accessibility queries (prefers-reduced-motion) stay inline
   beside their components below.
   ============================================================ */

/* ============================================================
   HOME PAGE
   All home-template styling. Sections mirror the Roovio Homepage
   reference; dynamic background images arrive via the inline
   --rvw-bg custom property and are consumed by the classes below.
   ============================================================ */

/* Home — Shared layout helpers */
.rvw-container {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.rvw-h2 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.16;
  color: var(--text-heading);
}

/* Home — Mock search bar (hero) */
.rv-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-subtle);
  width: 100%;
  box-sizing: border-box;
}

.rv-search--static {
  pointer-events: none;
}

.rv-search__icon {
  color: var(--coral-500);
  display: inline-flex;
  flex: none;
}

.rv-search__icon .rv-icon {
  width: 1.4rem;
  height: 1.4rem;
}

.rv-search__field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.rv-search__field input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 1.0625rem;
  color: var(--text-primary);
  padding: 0.7rem 0;
  position: relative;
  z-index: 1;
}

.rv-search__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  color: var(--neutral-400);
  font-size: 1.0625rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rv-search__ph b {
  color: var(--green-600);
  font-weight: var(--fw-semibold);
  margin-left: 5px;
}

.rv-search__ph-anim {
  animation: rvPhRise var(--dur-med) var(--ease-out);
}

@keyframes rvPhRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.rv-search__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  border: none;
  background: var(--coral-500);
  color: #fff;
  font-family: inherit;
  font-weight: var(--fw-semibold);
  font-size: 1rem;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-pill);
  /* box-shadow: var(--shadow-coral); */
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.rv-search__btn:hover {
  background: var(--coral-600);
  transform: translateY(-1px);
}

.rv-search__btn .rv-icon {
  width: 1.1em;
  height: 1.1em;
}

/* Home — Hero Section */
.rvw-hero-sec {
  position: relative;
  overflow: hidden;
}

.rvw-hero-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(1100px 520px at 78% -8%, var(--coral-100), transparent 60%), radial-gradient(800px 480px at 8% 8%, var(--green-50), transparent 62%);
}

.rvw-hero__grid {
  position: relative;
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.rvw-hero__title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  line-height: 1.08;
  color: var(--text-heading);
}

.rvw-hero__title span {
  color: var(--coral-500);
}

.rvw-hero__body {
  margin: 1.1rem 0 0;
  max-width: 34rem;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--text-secondary);
}

.rvw-hero__search {
  margin-top: 1.75rem;
  max-width: 38rem;
}

.rvw-hero__actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.8rem;
  align-items: center;
  flex-wrap: wrap;
}

.rvw-hero-art {
  position: relative;
  min-height: 24rem;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background-image: var(--rvw-bg);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-lg);
}

/* Home — Two Paths Section */
.rvw-paths {
  padding: clamp(3rem, 6vw, 5.5rem) 0;
}

.rvw-paths__head {
  text-align: center;
  margin-bottom: 2.5rem;
}

.rvw-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.rvw-path {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  min-height: 18rem;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.rvw-path:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(2, 48, 32, 0.16);
}

.rvw-path--green {
  background: var(--green-900);
  color: var(--cream);
}

.rvw-path--coral {
  background: var(--gradient-sunset);
  color: #fff;
}

.rvw-path__img {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 42%;
  background-image: var(--rvw-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 70%);
  mask-image: linear-gradient(to right, transparent, #000 70%);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-med) var(--ease-out);
}

.rvw-path:hover .rvw-path__img {
  transform: scale(1.06);
  opacity: 0.62;
}

.rvw-path__copy {
  position: relative;
  max-width: 78%;
}

.rvw-path__copy h3 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.rvw-path--green .rvw-path__copy h3 {
  color: var(--cream);
}

.rvw-path--coral .rvw-path__copy h3 {
  color: #fff;
}

.rvw-path__copy p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
}

.rvw-path--green .rvw-path__copy p {
  color: var(--green-100);
}

.rvw-path--coral .rvw-path__copy p {
  color: rgba(255, 255, 255, 0.92);
}

.rvw-path__cta {
  position: relative;
  margin-top: auto;
  padding-top: 2rem;
}

/* Home — How It Works Section */
.rvw-how {
  padding: clamp(3rem, 6vw, 5.5rem) 0;
  background: var(--white);
}

.rvw-how__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  /* top-anchor so revealing step text never re-centers/shifts the image */
  align-items: start;
}

.rvw-how-art {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  /* fixed height + top-anchored so it stays static when the right column grows */
  height: 24rem;
  align-self: start;
  box-shadow: var(--shadow-lg);
  background-image: var(--rvw-bg);
  background-size: cover;
  background-position: center;
  /* keep image completely static on hover */
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

.rvw-how-art:hover {
  transform: none !important;
  scale: none !important;
}

.rvw-how__title {
  margin: 0 0 1.75rem;
}

.rvw-steps {
  display: flex;
  flex-direction: column;
}

.rvw-step {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}

.rvw-step__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
}

.rvw-step__num {
  z-index: 1;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--radius-pill);
  background: var(--gradient-sunset);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
}

.rvw-step__line {
  flex: 1;
  width: 2px;
  background: var(--border-strong);
  margin-top: 4px;
}

.rvw-step__box {
  flex: 1;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-lg);
  border: 1.5px solid transparent;
  transition: border-color var(--dur-med) var(--ease-out);
}

.rvw-step:not(:last-child) .rvw-step__box {
  margin-bottom: 0.9rem;
}

.rvw-step__box h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-heading);
}

.rvw-step__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-med) var(--ease-out);
}

.rvw-step__reveal>div {
  overflow: hidden;
}

.rvw-step__reveal p {
  margin: 0.3rem 0 0.1rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.rvw-step:hover .rvw-step__box {
  border-color: var(--coral-400);
}

.rvw-step:hover .rvw-step__reveal {
  grid-template-rows: 1fr;
}

/* Home — Why We Started + Differentiators Section */
.rvw-why {
  padding: clamp(3rem, 6vw, 5.5rem) 0;
}

.rvw-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
  margin-bottom: 4rem;
}

.rvw-why-art {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  height: 100%;
  min-height: 20rem;
  box-shadow: var(--shadow-lg);
  background-image: var(--rvw-bg);
  background-size: cover;
  background-position: center;
}

.rvw-why__head {
  margin-bottom: 2.5rem;
}

.rvw-why__lead {
  margin: 0 0 1.1rem;
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--text-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.rvw-why__p {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.rvw-why__p:last-child {
  margin-bottom: 0;
}

.rvw-why__diffhead {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto 2.5rem;
}

.rvw-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.rvw-why-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 2rem 1.75rem;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.rvw-why-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--green-100);
}

.rvw-why-icon {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  background: transparent;
  border: 1.5px solid var(--green-600);
  color: var(--green-700);
  transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.rvw-why-card:hover .rvw-why-icon {
  background: var(--green-600);
  border-color: var(--green-600);
  color: var(--cream);
}

.rvw-why-icon .rv-icon {
  width: 1.7rem;
  height: 1.7rem;
}

.rvw-why-card h3 {
  margin: 0 0 0.55rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-heading);
}

.rvw-why-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Home — Featured Trips Section */
.rvw-feat-sec {
  padding: clamp(3rem, 6vw, 5.5rem) 0;
  background: var(--cream-deep);
}

.rvw-feat__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.rvw-feat__title {
  max-width: 40rem;
  text-align: left;
}

.rvw-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.rvw-feat {
  align-items: stretch;
}

.rvw-feat__item {
  display: flex;
}

.rvw-feat__item>.ab-itinerary {
  width: 100%;
}

.rvw-feat .ab-itinerary__title {
  min-height: 2.86em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bookmark = design-system IconButton "soft" md (42px, 1.25em icon, green→coral) */
.rvw-feat .ab-itinerary__save {
  width: 42px;
  height: 42px;
  top: 0.7rem;
  right: 0.7rem;
  color: var(--green-700);
}

.rvw-feat .ab-itinerary__save .rv-icon {
  width: 20px;
  height: 20px;
}

.rvw-feat .ab-itinerary__save[aria-pressed="true"] {
  color: var(--coral-500);
}

.rvw-feat .ab-itinerary__creator-name {
  color: var(--text-heading);
}

.rvw-feat .ab-itinerary__creator-persona {
  color: var(--coral-600);
}

.rvw-feat__cta {
  text-align: center;
  margin-top: 2.5rem;
}

.rvw-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: 0.9375rem;
  line-height: 1;
  padding: 0.55em 0.95em;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-strong);
  background: var(--white);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.rvw-tag:hover {
  border-color: var(--green-400);
  background: var(--green-50);
}

.rvw-tag[aria-pressed="true"] {
  background: var(--green-600);
  border-color: var(--green-600);
  color: var(--cream);
}

.rvw-tag[aria-pressed="true"]:hover {
  background: var(--green-700);
}

/* Home — Creator Hub Section */
.rvw-creator {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 5.5rem) 0;
  background: var(--green-900);
}

.rvw-creator__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.rvw-creator__title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.16;
  color: var(--cream);
}

.rvw-creator__body {
  margin: 1rem 0 1.6rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--green-100);
  max-width: 32rem;
}

.rvw-creator__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.rvw-btn-cream {
  --_bd: var(--cream);
  --_fg: var(--cream);
  --_bg: transparent;
}

.rvw-btn-cream:hover {
  --_bg: rgba(255, 255, 255, 0.12);
}

@keyframes rvw-marq-up {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

@keyframes rvw-marq-down {
  from {
    transform: translateY(-50%);
  }

  to {
    transform: translateY(0);
  }
}

.rvw-creator-reels {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  box-sizing: border-box;
  padding-right: var(--gutter);
  width: clamp(20rem, 46vw, 46rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.rvw-reelcol {
  overflow: hidden;
  height: 100%;
}

.rvw-reeltrack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  will-change: transform;
}

.rvw-reeltrack--up {
  animation: rvw-marq-up 26s linear infinite;
}

.rvw-reeltrack--down {
  animation: rvw-marq-down 30s linear infinite;
}

.rvw-reelcol:hover .rvw-reeltrack {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .rvw-reeltrack {
    animation: none !important;
  }
}

.rvw-clip {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex: none;
  box-shadow: var(--shadow-md);
  aspect-ratio: 9/13;
  background-image: var(--rvw-bg);
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.rvw-clip__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2, 48, 32, 0.78), transparent 55%);
}

.rvw-clip__src {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.rvw-clip__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--coral-600);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}

.rvw-clip__play .rv-icon {
  width: 1.4rem;
  height: 1.4rem;
  fill: currentColor;
}

.rvw-clip__by {
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.rvw-clip__avatar {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--green-200);
  color: var(--green-800);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.75rem;
}

.rvw-clip__meta {
  color: #fff;
  line-height: 1.2;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.rvw-clip__meta b {
  font-size: 0.9rem;
}

.rvw-clip__meta span {
  font-size: 0.78rem;
  opacity: 0.85;
}

/* Home — Testimonials Section */
.rvw-testi-sec {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 5.5rem) 0;
}

.rvw-testi-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(620px 360px at 88% 6%, var(--coral-100), transparent 60%), radial-gradient(560px 340px at 6% 92%, var(--green-50), transparent 62%);
}

.rvw-testi__inner {
  position: relative;
}

.rvw-testi__head {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto 2.25rem;
}

.rvw-testi-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.rvw-testi-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--coral-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}

.rvw-testi-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.rvw-testi-card:hover::before {
  transform: scaleX(1);
}

.rvw-testi-card__mark {
  color: var(--coral-400);
  font-size: 2.1rem;
  line-height: 0;
}

.rvw-testi-card__mark .rv-icon {
  width: 2.1rem;
  height: 2.1rem;
}

.rvw-testi-card__text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text-primary);
  flex: 1;
}

.rvw-testi-card__by {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.rvw-testi-card__avatar {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--green-200);
  color: var(--green-800);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
}

.rvw-testi-card__meta {
  line-height: 1.25;
}

.rvw-testi-card__name {
  color: var(--text-heading);
}

.rvw-testi-card__role {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.rvw-testi-card__stars {
  margin-left: auto;
  display: inline-flex;
  line-height: 0;
}

/* Home — CTA Banner Section */
.rvw-ctab {
  padding: clamp(2rem, 4vw, 3.5rem) var(--gutter);
}

.rvw-ctab__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: var(--gradient-sunset);
  border-radius: var(--radius-2xl);
  padding: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  box-shadow: var(--shadow-coral);
}

.rvw-ctab__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 300px at 80% -20%, rgba(253, 235, 66, 0.4), transparent 60%);
}

.rvw-ctab__content {
  position: relative;
}

.rvw-ctab__title {
  margin: 0 auto;
  max-width: 30rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.16;
  color: #fff;
}

.rvw-ctab__sub {
  margin: 0.8rem auto 1.6rem;
  max-width: 30rem;
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.92);
}

.rvw-ctab__badges {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
}

.rvw-appbadge--cream {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  width: 12rem;
  background: var(--cream);
  color: var(--green-900);
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.rvw-appbadge--cream:hover {
  background: var(--cream-deep);
  border-color: rgba(0, 0, 0, 0.12);
}

.rvw-appbadge--cream .rv-icon {
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
}

/* CTA banner — Trips page uses the deep-green gradient (Homepage keeps coral). */
.tr-page .rvw-ctab__inner {
  background: linear-gradient(120deg, var(--green-800) 0%, var(--green-900) 58%, var(--green-950) 100%);
  box-shadow: var(--shadow-lg);
}

.tr-page .rvw-ctab__glow {
  background: radial-gradient(26rem 26rem at 88% -30%, rgba(124, 184, 158, 0.30), transparent 62%),
    radial-gradient(18rem 18rem at -8% 120%, rgba(255, 255, 255, 0.10), transparent 65%);
}

.rvw-appbadge--cream span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.rvw-appbadge--cream small {
  font-size: 0.68rem;
  opacity: 0.7;
}

.rvw-appbadge--cream strong {
  font-size: 1.05rem;
  font-weight: 700;
}

/* Home — Featured Blogs Section */
.rvw-blogs {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--cream-deep);
}

.rvw-blogs__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}

.rvw-blogs__title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.16;
  color: var(--text-heading);
}

.rvw-blogs__nav {
  display: flex;
  gap: 0.6rem;
}

.rvw-blogs__cta {
  text-align: center;
  margin-top: 2.5rem;
}

.rvw-blogscroll {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter) 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rvw-blogscroll::-webkit-scrollbar {
  display: none;
}

.rvw-blogcard {
  flex: none;
  width: clamp(17rem, 24vw, 21rem);
  text-decoration: none;
  color: inherit;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.rvw-blogcard__media {
  aspect-ratio: 16/10;
  background-image: var(--rvw-bg);
  background-size: cover;
  background-position: center;
}

.rvw-blogcard__body {
  padding: 1.1rem 1.25rem 1.35rem;
}

.rvw-blogcard__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
}

.rvw-blogcard__tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral-600);
}

.rvw-blogcard__read {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.rvw-blogcard__read .rv-icon {
  width: 1em;
  height: 1em;
}

.rvw-blogcard__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-heading);
}

.rvw-blogarrow {
  flex: none;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--text-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background var(--dur-fast) var(--ease-out);
}

.rvw-blogarrow:hover {
  background: var(--cream-deep);
}

.rvw-hp-dest-sec .rvw-blogarrow {
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.rvw-hp-dest-sec .rvw-blogarrow:hover {
  background: var(--green-600);
  border-color: var(--green-600);
  color: #fff;
}

.rvw-blogarrow .rv-icon {
  width: 1.2rem;
  height: 1.2rem;
}

.rvw-blogarrow__flip {
  display: inline-flex;
  transform: scaleX(-1);
}

/* Home — Contact Section */
.rvw-contact {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 5.5rem) 0;
  background: var(--green-900);
}

.rvw-contact__bg {
  position: absolute;
  inset: 0;
  background-image: var(--rvw-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.28;
}

.rvw-contact__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 46, 32, 0.55), rgba(8, 46, 32, 0.82));
}

.rvw-contact__inner {
  position: relative;
}

.rvw-contact__box {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}

.rvw-contact__title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.16;
  color: var(--cream);
}

.rvw-contact__body {
  margin: 1rem auto 2.25rem;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--green-100);
}

.rvw-contact__channels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem 2.5rem;
}

.rvw-contact__channel {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-align: left;
}

.rvw-contact__icon {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-on-dark);
  color: var(--coral-400);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rvw-contact__email {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cream);
  text-decoration: none;
}

/* Home — Responsive (mirrors the reference breakpoints) */
/* ============================================================
 * TRIPS PAGE
 * Faithful port of the design-system "Trips Page". Section order:
 * Hero · Featured journeys · Explorer · Interactive map · Guides ·
 * Explore-by-persona · Community strip · CTA.
 * ============================================================ */

/* Page re-theme — the v2 Trips Listing design runs on a clean white atmosphere.
   Remap the cream surface tokens at page scope so every var(--cream) /
   var(--cream-deep) background inside .tr-page inherits the new values; sibling
   pages cascading from :root are untouched. */
.tr-page {
  --cream: #FFFFFF;
  --cream-deep: #F4F2EA;
  background: var(--cream);
}

/* ---- Scroll-reveal (fade + rise) ---- */
.tr-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-out) var(--d, 0ms), transform 620ms var(--ease-out) var(--d, 0ms);
  will-change: opacity, transform;
}

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

/* Staggered reveal delays (was inline --d; now data-free). */
.rvw-fx-grid>.tr-reveal:nth-child(2) {
  --d: 90ms;
}

.rvw-fx-grid>.tr-reveal:nth-child(3) {
  --d: 180ms;
}

.tr-ex-grid>.tr-reveal:nth-child(4n+2) {
  --d: 70ms;
}

.tr-ex-grid>.tr-reveal:nth-child(4n+3) {
  --d: 140ms;
}

.tr-ex-grid>.tr-reveal:nth-child(4n+4) {
  --d: 210ms;
}

@media (prefers-reduced-motion: reduce) {
  .tr-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Section + section-head helpers ---- */
.tr-sec {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.tr-sec--cream {
  background: var(--cream);
}

.tr-sec--deep {
  background: var(--cream-deep);
}

.tr-headrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.tr-sh {
  margin-bottom: 0;
}

.tr-sh--40 {
  max-width: 40rem;
}

.tr-sh--42 {
  max-width: 42rem;
  margin-bottom: 2.5rem;
}

.tr-headrow .tr-sh {
  margin-bottom: 0;
}

.tr-sh__title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.16;
  color: var(--text-heading);
}

.tr-sh__sub {
  margin: 0.85rem 0 0;
  max-width: 38rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---- Filters row (reuses .rvw-tag chips) ---- */
.tr-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.tr-filters--guides {
  margin-bottom: 1.6rem;
}

/* ============================ 1 · Hero ============================ */
.tr-hero {
  position: relative;
  overflow: hidden;
  background: var(--cream);
}

.tr-hero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tr-hero__grad {
  position: absolute;
  inset: 0;
  background: radial-gradient(1100px 460px at 82% -12%, var(--coral-100), transparent 60%), radial-gradient(760px 420px at 4% 0%, var(--green-50), transparent 64%);
}

@keyframes rvw-float-a {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(2.5%, -3%) scale(1.06);
  }
}

@keyframes rvw-float-b {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-3%, 2.5%) scale(1.08);
  }
}

.rvw-th-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  pointer-events: none;
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .rvw-th-a {
    animation: rvw-float-a 13s var(--ease-out) infinite;
  }

  .rvw-th-b {
    animation: rvw-float-b 16s var(--ease-out) infinite;
  }
}

.tr-hero__blob1 {
  width: 20rem;
  height: 20rem;
  right: 6%;
  top: -6rem;
  background: radial-gradient(circle at 30% 30%, var(--coral-200), transparent 70%);
  opacity: 0.6;
}

.tr-hero__blob2 {
  width: 16rem;
  height: 16rem;
  left: -3rem;
  bottom: -5rem;
  background: radial-gradient(circle at 40% 40%, var(--green-200), transparent 70%);
  opacity: 0.55;
}

.tr-hero__blob3 {
  width: 9rem;
  height: 9rem;
  left: 42%;
  top: 1rem;
  background: radial-gradient(circle at 40% 40%, var(--yellow-200), transparent 70%);
  opacity: 0.5;
}

.tr-hero__inner {
  position: relative;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(2.25rem, 4vw, 3rem);
  text-align: center;
}

.tr-hero__eyebrow {
  margin-bottom: 1.1rem;
  display: flex;
  justify-content: center;
}

.tr-hero__title {
  margin: 0 auto;
  max-width: 20ch;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(2.1rem, 4.4vw, 3.25rem);
  line-height: 1.07;
  color: var(--text-heading);
  text-wrap: balance;
}

.tr-hero__title span {
  color: var(--coral-500);
}

.tr-hero__body {
  margin: 1.05rem auto 0;
  max-width: 44rem;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--text-secondary);
}

.tr-hero__search {
  margin: 1.9rem auto 0;
  max-width: 42rem;
  pointer-events: none;
}

.tr-hero__dests {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.tr-hero__dests-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rvw-dpill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.32rem 0.85rem 0.32rem 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-heading);
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-fast) var(--ease-out);
}

.rvw-dpill:hover {
  border-color: var(--green-300);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.rvw-dpill__img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 1px solid rgb(0 0 0 / 20%);
}

/* ============================================================
   2 · Featured Trips & Guides — "Hand-Picked" (editorial spotlight)
   An asymmetric composition: one large immersive hero (the pinned trip)
   beside a stack of two supporting cards. All cards are full-bleed photo
   tiles with content laid over a gradient — a travel-landing treatment,
   not a white-body card grid.
   ============================================================ */
.rvw-fxsec__head {
  max-width: 46rem;
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
}

.rvw-fxsec__eyebrow {
  /* display: inline-flex; */
  display: none;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.95rem;
  padding: 0.42em 0.95em;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green-700);
  background: var(--green-100);
  border-radius: var(--radius-pill);
}

.rvw-fxsec__eyebrow svg {
  width: 0.95em;
  height: 0.95em;
  color: var(--green-600);
}

.rvw-fxsec__title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  color: var(--text-heading);
  text-wrap: balance;
}

.rvw-fxsec__sub {
  margin: 0.85rem 0 0;
  max-width: 40rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Asymmetric mosaic: hero column (1.4fr) + a two-row stack (1fr). */
.rvw-fx-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(0.9rem, 1.5vw, 1.35rem);
}

/* Immersive photo tile shared by every card. */
.rvw-fx {
  position: relative;
  display: block;
  min-height: 16rem;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  text-decoration: none;
  background: var(--green-900);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.rvw-fx--lead {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-height: 33rem;
}

.rvw-fx--sub {
  grid-column: 2;
}

.rvw-fx:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.rvw-fx__link {
  position: absolute;
  inset: 0;
  z-index: 8;
  border-radius: var(--radius-2xl);
}

.rvw-fx__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--focus-ring);
}

.rvw-fx__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 620ms var(--ease-out);
}

.rvw-fx:hover .rvw-fx__img {
  transform: scale(1.07);
}

/* Layered scrim: darkens the foot for legible text, deepens on hover. */
/* Readability overlay — three image-preserving layers:
   1) a faint full-tile veil so text holds up on bright photos (e.g. Amalfi),
   2) a short top gradient keeping the chips legible,
   3) a tall, many-stop bottom gradient — a smooth ease, not a hard band — that
      sits behind the title, dek, and foot on any image.
   The mid-frame stays clear so the photo keeps its impact. */
.rvw-fx__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(rgba(2, 22, 15, 0.2), rgba(2, 22, 15, 0.2)),
    linear-gradient(180deg, rgba(2, 22, 15, 0.55) 0%, rgba(2, 22, 15, 0) 22%),
    linear-gradient(0deg,
      rgba(2, 22, 15, 0.96) 0%,
      rgba(2, 22, 15, 0.9) 16%,
      rgba(2, 22, 15, 0.74) 32%,
      rgba(2, 22, 15, 0.5) 48%,
      rgba(2, 22, 15, 0.24) 64%,
      rgba(2, 22, 15, 0) 80%);
}

/* The hero holds more copy, so carry its bottom wash higher. */
.rvw-fx--lead .rvw-fx__scrim {
  background:
    linear-gradient(rgba(2, 22, 15, 0.2), rgba(2, 22, 15, 0.2)),
    linear-gradient(180deg, rgba(2, 22, 15, 0.55) 0%, rgba(2, 22, 15, 0) 20%),
    linear-gradient(0deg,
      rgba(2, 22, 15, 0.96) 0%,
      rgba(2, 22, 15, 0.9) 20%,
      rgba(2, 22, 15, 0.74) 40%,
      rgba(2, 22, 15, 0.48) 58%,
      rgba(2, 22, 15, 0.2) 74%,
      rgba(2, 22, 15, 0) 88%);
}

/* Ambient corner glow — a soft brand wash that fades in on hover. */
.rvw-fx__glow {
  position: absolute;
  z-index: 1;
  top: -30%;
  right: -20%;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 40%, rgba(253, 124, 80, 0.5), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}

.rvw-fx--guide .rvw-fx__glow {
  background: radial-gradient(circle at 60% 40%, rgba(134, 185, 164, 0.55), transparent 70%);
}

.rvw-fx:hover .rvw-fx__glow {
  opacity: 1;
}

/* Top chip row. */
.rvw-fx__top {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.rvw-fx__kind {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(2, 30, 20, 0.45);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.36em 0.75em;
  border-radius: var(--radius-pill);
}

.rvw-fx__kind svg {
  width: 0.95em;
  height: 0.95em;
  color: var(--green-300);
}

.rvw-fx__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 0.4em 0.85em;
}

.rvw-fx__tag svg {
  width: 0.95em;
  height: 0.95em;
}

.rvw-fx__tag--days {
  color: #fff;
  background: var(--coral-500);
}

.rvw-fx__tag--read {
  color: #fff;
  background: rgba(2, 48, 32, 0.5);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Overlaid content, pinned to the bottom of the tile. */
.rvw-fx__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
}

.rvw-fx--lead .rvw-fx__content {
  gap: 0.6rem;
  padding: clamp(1.4rem, 2.4vw, 2rem);
}

.rvw-fx__eyebrow2 {
  display: inline-flex;
  align-items: center;
  gap: 0.34em;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
}

.rvw-fx__eyebrow2 svg {
  width: 1em;
  height: 1em;
  color: var(--green-300);
}

.rvw-fx__title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  font-size: 1.2rem;
  color: #fff;
  text-wrap: balance;
}

.rvw-fx--lead .rvw-fx__title {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.12;
}

.rvw-fx__dek {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rvw-fx--lead .rvw-fx__dek {
  max-width: 34rem;
  font-size: 0.98rem;
}

/* Hover-reveal dek on the supporting cards (collapsed by default). */
.rvw-fx__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}

.rvw-fx:hover .rvw-fx__reveal,
.rvw-fx:focus-within .rvw-fx__reveal {
  grid-template-rows: 1fr;
}

.rvw-fx__revealin {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-med) var(--ease-out) 60ms, transform var(--dur-med) var(--ease-out) 60ms;
}

.rvw-fx:hover .rvw-fx__revealin,
.rvw-fx:focus-within .rvw-fx__revealin {
  opacity: 1;
  transform: none;
}

/* Foot: creator identity + date range or CTA, above a hairline. */
.rvw-fx__foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  min-width: 0;
}

.rvw-fx__avatar {
  flex: none;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rvw-fx__who {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rvw-fx__dates {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.36em;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
}

.rvw-fx__dates svg {
  width: 1.05em;
  height: 1.05em;
  color: var(--green-300);
}

.rvw-fx__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: #fff;
}

.rvw-fx__cta svg {
  width: 1em;
  height: 1em;
  transition: transform var(--dur-med) var(--ease-out);
}

.rvw-fx:hover .rvw-fx__cta svg {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {

  .rvw-fx,
  .rvw-fx__img,
  .rvw-fx__glow,
  .rvw-fx__scrim,
  .rvw-fx__reveal,
  .rvw-fx__revealin,
  .rvw-fx__cta svg {
    transition: none;
  }
}

/* ========================= 3 · Explorer ========================= */
.tr-ex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

.rvw-ex {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  height: 100%;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.rvw-ex:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.rvw-ex__creator {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0.95rem;
}

.tr-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-100);
  color: var(--green-700);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.rvw-ex__cmeta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rvw-ex__cname {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-heading);
  line-height: 1.2;
}

.rvw-ex__cpersona {
  font-size: 0.76rem;
  color: var(--coral-600);
  font-weight: 500;
}

.rvw-ex__style {
  margin-left: auto;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--green-700);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  padding: 0.28em 0.7em;
  border-radius: var(--radius-pill);
}

.rvw-ex__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--green-100);
}

.rvw-ex__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

.rvw-ex:hover .rvw-ex__media img {
  transform: scale(1.06);
}

.rvw-ex__loc {
  position: absolute;
  left: 0.65rem;
  bottom: 0.65rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  background: rgba(2, 48, 32, 0.62);
  color: #fff;
  backdrop-filter: blur(4px);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.32em 0.66em;
  border-radius: var(--radius-pill);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.rvw-ex__loc svg {
  width: 0.95em;
  height: 0.95em;
}

.rvw-ex:hover .rvw-ex__loc {
  opacity: 0;
}

.rvw-ex__peek {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 0.95rem 1rem;
  background: linear-gradient(180deg, rgba(2, 48, 32, 0.78), rgba(2, 22, 15, 0.92));
  color: #fff;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  pointer-events: none;
}

.rvw-ex:hover .rvw-ex__peek {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.rvw-ex__peekhead {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral-300);
  margin-bottom: 0.5rem;
}

.rvw-ex__day {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.82rem;
  line-height: 1.35;
  margin-bottom: 0.3rem;
}

.rvw-ex__day>span:last-child {
  color: rgba(255, 255, 255, 0.94);
}

.rvw-ex__daylabel {
  flex: none;
  font-weight: 700;
  color: #fff;
  width: 2.9rem;
}

.rvw-ex__meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.rvw-ex__metachip {
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 0.2em 0.55em;
  border-radius: var(--radius-pill);
}

/* Solid orange, matching the Homepage nav CTA / primary buttons. */
.rvw-ex__qcta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  margin-top: 0.7rem;
  background: var(--coral-500);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.5em 0.95em;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-coral);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.rvw-ex__qcta:hover {
  background: var(--coral-600);
  transform: translateY(-1px);
}

.rvw-ex__qcta svg {
  width: 1em;
  height: 1em;
}

.rvw-ex__body {
  padding: 0.8rem 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.rvw-ex__title {
  margin: 0;
  font-weight: 700;
  font-size: 1.04rem;
  color: var(--text-heading);
  letter-spacing: -0.01em;
  line-height: 1.28;
}

.rvw-ex__desc {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rvw-ex__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.rvw-ex__tag {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--green-700);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  padding: 0.22em 0.55em;
  border-radius: var(--radius-pill);
}

.rvw-ex__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
}

.rvw-ex__days {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;
}

.rvw-ex__days svg {
  width: 1em;
  height: 1em;
}

/* shared rating cluster */
.tr-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
}

.tr-rating__stars {
  display: inline-flex;
  color: var(--coral-500);
}

.tr-rating__stars .ab-star {
  width: 14px;
  height: 14px;
}

.tr-rating__stars .ab-star.is-empty {
  color: var(--border-strong);
}

.tr-rating__val {
  font-weight: 700;
  color: var(--text-heading);
}

.tr-rating__count {
  color: var(--text-muted);
}

/* ====================== 4 · Interactive map ====================== */
.rvw-map-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

.rvw-map-panel {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, var(--green-50), var(--cream-deep));
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  min-height: 26rem;
}

.rvw-map-bg {
  position: absolute;
  inset: 0;
}

@keyframes rvw-drift {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(2%, -2.5%);
  }
}

@keyframes rvw-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(253, 124, 80, 0.55);
  }

  100% {
    box-shadow: 0 0 0 14px rgba(253, 124, 80, 0);
  }
}

.rvw-map-land {
  position: absolute;
  border-radius: 50%;
  background: var(--green-200);
  opacity: 0.7;
  filter: blur(2px);
}

@media (prefers-reduced-motion: no-preference) {
  .rvw-map-land {
    animation: rvw-drift 18s var(--ease-out) infinite;
  }
}

.rvw-map-dots {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: radial-gradient(var(--green-200) 1px, transparent 1.4px);
  background-size: 22px 22px;
}

.rvw-map-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.rvw-map-paths path {
  fill: none;
  stroke: var(--coral-500);
  stroke-width: 0.5;
  stroke-dasharray: 1.4 1.4;
  opacity: 0.85;
}

.rvw-pin {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 3;
}

.rvw-pin__dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--green-600);
  border: 2.5px solid var(--white);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  padding: 0;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.rvw-pin__dot:hover {
  transform: translate(-50%, -50%) scale(1.25);
}

.rvw-pin[data-on="true"] .rvw-pin__dot {
  background: var(--coral-500);
  transform: translate(-50%, -50%) scale(1.5);
  animation: rvw-pulse 1.2s var(--ease-out) infinite;
}

.rvw-pin[data-dim="true"] .rvw-pin__dot {
  background: var(--green-300);
  opacity: 0.5;
}

.rvw-pin__tip {
  position: absolute;
  transform: translate(-50%, -148%);
  white-space: nowrap;
  background: var(--green-900);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.28em 0.6em;
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.rvw-pin[data-on="true"] .rvw-pin__tip,
.rvw-pin__dot:hover+.rvw-pin__tip {
  opacity: 1;
}

.rvw-map-legend {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(253, 250, 241, 0.85);
  backdrop-filter: blur(6px);
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-heading);
}

.rvw-map-legend svg {
  color: var(--coral-500);
  width: 1em;
  height: 1em;
}

.rvw-map-side {
  display: flex;
  flex-direction: column;
}

.rvw-map-listhead {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
}

.rvw-mlist {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 24rem;
  overflow: auto;
  scrollbar-width: thin;
  padding-right: 0.25rem;
}

.rvw-mcard {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.rvw-mcard:hover {
  background: var(--white);
}

.rvw-mcard[data-on="true"] {
  background: var(--white);
  border-color: var(--coral-200);
  box-shadow: var(--shadow-sm);
}

.rvw-mcard[data-dim="true"] {
  opacity: 0.4;
}

.rvw-mcard__thumb {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-sm);
  background-image: var(--rvw-bg);
  background-size: cover;
  background-position: center;
}

.rvw-mcard__meta {
  min-width: 0;
}

.rvw-mcard__title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-heading);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rvw-mcard__sub {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.rvw-mcard__loc {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.rvw-mcard__loc svg {
  width: 1em;
  height: 1em;
}

.rvw-mcard__days {
  color: var(--text-muted);
}

/* ========================== 5 · Guides ========================== */
.rvw-gf {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

.rvw-gf:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.rvw-gf__media {
  position: relative;
  min-height: 22rem;
  overflow: hidden;
}

.rvw-gf__img {
  position: absolute;
  inset: 0;
  background-image: var(--rvw-bg);
  background-size: cover;
  background-position: center;
  transition: transform var(--dur-slow) var(--ease-out);
}

.rvw-gf:hover .rvw-gf__img {
  transform: scale(1.05);
}

.rvw-gf__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(2, 48, 32, 0.10), transparent 55%);
  transition: background var(--dur-slow) var(--ease-out);
}

.rvw-gf:hover .rvw-gf__tint {
  background: linear-gradient(120deg, rgba(253, 124, 80, 0.22), transparent 60%);
}

.rvw-gf__badge {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--coral-500);
  padding: 0.34em 0.8em;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-coral);
}

.rvw-gf__body {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rvw-gf__top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.8rem;
}

.rvw-gcat {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral-600);
}

.rvw-gread {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.rvw-gread svg {
  width: 1em;
  height: 1em;
}

.rvw-gf__title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  line-height: 1.18;
  color: var(--text-heading);
  text-wrap: balance;
}

.rvw-gf__excerpt {
  margin: 0.85rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.rvw-gf__author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.rvw-gf__author svg {
  color: var(--green-600);
  width: 1em;
  height: 1em;
}

.rvw-gf__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  color: var(--coral-600);
  margin-top: 1.25rem;
  /* Space is reserved permanently so revealing it on hover never changes the
     card height (no layout shift / jerk). Only opacity + transform animate. */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

.rvw-gf:hover .rvw-gf__cta,
.rvw-gf:focus-visible .rvw-gf__cta {
  opacity: 1;
  transform: none;
}

.rvw-gf__cta svg {
  width: 1em;
  height: 1em;
}

.tr-guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

.rvw-gc {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.rvw-gc:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(253, 124, 80, 0.16), var(--shadow-lg);
}

.rvw-gc__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.rvw-gc__media div {
  width: 100%;
  height: 100%;
  background-image: var(--rvw-bg);
  background-size: cover;
  background-position: center;
  transition: transform var(--dur-slow) var(--ease-out);
}

.rvw-gc:hover .rvw-gc__media div {
  transform: scale(1.07);
}

.rvw-gc__body {
  padding: 1.05rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}

.rvw-gc__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.rvw-gc__title {
  margin: 0;
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--text-heading);
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease-out);
}

.rvw-gc:hover .rvw-gc__title {
  color: var(--coral-600);
}

.rvw-gc__excerpt {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rvw-gc__author {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.84rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.rvw-gc__author svg {
  color: var(--green-600);
  width: 1em;
  height: 1em;
}

.tr-guides-cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* ===================== 6 · Explore by persona ===================== */
.rvw-persona-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}

.rvw-pbtns {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.rvw-pbtn {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  font-family: inherit;
  transition: all var(--dur-fast) var(--ease-out);
}

.rvw-pbtn:hover {
  border-color: var(--coral-200);
}

.rvw-pbtn[data-on="true"] {
  background: var(--green-900);
  border-color: var(--green-900);
  box-shadow: var(--shadow-md);
}

.rvw-pbtn__ic {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 1.2rem;
  transition: all var(--dur-fast) var(--ease-out);
}

.rvw-pbtn__ic svg {
  width: 1.2rem;
  height: 1.2rem;
}

.rvw-pbtn[data-on="true"] .rvw-pbtn__ic {
  background: var(--coral-500);
  color: #fff;
}

.rvw-pbtn__txt {
  min-width: 0;
}

.rvw-pbtn__name {
  display: block;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text-heading);
  line-height: 1.2;
}

.rvw-pbtn[data-on="true"] .rvw-pbtn__name {
  color: #fff;
}

.rvw-pbtn__blurb {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.rvw-pbtn[data-on="true"] .rvw-pbtn__blurb {
  color: var(--green-200);
}

.rvw-pbtn__arrow {
  margin-left: auto;
  color: var(--text-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: all var(--dur-fast) var(--ease-out);
}

.rvw-pbtn__arrow svg {
  width: 1em;
  height: 1em;
}

.rvw-pbtn[data-on="true"] .rvw-pbtn__arrow {
  color: var(--coral-300);
  opacity: 1;
  transform: none;
}

.rvw-ppanel-wrap {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  min-height: 22rem;
}

@keyframes rvw-swap {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.rvw-ppanel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  animation: rvw-swap var(--dur-med) var(--ease-out);
}

.rvw-ppanel[hidden] {
  display: none;
}

.rvw-ppanel__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.rvw-ppanel__ic {
  flex: none;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: var(--radius-md);
  background: var(--coral-50);
  color: var(--coral-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.rvw-ppanel__ic svg {
  width: 1.4rem;
  height: 1.4rem;
}

.rvw-ppanel__name {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text-heading);
  letter-spacing: -0.01em;
}

.rvw-ppanel__blurb {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.rvw-pblock__label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral-600);
  margin-bottom: 0.55rem;
}

.rvw-pblock__label svg {
  width: 1em;
  height: 1em;
}

.rvw-pitem {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.92rem;
  color: var(--text-primary);
}

.rvw-pitem:last-child {
  border-bottom: none;
}

.rvw-pitem svg {
  flex: none;
  width: 1em;
  height: 1em;
}

.rvw-pitem__ic--coral {
  color: var(--coral-500);
}

.rvw-pitem__ic--green {
  color: var(--green-600);
}

.rvw-pitem__strong {
  font-weight: 600;
  color: var(--text-heading);
}

.rvw-pdests {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rvw-pdest {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--green-700);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  padding: 0.3em 0.75em;
  border-radius: var(--radius-pill);
}

/* ====================== 7 · Community strip ====================== */
.tr-comm {
  background: var(--green-950);
  overflow: hidden;
}

.tr-comm__head {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto 2.25rem;
}

.tr-comm__title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.16;
  color: var(--cream);
}

.tr-comm__sub {
  margin: 0.85rem auto 0;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--green-100);
}

.rvw-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.rvw-strip {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  width: max-content;
  padding: 0.5rem 0;
  will-change: transform;
}

.rvw-snap {
  position: relative;
  flex: none;
  width: 16rem;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* own compositing layer so the rounded overflow clip holds under the
     marquee's animated (transformed) ancestor — keeps all 4 corners even */
  transform: translateZ(0);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-med) var(--ease-out);
}

.rvw-snap:hover {
  transform: translateY(-6px) scale(1.015);
}

.rvw-snap__img {
  aspect-ratio: 4 / 5;
  background-image: var(--rvw-bg);
  background-size: cover;
  background-position: center;
}

.rvw-snap__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.85rem 0.95rem;
  background: linear-gradient(180deg, transparent, rgba(2, 22, 15, 0.82));
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
}

.rvw-snap__pin {
  color: var(--green-300);
  width: 1em;
  height: 1em;
}

.rvw-snap__where {
  font-weight: 700;
}

.rvw-snap__who {
  opacity: 0.7;
  margin-left: auto;
}

/* ============================ 8 · CTA ============================ */
.tr-ctasec {
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter);
}

.rvw-cta {
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: var(--gradient-sunset);
  border-radius: var(--radius-2xl);
  padding: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  box-shadow: var(--shadow-coral);
}

@keyframes rvw-cta-drift {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-3%, 4%);
  }
}

.rvw-cta-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .rvw-cta-glow {
    animation: rvw-cta-drift 14s var(--ease-out) infinite;
  }
}

.rvw-cta-glow--1 {
  width: 26rem;
  height: 26rem;
  right: -6rem;
  top: -10rem;
  background: radial-gradient(circle, rgba(253, 235, 66, 0.45), transparent 60%);
}

.rvw-cta-glow--2 {
  width: 18rem;
  height: 18rem;
  left: -5rem;
  bottom: -8rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 65%);
}

.rvw-cta__inner {
  position: relative;
}

.rvw-cta__title {
  margin: 0 auto;
  max-width: 26ch;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  line-height: 1.14;
  color: #fff;
  text-wrap: balance;
}

.rvw-cta__body {
  margin: 0.9rem auto 1.8rem;
  max-width: 32rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.94);
}

.rvw-cta__btns {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
}

.rvw-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.rvw-cta-btn svg {
  width: 1em;
  height: 1em;
}

.rvw-cta-btn--solid {
  background: var(--white);
  color: var(--coral-600);
  border: none;
  box-shadow: 0 10px 26px rgba(2, 22, 15, 0.18);
}

.rvw-cta-btn--solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(2, 22, 15, 0.24);
}

.rvw-cta-btn--ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.rvw-cta-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.about-us-hero-section-btn1 {
  /* background-color: var(--cream); */
}

.about-us-hero-section-btn1:hover {
  background-color: var(--green-50);
}

/* ============================================================
   TRIPS LISTING (v2) — dual-state discovery
   Faithful port of the Design System "Trips Listing" (TripsListing.jsx +
   TripsListingCard.jsx). Hero · enriched listing cards · restyled guides.
   ============================================================ */

/* ---- swap / blob motion ---- */
@keyframes rvw-tl-swap {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.rvw-swap {
  animation: rvw-tl-swap 460ms var(--ease-out);
}

@keyframes rvw-th-fa {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(2.5%, -3%) scale(1.06);
  }
}

@keyframes rvw-th-fb {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-3%, 2.5%) scale(1.08);
  }
}

.rvw-tlblob {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .rvw-tlblob-a {
    animation: rvw-th-fa 13s var(--ease-out) infinite;
  }

  .rvw-tlblob-b {
    animation: rvw-th-fb 16s var(--ease-out) infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rvw-swap {
    animation: none;
  }
}

/* ---- Hero (dual) ---- */
.rvw-tlhero {
  position: relative;
  overflow: hidden;
  background: var(--cream);
}

.rvw-tlhero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rvw-tlhero__grad {
  position: absolute;
  inset: 0;
  background: radial-gradient(1100px 460px at 82% -12%, var(--green-100), transparent 60%),
    radial-gradient(760px 420px at 4% 0%, var(--green-50), transparent 64%);
}

.rvw-tlhero__inner {
  position: relative;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(2.25rem, 4vw, 3rem);
  text-align: center;
}

.rvw-tlhero__title {
  margin: 0 auto;
  max-width: 20ch;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(2.1rem, 4.4vw, 3.25rem);
  line-height: 1.07;
  color: var(--text-heading);
  text-wrap: balance;
}

.rvw-tlhero__title span {
  color: var(--green-700);
}

.rvw-tlhero__sub {
  margin: 1.05rem auto 0;
  max-width: 44rem;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--text-secondary);
}

.rvw-tlhero__search {
  margin: 1.9rem auto 0;
  max-width: 42rem;
}

.rvw-tlhero__dests {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.rvw-tlhero__deslabel {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rvw-dpill[data-on="true"] {
  background: var(--green-900);
  border-color: var(--green-900);
  color: #fff;
}

.rvw-dpill--sm {
  font-size: 0.82rem;
  padding: 0.26rem 0.7rem 0.26rem 0.34rem;
}

.rvw-dpill--sm .rvw-dpill__img {
  width: 1.25rem;
  height: 1.25rem;
}

/* selected-location chip */
.rvw-locchip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--green-50);
  border: 1px solid var(--green-200);
  color: var(--green-800);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.5rem 0.4rem 0.95rem;
  font-weight: 700;
  font-size: 0.95rem;
}

.rvw-locchip .rv-icon {
  width: 1.05em;
  height: 1.05em;
}

.rvw-locchip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: none;
  border-radius: 50%;
  background: var(--white);
  color: var(--green-700);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.rvw-locchip__x:hover {
  background: var(--green-600);
  color: #fff;
  transform: rotate(90deg);
}

.rvw-locchip__x svg {
  width: 1.05em;
  height: 1.05em;
}

.rvw-tl-locrow {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  margin-bottom: 0;
}

#tl-search-form .rv-search__btn {
  pointer-events: none;
}

/* filter chips (style) */
.rvw-fchip {
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-secondary);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.95rem;
  transition: all var(--dur-fast) var(--ease-out);
}

.rvw-fchip:hover {
  border-color: var(--green-300);
  color: var(--text-heading);
}

.rvw-fchip[aria-pressed="true"] {
  background: var(--green-900);
  border-color: var(--green-900);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* ---- Listing heading row ---- */
.rvw-tl-sec {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--cream-deep);
}

.rvw-tl-headrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}

.rvw-tl-head {
  max-width: 44rem;
}

.rvw-tl-head__titlerow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.rvw-tl-head h2 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.16;
  color: var(--text-heading);
}

.rvw-tl-head__count {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--green-700);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  padding: 0.3em 0.7em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.rvw-tl-head__sub {
  margin: 0.8rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.rvw-tl-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.rvw-tlgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
  /* Every row takes the height of the tallest card, so all cards match. */
  grid-auto-rows: 1fr;
}

/* ---- Trip card (v2) — image masthead + title/location + creator row ---- */
.rvw-tl {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  height: 100%;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.rvw-tl:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.rvw-tl__cardlink {
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* image masthead — content lives below */
.rvw-tl__media {
  position: relative;
  flex: none;
  aspect-ratio: 16 / 8.5;
  overflow: hidden;
  background: var(--green-100);
}

.rvw-tl__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

.rvw-tl:hover .rvw-tl__media img {
  transform: scale(1.05);
}

.rvw-tl__dayspill {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  background: var(--coral-500);
  padding: 0.4em 0.9em;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-coral);
}

.rvw-tl__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem 1.25rem 1.25rem;
}

.rvw-tl__title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text-heading);
  font-size: 1.15rem;
  text-wrap: balance;
  /* Dynamic: text sizes to its length (no fixed reserve), and the title box
     grows to absorb the card's slack — so location + meta are bottom-anchored
     and the location sits in the same spot no matter the title length. */
  flex: 1 1 auto;
}

.rvw-tl__title a {
  color: inherit;
  text-decoration: none;
}

.rvw-tl__title a:hover {
  color: var(--green-700);
}

.rvw-tl__loc {
  display: inline-flex;
  align-items: center;
  gap: 0.34em;
  margin-top: 0;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-secondary);
  /* 8px above the divider (the meta row's top border). */
  padding: 8px 0;
}

.rvw-tl__loc .rv-icon {
  width: 1em;
  height: 1em;
  color: var(--green-600);
}

/* creator row — avatar + name + trip date range */
.rvw-tl__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* No auto margin: the flexible title above pushes this to the bottom, so the
     location stays glued to this divider on every card. */
  margin-top: 0;
  padding-top: 1rem;
  min-width: 0;
  border-top: 1px solid var(--border-subtle);
}

.rvw-tl__avatar {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-800);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rvw-tl__creator {
  min-width: 0;
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rvw-tl__dates {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.36em;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--green-700);
}

.rvw-tl__dates .rv-icon {
  width: 1.05em;
  height: 1.05em;
  color: var(--green-600);
}

/* ---- Guides (v2) ---- */
.rvw-tg-sec {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: var(--cream);
}

.rvw-tg-f {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

.rvw-tg-f:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.rvw-tg-f__media {
  position: relative;
  min-height: 21rem;
  overflow: hidden;
}

.rvw-tg-f__img {
  position: absolute;
  inset: 0;
  background-image: var(--rvw-bg);
  background-size: cover;
  background-position: center;
  transition: transform var(--dur-slow) var(--ease-out);
}

.rvw-tg-f:hover .rvw-tg-f__img {
  transform: scale(1.05);
}

.rvw-tg-f__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(2, 48, 32, 0.10), transparent 55%);
  transition: background var(--dur-slow) var(--ease-out);
}

.rvw-tg-f:hover .rvw-tg-f__tint {
  background: linear-gradient(120deg, rgba(31, 90, 58, 0.22), transparent 60%);
}

.rvw-tg-f__badge {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--green-600);
  padding: 0.34em 0.8em;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

.rvw-tg-f__body {
  padding: clamp(1.5rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rvw-tg-f__top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.8rem;
}

.rvw-tg-f__title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  line-height: 1.18;
  color: var(--text-heading);
  text-wrap: balance;
}

.rvw-tg-f__excerpt {
  margin: 0.85rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.rvw-tg-f__author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.rvw-tg-f__author .rv-icon {
  width: 1em;
  height: 1em;
  color: var(--green-600);
}

/* Reserved-space reveal (opacity/transform only) — keeps the card height
   constant on hover so it never grows/reflows (no jerky flicker). */
.rvw-tg-f__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  color: var(--green-700);
  margin-top: 1.2rem;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

.rvw-tg-f:hover .rvw-tg-f__cta {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.rvw-tg-f__cta .rv-icon {
  width: 1em;
  height: 1em;
}

.rvw-tgcat {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-700);
}

.rvw-tgread {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.rvw-tgread .rv-icon {
  width: 1em;
  height: 1em;
}

.rvw-tg-c {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.rvw-tg-c:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(31, 90, 58, 0.14), var(--shadow-lg);
}

.rvw-tg-c__media {
  aspect-ratio: 16/10;
  overflow: hidden;
}

.rvw-tg-c__media div {
  width: 100%;
  height: 100%;
  background-image: var(--rvw-bg);
  background-size: cover;
  background-position: center;
  transition: transform var(--dur-slow) var(--ease-out);
}

.rvw-tg-c:hover .rvw-tg-c__media div {
  transform: scale(1.07);
}

.rvw-tg-c__body {
  padding: 1.05rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}

.rvw-tg-c__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.rvw-tg-c__title {
  margin: 0;
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.3;
  color: var(--text-heading);
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease-out);
}

.rvw-tg-c:hover .rvw-tg-c__title {
  color: var(--green-700);
}

.rvw-tg-c__excerpt {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rvw-tg-c__foot {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.84rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.rvw-tg-c__foot .rv-icon {
  width: 1em;
  height: 1em;
  color: var(--green-600);
}

.rvw-tg-c.is-hidden {
  display: none;
}

.rvw-tg-cta {
  text-align: center;
  margin-top: 2.5rem;
}

.rvw-tg-cta.is-hidden {
  display: none;
}

/* ============================================================
 * TRIP ITINERARY PAGE
 * Faithful port of the design-system "Trip Itinerary" detail view.
 * Breadcrumb · Hero · Summary · Day-by-Day timeline · Sidebar · Related.
 * ============================================================ */

.it-crumbstrip {
  background: var(--cream);
  padding-top: 1.5rem;
}

.rvw-crumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.rvw-crumb a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
}

.rvw-crumb a:hover {
  color: var(--green-700);
}

.rvw-crumb .rv-icon {
  width: 0.9em;
  height: 0.9em;
  opacity: 0.6;
}

.rvw-crumb b {
  color: var(--text-heading);
  font-weight: 700;
}

.it-hero {
  background: var(--cream);
  padding: 1.1rem 0 clamp(2rem, 4vw, 3rem);
}

.rvw-ihero {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}

.rvw-ihero__img {
  position: absolute;
  inset: 0;
  background-image: var(--rvw-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

.rvw-ihero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 22, 15, 0.05) 0%, rgba(2, 22, 15, 0.30) 48%, rgba(2, 22, 15, 0.86) 100%);
}

.rvw-ihero__body {
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 4vw, 3rem);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(22rem, 46vw, 32rem);
}

.it-hero__chips {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.rvw-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  background: rgba(2, 48, 32, 0.5);
  backdrop-filter: blur(4px);
  padding: 0.3em 0.7em;
  border-radius: var(--radius-pill);
}

.rvw-chip .rv-icon {
  width: 0.95em;
  height: 0.95em;
}

.rvw-pill-coral {
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  background: var(--green-600);
  padding: 0.3em 0.75em;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

.it-hero__title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.08;
  color: #fff;
  max-width: 100%;
  text-wrap: balance;
}

.it-hero__creator {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.1rem;
}

.it-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--green-600);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 0 0 2.5px var(--cream), 0 0 0 4.5px var(--coral-500);
}

.it-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.it-avatar--lg {
  width: 48px;
  height: 48px;
}

.it-creator__name {
  font-weight: 700;
  color: #fff;
  font-size: 0.98rem;
}

.it-creator__role {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
}

.it-creator__name--dark {
  color: var(--text-heading);
}

.it-creator__role--muted {
  color: var(--text-muted);
}

.it-hero__stats {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-top: 1.3rem;
}

.rvw-hstat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.94);
}

.rvw-hstat .rv-icon {
  width: 1.05em;
  height: 1.05em;
  color: var(--green-300);
}

.it-body {
  background: var(--cream);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.rvw-igrid {
  display: grid;
  grid-template-columns: 1fr 21rem;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.rvw-aside {
  position: sticky;
  top: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.it-summary {
  margin: 0 0 2.5rem;
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 100%;
}

.rvw-sectitle {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  color: var(--text-heading);
}

.rvw-itinhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.3rem;
}

.rvw-tl-wrap {
  position: relative;
}

.rvw-day {
  position: relative;
  padding-left: 3.4rem;
  padding-bottom: 2.2rem;
}

/* .rvw-day::before {
  content: "";
  position: absolute;
  left: 1.18rem;
  top: 2.6rem;
  bottom: -0.4rem;
  width: 2px;
  background: var(--border-subtle);
} */

.rvw-day:last-child::before {
  display: none;
}

.rvw-daynum {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--green-900);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  z-index: 1;
  box-shadow: var(--shadow-sm);
}

.rvw-daycard {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.rvw-daycard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.rvw-dayhead {
  display: flex;
  gap: 1rem;
  padding: 1.3rem 1.6rem;
  align-items: center;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.rvw-daytitle {
  margin: 0;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: uppercase;
}

.rvw-daychev {
  margin-left: auto;
  flex: none;
  align-self: center;
  color: var(--text-muted);
  display: inline-flex;
  transition: transform var(--dur-med) var(--ease-out);
}

.rvw-daycard[data-open="false"] .rvw-daychev {
  transform: rotate(-90deg);
}

.rvw-daybody {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}

.rvw-daycard[data-open="true"] .rvw-daybody {
  grid-template-rows: 1fr;
}

.rvw-daybodyin {
  overflow: hidden;
  min-height: 0;
}

.it-acts {
  padding: 0 1.6rem 0.4rem;
}

/* Empty-day placeholder — shown when a trip day has no scheduled activities. */
.rvw-day-empty {
  margin: 0;
  padding: 1.1rem 0 1.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
}

.rvw-nearpill {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--green-700);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  padding: 0.25em 0.7em;
  border-radius: var(--radius-pill);
}

/* Clickable nearby pill (link to Google Maps) — same look, add affordance. */
a.rvw-nearpill {
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

a.rvw-nearpill:hover {
  background: var(--green-100);
  border-color: var(--green-200);
  color: var(--green-900);
}

/* "View more on Google Maps" — inline link after the first 5 nearby pills. */
.rvw-near__more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--green-700);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.rvw-near__more:hover {
  color: var(--green-900);
}

.rvw-near__more .rv-icon {
  width: 0.9em;
  height: 0.9em;
}

.rvw-seg2 {
  display: block;
  padding: 1.8rem 0;
  border-top: 1px solid var(--border-subtle);
}

.rvw-seg2:first-child {
  border-top: none;
}

.rvw-seg2__row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
}

.rvw-seg2__img {
  flex: none;
  width: 11.5rem;
  height: 11.5rem;
  align-self: center;
  border-radius: var(--radius-lg);
  background-image: var(--rvw-bg);
  background-size: cover;
  background-position: center;
}

.rvw-seg2__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.rvw-seg2__kicker {
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.rvw-seg2__toprow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  margin-bottom: 10px;
}

.rvw-seg2__title {
  margin: 0;
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14.4px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.rvw-seg2__title .rv-icon {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--green-600);
  margin-top: 1px;
  /* optically align pin with the first text line's cap height */
}

.rvw-seg2__time {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--green-700);
  margin-bottom: 16px;
}

.rvw-seg2__time .rv-icon {
  width: 17px;
  height: 17px;
  flex: none;
}

.rvw-seg2__near {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--green-700);
}

.rvw-seg2__nearhead {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.rvw-seg2__nearhead .rv-icon {
  width: 17px;
  height: 17px;
  flex: none;
}

.rvw-revpills {
  display: flex;
  gap: 0.45rem;
  flex: none;
  align-items: center;
  justify-content: flex-end;
}

.rvw-revpill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.34rem 0.7rem;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.rvw-revpill:hover {
  background: var(--cream-deep);
  border-color: var(--border-strong);
}

.rvw-revpill[aria-pressed="true"] {
  background: var(--green-900);
  border-color: var(--green-900);
  color: #fff;
}

.rvw-revpill__rate {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  font-weight: 700;
  opacity: 0.9;
}

.rvw-revpill[aria-pressed="true"] .rvw-gmark {
  border-color: rgba(255, 255, 255, 0.5);
}

/* Placeholder pill for a source with no reviews: same logo + star, an em-dash
   rating, and non-interactive (no modal to open). */
.rvw-revpill--empty {
  cursor: default;
}

.rvw-revpill--empty:hover {
  background: var(--white);
  border-color: var(--border-subtle);
}

.rvw-revpill--empty .rvw-revpill__rate {
  opacity: 0.55;
}

.rvw-mark14 {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
}

.rvw-revpill .rvw-mark14 {
  width: 13px;
  height: 13px;
}

.rvw-gmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  flex: none;
}

/* Official colored Google "G" logo fills its mark container (no circle chrome). */
.rvw-gmark svg,
.rvw-tl__gmark svg,
.rvw-g2gmark svg,
.rvw-rr-gmark svg,
.gd-seg .rvw-g2gmark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.rvw-segdesc-wrap {
  position: relative;
}

.rvw-segdesc {
  position: relative;
}

.rvw-segdesc__txt {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--text-secondary);
  overflow: hidden;
  max-height: 3.25em;
  transition: max-height var(--dur-slow) var(--ease-out);
}

.rvw-segdesc[data-open="true"] .rvw-segdesc__txt {
  max-height: 44em;
}

/* Short descriptions: no clamp, no fade, no "Continue reading". */
.rvw-segdesc.is-full .rvw-segdesc__txt {
  max-height: none;
}

/* Review text read more/less — clamp long copy, reveal on toggle. */
.rvw-rev__textwrap {
  overflow: hidden;
  max-height: 6.6em;
  transition: max-height var(--dur-slow) var(--ease-out);
}

.rvw-rev__textwrap[data-open="true"],
.rvw-rev__textwrap.is-full {
  max-height: 60em;
}

.rvw-rev__more {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--green-600);
  transition: color var(--dur-fast) var(--ease-out);
}

.rvw-rev__more:hover {
  color: var(--green-700);
}

.rvw-segdesc__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.15em;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--white));
}

.rvw-segdesc[data-open="true"] .rvw-segdesc__fade {
  display: none;
}

.rvw-readmore {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.rvw-readmore:hover {
  color: var(--text-secondary);
}

.rvw-segrevbox {
  margin-top: 0.7rem;
  background: var(--cream-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.3rem 0.85rem 0.4rem;
}

.rvw-segrevlist {
  display: flex;
  flex-direction: column;
  animation: rvw-segfade 240ms var(--ease-out);
}

@keyframes rvw-segfade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.rvw-rev {
  padding: 0.95rem 0;
  border-top: 1px solid var(--border-subtle);
}

.rvw-rev:first-child {
  border-top: none;
}

.rvw-rev__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.rvw-rev__av {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
}

.rvw-rev__id {
  min-width: 0;
  flex: 1;
}

.rvw-rev__name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.2;
}

.rvw-rev__meta {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.rvw-revsrc {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  flex: none;
}

.rvw-rev__stars {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0.4rem;
}

.rvw-rev__stars .rvw-stars {
  display: inline-flex;
  align-items: center;
}

.rvw-rev__stars .ab-star {
  width: 13px;
  height: 13px;
}

.rvw-rev__stars .ab-star.is-full {
  color: #FFC53D;
}

.rvw-rev__stars .ab-star.is-empty {
  color: #E4E2D6;
}

.rvw-rev__when {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.rvw-rev__text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---- Reviews modal (opened from the per-activity review pills) ---- */
.rvw-revmodal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(2, 22, 15, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: rvw-segfade var(--dur-fast) var(--ease-out);
}

.rvw-revmodal {
  width: min(34rem, 100%);
  max-height: min(80vh, 42rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.rvw-revmodal__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}

.rvw-revmodal__src {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--cream-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rvw-revmodal__src img,
.rvw-revmodal__src svg,
.rvw-revmodal__src .rvw-gmark {
  width: 17px;
  height: 17px;
  display: block;
}

.rvw-revmodal__title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.25;
}

.rvw-revmodal__sub {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.rvw-revmodal__sub svg {
  flex: none;
}

.rvw-revmodal__close {
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.rvw-revmodal__close:hover {
  background: var(--cream-deep);
  color: var(--text-heading);
}

.rvw-revmodal__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Reviews always show in full inside the modal (no clamp / read-more). */
.rvw-revmodal__list .rvw-rev__textwrap {
  max-height: none;
}

.rvw-revmodal__list .rvw-rev__more {
  display: none;
}

/* "View All Reviews on Google" footer — links out to the full Google list. */
.rvw-revmodal__foot {
  flex: none;
  padding: 0.9rem 1.25rem 1.1rem;
  border-top: 1px solid var(--border-subtle);
}

/* Reuses the site button component (.rv-btn--secondary); only stretch to full
   footer width so it reads as the modal's primary action. */
.rvw-revmodal__gall {
  width: 100%;
}

.rvw-card {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.it-card {
  padding: 1.25rem;
}

.rvw-snapgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

.rvw-snapcell {
  background: var(--cream-deep);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.rvw-snapcell .n {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.02em;
}

.rvw-snapcell .l {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

.rvw-snapcell .l .rv-icon {
  width: 0.95em;
  height: 0.95em;
  color: var(--green-600);
}

.it-srows {
  margin-top: 1rem;
}

.rvw-srow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.92rem;
}

.rvw-srow:last-child {
  border-bottom: none;
}

.rvw-srow span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
}

.rvw-srow .rv-icon {
  width: 1.05em;
  height: 1.05em;
  color: var(--green-600);
}

.rvw-srow b {
  color: var(--text-heading);
  font-weight: 700;
}

.it-note {
  margin-top: 0.85rem;
}

.rvw-daynote {
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  color: var(--green-800);
}

.rvw-daynote__head {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--green-700);
}

.rvw-daynote__head .rv-icon {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--green-600);
}

.rvw-daynote__chev {
  margin-left: auto;
  display: inline-flex;
  transition: transform var(--dur-med) var(--ease-out);
}

.rvw-daynote[data-open="true"] .rvw-daynote__chev {
  transform: rotate(180deg);
}

/* Grid-rows expand/collapse: animates to the panel's exact content height, so
   the motion is smooth and symmetric with no fixed-max-height lag or jump. */
.rvw-daynote__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}

.rvw-daynote[data-open="true"] .rvw-daynote__panel {
  grid-template-rows: 1fr;
}

.rvw-daynote__panelin {
  overflow: hidden;
  min-height: 0;
}

.rvw-daynote__panel p {
  margin: 0.55rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--green-800);
}

.rvw-actbtns {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1.9rem;
}

.it-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  height: 48px;
  padding: 0 1.25rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid transparent;
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.it-btn .rv-icon {
  width: 1.15em;
  height: 1.15em;
}

.it-btn--sm {
  font-size: 0.875rem;
  height: 40px;
  padding: 0 0.95rem;
}

.rvw-actbtns .it-btn {
  width: 92%;
}

.it-btn--primary {
  background: var(--coral-500);
  color: var(--text-on-coral);
  box-shadow: var(--shadow-coral);
}

.it-btn--primary:hover {
  background: var(--coral-600);
  transform: translateY(-1px);
}

.it-btn--secondary {
  background: var(--green-600);
  color: var(--cream);
}

.it-btn--secondary:hover {
  background: var(--green-700);
  transform: translateY(-1px);
}

.it-btn--full {
  width: 100%;
}

.rvw-phhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.rvw-phhead__t {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-heading);
}

.rvw-seglink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--green-700);
  transition: color var(--dur-fast) var(--ease-out);
}

.rvw-seglink:hover {
  color: var(--green-900);
}

.rvw-seglink .rv-icon {
  width: 0.95em;
  height: 0.95em;
}

.rvw-phgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.rvw-phcell {
  position: relative;
  padding: 0;
  border: none;
  cursor: pointer;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--cream-deep);
}

.rvw-phcell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
  border: 1px solid #eee;
}

.rvw-phcell:hover img {
  transform: scale(1.07);
}

.rvw-phmore {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 22, 15, 0.55);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
}

/* Review media gallery (Real Reviews modal) — reuses the Trip Photos grid, but
   5 per row. Images + videos together, inline (not clickable), videos playable.
   Overflow beyond 2 rows is revealed by the "See more" toggle. */
.rvw-rr-rev__gallery {
  margin-top: 0.6rem;
  grid-template-columns: repeat(5, 1fr);
}

.rvw-rr-rev__seemore {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--green-600);
  transition: color var(--dur-fast) var(--ease-out);
}

.rvw-rr-rev__seemore:hover {
  color: var(--green-700);
}

.rvw-rr-rev__gallery .rvw-phcell {
  cursor: pointer;
  appearance: none;
  background: var(--cream-deep);
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
}

.rvw-phcell--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  pointer-events: none;
}

.rvw-phcell__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.rvw-phcell__play svg {
  width: 2rem;
  height: 2rem;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  padding: 0.4rem;
}

.rvw-lb__fig video {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  background: #0c1410;
}

.it-creatorrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.85rem;
}

.it-creator__tag {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.it-card .it-btn--full {
  margin-top: 0.95rem;
}

.it-related {
  background: var(--cream-deep);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.rvw-lb {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(2, 12, 8, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  animation: rvw-lb-in 200ms var(--ease-out);
}

@keyframes rvw-lb-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.rvw-lb__fig {
  margin: 0;
  max-width: min(1040px, 92vw);
  display: flex;
  flex-direction: column;
}

.rvw-lb__fig img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  background: #0c1410;
}

.rvw-lb__cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #fff;
  font-size: 0.95rem;
  padding: 0.95rem 0.3rem 0;
}

.rvw-lb__cap span.idx {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  flex: none;
}

.rvw-lb__btn {
  position: absolute;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
}

.rvw-lb__btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.rvw-lb__btn svg {
  width: 1.3em;
  height: 1.3em;
}

.rvw-lb__close {
  top: 1.1rem;
  right: 1.2rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
}

.rvw-lb__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

.rvw-lb__prev {
  left: clamp(0.6rem, 2vw, 1.6rem);
}

.rvw-lb__next {
  right: clamp(0.6rem, 2vw, 1.6rem);
}

/* Ghost button variant (shared) */
.it-btn--ghost {
  background: transparent;
  color: var(--green-700);
  border-color: transparent;
}

.it-btn--ghost:hover {
  background: rgba(31, 95, 72, 0.08);
}

/* ============================================================
 * TRIP GUIDE PAGE
 * Faithful port of the design-system "Trip Guide" editorial detail view.
 * ============================================================ */

.gd-masthead {
  background: transparent;
  padding-top: 1.5rem;
}

.gd-masthead__in {
  max-width: 60rem;
  margin-top: 1.8rem;
}

.rvw-gd-title {
  margin: 0.7rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.06;
  color: var(--text-heading);
  max-width: 100%;
  text-wrap: balance;
}

.rvw-gd-byline {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}

.gd-byline__author {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.gd-byline__name {
  font-weight: 700;
  color: var(--text-heading);
  font-size: 0.96rem;
}

.gd-av {
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--green-600);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 0 0 2.5px var(--cream), 0 0 0 4.5px var(--coral-500);
}

.gd-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rvw-gd-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.rvw-gd-meta .rv-icon {
  width: 1.05em;
  height: 1.05em;
}

.rvw-gd-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border-strong);
}

.gd-hero {
  background: transparent;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}

.rvw-gd-cover {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 21/9;
}

.rvw-gd-cover div {
  position: absolute;
  inset: 0;
  background-image: var(--rvw-bg);
  background-size: cover;
  background-position: center;
}

.rvw-gd-collage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.rvw-gd-collage div {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  background-image: var(--rvw-bg);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-sm);
}

.gd-article {
  background: var(--cream);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}

.rvw-gd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

/* Sidebar (TOC) disabled — article spans the full width. */
.rvw-gd-grid--full {
  grid-template-columns: 1fr;
}

.rvw-gd-toc {
  position: sticky;
  top: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.rvw-toclabel {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.gd-toc-nav {
  display: flex;
  flex-direction: column;
}

.rvw-toclink {
  display: block;
  font-size: 0.92rem;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.4rem 0 0.4rem 0.9rem;
  border-left: 2px solid var(--border-subtle);
  transition: all var(--dur-fast) var(--ease-out);
}

.rvw-toclink:hover {
  color: var(--text-heading);
  border-left-color: var(--green-300);
}

.rvw-toclink[data-on="true"] {
  color: var(--green-700);
  font-weight: 700;
  border-left-color: var(--green-600);
}

.gd-toc-actions {
  border-top: 1px solid var(--border-subtle);
  margin-top: 1rem;
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: stretch;
}

.gd-rstar {
  display: inline-flex;
  color: #FFC53D;
}

.gd-rstar svg {
  width: 1em;
  height: 1em;
}

.rvw-gd-lede {
  max-width: 64ch;
}

.rvw-gd-lede p {
  margin: 0 0 1.4rem;
  font-size: 1.18rem;
  line-height: 1.72;
  color: var(--text-primary);
}

.rvw-gd-lede p:first-child {
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--text-heading);
}

.rvw-besttime {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.4rem;
  margin: 0.5rem 0 0;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.rvw-besttime__l {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-700);
}

.rvw-bt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.rvw-bt__ic {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-sm);
  background: var(--green-50);
  color: var(--green-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.rvw-bt__ic .rv-icon {
  width: 1.05em;
  height: 1.05em;
}

/* Uploaded best-time icon image — fits the 2.1rem tile like the vector icon. */
.rvw-bt__ic img {
  width: 1.3rem;
  height: 1.3rem;
  object-fit: contain;
  display: block;
}

.rvw-bt .k {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: block;
}

.rvw-bt .v {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-heading);
}

.rvw-gsec {
  margin-top: clamp(2.75rem, 5vw, 4rem);
}

.rvw-gsec__head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--text-heading);
}

.rvw-gsec__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.12;
  color: var(--text-heading);
}

.rvw-gsec__lead {
  margin: 1.1rem 0 0;
  max-width: 62ch;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.rvw-place {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) 13rem;
  gap: 1.4rem;
  padding: 1.9rem 0;
}

.rvw-place__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green-300);
  line-height: 1;
  padding-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}

.rvw-place__main {
  min-width: 0;
}

.rvw-place__name {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-heading);
  line-height: 1.2;
}

.rvw-place__metarow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.rvw-place__cat {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green-700);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  padding: 0.24em 0.65em;
  border-radius: var(--radius-pill);
}

.rvw-place__desc {
  margin: 0.85rem 0 0;
  font-size: 1.02rem;
  line-height: 1.66;
  color: var(--text-primary);
}

.rvw-place__tip {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 0.95rem;
  padding: 0.75rem 0.95rem;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--green-800);
}

.rvw-place__tip .rv-icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  margin-top: 0.15em;
  color: var(--green-600);
}

.rvw-place__img {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  background-image: var(--rvw-bg);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-sm);
}

.rvw-g2rates {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.rvw-g2rate {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  color: var(--text-secondary);
}

.rvw-g2rate b {
  color: var(--text-heading);
  font-weight: 700;
}

.rvw-g2rate .rvw-mark14 {
  width: 1em;
  height: 1em;
}

.rvw-g2gmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  flex: none;
}

.rvw-g2actions {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 0.95rem;
}

.rvw-g2act {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-heading);
  background: var(--white);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
}

.rvw-g2act:hover {
  border-color: var(--green-400);
  color: var(--green-700);
  transform: translateY(-1px);
}

.rvw-g2act .rv-icon {
  width: 1.05em;
  height: 1.05em;
}

.rvw-gquote {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0;
  padding: 0 0 0 1.6rem;
  border-left: 4px solid var(--green-600);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  line-height: 1.4;
  font-weight: 600;
  color: var(--text-heading);
  max-width: 32ch;
}

.rvw-tips {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--green-950);
  border-radius: var(--radius-2xl);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}

.rvw-tips h3 {
  margin: 0 0 1.3rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.rvw-tips ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.95rem 1.6rem;
}

.rvw-tips li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--green-100);
}

.rvw-tips li .rv-icon {
  width: 1.2em;
  height: 1.2em;
  flex: none;
  margin-top: 0.18em;
  color: var(--green-300);
}

.gd-authorsec {
  background: var(--cream-deep);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.gd-authorcard {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}

.rvw-author {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.gd-author__body {
  flex: 1;
  min-width: 16rem;
}

.gd-author__eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-700);
}

.gd-author__name {
  margin: 0.3rem 0 0.2rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.01em;
}

.gd-author__role {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.8rem;
}

.gd-author__bio {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 62ch;
}

.gd-author__stats {
  display: flex;
  gap: 1.5rem;
}

.rvw-astat {
  display: flex;
  flex-direction: column;
}

.rvw-astat .n {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.02em;
}

.rvw-astat .k {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.gd-author__btns {
  margin-top: 1.6rem;
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.gd-related {
  background: var(--cream);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.gd-related__sub {
  margin: 0 0 1.6rem;
  font-size: 1.0625rem;
  color: var(--text-secondary);
  max-width: 52ch;
}

.gd-more {
  background: var(--cream-deep);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.rvw-mg {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.rvw-mg:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(31, 90, 58, 0.14), var(--shadow-lg);
}

.rvw-mg__media {
  aspect-ratio: 16/10;
  overflow: hidden;
}

.rvw-mg__media div {
  width: 100%;
  height: 100%;
  background-image: var(--rvw-bg);
  background-size: cover;
  background-position: center;
  transition: transform var(--dur-slow) var(--ease-out);
}

.rvw-mg:hover .rvw-mg__media div {
  transform: scale(1.07);
}

.rvw-mg__body {
  padding: 1.05rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}

.rvw-mg__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.rvw-mg__title {
  margin: 0;
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.3;
  color: var(--text-heading);
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease-out);
}

.rvw-mg:hover .rvw-mg__title {
  color: var(--green-700);
}

.rvw-mg__excerpt {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rvw-mgcat {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-700);
}

.rvw-mgread {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.rvw-mgread .rv-icon {
  width: 1em;
  height: 1em;
}

.rvw-mg__foot {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.84rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.rvw-mg__foot .rv-icon {
  width: 1em;
  height: 1em;
  color: var(--green-600);
}

/* reviews modal */
.gd-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(2, 12, 8, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  animation: rvw-g2in 180ms var(--ease-out);
}

@keyframes rvw-g2in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.gd-sheet {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: min(40rem, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gd-sheet__head {
  padding: 1.3rem 1.4rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.gd-sheet__eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-700);
}

.gd-sheet__title {
  margin: 0.25rem 0 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-heading);
}

.gd-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: none;
  background: var(--cream-deep);
  color: var(--text-heading);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gd-close svg {
  width: 1.1em;
  height: 1.1em;
}

.gd-seg {
  display: inline-flex;
  padding: 0.25rem;
  background: var(--cream-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  gap: 0.2rem;
  margin-top: 0.9rem;
}

.gd-seg button {
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  padding: 0.4rem 0.95rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.gd-seg button[aria-pressed="true"] {
  background: var(--white);
  color: var(--text-heading);
  box-shadow: var(--shadow-xs);
}

.gd-seg .rv-icon,
.gd-seg .rvw-g2gmark,
.gd-seg .rvw-mark14 {
  width: 1em;
  height: 1em;
}

.gd-sheet__rate {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.gd-sheet__rate b {
  color: var(--text-heading);
}

.gd-reviews {
  padding: 1.1rem 1.4rem 1.4rem;
  overflow: auto;
}

.gd-review {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.gd-review:last-child {
  border-bottom: none;
}

.gd-review__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.gd-review__av {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
}

.gd-review__name {
  font-weight: 700;
  color: var(--text-heading);
  font-size: 0.92rem;
}

.gd-review__when {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.gd-review__stars {
  display: inline-flex;
}

.gd-review__stars .ab-star {
  width: 13px;
  height: 13px;
}

.gd-review__stars .ab-star.is-full {
  color: #FFC53D;
}

.gd-review__stars .ab-star.is-empty {
  color: #E4E2D6;
}

.gd-review__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-primary);
}

/* ============================================================
   BLOG LISTING PAGE (Roovio Journal)
   Faithful port of "Roovio Blog Listing": photo hero + search,
   sticky category filters, featured story, people-first card
   grid with load-more, and a CTA banner. The page re-themes to
   the clean white homepage atmosphere at page scope.
   ============================================================ */
.rvw-bl {
  --cream: #FFFFFF;
  --cream-deep: #F4F2EA;
  background: #FFFFFF;
}

/* Blog — Hero */
/* Light green-wash hero, consistent with the Trips Listing / Real Reviews
   inner-page heroes (cream bg + radial green gradient + soft blobs). */
.rvw-blhero {
  position: relative;
  overflow: hidden;
  background: var(--cream);
}

.rvw-blhero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rvw-blhero__grad {
  position: absolute;
  inset: 0;
  background: radial-gradient(1100px 460px at 82% -12%, var(--green-100), transparent 60%), radial-gradient(760px 420px at 4% 0%, var(--green-50), transparent 64%);
}

.rvw-blhero__inner {
  position: relative;
  max-width: 50rem;
  margin: 0 auto;
  text-align: center;
  padding: clamp(4rem, 8vw, 6.5rem) var(--gutter) clamp(3.5rem, 7vw, 5.5rem);
}

.rvw-blhero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eaf6f0;
  color: var(--green-600);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

.rvw-blhero__eyebrow .rv-icon {
  width: 1rem;
  height: 1rem;
}

.rvw-blhero__eyebrow {
  display: none;
}

.rvw-blhero__title {
  margin: 16px 0 0;
  color: var(--text-heading);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.25rem);
  line-height: 1.07;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.rvw-blhero__title span {
  color: var(--green-600);
}

.rvw-blhero__sub {
  margin: 1.05rem auto 0;
  max-width: 44rem;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
}

.rvw-blsearch {
  position: relative;
  max-width: 32rem;
  margin: 1.8rem auto 0;
}

.rvw-blsearch__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--green-600);
  font-size: 1.15rem;
  display: flex;
}

.rvw-blsearch input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink-800);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.95rem 1.2rem 0.95rem 3rem;
  outline: none;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.rvw-blsearch input:focus {
  border-color: var(--green-400);
  box-shadow: 0 0 0 3px var(--green-100);
}

/* Blog — Sticky category toolbar */
.rvw-bltoolbar {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}

.rvw-blchips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.9rem 0;
}

.rvw-blchip {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text-secondary);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  transition: all var(--dur-fast) var(--ease-out);
}

.rvw-blchip:hover {
  border-color: var(--green-400);
  color: var(--green-700);
}

.rvw-blchip[aria-pressed="true"] {
  color: var(--white);
  background: var(--green-900);
  border-color: var(--green-900);
}

/* Blog — shared coral/green category pill (on photos) */
.rvw-blcat {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--cat-pill-bg, var(--green-600));
  padding: 0.42rem 0.8rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--cat-pill-shadow, 0 4px 14px rgba(31, 90, 58, 0.30));
}

/* Blog — people-first byline */
.rvw-blby {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
}

.rvw-blby--lg {
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.rvw-blav {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--green-100) var(--rvw-bg, none) center / cover no-repeat;
  color: var(--green-700);
  font-weight: 600;
  font-size: 0.72rem;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--coral-500);
}

.rvw-blby--lg .rvw-blav {
  width: 40px;
  height: 40px;
  font-size: 0.8rem;
}

.rvw-blby__meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.rvw-blby__name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-heading);
}

.rvw-blby--lg .rvw-blby__name {
  font-size: 0.92rem;
}

.rvw-blby__sub {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.rvw-blby--lg .rvw-blby__sub {
  font-size: 0.82rem;
}

.rvw-blby__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--neutral-300);
}

/* Blog — Featured story */
.rvw-blfeat-sec {
  padding: clamp(2.5rem, 5vw, 3.75rem) 0 0.5rem;
}

.rvw-blfeat-eyebrow {
  color: var(--green-700);
  margin-bottom: 1.2rem;
}

.rvw-blfeat {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  text-decoration: none;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-med) var(--ease-out);
}

.rvw-blfeat:hover {
  box-shadow: var(--shadow-lg);
}

.rvw-blfeat__media {
  position: relative;
  overflow: hidden;
  min-height: 21rem;
}

.rvw-blfeat__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.rvw-blfeat:hover .rvw-blfeat__media img {
  transform: scale(1.04);
}

.rvw-blfeat__cat {
  position: absolute;
  top: 18px;
  left: 18px;
}

.rvw-blfeat__pill {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-900);
  background: var(--yellow-500);
  padding: 0.42rem 0.8rem;
  border-radius: var(--radius-pill);
}

.rvw-blfeat__body {
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rvw-blfeat__title {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--text-heading);
}

.rvw-blfeat__excerpt {
  margin: 1rem 0 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.rvw-blfeat__btn {
  margin-top: 1.75rem;
  align-self: flex-start;
}

/* Blog — Story grid */
.rvw-blgrid-sec {
  padding: clamp(2.5rem, 4vw, 3.25rem) 0 clamp(3rem, 5vw, 4.5rem);
}

.rvw-blgrid-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.rvw-blgrid-head h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-heading);
}

.rvw-blgrid-count {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
}

.rvw-blgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

/* Blog — Story card */
.rvw-blcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.rvw-blcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.rvw-blcard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.rvw-blcard__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.rvw-blcard:hover .rvw-blcard__media img {
  transform: scale(1.05);
}

.rvw-blcard__media .rvw-blcat {
  position: absolute;
  top: 14px;
  left: 14px;
}

.rvw-blcard__body {
  padding: 1.25rem 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.rvw-blcard__title {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-heading);
}

.rvw-blcard__excerpt {
  margin: 0.7rem 0 1.2rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Blog — Empty state */
.rvw-blempty {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--text-muted);
}

.rvw-blempty p {
  margin: 0;
  font-size: 1.05rem;
}

/* Blog — Load more */
/* Site-wide "Load More" control (Trips / Blog / Real Reviews) — a centered
   primary pill button, matching the Trip Guide section's .rvw-tg-cta. The old
   count line + progress bar were removed for a consistent button-only design;
   the __count/__track/__bar/__chev rules below are retained but unused. */
.rvw-blmore {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

/* No button inside (all items loaded / filtering) → collapse so no empty gap.
   `display:flex` above beats the UA `[hidden]` rule, so hide it explicitly. */
.rvw-blmore:empty,
.rvw-blmore[hidden] {
  display: none;
  margin: 0;
}

.rvw-blmore__count {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.rvw-blmore__count b {
  color: var(--text-heading);
}

.rvw-blmore__track {
  width: 200px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--neutral-200);
  overflow: hidden;
}

.rvw-blmore__bar {
  height: 100%;
  background: var(--green-600);
  border-radius: var(--radius-pill);
  transition: width var(--dur-slow) var(--ease-out);
}

.rvw-blmore__chev {
  transform: rotate(90deg);
}

/* Blog — CTA banner */
.rvw-blcta-sec {
  padding: 0 0 clamp(3.5rem, 6vw, 5.5rem);
}

.rvw-blcta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--green-800) 0%, var(--green-900) 60%, var(--green-950) 100%);
  border-radius: var(--radius-2xl);
  padding: clamp(2.5rem, 5vw, 3.75rem);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.rvw-blcta__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(620px 320px at 82% -18%, rgba(124, 184, 158, 0.30), transparent 60%);
}

.rvw-blcta__title {
  margin: 0;
  position: relative;
  color: var(--white);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.rvw-blcta__sub {
  margin: 0.9rem auto 0;
  position: relative;
  max-width: 32rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.05rem;
  line-height: 1.55;
}

.rvw-blcta__actions {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.75rem;
  position: relative;
}

.rvw-blcta__ghost {
  color: var(--white);
  --_fg: var(--white);
  border-color: rgba(255, 255, 255, 0.6);
  --_bd: rgba(255, 255, 255, 0.6);
}

.rvw-blcta__ghost:hover {
  --_bg: rgba(255, 255, 255, 0.12);
}

/* ============================================================
   HEADER OVERLAY — full-bleed heroes run up under the floating nav
   The floating pill nav (position: sticky) normally reserves its own
   height at the top of the page, leaving a band of page background
   above each hero. To make the nav overlay the hero instead, each
   hero is pulled up by the nav's height (--rv-nav-h, measured in JS)
   and its content padded back down by the same amount — so the
   content stays put while the hero background fills behind the nav.
   Applied to every inner-page hero for consistency.
   ============================================================ */
:root {
  --rv-nav-h: 88px;
}

/* Full-bleed, first-in-main heroes underlap the nav. The Trip Itinerary /
   Trip Guide detail pages open with a light breadcrumb strip — it underlaps the
   nav too, so the page's own (white) background fills behind the floating nav
   instead of the body cream, keeping the header/hero area seamless. */
.rvw-blhero,
.ab-hero,
.rvw-tlhero,
.it-crumbstrip,
.gd-masthead,
.rvw-bd-head,
.rvw-rr-hero,
.rvw-hp-hero {
  margin-top: calc(-1 * var(--rv-nav-h));
}

/* Push hero/strip content clear of the overlaying nav (net position unchanged). */
.rvw-tlhero__inner {
  padding-top: calc(var(--rv-nav-h) + clamp(2.5rem, 5vw, 4rem));
}

.rvw-rr-hero {
  padding-top: calc(var(--rv-nav-h) + clamp(2.5rem, 5vw, 3.75rem));
}

.it-crumbstrip,
.gd-masthead {
  padding-top: calc(var(--rv-nav-h) + 1.5rem);
}

.rvw-bd-head {
  padding-top: calc(var(--rv-nav-h) + clamp(2rem, 4vw, 3.25rem));
}

/* Blog — light green-wash hero underlaps the nav; content padded clear of it. */
.rvw-blhero__inner {
  width: 100%;
  padding: calc(var(--rv-nav-h) + clamp(2.5rem, 5vw, 3.75rem)) var(--gutter) clamp(3rem, 7vw, 5rem);
}

/* ============================================================
   BLOG DETAIL PAGE (Roovio Journal — article)
   Faithful port of "Roovio Blog Detail": reading-progress bar,
   breadcrumb + byline header, full-bleed feature image, readable
   body column with sticky TOC + share strip, callout/quote/figure,
   related stories, CTA. Green leads; coral reserved for the CTA.
   ============================================================ */
.rvw-bd {
  --cream: #FFFFFF;
  --cream-deep: #F4F2EA;
  --cat-pill-bg: var(--green-900);
  --cat-pill-shadow: 0 4px 14px rgba(2, 48, 32, 0.22);
  background: #FFFFFF;
}

/* Reading-progress bar */
.rvw-bd-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--green-600);
  z-index: 1100;
  transition: width 0.1s linear;
}

/* Header */
.rvw-bd-head__col {
  max-width: 52rem;
  margin: 0 auto;
}

.rvw-bd-crumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.86rem;
  color: var(--text-muted);
  font-weight: 500;
}

.rvw-bd-crumb a {
  color: var(--text-muted);
  text-decoration: none;
}

.rvw-bd-crumb a:hover {
  color: var(--green-700);
}

.rvw-bd-crumb b {
  color: var(--text-secondary);
}

.rvw-bd-crumb .rv-icon {
  width: 0.9em;
  height: 0.9em;
  color: var(--neutral-300);
}

.rvw-bd-head__pill {
  margin: 1.5rem 0 1.1rem;
}

.rvw-bd-title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-heading);
}

.rvw-bd-deck {
  margin: 1.1rem 0 0;
  max-width: 44rem;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.rvw-bd-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.75rem 0 0;
}

.rvw-bd-author {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.rvw-bd-av {
  width: 48px;
  height: 48px;
  font-size: 0.9rem;
}

.rvw-bd-author__meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.rvw-bd-author__name {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text-heading);
}

.rvw-bd-author__role {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.rvw-bd-meta__date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Feature image */
.rvw-bd-feature {
  position: relative;
  max-width: 62rem;
  margin: clamp(2rem, 3.5vw, 2.75rem) auto 0;
  aspect-ratio: 21 / 9;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
}

.rvw-bd-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rvw-bd-feature__cap {
  max-width: 62rem;
  margin: 0.9rem auto 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Body + TOC grid */
.rvw-bd-bodywrap {
  padding: clamp(2.75rem, 5vw, 4rem) 0 clamp(3.5rem, 6vw, 5rem);
}

.rvw-bd-grid {
  max-width: 62rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem;
  gap: 3.5rem;
  align-items: start;
}

/* Sidebar (in-this-story) hidden — article column spans full width. */
.rvw-bd-grid--full {
  grid-template-columns: minmax(0, 1fr);
  max-width: 48rem;
}

.rvw-bd-article {
  min-width: 0;
  max-width: 44rem;
}

/* Prose primitives */
.rvw-bd-lead {
  margin: 0 0 1.75rem;
  font-size: 1.28rem;
  line-height: 1.7;
  color: var(--text-heading);
  font-weight: 500;
}

.rvw-bd-p {
  margin: 0 0 1.5rem;
  font-size: 1.12rem;
  line-height: 1.8;
  color: var(--text-primary);
}

.rvw-bd-article strong,
.rvw-bd-article b {
  color: var(--text-heading);
  font-weight: 700;
}

.rvw-bd-lead a,
.rvw-bd-p a,
.rvw-bd-ul li a,
.rvw-bd-ol li a,
.rvw-bd-quote a {
  color: var(--gold-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.rvw-bd-lead a:hover,
.rvw-bd-p a:hover,
.rvw-bd-ul li a:hover,
.rvw-bd-ol li a:hover {
  color: var(--gold-600);
}

.rvw-bd-h2 {
  margin: 2.75rem 0 1rem;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-heading);
  scroll-margin-top: 6rem;
}

.rvw-bd-h3 {
  margin: 2rem 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-heading);
}

.rvw-bd-ul {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.rvw-bd-ul li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.85rem;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-primary);
}

.rvw-bd-ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.65rem;
  width: 8px;
  height: 8px;
  background: var(--green-600);
  border-radius: 2px;
  transform: rotate(45deg);
}

.rvw-bd-ol {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  counter-reset: rv;
}

.rvw-bd-ol li {
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: 0.9rem;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-primary);
  counter-increment: rv;
}

.rvw-bd-ol li::before {
  content: counter(rv);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rvw-bd-callout {
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.8rem;
  margin: 0 0 2rem;
}

.rvw-bd-callout__title {
  margin: 0 0 1rem;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-600);
  font-weight: 700;
}

.rvw-bd-callout .rvw-bd-ul {
  margin-bottom: 0;
}

.rvw-bd-quote {
  margin: 2.25rem 0;
  padding: 0.25rem 0 0.25rem 1.6rem;
  border-left: 3px solid var(--green-600);
}

.rvw-bd-quote p {
  margin: 0;
  font-size: 1.4rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-heading);
  font-weight: 500;
}

.rvw-bd-quote cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 600;
}

.rvw-bd-figure {
  margin: 2.5rem 0;
}

.rvw-bd-figure__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.rvw-bd-figure__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rvw-bd-figure figcaption {
  margin-top: 0.8rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Tags */
.rvw-bd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 2.75rem 0 0;
}

.rvw-bd-tag {
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
}

.rvw-bd-tag:hover {
  border-color: var(--green-400);
  color: var(--green-700);
}

/* Share strip */
.rvw-bd-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2.5rem 0 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.rvw-bd-share__txt {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-heading);
}

.rvw-bd-share__txt span {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.rvw-bd-share__btns {
  display: flex;
  gap: 0.5rem;
}

.rvw-bd-sharebtn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: var(--white);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
  appearance: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.rvw-bd-sharebtn[hidden] {
  display: none;
}

.rvw-bd-sharemenu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 30;
  padding: 0.35rem;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  width: max-content;
}

.rvw-bd-sharemenu[hidden] {
  display: none;
}

.rvw-bd-sharemenu button {
  appearance: none;
  border: none;
  background: transparent;
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--text-heading);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.rvw-bd-sharemenu button svg {
  width: 18px;
  height: 18px;
  display: block;
}

.rvw-bd-sharemenu button:hover,
.rvw-bd-sharemenu button:focus-visible {
  background: var(--green-50);
  color: var(--green-700);
  outline: none;
}

.rvw-bd-sharebtn .rv-icon {
  width: 1.1em;
  height: 1.1em;
}

.rvw-bd-sharebtn:hover {
  background: var(--green-600);
  color: var(--white);
  border-color: var(--green-600);
  transform: translateY(-2px);
}

/* Sticky TOC rail */
.rvw-bd-rail {
  position: sticky;
  top: 6rem;
  align-self: start;
}

.rvw-bd-rail__title {
  margin: 0 0 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}

.rvw-bd-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.rvw-bd-rail__list a {
  display: block;
  font-size: 0.88rem;
  line-height: 1.4;
  padding-left: 0.9rem;
  border-left: 2px solid var(--border-subtle);
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.rvw-bd-rail__list a.is-active {
  border-left-color: var(--green-600);
  color: var(--text-heading);
  font-weight: 600;
}

/* Related */
.rvw-bd-related {
  background: var(--cream-deep);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  border-top: 1px solid var(--border-subtle);
}

.rvw-bd-related__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.rvw-bd-related__head h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-heading);
}

.rvw-bd-related__link {
  transition:
    background var(--dur-med) var(--ease-out),
    color var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
  will-change: transform, background-color;
}

.rvw-bd-related__grid {
  grid-template-columns: repeat(3, 1fr);
}

/* CTA — reuse .rvw-blcta; add top padding for the article context */
.rvw-bd-cta-sec {
  padding-top: clamp(3rem, 6vw, 4.5rem);
  background: var(--white);
}

/* ============================================================
   REAL REVIEWS PAGE (single-page reviews explorer)
   Faithful port of the design-system "Real Reviews": green-wash
   hero + search, master grid of place cards, and a focus panel
   (Google/Roovio source toggle, dual summaries, star filter,
   expandable review feed) opened in place. Ported namespaced
   rvw-rr-* styles; grid + focus + modal are built by theme.js.
   ============================================================ */
.rvw-rr {
  --cream: #FFFFFF;
  --cream-deep: #F4F2EA;
  --surface-sunken: #F4F2EA;
}

.rvw-rr .rvw-rr-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: #F8B84E;
  font-size: 14px;
}

.rvw-rr .rvw-rr-stars svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: block;
}

/* hero */
.rvw-rr-hero {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  padding: calc(var(--rv-nav-h) + clamp(2.75rem, 5vw, 4rem)) 0 2.1rem;
}

.rvw-rr-hero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rvw-rr-hero__grad {
  position: absolute;
  inset: 0;
  background: radial-gradient(1100px 460px at 82% -12%, var(--green-100), transparent 60%), radial-gradient(760px 420px at 4% 0%, var(--green-50), transparent 64%);
}

.rvw-rr-hero__inner {
  position: relative;
}

.rvw-rr-hero__head {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

.rvw-rr-hero__title {
  margin: 0 auto;
  max-width: 20ch;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(2.1rem, 4.4vw, 3.25rem);
  line-height: 1.07;
  color: var(--text-heading);
  text-wrap: balance;
}

.rvw-rr-hero__title span {
  color: var(--green-700);
}

.rvw-rr-hero__sub {
  margin: 1.05rem auto 0;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 44rem;
}

.rvw-rr-gridsec {
  background: var(--white);
  padding: 1.5rem 0 clamp(3rem, 6vw, 5rem);
}

@keyframes rvw-rr-fa {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(2.5%, -3%) scale(1.06);
  }
}

@keyframes rvw-rr-fb {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-3%, 2.5%) scale(1.08);
  }
}

.rvw-rr-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .rvw-rr-blob-a {
    animation: rvw-rr-fa 13s var(--ease-out) infinite;
  }

  .rvw-rr-blob-b {
    animation: rvw-rr-fb 16s var(--ease-out) infinite;
  }
}

/* source marks */
.rvw-rr-gmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05em;
  height: 1.05em;
  line-height: 1;
  flex: none;
}

.rvw-rr-rmark {
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  object-fit: contain;
  flex: none;
  display: block;
}

/* ---------- MASTER GRID ---------- */
.rvw-rr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out), filter 420ms var(--ease-out);
}

.rvw-rr-grid[data-dim="true"] {
  opacity: 0.4;
  transform: scale(0.985);
  filter: blur(2px);
  pointer-events: none;
}

.rvw-rr-card {
  text-align: left;
  width: 100%;
  height: 100%;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  background: var(--white);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-fast) var(--ease-out), opacity 320ms var(--ease-out);
}

.rvw-rr-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.rvw-rr-card[data-hidden="true"] {
  opacity: 0;
}

.rvw-rr-card__media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--green-100);
}

.rvw-rr-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

.rvw-rr-card:hover .rvw-rr-card__media img {
  transform: scale(1.05);
}

.rvw-rr-card__cat {
  position: absolute;
  left: 0.6rem;
  top: 0.6rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(2, 48, 32, 0.62);
  backdrop-filter: blur(4px);
  padding: 0.3em 0.7em;
  border-radius: var(--radius-pill);
}

.rvw-rr-card__body {
  padding: 0.95rem 1.05rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 auto;
}

.rvw-rr-card__name {
  margin: 0;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.22;
  color: var(--text-heading);
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.44em;
}

.rvw-rr-card__loc {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
}

.rvw-rr-card__loc svg {
  width: 0.95em;
  height: 0.95em;
  color: var(--green-600);
  flex: none;
}

.rvw-rr-card__rates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border-subtle);
}

.rvw-rr-srcline {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  padding: 0.32em 0.72em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.rvw-rr-srcline b {
  color: var(--text-heading);
  font-weight: 700;
}

/* ---------- FOCUS OVERLAY ---------- */
.rvw-rr-scrim {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(2, 22, 15, 0.42);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 360ms var(--ease-out);
}

.rvw-rr-scrim[data-show="true"] {
  opacity: 1;
}

.rvw-rr-stage {
  position: fixed;
  inset: 0;
  z-index: 1201;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  pointer-events: none;
}

.rvw-rr-focus {
  pointer-events: auto;
  width: min(60rem, 94vw);
  height: min(86vh, 47.5rem);
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  will-change: transform;
}

.rvw-rr-focus__media {
  position: relative;
  overflow: hidden;
  background: var(--green-100);
}

.rvw-rr-focus__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rvw-rr-focus__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 22, 15, 0.05) 30%, rgba(2, 22, 15, 0.85) 100%);
}

.rvw-rr-focus__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.3rem 1.4rem;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms var(--ease-out) 160ms, transform 320ms var(--ease-out) 160ms;
}

.rvw-rr-focus.is-open .rvw-rr-focus__cap {
  opacity: 1;
  transform: none;
}

.rvw-rr-focus__cat {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-200);
}

.rvw-rr-focus__name {
  margin: 0.25rem 0 0.3rem;
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--white);
}

.rvw-rr-focus__loc {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.rvw-rr-focus__loc svg {
  width: 1em;
  height: 1em;
}

.rvw-rr-focus__blurb {
  margin: 1rem 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 24rem;
}

.rvw-rr-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 3;
  width: 2.3rem;
  height: 2.3rem;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.rvw-rr-close:hover {
  transform: scale(1.08);
  background: #fff;
}

.rvw-rr-close svg {
  width: 1.2em;
  height: 1.2em;
}

.rvw-rr-focus__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  opacity: 0;
  transition: opacity 300ms var(--ease-out) 170ms;
}

.rvw-rr-focus.is-open .rvw-rr-focus__panel {
  opacity: 1;
}

.rvw-rr-focus__scroll {
  overflow-y: auto;
  padding: 3.4rem 1.3rem 1.4rem;
  min-height: 0;
}

/* sliding source toggle */
.rvw-rr-seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0.3rem;
  background: var(--neutral-100);
  border-radius: var(--radius-pill);
  margin-bottom: 0.5rem;
}

.rvw-rr-seg__thumb {
  position: absolute;
  top: 0.3rem;
  bottom: 0.3rem;
  left: 0.3rem;
  width: calc(50% - 0.3rem);
  border-radius: var(--radius-pill);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform 400ms var(--ease-out);
}

.rvw-rr-seg[data-src="google"] .rvw-rr-seg__thumb {
  transform: translateX(100%);
}

/* Google reviews hidden → single Roovio tab fills the control. */
.rvw-rr-seg[data-single="true"] {
  grid-template-columns: 1fr;
}

.rvw-rr-seg[data-single="true"] .rvw-rr-seg__thumb {
  width: calc(100% - 0.6rem);
  transform: none;
}

.rvw-rr-seg button {
  position: relative;
  z-index: 1;
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding: 0.55rem 0.5rem;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: color var(--dur-med) var(--ease-out);
}

.rvw-rr-seg button[aria-selected="true"] {
  color: var(--green-700);
}

/* average + distribution */
.rvw-rr-osum {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: center;
  margin: 0.2rem 0 0;
  padding: 0.9rem 1rem;
  background: var(--cream);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.rvw-rr-osum__big {
  text-align: center;
  padding-right: 1rem;
  border-right: 1px solid var(--border-subtle);
}

.rvw-rr-osum__src {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.rvw-rr-osum__num {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1;
  letter-spacing: -0.02em;
}

.rvw-rr-osum__big .rvw-rr-stars {
  margin-top: 0.3rem;
  font-size: 13px;
}

.rvw-rr-osum__cnt {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 0.35rem;
}

.rvw-rr-osum__bars {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.rvw-rr-bar {
  display: grid;
  grid-template-columns: 1.4rem 1fr 2rem;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.rvw-rr-bar__lab {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  color: var(--text-secondary);
}

.rvw-rr-bar__lab svg {
  width: 0.82em;
  height: 0.82em;
  color: #F8B84E;
  fill: #F8B84E;
}

.rvw-rr-bar__track {
  height: 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--neutral-200);
  overflow: hidden;
}

.rvw-rr-bar__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--green-600);
  transition: width 600ms var(--ease-out);
}

.rvw-rr-bar__pct {
  text-align: right;
}

/* star filter chips */
.rvw-rr-sfilter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 0.2rem;
}

.rvw-rr-schip {
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.34rem 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  transition: all var(--dur-fast) var(--ease-out);
}

.rvw-rr-schip svg {
  width: 0.9em;
  height: 0.9em;
  fill: #F8B84E;
  stroke: #F8B84E;
}

.rvw-rr-schip:hover {
  border-color: var(--green-300);
  color: var(--text-heading);
  background: var(--green-50);
}

.rvw-rr-schip[data-on="true"] {
  background: var(--green-600);
  border-color: var(--green-600);
  color: #fff;
}

.rvw-rr-feedhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 1.05rem 0 0.3rem;
}

.rvw-rr-feedhead h4 {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--text-heading);
}

.rvw-rr-feedhead span {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* review item */
.rvw-rr-feed {
  display: flex;
  flex-direction: column;
}

.rvw-rr-rev {
  padding: 0.95rem 0;
  border-top: 1px solid var(--border-subtle);
}

.rvw-rr-rev:first-child {
  border-top: none;
}

@keyframes rvw-rr-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.rvw-rr-rev--in {
  animation: rvw-rr-rise 460ms var(--ease-out) both;
}

.rvw-rr-rev__top {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.rvw-rr-rev__av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green-100) var(--rvw-bg, none) center/cover no-repeat;
  color: var(--green-700);
  font-weight: 600;
  font-size: 0.8rem;
}

.rvw-rr-rev__meta {
  min-width: 0;
}

.rvw-rr-rev__name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-heading);
  line-height: 1.2;
}

.rvw-rr-rev__sub {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 500;
}

.rvw-rr-rev__sub b {
  color: var(--green-600);
  font-weight: 600;
}

.rvw-rr-rev__starline {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.55rem 0 0.4rem;
}

.rvw-rr-rev__starline .rvw-rr-stars {
  font-size: 15px;
}

.rvw-rr-rev__time {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.rvw-rr-rev__textwrap {
  overflow: hidden;
  transition: max-height 380ms var(--ease-out);
}

.rvw-rr-rev__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.58;
  color: var(--text-primary);
}

.rvw-rr-rev__more {
  margin-top: 0.4rem;
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--green-600);
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.rvw-rr-rev__more:hover {
  color: var(--green-700);
}

.rvw-rr-rev__more svg {
  width: 0.95em;
  height: 0.95em;
  transition: transform var(--dur-med) var(--ease-out);
}

.rvw-rr-rev__more[data-open="true"] svg {
  transform: rotate(180deg);
}

.rvw-rr-rev__photos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.rvw-rr-rev__photos img {
  width: 4.4rem;
  height: 4.4rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
  border: 1px solid var(--border-subtle);
}

/* Review media — Images / Videos tabs + Fancybox thumbnails. */
.rvw-rr-rev__media {
  margin-top: 0.6rem;
}

.rvw-rr-rev__mtabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.rvw-rr-rev__mtab {
  appearance: none;
  border: 1px solid var(--border-subtle);
  background: var(--white);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.rvw-rr-rev__mtab[data-on="true"] {
  background: var(--green-600);
  color: var(--white);
  border-color: var(--green-600);
}

.rvw-rr-rev__mgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.rvw-rr-rev__mthumb {
  position: relative;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  display: block;
  cursor: pointer;
}

.rvw-rr-rev__mthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rvw-rr-rev__mthumb--video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
}

.rvw-rr-rev__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  z-index: 1;
  pointer-events: none;
  border-style: solid;
  border-width: 0.5rem 0 0.5rem 0.85rem;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.rvw-rr-rev__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.6rem;
}

.rvw-rr-rev__tag {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--green-700);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  padding: 0.2em 0.6em;
  border-radius: var(--radius-pill);
}

.rvw-rr-empty {
  padding: 1.6rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* skeleton */
@keyframes rvw-rr-shimmer {
  0% {
    background-position: -160% 0;
  }

  100% {
    background-position: 160% 0;
  }
}

.rvw-rr-skel-line {
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-200) 37%, var(--neutral-100) 63%);
  background-size: 200% 100%;
  animation: rvw-rr-shimmer 1.3s linear infinite;
}

.rvw-rr-skel {
  padding: 0.95rem 0;
  border-top: 1px solid var(--border-subtle);
}

.rvw-rr-skel:first-child {
  border-top: none;
}

.rvw-rr-skel__row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.rvw-rr-skel__dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
}

@keyframes rvw-rr-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.rvw-rr-fade {
  animation: rvw-rr-fade 320ms var(--ease-out);
}

/* ---------- SEARCH + FILTER BAR ---------- */
.rvw-rr-searchrow {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
  max-width: 42rem;
  margin: 1.9rem auto 0;
}

.rvw-rr-search {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  background: var(--white);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.rvw-rr-search:focus-within {
  border-color: var(--green-500);
  box-shadow: 0 0 0 4px var(--green-100), var(--shadow-sm);
}

.rvw-rr-search>.rv-icon {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--text-muted);
  margin-left: 1.1rem;
  flex: none;
}

.rvw-rr-search input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text-heading);
  padding: 0.95rem 0.5rem 0.95rem 0.7rem;
  min-width: 0;
}

.rvw-rr-search input::placeholder {
  color: var(--text-muted);
}

.rvw-rr-clear {
  flex: none;
  appearance: none;
  border: none;
  background: var(--neutral-100);
  cursor: pointer;
  color: var(--text-secondary);
  width: 1.55rem;
  height: 1.55rem;
  margin-right: 0.65rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.rvw-rr-clear:hover {
  background: var(--neutral-200);
  color: var(--text-heading);
}

.rvw-rr-clear svg {
  width: 0.85em;
  height: 0.85em;
}

.rvw-rr-filterbtn {
  flex: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-heading);
  background: var(--white);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0 1.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.rvw-rr-filterbtn:hover {
  border-color: var(--green-400);
  background: var(--green-50);
}

.rvw-rr-filterbtn .rv-icon {
  width: 1.1em;
  height: 1.1em;
  color: var(--green-600);
}

.rvw-rr-filterbtn__badge {
  background: var(--green-600);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  min-width: 1.35em;
  height: 1.35em;
  padding: 0 0.4em;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* applied filter chips */
.rvw-rr-applied {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  max-width: 46rem;
  margin: 0.9rem auto 0;
}

.rvw-rr-achip {
  cursor: pointer;
  appearance: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--green-800);
  background: var(--green-50);
  border: 1px solid var(--green-200);
  border-radius: var(--radius-pill);
  padding: 0.34rem 0.4rem 0.34rem 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all var(--dur-fast) var(--ease-out);
}

.rvw-rr-achip:hover {
  background: var(--green-100);
  border-color: var(--green-400);
}

.rvw-rr-achip__lab {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--green-600);
}

.rvw-rr-achip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: rgba(2, 48, 32, 0.07);
}

.rvw-rr-achip__x svg {
  width: 0.78em;
  height: 0.78em;
  color: var(--green-600);
}

.rvw-rr-clearall {
  cursor: pointer;
  appearance: none;
  border: none;
  background: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0.34rem 0.4rem;
}

.rvw-rr-clearall:hover {
  color: var(--text-heading);
}

/* ---------- FILTER MODAL ---------- */
@keyframes rvw-rr-mpop {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.rvw-rr-fmscrim {
  position: fixed;
  inset: 0;
  z-index: 1210;
  background: rgba(2, 22, 15, 0.42);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  animation: rvw-rr-fade 240ms var(--ease-out);
}

.rvw-rr-fmodal {
  width: min(36rem, 96vw);
  max-height: 88vh;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: rvw-rr-mpop 320ms var(--ease-out);
}

.rvw-rr-fm__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.35rem;
  border-bottom: 1px solid var(--border-subtle);
  flex: none;
}

.rvw-rr-fm__head h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-heading);
}

.rvw-rr-fm__close {
  appearance: none;
  border: none;
  cursor: pointer;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--neutral-100);
  color: var(--text-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
}

.rvw-rr-fm__close:hover {
  background: var(--neutral-200);
}

.rvw-rr-fm__close svg {
  width: 1.1em;
  height: 1.1em;
}

.rvw-rr-fm__body {
  overflow-y: auto;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  min-height: 0;
}

.rvw-rr-fm__sec {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.rvw-rr-fm__label {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-heading);
}

.rvw-rr-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.rvw-rr-fchip {
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.85rem;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  transition: all var(--dur-fast) var(--ease-out);
}

/* Collapsed (is-extra) chips: the `hidden` attribute must win over the chip's
   own `display: inline-flex`, otherwise "View More" has nothing to reveal. */
.rvw-rr-fchip[hidden] {
  display: none;
}

.rvw-rr-fchip svg {
  width: 0.95em;
  height: 0.95em;
  color: var(--green-500);
  transition: color var(--dur-fast) var(--ease-out);
}

.rvw-rr-fchip:hover {
  border-color: var(--green-300);
  color: var(--text-heading);
  background: var(--green-50);
}

.rvw-rr-fchip[data-on="true"] {
  background: var(--green-50);
  border-color: var(--green-600);
  color: var(--green-800);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--green-600);
}

.rvw-rr-fchip[data-on="true"] svg {
  color: var(--green-600);
}

/* "View More" toggle — sits inline to the right of the visible pills, styled as
   a green text-link so it's clearly distinct from the selectable filter pills. */
.rvw-rr-viewmore {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--green-700);
  padding: 0.4rem 0.4rem;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: color var(--dur-fast) var(--ease-out);
}

.rvw-rr-viewmore:hover {
  color: var(--green-900);
}

.rvw-rr-sortlist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.rvw-rr-sortopt {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-secondary);
  background: var(--white);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.62rem 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--dur-fast) var(--ease-out);
}

.rvw-rr-sortopt svg {
  width: 1.05em;
  height: 1.05em;
  color: var(--green-500);
  flex: none;
}

.rvw-rr-sortopt:hover {
  border-color: var(--green-300);
  background: var(--green-50);
  color: var(--text-heading);
}

.rvw-rr-sortopt[data-on="true"] {
  border-color: var(--green-600);
  background: var(--green-50);
  color: var(--green-800);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--green-600);
}

/* Rating-source picker — appears under Sort By when a rating sort is chosen. */
.rvw-rr-sortsrc-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.rvw-rr-sortsrc-wrap[hidden] {
  display: none;
}

.rvw-rr-fm__sublabel {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.rvw-rr-sortsrclist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.rvw-rr-sortsrc {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-secondary);
  background: var(--white);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.62rem 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--dur-fast) var(--ease-out);
}

.rvw-rr-sortsrc .rvw-rr-gmark,
.rvw-rr-sortsrc .rvw-rr-gmark svg,
.rvw-rr-sortsrc .rvw-rr-rmark {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.rvw-rr-sortsrc:hover {
  border-color: var(--green-300);
  background: var(--green-50);
  color: var(--text-heading);
}

.rvw-rr-sortsrc[data-on="true"] {
  border-color: var(--green-600);
  background: var(--green-50);
  color: var(--green-800);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--green-600);
}

.rvw-rr-fm__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.35rem;
  border-top: 1px solid var(--border-subtle);
  flex: none;
}

.rvw-rr-fm__clear {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.4rem 0.2rem;
}

.rvw-rr-fm__clear:hover {
  color: var(--text-heading);
}

.rvw-rr-fm__clear:disabled {
  color: var(--text-muted);
  opacity: 0.5;
  text-decoration: none;
  cursor: default;
}

.rvw-rr-fm__apply {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
  background: var(--green-600);
  border-radius: var(--radius-pill);
  padding: 0.72rem 1.5rem;
  transition: background var(--dur-fast) var(--ease-out);
}

.rvw-rr-fm__apply:hover {
  background: var(--green-700);
}

.rvw-rr-fm__apply:disabled,
.rvw-rr-fm__apply:disabled:hover {
  background: var(--neutral-300, #d1d5db);
  color: var(--text-muted, #6b7280);
  cursor: not-allowed;
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {

  .rvw-rr-grid,
  .rvw-rr-card,
  .rvw-rr-focus,
  .rvw-rr-focus__cap,
  .rvw-rr-focus__panel,
  .rvw-rr-seg__thumb,
  .rvw-rr-bar__fill,
  .rvw-rr-rev__textwrap,
  .rvw-rr-scrim {
    transition: none !important;
  }

  .rvw-rr-rev--in,
  .rvw-rr-fade,
  .rvw-rr-skel-line,
  .rvw-rr-fmodal,
  .rvw-rr-fmscrim {
    animation: none !important;
  }
}

.rvw-rr-filterbtn__badge[hidden] {
  display: none;
}

.rvw-rr-clear[hidden] {
  display: none;
}

/* ============================================================
   HOMEPAGE (Figma static) — exact replica of the Roovio
   Homepage design. Header/footer reused from site chrome.
   Tokens: Green #1F5F48 · Coral #FD7C50 · Black #050F0C ·
   Body #505755 · Stroke #DCE0E4.
   ============================================================ */
.rvw-hp {
  background: #fff;
  /* Clip the full-bleed hero strips horizontally, but keep vertical overflow
     VISIBLE so the hero's negative-margin background bleeds up behind the
     floating nav (overflow:hidden here caused a hard cream seam under the header). */
  overflow-x: clip;
  overflow-y: visible;
}

/* Align the homepage content container with the header pill / footer (1240,
   border-box) so every section's left/right edges line up with the nav. The
   hero's intentionally-narrow inner and the full-bleed sections (hero strips,
   plane, destinations scroller) are unaffected. */
.rvw-hp .rvw-container:not(.rvw-hp-hero__inner) {
  max-width: 1240px;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* 1 · Hero */
.rvw-hp-hero {
  position: relative;
  text-align: center;
  padding-top: 220px;
}

.rvw-hp-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* soft centered green glow (Figma "Ellipse 7") behind heading → phone */
    radial-gradient(48% 44% at 50% 46%, rgba(31, 95, 72, 0.10), transparent 72%),
    /* light mint wash fading down from the top */
    linear-gradient(180deg, rgba(234, 246, 240, 0.45), rgba(234, 246, 240, 0) 58%),
    /* faint 133px grid (Figma Rectangle tile, ~50% overlay → light-gray lines) */
    linear-gradient(rgba(5, 15, 12, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 15, 12, 0.04) 1px, transparent 1px);
  background-size: auto, auto, 133px 133px, 133px 133px;
  background-position: center, top center, top left, top left;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
}

.rvw-hp-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 60rem;
  margin: 0 auto;
}

/* Trust eyebrow chip (Figma: #eaf6f0 pill, green text, 12px semibold, 13px icon) */
.rvw-hp-hero__trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eaf6f0;
  color: var(--green-600);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0 0 1.25rem;
}

.rvw-hp-hero__trust .rv-icon {
  width: 13px;
  height: 13px;
}

.rvw-hp-hero__title {
  margin: 0 auto;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 6.6vw, 5.34rem);
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: #000;
}

/* Figma: two forced lines — "The Traveler's" (black) / "Social App!" (green). */
.rvw-hp-hero__title span {
  display: block;
  color: var(--green-600);
}

.rvw-hp-hero__sub {
  margin: 1.5rem auto 0;
  max-width: 940px;
  font-size: clamp(1.05rem, 1.5vw, 1.375rem);
  line-height: 1.45;
  color: #252525;
}

.rvw-hp-search {
  display: flex;
  align-items: center;
  gap: 13px;
  justify-content: center;
  max-width: 722px;
  min-height: 65px;
  margin: 2.25rem auto 0;
  background: #fff;
  border-radius: 68px;
  box-shadow: 0 2.7px 20.3px rgba(0, 0, 0, 0.1);
  padding: 10px 10px 10px 18px;
  box-sizing: border-box;
}

.rvw-hp-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--text-primary);
  padding: 0.7rem 0.5rem;
}

.rvw-hp-search input::placeholder {
  color: var(--text-primary);
}

.rvw-hp-search__btn {
  flex: none;
  width: 49.6px;
  height: 49.6px;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  background: var(--coral-500);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
}

.rvw-hp-search__btn:hover {
  background: var(--coral-600);
}

.rvw-hp-search__btn .rv-icon {
  width: 1.4rem;
  height: 1.4rem;
}

/* Hero visual — two opposite-scrolling photo strips (marquee) behind a centered
   phone mockup. Strips animate via JS (assets/js/theme.js). */
.rvw-hp-hero__visual {
  position: relative;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  height: clamp(480px, 52vw, 720px);
  /* No overflow:hidden here — that clipped the phone's drop-shadow. Each strip
     row clips its own track instead (.rvw-hp-strip { overflow:hidden }). */
  overflow: visible;
}

.rvw-hp-strips {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vw, 10px);
  z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.rvw-hp-strip {
  overflow: hidden;
}

/* Track holds 3 repeated sets; 7px gap between sets = 7px gap between photos in
   a set → uniform spacing everywhere, including the loop seam. Every photo is
   rounded (border-radius). */
.rvw-hp-strip__track {
  display: flex;
  gap: 7px;
  width: max-content;
  will-change: transform;
}

.rvw-hp-strip__set {
  display: flex;
  gap: 7px;
  flex: none;
}

.rvw-hp-strip__set img {
  display: block;
  flex: none;
  width: auto;
  height: clamp(140px, 15.5vw, 200px);
  object-fit: cover;
  border-radius: 10px;
}

.rvw-hp-hero__phone {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: clamp(440px, 46vw, 700px);
  width: auto;
  z-index: 2;
  /* Figma: 0px 4px 30px rgba(0,0,0,0.25) */
  filter: drop-shadow(0 4px 30px rgba(0, 0, 0, 0.25));
}

/* Shared section header (eyebrow + H2) */
.rvw-hp-head {
  position: relative;
}

.rvw-hp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eaf6f0;
  color: var(--green-600);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

.rvw-hp-eyebrow .rv-icon {
  width: 13px;
  height: 13px;
}

.rvw-hp-h2 {
  margin: 16px 0 0;
  font-weight: 700;
  color: #252525;
  font-size: clamp(2rem, 4vw, 3.44rem);
  line-height: 1.09;
  letter-spacing: -0.01em;
}

.rvw-hp-h2 span {
  color: var(--green-600);
}

/* 2 · How it Works */
.rvw-hp-hiw {
  position: relative;
  /* positioning context for the outside-the-container plane */
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 5vw, 4rem);
}

.rvw-hp-hiw .rvw-container {
  position: relative;
}

.rvw-hp-hiw .rvw-hp-head {
  position: static;
  max-width: 45rem;
}

/* Plane+trail: anchored to the SECTION (full width), so it sits outside the
   centered container toward the viewport's top-right — matching Figma. */
.rvw-hp-hiw__air {
  position: absolute;
  /* Decorative plane + trail, pinned to the section's right edge (outside the
     centered container); trail bleeds off to the right. */
  right: 0;
  top: -80px;
  width: 340px;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

/* Slider slide illustrations (recreated from the Figma slides) */
.rvw-hp-ill {
  width: clamp(150px, 17vw, 150px);
  height: auto;
}

.rvw-hp-slider {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.rvw-hp-slider__viewport {
  overflow: hidden;
}

.rvw-hp-slider__track {
  display: flex;
  transition: transform 520ms var(--ease-out);
}

.rvw-hp-slide {
  flex: 0 0 100%;
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* gap: clamp(1.5rem, 4vw, 40px); */
  gap: 0;
  flex-wrap: wrap;
  border: 1px solid #afeed7;
  border-radius: 20px;
  background: linear-gradient(11deg, rgba(215, 245, 235, 0.6) 5%, rgba(180, 255, 230, 0.12) 92%);
  padding: clamp(2rem, 4vw, 30px) clamp(1.25rem, 3vw, 20px);
  min-height: 300px;
}

.rvw-hp-slide__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 261px;
  max-width: 40vw;
}

.rvw-hp-mag {
  width: clamp(140px, 16vw, 180px);
  height: auto;
}

.rvw-hp-slide__icon--line .rv-icon {
  width: clamp(96px, 12vw, 132px);
  height: auto;
  color: var(--green-600);
}

.rvw-hp-slide__body {
  max-width: 605px;
}

.rvw-hp-slide__body h3 {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  line-height: 1.1;
  color: #252525;
}

.rvw-hp-slide__body p {
  margin: 1.1rem 0 0;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  line-height: 1.35;
  color: #252525;
}

.rvw-hp-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 30px;
}

.rvw-hp-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  cursor: pointer;
  border-radius: 100px;
  background: #dce0e4;
  transition: width var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
}

.rvw-hp-dot.is-active {
  width: 30px;
  background: var(--coral-500);
}

/* shared centered section header */
.rvw-hp-head--center {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

.rvw-hp-head--center .rvw-hp-h2 {
  margin-top: 16px;
}

/* 3 · Roovio Features */
.rvw-hp-feat {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.rvw-hp-feat__rows {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 6.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.rvw-hp-frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.125rem);
  align-items: center;
}

.rvw-hp-frow--rev .rvw-hp-frow__media {
  order: 2;
}

.rvw-hp-frow__media img {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
}

.rvw-hp-frow__text h3 {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #252525;
}

.rvw-hp-frow__text h3 span {
  color: var(--green-600);
}

.rvw-hp-frow__text p {
  margin: 1.25rem 0 0;
  max-width: 31rem;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.55;
  color: #252525;
}

.rvw-hp-checklist {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rvw-hp-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 400;
  color: #252525;
}

/* Check badge (Figma: #eaf6f0 circle, 20px, with a small green check) */
.rvw-hp-check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #eaf6f0;
  color: var(--green-600);
}

.rvw-hp-check svg {
  width: 10px;
  height: 10px;
}

/* 4 · Featured Itineraries */
.rvw-hp-itins {
  position: relative;
  /* positioning context for the outside-the-container plane */
  background: var(--cream);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}

.rvw-hp-itins .rvw-container {
  position: relative;
}

.rvw-hp-itins .rvw-hp-head {
  position: static;
  max-width: 40rem;
}

/* Plane+trail: anchored to the SECTION (full width) → sits outside the centered
   container toward the viewport's top-right, matching Figma. */
.rvw-hp-itins__air {
  position: absolute;
  /* Decorative plane + trail, pinned to the section's right edge (outside the
     centered container); the long trail bleeds off to the right. */
  right: 0;
  top: -110px;
  width: 460px;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

/* Grid mechanics come from .rvw-tlgrid (shared with the Trips Listing) so the
   Homepage cards match exactly; this only adds the section's top spacing. */
.rvw-hp-itins__grid {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.rvw-hp-itin {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
}

.rvw-hp-itin__media {
  position: relative;
  display: block;
  aspect-ratio: 398 / 240;
  overflow: hidden;
}

.rvw-hp-itin__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* fill the cover box — no stretch/distortion */
  display: block;
}

/* Cover overlay (Figma): 3-Days coral pill, bottom gradient, title + location */
.rvw-hp-itin__daypill {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: var(--coral-500);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  padding: 2px 12px;
  border-radius: 999px;
}

.rvw-hp-itin__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.62) 100%);
}

.rvw-hp-itin__cap {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #fff;
}

.rvw-hp-itin__title {
  font-weight: 700;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.15;
  color: #fff;
}

.rvw-hp-itin__loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #fff;
}

.rvw-hp-itin__loc .rv-icon {
  width: 15px;
  height: 15px;
  flex: none;
}

.rvw-hp-itin__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rvw-hp-itin__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #505755;
  font-weight: 400;
}

/* Rating pill — Figma: cream→amber gradient, #fee685 border, #bb4d00 text */
.rvw-hp-itin__rate {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: 13px;
  color: #bb4d00;
  background: linear-gradient(90deg, #fffbeb, #fff7ed);
  border: 1px solid #fee685;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
}

.rvw-hp-itin__rate .rv-icon {
  width: 11px;
  height: 11px;
  color: #f8b84e;
  fill: #f8b84e;
}

.rvw-hp-itin__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--neutral-300);
  font-size: 0;
  flex: none;
}

.rvw-hp-itin__trips {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: var(--green-600);
  font-size: 12px;
}

.rvw-hp-itin__trips .rv-icon {
  width: 11px;
  height: 11px;
  color: var(--green-600);
}

.rvw-hp-itin__days {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Day timeline: green dot + faint connector line, small green label + chips */
.rvw-hp-day {
  position: relative;
  padding-left: 16px;
}

.rvw-hp-day:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 2.5px;
  top: 11px;
  bottom: -10px;
  width: 1px;
  background: #eaf6f0;
}

.rvw-hp-day__head {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 10px;
  line-height: 15px;
  color: var(--green-600);
}

.rvw-hp-day__bullet {
  position: absolute;
  left: 0;
  top: 4.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-600);
  flex: none;
}

.rvw-hp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  padding-left: 0;
}

.rvw-hp-chips span {
  font-size: 10px;
  line-height: 13.5px;
  color: var(--green-600);
  background: #eaf6f0;
  border: none;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

/* 5 · Discover Destinations */
.rvw-hp-dest-sec {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 6vw, 5rem);
}

.rvw-hp-destscroll {
  overflow-x: auto;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  scroll-snap-type: x proximity;
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor: grab;
  margin-left: 20px;
  margin-right: 20px;
}

/* Mouse drag/swipe (no arrows, no dots) */
.rvw-hp-destscroll.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}

.rvw-hp-destscroll.is-dragging img {
  pointer-events: none;
}

.rvw-hp-destscroll::-webkit-scrollbar {
  display: none;
}

.rvw-hp-destscroll__inner {
  display: flex;
  gap: 20px;
  /* Figma: 20px between cards */
  align-items: stretch;
}

.rvw-hp-dest {
  position: relative;
  flex: 0 0 auto;
  width: clamp(280px, 82vw, 750px);
  /* Figma card: 600px wide */
  aspect-ratio: 600 / 495;
  border-radius: 20px;
  overflow: hidden;
  scroll-snap-align: start;
}

.rvw-hp-dest img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rvw-hp-dest__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 47%, rgba(0, 0, 0, 0.8) 100%);
}

.rvw-hp-dest__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(1.25rem, 2.4vw, 30px);
  color: #fff;
}

.rvw-hp-dest__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rvw-hp-dest__top h3 {
  margin-right: 4px;
}

/* Dot + review count travel together as one flex item so the dot stays beside
   the count (and wraps below the name with it) instead of orphaning on mobile. */
.rvw-hp-dest__revwrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rvw-hp-dest__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(253 124 80);
  flex: none;
}

.rvw-hp-dest__top h3 {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.875rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--white);
}

/* Rating pill — same amber-gradient pill as the itinerary/detail cards */
.rvw-hp-dest__rate {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(90deg, #fffbeb, #fff7ed);
  border: 1px solid #fee685;
  color: #bb4d00;
  font-weight: 500;
  font-size: 13px;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
}

.rvw-hp-dest__rate .rv-icon {
  width: 11px;
  height: 11px;
  color: #f8b84e;
  fill: #f8b84e;
}

.rvw-hp-dest__rev {
  font-size: 13px;
  color: #fff;
  font-weight: 400;
}

.rvw-hp-dest__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.rvw-hp-dest__chips span {
  display: inline-flex;
  align-items: center;
  height: 28px;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

/* 6 · Testimonials */
.rvw-hp-tml-sec {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
}

.rvw-hp-tml__grid {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  z-index: 1;
  position: relative;
}

.rvw-hp-tml {
  background: #fff;
  border: none;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.rvw-hp-tml__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
}

.rvw-hp-tml__av {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.rvw-hp-tml__id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
  min-width: 0;
}

.rvw-hp-tml__id strong {
  font-weight: 700;
  color: #252525;
  font-size: 14px;
  line-height: 20px;
}

.rvw-hp-tml__id span {
  color: var(--green-600);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.rvw-hp-tml__rate {
  margin-left: auto;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.rvw-hp-tml__stars {
  display: inline-flex;
  gap: 2px;
}

.rvw-hp-tml__stars .rv-icon {
  width: 12px;
  height: 12px;
  color: #F8B84E;
  fill: #F8B84E;
}

.rvw-hp-tml__quote {
  margin: 0;
  color: #252525;
  font-size: 14px;
  line-height: 22.75px;
}

.rvw-hp-tml__age {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.2;
}

.rvw-hp-tml__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

/* 7 · CTA */
.rvw-hp-cta-sec {
  position: relative;
  overflow: visible;
  padding: 180px 0;
}

/* Inner-page variant of the app CTA (same design, no girl image, no plane).
   Inner pages lack the .rvw-hp wrapper that pins the container to 1240, so
   match it here — and use tighter top/bottom padding than the homepage's 180px. */
.rvw-hp-cta-sec--inner {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.rvw-hp-cta-sec--inner .rvw-container {
  max-width: 1240px;
}

/* Decorative plane + trail — Figma: top-left, OUTSIDE container */
.rvw-hp-cta__air {
  position: absolute;
  z-index: 0;
  /* Decorative plane + trail, pinned to the section's left edge (outside the
     centered container); the trail loops off to the left. */
  left: 0;
  top: -220px;
  width: 480px;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.rvw-hp-cta {
  position: relative;
}

.rvw-hp-cta__panel {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(105deg, #1F5F48 0%, #1F5F48 46%, #24684f 60%, #2c6f56 100%);
  min-height: clamp(360px, 32vw, 460px);
  display: flex;
  align-items: center;
}

.rvw-hp-cta__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
  background: url("assets/img/home-fig/cta-coast.jpg") center/cover no-repeat;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}

.rvw-hp-cta__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(31, 95, 72, 0.96) 30%, rgba(31, 95, 72, 0.35) 58%, rgba(31, 95, 72, 0.12) 100%);
}

.rvw-hp-cta__body {
  position: relative;
  z-index: 2;
  padding: clamp(2rem, 4vw, 3.75rem);
  max-width: 50rem;
}

.rvw-hp-cta__body h2 {
  margin: 0;
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 3.8vw, 2.5rem);
  line-height: 1.09;
}

.rvw-hp-cta__body p {
  margin: clamp(0.9rem, 2vw, 1.25rem) 0 0;
  color: #fff;
  font-size: clamp(1.1rem, 1.8vw, 1.2rem);
  line-height: 1.33;
  max-width: 34rem;
}

.rvw-hp-cta__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 17.5px;
  margin-top: clamp(1.4rem, 3vw, 2rem);
}

/* Store badges — Figma: white cards, dark logos, subtle border */
.rvw-hp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-width: 200px;
  min-height: 60px;
  background: #fff;
  color: #050F0C;
  text-decoration: none;
  padding: 0.75rem 1.4rem;
  border-radius: 12px;
  border: 1px solid rgba(201, 201, 201, 0.3);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.rvw-hp-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.rvw-hp-badge__logo {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}

.rvw-hp-badge span {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.rvw-hp-badge small {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

.rvw-hp-badge strong {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.rvw-hp-cta__woman {
  position: absolute;
  z-index: 2;
  right: clamp(0.5rem, 5vw, 5rem);
  bottom: 0;
  height: calc(100% + clamp(2rem, 5vw, 4rem));
  width: auto;
  max-width: 48%;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
}

/* ============================================================
 * TRIPS PAGE — listing pagination (API-driven)
 * ============================================================ */
.rvw-tl-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.75rem;
}

.rvw-pagebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--neutral-300, #c9c8bf);
  background: #fff;
  color: var(--green-600, #1f5f48);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.rvw-pagebtn:hover {
  background: var(--bg-page-alt, #f3f1ea);
}

.rvw-pagebtn.is-active {
  background: var(--green-600, #1f5f48);
  border-color: var(--green-600, #1f5f48);
  color: #fff;
}

.rvw-pagebtn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.rvw-pageell {
  padding: 0 0.25rem;
  color: var(--neutral-500, #6e6e68);
}

/* Trips listing — AJAX loader / spinner */
.rvw-tl-gridwrap {
  position: relative;
}

.rvw-tl-loader {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rvw-tl-loader[hidden] {
  display: none;
}

.rvw-tl-spin {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 3px solid var(--neutral-300, #c9c8bf);
  border-top-color: var(--green-600, #1f5f48);
  animation: rvwSpin 0.8s linear infinite;
}

.rvw-tlgrid.is-loading {
  /* Hide the previous cards entirely while a filter/search request runs — only
     the loader shows. The grid keeps its box (opacity, not display) so the
     loader overlay has height to center in. */
  opacity: 0;
  pointer-events: none;
  min-height: 7rem;
}

@keyframes rvwSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Load-more inline loader — sits directly above the "Load more" button; the
   already-loaded cards stay fully visible while the next page is fetched. */
.rvw-blmore__load {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.25rem 0 0.75rem;
}

.rvw-blmore__load[hidden] {
  display: none;
}

.rvw-blmore__load .rvw-tl-spin {
  width: 2rem;
  height: 2rem;
}

/* Real Reviews infinite-scroll loader (auto-load footer). */
.rvw-rr-more-spin {
  display: flex;
  justify-content: center;
}

.rvw-rr-more-spin .rvw-tl-spin {
  width: 1.75rem;
  height: 1.75rem;
  border-width: 2.5px;
}

/* ============================================================
   LEGAL PAGE (Terms & Conditions, Privacy Policy) — page-legal.php
   Body is authored in the Classic editor; these rules style the raw
   the_content() output (h2/h3/p/ul/ol/a) to match the site's prose.
   ============================================================ */
.rvw-legal {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.rvw-legal__head {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.25rem, 3vw, 2rem);
}

.rvw-legal__title {
  margin: 0;
  max-width: 48rem;
  margin-inline: auto;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-heading);
}

.rvw-legal__updated {
  margin: 0.75rem auto 0;
  max-width: 48rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.rvw-legal__body {
  max-width: 48rem;
  margin: 0 auto;
}

.rvw-legal__body>*:first-child {
  margin-top: 0;
}

.rvw-legal__body h2 {
  margin: 2.75rem 0 1rem;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-heading);
  scroll-margin-top: 6rem;
}

.rvw-legal__body h3 {
  margin: 2rem 0 0.75rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-heading);
}

.rvw-legal__body p {
  margin: 0 0 1.5rem;
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--text-primary);
}

.rvw-legal__body strong,
.rvw-legal__body b {
  color: var(--text-heading);
  font-weight: 700;
}

.rvw-legal__body a {
  color: var(--green-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rvw-legal__body a:hover {
  color: var(--green-800);
}

.rvw-legal__body ul,
.rvw-legal__body ol {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.rvw-legal__body li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.6rem;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--text-primary);
}

.rvw-legal__body ul li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.72em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--green-600);
}

.rvw-legal__body ol {
  counter-reset: rvleg;
}

.rvw-legal__body ol li {
  counter-increment: rvleg;
}

.rvw-legal__body ol li::before {
  content: counter(rvleg) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--green-700);
}