/* =============================================================
   RAYC homepage sections, rebuilt on the hero's design language.
   Tokens live in assets/css/tokens.css. Enqueued last so these rules
   beat the Tailwind base layer, which hardcodes colours on bare
   elements (`p`, `span`, `i`) and would otherwise repaint them white.
   ============================================================= */

/* -------------------------------------------------------------
   Trust stats band

   Was a rounded-3xl card with a heavy shadow — SaaS-landing-page
   language sitting directly under an editorial hero. Rebuilt as a
   full-bleed rule-and-hairline band, which is the same restraint
   the hero's own itinerary timeline uses: no box, no shadow, just
   type separated by lines.

   Gutter and vertical rhythm come from the hero's own clamp()
   values, so the band tracks the hero's edges at every width
   instead of snapping at Tailwind breakpoints.
   ------------------------------------------------------------- */
.rayc-stats {
  padding: 0;
  background: var(--rayc-surface);
}

.rayc-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rayc-line);
  border-bottom: 1px solid var(--rayc-line);
}

.rayc-stats__item {
  padding: clamp(1.6rem, 3vw, 2.6rem) clamp(0.75rem, 2vw, 1.5rem);
  text-align: center;
  border-left: 1px solid var(--rayc-line-soft);
}

/* Dividers sit *between* cells, so the leading cell of each row carries
   none. Two per row on small screens, four from md up. */
.rayc-stats__item:nth-child(2n + 1) { border-left: 0; }
.rayc-stats__item:nth-child(n + 3)  { border-top: 1px solid var(--rayc-line-soft); }

@media (min-width: 768px) {
  .rayc-stats__grid { grid-template-columns: repeat(4, 1fr); }
  .rayc-stats__item:nth-child(2n + 1) { border-left: 1px solid var(--rayc-line-soft); }
  .rayc-stats__item:nth-child(4n + 1) { border-left: 0; }
  .rayc-stats__item:nth-child(n + 3)  { border-top: 0; }
}

.rayc-stats__number {
  margin: 0;
  font-family: 'Domine', Georgia, serif;
  /* 500, not the old 700 — the hero title sets the house weight. */
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--rayc-gold);
}

.rayc-stats__label {
  margin: clamp(0.6rem, 1vw, 0.9rem) 0 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(0.62rem, 0.9vw, 0.72rem);
  /* Matches the header bar's nav tracking, so the two read as one system. */
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rayc-text-dim);
}

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

   Every section header on this page used to be the identical
   centred eyebrow + bold serif pair, nine times over. These give
   the same components an editorial default — left-aligned, closed
   by a hairline — so sections can differ without being redesigned
   one by one.
   ------------------------------------------------------------- */
.rayc-eyebrow {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(0.62rem, 0.9vw, 0.72rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rayc-gold);
}

.rayc-title {
  margin: clamp(0.7rem, 1.2vw, 1.1rem) 0 0;
  font-family: 'Domine', Georgia, serif;
  /* 500, tracked out — the hero's voice, not the old bold-and-tight. */
  font-weight: 500;
  font-size: clamp(1.75rem, 3.4vw, 2.9rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--rayc-ivory);
  max-width: 24ch;
}

/* -------------------------------------------------------------
   About — intro
   ------------------------------------------------------------- */
/* Sections all sit on --rayc-surface. --rayc-raised means "lifted off the
   page" — cards, dropdowns, the menu sheet — so using it as a section
   background muddles that and, with the slate palette, draws a hard seam
   between one section and the next. Separation here is the job of the
   hairlines and the --rayc-section rhythm, which already do it. */
.rayc-about-video {
  padding: var(--rayc-section) var(--rayc-gutter);
  background: var(--rayc-surface);
}
.rayc-about-video__head {
  padding-bottom: clamp(1.6rem, 2.6vw, 2.6rem);
  border-bottom: 1px solid var(--rayc-line);
}
.rayc-about-video__media { margin-top: clamp(2.2rem, 4vw, 3.75rem); }

.rayc-about__video {
  overflow: hidden;
  border-radius: var(--rayc-radius);
  border: 1px solid var(--rayc-line);
  background: var(--rayc-surface);
  aspect-ratio: 16 / 9;
}
.rayc-about__video wistia-player {
  display: block;
  width: 100%;
  height: 100%;
}
/* Before the custom element upgrades, Wistia's own poster frame stands in,
   blurred. The swatch URL arrives as --rayc-wistia-swatch on the wrapper, so
   the media id lives in the template only and this rule stays generic. */
.rayc-about__video wistia-player:not(:defined) {
  display: block;
  aspect-ratio: 16 / 9;
  background: center / cover no-repeat var(--rayc-wistia-swatch);
  filter: blur(5px);
}

/* -------------------------------------------------------------
   Services — fleet & programs

   The stock card (picture, then heading, then paragraph, then a
   link) is what every template ships. This is the hero's move
   instead: a tall portrait plate with the type living *on* the
   image behind a scrim, opened by a gold index numeral — the same
   Domine numerals as the stats band and the hero's route markers.
   Nothing new enters the vocabulary; it is only arranged with more
   nerve.
   ------------------------------------------------------------- */
.rayc-services {
  padding: var(--rayc-section) var(--rayc-gutter);
  background: var(--rayc-surface);
  /* Clears the fixed header when the bar's "What We Do" link jumps here. */
  scroll-margin-top: 6rem;
}

/* Controls sit in the header beside the title, not floating over the
   artwork — the pictures stay uninterrupted. */
.rayc-services__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rayc-gap);
  padding-bottom: clamp(1.6rem, 2.6vw, 2.6rem);
  border-bottom: 1px solid var(--rayc-line);
}
.rayc-services__nav {
  display: none;
  flex-shrink: 0;
  gap: 0.6rem;
}
@media (min-width: 640px) { .rayc-services__nav { display: flex; } }

.rayc-navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-pill);
  background: transparent;
  color: var(--rayc-sand);
  cursor: pointer;
  transition: color var(--rayc-ease), background var(--rayc-ease),
              border-color var(--rayc-ease);
}
.rayc-navbtn i { color: inherit; font-size: 1.1rem; }
.rayc-navbtn:hover {
  background: var(--rayc-gold);
  border-color: var(--rayc-gold);
  color: var(--rayc-ink);
}
.rayc-navbtn.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.rayc-services__lede {
  max-width: 52ch;
  margin: clamp(0.9rem, 1.6vw, 1.3rem) 0 0;
  font-family: 'Jost', sans-serif;
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.8;
  color: var(--rayc-text-dim);
}

.rayc-services__swiper {
  margin-top: clamp(2.2rem, 4vw, 3.75rem);
}
.rayc-services__swiper .swiper-wrapper {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Cards now carry a full day-by-day list rather than a clamped one-line
     desc, so slide height varies with content — stretch every slide in the
     row to the tallest so uneven photo+body stacks still line up. */
  align-items: stretch;
}

/* ---- The plate ---- */
.rayc-service { height: auto; }

.rayc-service__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  text-decoration: none;
  transition: transform var(--rayc-ease);
}
.rayc-service__link:hover { transform: translateY(var(--rayc-lift)); }

.rayc-service__media {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--rayc-radius) var(--rayc-radius) 0 0;
  border: 1px solid var(--rayc-line);
  border-bottom: 0;
  background: var(--rayc-raised);
  transition: border-color var(--rayc-ease);
}
.rayc-service__link:hover .rayc-service__media { border-color: var(--rayc-gold); }

.rayc-service__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.rayc-service__link:hover .rayc-service__img { transform: scale(1.05); }

/* Only the foot needs protecting now — the tag is the one line of copy
   sitting on the photo, everything else lives on the card body below. */
.rayc-service__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(15, 24, 33, 0.85) 0%,
              rgba(15, 24, 33, 0.5) 30%,
              rgba(15, 24, 33, 0) 60%);
}

/* Empty slot: the card's own icon on the raised panel, so a half-filled
   dataset still reads as designed. */
.rayc-service__placeholder {
  position: absolute;
  inset: 0;
  /* Above the scrim, below the copy: the scrim exists to protect text over a
     photograph, and dimming the stand-in icon with it only makes the empty
     state look broken rather than pending. */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rayc-service__placeholder i {
  font-size: clamp(2rem, 3.4vw, 3rem);
  color: var(--rayc-gold);
  opacity: 0.55;
}

.rayc-service__tag {
  position: absolute;
  z-index: 2;
  left: clamp(1.1rem, 1.8vw, 1.6rem);
  bottom: clamp(0.9rem, 1.5vw, 1.3rem);
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(0.6rem, 0.82vw, 0.68rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rayc-gold);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.rayc-service__body {
  flex: 1;
  padding: clamp(1.1rem, 1.8vw, 1.6rem);
  border: 1px solid var(--rayc-line);
  border-top: 0;
  border-radius: 0 0 var(--rayc-radius) var(--rayc-radius);
  background: var(--rayc-raised);
  transition: border-color var(--rayc-ease);
}
.rayc-service__link:hover .rayc-service__body { border-color: var(--rayc-gold); }

.rayc-service__title {
  margin: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--rayc-ivory);
  transition: color var(--rayc-ease);
}
.rayc-service__link:hover .rayc-service__title { color: var(--rayc-gold-lt); }

.rayc-service__meta {
  margin: 0.5rem 0 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rayc-text-dim);
}

.rayc-service__days {
  margin: clamp(0.9rem, 1.5vw, 1.2rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--rayc-line);
}
.rayc-service__days li {
  display: flex;
  gap: 0.7rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--rayc-line-soft);
  font-family: 'Jost', sans-serif;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--rayc-text);
}
.rayc-service__days li:last-child { border-bottom: 0; }
.rayc-service__day {
  flex-shrink: 0;
  min-width: 2.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--rayc-gold);
}

.rayc-service__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(0.9rem, 1.4vw, 1.2rem);
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(0.6rem, 0.82vw, 0.68rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rayc-gold);
}
.rayc-service__more i {
  color: inherit;
  font-size: 1.1em;
  transition: transform var(--rayc-ease);
}
.rayc-service__link:hover .rayc-service__more i { transform: translateX(4px); }

/* Domine/Jost are the only fonts this theme actually loads (hooks/init-font.php)
   — no monospace family is enqueued, so this stays on Jost rather than
   naming a font that would silently fall back. */
.rayc-services__note {
  margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 0;
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--rayc-text-dim);
}

/* ---- Progress ----
   A filling hairline rather than dots: with six plates and a fractional
   viewport, a bar reports position honestly where dots cannot. Swiper places
   its progressbar absolutely, so these pull it back into flow. */
.rayc-services .rayc-services__progress {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: 1px;
  margin-top: clamp(1.6rem, 2.6vw, 2.4rem);
  background: var(--rayc-line);
}
.rayc-services .rayc-services__progress .swiper-pagination-progressbar-fill {
  background: var(--rayc-gold);
}

/* -------------------------------------------------------------
   Fleet showcase

   First pass at this section copied its reference too literally —
   full-bleed edge-to-edge strip, centred header, name-and-stats
   caption overlaid on the photo with a vertical divider. Rebuilt to
   read as this site rather than that one: house left-aligned
   rule-and-hairline header (matching Services/Why/Coverage/Process/
   Destinations, no more centred exception), the carousel contained
   inside the gutter like Services, and — the real structural change —
   the photo and the vessel's specs are no longer the same surface.
   The image sits in its own frame; the name and cabin/guest counts
   live *below* it as a small stats band, echoing .rayc-stats'
   numeral-over-label pairing rather than the reference's caption-on-
   scrim treatment (already used twice on this page, by Services and
   Destinations — a third repeat would flatten the page's variety
   rather than add to it).
   ------------------------------------------------------------- */
.rayc-fleet {
  padding: var(--rayc-section) var(--rayc-gutter);
  background: var(--rayc-surface);
}

.rayc-fleet__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rayc-gap);
  padding-bottom: clamp(1.6rem, 2.6vw, 2.6rem);
  border-bottom: 1px solid var(--rayc-line);
}

.rayc-fleet__subtitle {
  margin: clamp(0.7rem, 1.2vw, 1rem) 0 0;
  max-width: 42ch;
  font-family: 'Jost', sans-serif;
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  line-height: 1.7;
  color: var(--rayc-text-dim);
}

.rayc-fleet__nav {
  display: none;
  flex-shrink: 0;
  gap: 0.6rem;
}
@media (min-width: 640px) { .rayc-fleet__nav { display: flex; } }

.rayc-fleet__swiper {
  margin-top: clamp(2.2rem, 4vw, 3.75rem);
}
.rayc-fleet__swiper .swiper-wrapper {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rayc-fleet__item { height: auto; }

.rayc-fleet__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

.rayc-fleet__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayc-radius);
  border: 1px solid var(--rayc-line);
  background: var(--rayc-raised);
  aspect-ratio: 4 / 5;
  transition: border-color var(--rayc-ease);
}
.rayc-fleet__link:hover .rayc-fleet__media { border-color: var(--rayc-gold); }

.rayc-fleet__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.rayc-fleet__link:hover .rayc-fleet__img { transform: scale(1.05); }

.rayc-fleet__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rayc-fleet__placeholder i {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--rayc-gold);
  opacity: 0.5;
}

/* ---- Specs — below the photo, not on it ---- */
.rayc-fleet__body {
  padding-top: clamp(0.9rem, 1.5vw, 1.25rem);
  margin-top: clamp(0.9rem, 1.5vw, 1.25rem);
  border-top: 1px solid var(--rayc-line);
}

.rayc-fleet__name {
  margin: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  line-height: 1.3;
  color: var(--rayc-ivory);
  transition: color var(--rayc-ease);
}
.rayc-fleet__link:hover .rayc-fleet__name { color: var(--rayc-gold); }

/* Single inline line — length · guests · cabins · type — rather than the
   old paired number boxes, so length and type (added 2026-08-11) have
   somewhere to live without a third stat box competing for space. */
.rayc-fleet__meta {
  margin: clamp(0.6rem, 1vw, 0.85rem) 0 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rayc-text-dim);
}

.rayc-fleet__rate {
  margin: clamp(0.7rem, 1.1vw, 0.95rem) 0 0;
  padding-top: clamp(0.7rem, 1.1vw, 0.95rem);
  border-top: 1px dashed var(--rayc-line);
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(0.92rem, 1.15vw, 1.02rem);
  color: var(--rayc-ivory);
}
.rayc-fleet__rate-note {
  display: block;
  margin-top: 0.3rem;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--rayc-text-dim);
}

.rayc-fleet .rayc-fleet__progress {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: 1px;
  margin-top: clamp(1.6rem, 2.6vw, 2.4rem);
  background: var(--rayc-line);
}
.rayc-fleet .rayc-fleet__progress .swiper-pagination-progressbar-fill {
  background: var(--rayc-gold);
}

/* -------------------------------------------------------------
   Price Ledger — Plate IV

   A bordered rate table rather than the card grids used everywhere
   else on this page, matching the "ledger" framing of the eyebrow —
   this section reads as a document, not a gallery. Rows link out
   only where a real page exists (Entry Phinisi / Ultra-superyacht /
   Cabin Charter); the four bands in between have no dedicated page
   yet and render as plain rows, same "only link what's real" rule
   as the rest of the site.
   ------------------------------------------------------------- */
.rayc-priceledger {
  padding: var(--rayc-section) var(--rayc-gutter);
  background: var(--rayc-surface);
}

.rayc-priceledger__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rayc-gap);
}

.rayc-priceledger__lede {
  max-width: 52ch;
  margin: clamp(0.9rem, 1.6vw, 1.3rem) 0 0;
  font-family: 'Jost', sans-serif;
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.8;
  color: var(--rayc-text-dim);
}

.rayc-priceledger__badge {
  flex-shrink: 0;
  margin: 0.3rem 0 0;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--rayc-gold);
  border-radius: var(--rayc-radius-sm);
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rayc-gold);
  white-space: nowrap;
}

.rayc-priceledger__table {
  margin-top: clamp(2.2rem, 4vw, 3.75rem);
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-radius-lg);
  overflow: hidden;
}

.rayc-priceledger__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
  padding: clamp(1rem, 1.6vw, 1.3rem) clamp(1.1rem, 1.8vw, 1.6rem);
  border-top: 1px solid var(--rayc-line-soft);
  text-decoration: none;
  transition: background var(--rayc-ease);
}
.rayc-priceledger__row:first-child { border-top: 0; }
a.rayc-priceledger__row:hover { background: var(--rayc-raised); }

.rayc-priceledger__row--head {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  background: var(--rayc-raised);
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rayc-text-dim);
}

.rayc-priceledger__class {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--rayc-ivory);
}
a.rayc-priceledger__row .rayc-priceledger__class { color: var(--rayc-gold); }
.rayc-priceledger__class i { font-size: 0.85em; }

.rayc-priceledger__rate {
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--rayc-gold);
}

.rayc-priceledger__note {
  font-family: 'Jost', sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--rayc-text-dim);
}

@media (min-width: 768px) {
  .rayc-priceledger__row {
    grid-template-columns: 1.1fr 1.1fr 2fr;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
  }
}

.rayc-priceledger__footnote {
  max-width: 68ch;
  margin: clamp(1.2rem, 2vw, 1.6rem) 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--rayc-text-dim);
}

.rayc-priceledger__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-top: clamp(1.2rem, 2vw, 1.6rem);
}
.rayc-priceledger__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--rayc-ivory);
  text-decoration: none;
  border-bottom: 1px solid var(--rayc-line);
  transition: border-color var(--rayc-ease), color var(--rayc-ease);
}
.rayc-priceledger__link:hover { color: var(--rayc-gold); border-bottom-color: var(--rayc-gold); }
.rayc-priceledger__link i { font-size: 0.85em; color: var(--rayc-gold); }

.rayc-extensions {
  padding: var(--rayc-section) var(--rayc-gutter);
  background: var(--rayc-panel);
}
.rayc-extensions__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rayc-gap);
}
.rayc-extensions__lede {
  max-width: 60ch;
  margin: clamp(0.9rem, 1.6vw, 1.3rem) 0 0;
  font-family: 'Jost', sans-serif;
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.8;
  color: var(--rayc-text-dim);
}
.rayc-extensions__nav {
  display: flex;
  flex-shrink: 0;
  gap: 0.6rem;
}
@media (min-width: 640px) { .rayc-extensions__nav { display: none; } }

.rayc-extensions__swiper {
  margin-top: clamp(2.2rem, 4vw, 3.75rem);
}

/* Dual-role element, same pattern as .rayc-destinations__grid: no
   `display` below 640px so Swiper governs layout, switched to
   `display:grid` only once JS has destroyed the mobile instance. */
.rayc-extensions__grid {
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 640px) {
  .rayc-extensions__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { .rayc-extensions__grid { grid-template-columns: repeat(4, 1fr); } }

.rayc-extensions .rayc-extensions__progress {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: 1px;
  margin-top: clamp(1.4rem, 2.2vw, 2rem);
  background: var(--rayc-line);
}
.rayc-extensions .rayc-extensions__progress .swiper-pagination-progressbar-fill {
  background: var(--rayc-gold);
}
@media (min-width: 640px) { .rayc-extensions__progress { display: none; } }
.rayc-extensions__card {
  position: relative;
  display: block;
  padding: clamp(1.3rem, 2vw, 1.7rem);
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-radius);
  background: var(--rayc-raised);
  text-decoration: none;
  transition: border-color var(--rayc-ease);
}
a.rayc-extensions__card:hover { border-color: var(--rayc-gold); }
.rayc-extensions__tag {
  display: block;
  text-align: right;
  margin: 0 0 0.6rem;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--rayc-text-dim);
}
.rayc-extensions__title {
  margin: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--rayc-ivory);
}
.rayc-extensions__meta {
  margin: 0.5rem 0 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rayc-text-dim);
}
.rayc-extensions__body {
  margin: clamp(0.9rem, 1.4vw, 1.2rem) 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--rayc-text);
}

/* -------------------------------------------------------------
   Process — how to book

   The old horizontal timeline (numbered circles + connecting line)
   does not carry an image gracefully. Rebuilt as a vertical list
   beside a single supporting plate — numerals only, no icon badge,
   so five rows stay scannable next to a tall photograph.
   ------------------------------------------------------------- */
.rayc-process {
  padding: var(--rayc-section) var(--rayc-gutter);
  background: var(--rayc-surface);
}

.rayc-process__head {
  padding-bottom: clamp(1.6rem, 2.6vw, 2.6rem);
  border-bottom: 1px solid var(--rayc-line);
}

.rayc-process__layout {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.2rem, 4vw, 3.75rem);
}
@media (min-width: 768px) {
  .rayc-process__layout { grid-template-columns: 7fr 5fr; }
}

.rayc-process__lede {
  max-width: 62ch;
  margin: clamp(0.9rem, 1.6vw, 1.3rem) 0 0;
  font-family: 'Jost', sans-serif;
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.8;
  color: var(--rayc-text-dim);
}

.rayc-process__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  padding-top: clamp(1.4rem, 2.2vw, 1.8rem);
  border-top: 1px solid var(--rayc-line);
}
.rayc-process__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--rayc-ivory);
  text-decoration: none;
  border-bottom: 1px solid var(--rayc-line);
  transition: border-color var(--rayc-ease), color var(--rayc-ease);
}
.rayc-process__link:hover { color: var(--rayc-gold); border-bottom-color: var(--rayc-gold); }
.rayc-process__link i { font-size: 0.85em; color: var(--rayc-gold); }

.rayc-process__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--rayc-radius);
  border: 1px solid var(--rayc-line);
  background: var(--rayc-raised);
  aspect-ratio: 4 / 3;
}
@media (min-width: 768px) {
  .rayc-process__media { aspect-ratio: auto; height: 100%; min-height: 24rem; }
}
.rayc-process__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rayc-process__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rayc-process__placeholder i {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  color: var(--rayc-gold);
  opacity: 0.5;
}

.rayc-process__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rayc-process__step {
  display: flex;
  gap: clamp(1.1rem, 2vw, 1.6rem);
  padding: clamp(1.3rem, 2.2vw, 1.9rem) 0;
  border-top: 1px solid var(--rayc-line);
}
.rayc-process__steps > li:first-child .rayc-process__step,
.rayc-process__step:first-child { border-top: 0; padding-top: 0; }

.rayc-process__num {
  flex-shrink: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  color: var(--rayc-gold);
}

.rayc-process__title {
  margin: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  line-height: 1.35;
  color: var(--rayc-ivory);
}
.rayc-process__desc {
  margin: 0.45rem 0 0;
  font-family: 'Jost', sans-serif;
  font-size: clamp(0.84rem, 0.95vw, 0.9rem);
  line-height: 1.65;
  color: var(--rayc-text-dim);
}

.rayc-process__prose {
  margin-top: clamp(2.2rem, 4vw, 3.75rem);
  padding-top: clamp(1.6rem, 2.6vw, 2.2rem);
  border-top: 1px solid var(--rayc-line);
}
.rayc-process__prose p {
  margin: 0 0 1.1em;
  font-family: 'Jost', sans-serif;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.8;
  color: var(--rayc-text);
  max-width: 68ch;
}
.rayc-process__prose p:last-child { margin-bottom: 0; }
.rayc-process__prose strong { color: var(--rayc-ivory); font-weight: 600; }

/* -------------------------------------------------------------
   Destination highlights

   A bento grid rather than a carousel or a uniform card row — the
   site already has a swiper (Services) and a stacked media split
   (About/Coverage/Process), so a gallery-style asymmetric grid keeps
   this page from settling into one repeated rhythm. Six tiles fit a
   3-column / 3-row grid with zero empty cells when the first tile
   spans 2x2 (4 + 5×1 = 9 = 3×3); the maths is why six is the count
   this layout wants, not an arbitrary choice.
   ------------------------------------------------------------- */
.rayc-destinations {
  padding: var(--rayc-section) var(--rayc-gutter);
  background: var(--rayc-surface);
}

.rayc-destinations__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rayc-gap);
  padding-bottom: clamp(1.6rem, 2.6vw, 2.6rem);
  border-bottom: 1px solid var(--rayc-line);
}

/* Controls for the mobile carousel only — the bento grid at >=640px has
   nothing to navigate. Inverse of .rayc-services__nav, which is hidden on
   mobile and shown from 640px up: here the swiper is what mobile gets. */
.rayc-destinations__nav {
  display: flex;
  flex-shrink: 0;
  gap: 0.6rem;
}
@media (min-width: 640px) { .rayc-destinations__nav { display: none; } }

.rayc-destinations__swiper {
  margin-top: clamp(2.2rem, 4vw, 3.75rem);
}

/* This element is BOTH the Swiper wrapper and the desktop grid — one node
   playing two roles rather than a grid nested inside a swiper-wrapper, so
   there is no `display:contents` bridge to reason about.

   Below 640px it deliberately declares no `display` of its own: Swiper is
   live there, and gallery.css's own `.swiper-wrapper { display:flex }`
   (loaded before sections.css, so this file can override it — it just
   chooses not to) must govern layout undisturbed. Only at >=640px, once
   JS has destroyed the Swiper instance and cleaned its inline styles, does
   this file switch the same element to `display:grid`. */
.rayc-destinations__grid {
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
}
@media (min-width: 640px) {
  .rayc-destinations__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(9rem, 13vw, 12.5rem);
  }
  /* First tile only: the featured destination, twice the width and
     twice the height of the rest. See the maths note above. */
  .rayc-destinations__item:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
}

.rayc-destinations__link {
  display: block;
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: var(--rayc-radius);
  border: 1px solid var(--rayc-line);
  background: var(--rayc-raised);
  text-decoration: none;
  transition: border-color var(--rayc-ease);
}
.rayc-destinations__link:hover { border-color: var(--rayc-gold); }

/* Below 640px it's a mobile swiper, not the bento grid — every slide
   shares one aspect ratio so the row reads level while swiping. The
   featured tile's taller 16/10 ratio is a >=640px-only grid effect
   (span-2 rule above), not carried into the carousel. */
@media (max-width: 639.98px) {
  .rayc-destinations__link { aspect-ratio: 4 / 3; }
}

.rayc-destinations__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.rayc-destinations__link:hover .rayc-destinations__img { transform: scale(1.06); }

.rayc-destinations__link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(15, 24, 33, 0.92) 0%,
              rgba(15, 24, 33, 0.55) 32%,
              rgba(15, 24, 33, 0.06) 62%);
}

.rayc-destinations__placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rayc-destinations__placeholder i {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--rayc-gold);
  opacity: 0.5;
}
.rayc-destinations__item:first-child .rayc-destinations__placeholder i {
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
}

.rayc-destinations__caption {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(0.85rem, 1.5vw, 1.3rem);
}
.rayc-destinations__caption i {
  flex-shrink: 0;
  color: var(--rayc-gold);
  font-size: 0.9em;
}
.rayc-destinations__name {
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(0.92rem, 1.15vw, 1.05rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--rayc-ivory);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}
.rayc-destinations__item:first-child .rayc-destinations__name {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
}

/* Progress bar — mobile only, same treatment as .rayc-services__progress.
   Hidden at >=640px alongside the nav buttons: nothing left to page
   through once the section is a static grid. */
.rayc-destinations .rayc-destinations__progress {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: 1px;
  margin-top: clamp(1.4rem, 2.2vw, 2rem);
  background: var(--rayc-line);
}
.rayc-destinations .rayc-destinations__progress .swiper-pagination-progressbar-fill {
  background: var(--rayc-gold);
}
@media (min-width: 640px) {
  .rayc-destinations .rayc-destinations__progress { display: none; }
}

/* -------------------------------------------------------------
   Reviews — what our guests say

   The old card led with a row of five stars, the same opening move
   as every testimonial widget on the web. Here the star row is still
   present but demoted to a small, secondary line; the card's real
   anchor is a large Domine quotation glyph, low-opacity gold, sitting
   behind the review text — the ghost-numeral idiom from Why, applied
   to a quote mark instead of an index number. The service-used tag
   drops its pill/border for the same dot-marker treatment Coverage
   uses for its zone/port lists — pills are retired sitewide, not just
   there. Cards stay bordered (unlike Why's bare rows): several sit
   side by side in a carousel with uneven text length, and a hairline
   frame is what lets the eye tell one testimonial from the next.
   ------------------------------------------------------------- */
.rayc-reviews {
  padding: var(--rayc-section) var(--rayc-gutter);
  background: var(--rayc-surface);
}

.rayc-reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rayc-gap);
  padding-bottom: clamp(1.6rem, 2.6vw, 2.6rem);
  border-bottom: 1px solid var(--rayc-line);
}

.rayc-reviews__nav {
  display: none;
  flex-shrink: 0;
  gap: 0.6rem;
}
@media (min-width: 640px) { .rayc-reviews__nav { display: flex; } }

.rayc-reviews__swiper {
  margin-top: clamp(2.2rem, 4vw, 3.75rem);
}
.rayc-reviews__swiper .swiper-wrapper {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Uneven review lengths: stretch every slide in a row to the tallest,
     so the cards' bottoms line up instead of staggering. */
  align-items: stretch;
}
.rayc-reviews__item {
  height: auto;
  display: flex;
}

.rayc-reviews__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  overflow: hidden;
  border-radius: var(--rayc-radius);
  border: 1px solid var(--rayc-line);
  background: var(--rayc-raised);
}

.rayc-reviews__quote-mark {
  position: absolute;
  top: -0.4rem;
  left: clamp(1.1rem, 1.8vw, 1.5rem);
  z-index: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 700;
  font-size: clamp(4.5rem, 7vw, 6rem);
  line-height: 1;
  color: var(--rayc-gold);
  opacity: 0.14;
  pointer-events: none;
}

.rayc-reviews__stars {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.15rem;
}
/* Unicode ★/☆ text, not an icon — see the comment above the markup in
   front-page.php for why. Tailwind's base layer hardcodes `span { color:
   #fff }`; this rule beats it purely on load order (sections.css is
   enqueued after tailwind.min.css), the same pattern every other <span>
   in this file already relies on. */
.rayc-reviews__stars span {
  font-size: 1.05rem;
  line-height: 1;
  color: var(--rayc-line);
}
.rayc-reviews__stars span.is-filled { color: var(--rayc-gold); }

.rayc-reviews__text {
  position: relative;
  z-index: 1;
  margin: clamp(1rem, 1.6vw, 1.3rem) 0 0;
  font-family: 'Jost', sans-serif;
  font-size: clamp(0.92rem, 1.05vw, 1rem);
  line-height: 1.75;
  color: var(--rayc-text);
}

.rayc-reviews__foot {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: clamp(1.3rem, 2.2vw, 1.8rem);
  padding-top: clamp(1.1rem, 1.8vw, 1.4rem);
  border-top: 1px solid var(--rayc-line);
}

.rayc-reviews__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--rayc-line);
  background: rgba(198, 166, 100, 0.12);
  font-family: 'Domine', Georgia, serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--rayc-gold);
}

.rayc-reviews__who { min-width: 0; }
.rayc-reviews__name {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--rayc-ivory);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rayc-reviews__origin {
  margin: 0.15rem 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.76rem;
  color: var(--rayc-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rayc-reviews__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  color: var(--rayc-text);
}
.rayc-reviews__tag::before {
  content: '';
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--rayc-gold);
}

.rayc-reviews .rayc-reviews__progress {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: 1px;
  margin-top: clamp(1.6rem, 2.6vw, 2.4rem);
  background: var(--rayc-line);
}
.rayc-reviews .rayc-reviews__progress .swiper-pagination-progressbar-fill {
  background: var(--rayc-gold);
}

/* -------------------------------------------------------------
   Sister Sites — closing signature band

   Everything else on this page is a left-aligned content section
   arguing a specific point (services, fleet, process...). This one
   isn't selling anything — it's a small "part of a larger group"
   credit, the last thing on the page before the footer. Centered,
   compact padding (not --rayc-section), and a top hairline instead
   of a full section treatment marks it as a closing signature
   rather than another pitch competing with the CTA just above it.
   ------------------------------------------------------------- */
.rayc-final {
  position: relative;
  overflow: hidden;
  padding: var(--rayc-section) var(--rayc-gutter);
  background: var(--rayc-panel);
  text-align: center;
}
.rayc-final__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rayc-final__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(15, 24, 33, 0.6), rgba(15, 24, 33, 0.6));
}
.rayc-final__inner { position: relative; z-index: 2; max-width: 42rem; margin: 0 auto; }
.rayc-final .rayc-title { max-width: none; }
.rayc-final__lede {
  max-width: 38rem;
  margin: clamp(0.9rem, 1.6vw, 1.3rem) auto 0;
  font-family: 'Jost', sans-serif;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.8;
  color: var(--rayc-text-dim);
}
.rayc-final__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
}
.rayc-final__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 1.8rem;
  border-radius: var(--rayc-pill);
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background var(--rayc-ease), color var(--rayc-ease), transform var(--rayc-ease);
}
.rayc-final__btn--fill { background: var(--rayc-gold); color: var(--rayc-ink); border: 1px solid var(--rayc-gold); }
.rayc-final__btn--fill:hover { background: var(--rayc-gold-lt); transform: translateY(-1px); }
.rayc-final__btn--outline { background: transparent; color: var(--rayc-ivory); border: 1px solid var(--rayc-line); }
.rayc-final__btn--outline:hover { border-color: var(--rayc-gold); color: var(--rayc-gold); }
.rayc-final__note {
  margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--rayc-text-dim);
}

.rayc-sisters {
  padding: clamp(2.75rem, 5.5vw, 4.5rem) var(--rayc-gutter);
  background: var(--rayc-surface);
  border-top: 1px solid var(--rayc-line);
  text-align: center;
}

.rayc-sisters__head {
  max-width: 46ch;
  margin: 0 auto;
}

.rayc-sisters__subtitle {
  margin: clamp(0.6rem, 1vw, 0.9rem) 0 0;
  font-family: 'Jost', sans-serif;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.6;
  color: var(--rayc-text-dim);
}

.rayc-sisters__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: clamp(2rem, 3.5vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
.rayc-sisters__list > li {
  padding: 0 clamp(1.4rem, 2.6vw, 2.4rem);
  border-left: 1px solid var(--rayc-line-soft);
}
.rayc-sisters__list > li:first-child { border-left: 0; }
@media (max-width: 479.98px) {
  .rayc-sisters__list { flex-direction: column; gap: clamp(1.4rem, 3vw, 1.8rem); }
  .rayc-sisters__list > li { border-left: 0; padding: 0; }
}

.rayc-sisters__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
}

.rayc-sisters__name {
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  color: var(--rayc-ivory);
  transition: color var(--rayc-ease);
}
.rayc-sisters__link:hover .rayc-sisters__name { color: var(--rayc-gold); }

.rayc-sisters__desc {
  max-width: 32ch;
  font-family: 'Jost', sans-serif;
  font-size: clamp(0.76rem, 0.9vw, 0.82rem);
  line-height: 1.55;
  color: var(--rayc-text-dim);
}

/* `color: inherit` because the Tailwind base layer paints bare <i> white;
   here it should stay gold whether or not the link is hovered. */
.rayc-sisters__arrow {
  font-size: 0.72rem;
  color: var(--rayc-gold);
}

.rayc-sisters__note {
  max-width: 62ch;
  margin: clamp(2rem, 3.5vw, 3rem) auto 0;
  padding-top: clamp(1.4rem, 2.4vw, 2rem);
  border-top: 1px solid var(--rayc-line-soft);
  font-family: 'Jost', sans-serif;
  font-size: clamp(0.74rem, 0.85vw, 0.8rem);
  line-height: 1.7;
  color: var(--rayc-text-dim);
}

/* -------------------------------------------------------------
   Contact form — "Tell Us About Your Group"

   Was a centred glass card floating over a dimmed background photo —
   the one generic-SaaS-landing-page move that survived everywhere
   else on this page got retired from. Rebuilt on the same 5fr/7fr
   split as About/Coverage/Process, but with real content in the
   narrow column instead of a decorative image: the section's own
   header plus a short reassurance list, so it isn't just empty space
   beside the form. Inputs keep the underline style the old version
   already used — that part was already close to this system's own
   restraint — just moved off inline styles onto tokens.

   First real use of --rayc-gold-bright: every other CTA on the page
   is a same-weight outline+fill pair, but this is the page's primary
   conversion action, so it gets the one accent tier reserved for it.
   ------------------------------------------------------------- */
.rayc-form {
  padding: var(--rayc-section) var(--rayc-gutter);
  background: var(--rayc-surface);
}

.rayc-form__layout {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 768px) {
  .rayc-form__layout { grid-template-columns: 5fr 7fr; align-items: start; }
}

.rayc-form__head {
  padding-bottom: clamp(1.6rem, 2.6vw, 2.6rem);
  border-bottom: 1px solid var(--rayc-line);
}

.rayc-form__subtitle {
  margin: clamp(1.2rem, 2vw, 1.75rem) 0 0;
  max-width: 42ch;
  font-family: 'Jost', sans-serif;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.75;
  color: var(--rayc-text);
}

.rayc-form__reassurance {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 0;
  padding: 0;
  list-style: none;
}
.rayc-form__reassurance li {
  position: relative;
  padding-left: 1.2rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--rayc-text-dim);
}
.rayc-form__reassurance li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rayc-gold);
}

.rayc-form__card {
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-radius-lg);
  background: var(--rayc-raised);
}

.rayc-form__grid {
  display: grid;
  gap: clamp(1.4rem, 2.4vw, 1.85rem) clamp(1.4rem, 2.4vw, 2rem);
}
@media (min-width: 560px) {
  .rayc-form__grid { grid-template-columns: 1fr 1fr; }
}
.rayc-form__field--full { grid-column: 1 / -1; }

.rayc-form__label {
  display: block;
  margin-bottom: 0.6rem;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rayc-text-dim);
}
.rayc-form__req { color: var(--rayc-gold); }
.rayc-form__optional {
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--rayc-text-dim);
  opacity: 0.7;
}

.rayc-form__input {
  display: block;
  width: 100%;
  padding: 0.8rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rayc-line);
  border-radius: 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.92rem;
  color: var(--rayc-ivory);
  transition: border-color var(--rayc-ease);
}
.rayc-form__input::placeholder { color: var(--rayc-text-dim); opacity: 0.55; }
.rayc-form__input:focus { outline: none; border-color: var(--rayc-gold); }

.rayc-form__select-wrap { position: relative; }
.rayc-form__select { appearance: none; cursor: pointer; padding-right: 1.5rem; }
.rayc-form__select option { background: var(--rayc-raised); color: var(--rayc-ivory); }
.rayc-form__chevron {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--rayc-text-dim);
  pointer-events: none;
}

.rayc-form__textarea { resize: none; padding: 0.8rem 0; }

.rayc-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  margin-top: clamp(1.75rem, 2.6vw, 2.2rem);
  padding: 1rem 2rem;
  border: none;
  border-radius: var(--rayc-pill);
  background: var(--rayc-gold-bright);
  color: var(--rayc-ink);
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background var(--rayc-ease), transform var(--rayc-ease);
}
.rayc-form__submit:hover { background: var(--rayc-gold-lt); transform: translateY(var(--rayc-lift)); }
.rayc-form__submit i { color: inherit; font-size: 1.15rem; }

.rayc-form__trust {
  margin: 1.1rem 0 0;
  text-align: center;
  font-family: 'Jost', sans-serif;
  font-size: 0.76rem;
  color: var(--rayc-text-dim);
}
.rayc-form__trust-hi { color: var(--rayc-gold-lt); font-weight: 600; }

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

   bcc_render_faq_tabs() is a shared PHP helper used on ~15 other
   pages — it prints its own markup plus one inline <style>/<script>
   pair (tab-switch + accordion behaviour) the FIRST time it's called
   per request. That function is untouched: rewriting it would
   restyle every other page that calls it, and the behaviour it wires
   up (data-faq-tabs/data-faq-target, .is-active/.is-hidden) has to
   keep working. Instead every rule below is scoped under `#faq` —
   the id already on this section, unique to the homepage — so it
   wins on specificity over the function's own bare `.bcc-faq-tab`
   selectors regardless of where either <style> block lands in the
   document.
   ------------------------------------------------------------- */
.rayc-journal {
  padding: var(--rayc-section) var(--rayc-gutter);
  background: var(--rayc-panel);
}
.rayc-journal__head { padding-bottom: clamp(1.6rem, 2.6vw, 2.6rem); border-bottom: 1px solid var(--rayc-line); }
.rayc-journal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.4rem, 2.4vw, 2rem);
  margin-top: clamp(2.2rem, 4vw, 3.75rem);
}
@media (min-width: 768px) { .rayc-journal__grid { grid-template-columns: repeat(3, 1fr); } }
.rayc-journal__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-radius);
  overflow: hidden;
  transition: border-color var(--rayc-ease);
}
.rayc-journal__card:hover { border-color: var(--rayc-gold); }
.rayc-journal__media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--rayc-raised); }
.rayc-journal__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.rayc-journal__card:hover .rayc-journal__img { transform: scale(1.05); }
.rayc-journal__body { flex: 1; display: flex; flex-direction: column; padding: clamp(1.1rem, 1.8vw, 1.5rem); background: var(--rayc-raised); }
.rayc-journal__date {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rayc-text-dim);
}
.rayc-journal__title {
  margin: 0.6rem 0 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--rayc-ivory);
}
.rayc-journal__excerpt {
  margin: 0.6rem 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--rayc-text-dim);
}
.rayc-journal__more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.9rem;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--rayc-gold);
}
.rayc-journal__more i { font-size: 0.85em; transition: transform var(--rayc-ease); }
.rayc-journal__card:hover .rayc-journal__more i { transform: translateX(4px); }
.rayc-journal__all {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--rayc-ivory);
  text-decoration: none;
  border-bottom: 1px solid var(--rayc-line);
}
.rayc-journal__all:hover { color: var(--rayc-gold); border-bottom-color: var(--rayc-gold); }
.rayc-journal__all i { font-size: 0.85em; color: var(--rayc-gold); }

.rayc-faq {
  padding: var(--rayc-section) var(--rayc-gutter);
  background: var(--rayc-surface);
}

/* 2-column on request: text left, questions right — the same 5fr/7fr split
   as About/Coverage/Process/Form, rather than the stacked header-then-full-
   width-content every other version of this section used. */
.rayc-faq__layout {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 768px) {
  .rayc-faq__layout { grid-template-columns: 5fr 7fr; align-items: start; }
}

.rayc-faq__head {
  padding-bottom: clamp(1.6rem, 2.6vw, 2.6rem);
  border-bottom: 1px solid var(--rayc-line);
}

.rayc-faq__body {
  margin-top: clamp(2.2rem, 4vw, 3.75rem);
}
@media (min-width: 768px) {
  /* Side by side now, not stacked — the gap above already separates them. */
  .rayc-faq__body { margin-top: 0; }
}

/* Tab row: the shared function centres it (`justify-center`) — pulled
   left so it continues the header's own edge instead of floating. */
#faq .bcc-faq-tabs {
  justify-content: flex-start;
}
/* The shared function's own markup puts `max-w-3xl` (Tailwind, 48rem) AND
   `mx-auto` directly on this div, on top of the `bcc-faq-panels` class this
   rule targets — simply not declaring max-width here still left Tailwind's
   utility in charge (a rule with no competing declaration doesn't cancel
   one that exists elsewhere; #faq .bcc-faq-panels only out-specifies
   .max-w-3xl if it actually sets the property). `none` is what's needed,
   not omission. Capping the whole card (like every other section — nothing
   else on this page stretches to a hard ceiling either) left a large dead
   gap on wide viewports, since — unlike Coverage/Process/Form — there's no
   second grid column or swiper to fill the rest of the row. The card/
   question row fills the section width instead; only the answer prose below
   gets its own readable-measure cap, on .bcc-faq-answer. */
#faq .bcc-faq-panels {
  max-width: none;
  margin: 0;
}

#faq .bcc-faq-tab {
  background: var(--rayc-raised);
  border-color: var(--rayc-line);
  color: var(--rayc-text-dim);
  font-family: 'Jost', sans-serif;
}
#faq .bcc-faq-tab:hover {
  color: var(--rayc-gold-lt);
  border-color: rgba(198, 166, 100, 0.5);
}
#faq .bcc-faq-tab.is-active,
#faq .bcc-faq-tab.is-active:hover {
  background: var(--rayc-gold);
  border-color: var(--rayc-gold);
  color: var(--rayc-ink) !important;
}
#faq .bcc-faq-tab.is-active > span,
#faq .bcc-faq-tab.is-active:hover > span {
  color: var(--rayc-ink) !important;
}

/* The FAQ item's outer card (border/bg/radius) has no class of its own
   in the shared markup — it's the direct child wrapping each <details>. */
#faq .bcc-faq-panel > div {
  background: var(--rayc-raised);
  border-color: var(--rayc-line);
  border-radius: var(--rayc-radius);
  transition: border-color var(--rayc-ease);
}
#faq .bcc-faq-panel > div:hover {
  border-color: var(--rayc-gold);
}

#faq .faq-item summary {
  color: var(--rayc-ivory);
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
}
#faq .faq-item summary:hover {
  color: var(--rayc-gold-lt);
}
#faq .faq-item summary > span:last-child {
  border-color: var(--rayc-line);
  background: transparent;
  color: var(--rayc-gold);
}
#faq .faq-item[open] summary > span:last-child,
#faq .group:hover .faq-item summary > span:last-child {
  background: var(--rayc-gold);
  color: var(--rayc-ink);
  border-color: var(--rayc-gold);
}
#faq .faq-item > div {
  border-color: var(--rayc-line-soft);
  color: var(--rayc-text);
}

/* Matches .rayc-process__prose p's own measure cap — same reasoning: readable
   line length for a paragraph, regardless of how wide its container is. */
#faq .bcc-faq-answer { max-width: 68ch; font-family: 'Jost', sans-serif; }
#faq .bcc-faq-answer a { color: var(--rayc-gold); }
#faq .bcc-faq-answer a:hover { color: var(--rayc-gold-lt); }
#faq .bcc-faq-answer strong,
#faq .bcc-faq-answer b { color: var(--rayc-ivory); }
#faq .bcc-faq-answer blockquote {
  border-left-color: var(--rayc-gold);
  color: var(--rayc-text);
}
#faq .bcc-faq-answer code {
  background: var(--rayc-line-soft);
  color: var(--rayc-gold-lt);
}
#faq .bcc-faq-answer h1,
#faq .bcc-faq-answer h2,
#faq .bcc-faq-answer h3,
#faq .bcc-faq-answer h4 {
  color: var(--rayc-ivory);
  font-family: 'Domine', Georgia, serif;
}

/* -------------------------------------------------------------
   Footer — site-wide, not homepage-only

   Uses --rayc-panel (not --rayc-surface): this is the one place on
   the site that intentionally reads as a distinct "frame" rather
   than another content section, the same role --rayc-panel already
   plays for the mobile menu sheet.

   Every link's href was checked against the site's live Pages before
   this was written (see the comment in templates/footer.php and
   wording_footer_nav() in inc/mardux/pages/global.php) — most of the
   previous footer's links were 404s.
   ------------------------------------------------------------- */
.rayc-footer {
  background: var(--rayc-panel);
  border-top: 1px solid var(--rayc-line);
}

.rayc-footer__inner {
  padding: var(--rayc-section) var(--rayc-gutter) clamp(2rem, 4vw, 3rem);
}

.rayc-footer__grid {
  display: grid;
  gap: clamp(2.5rem, 4vw, 3.5rem) var(--rayc-gap);
}
@media (min-width: 768px) {
  .rayc-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .rayc-footer__brand,
  .rayc-footer__contact { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .rayc-footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1.3fr; }
  .rayc-footer__brand,
  .rayc-footer__contact { grid-column: auto; }
}

.rayc-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
}
.rayc-footer__logo-img {
  height: 2.75rem;
  width: auto;
  max-width: 14rem;
  object-fit: contain;
}
.rayc-footer__monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rayc-radius-sm);
  background: var(--rayc-gold);
  color: var(--rayc-ink);
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 0.95rem;
  transition: background var(--rayc-ease);
}
.rayc-footer__logo:hover .rayc-footer__monogram { background: var(--rayc-gold-lt); }
.rayc-footer__logo-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  line-height: 1.2;
}
.rayc-footer__name {
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--rayc-ivory);
}
.rayc-footer__tagline {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rayc-gold);
}

.rayc-footer__desc {
  margin: clamp(1.2rem, 2vw, 1.6rem) 0 0;
  max-width: 36ch;
  font-family: 'Jost', sans-serif;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--rayc-text-dim);
}

.rayc-footer__col-title {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rayc-gold);
}
.rayc-footer__col-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: clamp(1.1rem, 1.8vw, 1.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.rayc-footer__link {
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem;
  color: var(--rayc-text-dim);
  text-decoration: none;
  transition: color var(--rayc-ease);
}
.rayc-footer__link:hover { color: var(--rayc-gold-lt); }
.rayc-footer__link--break { word-break: break-all; }

.rayc-footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: clamp(1.1rem, 1.8vw, 1.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.rayc-footer__contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem;
  color: var(--rayc-text-dim);
}
.rayc-footer__contact-icon {
  flex-shrink: 0;
  margin-top: 0.15em;
  font-size: 0.95rem;
  color: var(--rayc-gold);
}
.rayc-footer__contact-sub { color: var(--rayc-text-dim); opacity: 0.7; }

.rayc-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(1.4rem, 2.2vw, 1.8rem);
  padding: 0.75rem 1.5rem;
  border-radius: var(--rayc-pill);
  background: var(--rayc-gold-bright);
  color: var(--rayc-ink);
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background var(--rayc-ease), transform var(--rayc-ease);
}
.rayc-footer__cta:hover { background: var(--rayc-gold-lt); transform: translateY(var(--rayc-lift)); }
.rayc-footer__cta i { color: inherit; }

.rayc-footer__partners {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: clamp(2rem, 3.2vw, 2.75rem);
  border-top: 1px solid var(--rayc-line);
}
.rayc-footer__partners-title {
  margin: 0;
  text-align: center;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rayc-text-dim);
}
@media (min-width: 768px) { .rayc-footer__partners-title { text-align: left; } }
.rayc-footer__partners-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(1.4rem, 2.2vw, 1.8rem);
}
@media (min-width: 768px) { .rayc-footer__partners-row { justify-content: space-around; } }
.rayc-footer__partner {
  display: block;
  opacity: 0.55;
  text-decoration: none;
  transition: opacity var(--rayc-ease);
}
.rayc-footer__partner:hover { opacity: 1; }
.rayc-footer__partner-img { width: 3.5rem; height: 3.5rem; object-fit: contain; }
.rayc-footer__partner-name {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--rayc-text-dim);
}

.rayc-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: clamp(2rem, 3.2vw, 2.75rem);
  padding-top: clamp(1.6rem, 2.4vw, 2rem);
  border-top: 1px solid var(--rayc-line);
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  color: var(--rayc-text-dim);
}
@media (min-width: 768px) {
  .rayc-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
.rayc-footer__copy { margin: 0; }
.rayc-footer__utility { display: flex; flex-wrap: wrap; gap: clamp(1rem, 2vw, 1.5rem); }

/* -------------------------------------------------------------
   Voyage Plotter — homepage, right after the hero's trust band.

   Month + duration pick a season verdict and highlight the matching
   route on a stylised chart. Interaction and data model come from
   rajaampatyachtcharter.com's own "Plate I" (same brand, live site);
   restyled onto this theme's dark/gold surface instead of copied
   wholesale, and the durations/routes/CTAs point at the itinerary
   pages that actually exist here — 7, 11 and 14 nights.
   ------------------------------------------------------------- */
.rayc-plotter {
  padding: var(--rayc-section) var(--rayc-gutter);
  background: var(--rayc-surface);
}

.rayc-plotter__lede {
  max-width: 52ch;
  margin: clamp(0.9rem, 1.6vw, 1.3rem) 0 0;
  font-family: 'Jost', sans-serif;
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.8;
  color: var(--rayc-text-dim);
}

.rayc-plotter__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.2rem, 4vw, 3.75rem);
}
@media (min-width: 1024px) {
  .rayc-plotter__grid { grid-template-columns: 5fr 6fr; align-items: start; }
}

.rayc-plotter__label {
  margin: 0 0 0.7rem;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(0.6rem, 0.85vw, 0.7rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rayc-text-dim);
}
.rayc-plotter__controls .rayc-plotter__label:not(:first-child) { margin-top: clamp(1.4rem, 2.2vw, 1.8rem); }

.rayc-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.rayc-chip {
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-pill);
  background: transparent;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--rayc-text);
  cursor: pointer;
  transition: background var(--rayc-ease), border-color var(--rayc-ease), color var(--rayc-ease);
}
.rayc-chip:hover { border-color: var(--rayc-gold); }
.rayc-chip[aria-pressed="true"] {
  background: var(--rayc-gold);
  border-color: var(--rayc-gold);
  color: var(--rayc-ink);
}

.rayc-verdict {
  margin-top: clamp(1.6rem, 2.6vw, 2.2rem);
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-radius-lg);
  background: var(--rayc-raised);
}

.rayc-verdict__stamp {
  display: block;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rayc-gold);
}

.rayc-verdict__badge {
  display: inline-block;
  margin-top: 0.7rem;
  padding: 0.35rem 0.95rem;
  border: 1px solid var(--rayc-gold);
  border-radius: var(--rayc-pill);
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--rayc-gold);
  color: var(--rayc-ink);
}
.rayc-verdict__badge.is-window { background: transparent; color: var(--rayc-gold); }
.rayc-verdict__badge.is-shoulder { background: transparent; border-color: var(--rayc-sand); color: var(--rayc-sand); }
.rayc-verdict__badge.is-quiet { background: transparent; border-color: var(--rayc-line); color: var(--rayc-text-dim); }

.rayc-verdict__txt {
  margin: clamp(0.9rem, 1.6vw, 1.2rem) 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--rayc-text);
}

.rayc-verdict__dur {
  margin: clamp(0.8rem, 1.4vw, 1.1rem) 0 0;
  padding-top: clamp(0.8rem, 1.4vw, 1.1rem);
  border-top: 1px solid var(--rayc-line);
  font-family: 'Jost', sans-serif;
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--rayc-text-dim);
}

.rayc-verdict__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.3rem;
  margin-top: clamp(1rem, 1.6vw, 1.3rem);
}
.rayc-verdict__link {
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--rayc-gold);
  text-decoration: none;
  border-bottom: 1px solid var(--rayc-line);
  transition: border-color var(--rayc-ease);
}
.rayc-verdict__link:hover { border-bottom-color: var(--rayc-gold); }
.rayc-verdict__link.is-alt { color: var(--rayc-text-dim); }

.rayc-plotter__map {
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-radius-lg);
  background: var(--rayc-panel);
}
.rayc-plotter__map svg { display: block; width: 100%; height: auto; }

.rayc-plotter__note {
  margin: clamp(0.9rem, 1.4vw, 1.2rem) 0 0;
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--rayc-text-dim);
}

/* ---- chart ---- */
.rayc-svg-frame { stroke: rgba(198, 166, 100, 0.4); stroke-width: 1.4; }
.rayc-svg-grid { stroke: rgba(244, 239, 227, 0.08); stroke-width: 1; }
.rayc-svg-tick, .rayc-svg-coord {
  font-family: 'Jost', sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.03em;
  fill: var(--rayc-text-dim);
}
.rayc-svg-lbl {
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.05em;
  fill: var(--rayc-ivory);
}
.rayc-svg-leg {
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 9.5px;
  fill: var(--rayc-gold);
}
.rayc-svg-rose circle:first-child { stroke: rgba(244, 239, 227, 0.3); stroke-width: 1; }
.rayc-svg-rose-dot { fill: rgba(198, 166, 100, 0.9); }
.rayc-svg-rose-n { fill: var(--rayc-gold); }
.rayc-svg-rose-s { fill: rgba(244, 239, 227, 0.3); }
.rayc-svg-land {
  fill: rgba(244, 239, 227, 0.07);
  stroke: rgba(244, 239, 227, 0.24);
  stroke-width: 1.1;
}
.rayc-wp {
  fill: var(--rayc-gold);
  stroke: var(--rayc-panel);
  stroke-width: 2;
}
.rayc-route {
  fill: none;
  stroke: rgba(244, 239, 227, 0.16);
  stroke-width: 2;
  transition: stroke var(--rayc-ease), stroke-width var(--rayc-ease);
}
.rayc-route--exit { stroke-dasharray: 5 4; }
.rayc-route.is-on {
  stroke: var(--rayc-gold);
  stroke-width: 2.6;
}

@media (max-width: 767.98px) {
  .rayc-plotter__map { order: -1; }
}
.rayc-footer__utility .rayc-footer__link { font-size: 0.78rem; }