*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Homepage aliases mapped to the approved Restored Blue Atlas contract. */
  --black:       var(--rmof-canvas, #000207);
  --near-black:  var(--rmof-depth, #01040a);
  --elevated:    var(--rmof-surface, #030710);
  --card-dark:   var(--rmof-card, #040a14);
  --card-hover:  var(--rmof-elevated, #080f1c);
  --text-main:   var(--rmof-salt, #f4f7ff);
  --text-muted:  var(--rmof-muted, #b1bfd9);
  --text-subtle: var(--rmof-soft, #8290ae);
  --teal:        var(--rmof-action, #4d8dff);
  /* Channel companion for rgb(var(--teal-rgb) / a). Must track --teal. */
  --teal-rgb:    var(--rmof-action-rgb, 77 141 255);
  --teal-hover:  var(--rmof-action-hover, #6ba7ff);
  --bronze:      var(--rmof-info, #9aafd0);
  --violet:      var(--rmof-action-active, #3879ed);
  --accent-gradient: var(--teal);
  --border:      rgb(38 59 89 / .76);
  --border-md:   rgb(81 111 145 / .86);
  --teal-glow:   transparent;
  --teal-dim:    rgb(var(--teal-rgb) / .10);
  --bronze-glow: transparent;
  --glass-bg:    rgb(1 4 10 / .82);
  --focus:       var(--rmof-focus, #8bb9ff);
  --on-teal:     var(--rmof-on-action, #020916);
  --font-serif:  'Mulish', system-ui, sans-serif;
  --font-sans:   'Jost', system-ui, sans-serif;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cinematic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-fast:   160ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-base:   280ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-slow:   550ms cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; }
body {
  background: linear-gradient(180deg, var(--near-black) 0%, var(--black) 46%, var(--near-black) 100%);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-weight: 300;
  overflow-x: hidden;
}

/* --- HERO --- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; max-height: 1000px;
  display: flex; align-items: flex-end; padding-bottom: 120px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(3,8,20,0.45), rgba(0,0,0,0.08));
}
.hero-slider {
  position: absolute; inset: -5%;
  will-change: transform;
  pointer-events: none;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  pointer-events: none;
}
.hero-slider.is-video-playing .hero-video {
  opacity: 1;
  transition: opacity 0.4s ease;
}
.hero-slider.is-video-playing .hero-slide {
  opacity: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-slide.is-active {
  opacity: 1;
}
.hero-slide-image {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.04);
}
.hero-slide.is-active .hero-slide-image {
  animation: heroKenBurns 6.8s ease-out forwards;
}
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0,0,0,0.32), rgba(0,0,0,0.16));
}
.hero-slide-label {
  position: absolute;
  /* .hero-slide-label sits inside .hero-slider, which is deliberately
     offset inset:-5% (so the Ken Burns zoom never shows a gap at the
     edges). That shifts this label's own coordinate origin 5% outside
     the visible .hero box, so a plain "left:24px" rendered ~5% of the
     hero's width off-screen to the left. Add the 5% back so this is
     actually 24px from the visible edge. */
  left: calc(5% + 24px);
  top: calc(5% + 132px);
  z-index: 3;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(4,10,14,0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 6px 10px;
  border-radius: 2px;
  pointer-events: none;
}
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.18) 0%,
    rgba(0,0,0,0.24) 25%,
    rgba(0,0,0,0.66) 65%,
    rgba(0,0,0,0.98) 100%
  );
}
.hero-video-toggle {
  position: absolute;
  top: 132px;
  right: 24px;
  z-index: 4;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 2px;
  background: rgba(4,10,14,0.66);
  color: rgba(255,255,255,0.94);
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.hero-video-toggle[hidden] { display: none; }
.hero-video-toggle:hover { background: rgba(4,10,14,0.86); }
.hero-video-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@keyframes heroKenBurns {
  from { transform: scale(1.04); }
  to { transform: scale(1.12); }
}
.hero-accent-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--teal), transparent); animation: accentSweep 4s ease-in-out infinite; }
@keyframes accentSweep { 0% { opacity: 0; transform: scaleX(0); transform-origin: left; } 40% { opacity: 1; transform: scaleX(1); transform-origin: left; } 60% { opacity: 1; transform: scaleX(1); transform-origin: right; } 100% { opacity: 0; transform: scaleX(0); transform-origin: right; } }
.hero-content {
  position: relative; z-index: 2;
  padding: 0 80px; max-width: 920px; width: 100%;
}
.eyebrow {
  font-size: 12px; font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--teal);
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.eyebrow::before {
  content: ''; display: block;
  width: 0; height: 1px; background: var(--teal);
  animation: lineGrow 0.8s var(--ease-out) 0.6s forwards;
}
.hero-eyebrow { opacity: 0; animation: fadeUp 0.9s var(--ease-out) 0.3s forwards; }
.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(46px, 6.2vw, 82px);
  font-weight: 300; line-height: 1.08; letter-spacing: -0.01em;
  margin-bottom: 20px; max-width: 860px;
  text-wrap: balance;
}
/* No overflow: hidden on .hero-title. At this line-height Mulish's descenders hang
   3–6.5px below the last line box, and clipping cut the g in "Concierge Planning". */
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line span { display: block; opacity: 0; transform: translateY(100%); animation: lineReveal 1s var(--ease-out) forwards; }
.hero-title .line:nth-child(1) span { animation-delay: 0.5s; }
.hero-title .line:nth-child(2) span { animation-delay: 0.65s; }
.hero-title .line:nth-child(3) span { animation-delay: 0.8s; }
.hero-title em { font-style: italic; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub {
  font-size: 13px; font-weight: 300; letter-spacing: 0.03em;
  line-height: 1.85; color: var(--text-muted);
  max-width: 640px; margin-bottom: 36px; opacity: 0; animation: fadeUp 0.9s var(--ease-out) 1s forwards;
}
.hero-btns { display: flex; align-items: center; gap: 20px; opacity: 0; animation: fadeUp 0.9s var(--ease-out) 1.15s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lineReveal { to { opacity: 1; transform: translateY(0); } }
@keyframes lineGrow { to { width: 28px; } }
.btn-primary {
  --rmof-button-label: var(--on-teal);
  font-size: 12px; font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; background: var(--teal); color: var(--on-teal) !important;
  padding: 16px 36px; text-decoration: none; transition: color var(--ease-base);
  position: relative; overflow: hidden;
  border: 1px solid var(--teal);
  text-shadow: none;
}
.btn-primary::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--teal-hover); transform: translateX(-101%); transition: transform var(--ease-slow); }
.btn-primary:hover::before { transform: translateX(0); }
.btn-primary span { position: relative; z-index: 1; }
.btn-ghost {
  --rmof-button-label: var(--text-main);
  font-size: 12px; font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
  text-decoration: none; display: flex; align-items: center;
  gap: 8px; transition: color 0.25s;
  position: relative; padding-bottom: 4px;
}
.btn-ghost::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--text-muted); transition: width 0.3s var(--ease-out); }
.btn-ghost:hover { color: var(--text-main); }
.btn-ghost:hover::after { width: 100%; }

/* Hero stats */
.hero-stats {
  position: absolute; bottom: 88px; right: 56px; z-index: 2;
  display: grid; grid-template-columns: 1fr;
  border: 1px solid var(--border-md);
  background:
    linear-gradient(90deg, transparent 10%, rgb(var(--teal-rgb) / .5) 26%, var(--teal-hover) 34%, rgb(var(--teal-rgb) / .5) 42%, transparent 60%) top/100% 1px no-repeat,
    rgba(5,5,5,0.5);
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  opacity: 0; animation: fadeUp 1s var(--ease-out) 1.3s forwards;
}
.stat-item {
  padding: 10px 12px; text-align: center;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.stat-item:last-child { border-bottom: none; }
.stat-num {
  font-family: var(--font-serif); font-size: 20px; font-weight: 400;
  color: var(--text-main); display: block; line-height: 1;
}
.stat-num sup { color: var(--teal); font-size: 12px; }
.stat-lbl {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-subtle); margin-top: 5px; display: block;
}
.stat-item::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: var(--teal); transform: translateX(-50%); transition: width 0.3s var(--ease-out); }
.stat-item:hover::after { width: 60%; }

/* --- SEARCH BAR --- */
.search-bar {
  /* Crystal search surface, matching the destination-page filter bar: glass
     plus one illuminated seam. The seam is a background layer rather than an
     ::before, so it needs no positioning context of its own. */
  background:
    linear-gradient(90deg, transparent 8%, rgb(var(--teal-rgb) / .45) 20%, var(--teal-hover) 26%, rgb(var(--teal-rgb) / .45) 32%, transparent 46%) top/100% 1px no-repeat,
    linear-gradient(135deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012) 46%),
    var(--near-black);
  border-top: 1px solid var(--border-md);
  border-bottom: 1px solid var(--border-md);
  padding: 18px 0 22px;
}
.search-intro {
  max-width: 1280px;
  margin: 0 auto 10px;
  padding: 0 4px;
}
.search-title {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 4px;
}
.search-copy {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.search-inner {
  display: flex; align-items: stretch;
  max-width: 1280px; margin: 0 auto;
  height: 76px;
  border: 1px solid var(--border-md);
  background: linear-gradient(180deg, rgb(16 39 59 / .94), rgb(8 21 33 / .96));
  box-shadow: inset 0 1px 0 rgb(244 247 248 / .06), 0 12px 30px rgb(5 11 22 / .45);
}
.s-field {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 0 26px; border-right: 1px solid var(--border);
  cursor: pointer; transition: background 0.25s;
  position: relative;
}
.s-field::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--teal); transition: width 0.3s var(--ease-out); }
.s-field:hover { background: rgb(var(--teal-rgb) / .04); }
.s-field:hover::after { width: 100%; }
.s-field svg { color: var(--teal); flex-shrink: 0; opacity: 0.75; transition: opacity 0.2s; }
.s-field:hover svg { opacity: 1; }
.s-lbl { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-subtle); display: block; }
.s-val { font-size: 12.5px; font-weight: 300; color: var(--text-main); margin-top: 2px; display: block; }
.s-btn {
  background: var(--teal); border: none;
  padding: 0 36px; cursor: pointer;
  font-family: var(--font-sans); font-size: 12px;
  font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--on-teal);
  display: flex; align-items: center; gap: 8px;
  transition: color 0.25s; flex-shrink: 0;
  position: relative; overflow: hidden;
}
.s-btn::before { content: ''; position: absolute; inset: 0; background: var(--teal-hover); transform: translateX(-101%); transition: transform 0.35s var(--ease-out); }
.s-btn:hover::before { transform: translateX(0); }
.s-btn span { position: relative; z-index: 1; }
.s-field label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-subtle); display:block; }
.s-field input,
.s-field select {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-main);
  font: inherit;
  font-size: 12.5px;
  margin-top: 2px;
  outline: none;
}
.s-field select option {
  background: var(--near-black);
  color: var(--text-main);
}
.s-field input::placeholder { color: var(--text-subtle); }
.s-field input[type="number"] { padding-right: 4px; -moz-appearance: textfield; }
.s-field input[type="number"]::-webkit-inner-spin-button,
.s-field input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.search-inner:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 1px var(--focus);
}

/* --- SECTIONS --- */
.sec { padding: 96px 80px; }
.sec-hd {
  display: flex; align-items: flex-end;
  justify-content: space-between; margin-bottom: 52px;
}
.sec-hd-left { max-width: 580px; }
.sec-title {
  font-family: var(--font-serif);
  font-size: clamp(34px, 3.8vw, 54px);
  font-weight: 300; line-height: 1.1;
  letter-spacing: -0.01em; margin-top: 12px;
}
.sec-title em { font-style: italic; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-sub {
  font-size: 13px; font-weight: 300; color: var(--text-muted);
  line-height: 1.85; margin-top: 14px;
}
.view-all {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 12px; font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-subtle);
  text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px; transition: color 0.2s, border-color 0.2s;
}
.view-all:hover { color: var(--teal); border-color: var(--teal); }

.stat-item {
  padding: 10px 12px; text-align: center;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.stat-item:last-child { border-bottom: none; }
.stat-num {
  font-family: var(--font-serif); font-size: 20px; font-weight: 400;
  color: var(--text-main); display: block; line-height: 1;
}
.stat-num sup { color: var(--teal); font-size: 12px; }
.stat-lbl {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-subtle); margin-top: 5px; display: block;
}
.stat-item::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: var(--teal); transform: translateX(-50%); transition: width 0.3s var(--ease-out); }
.stat-item:hover::after { width: 60%; }

/* --- VILLA CARDS --- */
.villas-section { background: var(--black); }
/* Equal columns. The first was 1.25fr, which at a 1700px container made the
   lead card 637px against 510px for the other two — a visible 25%.

   It emphasised a COLUMN rather than a card, so with six villas in two rows
   positions 1 and 4 were both wide, and position 4 is not special. It also
   stopped meaning anything once the manual curation was cleared: the wide slot
   now receives whichever villa the rotation happens to place there. All three
   cards carry identical content, so the extra width bought whitespace, not
   hierarchy.

   minmax(0,1fr) rather than plain 1fr so a long villa name cannot push a
   column past its share. */
.villas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.villa-card {
  background: var(--card-dark); overflow: hidden;
  transition: background 0.25s, border-color 0.3s var(--ease-out), box-shadow 0.35s var(--ease-out);
  position: relative;
  border: 1px solid var(--border);
}
.villa-card:hover { background: var(--card-hover); border-color: rgb(var(--teal-rgb) / .42); box-shadow: 0 22px 48px rgba(0,0,0,0.42); }

/* Image area - 4:3 like every villa card (see .rmof-card__media in
   destination.css); aspect-ratio reserves the box without a real image. */
.villa-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--card-hover);
}
.villa-img-bg {
  position: absolute; inset: 0;
  /* Set background-image via ACF/inline style */
  background: var(--card-hover) center/cover no-repeat;
  transition: transform 0.8s var(--ease-cinematic);
  will-change: transform;
}
.villa-card:hover .villa-img-bg { transform: scale(1.06); }
.villa-img-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.35s;
}
.villa-card:hover .villa-img-overlay { opacity: 1; }
.villa-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: 12px; font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 5px 10px;
  background: var(--card-hover); color: var(--text-main);
  border: 1px solid var(--border-md);
}
.villa-body {
  padding: 26px 28px;
  border-top: 1px solid var(--border);
  transition: border-color 0.25s;
}
.villa-loc {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 7px;
}
.villa-name {
  font-family: var(--font-serif); font-size: 22px; font-weight: 400;
  color: var(--text-main); line-height: 1.15; margin-bottom: 12px;
}
.villa-meta {
  display: flex; gap: 18px; margin-bottom: 18px; flex-wrap: wrap;
}
.villa-meta-item {
  font-size: 12px; font-weight: 300; color: var(--text-subtle);
  display: flex; align-items: center; gap: 5px;
  transition: color 0.25s;
}
.villa-card:hover .villa-meta-item { color: var(--text-muted); }
.villa-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.villa-price {
  font-family: var(--font-serif); font-size: 20px;
  font-weight: 400; color: var(--text-main);
}
.villa-price span {
  font-family: var(--font-sans); font-size: 12px;
  font-weight: 300; color: var(--text-subtle); letter-spacing: 0.1em;
}
.villa-inq {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-subtle); text-decoration: none;
  position: relative; padding-bottom: 3px;
  transition: color 0.2s;
}
.villa-inq::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--teal); transition: width 0.3s var(--ease-out); }
.villa-inq:hover { color: var(--teal); }
.villa-card:hover .villa-inq::after { width: 100%; }

.featured-shortlist-cta {
  margin-top: 24px;
  text-align: left;
}
.featured-shortlist-cta a {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--teal-rgb) / .45);
  padding-bottom: 3px;
}
.featured-shortlist-cta a:hover {
  color: var(--text-main);
  border-bottom-color: var(--text-main);
}

/* --- BRAND PILLARS --- */
.pillars-section {
  background: var(--elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0; /* no sec padding - full-bleed grid */
}
.pillars-grid { display: grid; grid-template-columns: 1fr 1fr; }

.pillar-visual {
  position: relative; overflow: hidden;
  min-height: 560px; background: var(--card-dark);
}
.pillar-visual-img {
  position: absolute; inset: 0;
  /* Set background-image via ACF/inline style */
  background: var(--card-hover) center/cover no-repeat;
  transition: transform 0.9s var(--ease-cinematic);
  will-change: transform;
}
.pillar-visual:hover .pillar-visual-img { transform: scale(1.04); }
.pillar-visual-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 45%),
    linear-gradient(135deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 100%);
}
.pillar-visual-label {
  position: absolute; bottom: 36px; left: 36px; z-index: 2;
}
.pillar-visual-label span {
  display: block;
  font-family: var(--font-serif); font-size: 72px; font-weight: 300;
  color: rgba(255,255,255,0.06); line-height: 1;
}
.pillar-visual-label em {
  display: block;
  font-family: var(--font-serif); font-style: italic;
  font-size: 30px; font-weight: 300; color: var(--text-main);
  margin-top: -8px;
}

.pillar-content {
  padding: 64px 56px;
  display: flex; flex-direction: column; justify-content: center;
}
.pillars-list { list-style: none; }
.pillar-item {
  display: flex; gap: 22px; align-items: flex-start;
  padding: 26px 0; border-bottom: 1px solid var(--border);
  position: relative;
  transition: padding-left 0.35s var(--ease-out);
}
.pillar-item:first-child { border-top: 1px solid var(--border); }
.pillar-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(to right, var(--teal-dim), transparent); transition: width 0.4s var(--ease-out); }
.pillar-item:hover { padding-left: 8px; }
.pillar-item:hover::before { width: 100%; }
.pillar-n {
  font-family: var(--font-serif); font-size: 13px;
  font-weight: 400; color: var(--bronze); min-width: 22px; margin-top: 2px;
  transition: color 0.25s;
}
.pillar-item:hover .pillar-n { color: var(--teal); }
.pillar-t {
  font-size: 12.5px; font-weight: 400; letter-spacing: 0.04em;
  color: var(--text-main); margin-bottom: 5px;
}
.pillar-b {
  font-size: 12px; font-weight: 300;
  color: var(--text-subtle); line-height: 1.78;
  transition: color 0.25s;
}
.pillar-item:hover .pillar-b { color: var(--text-muted); }

.guidance-steps {
  margin-top: 28px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-top: 20px;
}
.guidance-step {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.01);
  padding: 14px 14px 12px;
}
.guidance-step-n {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bronze);
  display: block;
  margin-bottom: 6px;
}
.guidance-step-t {
  font-size: 12px;
  color: var(--text-main);
  line-height: 1.5;
}

.how-section {
  background: var(--black);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.how-card {
  background: var(--card-dark);
  border: 1px solid var(--border);
  padding: 20px 20px 18px;
}
.how-step {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bronze);
  display: block;
  margin-bottom: 8px;
}
.how-title {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.15;
  color: var(--text-main);
  margin-bottom: 8px;
}
.how-text {
  font-size: 12px;
  line-height: 1.75;
  color: var(--text-muted);
}

/* --- TESTIMONIALS --- */
.testi-section { background: var(--black); }
.testi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
}
.testi-card { background: var(--card-dark); padding: 40px 34px; position: relative; overflow: hidden; transition: background 0.35s; }
.testi-card::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, var(--teal-glow), transparent 70%);
  opacity: 0; transition: opacity 0.45s;
}
.testi-card:hover { background: var(--card-hover); }
.testi-card:hover::before { opacity: 1; }
.testi-card::after {
  content: '"'; position: absolute; top: 16px; right: 18px;
  font-family: var(--font-serif); font-size: 120px; font-weight: 300;
  color: rgb(244 247 248 / .07); line-height: 1;
}
.testi-stars { color: var(--bronze); font-size: 12px; letter-spacing: 3px; margin-bottom: 22px; }
.testi-quote {
  font-family: var(--font-serif); font-size: 17px; font-weight: 300;
  font-style: italic; color: var(--text-main); line-height: 1.65;
  margin-bottom: 26px; position: relative; z-index: 1;
}
.testi-line { width: 28px; height: 1px; background: var(--border-md); margin-bottom: 22px; }
.testi-card:hover .testi-line { width: 48px; background: var(--teal); }
.testi-name {
  font-size: 12px; font-weight: 400; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-main);
}
.testi-detail { font-size: 12px; font-weight: 300; color: var(--text-subtle); margin-top: 4px; }

.rmof-testimonials-swiper {
  padding: 0 44px 52px;
}
.rmof-testimonials-swiper .swiper-slide {
  height: auto;
}
.rmof-testimonials-swiper .swiper-pagination-bullet {
  background: rgba(255,255,255,0.3);
  opacity: 1;
}
.rmof-testimonials-swiper .swiper-pagination-bullet-active {
  background: var(--teal);
}
.rmof-testimonials-swiper .swiper-button-prev,
.rmof-testimonials-swiper .swiper-button-next {
  color: var(--text-main);
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-md);
  background: rgba(0,0,0,0.35);
  top: calc(50% - 28px);
}
.rmof-testimonials-swiper .swiper-button-prev::after,
.rmof-testimonials-swiper .swiper-button-next::after {
  font-size: 14px;
}

/* --- COLLECTIONS / SERVICES / GUIDES --- */
.collections-section,
.services-section,
.guides-section { background: var(--near-black); border-top: 1px solid var(--border); }
.service-title, .guide-title{
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.15;
  color: var(--text-main);
  margin-bottom: 10px;
}.service-text, .guide-text{
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-muted);
  margin-bottom: 14px;
}.service-cta, .guide-cta{
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}

.finder-ctas {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.finder-ctas .btn-primary,
.finder-ctas .btn-outline {
  font-size: 12px;
  letter-spacing: 0.1em;
  padding: 13px 20px;
}

.direct-booking-section {
  background: linear-gradient(180deg, var(--near-black) 0%, var(--card-dark) 100%);
  border-top: 1px solid var(--border-md);
  border-bottom: 1px solid var(--border);
}

.direct-proof-grid {
  margin-top: -8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.direct-proof-item {
  border: 1px solid var(--border-md);
  background: rgb(16 39 59 / .62);
  padding: 12px 14px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-main);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.service-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card-dark);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: transform 0.22s var(--ease-out), border-color 0.22s var(--ease-out), background 0.22s var(--ease-out);
}
.service-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s var(--ease-out);
}
.service-card:hover {
  transform: translateY(-3px);
  border-color: rgb(var(--teal-rgb) / .45);
  background: var(--card-hover);
}
.service-card:hover::after { transform: scaleX(1); }
.service-body {
  padding: 18px 18px 16px;
  min-height: 170px;
}
.service-title { font-size: 20px; margin-bottom: 8px; }

/* Positioning line between the section heading and the factual intro. Sized
   between .sec-title and .sec-sub so the order reads claim, then qualifier. */
.sec-deck {
  max-width: 44ch;
  margin: 0 0 14px;
  color: var(--text-main);
  font: 300 clamp(17px, 1.5vw, 21px)/1.5 var(--font-sans);
  letter-spacing: -.005em;
}

/* Photographic service tiles.

   1:1 because the supplied artwork is 1100x1100 and object-fit: cover would
   otherwise crop it to whatever the text happened to make the box. The photo is
   a real <img>, not a background, so it gets srcset, lazy loading and the CDN
   resize the rest of the page already uses.

   A row with no image keeps the original flat card: .service-card--photo only
   applies when one is present, so the fallback is the previous design rather
   than an empty square. */
.service-card--photo {
  display: grid;
  aspect-ratio: 1 / 1;
  background: var(--card-dark);
}
.service-card--photo > * { grid-area: 1 / 1; }
.service-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s var(--ease-out);
}
.service-card--photo:hover .service-card__photo { transform: scale(1.04); }

/* Two stacked layers, not one. The linear gradient carries the text; the flat
   tint sits over the whole photo so the top of the tile still reads as part of
   a dark page rather than a bright window punched through it. Text sits on the
   deep end of the gradient, which is near-opaque, because ink-contrast cannot
   composite a background image and so cannot prove contrast over photography —
   the scrim has to make the question moot rather than marginal. */
.service-card--photo::before {
  content: '';
  /* Placed explicitly. The `> *` rule above cannot do it: the universal
     selector matches elements only, never pseudo-elements, so without this the
     scrim drops into grid auto-flow as a zero-height row and the text renders
     straight onto the photograph. */
  grid-area: 1 / 1;
  z-index: 1;
  background:
    linear-gradient(to top, rgb(1 4 10 / .96) 0%, rgb(1 4 10 / .88) 26%, rgb(1 4 10 / .45) 55%, rgb(1 4 10 / .10) 100%),
    rgb(1 4 10 / .18);
}
.service-card--photo .service-body {
  z-index: 2;
  align-self: end;
  min-height: 0;
  padding: 20px 18px 18px;
}
.service-card--photo .service-title { text-shadow: 0 1px 14px rgb(1 4 10 / .55); }

@media (prefers-reduced-motion: reduce) {
  .service-card__photo,
  .service-card--photo:hover .service-card__photo { transition: none; transform: none; }
}

.guides-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.guide-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card-dark);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.22s var(--ease-out), border-color 0.22s var(--ease-out), background 0.22s var(--ease-out);
}
.guide-card:hover {
  transform: translateY(-3px);
  border-color: rgb(var(--teal-rgb) / .45);
  background: var(--card-hover);
}
/* 16:10, the Residencias Reef .lvc-magcard__img spec (2026-09-18); a fixed
   170px band read as a cropped strip (3.4:1 at 1920). */
.guide-media {
  aspect-ratio: 16 / 10;
  background: var(--card-hover) center/cover no-repeat;
  border-bottom: 1px solid var(--border);
  transition: transform 0.6s var(--ease-cinematic);
}
.guide-card:hover .guide-media { transform: scale(1.05); }
.guide-body { padding: 16px 18px 18px; }
.guide-title { font-size: 20px; margin-bottom: 8px; }

/* --- EDITORIAL STRIP --- */
.editorial-section {
  background: var(--near-black);
  border-top: 1px solid var(--border);
}
.editorial-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 460px;
}
.editorial-visual {
  position: relative; overflow: hidden;
  /* Set background-image via ACF/inline style */
  background: var(--card-dark) center/cover no-repeat;
}
.editorial-visual-img {
  position: absolute; inset: -5%;
  background: var(--card-hover) center/cover no-repeat;
  transition: transform 0.9s var(--ease-cinematic);
}
.editorial-section:hover .editorial-visual-img { transform: scale(1.03); }
.editorial-visual::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 55%, var(--near-black) 100%);
}
.editorial-content {
  padding: 72px 60px;
  display: flex; flex-direction: column; justify-content: center;
}
.editorial-tag {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}
.editorial-tag::before { content: ''; display: block; width: 18px; height: 1px; background: var(--bronze); }
.editorial-content:hover .editorial-tag::before { width: 32px; }
.editorial-title {
  font-family: var(--font-serif); font-size: 36px;
  font-weight: 300; line-height: 1.18;
  color: var(--text-main); margin-bottom: 18px;
}
.editorial-text {
  font-size: 13px; font-weight: 300; color: var(--text-muted);
  line-height: 1.88; margin-bottom: 32px; max-width: 400px;
}

/* --- FINAL CTA --- */
.cta-section {
  background: var(--black);
  padding: 120px 80px;
  text-align: center;
  border-top: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(3,8,18,0.52), rgba(2,6,15,0.68));
  z-index: 1;
  pointer-events: none;
}
.cta-bg {
  position: absolute; inset: 0;
  /* Set background-image via ACF/inline style */
  background: var(--card-hover) center/cover no-repeat;
  opacity: 0.55;
}
.cta-section:hover .cta-bg { opacity: 0.62; }
.cta-corner { position: absolute; width: 40px; height: 40px; opacity: 0; transform: scale(0.7); transition: opacity 0.6s, transform 0.6s var(--ease-out); }
.cta-corner.tl { top: 40px; left: 80px; border-top: 1px solid var(--teal); border-left: 1px solid var(--teal); }
.cta-corner.tr { top: 40px; right: 80px; border-top: 1px solid var(--teal); border-right: 1px solid var(--teal); }
.cta-corner.bl { bottom: 40px; left: 80px; border-bottom: 1px solid var(--teal); border-left: 1px solid var(--teal); }
.cta-corner.br { bottom: 40px; right: 80px; border-bottom: 1px solid var(--teal); border-right: 1px solid var(--teal); }
.cta-corner.in-view { opacity: 1; transform: scale(1); }
.cta-inner { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; }
.cta-eyebrow {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 22px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.cta-eyebrow::before,.cta-eyebrow::after {
  content: ''; display: block; width: 22px; height: 1px; background: var(--teal);
}
.cta-title {
  font-family: var(--font-serif);
  font-size: clamp(38px, 4.5vw, 62px);
  font-weight: 300; line-height: 1.1;
  color: var(--text-main); margin-bottom: 20px;
}
.cta-title em { font-style: italic; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta-sub {
  font-size: 13px; font-weight: 300; color: var(--text-muted);
  line-height: 1.85; margin-bottom: 44px;
}
.cta-btns { display: flex; align-items: center; justify-content: center; gap: 18px; }
.btn-outline {
  --rmof-button-label: var(--text-main);
  font-size: 12px; font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-main) !important;
  border: 1px solid var(--border-md); padding: 15px 30px;
  background: rgb(8 21 33 / .78);
  text-decoration: none; transition: all 0.2s;
  position: relative; overflow: hidden;
  text-shadow: none;
}
.btn-outline::before { content: ''; position: absolute; inset: 0; background: rgb(var(--teal-rgb) / .12); transform: translateX(-101%); transition: transform 0.3s var(--ease-out); }
.btn-outline:hover { border-color: var(--teal); color: var(--teal) !important; background: rgb(var(--teal-rgb) / .10); }
.btn-outline:hover::before { transform: translateX(0); }

.hero-btns .btn-primary,
.cta-btns .btn-primary,
.cta-btns .btn-outline {
  color: var(--rmof-button-label) !important;
}

.btn-primary:visited,
.btn-outline:visited,
.btn-ghost:visited {
  color: var(--rmof-button-label) !important;
}

/* Complete homepage content is visible without JavaScript. */
.reveal,
.reveal.in,
.reveal-left,
.reveal-left.in {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-video,
  .hero-video-toggle { display: none; }
}

/* --- RESPONSIVE --- */
@media (max-width: 1180px) {
  .hero-content { padding: 0 28px; }
  .hero-stats { right: 28px; bottom: 92px; }
  .sec { padding: 84px 28px; }
  .dest-section { padding-top: 62px; }
  .villas-grid { grid-template-columns: 1fr 1fr; }
  .pillar-content { padding: 56px 38px; }
  .editorial-content { padding: 60px 38px; }
  .cta-section { padding: 100px 28px; }
  .cta-corner.tl, .cta-corner.tr { top: 28px; }
  .cta-corner.bl, .cta-corner.br { bottom: 28px; }
  .cta-corner.tl, .cta-corner.bl { left: 28px; }
  .cta-corner.tr, .cta-corner.br { right: 28px; }
}

@media (max-width: 980px) {
  .hero {
    min-height: 620px;
    padding-bottom: 26px;
    align-items: flex-end;
  }
  .hero-slider {
    inset: 0;
  }
  .hero-video,
  .hero-video-toggle { display: none; }
  .hero-slide-label {
    /* Fixed top offset collides with the heading once it wraps to multiple
       lines on narrow screens; drop it here, same as .hero-stats below. */
    display: none;
  }
  .hero-content { padding: 0 18px; }
  .hero-title { font-size: clamp(36px, 10.5vw, 54px); line-height: 1.1; max-width: 100%; margin-bottom: 14px; }
  .hero-sub { max-width: 100%; font-size: 12px; line-height: 1.65; margin-bottom: 22px; }
  .hero-btns { flex-wrap: wrap; gap: 10px; }
  .btn-primary, .btn-ghost { font-size: 12px; letter-spacing: 0.1em; }
  .btn-primary { padding: 12px 18px; }

  .hero-stats { display: none; }

  .search-inner {
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .s-field {
    min-height: 58px;
    padding: 0 14px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .s-field:nth-child(2n) { border-right: none; }
  .s-field:nth-child(3),
  .s-field:nth-child(4) { border-bottom: none; }
  .s-btn {
    grid-column: 1 / -1;
    justify-content: center;
    min-height: 54px;
  }

  .sec { padding: 64px 18px; }
  .dest-section { padding-top: 54px; }
  .sec-hd { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 30px; }
  .sec-title { font-size: clamp(28px, 7vw, 42px); }
  .sec-sub { font-size: 12px; line-height: 1.7; }.testi-grid, .services-grid, .guides-grid{ grid-template-columns: 1fr 1fr; }
  .rmof-testimonials-swiper { padding: 0 12px 46px; }
  .villas-grid { grid-template-columns: 1fr; gap: 16px; }
  .villa-body { padding: 18px; }

  .pillars-grid,
  .editorial-grid { grid-template-columns: 1fr; }
  .guidance-steps { grid-template-columns: 1fr; gap: 10px; }
  .finder-ctas { flex-direction: column; align-items: stretch; }
  .finder-ctas .btn-primary,
  .finder-ctas .btn-outline { text-align: center; justify-content: center; }
  .how-grid { grid-template-columns: 1fr; }
  .pillar-visual { min-height: 340px; }
  .pillar-content { padding: 34px 18px; }
  .editorial-content { padding: 34px 18px; }
  .editorial-title { font-size: 30px; }

  .cta-section { padding: 72px 18px; }
  .cta-btns { flex-direction: column; align-items: stretch; }
  .cta-btns a { text-align: center; }
  .cta-corner { display: none; }

  .direct-proof-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .hero { min-height: 560px; }
  .hero-title { font-size: clamp(30px, 12vw, 42px); line-height: 1.12; }
  .hero-btns { flex-direction: column; align-items: stretch; width: 100%; }
  .btn-primary, .btn-ghost { width: 100%; min-height: 44px; justify-content: center; text-align: center; }

  .search-inner { grid-template-columns: 1fr; }
  .s-field,
  .s-field:nth-child(2n) {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .s-field:last-of-type { border-bottom: none; }.testi-grid, .services-grid, .guides-grid{ grid-template-columns: 1fr; }
  .rmof-testimonials-swiper {
    padding: 0 0 42px;
  }
  .rmof-testimonials-swiper .swiper-button-prev,
  .rmof-testimonials-swiper .swiper-button-next {
    display: none;
  }.services-grid, .guides-grid, .villas-grid{ gap: 12px; }
  .testi-card { padding: 26px 18px; }
}

/* --- TOUCH INPUT --- */
/* Scoped to touch devices rather than to a width. Both problems below are
   properties of the input method, not the viewport: a narrow desktop window
   has neither. That distinction matters for .btn-ghost, whose underline is
   drawn on :hover — widening it inside a width-only query would detach that
   underline from its label wherever hover still fires. */
@media (hover: none) and (pointer: coarse) {

  /* iOS Safari zooms the page whenever a focused field is under 16px, and it
     does not zoom back out — the visitor is left on a magnified page that now
     scrolls sideways. These fields are already 58px tall at this size, so
     16px changes nothing but the zoom behaviour. */
  .s-field input,
  .s-field select {
    font-size: 16px;
  }

  /* The width-based override shrank the primary CTA to roughly 35px tall —
     smaller than its own desktop size (~45px), and under the 44px minimum,
     on exactly the devices that need it biggest. */
  .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 22px;
  }

  /* Carried only padding-bottom:4px, so it sat at roughly 16px tall directly
     beside the primary CTA. */
  .btn-ghost {
    min-height: 44px;
  }
}

/* ── Intent glow and keyboard focus ─────────────────────────────────────
   Glow on hover and focus only, on the primary action only — a glow at rest
   on everything is noise. Inside a hover-capable query so a tap never leaves
   it stuck on.

   The focus rules are not decoration: this stylesheet carried ZERO
   :focus-visible states, so a keyboard user had nothing to follow anywhere
   on the homepage. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover,
  .s-btn:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,.42);
  }
}
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-ghost:focus-visible,
.s-btn:focus-visible,
.dest-card:focus-visible,
.villa-card a:focus-visible,
.view-all:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}


/* ── Stay-style split slider ────────────────────────────────────────────
   Replaced the collection card grid. A card carried a name and a line of
   copy but had nowhere for the figures that decide whether a collection
   fits — villa count, bedroom span, guest ceiling, and where the villas
   actually are.

   Slides render stacked until front-page.js sets .is-enhanced, so a script
   failure degrades to a readable list rather than an empty section on the
   site's homepage. */
.rmof-split { width: min(1700px, calc(100% - 32px)); margin: 0 auto; }
.rmof-split__viewport { display: grid; gap: 22px; }
.rmof-split__slide {
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch;
  border: 1px solid var(--border); overflow: hidden; background: var(--card-dark);
}
.rmof-split.is-enhanced .rmof-split__viewport { display: block; }
.rmof-split.is-enhanced .rmof-split__slide { display: none; }
.rmof-split.is-enhanced .rmof-split__slide.is-active { display: grid; animation: rmofSplitIn 0.45s var(--ease-out); }
@keyframes rmofSplitIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rmof-split__media {
  min-height: clamp(260px, 34vw, 430px);
  background-color: var(--card-hover);
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.rmof-split__panel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: clamp(24px, 3vw, 44px);
  background: linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.008) 52%), var(--card-dark);
}
.rmof-split__index { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); }
.rmof-split__title { margin: 0; font-family: var(--font-serif); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.18; color: var(--text-main); }
.rmof-split__copy { margin: 0; color: var(--text-muted); line-height: 1.6; }
.rmof-split__facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; padding: 0; }
.rmof-split__fact { flex: 1 1 auto; min-width: 100px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.rmof-split__fact dt { margin: 0; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-subtle); }
.rmof-split__fact dd { margin: 3px 0 0; font-family: var(--font-serif); font-size: 22px; color: var(--teal-hover); }
.rmof-split__areas { margin: 2px 0 0; font-size: 14px; color: var(--text-muted); }
.rmof-split__areas span { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-subtle); margin-right: 8px; }
.rmof-split__panel .btn-primary { margin-top: auto; }
.rmof-split__controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
.rmof-split__nav {
  width: 46px; height: 46px; flex: none; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
  border: 1px solid var(--border-md); background: rgba(255,255,255,.03); color: var(--text-main);
  transition: border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.rmof-split__nav:focus-visible, .rmof-split__dot:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .rmof-split__nav:hover {
    border-color: rgb(var(--teal-rgb) / .5); color: var(--teal-hover);
    background: rgb(var(--teal-rgb) / .09); box-shadow: 0 10px 24px rgba(0,0,0,.3);
  }
}
.rmof-split__dots { display: flex; align-items: center; gap: 8px; }
.rmof-split__dot { width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rmof-split__dot::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.24); transition: background-color 0.25s, width 0.25s; }
.rmof-split__dot.is-active::before { width: 24px; background: var(--teal); }
@media (max-width: 900px) {
  .rmof-split__slide,
  .rmof-split.is-enhanced .rmof-split__slide.is-active { grid-template-columns: 1fr; }
  .rmof-split__media { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .rmof-split.is-enhanced .rmof-split__slide.is-active { animation: none; }
  .rmof-split__nav { transition: none; }
}

/* --- AWARD BAND --- */
/* Sits between the hero and the search bar as a full-bleed band on a subtly
   lifted surface, so it reads as a statement about the company rather than as
   one more content section in the scroll.

   The label is the awarding body's own artwork — their dark-ground variant, a
   black plate with white lettering. Nothing is painted behind it, around it or
   over it: it carries its own frame, so a second one fights it, and a third
   party's mark is not ours to recolour. That is also why the only hover
   affordance on it is opacity.

   Layout leans on the page's existing .eyebrow / .sec-title / .sec-sub /
   .view-all vocabulary and overrides only what the two-column measure needs:
   a smaller heading than a full-width .sec-hd carries, and an accent-coloured
   citation link. Both modifiers are declared after their base rules on
   purpose — equal specificity, source order decides — so neither needs
   !important. Horizontal padding tracks .sec (80px / 28px / 18px) so the band
   shares a rail with the sections above and below it. */
.rmof-award-band {
  background: linear-gradient(180deg, var(--near-black) 0%, var(--elevated) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: clamp(48px, 5.5vw, 76px) 80px;
}
.rmof-award-band__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.rmof-award-band__label {
  display: block;
  max-width: 360px;
  text-decoration: none;
  transition: opacity 0.2s var(--ease-out);
}
.rmof-award-band__label:hover { opacity: 0.82; }
.rmof-award-band__img {
  display: block;
  width: 100%;
  height: auto;
}
.rmof-award-band__title {
  font-size: clamp(28px, 3vw, 38px);
  margin-top: 0;
}
/* Capped like .sec-hd-left, which is how this page already keeps a heading and
   its supporting copy to a readable measure. Measured first with a per-
   paragraph ch cap instead: at 1440 that set the prose to ~400px inside a
   764px column and left 360px of dead space beside it, which reads as a broken
   grid rather than a measure. Capping the whole copy block is the page's own
   convention and leaves ~124px of slack, which does not. */
.rmof-award-band__copy { max-width: 640px; }
/* gap, not a space in the markup: .view-all is inline-flex, and a flex
   container drops the whitespace-only node between the label and the arrow
   span. Rendered "READ THE CITATION->" with the two touching until this was
   added. 8px is the gap the page's other flex CTAs already use. */
.rmof-award-band__cite {
  margin-top: 24px;
  gap: 8px;
  color: var(--teal);
  border-bottom-color: rgb(var(--teal-rgb) / .45);
}
.rmof-award-band__cite:hover {
  color: var(--teal-hover);
  border-bottom-color: var(--teal-hover);
}

@media (max-width: 1180px) {
  .rmof-award-band { padding: clamp(44px, 5.5vw, 64px) 28px; }
  .rmof-award-band__inner { grid-template-columns: 300px minmax(0, 1fr); }
  .rmof-award-band__label { max-width: 300px; }
}

/* Stacks at 980px, the same breakpoint every other two-column block on this
   page collapses at (.pillars-grid, .editorial-grid, .how-grid). The label is
   capped rather than stretched: a winner label blown to full phone width reads
   as a banner ad. */
@media (max-width: 980px) {
  .rmof-award-band { padding: 56px 18px; }
  .rmof-award-band__inner {
    grid-template-columns: 1fr;
    gap: 26px;
    align-items: start;
  }
  .rmof-award-band__label { max-width: 260px; }
  /* Steps UP slightly at the stack point, because the copy stops sharing the
     row with the label and gets the full rail. .sec-title does the same thing
     at this breakpoint (38.9px -> 42px). Sized so the step is ~3px: an earlier
     pass left a 26.6px -> 34px jump, i.e. the heading grew by a quarter as the
     window got narrower. */
  .rmof-award-band__title { font-size: clamp(24px, 5vw, 32px); }
}
/* Homepage destination browser: photo-led navigation, no map runtime. */
.home-destinations { background: var(--near-black); }
.home-destinations__head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: end; margin-bottom: 36px; }
.home-destinations__head h2 { font-family: var(--font-serif); font-size: clamp(38px, 4.5vw, 72px); font-weight: 300; line-height: 1.08; letter-spacing: -.035em; margin: 12px 0 0; color: var(--text-main); }
.home-destinations__intro { max-width: 440px; justify-self: end; }
.home-destinations__intro p { color: var(--text-muted); font-size: 18px; line-height: 1.65; margin: 0 0 22px; }
.home-destinations__controls[hidden] { display: none; }
.home-destinations__regions { display: flex; flex-wrap: wrap; gap: 8px; padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.home-destinations__regions button { min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: 0; background: transparent; color: var(--text-muted); font: 400 15px var(--font-sans); cursor: pointer; }
.home-destinations__regions button:hover { color: var(--text-main); border-color: var(--border-md); }
.home-destinations__regions button[aria-pressed="true"] { background: var(--teal); color: var(--on-teal); }
.home-destinations__select { display: none; }
.home-destinations__result-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 20px; }
.home-destinations__result-heading h3 { font: 400 18px var(--font-sans); color: var(--text-main); margin: 0; }
.home-destinations__result-heading span { color: var(--text-muted); font-size: 14px; }
.home-destinations__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
.home-destination { display: block; min-width: 0; color: var(--text-main); text-decoration: none; }
.home-destination__photo { position: relative; aspect-ratio: 3 / 2; background: var(--card-dark); overflow: hidden; }
.home-destination__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.home-destination:hover .home-destination__photo img { transform: scale(1.025); }
.home-destination__arrow { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 40px; height: 40px; background: var(--near-black); color: var(--text-main); font-size: 23px; }
.home-destination__body { padding: 18px 0 22px; border-bottom: 1px solid var(--border); }
.home-destination__region { font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.home-destination h3 { margin: 8px 0; color: var(--text-main); font: 300 clamp(23px, 2vw, 32px)/1.2 var(--font-serif); }
.home-destination__count { color: var(--text-muted); font-size: 15px; }
.home-destinations__directory { margin-top: 32px; border-bottom: 1px solid var(--border); }
.home-destinations__directory summary { display: flex; justify-content: space-between; align-items: center; min-height: 64px; padding: 12px 0; color: var(--text-main); cursor: pointer; font-size: 17px; list-style: none; }
.home-destinations__directory summary::-webkit-details-marker { display: none; }
.home-destinations__directory summary span { font-size: 26px; color: var(--teal); }
.home-destinations__directory[open] summary span { transform: rotate(45deg); }
/* Full index as one card per region. Borrowed wholesale from .home-destination--text
   below — same 1px var(--border) on var(--card-dark) — rather than inventing a third
   card skin for this section (RM-STD-018). No media slot: the grid above carries the
   photography, and some destinations only resolve to stock imagery.

   align-items:start is load-bearing. Grid's default stretch equalises card heights,
   which sounds like the tidy choice and measured worse: regions hold 2 to 7
   destinations, so Mexico rendered ~150px of void inside its own border — the ragged
   column this card was meant to fix, merely boxed. Natural heights read as a card
   grid; do not "fix" this back to stretch. */
.home-destinations__directory-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 24px 0 36px; align-items: start; }
.home-directory-card { display: flex; flex-direction: column; min-width: 0; padding: 20px 20px 16px; border: 1px solid var(--border); background: var(--card-dark); }
.home-directory-card__title { margin: 0 0 4px; padding-bottom: 13px; border-bottom: 1px solid var(--border); color: var(--text-main); font: 400 13px/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }
.home-directory-card__list { margin: 0; padding: 0; list-style: none; }
.home-directory-card__list a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; color: var(--text-main); font-size: 15px; text-decoration: none; transition: color .18s ease; }
.home-directory-card__list a:hover .home-directory-card__name { color: var(--teal); }
.home-directory-card__list a:hover .home-directory-card__count { color: var(--text-main); }
.home-directory-card__name { min-width: 0; transition: color .18s ease; }
/* tabular-nums keeps the count column optically aligned down the card even though
   the rows are flex rather than a table. */
.home-directory-card__count { flex: 0 0 auto; color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; transition: color .18s ease; }
/* margin-top:auto pins this to the card floor regardless of how many rows sit above. */
/* 12px / .12em matches .home-destination__region, the eyebrow this section already
   uses, rather than inventing a second small-caps scale (RM-STD-018).

   ink-contrast reports p99 4.22 here against a 4.5 floor at BOTH 11px and 12px. That
   number is the probe measuring this element's own border-top hairline, which sits
   inside its box; no glyph is ever painted on it. Text on the card ground measures
   p50 6.21 and the full sweep passes at 1920 and 390. Do not "fix" the colour. */
.home-directory-card__all { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); color: var(--teal); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: color .18s ease; }
.home-directory-card__all:hover { color: var(--teal-hover); }
.home-destinations :is(a, button, select, summary):focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
@media (max-width: 1000px) {
  .home-destinations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-destinations__directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .home-destinations__head { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-bottom: 28px; }
  .home-destinations__intro { justify-self: start; }
  .home-destinations__intro p { font-size: 16px; }
  .home-destinations__regions { display: none; }
  .home-destinations__select { display: grid; gap: 10px; color: var(--text-muted); font-size: 14px; }
  .home-destinations__select select { width: 100%; min-height: 48px; border: 1px solid var(--border-md); border-radius: 0; padding: 10px 12px; background: var(--card-dark); color: var(--text-main); font: 400 16px var(--font-sans); }
  .home-destinations__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .home-destination__body { padding: 16px 0 18px; }
  .home-destinations__directory-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* Rows become the primary touch target once the cards are full width. */
  .home-directory-card__list a { min-height: 44px; padding: 12px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .home-destination__photo img { transition: none; }
  .home-destination:hover .home-destination__photo img { transform: none; }
}
.home-destination--text { display: flex; flex-direction: column; justify-content: space-between; padding: 20px; border: 1px solid var(--border); background: var(--card-dark); min-height: 240px; }
.home-destination--text .home-destination__photo { aspect-ratio: auto; height: 56px; background: transparent; }
.home-destination--text .home-destination__arrow { right: 0; top: 0; }
.home-destination--text .home-destination__body { border: 0; padding-bottom: 0; }