/* ==========================================================================
   BALIVIP venue pages — shared stylesheet
   --------------------------------------------------------------------------
   Used by /venues, every /venues/<slug> and every /venues/<slug>/<space>.
   The base tokens, header, overlay menu, hero, statement type and footer are
   lifted unchanged from the original inline style block in venues.html, so
   these pages look like the rest of the site rather than like a new site.
   Everything under "VENUE DETAIL" down is new and only these pages use it.
   ========================================================================== */

:root{
  --bg:#F4F2ED;
  --ink:#2B2724;
  --ink-soft:#6B645C;
  --gold:#A8894E;
  --line:rgba(43,39,36,.14);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(168,137,78,.82);color:#fff}
body.menu-open{overflow:hidden}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:1.5px solid var(--gold);outline-offset:3px}

.site-header{position:absolute;top:0;left:0;width:100%;z-index:60;padding:34px 48px 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:start}
.header-spacer{grid-column:1}
.wordmark{grid-column:2;text-align:center;line-height:1}
.menu-btn{grid-column:3;justify-self:end;margin-top:10px;width:44px;height:30px;background:none;border:none;cursor:pointer;position:relative;z-index:80;color:inherit}
.menu-btn span{position:absolute;left:6px;right:0;height:1.5px;background:currentColor;transition:transform .45s cubic-bezier(.6,0,.2,1),top .45s}
.menu-btn span:nth-child(1){top:10px}
.menu-btn span:nth-child(2){top:18px}
.menu-open .menu-btn span:nth-child(1){top:14px;transform:rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){top:14px;transform:rotate(-45deg)}
.header-light{color:#fff}
.menu-open .site-header{color:var(--ink);z-index:75}

.menu-overlay{position:fixed;inset:0;background:var(--bg);z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:128px 20px 88px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
.menu-open .menu-overlay{opacity:1;visibility:visible}
.menu-list{list-style:none;text-align:center;margin:auto 0}
.menu-list li{overflow:hidden}
.menu-list a{display:inline-flex;align-items:baseline;gap:22px;font-family:var(--serif);font-size:clamp(30px,4.2vw,58px);letter-spacing:.06em;line-height:1.24;color:var(--ink);transform:translateY(110%);transition:transform .7s cubic-bezier(.2,.6,.2,1),color .3s}
.menu-open .menu-list a{transform:translateY(0)}
.menu-list li:nth-child(2) a{transition-delay:.06s}
.menu-list li:nth-child(3) a{transition-delay:.12s}
.menu-list li:nth-child(4) a{transition-delay:.18s}
.menu-list li:nth-child(5) a{transition-delay:.24s}
.menu-list a:hover{color:var(--gold)}
.menu-list .no{font-size:.32em;letter-spacing:.1em;transform:translateY(-1.4em)}
.menu-foot{position:absolute;bottom:36px;font-family:var(--sans);font-size:9px;letter-spacing:.35em;color:var(--ink-soft)}

.page-hero{position:relative;height:88vh;min-height:560px;overflow:hidden;background:#0c0f14}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92;animation:heroZoom 9s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes heroZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.page-hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,10,.55) 0%,rgba(5,7,10,.10) 40%,rgba(5,7,10,.34) 66%,rgba(5,7,10,.72) 100%)}
.page-hero .hero-title{position:absolute;bottom:70px;left:0;width:100%;text-align:center;color:#fff;z-index:3}
.page-hero .hero-title .label{color:rgba(255,255,255,.8)}
.page-hero .hero-title h1{font-family:var(--serif);font-weight:400;font-size:clamp(54px,8vw,120px);letter-spacing:.08em;text-indent:.08em;margin-top:14px}

.label{font-family:var(--sans);font-weight:400;font-size:10px;letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;color:var(--ink-soft)}
.statement{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.6vw,86px);line-height:1.1}
.statement em{font-style:italic}
.wrap{max-width:1280px;margin:0 auto;padding:0 48px}
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s,transform 1s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}

.intro{padding:110px 0 90px;text-align:center}
.intro .statement{max-width:960px;margin:26px auto 0}
.intro p.sub{font-size:19px;line-height:1.75;color:var(--ink-soft);max-width:620px;margin:36px auto 0}

/* venue index grid */
.venue-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;padding:0 22px 40px}
.venue{position:relative;overflow:hidden}
.venue > a{display:block;height:100%;color:#fff}
.venue .v-go{display:inline-block;margin-top:12px;font-family:var(--sans);font-size:8px;letter-spacing:.34em;text-transform:uppercase;color:#fff;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:3px;opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s}
.venue:hover .v-go,.venue:focus-within .v-go{opacity:1;transform:none}
.venue img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}
.venue:hover img{transform:scale(1.08)}
.venue .v-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,7,10,.62),rgba(5,7,10,0) 58%);opacity:.9;transition:opacity .5s}
.venue:hover .v-scrim{opacity:1}
.venue .v-cap{position:absolute;bottom:26px;left:30px;right:30px;color:#fff;z-index:2}
.venue .v-idx{font-family:var(--serif);font-style:italic;font-size:13px;color:rgba(255,255,255,.75);display:block;margin-bottom:8px}
.venue .v-name{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,32px);letter-spacing:.04em;line-height:1.15}
.venue .v-loc{font-family:var(--sans);font-size:8px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-top:10px;display:block}
.venue .v-pos{font-family:var(--serif);font-size:16px;line-height:1.45;color:rgba(255,255,255,.88);margin-top:10px;max-width:34em}
.v-a{grid-column:span 7;aspect-ratio:16/10}
.v-b{grid-column:span 5;aspect-ratio:auto}
.v-c{grid-column:span 4;aspect-ratio:3/4}
.v-d{grid-column:span 12;aspect-ratio:21/9}

.quoteband{padding:110px 0;text-align:center}
.quoteband .statement{max-width:900px;margin:24px auto 0}

.enquire-cta{padding:120px 0;text-align:center;border-top:1px solid var(--line)}
.enquire-cta .statement{margin-top:26px;line-height:1.26;text-wrap:balance}
.btn-ghost{display:inline-block;margin-top:52px;padding:20px 66px;border:1px solid var(--ink);font-family:var(--sans);font-size:10px;letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;position:relative;overflow:hidden;transition:color .45s;z-index:1;cursor:pointer;background:none;color:inherit}
.btn-ghost::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.6,0,.2,1);z-index:-1}
.btn-ghost:hover{color:var(--bg)}
.btn-ghost:hover::before{transform:scaleY(1)}
.btn-hero{display:inline-block;margin-top:30px;padding:17px 52px;border:1px solid rgba(255,255,255,.7);font-family:var(--sans);font-size:10px;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:#fff;transition:background .4s,color .4s}
.btn-hero:hover{background:#fff;color:var(--ink)}

footer{border-top:1px solid var(--line);padding:80px 48px 50px;text-align:center}
.foot-mark{font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:.34em;text-indent:.34em}
.foot-sub{font-family:var(--sans);font-size:8px;letter-spacing:.4em;text-indent:.4em;margin-top:10px;color:var(--ink-soft)}
.foot-links{display:flex;justify-content:center;gap:44px;margin-top:44px;font-family:var(--sans);font-size:9px;letter-spacing:.32em;text-indent:.32em;text-transform:uppercase}
.foot-links a{position:relative;padding-bottom:6px}
.foot-links a::after{content:"";position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--gold);transition:width .4s}
.foot-links a:hover::after{width:100%}
.foot-legal{margin-top:56px;font-family:var(--sans);font-size:8px;letter-spacing:.25em;color:var(--ink-soft)}

.brand-logo{height:auto;display:block;max-width:100%}
.wordmark .brand-logo{width:186px;margin:0 auto}
.foot-mark .brand-logo{width:160px;margin:0 auto}

/* ==========================================================================
   VENUE DETAIL — only the venue and space pages use anything below
   ========================================================================== */

/* breadcrumb */
.crumb{font-family:var(--sans);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);padding:38px 48px 0}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:12px;max-width:1280px;margin:0 auto}
.crumb a:hover{color:var(--gold)}
.crumb .sep{opacity:.5}
.crumb [aria-current="page"]{color:var(--ink)}

/* a sourced prose block */
.detail{padding:96px 0 10px}
.detail .statement{max-width:920px;margin:24px 0 0}
.prose{max-width:680px;margin:44px 0 0}
.prose p{font-size:19px;line-height:1.78;color:var(--ink-soft)}
.prose p + p{margin-top:22px}

/* verified facts list */
.facts{list-style:none;max-width:680px;margin:44px 0 0;border-top:1px solid var(--line)}
.facts li{padding:20px 0;border-bottom:1px solid var(--line);font-size:18px;line-height:1.6}
.facts li span{display:block;font-family:var(--sans);font-size:8px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);margin-top:9px}

/* gallery */
.gallery{padding:86px 0 20px}
.gallery-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:40px}
.gallery-grid figure{position:relative;overflow:hidden;grid-column:span 2;aspect-ratio:4/3;margin:0}
.gallery-grid figure:first-child{grid-column:span 4;aspect-ratio:16/10}
.gallery-grid button{display:block;width:100%;height:100%;padding:0;border:none;background:none;cursor:zoom-in}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.gallery-grid figure:hover img{transform:scale(1.06)}

.lightbox{position:fixed;inset:0;z-index:90;background:rgba(8,9,11,.94);display:none;align-items:center;justify-content:center;padding:5vh 5vw}
.lightbox[open],.lightbox.show{display:flex}
.lightbox img{max-width:100%;max-height:82vh;width:auto;object-fit:contain}
.lightbox figcaption{position:absolute;bottom:4vh;left:0;width:100%;text-align:center;color:rgba(255,255,255,.8);font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;padding:0 20px}
.lightbox .lb-close{position:absolute;top:3vh;right:4vw;width:44px;height:44px;border:none;background:none;color:#fff;font-size:26px;cursor:pointer;line-height:1}
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border:none;background:none;color:#fff;font-size:34px;cursor:pointer;line-height:1}
.lightbox .lb-prev{left:2vw}
.lightbox .lb-next{right:2vw}

/* spaces */
.spaces{padding:96px 0 40px}
.space-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:46px}
.space-card{border:1px solid var(--line);padding:38px 34px 34px;display:flex;flex-direction:column;background:rgba(255,255,255,.34);transition:border-color .4s,transform .5s cubic-bezier(.2,.6,.2,1)}
.space-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.space-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.4vw,36px);letter-spacing:.03em;line-height:1.16}
.space-card p{font-size:17px;line-height:1.68;color:var(--ink-soft);margin-top:16px;flex:1}
.space-card .cap{font-family:var(--sans);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin-top:20px}
.space-card .go{display:inline-block;margin-top:26px;font-family:var(--sans);font-size:9px;letter-spacing:.32em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:5px;align-self:flex-start;transition:border-color .4s,color .4s}
.space-card:hover .go{border-color:var(--gold);color:var(--gold)}

/* the availability request form */
.request{padding:110px 0 120px;border-top:1px solid var(--line);margin-top:80px}
.request .statement{max-width:820px;margin:24px 0 0}
.request .promise{font-size:18px;line-height:1.7;color:var(--ink-soft);max-width:600px;margin:26px 0 0}
.req-form{max-width:820px;margin:52px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:26px 28px}
.req-form .full{grid-column:1/-1}
.req-form label{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:9px}
.req-form input,.req-form select,.req-form textarea{width:100%;background:none;border:none;border-bottom:1px solid var(--line);padding:11px 0;font-family:var(--serif);font-size:18px;color:var(--ink);border-radius:0;-webkit-appearance:none;appearance:none}
.req-form select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);background-position:calc(100% - 9px) calc(1em + 4px),calc(100% - 4px) calc(1em + 4px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.req-form textarea{min-height:92px;resize:vertical}
.req-form input::placeholder,.req-form textarea::placeholder{color:rgba(107,100,92,.55)}
.req-form input:focus,.req-form select:focus,.req-form textarea:focus{border-bottom-color:var(--gold);outline:none}
.req-form .selected{font-family:var(--serif);font-size:18px;padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.req-form .actions{grid-column:1/-1;margin-top:10px}
.req-note{font-family:var(--sans);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:26px;line-height:1.9}
.req-err{grid-column:1/-1;display:none;font-family:var(--sans);font-size:11px;letter-spacing:.1em;color:#8c2f2f;line-height:1.7}
.req-err.show{display:block}
.req-done{display:none;max-width:680px;margin:52px 0 0}
.req-done.show{display:block}
.req-done .statement{font-size:clamp(30px,3.6vw,52px)}
.req-done p{font-size:18px;line-height:1.72;color:var(--ink-soft);margin-top:20px}
.req-done a.btn-ghost{margin-top:36px}

/* the whatsapp button, same as every other page */
.wa-fab{position:fixed;right:22px;bottom:22px;z-index:65;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.22);transition:transform .35s cubic-bezier(.2,.6,.2,1),box-shadow .35s}
.wa-fab:hover{transform:scale(1.08);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.wa-fab:active{transform:scale(.96)}
.menu-open .wa-fab{opacity:0;pointer-events:none;transition:opacity .3s}

@media(max-width:900px){
  .site-header{padding:26px 22px 0;grid-template-columns:1fr auto}
  .header-spacer{display:none}
  .wordmark{grid-column:1;justify-self:start;text-align:left}
  .wordmark .brand-logo{width:150px;margin:0}
  .menu-btn{grid-column:2}
  .wrap{padding:0 22px}
  .page-hero{height:72vh;min-height:460px}
  .page-hero .hero-title{bottom:48px}
  .intro{padding:100px 0 70px}
  .intro p.sub{font-size:17px}
  .venue-grid{grid-template-columns:1fr;gap:14px;padding:0 12px 20px}
  .v-a,.v-b,.v-c,.v-d{grid-column:span 1;aspect-ratio:4/5}
  .venue .v-cap{left:20px;right:20px;bottom:22px}
  .quoteband{padding:100px 0}
  .enquire-cta{padding:110px 0}
  .foot-links{gap:22px;flex-wrap:wrap}
  footer{padding:70px 22px 44px}

  /* Tap targets. The breadcrumb and the back link are 12px type, which gives a
     12px-tall hit area on a phone. The padding brings them to ~30px without
     moving the text, so the row still reads as one thin line. The site-wide
     footer links have the same problem on every page of this site; fixing them
     here alone would make these pages inconsistent with the rest, so that one
     is left for a site-wide pass. */
  .crumb{padding:26px 22px 0;font-size:8px;letter-spacing:.22em}
  .crumb ol{gap:8px;align-items:center}
  .crumb a{display:inline-block;padding:9px 2px;margin:-9px -2px}
  .req-note a{display:inline-block;padding:9px 2px;margin:-9px -2px}
  .detail{padding:76px 0 6px}
  .prose p{font-size:17px}
  .facts li{font-size:17px}
  .gallery{padding:66px 0 14px}
  .gallery-grid{grid-template-columns:1fr;gap:10px}
  .gallery-grid figure,.gallery-grid figure:first-child{grid-column:span 1;aspect-ratio:4/3}
  .spaces{padding:76px 0 30px}
  .space-grid{grid-template-columns:1fr;gap:14px}
  .space-card{padding:30px 24px 28px}
  .request{padding:86px 0 96px;margin-top:60px}
  .req-form{grid-template-columns:1fr;gap:24px;margin-top:42px}
  .btn-ghost{padding:18px 44px;letter-spacing:.3em;text-indent:.3em}
  .lightbox .lb-nav{width:44px;height:44px;font-size:26px}
  .wa-fab{right:16px;bottom:16px;width:54px;height:54px}
}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .page-hero img{animation:none}
  .venue img,.gallery-grid img,.space-card{transition:none}
}

/* The venue's own 360 tour. Same rhythm as the request section above it. */
.tour{padding:96px 0 20px;text-align:left}
.tour .statement{max-width:820px;margin:24px 0 0}
.tour .promise{font-size:18px;line-height:1.7;color:var(--ink-soft);max-width:600px;margin:22px 0 0}
.tour .btn-ghost{margin-top:38px}
.tour .req-note{margin-top:22px}
@media(max-width:900px){.tour{padding:72px 0 10px}}