@import url("fonts.css");
@import url("montserrat.css");

/* ==========================================================================
   Sei Saadiyat by Aldar — Saadiyat Cultural District, Abu Dhabi
   Layout system after The Bay Interiors; palette taken from the project's own
   teaser — gold script cut into dark figured timber.
   ========================================================================== */
:root{
  --void:#080503;
  --charcoal:#16100a;
  --elevated:#241708;
  --ink:#1a130c;

  --ivory:#f6f1e7;
  --ivory-2:#efe8da;
  --snow:#f7f3ea;
  --stone:#d9cdb8;

  --champagne:#c9a063;
  --champagne-lt:#e8c88a;
  --champagne-soft:rgba(201,160,99,.18);

  --text:#1a130c;
  --body:#5b4f41;
  --mute:#8b8071;

  --line:rgba(247,243,234,.13);
  --line-d:rgba(26,19,12,.10);

  --header:76px;
  --radius:2px;
  --shadow:0 24px 60px rgba(8,5,3,.20);
  --ease:cubic-bezier(.22,1,.36,1);

  --display:"Cormorant Garamond","Times New Roman",Georgia,serif;
  --sans:"Montserrat","Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ivory);
  color:var(--text);
  font-family:var(--sans);
  font-weight:400;
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}

::selection{background:var(--champagne);color:var(--void)}
:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------- structure */
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:1.25rem}
.wrap-wide{width:100%;max-width:1400px;margin-inline:auto;padding-inline:1rem}

.section{padding:clamp(4.25rem,9vw,7.5rem) 0;display:flow-root}
.section.tight{padding:clamp(3rem,6vw,4.5rem) 0}
.section.alt{background:var(--ivory-2)}
.section.dark{background:var(--charcoal);color:var(--snow)}
.section.void{background:var(--void);color:var(--snow)}

@media (max-width:700px){
  .wrap,.wrap-wide{padding-inline:1.1rem}
  .section{padding:clamp(3rem,10vw,4.25rem) 0}
}

/* ------------------------------------------------------------ typography */
.eyebrow{
  display:inline-block;
  font-size:.66rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--champagne);
}
.dark .eyebrow,.void .eyebrow{color:var(--champagne-lt)}

.kicker{
  display:inline-flex;align-items:center;gap:.85rem;
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--champagne-lt);
}
.kicker::before{content:"";width:34px;height:1px;background:currentColor;opacity:.85}

.title{
  font-family:var(--display);
  font-size:clamp(2rem,4.2vw,3.35rem);
  font-weight:500;line-height:1.12;letter-spacing:-.015em;
  margin-top:.75rem;
  text-wrap:balance;
}
.title.lg{font-size:clamp(2.2rem,5.2vw,4.2rem);line-height:1.08}
.title.sm{font-size:clamp(1.6rem,3vw,2.35rem)}
@media (max-width:700px){.title{font-size:clamp(1.75rem,7.5vw,2.35rem)}}

.lede{max-width:38rem;margin-top:1.15rem;color:var(--body)}
.prose{max-width:40rem;color:var(--body)}
.prose p + p{margin-top:1rem}
.dark .lede,.dark .prose,.dark .muted,
.void .lede,.void .prose,.void .muted{color:rgba(247,243,234,.66)}
.muted{color:var(--body)}

.center{text-align:center}
.center .lede,.center .prose{margin-inline:auto}
.center .kicker::before{display:none}

.hairline{height:1px;background:var(--line-d);border:0;margin:0}
.dark .hairline,.void .hairline{background:var(--line)}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  min-height:48px;padding:.85rem 1.65rem;
  border:1px solid transparent;border-radius:var(--radius);
  font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:background-color .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),transform .35s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn-champagne{background:var(--champagne);color:var(--void);border-color:var(--champagne)}
.btn-champagne:hover{background:var(--champagne-lt);border-color:var(--champagne-lt)}
.btn-ghost{background:transparent;color:var(--snow);border-color:rgba(255,255,255,.32)}
.btn-ghost:hover{background:var(--snow);color:var(--void);border-color:var(--snow)}
.btn-line{background:transparent;border-color:rgba(26,19,12,.28);color:var(--text)}
.btn-line:hover{background:var(--void);color:var(--snow);border-color:var(--void)}
.btn-nav{min-height:40px;padding:.55rem 1.1rem;font-size:.65rem}
.btn-block{width:100%}

.icon-btn{
  width:44px;height:44px;border:1px solid var(--line-d);background:#fff;
  display:grid;place-items:center;cursor:pointer;border-radius:var(--radius);
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.icon-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5}
.icon-btn:hover{background:var(--void);color:var(--snow);border-color:var(--void)}
.dark .icon-btn,.void .icon-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:var(--snow)}
.dark .icon-btn:hover,.void .icon-btn:hover{background:var(--champagne);color:var(--void);border-color:var(--champagne)}

.actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.actions.center{justify-content:center}

/* ----------------------------------------------------------------- header */
.header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:var(--header);display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background-color .45s var(--ease),height .45s var(--ease),
             border-color .45s var(--ease),backdrop-filter .45s ease;
}
.header.is-on{
  background:rgba(8,5,3,.94);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border-bottom-color:var(--line);
  height:64px;
}
.header-inner{
  width:100%;max-width:1400px;margin-inline:auto;padding-inline:1rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{height:clamp(34px,3vw,42px);width:auto;transition:height .45s var(--ease)}
.header.is-on .brand img{height:clamp(30px,2.5vw,36px)}

.nav{display:flex;align-items:center;gap:1.5rem}
.nav-links{display:flex;gap:1.35rem;align-items:center}
.nav-links a{
  font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(247,243,234,.82);text-decoration:none;padding:4px 0;position:relative;
  white-space:nowrap;transition:color .3s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--champagne);
  transform:scaleX(0);transform-origin:right center;transition:transform .4s var(--ease);
}
.nav-links a:hover{color:var(--snow)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left center}

.menu-btn{
  display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.22);
  background:transparent;color:#fff;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;cursor:pointer;border-radius:var(--radius);
}
.menu-btn span{display:block;width:18px;height:1px;background:currentColor;
  transition:transform .4s var(--ease),opacity .3s var(--ease)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:960px){
  .nav-links,.nav .btn-nav{display:none!important}
  .menu-btn{display:inline-flex}
}

.mobile-nav{
  position:fixed;inset:0;z-index:920;background:var(--void);
  display:grid;place-items:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s var(--ease),visibility .45s var(--ease);
}
.mobile-nav.is-open{opacity:1;visibility:visible;pointer-events:auto}
.mobile-nav nav{display:grid;gap:1.25rem;text-align:center;width:min(100% - 2.5rem,24rem);padding:1rem}
.mobile-nav a{
  font-family:var(--display);font-size:1.75rem;font-weight:500;
  color:var(--snow);text-decoration:none;transition:color .3s var(--ease);
}
.mobile-nav a:hover{color:var(--champagne)}
.mobile-nav a.btn{
  margin-top:1rem;width:100%;font-family:var(--sans);font-size:.7rem;
  color:var(--void);background:var(--champagne);border-color:var(--champagne);
}

/* ------------------------------------------------------------------- hero */
.hero{
  position:relative;min-height:100svh;
  display:grid;align-items:end;
  color:var(--snow);background:var(--void);overflow:hidden;
}
.hero-media{position:absolute;inset:0}
.hero-media img,.hero-media video{
  width:100%;height:100%;object-fit:cover;object-position:center 26%;
}
.hero-media img{
  transform:scale(1.07);animation:heroZoom 16s var(--ease) forwards;
  filter:sepia(.34) saturate(.9) brightness(.82) contrast(1.06);
}
.hero-media video{display:block}
@keyframes heroZoom{to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hero-media img{animation:none;transform:none}}

.hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(8,5,3,.82) 0%,rgba(8,5,3,.40) 52%,rgba(8,5,3,.58) 100%),
    linear-gradient(180deg,rgba(8,5,3,.52) 0%,rgba(8,5,3,.10) 34%,rgba(8,5,3,.80) 100%);
}
.hero-content{
  position:relative;z-index:2;
  width:100%;max-width:1400px;margin-inline:auto;
  padding:calc(var(--header) + 3.5rem) 1rem 4.5rem;
}
.hero h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.6rem,6.2vw,5rem);
  line-height:1.05;letter-spacing:-.01em;
  max-width:17ch;margin-top:1.6rem;
}
.hero .actions{margin-top:2.2rem}

.scroll-hint{
  position:absolute;right:1.75rem;bottom:2.75rem;z-index:2;
  display:inline-flex;flex-direction:column;align-items:center;gap:.75rem;
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(247,243,234,.6);text-decoration:none;
  writing-mode:vertical-rl;
}
.scroll-hint i{display:block;width:1px;height:52px;background:currentColor;
  transform-origin:top;animation:scrollPulse 2.4s var(--ease) infinite}
@keyframes scrollPulse{0%,100%{transform:scaleY(.35);opacity:.5}50%{transform:scaleY(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.scroll-hint i{animation:none}}

@media (max-width:760px){
  .hero-content{padding:calc(var(--header) + 1.75rem) 1.1rem 3.25rem}
  .hero h1{font-size:clamp(2rem,9.2vw,2.9rem);line-height:1.08;max-width:none}
  .hero .actions{margin-top:1.5rem;flex-direction:column;align-items:stretch}
  .hero .actions .btn{width:100%}
  .hero-veil{background:
    linear-gradient(180deg,rgba(8,5,3,.72) 0%,rgba(8,5,3,.34) 26%,rgba(8,5,3,.60) 62%,rgba(8,5,3,.92) 100%)}
  .scroll-hint{display:none}
}

/* ------------------------------------------------------------------ split */
.split{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.split.top{align-items:start}
.split.reverse .split-media{order:2}
.split-media img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:clamp(1.75rem,6vw,2.5rem)}
  .split.reverse .split-media{order:0}
}

/* two-column: heading left, prose right */
.vision{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:860px){.vision{grid-template-columns:1fr;gap:1.5rem}}

/* --------------------------------------------------------- feature bands */
.feature-band{position:relative;overflow:hidden;background:var(--charcoal)}
/* show every render whole — no crop. Natural ratio, edge to edge. */
.feature-band img{width:100%;height:auto;display:block}
/* opt-in crop, for bands where a fixed strip is wanted */
.feature-band.crop img{height:clamp(320px,62vh,700px);object-fit:cover}

/* duo images */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.75rem,1.4vw,1.25rem)}
.duo img{width:100%;height:clamp(230px,40vh,480px);object-fit:cover;border-radius:var(--radius)}
@media (max-width:700px){.duo{grid-template-columns:1fr}.duo img{height:clamp(210px,36vh,320px)}}

/* -------------------------------------------------- oversized chapter type */
.chapter{font-family:var(--display);font-weight:500;line-height:.96;
  letter-spacing:-.02em;font-size:clamp(2.6rem,8.6vw,7.5rem);margin:0}
.chapter em{display:block;font-style:italic;color:var(--champagne);padding-left:.08em}

/* ================================================ hlx · ultra-lux highlights */

/* ---- section shell ---- */
.hlx-section{
  position:relative;
  background:var(--void);
  color:var(--snow);
  padding:clamp(5rem,10vw,9rem) 0 clamp(4rem,8vw,7rem);
  overflow:hidden;
}

/* ---- ambient background ---- */
.hlx-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;
}
.hlx-bg-grid{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:1;
}
.hlx-bg-glow{
  position:absolute;border-radius:50%;
  filter:blur(110px);pointer-events:none;
}
.hlx-bg-glow--a{
  width:55vw;height:55vw;max-width:700px;max-height:700px;
  top:-18%;left:-14%;
  background:radial-gradient(circle,rgba(201,160,99,.11) 0%,transparent 70%);
  animation:hlxDrift 18s ease-in-out infinite alternate;
}
.hlx-bg-glow--b{
  width:45vw;height:45vw;max-width:600px;max-height:600px;
  bottom:-20%;right:-10%;
  background:radial-gradient(circle,rgba(201,160,99,.09) 0%,transparent 70%);
  animation:hlxDrift 22s ease-in-out infinite alternate-reverse;
}
@keyframes hlxDrift{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(3%,3%) scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .hlx-bg-glow{animation:none}
}

/* ---- section header ---- */
.hlx-section .wrap{position:relative;z-index:1}
.hlx-header{
  text-align:center;
  margin-bottom:clamp(3rem,6vw,5.5rem);
}
.hlx-ornament{
  display:flex;justify-content:center;
  margin-bottom:1.4rem;
  opacity:.7;
}
.hlx-eyebrow{
  display:block;
  font-family:var(--sans);font-weight:600;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--champagne);
  margin-bottom:1.1rem;
}
.hlx-eyebrow::before,.hlx-eyebrow::after{
  content:"";display:inline-block;
  width:clamp(1.5rem,4vw,3rem);height:1px;
  background:var(--champagne);opacity:.5;
  vertical-align:middle;margin:0 .9em;
}
.hlx-title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.4rem,5.5vw,4.4rem);
  line-height:1.08;letter-spacing:-.02em;
  color:var(--snow);
  margin:0 auto;max-width:18ch;
}
.hlx-title em{
  font-style:italic;
  background:linear-gradient(135deg,var(--champagne-lt) 0%,var(--champagne) 55%,#8f6b32 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hlx-subtitle{
  margin-top:1.1rem;
  font-size:.88rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(247,243,234,.38);
  font-family:var(--sans);font-weight:400;
}

/* ---- card grid ---- */
.hlx-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5px;
  background:rgba(201,160,99,.13);
  border:1.5px solid rgba(201,160,99,.13);
}

/* ---- individual card ---- */
.hlx-card{
  position:relative;
  background:rgba(8,5,3,.72);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  overflow:hidden;
  cursor:default;
  transition:background .5s var(--ease);
}
.hlx-card:hover{
  background:rgba(22,16,10,.82);
}

.hlx-card-inner{
  position:relative;z-index:2;
  padding:clamp(2.2rem,4.5vw,3.6rem) clamp(2rem,4vw,3.2rem);
  display:flex;flex-direction:column;
  gap:1.35rem;
  height:100%;
}

/* ghost oversized numeral */
.hlx-ghost{
  position:absolute;
  top:clamp(-1rem,-.5vw,-.25rem);
  right:clamp(-.5rem,1vw,.5rem);
  font-family:var(--display);font-weight:500;
  font-size:clamp(6rem,12vw,11rem);
  line-height:.8;letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1px rgba(201,160,99,.12);
  text-stroke:1px rgba(201,160,99,.12);
  user-select:none;pointer-events:none;
  transition:-webkit-text-stroke-color .5s var(--ease);
}
.hlx-card:hover .hlx-ghost{
  -webkit-text-stroke-color:rgba(201,160,99,.22);
}

/* icon circle */
.hlx-card-top{
  display:flex;align-items:center;gap:1.2rem;
}
.hlx-icon-wrap{
  flex-shrink:0;
  width:clamp(2.8rem,5vw,3.6rem);
  height:clamp(2.8rem,5vw,3.6rem);
  display:flex;align-items:center;justify-content:center;
  color:var(--champagne);
  background:rgba(201,160,99,.06);
  border:1px solid rgba(201,160,99,.2);
  border-radius:50%;
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease);
}
.hlx-card:hover .hlx-icon-wrap{
  background:rgba(201,160,99,.13);
  border-color:rgba(201,160,99,.45);
  transform:scale(1.07) rotate(5deg);
}
.hlx-icon{
  width:58%;height:58%;
  display:block;
}

.hlx-card-title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.35rem,2.5vw,1.85rem);
  line-height:1.18;letter-spacing:-.01em;
  color:var(--snow);
  transition:color .35s var(--ease);
}
.hlx-card:hover .hlx-card-title{color:var(--champagne-lt)}

.hlx-card-body{
  font-family:var(--sans);font-size:.875rem;
  line-height:1.8;
  color:rgba(247,243,234,.55);
  max-width:38ch;
  flex:1;
  transition:color .35s var(--ease);
}
.hlx-card:hover .hlx-card-body{color:rgba(247,243,234,.75)}

/* pill tags */
.hlx-card-footer{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-top:.3rem;
}
.hlx-tag{
  display:inline-block;
  font-family:var(--sans);font-size:.55rem;
  font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--champagne);
  border:1px solid rgba(201,160,99,.28);
  padding:.28em .9em;
  border-radius:99px;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.hlx-card:hover .hlx-tag{
  background:rgba(201,160,99,.1);
  border-color:rgba(201,160,99,.55);
}

/* ---- animated border trace ---- */
/* Four-sided "drawing" border using clip-path trick via pseudo-element and SVG outline */
.hlx-border-trace{
  position:absolute;inset:0;pointer-events:none;z-index:3;
}
.hlx-border-trace::before,
.hlx-border-trace::after{
  content:"";
  position:absolute;
  background:linear-gradient(90deg,var(--champagne-lt),var(--champagne),var(--champagne-lt));
  opacity:0;
  transition:opacity .4s var(--ease);
}
/* top + bottom bars */
.hlx-border-trace::before{
  top:0;left:0;right:0;height:1px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .7s var(--ease),opacity .3s var(--ease);
}
.hlx-border-trace::after{
  bottom:0;left:0;right:0;height:1px;
  transform:scaleX(0);transform-origin:right center;
  transition:transform .7s var(--ease) .1s,opacity .3s var(--ease);
}
.hlx-card:hover .hlx-border-trace::before,
.hlx-card:hover .hlx-border-trace::after{
  transform:scaleX(1);opacity:1;
}
/* left + right bars via box-shadow technique */
.hlx-card::before,.hlx-card::after{
  content:"";
  position:absolute;
  width:1px;
  background:linear-gradient(180deg,var(--champagne-lt),var(--champagne),var(--champagne-lt));
  opacity:0;
  transition:opacity .3s var(--ease),transform .7s var(--ease);
  z-index:3;
}
.hlx-card::before{
  left:0;top:0;bottom:0;
  transform:scaleY(0);transform-origin:top center;
  transition:transform .7s var(--ease) .05s,opacity .3s var(--ease);
}
.hlx-card::after{
  right:0;top:0;bottom:0;
  transform:scaleY(0);transform-origin:bottom center;
  transition:transform .7s var(--ease) .15s,opacity .3s var(--ease);
}
.hlx-card:hover::before,
.hlx-card:hover::after{
  transform:scaleY(1);opacity:1;
}

/* bottom ornament */
.hlx-bottom-ornament{
  display:flex;justify-content:center;
  margin-top:clamp(3rem,5.5vw,4.5rem);
  opacity:.6;
}

/* ---- responsive ---- */
@media (max-width:860px){
  .hlx-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hlx-card-inner{padding:2rem 1.5rem}
  .hlx-ghost{font-size:5.5rem}
  .hlx-title{font-size:clamp(2rem,8vw,2.8rem)}
}

/* -------------------------------------------------------- unit schedule */
.schedule{background:var(--ivory-2)}

.sched{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-d)}

.sched-row{
  position:relative;
  display:grid;
  grid-template-columns:1.5fr .85fr .85fr;
  grid-template-areas:
    "name  size  price"
    "note  note  note";
  column-gap:clamp(1rem,2.5vw,2.5rem);
  padding:clamp(1.5rem,2.8vw,2.15rem) 0;
  border-bottom:1px solid var(--line-d);
  transition:padding-left .5s var(--ease);
}
.sched-row:hover{padding-left:clamp(.5rem,1.2vw,1.1rem)}

/* champagne hairline that draws across on hover */
.sched-row::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--champagne);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s var(--ease);
}
.sched-row:hover::after{transform:scaleX(1)}

.sched-name{
  grid-area:name;align-self:center;
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.35rem,2.3vw,1.9rem);
  line-height:1.2;letter-spacing:-.01em;color:var(--text);
}

.sched-spec{display:flex;flex-direction:column;justify-content:center;gap:.3rem}
.sched-spec:nth-of-type(1){grid-area:size}
.sched-spec:nth-of-type(2){grid-area:price}
.sched-spec dt{
  font-size:.58rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);
}
.sched-spec dd{
  margin:0;font-family:var(--display);
  font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.1;
  color:var(--champagne);white-space:nowrap;
}

.sched-note{grid-area:note;margin-top:.75rem;max-width:62ch}
.sched-note p{color:var(--body);font-size:.93rem;line-height:1.65}

@media (max-width:760px){
  .sched-row{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "name  name"
      "size  price"
      "note  note";
    row-gap:.9rem;
  }
  .sched-row:hover{padding-left:0}
  .sched-note{margin-top:.25rem}
}

/* -------------------------------------------------------------- amenities */
.amenities .eyebrow-rule{margin-bottom:clamp(2rem,4vw,3.25rem)}

.am-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(2.25rem,4vw,3.25rem) clamp(1.5rem,2.6vw,2.25rem);
}

.am-media{
  position:relative;margin:0 0 clamp(1rem,1.8vw,1.35rem);
  overflow:hidden;border-radius:2px;
}
.am-media img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease);
}
.am-card:hover .am-media img{transform:scale(1.05)}
.am-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,5,3,0) 55%,rgba(8,5,3,.65) 100%);
  pointer-events:none;
}
.am-num{
  position:absolute;left:.85rem;bottom:.6rem;z-index:2;
  font-family:var(--display);font-size:.95rem;letter-spacing:.06em;
  color:rgba(247,243,234,.85);
}

.am-card{display:flex;flex-direction:column}
.am-card h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.2rem,1.9vw,1.5rem);
  line-height:1.25;color:var(--snow);
  margin-bottom:clamp(.85rem,1.4vw,1.1rem);
  /* reserve two lines so every list in a row starts on the same baseline */
  min-height:calc(2 * 1.25em);
}
@media (max-width:620px){.am-card h3{min-height:0}}

.am-list{list-style:none;margin:0;padding:0}
.am-list li{
  display:flex;gap:.8rem;
  padding:.42rem 0;
  font-size:.66rem;font-weight:400;letter-spacing:.09em;
  line-height:1.75;text-transform:uppercase;
  color:rgba(247,243,234,.62);
}
/* flex-basis fixes every dash to exactly the same length, whatever the item wraps to */
.am-list li::before{
  content:"";flex:0 0 12px;height:1px;margin-top:.85em;
  background:var(--champagne);
}

/* group 6 is prose in the source copy, so it stays sentence case */
.am-prose{padding-top:.1rem}
.am-prose p{
  font-size:.88rem;line-height:1.7;color:rgba(247,243,234,.62);
}
.am-prose p + p{margin-top:.85rem}

@media (max-width:900px){
  .am-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .am-grid{grid-template-columns:1fr;gap:2.25rem}
}

/* ---------------------------------------------------------------- gallery */
.gallery-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;
  gap:1.25rem;margin-bottom:1.35rem}
.gallery-stage{position:relative;overflow:hidden;background:var(--charcoal);
  aspect-ratio:16/9;border-radius:var(--radius)}
.gallery-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.03);
  transition:opacity .55s var(--ease),transform .9s var(--ease)}
.gallery-stage img.is-active{opacity:1;transform:scale(1)}
.gallery-controls{display:flex;align-items:center;justify-content:space-between;
  margin-top:1.1rem;gap:1rem}
.gallery-counter{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.dark .gallery-counter,.void .gallery-counter{color:rgba(247,243,234,.55)}
.gallery-nav{display:flex;gap:.5rem}
@media (max-width:700px){.gallery-stage{aspect-ratio:4/3}}

/* ------------------------------------------------------------ pull quote */
.pullquote{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line-d)}
.dark .pullquote,.void .pullquote{border-top-color:var(--line)}
.pullquote p{font-family:var(--display);font-weight:500;
  font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.35;max-width:24ch;
  color:var(--text);margin-top:.75rem}
.dark .pullquote p,.void .pullquote p{color:var(--snow)}

/* ------------------------------------------------------------------ forms */
.form-card{background:#fff;border:1px solid var(--line-d);
  padding:clamp(1.5rem,3vw,2.35rem);border-radius:var(--radius)}
.fields{display:grid;gap:1rem;margin-top:1.5rem}
.field label{display:block;font-size:.6rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);margin-bottom:.4rem}
.field input{
  width:100%;min-height:48px;padding:.7rem .9rem;
  background:var(--ivory);border:1px solid var(--line-d);border-radius:var(--radius);
  font-family:var(--sans);font-size:.98rem;color:var(--text);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.field input:focus{outline:0;border-color:var(--champagne);background:#fff}
.field input::placeholder{color:var(--mute)}

.choice-group > p{font-size:.6rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);margin-bottom:.6rem}
.choices{display:flex;flex-wrap:wrap;gap:.5rem}
.choice{position:relative}
.choice input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice span{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:0 1.05rem;border:1px solid var(--line-d);border-radius:var(--radius);
  font-size:.63rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--body);cursor:pointer;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.choice input:hover + span{border-color:rgba(26,19,12,.3)}
.choice input:checked + span{background:var(--void);border-color:var(--void);color:var(--champagne)}
.choice input:focus-visible + span{outline:2px solid var(--champagne);outline-offset:3px}

.form-note{margin-top:.85rem;font-size:.82rem;color:var(--mute);text-align:center}
.form-status{margin-top:.6rem;font-size:.9rem;line-height:1.5;min-height:1.2em}
.form-status.is-error{color:#a3231b}
.form-status.is-ok{color:#1f6b4f}
.hp{position:absolute!important;left:-9999px!important;width:0;height:0;opacity:0}

/* -------------------------------------------------------------- enquiry */
.enquire{background:var(--snow);color:var(--text);padding-block:clamp(3.5rem,7vw,6.5rem)}

.enquire-grid{
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.enquire-copy .eyebrow-rule{margin-bottom:clamp(1rem,2vw,1.5rem)}
.enquire-copy .eyebrow-rule::after{display:none}
.enquire-copy .title{max-width:13ch}
.enquire-copy .lede{margin-top:1.15rem;max-width:38ch;color:var(--body)}

/* card */
.enquire .form-card{
  background:#fff;border:1px solid rgba(26,19,12,.06);
  border-radius:16px;padding:clamp(1.5rem,3vw,2.5rem);
  box-shadow:0 30px 70px -35px rgba(26,19,12,.18);
}

/* two-up field grid */
.fields-2{grid-template-columns:1fr 1fr;column-gap:clamp(.85rem,1.6vw,1.15rem)}
.fields-2 .field-full{grid-column:1 / -1}
@media (max-width:560px){.fields-2{grid-template-columns:1fr}}

/* rounded, filled inputs */
.enquire .field label{
  font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);margin-bottom:.45rem;
}
.enquire .field input,
.enquire .field select{
  width:100%;min-height:54px;
  padding:.8rem 1rem;
  background:#f6f1e7;border:1px solid rgba(26,19,12,.12);border-radius:9px;
  font-family:var(--sans);font-size:.98rem;color:var(--text);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.enquire .field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8e96' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:16px;
  padding-right:2.4rem;
}
.enquire .field input:focus,
.enquire .field select:focus{outline:0;border-color:var(--champagne);background:#fff}
.enquire .field input::placeholder{color:#a9a094}

/* dial code + number */
/* dial code + number read as one field, as in the reference */
.phone{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch;
  background:#f6f1e7;border:1px solid rgba(26,19,12,.12);border-radius:9px;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.phone:focus-within{border-color:var(--champagne);background:#fff}
.enquire .phone input[type=tel],
.modal .phone input[type=tel]{
  background:transparent;border:0;border-radius:0 9px 9px 0;min-height:54px;
}
.enquire .phone input[type=tel]:focus{background:transparent}

.dial{position:relative;display:flex}
.dial-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:54px;padding:0 .85rem 0 1rem;
  background:transparent;border:0;border-right:1px solid rgba(26,19,12,.10);
  cursor:pointer;font-family:var(--sans);font-size:.98rem;color:var(--text);
}
.dial-flag{font-size:1.05rem;line-height:1}
.dial-code{font-weight:500;letter-spacing:.01em}
.dial-btn svg{width:14px;height:14px;fill:none;stroke:var(--mute);stroke-width:1.8;
  transition:transform .3s var(--ease)}
.dial-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

.dial-pop{
  position:absolute;top:calc(100% + .4rem);left:0;z-index:40;
  width:min(21rem,78vw);
  background:#fff;border:1px solid rgba(26,19,12,.10);border-radius:10px;
  box-shadow:0 24px 60px -20px rgba(26,19,12,.28);
  overflow:hidden;
}
.dial-search{
  width:100%;min-height:46px;padding:.7rem .95rem;
  border:0;border-bottom:1px solid rgba(26,19,12,.08);
  font-family:var(--sans);font-size:.92rem;color:var(--text);
}
.dial-search:focus{outline:0;background:#f7f3ea}
.dial-list{
  list-style:none;margin:0;padding:.25rem;
  max-height:16rem;overflow-y:auto;overscroll-behavior:contain;
}
.dial-list li{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.65rem;
  padding:.5rem .7rem;border-radius:6px;cursor:pointer;
  font-size:.9rem;color:var(--text);
}
.dial-list li[hidden]{display:none}
.dial-list li:hover,.dial-list li.is-active{background:#f6f1e7}
.dial-list li[aria-selected="true"]{color:var(--champagne);font-weight:500}
.dial-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dial-num{color:var(--mute);font-size:.84rem}
.dial-empty{padding:.9rem 1rem;font-size:.88rem;color:var(--mute)}

/* dark submit, as in the reference */
.btn-dark{
  background:var(--void);color:var(--snow);border-color:var(--void);
  border-radius:9px;min-height:54px;
}
.btn-dark:hover{background:var(--charcoal);border-color:var(--charcoal);color:var(--champagne)}

.enquire .form-status{margin-top:.6rem;text-align:center}
.enquire .form-note{margin-top:.75rem}

@media (max-width:860px){
  .enquire-grid{grid-template-columns:1fr;gap:clamp(1.5rem,5vw,2.25rem)}
  .enquire-copy .title{max-width:none}
  .enquire-copy .lede{max-width:none}
}

/* ----------------------------------------------------------------- footer */
.footer{background:var(--void);color:rgba(247,243,234,.6);
  padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.footer-top{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:start}
.footer-mark{height:90px;width:auto}
.footer-nav{display:flex;flex-wrap:wrap;gap:.85rem 1.35rem;align-content:start}
.footer-nav a{font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(247,243,234,.72);text-decoration:none;transition:color .3s var(--ease)}
.footer-nav a:hover{color:var(--champagne)}
.footer-disclaimer{margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid var(--line)}
.footer-disclaimer .eyebrow{margin-bottom:.75rem}
.footer-disclaimer p{font-size:.78rem;line-height:1.75;color:rgba(247,243,234,.5)}
.footer-bottom{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--line);
  font-size:.72rem;color:rgba(247,243,234,.45)}

/* ------------------------------------------------------------- sticky cta */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:880;display:none;
  padding:.7rem 1.1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(8,5,3,.96);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .5s var(--ease);
}
.sticky-cta.is-visible{transform:none}
.sticky-cta .btn{width:100%;box-shadow:var(--shadow)}
@media (max-width:960px){
  .sticky-cta{display:block}
  .footer{padding-bottom:calc(2rem + 76px + env(safe-area-inset-bottom))}
}

/* ----------------------------------------------------------------- modals */
/* flex + margin:auto centres the panel without clipping its top when it
   overflows, and lets the scroll live here so the dial popup is not cut off */
.modal{position:fixed;inset:0;z-index:950;display:flex;align-items:center;justify-content:center;
  overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(.9rem,3vw,2rem);opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s var(--ease)}
.modal.is-open{opacity:1;visibility:visible}
.modal-scrim{position:absolute;inset:0;background:rgba(8,5,3,.74);backdrop-filter:blur(6px)}
.modal-panel{
  position:relative;width:min(620px,100%);margin:auto;overflow:visible;
  /* white, like the register card — on --snow the #f6f1e7 fields disappeared */
  background:#fff;border-radius:16px;
  transform:translateY(20px) scale(.985);transition:transform .45s var(--ease);
  box-shadow:0 50px 120px -40px rgba(8,5,3,.7);
}
.modal.is-open .modal-panel{transform:none}
/* no-image variant — narrower, centred */
.modal-panel--no-media{width:min(480px,100%)}
.modal-body{padding:clamp(1.5rem,3.5vw,2.5rem)}
.modal-body .title{margin-top:0;margin-bottom:clamp(1.1rem,2.5vw,1.6rem)}
.modal-close{position:absolute;top:.7rem;right:.7rem;z-index:3;
  width:40px;height:40px;border:0;background:rgba(26,19,12,.06);cursor:pointer;
  display:grid;place-items:center;border-radius:8px;color:var(--body);
  transition:background-color .3s var(--ease),color .3s var(--ease)}
.modal-close:hover{background:var(--void);color:var(--champagne)}
.modal-close svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.5;fill:none}

/* the card styling lives on the section; inside a modal the panel already is the card */
.modal .form-card{background:transparent;border:0;padding:0;border-radius:0;box-shadow:none}
.modal .fields{margin-top:0}

/* modal forms use the same controls as the register section */
.modal .field label{
  font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);margin-bottom:.45rem;
}
.modal .field input:not([type=hidden]):not(.hp),
.modal .field select{
  width:100%;min-height:54px;padding:.8rem 1rem;
  background:#f6f1e7;border:1px solid rgba(26,19,12,.12);border-radius:9px;
  font-family:var(--sans);font-size:.98rem;color:var(--text);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.modal .field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8e96' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:16px;
  padding-right:2.4rem;
}
.modal .field input:focus,.modal .field select:focus{outline:0;border-color:var(--champagne);background:#fff}
.modal .field input::placeholder{color:#a9a094}
.modal .phone input[type=tel]{background:transparent;border:0;border-radius:0 9px 9px 0}
.modal .phone input[type=tel]:focus{background:transparent}
.modal .dial-list{max-height:12.5rem}
.modal .form-status{margin-top:.6rem;text-align:center}
.modal .form-note{margin-top:.75rem}

@media (max-width:560px){
  .modal-panel{width:100%}
}

/* ----------------------------------------------------------------- reveal */
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in-view{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}
.reveal.d5{transition-delay:.40s}
.reveal.d6{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ------------------------------------------------------- statement band */
.statement{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--void);color:var(--snow);
  padding:clamp(5rem,11vw,9.5rem) 0;
  text-align:center;
}
/* soft champagne bloom so the flat ground reads as lit, not painted */
.statement-glow{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 78% at 50% 0%,rgba(201,160,99,.16) 0%,rgba(201,160,99,0) 62%),
    radial-gradient(90% 60% at 50% 100%,rgba(201,160,99,.09) 0%,rgba(201,160,99,0) 70%);
}
.statement .wrap{max-width:1000px}

.statement-text{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.3rem,2.5vw,2.05rem);
  line-height:1.55;
  letter-spacing:-.005em;
  color:rgba(247,243,234,.94);
  max-width:42ch;
  margin-inline:auto;
  text-wrap:pretty;
}
.statement-text::first-line{color:#fff}

/* hairline + diamond, drawn not typed */
.ornament{
  display:block;width:min(240px,54%);height:9px;margin:0 auto;
  position:relative;
}
.ornament::before{
  content:"";position:absolute;top:50%;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    rgba(201,160,99,0) 0%,rgba(201,160,99,.55) 22%,
    rgba(201,160,99,.55) 78%,rgba(201,160,99,0) 100%);
}
.ornament::after{
  content:"";position:absolute;top:50%;left:50%;
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  background:var(--champagne);transform:rotate(45deg);
}
.statement .ornament:first-of-type{margin-bottom:clamp(1.75rem,3.4vw,2.75rem)}
.statement .ornament:last-of-type{margin-top:clamp(1.75rem,3.4vw,2.75rem)}

@media (max-width:700px){
  .statement{padding:clamp(3.5rem,13vw,5rem) 0}
  .statement-text{font-size:clamp(1.15rem,5.4vw,1.5rem);line-height:1.5;max-width:28ch}
}

/* -------------------------------------------------------------- location */
.location{background:var(--void);color:var(--snow)}
.location .prose{color:rgba(247,243,234,.62);max-width:56ch;margin-inline:auto;margin-top:1.15rem}
.location .title{max-width:22ch;margin-inline:auto}

/* eyebrow flanked by hairlines */
.eyebrow-rule{
  display:inline-flex;align-items:center;gap:1rem;
  font-size:.66rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--champagne);
}
.eyebrow-rule::before,.eyebrow-rule::after{
  content:"";width:clamp(28px,5vw,64px);height:1px;background:currentColor;opacity:.75;
}

/* map fades into the ground rather than stopping at a hard edge */
.location-map{
  margin:clamp(2.25rem,5vw,3.5rem) 0 0;
  border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.location-map img{width:100%;display:block}
.location-map iframe{
  display:block;width:100%;height:clamp(320px,46vh,520px);border:0;
  /* the embed ships light; tone it down so it sits in the dark section */
  filter:grayscale(.35) contrast(1.05) brightness(.88);
}

.dest-grid{
  list-style:none;margin:clamp(1.5rem,3vw,2.25rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);   /* 3 + 3, even rows */
  gap:clamp(.7rem,1.2vw,1rem);
}
@media (max-width:920px){.dest-grid{grid-template-columns:repeat(2,1fr)}}
.dest{
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.15rem;border-radius:10px;
  background:var(--charcoal);border:1px solid rgba(255,255,255,.06);
  transition:background-color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.dest:hover{background:var(--elevated);border-color:var(--champagne-soft);transform:translateY(-2px)}
.dest-icon{
  flex:0 0 auto;width:42px;height:42px;border-radius:9px;
  display:grid;place-items:center;
  background:rgba(201,160,99,.12);border:1px solid rgba(201,160,99,.22);
}
.dest-icon svg{width:19px;height:19px;fill:var(--champagne)}
.dest-icon svg circle{fill:var(--void)}
.dest h3{font-family:var(--sans);font-size:.95rem;font-weight:600;line-height:1.3;color:var(--snow)}
.dest p{margin-top:.15rem;font-size:.82rem;color:rgba(247,243,234,.52)}

@media (max-width:700px){
  .location .title{max-width:none}
  .dest-grid{grid-template-columns:1fr}
}

/* ---------------------------------------------------- investment / CTA */
.opportunity{background:var(--void);color:var(--snow);overflow:hidden}

/* the render runs full width and uncropped */
.opp-media{margin:0}
.opp-media img{width:100%;height:auto;display:block}

/* sits between two full-bleed renders, so pad it evenly on both sides */
.opp-body{padding-block:clamp(3.25rem,6.5vw,5.5rem)}
.opp-body .eyebrow-rule{margin-bottom:clamp(1.5rem,3vw,2.25rem)}

.opp-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(1.5rem,4vw,4rem);align-items:start;
  padding-top:clamp(1.25rem,2.5vw,1.85rem);
  border-top:1px solid rgba(247,243,234,.14);
}
.opp-grid .title{max-width:16ch;color:var(--snow)}
.opp-side .lede{margin-top:0;color:rgba(247,243,234,.68);max-width:44ch}
.opp-side .actions{margin-top:clamp(1.35rem,2.5vw,1.85rem)}

@media (max-width:860px){
  .opp-grid{grid-template-columns:1fr;gap:1.25rem}
  .opp-grid .title{max-width:none}
  .opp-side .actions{flex-direction:column;align-items:stretch}
  .opp-side .actions .btn{width:100%}
}

/* ============================================= fqx · ultra-lux FAQ section */

/* ---- section shell ---- */
.fqx-section{
  position:relative;
  background:var(--snow);   /* distinct from void above & ivory-2 elsewhere */
  overflow:hidden;
  padding:clamp(5rem,10vw,8.5rem) 0 clamp(4.5rem,9vw,8rem);
}

/* top + bottom hairline rules in champagne */
.fqx-rule-top,
.fqx-rule-bottom{
  position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(201,160,99,.35) 20%,
    rgba(201,160,99,.7) 50%,
    rgba(201,160,99,.35) 80%,
    transparent 100%);
}
.fqx-rule-top{top:0}
.fqx-rule-bottom{bottom:0}

/* ---- wrap: centred single column ---- */
.fqx-center-wrap{
  max-width:820px;
  margin-inline:auto;
}

/* ---- section header: centred ---- */
.fqx-center-head{
  text-align:center;
  margin-bottom:clamp(3rem,6vw,5rem);
}
.fqx-center-head .fqx-ornament{
  justify-content:center;
}
.fqx-center-head .fqx-heading{
  max-width:none;
  margin:0;
}
.fqx-center-head .fqx-sub{
  max-width:52ch;
  margin-left:auto;
  margin-right:auto;
}

/* ---- shared typographic styles ---- */
.fqx-ornament{
  display:flex;
  margin-bottom:1.4rem;
  opacity:.75;
}

.fqx-eyebrow{
  display:block;
  font-family:var(--sans);font-weight:600;
  font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--champagne);
  margin-bottom:.9rem;
}

.fqx-heading{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.4rem,4.8vw,4rem);
  line-height:1.05;letter-spacing:-.025em;
  color:var(--ink);
  margin:0 0 1.4rem;
}
.fqx-heading em{
  display:block;
  font-style:italic;
  background:linear-gradient(135deg,var(--champagne-lt) 0%,var(--champagne) 60%,#8f6b32 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

.fqx-sub{
  font-size:.88rem;line-height:1.78;
  color:var(--body);
  margin:0 0 0;
}

/* ---- accordion list ---- */
.fqx-list{
  border-top:1px solid rgba(26,19,12,.08);
}

/* each item */
.fqx-item h3{margin:0}
.fqx-item{
  position:relative;
  border-bottom:1px solid rgba(26,19,12,.08);
  transition:border-color .35s var(--ease);
}
.fqx-item.fqx-open{
  border-color:rgba(201,160,99,.3);
}

/* the button */
.fqx-btn{
  width:100%;display:grid;
  grid-template-columns:3rem 1fr 2.2rem;
  align-items:center;
  gap:clamp(.6rem,1.5vw,1.2rem);
  padding:clamp(1.2rem,2.5vw,1.75rem) 0;
  background:none;border:0;cursor:pointer;
  text-align:left;
  font-family:var(--sans);
  color:var(--ink);
  transition:color .3s var(--ease);
}
.fqx-btn:hover{color:var(--champagne)}

/* numbered badge */
.fqx-num{
  font-family:var(--display);
  font-size:clamp(.9rem,1.4vw,1.1rem);
  font-weight:500;line-height:1;
  color:transparent;
  -webkit-text-stroke:1px var(--champagne);
  text-stroke:1px var(--champagne);
  letter-spacing:-.01em;
  transition:color .3s var(--ease),-webkit-text-stroke-color .3s var(--ease);
  flex-shrink:0;
}
.fqx-item.fqx-open .fqx-num,
.fqx-btn:hover .fqx-num{
  color:var(--champagne);
  -webkit-text-stroke-color:var(--champagne);
}

/* question text */
.fqx-q-text{
  font-size:clamp(.95rem,1.5vw,1.1rem);
  font-weight:500;line-height:1.4;
  letter-spacing:-.005em;
}

/* toggle icon */
.fqx-toggle{
  display:flex;align-items:center;justify-content:center;
  width:2.2rem;height:2.2rem;
  border:1px solid rgba(201,160,99,.3);
  border-radius:50%;
  flex-shrink:0;
  color:var(--champagne);
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .45s var(--ease);
}
.fqx-btn:hover .fqx-toggle{
  background:rgba(201,160,99,.08);
  border-color:rgba(201,160,99,.6);
}
.fqx-plus{
  width:14px;height:14px;display:block;
  overflow:visible;
}
.fqx-plus-v{
  transform-origin:12px 12px;
  transition:transform .4s var(--ease),opacity .3s var(--ease);
}
.fqx-item.fqx-open .fqx-toggle{
  background:rgba(201,160,99,.12);
  border-color:var(--champagne);
  transform:rotate(45deg);
}

/* champagne hairline that draws across on open */
.fqx-item-line{
  position:absolute;
  bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--champagne-lt),var(--champagne),transparent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s var(--ease);
  pointer-events:none;
}
.fqx-item.fqx-open .fqx-item-line{transform:scaleX(1)}

/* answer panel — grid-rows height trick */
.fqx-answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .48s var(--ease);
}
.fqx-item.fqx-open .fqx-answer{
  grid-template-rows:1fr;
}
.fqx-answer-inner{
  overflow:hidden;
  min-height:0;
}
.fqx-answer-inner p{
  padding:0 0 clamp(1.2rem,2.5vw,1.75rem) 0;
  padding-left:calc(3rem + clamp(.6rem,1.5vw,1.2rem));
  font-size:.9rem;line-height:1.82;
  color:var(--body);
  max-width:56ch;
}

/* no-JS: leave answers visible if JS never ran */
.fqx-answer{visibility:visible}

/* ---- responsive ---- */
@media (max-width:560px){
  .fqx-btn{grid-template-columns:2.4rem 1fr 2rem}
  .fqx-answer-inner p{padding-left:calc(2.4rem + clamp(.6rem,1.5vw,1.2rem))}
  .fqx-heading{font-size:clamp(2rem,8vw,2.8rem)}
}

/* ------------------------------------------------------- phone field fix */
/* `.modal .field input:not([type=hidden]):not(.hp)` scores the same as the
   earlier phone override, so the number input kept its own border/background
   and drew a second box inside the wrapper. These match that specificity and
   come last, so the composite field renders as one control. */
.enquire .field .phone input[type=tel],
.modal .field .phone input[type=tel]{
  background:transparent;
  border:0;
  border-radius:0 9px 9px 0;
  min-height:52px;
}
.enquire .field .phone input[type=tel]:focus,
.modal .field .phone input[type=tel]:focus{
  background:transparent;
  border:0;
}
/* SUCCESS TOAST */
.success-toast{position:fixed;bottom:2rem;right:2rem;z-index:9999;width:min(22rem,calc(100vw - 2rem));background:linear-gradient(135deg,#0d2016 0%,#10301f 100%);border:1px solid rgba(201,160,99,.25);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset;overflow:hidden;opacity:0;transform:translateY(1.5rem) scale(.96);pointer-events:none;transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1)}
.success-toast.is-visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.success-toast__inner{display:flex;align-items:center;gap:1rem;padding:1.15rem 1.1rem 1.15rem 1.25rem}
.success-toast__icon{flex-shrink:0;width:48px;height:48px;color:#c9a063}
.success-toast__icon svg{width:100%;height:100%}
.success-toast__circle{stroke-dasharray:151;stroke-dashoffset:151;transition:stroke-dashoffset .55s ease .1s}
.success-toast__check{stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .4s ease .55s}
.success-toast.is-visible .success-toast__circle,.success-toast.is-visible .success-toast__check{stroke-dashoffset:0}
.success-toast__content{flex:1;min-width:0}
.success-toast__title{font-family:var(--font-serif,Georgia,serif);font-size:1rem;color:#e8dcc8;margin:0 0 .18rem;font-weight:600;letter-spacing:.01em}
.success-toast__msg{font-size:.82rem;color:rgba(232,200,138,.7);margin:0;line-height:1.45}
.success-toast__close{flex-shrink:0;background:none;border:none;cursor:pointer;padding:.35rem;margin:-.35rem;color:rgba(232,200,138,.45);transition:color .2s;display:flex;align-items:center;justify-content:center}
.success-toast__close:hover{color:#c9a063}
.success-toast__close svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.success-toast__progress{height:2px;background:linear-gradient(90deg,#c9a063,#dcb87a);width:100%;transform-origin:left;transform:scaleX(1)}
.success-toast.is-dismissing .success-toast__progress{transform:scaleX(0);transition:transform var(--toast-duration,5s) linear}
@media(max-width:480px){.success-toast{bottom:1rem;right:1rem;width:calc(100vw - 2rem)}}


/* ==========================================================================
   Sei Saadiyat — header
   Transparent over the hero, solid #080503 once scrolled. The header carries the
   full Sei / SAADIYAT lockup, so it is sized for a stacked wordmark.
   ========================================================================== */
:root{ --header:112px; }
@media (max-width:960px){ :root{ --header:92px; } }
@media (max-width:560px){ :root{ --header:80px; } }

.header{
  background:transparent;
  border-bottom-color:transparent;
}
.header.is-on{
  background:#080503;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:var(--line);
  height:84px;
}
@media (max-width:960px){ .header.is-on{height:76px} }
@media (max-width:560px){ .header.is-on{height:68px} }

.brand img{height:clamp(50px,5.4vw,74px)}
.header.is-on .brand img{height:clamp(40px,4.2vw,56px)}

/* hero sub-line under the H1 — .lede is dark-on-light, so the hero needs its own */
.hero-lede{
  max-width:44rem;margin-top:1.35rem;
  font-size:clamp(1rem,1.15vw,1.2rem);font-weight:300;line-height:1.65;
  color:rgba(247,243,234,.86);
  text-shadow:0 1px 24px rgba(8,5,3,.5);
}
.hero .actions{margin-top:1.9rem}
@media (max-width:560px){ .hero-lede{font-size:1rem;margin-top:1.1rem} }

/* --------------------------------------------------------- about split */
/* Image one side, copy the other. The render keeps its natural ratio inside
   the column — no crop — and drifts slowly so the block is not static. */
/* the overview title and this block read as one unit — collapse the gap */
.overview-title{padding-bottom:clamp(1.25rem,2.4vw,2rem)}
.about-section{padding:clamp(1.25rem,2.4vw,2rem) 0 clamp(3.5rem,7vw,6rem)}
.about-split{
  grid-template-columns:1.24fr .76fr;
  align-items:center;
  gap:clamp(1.75rem,3.6vw,3.25rem);
}
.about-copy .prose{max-width:none}
.about-copy .prose p{font-size:.94rem;line-height:1.78}
.about-copy .prose p + p{margin-top:.85rem}
@media (max-width:1100px){
  .about-split{grid-template-columns:1.1fr .9fr}
  .about-copy .prose p{font-size:.9rem}
}
@media (max-width:860px){
  .about-split{grid-template-columns:1fr}
  .about-copy .prose p{font-size:.95rem}
}
.about-media{
  margin:0;overflow:hidden;border-radius:var(--radius);
  background:var(--charcoal);
}
.about-media img{
  width:100%;height:auto;display:block;border-radius:0;
  transform:scale(1.04);
  animation:aboutDrift 26s ease-in-out infinite alternate;
}
@keyframes aboutDrift{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to  {transform:scale(1.11) translate3d(-1.4%,-1.2%,0)}
}
/* the wipe is an enhancement — with no JS the image is simply visible */
.about-media.in-view{animation:aboutWipe 1.1s var(--ease) both}
@keyframes aboutWipe{
  from{clip-path:inset(0 0 100% 0)}
  to  {clip-path:inset(0 0 0 0)}
}
.about-copy .prose p:last-child{margin-bottom:0}

@media (max-width:860px){
  .about-media{order:0}
}
@media (prefers-reduced-motion:reduce){
  .about-media.in-view{animation:none}
  .about-media img{animation:none;transform:none}
}

/* ---------------------------------------------------------- residences */
.residences-sec{padding:clamp(3.5rem,7vw,6rem) 0}
.res-head{max-width:62rem}
.res-head .title{margin:.75rem 0 1.15rem}
.res-head .prose{max-width:56rem;font-size:.94rem;line-height:1.78}

.trio{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.75rem,1.4vw,1.25rem);
  margin-top:clamp(2rem,4vw,3.25rem);
}
.trio-item{
  margin:0;overflow:hidden;border-radius:var(--radius);background:var(--charcoal);
}
.trio-item img{
  width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease);
}
.trio-item:hover img{transform:scale(1.06)}
@media (max-width:860px){
  .trio{grid-template-columns:1fr 1fr}
  .trio-item:last-child{grid-column:1 / -1}
}
@media (max-width:560px){
  .trio{grid-template-columns:1fr}
  .trio-item:last-child{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){.trio-item:hover img{transform:none}}

/* in-page anchors clear the sticky header */
[id]{scroll-margin-top:calc(var(--header) + 16px)}

/* --------------------------------------------------- residence cards */
.res-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid rgba(26,19,12,.08);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.res-card:hover{
  transform:translateY(-4px);
  border-color:rgba(201,160,99,.4);
  box-shadow:0 18px 44px rgba(26,19,12,.10);
}
.res-card-media{margin:0;overflow:hidden;background:var(--charcoal)}
.res-card-media img{
  width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease);
}
.res-card:hover .res-card-media img{transform:scale(1.06)}
.res-card-body{
  display:flex;flex-direction:column;flex:1;
  padding:clamp(1.15rem,1.8vw,1.6rem);
}
.res-card-body h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.15;
  color:var(--text);margin:0 0 .6rem;
}
.res-card-body p{
  font-family:var(--sans);font-weight:300;
  font-size:.875rem;line-height:1.72;color:var(--body);
  margin:0 0 1.15rem;flex:1;
}
.res-cta{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.55rem;
  padding:0;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:.68rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text);
  position:relative;padding-bottom:6px;
}
.res-cta::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--champagne);transform:scaleX(1);transform-origin:left center;
  transition:transform .45s var(--ease);
}
.res-cta:hover{color:var(--champagne)}
.res-cta:hover::after{transform:scaleX(.4)}
.res-cta svg{
  width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .4s var(--ease);
}
.res-cta:hover svg{transform:translateX(4px)}

.modal-unit{
  font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--champagne);
  margin:-.35rem 0 1rem;
}
@media (prefers-reduced-motion:reduce){
  .res-card:hover{transform:none}
  .res-card:hover .res-card-media img{transform:none}
  .res-cta:hover svg{transform:none}
}

/* ---------------------------------------------------------- master plan */
.masterplan-sec{padding:clamp(3.5rem,7vw,6rem) 0}
.mp-split{
  grid-template-columns:1.06fr .94fr;
  align-items:center;
  gap:clamp(1.75rem,4vw,3.5rem);
}
.mp-copy .eyebrow{margin-bottom:.9rem}
.mp-copy .title{margin:0 0 1.15rem}
.mp-copy .prose{max-width:none}
.mp-copy .prose p{font-size:.94rem;line-height:1.78}
.mp-copy .prose p + p{margin-top:.85rem}

.mp-media{
  margin:0;overflow:hidden;border-radius:var(--radius);background:var(--charcoal);
}
.mp-media img{
  width:100%;height:auto;display:block;border-radius:0;
  transform:scale(1.02);
  animation:aboutDrift 30s ease-in-out infinite alternate;
}
.mp-media.in-view{animation:aboutWipe 1.1s var(--ease) both}

@media (max-width:1100px){.mp-copy .prose p{font-size:.9rem}}
@media (max-width:860px){
  .mp-split{grid-template-columns:1fr}
  .mp-copy .prose p{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
  .mp-media.in-view{animation:none}
  .mp-media img{animation:none;transform:none}
}

/* ------------------------------------------------------- amenity tiles */
.am-head{max-width:64rem;margin-inline:auto}
.amenities .am-head .eyebrow-rule{margin-bottom:1rem}
.amenities .title{max-width:22ch;margin-inline:auto}
.amenities .prose{
  color:rgba(247,243,234,.62);max-width:64ch;
  margin-inline:auto;margin-top:1.15rem;font-size:.94rem;line-height:1.78;
}

/* A hairline matrix rather than six boxes — the rules do the dividing, so the
   grid reads as one plane instead of a row of cards. */
.am-tiles{
  list-style:none;padding:0;
  margin:clamp(2.5rem,5vw,4rem) 0 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid rgba(247,243,234,.12);
}
.am-tile{
  position:relative;isolation:isolate;
  padding:clamp(1.75rem,3vw,2.6rem) clamp(1.25rem,2.2vw,2rem) clamp(1.75rem,3vw,2.4rem);
  border-bottom:1px solid rgba(247,243,234,.12);
  border-right:1px solid rgba(247,243,234,.12);
  transition:color .4s var(--ease);
}
.am-tiles .am-tile:nth-child(3n){border-right:0}
/* a champagne wash grows from the bottom edge on hover */
.am-tile::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(201,160,99,0) 0%,rgba(201,160,99,.10) 100%);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .55s var(--ease);
}
.am-tile:hover::before{transform:scaleY(1)}
/* and a champagne rule replaces the hairline underneath */
.am-tile::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--champagne);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s var(--ease);
}
.am-tile:hover::after{transform:scaleX(1)}

.am-idx{
  display:block;
  font-family:var(--display);font-size:.9rem;letter-spacing:.14em;
  color:rgba(201,160,99,.65);margin-bottom:clamp(1.25rem,2.4vw,2rem);
}
.am-icon{display:block;margin-bottom:clamp(.9rem,1.6vw,1.25rem)}
.am-icon svg{
  width:60px;height:60px;fill:none;stroke:var(--champagne);
  stroke-width:1;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s var(--ease),stroke .4s var(--ease);
}
.am-tile:hover .am-icon svg{transform:translateY(-3px);stroke:var(--gold-2,#e8c88a)}

.am-tile h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.25;
  color:var(--snow);margin:0 0 .55rem;
}
.am-tag{
  display:block;font-family:var(--sans);
  font-size:.6rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(247,243,234,.38);
}

@media (max-width:900px){
  .am-tiles{grid-template-columns:repeat(2,1fr)}
  .am-tiles .am-tile:nth-child(3n){border-right:1px solid rgba(247,243,234,.12)}
  .am-tiles .am-tile:nth-child(2n){border-right:0}
}
@media (max-width:560px){
  .am-tiles{grid-template-columns:1fr}
  .am-tiles .am-tile{border-right:0!important}
  .am-idx{margin-bottom:1rem}
}
@media (prefers-reduced-motion:reduce){
  .am-tile:hover .am-icon svg{transform:none}
}

/* Image-led amenities carousel */
.amenities{
  background:var(--snow);color:var(--text);overflow:hidden;
}
.amenities .am-intro{margin-bottom:clamp(2rem,4vw,3.5rem)}
.amenities .am-head .eyebrow-rule{margin-bottom:1rem}
.amenities .title{max-width:22ch;margin-inline:auto}
.amenities .prose{
  color:var(--body);max-width:58ch;margin:1.15rem auto 0;
  font-size:.94rem;line-height:1.78;
}
.am-carousel{position:relative;width:100%}
.am-viewport{
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-inline:contain;
  padding-inline:clamp(1.1rem,2.4vw,3rem);
}
.am-viewport::-webkit-scrollbar{display:none}
.am-viewport:focus-visible{outline-offset:-3px}
.am-cards{
  width:max-content;display:flex;gap:clamp(.85rem,1.35vw,1.65rem);
  list-style:none;margin:0;padding:0 0 .25rem;
}
.am-card{
  position:relative;isolation:isolate;overflow:hidden;
  flex:0 0 clamp(300px,26.5vw,540px);
  aspect-ratio:.76;border-radius:10px;background:var(--charcoal);
  scroll-snap-align:start;
}
.am-card::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 42%,rgba(8,5,3,.12) 58%,rgba(8,5,3,.91) 100%);
}
.am-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
.am-card:nth-child(2) img,.am-card:nth-child(5) img{object-position:center}
.am-card:hover img{transform:scale(1.035)}
.am-card-copy{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(1.1rem,2vw,1.7rem);
  color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.25);
}
.am-card-copy h3{
  margin:0 0 .55rem;font-family:var(--sans);font-size:clamp(1rem,1.4vw,1.45rem);
  min-height:0;font-weight:500;line-height:1.2;letter-spacing:-.01em;text-transform:uppercase;
}
.am-card-copy p{
  margin:0;max-width:34ch;font-family:var(--sans);
  font-size:clamp(.82rem,1.02vw,1.08rem);line-height:1.38;font-weight:300;
}
.am-arrow{
  position:absolute;top:50%;z-index:4;width:58px;height:58px;
  display:grid;place-items:center;border:0;border-radius:50%;
  color:#0e3557;background:#fff;box-shadow:0 8px 28px rgba(8,5,3,.18);
  cursor:pointer;transform:translateY(-50%);
  transition:opacity .25s ease,transform .3s var(--ease),background-color .3s ease;
}
.am-arrow:hover{background:var(--ivory);transform:translateY(-50%) scale(1.05)}
.am-arrow:disabled{opacity:0;pointer-events:none}
.am-arrow svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.am-arrow-prev{left:clamp(.5rem,1.4vw,1.75rem)}
.am-arrow-next{right:clamp(.5rem,1.4vw,1.75rem)}

@media (max-width:700px){
  .amenities .am-intro{margin-bottom:1.75rem}
  .am-viewport{padding-inline:1.1rem;scroll-padding-inline:1.1rem}
  .am-card{flex-basis:min(82vw,360px);aspect-ratio:.72}
  .am-card-copy{padding:1.2rem}
  .am-card-copy h3{font-size:1rem}
  .am-card-copy p{font-size:.84rem}
  .am-arrow{width:48px;height:48px}
  .am-arrow svg{width:23px;height:23px}
}
@media (prefers-reduced-motion:reduce){
  .am-viewport{scroll-behavior:auto}
  .am-card:hover img{transform:none}
}

/* the old two-column highlights layout was removed with its markup */


/* --------------------------------------------------- Sei additions */
.status-list{margin:clamp(2rem,4vw,3rem) 0 0;padding:0;border-top:1px solid var(--line)}
.section:not(.dark):not(.void) .status-list{border-top-color:var(--line-d)}
.status-list div{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;
  padding:1.1rem .2rem;border-bottom:1px solid var(--line)}
.section:not(.dark):not(.void) .status-list div{border-bottom-color:var(--line-d)}
.status-list dt{font-family:var(--display);font-size:1.28rem;font-weight:600;line-height:1.3}
.status-list dd{margin:0;font-size:.63rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--champagne);border:1px solid var(--line);padding:.45rem .85rem;border-radius:var(--radius);white-space:nowrap}
.section:not(.dark):not(.void) .status-list dd{border-color:var(--line-d)}
.status-list dd.is-open{color:var(--void);background:var(--champagne);border-color:var(--champagne)}
@media (max-width:560px){
  .status-list div{grid-template-columns:1fr}
  .status-list dd{justify-self:start}
}
.media-note{margin-top:1rem;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);line-height:1.7}
.feature-band figcaption{padding:.9rem 1rem;margin:0;text-align:center;font-size:.63rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mute);background:var(--void)}

/* Full-bleed location photography sits with the warm palette rather than
   pulling the page back towards Gulf blue. */
.feature-band img{filter:sepia(.16) saturate(.9) contrast(1.03)}
.trio-item img,.split-media img{filter:sepia(.1) saturate(.94)}

/* District gallery: portrait source photography needs a taller frame than the
   16/10 the trio uses elsewhere, or the picture is lost to the crop. */
.location .trio-item img{aspect-ratio:4/5}
@media (max-width:700px){.location .trio-item img{aspect-ratio:16/10}}

/* "To be announced" chips need more weight against the cream ground */
.section:not(.dark):not(.void) .status-list dd{color:#8f6b32;border-color:rgba(143,107,50,.34)}

/* Every call to action on this page is gold — the form submit included. */
.form-card .btn-dark{background:var(--champagne);color:var(--void);border-color:var(--champagne)}
.form-card .btn-dark:hover{background:var(--champagne-lt);border-color:var(--champagne-lt);color:var(--void)}

/* ==========================================================================
   Timber ground
   The teaser sets the gold script into dark figured walnut. Every flat dark
   surface on the page carries that same timber rather than a plain black:
   a seamless 1400px tile, dimmed under a warm wash so type stays legible.
   ========================================================================== */
:root{
  --timber:url("../img/timber-walnut.webp");
  --timber-size:760px;
}

.statement,
.location,
.footer,
.hero,
.feature-band figcaption,
.modal-panel--no-media{
  background-color:var(--void);
  background-image:linear-gradient(rgba(8,5,3,.62),rgba(8,5,3,.62)),var(--timber);
  background-size:auto,var(--timber-size);
  background-repeat:repeat,repeat;
  background-position:center,center;
}

/* the statement band is the one place the grain is allowed to show properly */
.statement{
  background-image:
    radial-gradient(120% 78% at 50% 50%,rgba(8,5,3,.40),rgba(8,5,3,.86) 78%),
    var(--timber);
  background-size:auto,860px;
}

/* caption strips are only ~40px tall — a big tile reads as a smear there */
.feature-band figcaption{
  background-size:auto,300px;
}

/* scrolled header and the mobile sticky bar pick the timber up too */
.header.is-on{
  background-image:linear-gradient(rgba(8,5,3,.90),rgba(8,5,3,.90)),var(--timber);
  background-size:auto,var(--timber-size);
}
.sticky-cta{
  background-image:linear-gradient(rgba(8,5,3,.93),rgba(8,5,3,.93)),var(--timber);
  background-size:auto,420px;
}

/* the dark chips inside the district band sit on the same board, one shade up */
.dest{
  background-image:linear-gradient(rgba(22,16,10,.80),rgba(22,16,10,.80)),var(--timber);
  background-size:auto,520px;
}
.dest:hover{
  background-image:linear-gradient(rgba(36,23,8,.74),rgba(36,23,8,.74)),var(--timber);
}

/* The About figure is a marketing render, not stock. It is shown whole at its
   natural ratio and at its own colour — no cover crop, no drift scale, no grade. */
.about-media img{
  transform:none;
  animation:none;
  filter:none;
  object-fit:fill;
}
.about-media figcaption{
  margin-top:.85rem;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);line-height:1.7;
}

/* Marketing renders are shown as the developer drew them: whole, at natural
   ratio, ungraded. The warm grade and the drift scale are for stock only. */
.feature-band.is-render img{filter:none;transform:none}
.about-media figcaption{
  margin-top:0;padding:.9rem 1.15rem 1rem;
  color:rgba(247,243,234,.62);
}

/* ==========================================================================
   Film bands
   Chromeless Vimeo background players, full-bleed at 16:9, sitting on the same
   timber board as the other dark surfaces. The iframe is only given its src
   once the band scrolls close (see main.js) — two players loaded at first paint
   would cost more than the rest of the page put together.
   ========================================================================== */
.video-band{
  position:relative;
  background-color:var(--void);
  background-image:linear-gradient(rgba(8,5,3,.55),rgba(8,5,3,.55)),var(--timber);
  background-size:auto,var(--timber-size);
}
.video-frame{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:var(--void);
}
.video-frame iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;border:0;display:block;
  /* the player letterboxes itself unless it is allowed to overflow the frame */
  min-width:177.78vh;min-height:56.25vw;
  pointer-events:none;
}
/* a hairline of the board top and bottom keeps the film from floating loose */
.video-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 18px 40px -18px rgba(8,5,3,.9),inset 0 -18px 40px -18px rgba(8,5,3,.9);
}
.video-band figcaption{
  position:relative;z-index:2;
  padding:.9rem 1rem;margin:0;text-align:center;
  font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);
}
/* until the player loads, the band is the board rather than a white flash */
.video-frame:not(.is-loaded){background:var(--void)}

@media (max-width:700px){
  .video-frame{aspect-ratio:4/3}
}

/* A still sits behind each player: it covers the black gap before the iframe
   attaches, and it is what a visitor sees if Vimeo is blocked for them. */
.video-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;
}
.video-frame iframe{z-index:1}

/* ==========================================================================
   Prime attractions
   A dark, image-led grid sitting between the cream Island copy and the shores
   film, so the page does not run three light bands together.
   ========================================================================== */
.attractions-sec{
  background-color:var(--void);color:var(--snow);
  background-image:linear-gradient(rgba(8,5,3,.66),rgba(8,5,3,.66)),var(--timber);
  background-size:auto,var(--timber-size);
}
.attractions-sec .prose{color:rgba(247,243,234,.62);max-width:62ch;margin-inline:auto;margin-top:1.15rem}
.attractions-sec .title{max-width:24ch;margin-inline:auto}

.attractions-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.9rem,1.6vw,1.4rem);
  margin-top:clamp(2.25rem,4.5vw,3.5rem);
}
@media (max-width:1000px){.attractions-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.attractions-grid{grid-template-columns:1fr}}

.attraction{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:rgba(22,16,10,.55);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.attraction:hover{border-color:var(--champagne-soft);transform:translateY(-3px)}
.attraction-media{margin:0;overflow:hidden;background:var(--charcoal)}
.attraction-media img{
  width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.attraction:hover .attraction-media img{transform:scale(1.05)}
.attraction-body{padding:1.25rem 1.3rem 1.5rem}
.attraction-body h3{
  font-family:var(--display);font-size:1.4rem;font-weight:600;line-height:1.2;
  color:var(--champagne-lt);margin-bottom:.5rem;
}
.attraction-body p{margin:0;font-size:.86rem;line-height:1.72;color:rgba(247,243,234,.66)}
.attractions-sec .media-note{text-align:center;margin-top:clamp(1.5rem,3vw,2.25rem)}

/* ==========================================================================
   Project highlights
   Was a beige two-column list with an unrelated interior photo beside it — the
   flattest band on the page. Now four numbered panels on the timber board, with
   the numeral cut in gold outline so the section carries weight without needing
   photography it does not have.
   ========================================================================== */
.highlights-sec{
  background-color:var(--void);color:var(--snow);
  background-image:linear-gradient(rgba(8,5,3,.72),rgba(8,5,3,.72)),var(--timber);
  background-size:auto,var(--timber-size);
}
.highlights-sec .prose{color:rgba(247,243,234,.62);max-width:60ch;margin-inline:auto;margin-top:1.15rem}
.highlights-sec .title{max-width:20ch;margin-inline:auto}

.hl-grid{
  list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,1.8vw,1.6rem);
}
@media (max-width:1080px){.hl-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.hl-grid{grid-template-columns:1fr}}

.hl-panel{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(1.6rem,2.2vw,2.1rem) clamp(1.3rem,1.8vw,1.6rem) clamp(1.8rem,2.4vw,2.2rem);
  border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(22,16,10,.5);
  transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease);
}
.hl-panel::before{
  content:"";position:absolute;top:-1px;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--champagne),transparent);
  transition:width 1s var(--ease) .15s;
}
.hl-panel.in-view::before{width:100%}
.hl-panel:hover{
  border-color:var(--champagne-soft);
  background:rgba(36,23,8,.5);
  transform:translateY(-3px);
}

/* the numeral is drawn, not set: outlined gold, sitting behind the copy */
.hl-numeral{
  display:block;font-family:var(--display);font-style:italic;font-weight:600;
  font-size:clamp(3.4rem,4.4vw,4.6rem);line-height:.85;
  color:transparent;
  -webkit-text-stroke:1px rgba(201,160,99,.55);
  margin-bottom:1.1rem;
  transition:color .5s var(--ease),-webkit-text-stroke-color .5s var(--ease);
}
.hl-panel:hover .hl-numeral{
  color:rgba(201,160,99,.14);
  -webkit-text-stroke-color:rgba(232,200,138,.85);
}
/* Firefox has no text-stroke on this property path — fall back to a solid fill */
@supports not (-webkit-text-stroke: 1px red){
  .hl-numeral{color:rgba(201,160,99,.42)}
}

.hl-panel-body h3{
  font-family:var(--display);font-size:1.42rem;font-weight:600;line-height:1.22;
  color:var(--champagne-lt);margin-bottom:.65rem;
}
.hl-panel-body p{margin:0;font-size:.85rem;line-height:1.75;color:rgba(247,243,234,.66)}

/* --------------------------------------------------------------- modal type
   The panel was given the timber ground with the other dark surfaces, but its
   type was still coloured for the light panel it used to be — the heading was
   near-black on near-black. Everything inside now reads for a dark ground. */
.modal-panel--no-media .modal-body .title{color:var(--champagne-lt)}
.modal-panel--no-media .modal-body .modal-unit{color:rgba(247,243,234,.72)}
.modal-panel--no-media .modal-body label{color:rgba(247,243,234,.6)}
.modal-panel--no-media .modal-body .form-status{color:rgba(247,243,234,.72)}
.modal-panel--no-media .modal-close{color:rgba(247,243,234,.7);border-color:var(--line)}
.modal-panel--no-media .modal-close:hover{background:var(--champagne);color:var(--void);border-color:var(--champagne)}

/* ==========================================================================
   FAQ — redesign
   Bay centres the list in a ~500px column inside a 1440px band, so open answers
   wrapped into a thin ribbon. Kept as one centred column, but the heading sits
   above it and the list is given a readable measure, with each row a bordered
   card and a gold spine marking the open one.
   ========================================================================== */
.fqx-shell{max-width:960px;margin-inline:auto}

.fqx-head{margin-bottom:clamp(2.5rem,5vw,4rem)}
.fqx-head .fqx-heading{
  margin:1.1rem 0 0;
  font-size:clamp(2rem,4vw,3.4rem);line-height:1.06;
}
.fqx-head .fqx-sub{
  margin:1.25rem auto 0;max-width:56ch;
  font-size:.95rem;line-height:1.8;color:var(--body);
}

/* ---- the list gets the room it was missing ---- */
.fqx-shell .fqx-list{border-top:0}
.fqx-shell .fqx-item{
  border-bottom:0;
  border:1px solid rgba(26,19,12,.09);
  border-radius:var(--radius);
  background:rgba(255,255,255,.5);
  margin-bottom:.6rem;
  overflow:hidden;
  transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.fqx-shell .fqx-item:hover{border-color:rgba(201,160,99,.4)}
.fqx-shell .fqx-item.fqx-open{
  border-color:rgba(201,160,99,.5);
  background:var(--ivory-2);
  box-shadow:0 14px 34px -22px rgba(26,19,12,.4);
}
/* a gold spine marks the open row */
.fqx-shell .fqx-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--champagne);
  transform:scaleY(0);transform-origin:top;
  transition:transform .45s var(--ease);
}
.fqx-shell .fqx-item.fqx-open::before{transform:scaleY(1)}
.fqx-shell .fqx-item-line{display:none}

.fqx-shell .fqx-btn{padding:1.25rem 1.5rem}
.fqx-shell .fqx-q-text{
  font-family:var(--display);
  font-size:clamp(1.18rem,1.8vw,1.45rem);
  font-weight:600;line-height:1.3;letter-spacing:0;
  color:var(--text);
}
.fqx-shell .fqx-answer-inner p{
  padding:0 1.5rem 1.6rem;
  padding-left:calc(3rem + 1.5rem);
  max-width:72ch;
  font-size:.93rem;line-height:1.85;color:var(--body);
}
@media (max-width:560px){
  .fqx-shell .fqx-answer-inner p{padding-left:1.5rem}
}

/* closing call to action, centred under the list */
.fqx-foot{
  margin-top:clamp(2.25rem,4vw,3.25rem);
  padding-top:clamp(1.75rem,3vw,2.5rem);
  border-top:1px solid rgba(201,160,99,.35);
  text-align:center;
}
.fqx-foot p{
  margin:0 0 1.1rem;font-size:.78rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
}

/* the band no longer needs the deep bottom padding it carried before */
.fqx-section{padding-bottom:clamp(3.5rem,6vw,5.5rem)}