/* ============================================================
   LiQUiD Paradise 2026 — liquidfes.com
   Luxury-first design system with psychedelic liquid motion
   ============================================================ */

:root{
  --ink:#04060f;
  --ink-2:#0a0e1d;
  --ink-3:#111631;
  --mist:#f4f2ec;
  --sand:#e8ddc8;
  --foam:rgba(255,255,255,.72);
  --teal:#2fd4ff;
  --violet:#3b5bff;
  --pink:#8a4cff;
  --amber:#ff8a3c;
  --gold:#d9b36a;
  --grad:linear-gradient(115deg,var(--teal),var(--violet) 38%,var(--pink) 68%,var(--amber));
  --font-d:"Space Grotesk","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans CJK JP","Yu Gothic",Meiryo,sans-serif;
  --font-b:"Inter","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans CJK JP","Yu Gothic",Meiryo,sans-serif;
  --font-s:"Cormorant Garamond","Hiragino Mincho ProN","Yu Mincho",serif;
  --nav-h:72px;
  --ease-l:cubic-bezier(.23,1,.32,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html.lenis{scroll-behavior:auto}
body{
  background:var(--ink);
  color:var(--mist);
  font-family:var(--font-b);
  font-weight:300;
  line-height:1.7;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
:lang(ja) body, body:lang(ja){letter-spacing:.04em}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--violet);color:#fff}

h1,h2,h3,h4{font-family:var(--font-d);font-weight:500;line-height:1.15;letter-spacing:.01em}
.serif{font-family:var(--font-s);font-weight:400;font-style:italic}

/* ---------- utilities ---------- */
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.kicker{
  font-family:var(--font-d);
  font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--foam);opacity:.85;
}
.wrap{width:min(1200px,92vw);margin-inline:auto}
.section{padding:clamp(90px,12vh,150px) 0}

/* ---------- grain + aurora overlays ---------- */
.grain::after{
  content:"";position:fixed;inset:-100%;z-index:2000;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}
  30%{transform:translate(3%,-12%)}50%{transform:translate(9%,5%)}
  70%{transform:translate(-7%,8%)}90%{transform:translate(5%,12%)}
}
.aurora{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  filter:blur(90px) saturate(1.3);opacity:.5;
}
.aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen}
.aurora i:nth-child(1){width:52vw;height:52vw;left:-12vw;top:-14vh;background:radial-gradient(circle,#2fd4ff55,transparent 65%);animation:blob1 26s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:44vw;height:44vw;right:-10vw;top:22vh;background:radial-gradient(circle,#3b5bff44,transparent 65%);animation:blob2 31s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:40vw;height:40vw;left:24vw;bottom:-18vh;background:radial-gradient(circle,#ff8a3c33,transparent 65%);animation:blob3 24s ease-in-out infinite alternate}
@keyframes blob1{to{transform:translate(14vw,16vh) scale(1.25)}}
@keyframes blob2{to{transform:translate(-12vw,10vh) scale(.85)}}
@keyframes blob3{to{transform:translate(10vw,-12vh) scale(1.18)}}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .5s,backdrop-filter .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(4,6,15,.55);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-color:rgba(255,255,255,.07);
}
.nav-inner{
  width:min(1400px,94vw);margin-inline:auto;
  display:flex;align-items:center;gap:2.2rem;
}
.nav-logo img{height:38px;width:auto}
.nav-links{display:flex;gap:2rem;margin-left:auto;align-items:center}
.nav-links a{
  font-family:var(--font-d);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  opacity:.75;transition:opacity .3s;position:relative;padding:6px 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--grad);transition:width .35s var(--ease-l);
}
.nav-links a:hover,.nav-links a.active{opacity:1}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--font-d);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  padding:.95em 2.1em;border-radius:100px;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.25);color:#fff;
  transition:transform .35s var(--ease-l),box-shadow .35s,border-color .35s;
  cursor:pointer;background:transparent;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{border:none;background:var(--grad);background-size:220% 220%;animation:gradShift 6s ease infinite;color:#0b0714;font-weight:600}
.btn-primary:hover{box-shadow:0 12px 44px -8px rgba(255,138,60,.5)}
.btn-ghost:hover{border-color:rgba(255,255,255,.65)}
.btn-gold{border:1px solid #d9b36a88;color:var(--gold)}
.btn-gold:hover{box-shadow:0 10px 40px -10px #d9b36a66;border-color:var(--gold)}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.lang-switch{
  display:flex;border:1px solid rgba(255,255,255,.2);border-radius:100px;overflow:hidden;
}
.lang-switch button{
  background:none;border:none;color:var(--mist);opacity:.5;cursor:pointer;
  font-family:var(--font-d);font-size:.72rem;letter-spacing:.1em;padding:.5em 1em;
  transition:.3s;
}
.lang-switch button.on{opacity:1;background:rgba(255,255,255,.12)}

.burger{display:none;margin-left:auto;background:none;border:none;cursor:pointer;z-index:1101}
.mobile-lang{display:none}
.burger span{display:block;width:26px;height:2px;background:#fff;margin:6px 0;transition:.4s var(--ease-l)}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- hero (shared) ---------- */
.page-hero{
  position:relative;min-height:72vh;display:flex;align-items:flex-end;
  padding-bottom:9vh;overflow:hidden;
}
.page-hero .bg,.chapter .bg{
  position:absolute;inset:-6%;background-size:cover;background-position:center;
  will-change:transform;
}
.page-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,6,15,.55),rgba(4,6,15,.15) 40%,var(--ink) 96%);
}
/* A hero kicker sits at 11px with very wide letter-spacing, on top of a
   photograph — the least forgiving place on the site for type. The gold
   gradient fill makes that worse than it looks: .gold-text paints the letters
   with -webkit-text-fill-color:transparent, so the text-shadow meant to lift
   them off the picture is visible THROUGH the glyphs and muddies them. Over a
   bright sky the whole line turns to olive smudge. Solid warm gold at full
   strength, with a shadow that now falls behind real letters instead. */
.page-hero .kicker.gold-text,
.chapter .copy .kicker.gold-text{
  background:none;
  -webkit-text-fill-color:currentColor;
  color:#f0d9a8;
  opacity:1;
  /* 300 weight at 11px with 0.42em tracking is a hairline; over a photograph
     it disappears whatever the colour. */
  font-weight:500;
  text-shadow:0 1px 3px rgba(4,6,15,.95),0 2px 14px rgba(4,6,15,.8);
}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{font-size:clamp(2.6rem,7vw,5.4rem);margin:.35em 0 .2em}
.page-hero p.lead{max-width:560px;font-size:1.05rem;color:var(--foam)}

/* ---------- the offer, on the first screen ---------------------------------
   145 of the 179 people who came in August saw one page and left inside 35
   seconds, and the first price on this page sat nine screens down. These two
   lines put the price, the scarcity and the villa entry point where a visitor
   who reads only the hero will still see them. Quiet by design: the photograph
   and the logo remain the loudest things here. */
.hero-offer{
  margin:1.5rem auto 0; max-width:36rem;
  padding-top:1.1rem; border-top:1px solid rgba(217,179,106,.35);
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center;
  gap:.45em .8em; line-height:1.6;
}
.hero-offer .lbl{
  font-family:var(--font-d); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(244,242,236,.7);
}
.hero-offer .amt{
  font-size:1.32rem; font-weight:700; color:#f0d9a8; letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.hero-offer .left{
  font-size:.86rem; color:#d9b36a;
  padding:.15em .7em; border:1px solid rgba(217,179,106,.5); border-radius:100px;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
/* The villa line rides under the buttons, deliberately smaller: it is the
   second offer, not a competing one. */
.hero-villa{
  margin:.9rem 0 0; font-size:.82rem; line-height:1.7;
  color:rgba(244,242,236,.62); text-align:center;
}
.hero-villa b{color:#f0d9a8; font-weight:600}
.hero-offer, .hero-villa{text-shadow:0 1px 3px rgba(4,6,15,.85),0 2px 14px rgba(4,6,15,.6)}

/* ---------- home immersive story ---------- */
#story{position:relative}
.chapter{
  position:relative;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.chapter .bg{inset:-8%}
.chapter .veil{
  position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 88%,rgba(4,6,15,.82) 0%,rgba(4,6,15,.35) 45%,rgba(4,6,15,.25) 100%);
}
.chapter .copy{
  position:relative;z-index:3;text-align:center;width:min(900px,90vw);
}
.chapter .copy .kicker{margin-bottom:1.4rem;display:block}
.chapter .copy h2{
  font-size:clamp(2.2rem,6.2vw,4.6rem);font-weight:500;
  text-shadow:0 4px 60px rgba(0,0,0,.45);
}
.chapter .copy p{
  margin-top:1.5rem;font-size:clamp(1rem,1.6vw,1.2rem);color:var(--foam);
  max-width:640px;margin-inline:auto;text-shadow:0 2px 30px rgba(0,0,0,.6);
}
.chapter .copy .btn{margin-top:2.4rem}
.chapter .line{display:block;overflow:hidden}
.chapter .line span{display:inline-block}

/* hero chapter specifics */
#ch-hero .copy h1{
  font-size:clamp(3rem,9.5vw,7.5rem);letter-spacing:.02em;font-weight:600;
}
#ch-hero .hero-title,#ch-hero .hero-title>span{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(14px,2.6vw,30px);
}
#ch-hero .hero-title{margin:.35em 0 .3em}
#ch-hero .hero-title img{width:min(86vw,700px);height:auto}
#ch-hero .genre-line{
  font-family:var(--font-d);font-size:clamp(.78rem,1.5vw,.98rem);
  letter-spacing:.5em;text-indent:.5em;text-transform:uppercase;
  color:#fff;opacity:.92;margin-top:.9rem;
}
.hero-title .pw{
  font-family:"Avenir Next",Avenir,"Nunito Sans",var(--font-d);
  font-weight:600;color:#fff;
  font-size:clamp(2.35rem,6.2vw,4.55rem);
  letter-spacing:.045em;line-height:1;
}
#ch-hero .datebar{
  display:flex;gap:1.6rem;justify-content:center;align-items:center;flex-wrap:wrap;
  margin-top:1.8rem;font-family:var(--font-d);letter-spacing:.3em;font-size:clamp(.8rem,1.6vw,1rem);
  text-transform:uppercase;
}
#ch-hero .datebar b{font-weight:600;font-size:clamp(1.1rem,2.6vw,1.4rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#ch-hero .cta-row{display:flex;gap:1rem;justify-content:center;margin-top:2.6rem;flex-wrap:wrap}
.scroll-hint{
  position:absolute;bottom:3.4vh;left:50%;transform:translateX(-50%);z-index:5;
  font-family:var(--font-d);font-size:.65rem;letter-spacing:.4em;text-transform:uppercase;
  opacity:.7;display:flex;flex-direction:column;align-items:center;gap:.7rem;
}
.scroll-hint::after{
  content:"";width:1px;height:44px;background:linear-gradient(#fff,transparent);
  animation:drip 2s ease-in-out infinite;
}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- marquee ---------- */
.marquee{
  overflow:hidden;white-space:nowrap;border-block:1px solid rgba(255,255,255,.08);
  padding:1.1rem 0;background:rgba(255,255,255,.02);position:relative;z-index:4;
}
.marquee-track{display:inline-block;animation:marq 30s linear infinite}
.marquee span{
  font-family:var(--font-d);font-size:.85rem;letter-spacing:.35em;text-transform:uppercase;
  margin-right:3.2rem;opacity:.8;
}
.marquee span i{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:1.4rem}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.card{
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.09);
  border-radius:22px;padding:2rem;
  backdrop-filter:blur(8px);
  transition:transform .5s var(--ease-l),border-color .4s,box-shadow .5s;
  position:relative;overflow:hidden;
}
.card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.22);box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.photo-card{padding:0;border-radius:22px;overflow:hidden;position:relative;aspect-ratio:4/5}
.photo-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-l),filter 1.2s var(--ease-l)}
.photo-card:hover img{transform:scale(1.07)}
.photo-card--static{cursor:default}
.photo-card--static:hover img{transform:none}
.photo-card .cap{
  position:absolute;inset:auto 0 0 0;padding:1.4rem;z-index:2;
  background:linear-gradient(transparent,rgba(4,6,15,.85));
  font-family:var(--font-d);letter-spacing:.12em;font-size:.85rem;text-transform:uppercase;
}

/* reveal */
.rv{opacity:0;transform:translateY(46px);transition:opacity 1s var(--ease-l),transform 1s var(--ease-l)}
.rv.in{opacity:1;transform:none}

/* section head */
.shead{margin-bottom:3.4rem}
.shead h2{font-size:clamp(2rem,4.6vw,3.4rem);margin-top:.5rem}
.shead p{max-width:620px;color:var(--foam);margin-top:1rem}

/* ---------- tickets ---------- */
.tier-ladder{position:relative;margin-top:1rem}
.tier{
  display:grid;grid-template-columns:84px 1fr auto auto;gap:1.6rem;align-items:center;
  padding:1.5rem 1.8rem;border-radius:18px;margin-bottom:.8rem;
  background:linear-gradient(120deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.08);
  transition:transform .45s var(--ease-l),border-color .35s,background .35s;
}
.tier:hover{transform:translateX(8px);border-color:rgba(255,255,255,.25)}
.tier.sold .buy{pointer-events:none;opacity:.35;filter:saturate(0)}
.tier.live{
  border-color:#2fd4ff77;
  background:linear-gradient(120deg,rgba(47,212,255,.10),rgba(59,91,255,.06));
  box-shadow:0 0 60px -20px rgba(47,212,255,.45);
}
.tier .num{
  font-family:var(--font-d);font-size:2rem;font-weight:600;opacity:.9;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.tier .t-name{font-family:var(--font-d);letter-spacing:.06em;font-size:1.02rem}
.tier .t-sub{font-size:.8rem;color:var(--foam);opacity:.8;margin-top:.2rem}
.tier .price{font-family:var(--font-d);font-size:1.5rem;font-weight:600;white-space:nowrap}
.tier .price small{font-size:.8rem;font-weight:300;opacity:.7}
.badge{
  display:inline-block;font-size:.62rem;font-family:var(--font-d);letter-spacing:.2em;
  text-transform:uppercase;padding:.35em .9em;border-radius:100px;margin-left:.7em;
  vertical-align:middle;white-space:nowrap;
}
.badge.now{background:var(--teal);color:#03202e;font-weight:600;animation:pulse 2s infinite}
.badge.soon{border:1px solid rgba(255,255,255,.3);opacity:.7}
.badge.end{border:1px solid rgba(255,255,255,.15);opacity:.45}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(47,212,255,.5)}50%{box-shadow:0 0 0 9px rgba(47,212,255,0)}}

.addon-grid{margin-top:1rem}
.addon{display:flex;flex-direction:column;height:100%}
.addon .a-icon{font-size:1.7rem;margin-bottom:1rem}
.addon h3{font-size:1.05rem;letter-spacing:.06em}
.addon p{font-size:.86rem;color:var(--foam);margin:.7rem 0 1.4rem;flex:1}
.addon .price{font-family:var(--font-d);font-size:1.4rem;font-weight:600;margin-bottom:1.2rem}

/* countdown */
.count{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;margin:2rem 0}
.count div{text-align:center}
.count b{font-family:var(--font-d);font-size:clamp(2rem,5vw,3.4rem);font-weight:600;display:block;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.count span{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;opacity:.6}

/* ---------- VIP ---------- */
.vip body{background:#070604}
.vip-hero-title{font-family:var(--font-s);font-style:italic;font-weight:500}
.gold-text{background:linear-gradient(115deg,#f6e3b4,#d9b36a 45%,#f8ecd0 70%,#b78f45);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gold-line{width:64px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:1.6rem 0}
.vip-plan{
  border-radius:26px;overflow:hidden;position:relative;
  border:1px solid #d9b36a33;
  background:linear-gradient(165deg,rgba(217,179,106,.08),rgba(4,6,15,.4));
}
.vip-plan .vp-img{display:block;aspect-ratio:21/9;overflow:hidden}
.vip-plan .vp-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-l)}
.vip-plan:hover .vp-img img{transform:scale(1.06)}
.vip-plan .vp-body{padding:2.2rem}
.vip-plan h3{font-size:1.5rem;letter-spacing:.04em}
.vip-plan .vp-price{font-family:var(--font-d);font-size:2rem;font-weight:600;margin:.8rem 0 .2rem}
.vip-plan ul{list-style:none;margin:1.4rem 0 1.8rem}
.vip-plan li{padding:.42em 0;font-size:.92rem;color:var(--foam);display:flex;gap:.7em;align-items:baseline}
.vip-plan li::before{content:"◆";font-size:.5rem;color:var(--gold);flex:0 0 auto;transform:translateY(-2px)}
.vip-plan .rooms-left{font-size:.75rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold)}

/* ---------- info page ---------- */
.info-table{width:100%;border-collapse:collapse}
.info-table th,.info-table td{
  text-align:left;padding:1.2rem 1rem;border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;font-size:.95rem;
}
.info-table th{font-family:var(--font-d);letter-spacing:.14em;text-transform:uppercase;font-size:.75rem;opacity:.7;width:200px;white-space:nowrap}
.faq details{
  border:1px solid rgba(255,255,255,.09);border-radius:16px;margin-bottom:.8rem;overflow:hidden;
  background:rgba(255,255,255,.02);
}
.faq summary{
  cursor:pointer;padding:1.3rem 1.6rem;font-family:var(--font-d);letter-spacing:.04em;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;opacity:.6;transition:.3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 1.6rem 1.4rem;color:var(--foam);font-size:.92rem}

/* ---------- about / timeline ---------- */
.timeline{position:relative;margin-top:2rem}
.timeline::before{
  content:"";position:absolute;left:11px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(var(--teal),var(--violet),var(--pink),var(--amber));
}
.tl-item{position:relative;padding:0 0 2.6rem 3.2rem}
.tl-item::before{
  content:"";position:absolute;left:5px;top:8px;width:13px;height:13px;border-radius:50%;
  background:var(--ink);border:2px solid var(--teal);
  transition:.4s;
}
.tl-item:hover::before{background:var(--teal);box-shadow:0 0 20px var(--teal)}
.tl-item .tl-year{font-family:var(--font-d);font-size:.78rem;letter-spacing:.3em;opacity:.6}
.tl-item h3{font-size:1.3rem;margin:.3rem 0}
.tl-item p{color:var(--foam);font-size:.9rem}

.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:.9rem}
.mosaic .m{border-radius:16px;overflow:hidden;position:relative}
.mosaic .m img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-l)}
.mosaic .m:hover img{transform:scale(1.08)}
.mosaic .tall{grid-row:span 2}
.mosaic .wide{grid-column:span 2}
.mosaic .big{grid-column:span 2;grid-row:span 2}

.video-embed{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- CTA band / footer ---------- */
.cta-band{
  position:relative;text-align:center;padding:clamp(100px,16vh,180px) 0;overflow:hidden;
}
.cta-band .bg{position:absolute;inset:-6%;background-size:cover;background-position:center}
.cta-band::before{content:"";position:absolute;inset:0;background:rgba(4,6,15,.68)}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{font-size:clamp(2.2rem,6vw,4.4rem)}
/* The italic line under the band headline inherited a muted colour that
   vanished into the veil on laptops (owner, 2026-10-01). */
.cta-band .serif{color:var(--foam,#f4f2ec);opacity:.92;text-shadow:0 1px 3px rgba(4,6,15,.9),0 2px 14px rgba(4,6,15,.7)}

footer{
  border-top:1px solid rgba(255,255,255,.08);padding:4.5rem 0 3rem;position:relative;z-index:5;
  background:var(--ink);
}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3rem;align-items:start}
footer .nav-logo img{height:30px;margin-bottom:1.2rem}
footer p{font-size:.85rem;color:var(--foam);opacity:.8;max-width:340px}
footer h4{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;opacity:.6;margin-bottom:1.2rem}
footer ul{list-style:none}
footer li{margin-bottom:.7rem}
footer li a{font-size:.9rem;opacity:.8;transition:.3s}
footer li a:hover{opacity:1;color:var(--teal)}
.f-bottom{margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.72rem;opacity:.5}

/* ---------- loader ---------- */
#loader{
  position:fixed;inset:0;z-index:3000;background:var(--ink);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.6rem;
  transition:opacity .9s var(--ease-l),visibility .9s;
}
#loader.done{opacity:0;visibility:hidden}
#loader img{height:44px;animation:breathe 2s ease-in-out infinite}
#loader .bar{width:180px;height:1px;background:rgba(255,255,255,.12);overflow:hidden}
#loader .bar i{display:block;height:100%;width:40%;background:var(--grad);animation:load 1.2s ease-in-out infinite}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
@keyframes breathe{0%,100%{opacity:.6;transform:scale(.98)}50%{opacity:1;transform:scale(1)}}

/* The nav's Get Tickets button sits beside links set at .74rem/.14em, but
   inherited the full-size .btn — .8rem with .22em tracking and 2.1em of side
   padding — so it read as a banner dropped into a menu bar rather than one
   item among several. Brought into the nav's own scale; every other .btn on
   the site keeps its size. */
.nav .btn,
.nav-links .btn,
.nav-links a.btn {
  font-size: .74rem;
  letter-spacing: .18em;
  padding: .875em 1.72em;
}

/* ---------- responsive ---------- */
@media(max-width:1560px){
  .nav-inner{gap:1.4rem}
  .nav-links{gap:1.3rem}
  .nav-links a{font-size:.74rem;letter-spacing:.14em}
  .nav .btn{padding:.8em 1.35em;font-size:.69rem}
}
@media(max-width:960px){
  .grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .nav-links{
    position:fixed;inset:0;background:rgba(4,6,15,.96);backdrop-filter:blur(20px);
    flex-direction:column;justify-content:flex-start;align-items:center;gap:2rem;
    padding:calc(var(--nav-h) + 5vh) 24px 6vh;overflow-y:auto;
    opacity:0;pointer-events:none;transition:opacity .5s;z-index:1100;
  }
  .nav-links.open{opacity:1;pointer-events:auto}
  .nav-links a{font-size:1.1rem}
  .nav-links .lang-switch{display:none}
  .mobile-lang{display:flex !important;margin-left:auto;position:relative;z-index:1101}
  .mobile-lang button{font-size:.66rem;padding:.45em .9em}
  .burger{display:block;margin-left:14px}
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}
  .tier{grid-template-columns:1fr auto;gap:.6rem 1rem}
  .tier .num{display:none}
  .tier .buy{grid-column:1/-1;justify-self:start}
  .f-grid{grid-template-columns:1fr}
  /* Phones: the label sits ABOVE its value on its own line — a 110px label
     column left values wrapping into a squeezed six-line ribbon. */
  .info-table tr{display:block;padding:.9rem 0}
  .info-table tr + tr{border-top:1px solid rgba(255,255,255,.08)}
  .info-table th,.info-table td{display:block;width:auto;border:none;padding:0}
  .info-table th{white-space:normal;margin-bottom:.3rem;color:var(--gold);opacity:.9}
  .info-table td{line-height:1.85}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}


/* ---------- liquid marble canvas ---------- */
.liquid-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
[data-liquid="overlay"] .liquid-canvas{
  mix-blend-mode:screen;opacity:.22;z-index:1;
  -webkit-mask-image:radial-gradient(115% 95% at 50% 42%,transparent 28%,#000 78%);
  mask-image:radial-gradient(115% 95% at 50% 42%,transparent 28%,#000 78%);
}
[data-liquid="bg"] .liquid-canvas{z-index:0;filter:brightness(.62) saturate(1.15)}
[data-liquid="bg"]{position:relative;overflow:hidden}
[data-liquid="bg"]::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(110% 110% at 50% 30%,rgba(4,6,15,.82),rgba(4,6,15,.55) 55%,rgba(4,6,15,.85));
}
[data-liquid="bg"] > .wrap{position:relative;z-index:1}


/* ---------- liquid chrome text ---------- */
.chrome-text{
  background:linear-gradient(100deg,
    #b8cce4 0%,#ffffff 10%,#6f8db4 20%,#eaf6ff 30%,
    var(--teal) 44%,#ffffff 52%,var(--pink) 62%,
    #dfe9ff 72%,var(--amber) 84%,#ffffff 92%,#b8cce4 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:chromeShift 8s linear infinite;
  filter:drop-shadow(0 2px 24px rgba(47,212,255,.25));
}
@keyframes chromeShift{0%{background-position:0% 0}100%{background-position:220% 0}}
@media(prefers-reduced-motion:reduce){.chrome-text{animation:none}}

/* ---------- urgency ladder ---------- */
.rise-note{
  display:inline-flex;align-items:center;gap:.8em;flex-wrap:wrap;
  margin-top:1.2rem;padding:.9em 1.6em;border-radius:100px;
  border:1px solid rgba(255,138,60,.45);background:rgba(255,138,60,.08);
  font-family:var(--font-d);font-size:.92rem;letter-spacing:.06em;
}
.rise-note b{color:var(--amber);font-weight:600}
.rise-note .rise-clock{font-variant-numeric:tabular-nums;color:#fff;font-weight:600}
.tier.locked{opacity:.55}
.tier.locked .buy{display:none}
.tier.locked:hover{transform:none}
.tier.live{transform:scale(1.015)}
.tier.live .t-name{font-weight:600}

/* soft light glow behind the hero logo so it lifts off the background */
#ch-hero .hero-title img{
  filter:
    drop-shadow(0 0 14px rgba(255,255,255,.55))
    drop-shadow(0 0 42px rgba(214,236,255,.38));
}
/* wide horizontal light band extending the glow left and right */
#ch-hero .hero-glow-wrap{position:relative}
#ch-hero .hero-glow-wrap::before{
  content:"";position:absolute;left:50%;top:50%;z-index:0;
  width:min(112vw,1500px);height:clamp(110px,22vw,230px);
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(255,255,255,.26) 0%,rgba(228,242,255,.15) 36%,rgba(218,238,255,.07) 56%,
    rgba(214,236,255,.03) 72%,transparent 92%);
  filter:blur(14px);
  pointer-events:none;
}
#ch-hero .hero-glow-wrap .hero-title{
  position:relative;z-index:1;
  /* padding gives the drop-shadow glow room inside the split-line clip box */
  padding:70px 90px;margin:-70px -90px;
}
@media(max-width:760px){
  #ch-hero .hero-glow-wrap::before{width:170vw;height:200px;opacity:.85}
}


/* ---------- solid gold CTA (high visibility) ---------- */
/* Same living movement as .btn-primary (gradShift), in gold. Only the
   button's own gold tones slide — nothing brighter, so the label never
   washes out into a glare. */
.btn-solid-gold{
  border:none;
  background:linear-gradient(115deg,#b8923f,#d9b36a 30%,#f0d9a8 50%,#d9b36a 70%,#b8923f);
  background-size:220% 220%;
  animation:gradShift 6s ease infinite;
  color:#241a06;font-weight:600;
  box-shadow:0 12px 40px -10px rgba(217,179,106,.55);
}
.btn-solid-gold:hover{box-shadow:0 16px 54px -10px rgba(217,179,106,.8)}
@media(prefers-reduced-motion:reduce){.btn-solid-gold{animation:none}}

/* ---------- inline SVG icon chips ---------- */
.icn{width:44px;height:44px;margin-inline:auto;display:block}
.icn *{fill:none;stroke:#9fd9ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.a-icon .icn,.addon .icn{margin-bottom:1rem}
.icn.gold *{stroke:var(--gold)}

/* ---------- villa comparison ---------- */
.compare{border:1px solid rgba(217,179,106,.3);border-radius:24px;overflow:hidden;background:rgba(255,255,255,.03)}
.compare .row{display:grid;grid-template-columns:1.3fr 1fr 1fr;align-items:center;padding:1.05rem 1.6rem;border-top:1px solid rgba(255,255,255,.07);gap:1rem}
.compare .row:first-child{border-top:none;background:rgba(217,179,106,.08)}
.compare .row > :first-child{font-family:var(--font-d);font-size:.85rem;letter-spacing:.08em;display:flex;align-items:center;gap:.9em}
.compare .row .cicn{width:22px;height:22px;flex:0 0 22px}
.compare .row .cicn *{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.compare .val{text-align:center;font-size:.86rem;color:var(--foam)}
.compare .val.yes svg,.compare .val.no svg{width:20px;height:20px}
.compare .val.yes svg *{stroke:#7fe0a8;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.compare .val.no{opacity:.35}
.compare .val.no svg *{stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round}
.compare .head{font-family:var(--font-d);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.compare .head b{display:block;font-size:1rem;color:var(--gold);margin-top:.2em}
@media(max-width:760px){.compare .row{padding:.9rem .9rem;grid-template-columns:1.2fr 1fr 1fr}}

/* ---------- reveal-more gallery ---------- */
.more-moments{display:none}
.more-moments.open{display:grid;animation:moreIn .8s var(--ease-l)}
@keyframes moreIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.reveal-cta{display:flex;justify-content:center;margin-top:2.4rem}

/* ---------- vip plan links ---------- */
.vp-more{display:inline-block;margin:.2rem 0 1.2rem;font-family:var(--font-d);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid rgba(217,179,106,.5);padding-bottom:.2em;transition:.3s}
.vp-more:hover{border-color:var(--gold);transform:translateX(3px)}


/* ---------- villa facility checklist ---------- */
.fac-list{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:.65rem 2.2rem;margin:0;padding:0;
}
.fac-list li{
  position:relative;padding:.55em 0 .55em 2em;font-size:.92rem;color:var(--foam);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.fac-list li::before{
  content:"";position:absolute;left:.1em;top:.95em;width:15px;height:15px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5 9.8 18 19.5 6.5' fill='none' stroke='%23d9b36a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ---------- home price ladder ---------- */
.ladder{
  display:flex;align-items:flex-end;gap:clamp(6px,1.4vw,18px);
  width:min(920px,100%);margin:3rem auto 0;height:240px;
}
.lstep{
  position:relative;flex:1;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.55rem;
}
.lstep .lp{font-family:var(--font-d);font-weight:600;font-size:clamp(.7rem,1.25vw,.95rem);letter-spacing:.02em}
.lstep .lbar{
  width:100%;height:var(--h);border-radius:12px 12px 5px 5px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);
  /* NEVER let flex shrink the bars: shrinking clamps every tall bar to the
     same height and silently destroys the price proportions. */
  flex-shrink:0;
}
.lstep .ld{font-family:var(--font-d);font-size:clamp(.56rem,.95vw,.7rem);letter-spacing:.08em;text-transform:uppercase;opacity:.55;white-space:nowrap}
.lstep.done{opacity:.32}
.lstep.done .lp{text-decoration:line-through;text-decoration-thickness:1.5px}
.lstep.live .lp{font-size:clamp(1rem,1.8vw,1.4rem);color:#fff}
.lstep.live .ld{opacity:.9}
.lstep.live .lbar{
  border:none;background:var(--grad);background-size:220% 220%;
  animation:gradShift 5s ease infinite;
  box-shadow:0 10px 44px -8px rgba(138,76,255,.65);
}
.lstep.next .lbar{background:rgba(255,255,255,.035);border-style:dashed;border-color:rgba(255,255,255,.14)}
.lstep .lbadge{margin-bottom:.1rem;white-space:nowrap}
@media(max-width:760px){
  .ladder{height:185px;gap:4px}
  .lstep .lp{font-size:.6rem}
  .lstep.live .lp{font-size:.88rem}
  .lstep .lbadge{font-size:.5rem;padding:.3em .7em}
  .lstep .ld{transform:rotate(-38deg);transform-origin:center;margin-top:.2rem;font-size:.52rem}
}


/* ---------- readable chapter copy over bright photos ---------- */
.chapter .copy h2,.chapter .copy p,.chapter .copy .kicker{
  text-shadow:0 1px 4px rgba(4,6,15,.9),0 3px 22px rgba(4,6,15,.75);
}


/* ---------- about hero: zoomed-out island on phones ---------- */
@media(max-width:760px){
  .about-hero-bg{
    background-image:url('../img/about-hero-mobile.jpg') !important;
    background-position:50% 0 !important;
  }
  .about-hero{min-height:62vh !important;padding-bottom:6vh}
}


/* ---------- food package line pops on plan cards ---------- */
.vip-plan ul li.food{color:var(--gold);font-weight:500}


/* ---------- translucent glass button with shimmering gold text ---------- */
.btn-glass-gold{
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid rgba(217,179,106,.45);
  background-clip:padding-box;
}
.btn-glass-gold:hover{border-color:rgba(217,179,106,.9);box-shadow:0 10px 40px -10px rgba(217,179,106,.45)}
.btn-glass-gold, .btn-glass-gold *{
  font-weight:600;
}
.btn-glass-gold{
  color:transparent;
  background-image:linear-gradient(100deg,
    #96733a 0%,#d9b36a 22%,#ffe9b8 38%,#fff8e2 45%,#ffe9b8 52%,#d9b36a 68%,#96733a 100%);
  background-size:250% 100%,auto;
  -webkit-background-clip:text;
  animation:goldSheen 3.2s linear infinite;
}
@keyframes goldSheen{0%{background-position:0% 0}100%{background-position:250% 0}}
@media(prefers-reduced-motion:reduce){.btn-glass-gold{animation:none;color:var(--gold)}}


/* ---------- Wolf of Wall Street band ---------- */
.wolf-band{
  margin-top:2.2rem;padding:2.6rem 3rem;border-radius:28px;
  border:1px solid rgba(217,179,106,.55);
  background:linear-gradient(120deg,rgba(217,179,106,.12),rgba(4,6,15,.4) 55%,rgba(217,179,106,.07));
  display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;
  box-shadow:0 30px 90px -40px rgba(217,179,106,.35);
}
.wolf-band h3{font-size:clamp(1.4rem,2.6vw,2rem)}
.wolf-price{font-family:var(--font-d);font-size:clamp(1.6rem,3vw,2.3rem);font-weight:600;margin-top:.3rem}
.wolf-p{max-width:520px;color:var(--foam);font-size:.95rem;margin-top:.8rem}
.wolf-cta{text-align:center}
.wolf-cta .btn{padding:1.1em 3.4em;font-size:.95rem}
.wolf-mail{margin-top:.9rem;font-size:.8rem;opacity:.7;font-family:var(--font-d);letter-spacing:.06em}
.wolf-mail a:hover{color:var(--gold)}

/* ---------- ask form ---------- */
.ask-form{max-width:640px;margin-inline:auto;display:flex;flex-direction:column;gap:1.3rem}
.ask-form label{font-family:var(--font-d);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--foam)}
.ask-form label b{color:var(--gold)}
.ask-form input[type=text],.ask-form input[type=email],.ask-form textarea{
  width:100%;margin-top:.5rem;padding:1em 1.2em;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);
  color:#fff;font-family:var(--font-b);font-size:1rem;transition:border-color .3s;
}
.ask-form input:focus,.ask-form textarea:focus{outline:none;border-color:var(--gold)}
.ask-form textarea{min-height:150px;resize:vertical}
.ask-form .chk{display:flex;align-items:center;gap:.7em;margin-top:.7rem;cursor:pointer;text-transform:none;letter-spacing:.02em;font-size:.85rem}
.ask-form .chk input{width:18px;height:18px;accent-color:#d9b36a;cursor:pointer}
.ask-form input:disabled{opacity:.35}
.ask-thanks{text-align:center;padding:4rem 0}


/* ---------- hide extra story photos on phones ---------- */
@media(max-width:760px){.m-hide{display:none}}

/* ---------- nav basket ---------- */
.nav-cart{position:relative;display:inline-flex;align-items:center;color:#fff;opacity:.85;transition:opacity .25s;text-decoration:none}
.nav-cart:hover{opacity:1;color:var(--gold,#d9b36a)}
.nav-cart-n{position:absolute;top:-7px;right:-9px;min-width:16px;height:16px;border-radius:100px;
  background:var(--gold,#d9b36a);color:#241a06;font-size:10px;font-weight:700;line-height:16px;
  text-align:center;padding:0 4px}
.mobile-cart,.mobile-account{display:none}
@media(max-width:960px){
  .nav-links .nav-cart{display:none}
  .mobile-cart{display:inline-flex;margin-right:.9rem}
  .mobile-account{display:inline-flex;margin-right:.9rem}
}

/* Our Story CTA band: the square raft photo can only show a narrow slice on
   a wide screen — 57% keeps every face AND the raft in frame (owner's pick,
   option C). Phones keep the inline 70%, which reads fine there. */
@media(min-width:761px){
  .page-id-17137 .cta-band .bg{background-position:50% 57%!important}
}

/* ---------- tickets ladder: VIP villa rows ---------- */
.tier-vhead{
  font-family:var(--font-d);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:2.6rem 0 .4rem;padding-left:.2rem;
}
.tier .v-ctas{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:760px){.tier .v-ctas{justify-content:flex-start}}

/* live remaining-count on add-on cards */
.card.addon .a-left{font-size:.78rem;letter-spacing:.1em;color:var(--gold);text-transform:uppercase;margin-bottom:.35rem}

/* Section headings: balance the lines instead of stranding one word, and
   never split a date from its day number (the strings use non-breaking
   spaces for that). */
.shead h2{text-wrap:balance}