/* ============================================================
   LUMIÈRE — Coastal Luxury Resort & Spa
   Palette override for the shared MAISON NOIR luxury engine.
   Signature: warm espresso · terracotta · amber · sea-teal.
   ============================================================ */
@import url("atelier.css");

:root{
  --ink:#150f0a;
  --ink-2:#1e160e;
  --paper:#f9f1e6;
  --muted:#b8a087;
  --line:rgba(249,241,230,.15);
  --gold:#e08a4a;
  --gold-2:#f4b87e;
  --teal:#4bb3a6;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Jost','Manrope',Arial,sans-serif;
}

.eyebrow{color:var(--gold-2)}
.hero h1 em,.sec-head h2 em,.feature h2 em,.manifesto em,.cta h2 em{color:var(--gold-2)}
.scroll-cue i::after,.h-progress i{background:var(--gold-2)}
::selection{background:var(--gold);color:#1a0f08}
.cursor{background:var(--gold-2)}
.cursor-ring.hot{border-color:var(--gold-2);background:rgba(244,184,126,.10)}
.magnetic{background:var(--gold-2);color:#2a1608}
.nav-cta:hover{background:var(--gold-2);color:#2a1608;border-color:var(--gold-2)}
.hero-media img{filter:brightness(.74) saturate(1.12) contrast(1.02)}
/* sea-teal accent on the stat figures for a coastal pop */
.stat h3 span{color:var(--teal)}
.h-num{color:var(--paper)}

/* ============================================================
   Distinct layout — right-aligned, soft & rounded "magazine"
   (sets Lumière apart from the left-aligned Maison Noir engine)
   ============================================================ */
.hero { align-items: center; }
.hero-inner { text-align: right; }
.hero-eyebrow, .hero h1 { margin-left: auto; }
.hero-foot { flex-direction: row-reverse; }
.hero-foot p { margin-left: auto; text-align: right; }
.scroll-cue { flex-direction: row-reverse; }
/* everything softly rounded — warm and welcoming */
.h-figure, .feature-fig { border-radius: 26px; }
.h-num { border-radius: 999px; }
.nav-cta, .magnetic { border-radius: 999px; }
/* right-aligned section heads + reversed feature */
.sec-head { flex-direction: row-reverse; text-align: right; }
.h-intro h2 { text-align: right; }
.feature { direction: rtl; }
.feature > * { direction: ltr; }
.feature-fig { border-radius: 30px; }
.manifesto p { font-style: italic; }
.tag-row span { border-color: rgba(244, 184, 126, 0.4); }
@media (max-width: 640px) {
  .hero-inner, .hero-foot p, .sec-head, .h-intro h2 { text-align: left; }
  .hero-eyebrow, .hero h1, .hero-foot p { margin-left: 0; }
  .hero-foot, .scroll-cue, .sec-head { flex-direction: row; }
}