/* ==========================================================================
   Riley Phinisi — Inner Page Design System
   Self-contained section library used by page-templates/*.php
   Black & gold identity, matched to front-page.php / templates/header.php
   ========================================================================== */

.rp-page {
  --rp-black: #000000;
  --rp-deep: #0a0a0a;
  --rp-panel: #121212;
  --rp-panel-2: #191919;
  --rp-gold: #c4a265;
  --rp-gold-soft: #dcc08d;
  --rp-gold-dark: #a68a50;
  --rp-line: rgba(196, 162, 101, 0.2);
  --rp-line-soft: rgba(255, 255, 255, 0.07);
  --rp-white: #ffffff;
  --rp-text: #cbc6be;
  --rp-dim: #97918a;
  --rp-radius: 4px;
  --rp-shell: min(1200px, 100% - 2.5rem);
  --rp-serif: "Philosopher", "Times New Roman", serif;
  --rp-sans: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  background: var(--rp-black);
  color: var(--rp-text);
  font-family: var(--rp-sans);
  font-size: 16px;
  line-height: 1.75;
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Base resets inside the page shell (Tailwind preflight strips these)
   -------------------------------------------------------------------------- */

/* The theme's compiled Tailwind bundle forces `b, i, li, strong { color: #000 }`
   in @layer base for the original light design. Inside the page shell that
   would black out list text and icons, so inheritance is restored here first
   and the rules below re-colour what needs it. */
.rp-page :where(b, i, li, span, strong) {
  color: inherit;
}

.rp-page :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--rp-serif);
  color: var(--rp-white);
  /* The base layer pins every heading to Philosopher 300 with !important, so
     this value only applies if that rule is ever lifted. 400 is what the font
     actually resolves to today — keep the two in step. */
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;
}

.rp-page :where(p) {
  margin: 0 0 1.05em;
  color: var(--rp-text);
}

.rp-page :where(p):last-child {
  margin-bottom: 0;
}

.rp-page :where(strong) {
  color: var(--rp-white);
  font-weight: 600;
}

.rp-page :where(em) {
  color: var(--rp-gold-soft);
  font-style: italic;
}

.rp-page :where(a) {
  color: var(--rp-gold);
  text-decoration: none;
  transition: color 0.25s ease;
}

.rp-page :where(a:hover) {
  color: var(--rp-gold-soft);
}

.rp-page :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}

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

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

.rp-shell--narrow {
  width: min(900px, 100% - 2.5rem);
}

/* p, span and a are forced to Barlow with !important in the theme's base
   layer. The elements below are display type, so they have to override in
   kind to keep the serif. */
.rp-page :is(
  .rp-lead__answer,
  .rp-card__num,
  .rp-contact__value,
  .rp-related__title,
  .rp-steps__index,
  .rp-quote__text,
  .rp-stats__value
) {
  font-family: var(--rp-serif) !important;
}

/* --------------------------------------------------------------------------
   Shared section furniture
   -------------------------------------------------------------------------- */

.rp-sec {
  position: relative;
  padding-block: clamp(3.25rem, 7vw, 6rem);
  background: var(--rp-black);
  overflow: hidden;
}

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

.rp-sec--wash {
  background:
    radial-gradient(circle at 12% 0%, rgba(196, 162, 101, 0.09), transparent 55%),
    radial-gradient(circle at 88% 100%, rgba(196, 162, 101, 0.06), transparent 55%),
    var(--rp-deep);
}

/* hairline divider between stacked sections */
.rp-sec + .rp-sec::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rp-line), transparent);
}

.rp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
  font-family: var(--rp-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rp-gold);
}

.rp-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--rp-gold);
  opacity: 0.7;
}

.rp-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.rp-head--center {
  margin-inline: auto;
  text-align: center;
}

.rp-head--center .rp-eyebrow::before {
  display: none;
}

.rp-title {
  font-size: clamp(1.65rem, 3.4vw, 2.6rem);
}

.rp-title em {
  color: var(--rp-gold);
  font-style: italic;
}

.rp-intro {
  margin-top: 1rem;
  font-size: 1.02rem;
  color: var(--rp-dim);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.rp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--rp-gold);
  border-radius: 999px;
  font-family: var(--rp-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
}

.rp-btn i {
  font-size: 1.05rem;
}

.rp-btn--solid {
  background: linear-gradient(135deg, var(--rp-gold) 0%, var(--rp-gold-dark) 100%);
  color: #14100a;
}

.rp-btn--solid:hover {
  color: #14100a;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(196, 162, 101, 0.28);
}

.rp-btn--ghost {
  background: rgba(196, 162, 101, 0.07);
  color: var(--rp-gold);
}

.rp-btn--ghost:hover {
  background: var(--rp-gold);
  color: #14100a;
  transform: translateY(-2px);
}

.rp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.75rem;
}

/* --------------------------------------------------------------------------
   Page hero
   -------------------------------------------------------------------------- */

.rp-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(23rem, 62vh, 34rem);
  padding-top: clamp(7rem, 16vw, 10.5rem);
  padding-bottom: clamp(2.75rem, 6vw, 4.5rem);
  overflow: hidden;
  background: var(--rp-black);
  isolation: isolate;
}

.rp-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.rp-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}

.rp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.4) 34%, rgba(0, 0, 0, 0.78) 74%, rgba(0, 0, 0, 0.95) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.25) 55%, transparent 78%);
}

.rp-hero__inner {
  position: relative;
  width: var(--rp-shell);
  margin-inline: auto;
}

.rp-crumb {
  margin-bottom: 1.15rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--rp-dim);
}

.rp-crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.rp-crumb li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--rp-gold);
  opacity: 0.55;
}

.rp-crumb a {
  color: #c9c4bc;
}

.rp-crumb a:hover {
  color: var(--rp-gold);
}

.rp-crumb [aria-current] {
  color: var(--rp-white);
}

.rp-hero__title {
  max-width: 20ch;
  font-size: clamp(2.1rem, 5.6vw, 3.9rem);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}

.rp-hero__tagline {
  max-width: 46rem;
  margin-top: 1.1rem;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: #ddd8d0;
}

.rp-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  margin-top: 1.6rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--rp-line);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* The hero photo can be bright behind this row, so keep it near-white and
     shadowed rather than the dimmed grey used on solid backgrounds. */
  color: #e8e4dd;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}

.rp-hero__meta li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rp-hero__meta i {
  color: var(--rp-gold);
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Lead — the answer block directly under the hero
   -------------------------------------------------------------------------- */

.rp-lead__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: start;
}

.rp-lead__aside .rp-title {
  font-size: clamp(1.5rem, 2.9vw, 2.15rem);
}

.rp-lead__answer {
  font-family: var(--rp-serif);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.55;
  color: var(--rp-white);
  padding-left: 1.35rem;
  border-left: 2px solid var(--rp-gold);
}

.rp-lead__body > p + p {
  color: var(--rp-text);
}

/* --------------------------------------------------------------------------
   Split — image beside text
   -------------------------------------------------------------------------- */

.rp-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
}

.rp-split--flip .rp-split__media {
  order: 2;
}

.rp-split__media {
  position: relative;
  margin: 0;
  border-radius: var(--rp-radius);
  overflow: hidden;
  border: 1px solid var(--rp-line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.rp-split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.rp-split__media:hover img {
  transform: scale(1.045);
}

.rp-split__media figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.6rem 1.15rem 0.9rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85));
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: #e7e2da;
}

.rp-split__body > p + p {
  margin-top: 0;
}

/* Fact rows inside a split body */
.rp-facts {
  margin-top: 1.5rem;
  border-top: 1px solid var(--rp-line);
}

.rp-facts__row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.5fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rp-line-soft);
  font-size: 0.94rem;
}

.rp-facts__row dt {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rp-gold);
  padding-top: 0.15rem;
}

.rp-facts__row dd {
  margin: 0;
  color: var(--rp-white);
}

/* --------------------------------------------------------------------------
   Stat strip
   -------------------------------------------------------------------------- */

.rp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--rp-line);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-radius);
  overflow: hidden;
}

.rp-stats__item {
  padding: clamp(1.4rem, 3vw, 2.1rem) 1.25rem;
  background: var(--rp-panel);
  text-align: center;
}

.rp-stats__value {
  font-family: var(--rp-serif);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--rp-gold);
}

.rp-stats__value span {
  font-size: 0.5em;
  margin-left: 0.15em;
  color: var(--rp-gold-dark);
}

.rp-stats__label {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rp-dim);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.rp-cards {
  display: grid;
  gap: clamp(1.15rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.rp-cards[data-cols="2"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.rp-cards[data-cols="4"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.rp-card {
  display: flex;
  flex-direction: column;
  background: var(--rp-panel);
  border: 1px solid var(--rp-line-soft);
  border-radius: var(--rp-radius);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease, box-shadow 0.4s ease;
}

.rp-card:hover {
  transform: translateY(-6px);
  border-color: var(--rp-line);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6);
}

.rp-card__media {
  position: relative;
  overflow: hidden;
  background: var(--rp-panel-2);
}

.rp-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.rp-card:hover .rp-card__media img {
  transform: scale(1.06);
}

.rp-card__tag {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid var(--rp-line);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rp-gold);
  backdrop-filter: blur(4px);
}

.rp-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.3rem 1.35rem 1.45rem;
}

.rp-card__title {
  font-size: 1.2rem;
  margin-bottom: 0.55rem;
}

.rp-card__text {
  font-size: 0.94rem;
  color: var(--rp-dim);
}

.rp-card__meta {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--rp-gold);
}

.rp-card__list {
  margin-top: 1rem;
  display: grid;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: var(--rp-text);
}

.rp-card__list li {
  position: relative;
  padding-left: 1.35rem;
}

.rp-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rp-gold);
}

/* Icon-only card variant (no image) */
.rp-card--plain .rp-card__body {
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
}

.rp-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1.05rem;
  border-radius: 50%;
  border: 1px solid var(--rp-line);
  background: rgba(196, 162, 101, 0.08);
  color: var(--rp-gold);
  font-size: 1.25rem;
}

.rp-card__num {
  font-family: var(--rp-serif);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--rp-gold);
  margin-bottom: 0.7rem;
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.rp-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.9rem;
}

.rp-gallery__item {
  position: relative;
  margin: 0;
  border-radius: var(--rp-radius);
  overflow: hidden;
  border: 1px solid var(--rp-line-soft);
}

.rp-gallery__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.rp-gallery__item:hover img {
  transform: scale(1.06);
}

.rp-gallery__item figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2rem 1rem 0.85rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.88));
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: #ece7df;
}

@media (min-width: 900px) {
  .rp-gallery {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 12.5rem;
  }

  .rp-gallery__item {
    grid-column: span 2;
  }

  .rp-gallery__item img {
    aspect-ratio: auto;
  }

  .rp-gallery__item--wide {
    grid-column: span 4;
    grid-row: span 2;
  }

  .rp-gallery__item--tall {
    grid-row: span 2;
  }
}

/* --------------------------------------------------------------------------
   Steps / itinerary timeline
   -------------------------------------------------------------------------- */

.rp-steps {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
}

.rp-steps__item {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.25rem, 3.5vw, 2.75rem);
  align-items: center;
  padding-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--rp-line-soft);
}

.rp-steps__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.rp-steps__item:nth-child(even) .rp-steps__media {
  order: 2;
}

.rp-steps__media {
  position: relative;
  margin: 0;
  border-radius: var(--rp-radius);
  overflow: hidden;
  border: 1px solid var(--rp-line);
}

.rp-steps__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.rp-steps__media:hover img {
  transform: scale(1.05);
}

.rp-steps__index {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  background: linear-gradient(135deg, var(--rp-gold) 0%, var(--rp-gold-dark) 100%);
  color: #14100a;
  font-family: var(--rp-serif);
  font-size: 1.2rem;
  font-weight: 700;
}

.rp-steps__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rp-gold);
  margin-bottom: 0.55rem;
}

.rp-steps__title {
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  margin-bottom: 0.75rem;
}

.rp-steps__text {
  font-size: 0.97rem;
  color: var(--rp-dim);
}

.rp-steps__stops {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.rp-steps__stops li {
  padding: 0.34rem 0.85rem;
  border: 1px solid var(--rp-line);
  border-radius: 999px;
  background: rgba(196, 162, 101, 0.06);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--rp-text);
}

/* --------------------------------------------------------------------------
   Table
   -------------------------------------------------------------------------- */

.rp-table__scroll {
  overflow-x: auto;
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-radius);
  background: var(--rp-panel);
  -webkit-overflow-scrolling: touch;
}

.rp-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.rp-table thead th {
  padding: 1rem 1.15rem;
  background: linear-gradient(135deg, rgba(196, 162, 101, 0.18), rgba(196, 162, 101, 0.06));
  border-bottom: 1px solid var(--rp-line);
  font-family: var(--rp-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rp-gold);
  text-align: left;
  white-space: nowrap;
}

.rp-table tbody th,
.rp-table tbody td {
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--rp-line-soft);
  text-align: left;
  vertical-align: top;
}

.rp-table tbody th {
  font-family: var(--rp-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--rp-white);
  white-space: nowrap;
}

.rp-table tbody td {
  color: var(--rp-text);
}

.rp-table tbody tr:last-child th,
.rp-table tbody tr:last-child td {
  border-bottom: 0;
}

.rp-table tbody tr {
  transition: background-color 0.25s ease;
}

.rp-table tbody tr:hover {
  background: rgba(196, 162, 101, 0.05);
}

.rp-table__price {
  color: var(--rp-gold) !important;
  font-weight: 600;
  white-space: nowrap;
}

.rp-table__note {
  margin-top: 0.95rem;
  font-size: 0.83rem;
  color: var(--rp-dim);
}

/* --------------------------------------------------------------------------
   Checklist — included / excluded
   -------------------------------------------------------------------------- */

.rp-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
}

.rp-checklist__col {
  padding: clamp(1.4rem, 2.8vw, 2rem);
  background: var(--rp-panel);
  border: 1px solid var(--rp-line-soft);
  border-radius: var(--rp-radius);
}

.rp-checklist__col h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.15rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rp-line-soft);
  font-size: 1.1rem;
}

.rp-checklist__col ul {
  display: grid;
  gap: 0.7rem;
  font-size: 0.94rem;
}

.rp-checklist__col li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--rp-text);
}

.rp-checklist__col li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--rp-sans);
  font-weight: 700;
}

.rp-checklist__col--in {
  border-color: var(--rp-line);
}

.rp-checklist__col--in h3 {
  color: var(--rp-gold);
}

.rp-checklist__col--in li::before {
  content: "✓";
  color: var(--rp-gold);
}

.rp-checklist__col--out h3 {
  color: var(--rp-dim);
}

.rp-checklist__col--out li::before {
  content: "×";
  color: #6f6a63;
  font-size: 1.1rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */

.rp-faq {
  display: grid;
  gap: 0.7rem;
}

.rp-faq__item {
  background: var(--rp-panel);
  border: 1px solid var(--rp-line-soft);
  border-radius: var(--rp-radius);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.rp-faq__item[open] {
  border-color: var(--rp-line);
  background: var(--rp-panel-2);
}

.rp-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.1rem 1.35rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--rp-serif);
  font-size: 1.03rem;
  font-weight: 700;
  color: var(--rp-white);
  transition: color 0.25s ease;
}

.rp-faq__q::-webkit-details-marker {
  display: none;
}

.rp-faq__q:hover {
  color: var(--rp-gold);
}

.rp-faq__q::after {
  content: "+";
  flex: none;
  font-family: var(--rp-sans);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--rp-gold);
  transition: transform 0.3s ease;
}

.rp-faq__item[open] .rp-faq__q {
  color: var(--rp-gold);
}

.rp-faq__item[open] .rp-faq__q::after {
  content: "−";
  transform: rotate(180deg);
}

.rp-faq__a {
  padding: 0 1.35rem 1.25rem;
  font-size: 0.95rem;
  color: var(--rp-dim);
}

.rp-faq__a p + p {
  margin-top: 0.85rem;
}

/* grouped FAQ (for the 100-question page) */
.rp-faq-group + .rp-faq-group {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.rp-faq-group__title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
  font-size: 1.25rem;
  color: var(--rp-gold);
}

.rp-faq-group__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rp-line);
}

/* --------------------------------------------------------------------------
   Prose block — for long-form content rendered from the editor
   -------------------------------------------------------------------------- */

.rp-prose {
  font-size: 1.02rem;
}

.rp-prose h2 {
  margin: 2.4rem 0 1rem;
  font-size: clamp(1.45rem, 2.8vw, 1.95rem);
}

.rp-prose h3 {
  margin: 2rem 0 0.85rem;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  color: var(--rp-gold);
}

.rp-prose h4 {
  margin: 1.6rem 0 0.7rem;
  font-size: 1.08rem;
}

.rp-prose > :first-child {
  margin-top: 0;
}

.rp-prose ul,
.rp-prose ol {
  margin: 0 0 1.15rem;
  display: grid;
  gap: 0.55rem;
}

.rp-prose ul li {
  position: relative;
  padding-left: 1.5rem;
}

.rp-prose ul li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rp-gold);
}

.rp-prose ol {
  counter-reset: rp-ol;
}

.rp-prose ol li {
  position: relative;
  padding-left: 2rem;
  counter-increment: rp-ol;
}

.rp-prose ol li::before {
  content: counter(rp-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--rp-gold);
}

.rp-prose blockquote {
  margin: 1.75rem 0;
  padding: 0.35rem 0 0.35rem 1.4rem;
  border-left: 2px solid var(--rp-gold);
  font-family: var(--rp-serif);
  font-size: 1.15rem;
  color: var(--rp-white);
}

.rp-prose table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  font-size: 0.93rem;
}

.rp-prose th,
.rp-prose td {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--rp-line-soft);
  text-align: left;
}

.rp-prose th {
  background: rgba(196, 162, 101, 0.09);
  color: var(--rp-gold);
}

.rp-prose img {
  margin: 1.75rem 0;
  border-radius: var(--rp-radius);
  border: 1px solid var(--rp-line-soft);
}

.rp-prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(196, 162, 101, 0.4);
}

/* --------------------------------------------------------------------------
   Quotes / testimonials
   -------------------------------------------------------------------------- */

.rp-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1rem, 2.4vw, 1.6rem);
}

.rp-quote {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.8vw, 2rem);
  background: var(--rp-panel);
  border: 1px solid var(--rp-line-soft);
  border-radius: var(--rp-radius);
  transition: border-color 0.35s ease, transform 0.35s ease;
}

.rp-quote:hover {
  border-color: var(--rp-line);
  transform: translateY(-4px);
}

.rp-quote__stars {
  display: flex;
  gap: 0.2rem;
  margin-bottom: 0.9rem;
  color: var(--rp-gold);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
}

.rp-quote__text {
  flex: 1;
  font-family: var(--rp-serif);
  font-size: 1.03rem;
  line-height: 1.65;
  color: #e4dfd7;
}

.rp-quote__by {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rp-line-soft);
}

.rp-quote__avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rp-line);
}

.rp-quote__name {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--rp-white);
}

.rp-quote__from {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rp-dim);
}

/* --------------------------------------------------------------------------
   Contact panel
   -------------------------------------------------------------------------- */

.rp-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1rem, 2.4vw, 1.5rem);
}

.rp-contact__item {
  display: block;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  background: var(--rp-panel);
  border: 1px solid var(--rp-line-soft);
  border-radius: var(--rp-radius);
  transition: border-color 0.35s ease, transform 0.35s ease,
    background-color 0.35s ease;
}

a.rp-contact__item:hover {
  border-color: var(--rp-gold);
  background: var(--rp-panel-2);
  transform: translateY(-4px);
}

.rp-contact__item i {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 1.5rem;
  color: var(--rp-gold);
}

.rp-contact__label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rp-dim);
  margin-bottom: 0.35rem;
}

.rp-contact__value {
  font-family: var(--rp-serif);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--rp-white);
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.rp-cta {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7rem);
  background-size: cover;
  background-position: center;
  isolation: isolate;
  text-align: center;
}

.rp-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Was 0.9/0.72/0.94, then 0.92/0.86/0.94 — still not enough over the
     brightest part of a sunset photo (the glow right at the horizon), which
     is exactly where the ghost button tends to land. Gradient no longer dips
     below ~0.92 anywhere, so the photo now only ever reads as texture, never
     as color that can compete with the gold text/button sitting on it. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.96));
}

.rp-cta__inner {
  position: relative;
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 5vw, 3.25rem);
  /* Extra layer, on top of the already-darkened photo (.rp-cta::before): a
     solid dark card behind the eyebrow/title/text/button block itself, so
     legibility never depends on how bright or gold-toned the photo is. */
  background: rgba(6, 5, 3, 0.6);
  border-radius: 14px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.rp-cta__inner .rp-eyebrow::before {
  display: none;
}

.rp-cta__text {
  margin-top: 1.15rem;
  font-size: 1.03rem;
  color: #d7d2ca;
}

.rp-cta .rp-actions {
  justify-content: center;
}

/* The ghost button (mail link) reads gold-on-near-transparent, so on solid
   panels elsewhere in the theme it borrows whatever's behind it. Over a
   photo that's the one thing it can't afford — give it its own solid dark
   plate here so it stays legible no matter how bright the image is. */
.rp-cta .rp-btn--ghost {
  background: rgba(8, 6, 4, 0.78);
  border-color: var(--rp-gold);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.rp-cta .rp-btn--ghost:hover {
  background: var(--rp-gold);
  border-color: var(--rp-gold);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.rp-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.rp-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.7rem;
  border: 1px solid var(--rp-line-soft);
  border-radius: var(--rp-radius);
  background: var(--rp-panel);
  font-size: 0.9rem;
  color: var(--rp-text);
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.rp-pagination a.page-numbers:hover {
  border-color: var(--rp-gold);
  color: var(--rp-gold);
}

.rp-pagination .page-numbers.current {
  background: var(--rp-gold);
  border-color: var(--rp-gold);
  color: #14100a;
  font-weight: 600;
}

.rp-pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
}

/* --------------------------------------------------------------------------
   Article header — single posts
   -------------------------------------------------------------------------- */

.rp-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.5rem 0 0;
  padding-top: 1.35rem;
  border-top: 1px solid var(--rp-line);
  font-size: 0.82rem;
  color: var(--rp-dim);
}

.rp-article__meta li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.rp-article__meta i {
  color: var(--rp-gold);
  font-size: 1rem;
}

.rp-article__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rp-line);
}

.rp-article__figure {
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--rp-radius);
  overflow: hidden;
  border: 1px solid var(--rp-line);
}

.rp-article__figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Related pages
   -------------------------------------------------------------------------- */

.rp-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.9rem;
}

.rp-related__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 1.25rem 1.35rem;
  background: var(--rp-panel);
  border: 1px solid var(--rp-line-soft);
  border-radius: var(--rp-radius);
  transition: border-color 0.35s ease, transform 0.35s ease;
}

.rp-related__item:hover {
  border-color: var(--rp-gold);
  transform: translateY(-4px);
}

.rp-related__title {
  font-family: var(--rp-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--rp-white);
}

.rp-related__desc {
  font-size: 0.86rem;
  color: var(--rp-dim);
}

.rp-related__go {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rp-gold);
}

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

@media (prefers-reduced-motion: no-preference) {
  /* .rp-js is set by an inline script the moment <main> opens, so the hidden
     state never applies when JavaScript is unavailable. */
  .rp-page.rp-js .rp-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .rp-page.rp-js .rp-reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .rp-lead__grid,
  .rp-split,
  .rp-steps__item {
    grid-template-columns: minmax(0, 1fr);
  }

  .rp-split--flip .rp-split__media,
  .rp-steps__item:nth-child(even) .rp-steps__media {
    order: 0;
  }

  .rp-lead__answer {
    padding-left: 1.05rem;
  }
}

@media (max-width: 600px) {
  .rp-page {
    --rp-shell: min(1200px, 100% - 2rem);
  }

  .rp-hero {
    min-height: 20rem;
    align-items: flex-end;
  }

  .rp-hero__title {
    max-width: none;
  }

  .rp-facts__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }

  .rp-btn {
    width: 100%;
  }

  .rp-actions {
    flex-direction: column;
  }

  .rp-steps__index {
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1rem;
  }
}