/* ==========================================================================
   Lulu Island Abu Dhabi — luxe layer
   Loaded after style.css. Deepens the base palette, enriches the gold and
   adds the components this page needs (status ribbon, stat band, timeline,
   confirmed/unconfirmed panel, quote block, wordmark).
   ========================================================================== */

:root{
  /* deeper ink, warmer paper */
  --void:#050a11;
  --charcoal:#0a1421;
  --elevated:#11202f;

  --ivory:#f7f3ec;
  --ivory-2:#efe9de;
  --snow:#fbf8f3;

  /* richer, more saturated gold */
  --champagne:#c9a45c;
  --champagne-lt:#e6c78a;
  --champagne-dp:#a8823c;
  --champagne-soft:rgba(201,164,92,.20);

  --gold-grad:linear-gradient(100deg,
    #a8823c 0%, #d9b678 22%, #f3e3bd 46%, #d9b678 68%, #a8823c 100%);

  --line:rgba(243,239,232,.14);
  --line-d:rgba(10,20,33,.11);

  --shadow:0 30px 80px rgba(5,10,17,.22);
  --shadow-gold:0 18px 44px rgba(168,130,60,.22);
}

/* ------------------------------------------------------------- primitives */

/* gold hairline used to open and close sections */
.rule-gold{
  height:1px;width:min(100%,120px);border:0;margin:0;
  background:var(--gold-grad);opacity:.9;
}
.rule-gold.center{margin-inline:auto}

/* italic gold accents inside display headings */
.title em,.hero h1 em,.fqx-heading em{
  font-style:italic;
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* gold buttons get depth and a sheen */
.btn-champagne{
  background:var(--gold-grad);
  background-size:200% 100%;
  background-position:0% 50%;
  border-color:transparent;
  color:#1b1305;
  font-weight:600;
  box-shadow:var(--shadow-gold);
  transition:background-position .7s var(--ease),transform .35s var(--ease),
             box-shadow .35s var(--ease);
}
.btn-champagne:hover{
  background-position:100% 50%;
  border-color:transparent;
  box-shadow:0 22px 54px rgba(168,130,60,.34);
}

.btn-ghost{border-color:rgba(230,199,138,.42);color:var(--snow)}
.btn-ghost:hover{background:var(--champagne-lt);color:var(--void);border-color:var(--champagne-lt)}

/* ------------------------------------------------------------- brand mark */
.brandmark{
  display:flex;flex-direction:column;gap:.28rem;
  text-decoration:none;line-height:1;
}
.brandmark-name{
  font-family:var(--display);
  font-size:clamp(1.2rem,2.1vw,1.55rem);
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--snow);
}
.brandmark-sub{
  display:flex;align-items:center;gap:.5rem;
  font-size:.52rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  color:var(--champagne-lt);
}
.brandmark-sub::before{
  content:"";width:16px;height:1px;background:var(--gold-grad);
}
.header.is-on .brandmark-name{font-size:clamp(1.05rem,1.8vw,1.3rem)}

.footer .brandmark-name{font-size:clamp(1.4rem,2.6vw,1.9rem)}

/* ----------------------------------------------------------------- hero */
.hero{min-height:100svh}

.hero-veil{
  background:
    radial-gradient(120% 90% at 50% 100%,rgba(5,10,17,.86) 0%,rgba(5,10,17,.30) 55%,rgba(5,10,17,.15) 100%),
    linear-gradient(to bottom,rgba(5,10,17,.62) 0%,rgba(5,10,17,.18) 34%,rgba(5,10,17,.78) 100%);
}

/* fine grain so the photograph reads as print rather than screen */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.6'/></svg>");
}

.hero h1{
  font-size:clamp(2.9rem,8.4vw,6.5rem);
  letter-spacing:-.02em;line-height:.98;
}
.hero-sub{
  display:block;margin-top:.55rem;
  font-family:var(--sans);
  font-size:clamp(.66rem,1.5vw,.86rem);
  font-weight:500;letter-spacing:.44em;text-transform:uppercase;
  color:var(--champagne-lt);
}

/* "developer confirmed" ribbon above the headline */
.status-ribbon{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.42rem .95rem;margin-bottom:1.35rem;
  border:1px solid rgba(230,199,138,.36);
  border-radius:100px;
  background:rgba(5,10,17,.42);
  backdrop-filter:blur(6px);
  font-size:.6rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--champagne-lt);
}
.status-ribbon .dot{
  width:6px;height:6px;border-radius:50%;background:var(--champagne-lt);
  box-shadow:0 0 0 0 rgba(230,199,138,.65);
  animation:pulseDot 2.6s infinite;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(230,199,138,.55)}
  70%{box-shadow:0 0 0 9px rgba(230,199,138,0)}
  100%{box-shadow:0 0 0 0 rgba(230,199,138,0)}
}
@media (prefers-reduced-motion:reduce){.status-ribbon .dot{animation:none}}

/* --------------------------------------------------------------- statband */
.statband{
  background:var(--void);color:var(--snow);
  padding-block:clamp(2.5rem,5vw,3.75rem);
  border-top:1px solid rgba(230,199,138,.16);
  border-bottom:1px solid rgba(230,199,138,.16);
}
.statband-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
}
.statband-item{
  position:relative;padding-left:clamp(1rem,2vw,1.6rem);
  border-left:1px solid rgba(230,199,138,.22);
}
.statband-item:first-child{border-left:0;padding-left:0}
.statband-fig{
  display:block;font-family:var(--display);font-weight:500;
  font-size:clamp(2rem,4.2vw,3.1rem);line-height:1;
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.statband-lab{
  display:block;margin-top:.7rem;
  font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(251,248,243,.56);line-height:1.6;
}
@media (max-width:760px){
  .statband-grid{grid-template-columns:1fr 1fr;gap:1.75rem 1.25rem}
  .statband-item:nth-child(3){border-left:0;padding-left:0}
}

/* ------------------------------------------------------- image captioning */
.figure-note{
  padding:.9rem 1rem 0;
  font-size:.72rem;letter-spacing:.06em;line-height:1.6;
  color:rgba(251,248,243,.5);text-align:center;
}
.feature-band .figure-note{padding-bottom:1.1rem}
.section .figure-note{color:var(--mute);text-align:left;padding-inline:0}

/* --------------------------------------------------------- expected chips */
.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.3rem .7rem;border-radius:100px;
  border:1px solid var(--champagne-soft);
  background:rgba(201,164,92,.09);
  font-size:.55rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--champagne-dp);
}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--champagne)}
.dark .chip,.void .chip{color:var(--champagne-lt);border-color:rgba(230,199,138,.3)}

.res-card-body .chip{margin-bottom:.75rem}
.res-card{border:1px solid var(--line-d)}
.res-card:hover{border-color:var(--champagne-soft)}

/* ------------------------------------------------------------- quote card */
.quote-attrib{
  margin-top:clamp(1.5rem,3vw,2.25rem);
  font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--champagne-lt);
}
.quote-attrib span{display:block;margin-top:.4rem;letter-spacing:.12em;
  text-transform:none;font-weight:400;font-size:.8rem;color:rgba(251,248,243,.5)}

/* ---------------------------------------------------------------- timeline */
.timeline-sec{background:var(--ivory-2)}
.tl{list-style:none;margin:clamp(2.5rem,5vw,3.75rem) 0 0;padding:0;position:relative}
.tl::before{
  content:"";position:absolute;left:0;top:.35rem;bottom:.35rem;width:1px;
  background:linear-gradient(to bottom,transparent,var(--champagne) 12%,var(--champagne) 88%,transparent);
  opacity:.45;
}
.tl-item{
  position:relative;padding:0 0 clamp(2rem,3.6vw,2.9rem) clamp(2rem,4vw,3.25rem);
  display:grid;grid-template-columns:clamp(4.5rem,8vw,7rem) 1fr;
  column-gap:clamp(1.25rem,2.6vw,2.25rem);align-items:start;
}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-4.5px;top:.55rem;
  width:9px;height:9px;border-radius:50%;
  background:var(--ivory-2);border:1px solid var(--champagne);
  transition:background .4s var(--ease),box-shadow .4s var(--ease);
}
.tl-item.is-now::before{
  background:var(--champagne);
  box-shadow:0 0 0 5px rgba(201,164,92,.18);
}
.tl-year{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.1;
  color:var(--champagne-dp);white-space:nowrap;
}
.tl-item.is-now .tl-year{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.tl-body h3{
  font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1.4;
  color:var(--text);
}
.tl-body p{margin-top:.5rem;font-size:.92rem;line-height:1.72;color:var(--body);max-width:60ch}
@media (max-width:700px){
  .tl-item{grid-template-columns:1fr;row-gap:.4rem;padding-left:1.6rem}
  .tl-year{font-size:1.15rem}
}

/* ------------------------------------------------- confirmed / unconfirmed */
.status-sec{background:var(--void);color:var(--snow)}
.status-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.25rem,2.6vw,2rem);
  margin-top:clamp(2.25rem,4.5vw,3.25rem);
}
.status-card{
  padding:clamp(1.6rem,3vw,2.4rem);
  border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border-radius:var(--radius);
}
.status-card.is-yes{border-color:rgba(230,199,138,.34)}
.status-card h3{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--sans);font-size:.68rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--champagne-lt);
}
.status-card.is-no h3{color:rgba(251,248,243,.55)}
.status-card ul{list-style:none;margin:1.5rem 0 0;padding:0}
.status-card li{
  position:relative;padding-left:1.6rem;
  font-size:.93rem;line-height:1.68;color:rgba(251,248,243,.74);
}
.status-card li + li{margin-top:.85rem;padding-top:.85rem;border-top:1px solid rgba(255,255,255,.06)}
.status-card li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:1px;background:var(--champagne);
}
.status-card.is-yes li::before{
  top:.42em;left:.05rem;width:5px;height:9px;background:transparent;
  border-right:1.5px solid var(--champagne);border-bottom:1.5px solid var(--champagne);
  transform:rotate(42deg);
}
.status-card.is-no li{color:rgba(251,248,243,.52)}
.status-card.is-no li::before{background:rgba(251,248,243,.34)}
@media (max-width:760px){.status-grid{grid-template-columns:1fr}}

/* ----------------------------------------------------------- section trim */
.eyebrow-rule::before,.eyebrow-rule::after{background:var(--gold-grad);opacity:.75}

.statement{background:var(--void)}
.statement-glow{background:radial-gradient(closest-side,rgba(201,164,92,.16),transparent)}
.statement-text{font-size:clamp(1.45rem,3.4vw,2.55rem)}

.dest{background:rgba(255,255,255,.028)}
.dest:hover{border-color:rgba(230,199,138,.34)}

.am-card-copy h3{letter-spacing:.01em}

.hl-num{
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.footer{border-top:1px solid rgba(230,199,138,.14)}

/* the enquiry panel sits on ink rather than paper */
.enquire{
  background:
    radial-gradient(90% 120% at 15% 0%,rgba(201,164,92,.10),transparent 60%),
    var(--charcoal);
  color:var(--snow);
}
.enquire .title{color:var(--snow)}
.enquire .lede{color:rgba(251,248,243,.66)}
.enquire .eyebrow-rule{color:var(--champagne-lt)}
.enquire .form-card{
  background:rgba(251,248,243,.97);
  border:1px solid rgba(230,199,138,.3);
  box-shadow:0 34px 90px rgba(5,10,17,.45);
}