/* ============================================================
   THE LAZY LAMA · BALI — Brand Site (Draft Demo by CMC)
   Design system: warm bone canvas, ink type, clay + palm accents.
   ============================================================ */

:root{
  --bone:#F5F0E6;
  --bone-2:#EDE5D5;
  --sand:#E5D9C3;
  --ink:#16130F;
  --ink-2:#2A251E;
  --muted:#7C7263;
  --clay:#C46943;
  --clay-deep:#A54F2E;
  --palm:#3E5C4B;
  --ocean:#33565F;
  --gold:#D9A441;
  --white:#FFFDF8;
  --radius:22px;
  --radius-lg:34px;
  --font-d:'Outfit',system-ui,sans-serif;
  --font-s:'Fraunces',Georgia,serif;
  --shadow-lg:0 30px 80px -20px rgba(22,19,15,.35);
  --shadow-md:0 18px 50px -18px rgba(22,19,15,.28);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x on html/body must be `clip`, never `hidden`: hidden turns the page into a scroll
   container on iOS Safari, which kills ScrollTrigger's position:fixed pinning (the dive gallery
   scrolled past unpinned on iPhone and the photo stream never appeared). */
/* NO scroll-behavior:smooth on html — EVER — on a GSAP/ScrollTrigger page.
   Measured in real Chrome 2026-08-19: ScrollTrigger.refresh() (fired on load,
   resize, and visibilitychange = switching to WhatsApp and back) scrolls to
   measure and restore; with CSS smooth the browser ANIMATES that scroll, so
   every trigger got measured mid-flight and shifted by -scrollY. Refresh at
   scroll 1000 → hero start -1000, the dive pin 1000px early; loading
   uluwatu.html#whats-on or a tab switch while scrolled put the pinned hostel
   photo ON TOP of What's happening ("sigue sin verse", "it jumps into the
   picture of the hostel"). Smooth in-page anchor scrolling is done in JS
   (assets/app.js "smooth anchors"), which ScrollTrigger is fine with. */
html{overflow-x:clip}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
body{
  font-family:var(--font-d);
  background:var(--bone);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-x:clip;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--clay);color:var(--white)}

/* ---------- real brand logo (their literal artwork as image) ---------- */
.brand-head{height:34px;width:auto;display:block}
.brand-badge{width:auto;display:block}
.nav-mark .hd{display:none}
.nav.is-solid .nav-mark .hl{display:none}
.nav.is-solid .nav-mark .hd{display:block}

/* custom cursor (desktop) */
.cursor{position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--clay);
  pointer-events:none;z-index:3000;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s;mix-blend-mode:multiply}
.cursor.is-hover{width:52px;height:52px;background:rgba(196,105,67,.28)}
@media (hover:none),(max-width:900px){.cursor{display:none}}

/* ---------- type ---------- */
.h-display{font-weight:800;letter-spacing:-.03em;line-height:.94;text-transform:uppercase}
.h-serif{font-family:var(--font-s);font-style:italic;font-weight:400}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--muted)}
.eyebrow .dot{color:var(--clay)}

/* ---------- intro curtain (index) — pure CSS, compositor-driven ---------- */
.intro{position:fixed;inset:0;z-index:1500;display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--bone);
  animation:introLeave .85s cubic-bezier(.7,0,.3,1) 2.7s forwards}
.intro.gone{display:none}
@keyframes introLeave{to{transform:translateY(-101%);visibility:hidden}}
.intro-mark{text-align:center}
.intro-mark svg{width:120px;height:120px;margin:0 auto 18px;animation:markPop .9s cubic-bezier(.22,1,.36,1) both}
@keyframes markPop{from{transform:scale(.78);opacity:0}}
.intro-word{overflow:hidden;font-weight:800;letter-spacing:.42em;font-size:.85rem;text-transform:uppercase}
.intro-word span{display:inline-block;transform:translateY(110%);animation:wordUp .85s cubic-bezier(.22,1,.36,1) .35s forwards}
@keyframes wordUp{to{transform:translateY(0)}}
.intro-sub{margin-top:10px;font-family:var(--font-s);font-style:italic;color:#9d937f;font-size:.95rem;opacity:0;animation:subIn .7s ease 1.05s forwards}
@keyframes subIn{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* ---------- location selector v2: one screen, no scroll, no lateral movement ---------- */
body.is-selector{overflow:hidden;height:100svh}
.selector{position:fixed;inset:0;display:flex;flex-direction:row;overflow:hidden;background:var(--ink)}
.panel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;display:flex;align-items:flex-end;
  cursor:pointer;border-right:1px solid rgba(245,240,230,.14)}
.panel:last-child{border-right:none}
.panel-bg,.panel-vid{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.02);transition:transform 1.2s var(--ease),filter 1s;filter:saturate(.85) brightness(.74)}
.panel:hover .panel-bg,.panel:hover .panel-vid{transform:scale(1.07);filter:saturate(1) brightness(.88)}
.panel-vid{width:100%;height:100%;object-fit:cover;pointer-events:none}
.panel-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,19,15,.14) 0%,rgba(22,19,15,.04) 40%,rgba(22,19,15,.8) 100%)}
.panel-inner{position:relative;z-index:2;width:100%;padding:0 clamp(22px,4vw,56px) clamp(30px,6vh,68px);color:var(--bone)}
.panel-no{font-family:var(--font-s);font-style:italic;font-size:1rem;opacity:.75}
.panel-name{font-size:clamp(2rem,4.6vw,4.4rem);font-weight:800;letter-spacing:-.02em;text-transform:uppercase;line-height:1;margin:6px 0 0}
.panel-tag{font-size:.95rem;color:rgba(245,240,230,.85);max-width:34ch;margin-top:10px}
.panel-cta{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:12px 22px;border:1px solid rgba(245,240,230,.5);
  border-radius:100px;font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  opacity:0;transition:opacity .5s var(--ease);backdrop-filter:blur(6px)}
.panel:hover .panel-cta{opacity:1}
.panel-badge{position:absolute;top:20px;right:20px;z-index:3;display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:100px;font-size:.64rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.badge-new{background:var(--clay);color:var(--white)}
.badge-soon{background:rgba(245,240,230,.16);color:var(--bone);border:1px solid rgba(245,240,230,.4);backdrop-filter:blur(8px)}
.panel.is-soon .panel-bg,.panel.is-soon .panel-vid{filter:saturate(.2) brightness(.55)}
.panel.is-soon:hover .panel-bg,.panel.is-soon:hover .panel-vid{filter:saturate(.45) brightness(.65)}

.selector-brand{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(22px,4vw,56px) 26px;color:var(--bone);pointer-events:none;
  background:linear-gradient(180deg,rgba(22,19,15,.5),transparent)}
.selector-brand .mark{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.3em;font-size:.8rem;text-transform:uppercase}
.selector-brand .mark svg{width:42px;height:42px}
.selector-brand .mark .brand-head{height:34px}
.selector-brand .hint{font-family:var(--font-s);font-style:italic;font-size:.9rem;opacity:.8}

@media (max-width:900px){
  .selector{flex-direction:column}
  .panel{border-right:none;border-bottom:1px solid rgba(245,240,230,.14)}
  .panel:last-child{border-bottom:none}
  .panel-inner{padding:0 22px 18px}
  .panel:last-child .panel-inner{padding-bottom:72px} /* clear the draft pill + bot fab */
  .panel-name{font-size:clamp(1.9rem,9vw,2.6rem)}
  .panel-no{font-size:.85rem}
  .panel-tag,.panel-cta{display:none}
  .panel-badge{top:12px;right:14px;padding:7px 12px;font-size:.56rem}
  .selector-brand{padding:14px 20px 20px}
  .selector-brand .mark .brand-head{height:30px}
  .selector-brand .hint{display:none}
}

/* ---------- shared nav (inner pages) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(20px,4vw,48px);transition:background .4s,box-shadow .4s,color .4s;color:var(--bone)}
.nav.is-solid{background:rgba(245,240,230,.92);backdrop-filter:blur(14px);color:var(--ink);box-shadow:0 1px 0 rgba(22,19,15,.08)}
.nav-mark{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.26em;font-size:.74rem;text-transform:uppercase}
.nav-mark svg{width:36px;height:36px}
.nav-mark .brand-head{height:32px}
.nav-links{display:flex;align-items:center;gap:26px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.nav-links a{opacity:.85;transition:opacity .3s}
.nav-links a:hover{opacity:1}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:100px;font-weight:800;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;transition:transform .35s var(--ease),box-shadow .35s,background .3s;will-change:transform}
.btn-clay{background:var(--clay);color:var(--white);box-shadow:0 14px 34px -12px rgba(196,105,67,.65)}
.btn-clay:hover{background:var(--clay-deep);transform:translateY(-2px)}
.btn-ink{background:var(--ink);color:var(--bone)}
.btn-ink:hover{transform:translateY(-2px)}
.btn-ghost{border:1.5px solid currentColor;background:transparent}
.btn-ghost:hover{background:rgba(22,19,15,.06)}
@media (max-width:900px){.nav-links{display:none}}

/* ---------- location hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);color:var(--bone)}
.hero-bg{position:absolute;inset:-12% 0 0 0;background-size:cover;background-position:center;will-change:transform;filter:brightness(.7) saturate(.9)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,19,15,.35),rgba(22,19,15,.08) 45%,rgba(22,19,15,.82))}
.hero-inner{position:relative;z-index:2;width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px) clamp(48px,8vh,90px)}
.hero-title{font-size:clamp(3rem,10vw,8.2rem)}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line span{display:inline-block;transform:translateY(110%);animation:wordUp .95s cubic-bezier(.22,1,.36,1) .25s forwards}
.hero-title .line:nth-child(2) span{animation-delay:.4s}
.hero-title .line:nth-child(3) span{animation-delay:.55s}
.hero-sub{opacity:0;animation:subIn .9s ease .85s forwards}
@media (prefers-reduced-motion:reduce){.hero-title .line span{animation:none;transform:none}.hero-sub{animation:none;opacity:1}}
.hero-sub{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;margin-top:22px;font-size:.92rem;color:rgba(245,240,230,.92)}
/* note: .hero-sub entrance animation defined above with the title rules */
.hero-sub .sep{width:5px;height:5px;border-radius:50%;background:var(--clay)}
.hero-scroll{position:absolute;right:clamp(20px,4vw,48px);bottom:34px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.62rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,240,230,.75)}
.hero-scroll .bar{width:1px;height:52px;background:rgba(245,240,230,.4);overflow:hidden;position:relative}
.hero-scroll .bar::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--clay);animation:drip 1.8s var(--ease) infinite}
@keyframes drip{to{top:100%}}

/* ---------- sections ---------- */
.section{padding:clamp(72px,11vh,130px) 0;position:relative}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:clamp(34px,5vh,56px)}
.section-title{font-size:clamp(2rem,4.6vw,3.6rem);font-weight:800;letter-spacing:-.025em;line-height:1;text-transform:uppercase}
.section-title em{font-family:var(--font-s);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;color:var(--clay)}
/* Reveals: visible by default (bulletproof). Scroll-driven CSS animation as pure enhancement
   where supported (compositor thread, immune to JS/rAF throttling). */
.reveal{opacity:1;transform:none}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference){
    .reveal{animation:riseIn linear both;animation-timeline:view();animation-range:entry 5% entry 45%}
  }
}
@keyframes riseIn{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}

/* marquee */
.marquee{overflow:hidden;background:var(--ink);color:var(--bone);padding:16px 0;transform:rotate(-1.2deg) scale(1.02)}
.marquee-track{display:flex;gap:44px;white-space:nowrap;width:max-content;font-weight:800;letter-spacing:.3em;font-size:.82rem;text-transform:uppercase}
.marquee-track .m-dot{color:var(--clay)}

/* story split */
.story{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:center}
.story-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5}
.story-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform}
.story-media .float-card{position:absolute;left:18px;bottom:18px;background:rgba(245,240,230,.94);backdrop-filter:blur(10px);color:var(--ink);
  border-radius:18px;padding:14px 18px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow-md)}
.float-card .big{font-size:1.6rem;font-weight:800;line-height:1}
.float-card .small{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.story-copy p{color:var(--ink-2);font-size:1.06rem;max-width:52ch;margin-bottom:1em}
.story-copy .lead{font-size:1.35rem;line-height:1.45;font-weight:500;color:var(--ink)}
@media (max-width:900px){.story{grid-template-columns:1fr}}

/* stats band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{background:var(--white);border:1px solid rgba(22,19,15,.07);border-radius:var(--radius);padding:26px 22px;text-align:center;
  transition:transform .5s var(--ease),box-shadow .5s}
.stat:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.stat .num{font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:800;letter-spacing:-.02em}
.stat .num sup{font-size:.5em;color:var(--clay)}
.stat .lbl{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:6px}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}

/* rooms */
.rooms{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,28px);max-width:960px;margin-inline:auto}
.room{position:relative;background:var(--white);border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(22,19,15,.07);
  transform-style:preserve-3d;transition:box-shadow .5s;box-shadow:0 10px 30px -18px rgba(22,19,15,.25)}
.room:hover{box-shadow:var(--shadow-lg)}
.room-media{position:relative;aspect-ratio:4/3;overflow:hidden}
.room-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.room:hover .room-media img{transform:scale(1.08)}
.room-price{position:absolute;top:14px;right:14px;background:var(--ink);color:var(--bone);border-radius:100px;padding:9px 16px;
  font-weight:800;font-size:.82rem;letter-spacing:.04em}
.room-price em{font-family:var(--font-s);font-style:italic;font-weight:400;color:var(--gold);margin-right:4px}
.room-body{padding:22px 24px 26px}
.room-body h3{font-size:1.18rem;font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.room-body p{font-size:.92rem;color:var(--muted);margin:8px 0 14px}
.room-feats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.room-feats span{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--bone-2);
  border-radius:100px;padding:6px 12px;color:var(--ink-2)}
/* Book buttons pinned to the card floor — Janice 2026-08-12: "these two not
   aligned - one up one down" (the Female card's longer copy pushed its CTA). */
.room{display:flex;flex-direction:column}
.room-body{display:flex;flex-direction:column;flex:1}
.room .btn{width:100%;justify-content:center;margin-top:auto}
@media (max-width:900px){.rooms{grid-template-columns:1fr}}

/* amenities */
.amen{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.amen-card{background:var(--white);border:1px solid rgba(22,19,15,.07);border-radius:var(--radius);padding:24px 20px;
  display:flex;flex-direction:column;gap:12px;transition:transform .45s var(--ease),background .45s}
.amen-card:hover{transform:translateY(-5px);background:var(--sand)}
.amen-card .ico{width:44px;height:44px;border-radius:14px;background:var(--bone-2);display:grid;place-items:center;font-size:1.25rem}
/* pro line-icon set (replaces OS emojis) */
.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.amen-card .ico{color:var(--clay-deep)}
.info-row .ico{color:var(--gold)}
.btn .ico{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.amen-card h4{font-size:.92rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.amen-card p{font-size:.82rem;color:var(--muted);line-height:1.5}
@media (max-width:1000px){.amen{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.amen{grid-template-columns:1fr}}

/* dive gallery — scroll enters the aerial photo; base state (no JS / reduced motion) = static grid, always visible */
.dive{background:var(--ink);color:var(--bone)}
.dive-stage{position:relative;padding:clamp(70px,10vh,110px) clamp(20px,4vw,48px)}
.dive-intro{max-width:1280px;margin:0 auto 34px}
/* .42 alpha lost this line inside the canopy of the aerial shot it sits on. A
   scrim behind it makes it WORSE (semi-transparent type darkens together with
   its own plate — measured 2.07:1), so the fix is the type's own weight: .72
   clears 4.5:1 at every scroll position of the dive-in. */
.dive-hint{display:none;margin-top:16px;font-size:.66rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,240,230,.72)}
.dive-photo{max-width:1280px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden}
.dive-photo img{width:100%;height:min(64vh,560px);object-fit:cover;display:block}
.dive-shade{display:none}
.dive-stream{max-width:1280px;margin:clamp(16px,2.4vw,26px) auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.dv-card{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3/4}
.dv-card img{width:100%;height:100%;object-fit:cover;display:block}
.dv-card figcaption{position:absolute;left:14px;bottom:14px;background:rgba(22,19,15,.72);backdrop-filter:blur(8px);border-radius:100px;
  padding:8px 16px;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:900px){.dive-stream{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.dive-stream{grid-template-columns:1fr}}

/* cinematic mode — JS adds .is-cine only when GSAP+ScrollTrigger are live and motion is allowed */
.dive.is-cine .dive-stage{height:100vh;height:100svh;padding:0;overflow:hidden}
.dive.is-cine .dive-intro{position:absolute;left:50%;top:15vh;transform:translateX(-50%);text-align:center;z-index:3;margin:0;width:max-content;max-width:92vw}
.dive.is-cine .dive-hint{display:block}
.dive.is-cine .dive-photo{position:absolute;inset:0;max-width:none;margin:0;border-radius:28px;will-change:transform;z-index:1}
.dive.is-cine .dive-photo img{width:100%;height:100%;object-fit:cover;transform-origin:62% 55%;will-change:transform}
.dive.is-cine .dive-shade{display:block;position:absolute;inset:0;background:var(--ink);opacity:0;z-index:2;pointer-events:none}
.dive.is-cine .dive-stream{display:block;position:absolute;inset:0;max-width:none;margin:0;z-index:3;pointer-events:none}
.dive.is-cine .dv-card{position:absolute;left:50%;top:50%;width:clamp(240px,26vw,400px);box-shadow:0 30px 80px -22px rgba(0,0,0,.6);will-change:transform}
@media (max-width:700px){
  .dive.is-cine .dv-card{width:min(70vw,340px)}
  /* portrait cover-crop shows ~1/3 of the aerial photo; aim the visible slice at the pool
     (same spot as the zoom origin) so the top view actually reads on phones */
  .dive.is-cine .dive-photo img{object-position:62% 55%}
}

/* what's on — live weekly board (fed by the team app) */
.events{background:var(--ink);color:var(--bone);border-top:1px solid rgba(245,240,230,.08)}
.ev-now{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:right}
.ev-board{display:flex;flex-direction:column;gap:clamp(26px,4vw,40px);margin-top:10px}
.ev-day .ev-dhead{display:flex;align-items:center;gap:12px;margin-bottom:6px}
/* Bone, not --muted: the day names carry the whole board — a guest reads THURSDAY
   to find Thursday. --muted (#7C7263) on --ink measures 3.9:1, under the 4.5:1
   floor for text this small, so the days after today were decoration nobody could
   read (Lorena 2026-08-05: "so people can actually read what is going on").
   Bone measures 16.3:1. Size and weight deliberately unchanged. */
.ev-day .ev-dname{font-weight:800;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone)}
.ev-day.is-today .ev-dname{color:var(--gold)}
.ev-tag{display:inline-flex;align-items:center;gap:7px;background:rgba(217,164,65,.14);color:var(--gold);border:1px solid rgba(217,164,65,.35);
  border-radius:100px;padding:5px 12px;font-size:.62rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.ev-tag .pd{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:evPulse 1.6s ease-in-out infinite}
@keyframes evPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.ev-row{display:grid;grid-template-columns:minmax(150px,190px) 1fr auto;gap:clamp(12px,2.5vw,28px);align-items:baseline;
  padding:clamp(16px,2.4vw,22px) 0;border-top:1px dashed rgba(245,240,230,.16);transition:transform .45s var(--ease)}
.ev-day .ev-row:last-child{border-bottom:1px dashed rgba(245,240,230,.16)}
.ev-row:hover{transform:translateX(8px)}
.ev-time{font-family:var(--font-s);font-style:italic;font-size:clamp(1.06rem,1.7vw,1.4rem);color:var(--gold);white-space:nowrap}
.ev-time.tbd{color:var(--muted);font-size:.9rem}
.ev-title{font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.05rem,2.2vw,1.6rem);line-height:1.15}
.ev-note{display:block;font-weight:500;text-transform:none;letter-spacing:0;font-size:.86rem;color:var(--muted);margin-top:4px}
.ev-live{justify-self:end}
@media (max-width:700px){
  .ev-row{grid-template-columns:1fr;gap:4px;padding:16px 0}
  .ev-time{font-size:1rem}
  .ev-live{justify-self:start;margin-top:6px}
  .ev-now{display:none}
}

/* reviews */
/* The old 3-column grid is gone: reviews are one swipeable lane now. The rule
   stays only so any page still using .reviews keeps a sane layout. */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px)}

/* ── REVIEWS LANE (2026-09-07) ─────────────────────────────────────────────
   Same engine and the same gestures as the photo gallery, on a light section:
   drag, arrows, dots, keyboard. Cards share ONE height so the lane never
   jitters as you swipe between a long quote and a bare rating. */
.rv{margin-top:6px}
.rv-track{overflow:hidden;touch-action:pan-y;cursor:grab;outline:none;padding:14px 0 6px}
.rv-track:active{cursor:grabbing}
.rv-track:focus-visible{outline:2px solid var(--clay);outline-offset:4px;border-radius:22px}
.rv-slider{display:flex;gap:clamp(14px,2vw,22px);align-items:stretch;will-change:transform;
  transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.rv-card{flex:0 0 auto;width:min(82vw,380px);display:flex;flex-direction:column;
  background:var(--white);border-radius:var(--radius-lg);padding:26px 26px 22px;
  border:1px solid rgba(22,19,15,.07);box-shadow:0 18px 40px -28px rgba(22,19,15,.4);
  opacity:.55;transform:scale(.97);transition:opacity .45s,transform .45s,box-shadow .45s}
.rv-card.is-on{opacity:1;transform:none;box-shadow:0 26px 56px -30px rgba(22,19,15,.5)}
.rv-card p{font-size:1rem;color:var(--ink-2);margin:14px 0 18px;font-weight:500;line-height:1.55;
  flex:1 1 auto}
.rv-card .review-meta{margin-top:auto}
/* A rating with no words is not an empty quote card: the stars carry it. */
.rv-card.is-rating{justify-content:space-between}
.rv-card.is-rating .review-stars{font-size:1.5rem;letter-spacing:5px;margin:10px 0 22px}
.rv-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px}
.rv-arrow{width:46px;height:46px;min-height:46px;border-radius:50%;cursor:pointer;
  color:var(--ink);border:1px solid rgba(22,19,15,.18);
  background:linear-gradient(180deg,#FFFFFF,#F3ECDD);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(22,19,15,.08),0 5px 14px -6px rgba(22,19,15,.18);
  transition:transform .16s,filter .16s,box-shadow .16s}
.rv-arrow:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.03);
  box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(22,19,15,.10),0 9px 20px -7px rgba(22,19,15,.26)}
.rv-arrow:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(22,19,15,.16)}
.rv-arrow:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.rv-arrow:disabled{opacity:.45;box-shadow:none;transform:none;cursor:default}
/* The reviews lane uses a bar + counter instead of one dot per review: 30 dots
   is 1320px of nav inside a 390px phone. */
.rv-dots{display:flex;align-items:center;gap:12px;min-width:0;flex:0 1 240px}
.rv-bar{position:relative;flex:1 1 auto;height:4px;border-radius:100px;overflow:hidden;
  background:rgba(22,19,15,.12);box-shadow:inset 0 1px 2px rgba(22,19,15,.10)}
.rv-bar i{position:absolute;inset:0 auto 0 0;display:block;height:100%;border-radius:100px;
  background:linear-gradient(180deg,#E6B85E,var(--gold));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),width .3s}
.rv-num{flex:0 0 auto;font-size:.7rem;font-weight:800;letter-spacing:.08em;color:var(--muted);
  font-variant-numeric:tabular-nums}
.rv-sec{overflow:hidden}
#rv-more{margin-top:6px}
.review-card{background:var(--white);border-radius:var(--radius-lg);padding:30px 28px;border:1px solid rgba(22,19,15,.07);
  box-shadow:0 12px 34px -20px rgba(22,19,15,.3);position:relative;transition:transform .5s var(--ease)}
.review-card:hover{transform:translateY(-6px) rotate(0deg)!important}
.review-card:nth-child(1){transform:rotate(-1.3deg)}
.review-card:nth-child(2){transform:rotate(.9deg) translateY(14px)}
.review-card:nth-child(3){transform:rotate(-.7deg)}
.review-stars{color:var(--gold);letter-spacing:3px;font-size:.95rem}
.review-card p{font-size:1.02rem;color:var(--ink-2);margin:14px 0 18px;font-weight:500;line-height:1.55}
.review-meta{display:flex;align-items:center;gap:12px}
.review-meta .avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:var(--white)}
.review-meta .who b{display:block;font-size:.92rem}
.review-meta .who span{font-size:.76rem;color:var(--muted)}
@media (max-width:900px){.reviews{grid-template-columns:1fr}.review-card{transform:none!important}}
/* The "Recent guests" chip strip lived here. It was merged into the reviews
   carousel on 2026-09-07 (Lorena: "combine them so is just one carrusel"), so
   every .rated-* rule went with it rather than sitting here unused. The lane it
   became is .rv, below, and it runs on the photo gallery's own engine. */

/* map + info */
.map-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,36px);align-items:stretch}
.map-frame{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);min-height:420px;border:1px solid rgba(22,19,15,.08);position:relative}
.map-frame iframe{width:100%;height:100%;min-height:420px;border:0;filter:saturate(.85) contrast(1.02)}
/* branded Leaflet map */
.map-frame .lmap{position:absolute;inset:0;z-index:1;background:#14181a}
.map-actions{position:absolute;left:14px;bottom:14px;z-index:600;display:flex;flex-wrap:wrap;gap:10px}
.map-actions .btn{padding:12px 18px;font-size:.66rem;box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
.leaflet-container{font-family:var(--font-d)}
.leaflet-control-attribution{background:rgba(22,19,15,.55)!important;color:rgba(245,240,230,.5)!important;font-size:9px;padding:2px 9px;border-radius:0 100px 100px 0;margin:0 0 6px 0!important}
.leaflet-control-attribution a{color:rgba(245,240,230,.6)!important;text-decoration:none}
.leaflet-popup-content-wrapper{background:var(--ink);color:var(--bone);border-radius:16px;box-shadow:var(--shadow-md)}
.leaflet-popup-tip{background:var(--ink)}
.leaflet-popup-content{margin:14px 18px;font-size:.86rem;line-height:1.6}
.leaflet-popup-content b{color:var(--gold);font-size:.95rem}
.leaflet-popup-close-button{color:var(--bone)!important}
.leaflet-control-attribution{background:rgba(22,19,15,.7)!important;color:#8a8375!important;font-size:.6rem!important}
.leaflet-control-attribution a{color:#a99f8c!important}
.leaflet-control-zoom a{background:var(--ink)!important;color:var(--bone)!important;border-color:rgba(245,240,230,.15)!important}
.lama-pin{background:none;border:none}
.pin-wrap{position:relative;width:46px;height:58px}
.pin-head{position:absolute;left:0;top:0;width:46px;height:46px;border-radius:50% 50% 50% 8px;background:var(--clay);transform:rotate(-45deg);display:grid;place-items:center;border:3px solid var(--bone);box-shadow:0 14px 30px -10px rgba(0,0,0,.6)}
.pin-head svg{transform:rotate(45deg);width:26px;height:26px;color:var(--bone)}
.info-card{background:var(--ink);color:var(--bone);border-radius:var(--radius-lg);padding:clamp(26px,3.4vw,44px);display:flex;flex-direction:column;gap:20px}
.info-row{display:flex;gap:16px;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid rgba(245,240,230,.14)}
.info-row:last-child{border:none;padding-bottom:0}
.info-row .ico{width:40px;height:40px;flex-shrink:0;border-radius:12px;background:rgba(245,240,230,.1);display:grid;place-items:center;font-size:1.1rem}
.info-row h5{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,240,230,.6);margin-bottom:4px}
.info-row p{font-size:.98rem;color:var(--bone);line-height:1.5}
@media (max-width:900px){.map-grid{grid-template-columns:1fr}}

/* CTA band */
.book-band{position:relative;overflow:hidden;background:var(--ink);color:var(--bone);text-align:center;padding:clamp(80px,14vh,150px) 0}
.book-band .bg{position:absolute;inset:-15% 0;background-size:cover;background-position:center;opacity:.35;will-change:transform}
.book-band .wrap{position:relative;z-index:2}
.book-band h2{font-size:clamp(2.4rem,6.4vw,5.4rem);font-weight:800;letter-spacing:-.03em;line-height:.98;text-transform:uppercase}
.book-band h2 em{font-family:var(--font-s);font-style:italic;font-weight:400;text-transform:none;color:var(--gold)}
.book-band p{margin:18px auto 30px;max-width:46ch;color:rgba(245,240,230,.85)}

/* footer */
.footer{background:var(--ink);color:var(--bone);padding:60px 0 40px;border-top:1px solid rgba(245,240,230,.12)}
.footer .wrap{display:flex;flex-wrap:wrap;gap:30px;align-items:center;justify-content:space-between}
.footer .mark{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.3em;font-size:.78rem;text-transform:uppercase}
.footer .mark svg{width:44px;height:44px}
.footer .mark .brand-head{height:42px}
.footer-links{display:flex;flex-wrap:wrap;gap:20px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.footer-note{width:100%;margin-top:26px;padding-top:22px;border-top:1px solid rgba(245,240,230,.1);display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;font-size:.72rem;color:rgba(245,240,230,.55)}
.footer-note a{color:var(--gold)}

/* draft ribbon */
.draft-ribbon{position:fixed;z-index:950;top:14px;right:-52px;transform:rotate(38deg);background:var(--clay);color:var(--white);
  font-size:.6rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;padding:7px 60px;box-shadow:var(--shadow-md);pointer-events:none}
@media (max-width:700px){
  .draft-ribbon{top:auto;bottom:16px;left:16px;right:auto;transform:none;border-radius:100px;padding:8px 16px;letter-spacing:.2em;font-size:.56rem}
}

/* ---------- booking sim ---------- */
.book-modal{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:20px}
.book-modal.open{display:flex}
.book-modal .bm-bg{position:absolute;inset:0;background:rgba(22,19,15,.7);backdrop-filter:blur(6px)}
.bm-card{position:relative;background:var(--white);border-radius:26px;max-width:430px;width:100%;padding:38px 34px;text-align:center;box-shadow:var(--shadow-lg);
  animation:pop .5s var(--ease)}
@keyframes pop{from{transform:scale(.92) translateY(16px);opacity:0}}
.bm-card .spin{width:54px;height:54px;margin:0 auto 18px;border-radius:50%;border:3px solid var(--bone-2);border-top-color:var(--clay);animation:rot 1s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.bm-card h3{font-size:1.3rem;font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.bm-card p{font-size:.9rem;color:var(--muted);margin:10px 0 0}
.bm-card .cb{margin-top:16px;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ocean)}

/* booking page */
.book-page{padding:120px 0 90px;min-height:100svh;background:var(--bone)}
.book-shell{display:grid;grid-template-columns:1.5fr .9fr;gap:26px;align-items:start}
.book-note{background:#FFF6EC;border:1px solid #EFD9BF;border-radius:16px;padding:14px 18px;font-size:.85rem;color:#7A5A33;margin-bottom:26px;display:flex;gap:10px;align-items:flex-start}
.book-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:22px}
.book-head h1{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800;text-transform:uppercase;letter-spacing:-.02em}
.book-dates{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;background:var(--white);border:1px solid rgba(22,19,15,.08);
  border-radius:18px;padding:16px;margin-bottom:22px}
.book-dates > div{min-width:0}
.book-dates label{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}
.book-dates input,.book-dates select{width:100%;max-width:100%;border:1px solid rgba(22,19,15,.12);border-radius:10px;padding:12px;font-family:inherit;font-size:16px;background:var(--bone);-webkit-appearance:none;appearance:none;box-sizing:border-box}
.book-dates .sel-wrap{position:relative}
.book-dates .sel-wrap::after{content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.book-dates select{padding-right:30px}
.book-room{display:grid;grid-template-columns:150px 1fr auto;gap:18px;background:var(--white);border:1px solid rgba(22,19,15,.08);
  border-radius:20px;padding:16px;margin-bottom:14px;align-items:center;transition:box-shadow .4s}
.book-room:hover{box-shadow:var(--shadow-md)}
.book-room img{width:150px;height:110px;object-fit:cover;border-radius:14px}
.book-room h4{font-size:1.02rem;font-weight:800;text-transform:uppercase}
.book-room .feats{font-size:.78rem;color:var(--muted);margin-top:4px}
.book-room .price-col{text-align:right}
.book-room .p{font-size:1.3rem;font-weight:800}
.book-room .p span{font-size:.72rem;color:var(--muted);font-weight:600}
.book-side{background:var(--ink);color:var(--bone);border-radius:24px;padding:28px;position:sticky;top:110px}
.book-side h3{font-size:.78rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,240,230,.6);margin-bottom:16px}
.bs-row{display:flex;justify-content:space-between;font-size:.92rem;padding:10px 0;border-bottom:1px solid rgba(245,240,230,.12)}
.bs-row.total{font-weight:800;font-size:1.06rem;border:none}
.book-side .btn{width:100%;justify-content:center;margin-top:16px}
.book-side .secure{margin-top:14px;font-size:.7rem;color:rgba(245,240,230,.55);text-align:center;line-height:1.6}
@media (max-width:960px){.book-shell{grid-template-columns:1fr}.book-side{position:static}.book-room{grid-template-columns:110px 1fr}.book-room .price-col{grid-column:2;text-align:left}}
@media (max-width:600px){.book-dates{grid-template-columns:1fr 1fr}.book-dates .full{grid-column:1 / -1}}

/* ---------- review page ---------- */
.rev-page{min-height:100svh;background:
  radial-gradient(1200px 600px at 85% -10%,rgba(196,105,67,.18),transparent 60%),
  radial-gradient(900px 500px at -10% 110%,rgba(62,92,75,.16),transparent 60%),var(--bone);
  padding:110px 0 80px}
.rev-shell{max-width:680px;margin:0 auto;padding:0 20px}
.rev-hero{text-align:center;margin-bottom:34px}
.rev-hero .lama{margin:0 auto 16px;display:flex;justify-content:center}
.rev-hero .lama .brand-badge{height:104px}
50%{transform:translateY(-9px) rotate(2deg)}}
.rev-hero h1{font-size:clamp(2rem,6vw,3.1rem);font-weight:800;letter-spacing:-.03em;text-transform:uppercase;line-height:1}
.rev-hero p{color:var(--muted);margin-top:10px;font-size:1.02rem}
.rev-card{background:var(--white);border-radius:30px;box-shadow:var(--shadow-lg);border:1px solid rgba(22,19,15,.06);padding:clamp(24px,4vw,44px)}
.rev-loc{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:30px}
.rev-loc button{border:1.5px solid rgba(22,19,15,.14);border-radius:16px;padding:14px 10px;font-weight:800;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;background:var(--bone);transition:all .3s;color:var(--ink)}
.rev-loc button.active{background:var(--ink);color:var(--bone);border-color:var(--ink);transform:translateY(-2px)}
.rev-q{margin-bottom:28px}
.rev-q .q-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.rev-q .q-head h3{font-size:1.02rem;font-weight:800;display:flex;align-items:center;gap:10px}
.rev-q .q-head .q-emoji{display:inline-flex;align-items:center;color:var(--clay-deep)}
.rev-q .q-head .q-emoji svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rev-q .q-val{min-width:44px;height:32px;display:grid;place-items:center;background:var(--bone-2);border-radius:10px;font-weight:800;font-size:.95rem;color:var(--clay-deep)}
.scale{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.scale button{aspect-ratio:1/1.05;border-radius:12px;background:var(--bone-2);font-weight:800;font-size:.88rem;color:var(--muted);
  transition:all .22s var(--ease);border:1.5px solid transparent}
.scale button:hover{transform:translateY(-3px);background:var(--sand)}
.scale button.on{background:linear-gradient(135deg,var(--clay),var(--clay-deep));color:var(--white);box-shadow:0 8px 20px -8px rgba(196,105,67,.7);transform:translateY(-3px)}
.scale-ends{display:flex;justify-content:space-between;font-size:.68rem;color:var(--muted);margin-top:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.rev-comment textarea{width:100%;min-height:120px;border:1.5px solid rgba(22,19,15,.14);border-radius:18px;background:var(--bone);
  padding:16px;font-family:inherit;font-size:16px;resize:vertical}
.rev-comment textarea:focus{outline:2px solid var(--clay);border-color:transparent}
.rev-name input{width:100%;border:1.5px solid rgba(22,19,15,.14);border-radius:14px;background:var(--bone);padding:14px 16px;font-family:inherit;font-size:16px}
.rev-submit{width:100%;justify-content:center;padding:18px;font-size:.88rem;margin-top:26px}
.rev-privacy{text-align:center;font-size:.72rem;color:var(--muted);margin-top:14px}
.rev-done{text-align:center;padding:50px 10px;display:none}
.rev-done .big-emoji{font-size:4rem;margin-bottom:12px}
.rev-done h2{font-size:1.8rem;font-weight:800;text-transform:uppercase;letter-spacing:-.02em}
.rev-done p{color:var(--muted);margin-top:10px}

/* confetti */
.confetti{position:fixed;top:-10px;z-index:1600;width:10px;height:16px;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);opacity:.9}}

/* ---------- QR card (print) ---------- */
.qr-page{min-height:100svh;display:flex;align-items:center;justify-content:center;background:var(--bone-2);padding:40px 16px;flex-direction:column;gap:22px}
.qr-card{width:380px;max-width:94vw;background:var(--white);border-radius:30px;box-shadow:var(--shadow-lg);overflow:hidden;text-align:center}
.qr-card .qr-top{background:var(--ink);color:var(--bone);padding:30px 24px 24px}
.qr-card .qr-top .brand-badge{height:88px;margin:0 auto 12px}
.qr-card .qr-top h2{font-size:1.25rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.qr-card .qr-top p{font-family:var(--font-s);font-style:italic;color:var(--gold);margin-top:6px;font-size:.95rem}
.qr-card .qr-body{padding:28px 24px 30px}
.qr-card .qr-img{width:210px;height:210px;margin:0 auto;border-radius:18px;border:1.5px solid rgba(22,19,15,.1);padding:10px;background:#fff}
.qr-card .qr-img img{width:100%;height:100%}
.qr-card .steps{margin-top:18px;font-size:.82rem;color:var(--muted);line-height:1.7}
.qr-card .steps b{color:var(--ink)}
.qr-print-note{font-size:.8rem;color:var(--muted)}
@media print{
  body::after{display:none}
  .qr-print-note,.lama-bot,.draft-ribbon{display:none!important}
  .qr-page{background:#fff}
  .qr-card{box-shadow:none;border:1px solid #ddd}
}

/* ---------- coming soon (ubud) ---------- */
.soon-hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--ink);color:var(--bone);overflow:hidden}
.soon-hero .bg{position:absolute;inset:-10%;background-size:cover;background-position:center;opacity:.42;filter:saturate(.6);will-change:transform}
.soon-hero .inner{position:relative;z-index:2;padding:120px 20px;max-width:760px}
.soon-hero .eyebrow{color:var(--gold)}
.soon-hero h1{font-size:clamp(3rem,10vw,7rem);font-weight:800;letter-spacing:-.03em;text-transform:uppercase;line-height:.95;margin:16px 0 18px}
.soon-hero p{color:rgba(245,240,230,.85);max-width:52ch;margin:0 auto 30px;font-size:1.05rem}
.waitlist{display:flex;gap:10px;max-width:440px;margin:0 auto}
.waitlist input{flex:1;border:1.5px solid rgba(245,240,230,.3);background:rgba(245,240,230,.08);border-radius:100px;
  padding:15px 22px;color:var(--bone);font-family:inherit;font-size:16px;backdrop-filter:blur(8px)}
.waitlist input::placeholder{color:rgba(245,240,230,.5)}
.waitlist input:focus{outline:2px solid var(--clay)}
@media (max-width:560px){.waitlist{flex-direction:column}}
.soon-count{display:flex;gap:clamp(14px,4vw,34px);justify-content:center;margin-top:44px}
.soon-count .c{text-align:center}
.soon-count .c b{display:block;font-size:clamp(1.6rem,4.4vw,2.6rem);font-weight:800}
.soon-count .c span{font-size:.66rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:rgba(245,240,230,.6)}

/* ---------- Lama bot ---------- */
.lama-bot{position:fixed;right:20px;bottom:20px;z-index:1100;font-family:var(--font-d)}
.lama-fab{width:64px;height:64px;border-radius:50%;background:var(--ink);color:var(--bone);display:grid;place-items:center;
  box-shadow:0 16px 40px -10px rgba(22,19,15,.55);transition:transform .35s var(--ease);position:relative}
.lama-fab:hover{box-shadow:0 20px 48px -10px rgba(22,19,15,.7)}
.lama-fab .brand-head{height:36px}
100%{transform:scale(1.55);opacity:0}}
.msg.bot .msg-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.lama-win{position:absolute;right:0;bottom:80px;width:372px;max-width:calc(100vw - 40px);height:540px;max-height:calc(100svh - 130px);
  background:var(--white);border-radius:24px;box-shadow:0 30px 90px -20px rgba(22,19,15,.5);display:none;flex-direction:column;overflow:hidden;border:1px solid rgba(22,19,15,.08)}
.lama-win.open{display:flex;animation:pop .45s var(--ease)}
.lama-head{background:var(--ink);color:var(--bone);padding:16px 18px;display:flex;align-items:center;gap:12px}
.lama-head .brand-head{height:30px;flex-shrink:0}
.lama-head .t b{display:block;font-size:.95rem;font-weight:800;letter-spacing:.04em}
.lama-head .t span{font-size:.7rem;color:var(--gold);display:flex;align-items:center;gap:6px}
.lama-head .t span::before{content:"";width:7px;height:7px;border-radius:50%;background:#7BC47F;display:inline-block}
.lama-head .x{margin-left:auto;color:var(--bone);opacity:.7;font-size:1.15rem;padding:4px 8px}
.lama-trial{background:var(--bone-2);color:var(--ink-2);font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  text-align:center;padding:7px 10px}
.lama-msgs{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px;background:var(--bone)}
.msg{max-width:86%;padding:12px 16px;border-radius:18px;font-size:.9rem;line-height:1.55;animation:msgin .4s var(--ease)}
@keyframes msgin{from{opacity:0;transform:translateY(10px)}}
.msg.bot{background:var(--white);border:1px solid rgba(22,19,15,.07);border-bottom-left-radius:6px;align-self:flex-start;box-shadow:0 6px 18px -12px rgba(22,19,15,.3)}
.msg.bot b{color:var(--clay-deep)}
/* a real human from the team jumped in (chat-log takeover) */
.msg.bot.team{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.msg.bot.team .tm{display:block;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
/* floating WhatsApp — LEFT side on purpose: the concierge bot owns the right */
.wa-float{position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:1090;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 14px 34px -8px rgba(18,60,30,.55);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.wa-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 20px 44px -8px rgba(18,60,30,.65)}
.wa-float svg{width:30px;height:30px;fill:#fff}
.msg.bot .msg-link{display:inline-flex;align-items:center;gap:6px;margin:10px 6px 0 0;padding:9px 15px;border-radius:100px;
  background:var(--clay);color:var(--white);font-weight:800;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  transition:background .25s,transform .25s}
.msg.bot .msg-link:hover{background:var(--clay-deep);transform:translateY(-1px)}
.msg.bot .msg-link.ghost{background:var(--bone-2);color:var(--ink)}
.msg.bot .msg-link.ghost:hover{background:var(--sand)}
.msg.user{background:var(--ink);color:var(--bone);border-bottom-right-radius:6px;align-self:flex-end}
.msg.typing{display:flex;gap:5px;align-items:center;padding:16px}
.msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:tp 1.1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.lama-chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 10px;background:var(--bone)}
.lama-chips button{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:700;background:var(--white);border:1px solid rgba(22,19,15,.14);border-radius:100px;
  padding:8px 14px;transition:all .25s;color:var(--ink-2)}
.lama-chips button svg{width:15px;height:15px;fill:none;stroke:var(--clay-deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.lama-chips button:hover{background:var(--ink);color:var(--bone)}
.lama-chips button:hover svg{stroke:var(--gold)}
.lama-input{display:flex;gap:10px;padding:12px 14px;background:var(--white);border-top:1px solid rgba(22,19,15,.08)}
.lama-input input{flex:1;border:1.5px solid rgba(22,19,15,.12);border-radius:100px;padding:12px 18px;font-family:inherit;font-size:16px;background:var(--bone)}
.lama-input input:focus{outline:2px solid var(--clay)}
.lama-input button{width:46px;height:46px;border-radius:50%;background:var(--clay);color:var(--white);display:grid;place-items:center;flex-shrink:0;transition:background .3s}
.lama-input button:hover{background:var(--clay-deep)}
@media (max-width:480px){.lama-win{width:calc(100vw - 24px);right:0}}

/* ---------- proposal ---------- */
.prop-hero{background:var(--ink);color:var(--bone);padding:150px 0 90px;position:relative;overflow:hidden}
.prop-hero::after{content:"";position:absolute;right:-180px;top:-180px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(196,105,67,.35),transparent 65%)}
.prop-hero .wrap{position:relative;z-index:2}
.prop-hero h1{font-size:clamp(2.6rem,6.6vw,5.2rem);font-weight:800;letter-spacing:-.03em;line-height:.98;text-transform:uppercase;max-width:20ch}
.prop-hero h1 em{font-family:var(--font-s);font-style:italic;font-weight:400;text-transform:none;color:var(--gold)}
.prop-hero .meta{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:30px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(245,240,230,.7)}
.prop-section-label{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--bone);border-radius:100px;
  padding:9px 20px;font-size:.68rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;margin-bottom:22px}
.deliv{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.deliv-card{background:var(--white);border:1px solid rgba(22,19,15,.08);border-radius:var(--radius-lg);padding:30px;transition:transform .4s var(--ease),box-shadow .4s}
.deliv-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.deliv-card .n{font-family:var(--font-s);font-style:italic;color:var(--clay);font-size:1.05rem}
.deliv-card h3{font-size:1.25rem;font-weight:800;text-transform:uppercase;margin:8px 0 10px;letter-spacing:-.01em}
.deliv-card p{font-size:.92rem;color:var(--muted);line-height:1.65}
.deliv-card ul{margin-top:12px;list-style:none;display:flex;flex-direction:column;gap:8px}
.deliv-card li{font-size:.86rem;color:var(--ink-2);padding-left:22px;position:relative}
.deliv-card li::before{content:"✓";position:absolute;left:0;color:var(--palm);font-weight:800}
@media (max-width:860px){.deliv{grid-template-columns:1fr}}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.price-card{background:var(--white);border:1.5px solid rgba(22,19,15,.1);border-radius:var(--radius-lg);padding:34px 30px;
  display:flex;flex-direction:column;position:relative;transition:transform .45s var(--ease),box-shadow .45s}
.price-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.price-card.hot{background:var(--ink);color:var(--bone);border-color:var(--ink);transform:scale(1.03)}
.price-card.hot:hover{transform:scale(1.03) translateY(-8px)}
.price-card .flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--clay);color:var(--white);
  border-radius:100px;padding:8px 18px;font-size:.64rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.price-card .opt{font-family:var(--font-s);font-style:italic;font-size:.95rem;color:var(--clay)}
.price-card.hot .opt{color:var(--gold)}
.price-card h3{font-size:1.3rem;font-weight:800;text-transform:uppercase;margin:6px 0 18px;letter-spacing:-.01em}
.price-num{font-size:2.7rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.price-num span{font-size:.85rem;font-weight:600;color:var(--muted);letter-spacing:0}
.price-card.hot .price-num span{color:rgba(245,240,230,.6)}
.price-sub{font-size:.95rem;font-weight:700;margin-top:6px;color:var(--clay-deep)}
.price-card.hot .price-sub{color:var(--gold)}
.price-card ul{list-style:none;margin:22px 0 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.price-card li{font-size:.88rem;padding-left:24px;position:relative;line-height:1.5}
.price-card li::before{content:"✓";position:absolute;left:0;color:var(--palm);font-weight:800}
.price-card.hot li::before{color:var(--gold)}
.price-card li.dim{opacity:.55}
.price-card li.dim::before{content:"–"}
.price-card .btn{justify-content:center}
@media (max-width:960px){.pricing{grid-template-columns:1fr}.price-card.hot{transform:none}}
.prop-note{background:var(--sand);border-radius:var(--radius);padding:20px 24px;font-size:.88rem;color:var(--ink-2);margin-top:22px;line-height:1.7}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step-card{background:var(--white);border:1px solid rgba(22,19,15,.08);border-radius:var(--radius);padding:26px 22px}
.step-card .no{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--bone);display:grid;place-items:center;font-weight:800;margin-bottom:14px}
.step-card h4{font-size:.95rem;font-weight:800;text-transform:uppercase;margin-bottom:8px}
.step-card p{font-size:.82rem;color:var(--muted);line-height:1.6}
@media (max-width:900px){.steps-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps-grid{grid-template-columns:1fr}}

/* utility */
.center{text-align:center}
.mt-1{margin-top:10px}.mt-2{margin-top:22px}.mt-3{margin-top:38px}
.hidden{display:none!important}

/* mark v2: face detail color per context (real logo two-tone) */
.nav{--mark-detail:var(--ink)}
.nav.is-solid{--mark-detail:var(--bone)}
.selector-brand .mark,.footer .mark,.lama-fab,.lama-head,.qr-top{--mark-detail:var(--ink)}

/* ---------- coming-soon waitlist (Canggu / Ubud) ---------- */
.waitlist-stack{flex-direction:column;max-width:400px}
.waitlist-stack input{width:100%}
.waitlist-stack .btn{width:100%;justify-content:center}
.waitlist-note{font-size:.78rem;color:rgba(245,240,230,.55);margin:14px auto 0;max-width:400px}
.soon-alt{margin-top:38px;font-size:.95rem;color:rgba(245,240,230,.7)}
.soon-alt a{color:var(--gold);font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(212,175,110,.4)}
.soon-alt a:hover{border-bottom-color:var(--gold)}
.waitlist-done{max-width:400px;margin:0 auto;padding:26px 22px;border-radius:20px;
  background:rgba(245,240,230,.08);border:1.5px solid rgba(212,175,110,.35);text-align:center}
.waitlist-done img{height:52px;width:auto;margin:0 auto 12px;display:block}
.waitlist-done b{display:block;font-size:1.15rem;margin-bottom:6px}
.waitlist-done span{font-size:.9rem;color:rgba(245,240,230,.72);line-height:1.6}

/* Agency credit — the standing CMC standard: small, "The CMC" in brand mint
   green #9cd5ba, bold, linking to the agency. Replaces the old "draft concept
   site / not the official website" line, which was demo-phase residue sitting
   on the client's OFFICIAL site (Lorena, 2026-07-28). */
.foot-cmc a{color:#9cd5ba;font-weight:700;text-decoration:none}
.foot-cmc a:hover{text-decoration:underline}

/* Dive gallery on phones (Lorena, 2026-07-28: "el texto está demasiado grande,
   no se siente clean"). The cinematic title was sized for a wide screen and
   swallowed the photo on a 390px phone. */
@media (max-width:700px){
  .dive.is-cine .dive-intro{top:11vh;max-width:86vw}
  .dive.is-cine .dive-intro .section-title{font-size:clamp(1.5rem,7.4vw,2.1rem);line-height:1.06}
  .dive.is-cine .dive-intro .eyebrow{font-size:.58rem;letter-spacing:.22em}
  .dive.is-cine .dive-hint{font-size:.58rem;letter-spacing:.24em;margin-top:12px}
  .dive.is-cine .dv-card{width:min(76vw,320px)}
}

/* ---------- Ubud teaser: the clip IS the page ----------
   Two layouts on purpose. On desktop the clip is ~16:9 and so is the viewport, so it
   fills edge to edge with the copy on top. On a phone, cropping a 16:9 clip into a
   portrait viewport shows about a quarter of the frame — which defeats the point of
   putting it there — so it keeps its own shape and the copy stacks underneath. */
.teaser{position:relative;background:var(--ink);color:var(--bone);overflow:hidden}
.teaser-vid,.teaser-img{display:block;width:100%;background:var(--ink)}
.teaser-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(22,19,15,.62) 0%,rgba(22,19,15,.06) 26%,rgba(22,19,15,.1) 46%,rgba(22,19,15,.88) 100%)}
.teaser-inner{position:relative;z-index:2}
.teaser-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,240,230,.75);
  display:flex;align-items:center;gap:10px}
.teaser-eyebrow .dot{color:var(--gold);font-size:.5rem}
.teaser-title{font-size:clamp(2.9rem,9vw,6.4rem);font-weight:800;letter-spacing:-.035em;line-height:.92;text-transform:uppercase;margin-top:14px}
.teaser-line{max-width:46ch;margin-top:16px;font-size:1.02rem;color:rgba(245,240,230,.82)}
.teaser-form{display:flex;gap:10px;margin-top:26px;max-width:520px}
.teaser-form input{flex:1;min-width:0;padding:16px 20px;border-radius:100px;border:1px solid rgba(245,240,230,.3);
  background:rgba(22,19,15,.42);color:var(--bone);font-family:inherit;font-size:.95rem;backdrop-filter:blur(8px)}
.teaser-form input::placeholder{color:rgba(245,240,230,.5)}
.teaser-form input:focus{outline:none;border-color:var(--gold);background:rgba(22,19,15,.6)}
.teaser-form button{flex-shrink:0;white-space:nowrap}
.teaser-note{margin-top:12px;font-size:.72rem;letter-spacing:.06em;color:rgba(245,240,230,.5)}
.teaser-alt{display:inline-block;margin-top:24px;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(245,240,230,.62);border-bottom:1px solid rgba(245,240,230,.28);padding-bottom:3px;transition:color .3s,border-color .3s}
.teaser-alt:hover{color:var(--gold);border-color:var(--gold)}
.teaser .waitlist-done{margin-top:26px;max-width:520px}

@media (min-width:901px){
  .teaser{min-height:100svh;display:flex;align-items:flex-end}
  .teaser-vid,.teaser-img{position:absolute;inset:0;height:100%;object-fit:cover}
  .teaser-inner{width:100%;padding:0 clamp(30px,5vw,72px) clamp(46px,7vh,86px)}
}
@media (max-width:900px){
  /* the clip keeps its own 16:9 shape so nothing of it is lost */
  .teaser-vid{aspect-ratio:16/9;object-fit:cover}
  /* the Ubud hero is a PORTRAIT photo (2026-08-10, replaced the 848x478 clip):
     a 16/9 crop of it would leave a thin horizontal slice, so it gets a tall frame. */
  .teaser-img{aspect-ratio:4/5;object-fit:cover;object-position:center 42%}
  .teaser-scrim{bottom:auto;height:150px;background:linear-gradient(180deg,rgba(22,19,15,.72),transparent)}
  .teaser-inner{padding:30px 22px 46px}
  .teaser-form{flex-direction:column;gap:9px}
  .teaser-form button{width:100%}
}

/* Screen-reader-only. Added 2026-08-09 (CMC) for the homepage h1: the selector
   page is a full-viewport 3-panel picker with nowhere to put a visible heading,
   but shipping with no h1 at all left crawlers and AI bots with no statement of
   what this site is. Clip-path + 1px box is the technique that stays readable to
   assistive tech; display:none and visibility:hidden would hide it from them
   too, and are also the versions Google treats as hidden text. */
.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ── FAQ (added 2026-08-09, CMC) ───────────────────────────────────────────
   Native <details>/<summary>: no JS, keyboard-operable for free, and the answer
   stays in the DOM while collapsed so crawlers and AI answer engines read it.
   The default disclosure triangle is removed on both engines (::-webkit-details-
   marker for Safari/iOS, list-style for the standards path) and replaced with a
   drawn +/− that rotates, so the control matches the rest of the page. */
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 34px;align-items:start}
.faq-item{border-bottom:1px solid rgba(22,19,15,.12)}
.faq-item summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  list-style:none;cursor:pointer;padding:20px 0;
  transition:color .25s ease;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary h4{
  font-size:clamp(1rem,1.35vw,1.12rem);font-weight:700;letter-spacing:-.01em;line-height:1.35;margin:0;
}
.faq-item summary:hover h4{color:var(--clay-deep)}
.faq-item summary::after{
  content:"";flex:0 0 auto;position:relative;top:6px;width:13px;height:13px;
  background:
    linear-gradient(var(--clay),var(--clay)) center/13px 2px no-repeat,
    linear-gradient(var(--clay),var(--clay)) center/2px 13px no-repeat;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.faq-item[open] summary::after{transform:rotate(135deg)}
.faq-item[open] summary h4{color:var(--clay-deep)}
.faq-item > p{
  margin:0;padding:0 44px 24px 0;max-width:62ch;
  color:var(--muted);font-size:.95rem;line-height:1.7;
}
.faq-item > p a{color:var(--clay-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* One column below the two-column breakpoint the rest of the page uses. */
@media (max-width:900px){
  .faq-grid{grid-template-columns:1fr;gap:0}
  .faq-item > p{padding-right:0}
}

/* The rotate/height transitions are decoration, not information. */
@media (prefers-reduced-motion:reduce){
  .faq-item summary::after{transition:none}
}

/* Group headers, added 2026-08-09 when the FAQ went from 10 hand-picked
   questions to all 32 from the client's document. Thirty-two flat rows is a
   wall; six labelled groups is a thing you scan. The label is quiet on purpose
   — it orients, it does not compete with the section title above it. */
.faq-group{
  grid-column:1/-1;
  margin:44px 0 6px;
  font-size:.72rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--clay-deep);
}
.faq-group:first-of-type{margin-top:0}
@media (max-width:900px){
  .faq-group{margin:34px 0 2px}
}

/* ── GUIDE PAGES (added 2026-08-09, CMC) ──────────────────────────────────
   surf-uluwatu · airport-to-uluwatu · things-to-do-uluwatu.
   Long-form reading, not a landing page: one measured column, generous line
   height, and NO scroll-jacking or reveal animations. A traveller reading this
   on airport wifi wants the text, immediately. */
.guide-hero{
  padding:calc(var(--nav-h,74px) + 68px) 0 52px;
  background:var(--bone-2);
  border-bottom:1px solid rgba(22,19,15,.08);
}
.crumbs{font-size:.78rem;color:var(--muted);margin-bottom:26px}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--clay-deep);border-bottom-color:currentColor}
.crumbs span{margin:0 7px;opacity:.5}
.crumbs span[aria-current]{margin:0;opacity:1;color:var(--ink)}
.guide-hero h1{
  font-size:clamp(2.3rem,5.4vw,4.2rem);font-weight:800;letter-spacing:-.03em;line-height:.98;
  text-transform:uppercase;margin:14px 0 24px;
}
.guide-hero .lead{max-width:60ch;font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.65;color:var(--ink-2)}
.guide-hero .lead strong{color:var(--clay-deep)}

.guide-body{max-width:none}
.guide-body > h2{
  font-size:clamp(1.5rem,2.8vw,2.15rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;
  text-transform:uppercase;margin:56px 0 18px;max-width:24ch;
}
.guide-body > h2:first-child{margin-top:0}
.guide-body > p{max-width:66ch;line-height:1.75;color:var(--ink-2);margin:0 0 18px}
.guide-body > p a,.callout a,.brk a{color:var(--clay-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.guide-body .stamp{font-size:.85rem;color:var(--muted);font-style:italic;max-width:66ch}

/* Transport options / any "one block per choice" list */
.opt{
  max-width:66ch;padding:26px 0;border-top:1px solid rgba(22,19,15,.12);
}
.opt h3{font-size:1.15rem;font-weight:700;margin:0 0 10px}
.opt p{line-height:1.7;color:var(--ink-2);margin:0 0 10px}
.opt .note{font-size:.9rem;color:var(--muted)}

/* Surf breaks */
.break-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:30px 0 10px}
.brk{background:var(--bone-2);border-radius:16px;padding:24px}
.brk-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brk-top h3{font-size:1.1rem;font-weight:800;margin:0}
.brk-dist{font-size:.78rem;color:var(--muted);white-space:nowrap}
.brk-lvl{
  display:inline-block;margin:12px 0 12px;padding:4px 12px;border-radius:999px;
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.lvl-easy{background:rgba(62,92,75,.14);color:var(--palm)}
.lvl-mid{background:rgba(217,164,65,.2);color:#8a6410}
.lvl-hard{background:rgba(196,105,67,.16);color:var(--clay-deep)}
.brk p:last-child{margin:0;font-size:.94rem;line-height:1.65;color:var(--ink-2)}

/* Pull-out box */
.callout{
  max-width:66ch;margin:34px 0;padding:28px 30px;border-radius:18px;
  background:var(--bone-2);border-left:4px solid var(--clay);
}
.callout.warn{border-left-color:var(--gold)}
.callout h3{font-size:1.08rem;font-weight:800;margin:0 0 12px}
.callout p{line-height:1.7;color:var(--ink-2);margin:0 0 12px}
.callout p:last-child{margin:0}
.callout .stamp{font-size:.85rem;color:var(--muted);font-style:italic}

.guide-cta{
  margin:60px 0 34px;padding:38px 34px;border-radius:20px;
  background:var(--ink);color:var(--bone);
}
.guide-cta h3{font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:800;letter-spacing:-.02em;margin:0 0 12px;text-transform:uppercase}
.guide-cta p{max-width:52ch;line-height:1.65;color:rgba(245,240,230,.78);margin:0 0 22px}
.guide-cta-btns{display:flex;gap:14px;flex-wrap:wrap}
.guide-cta .btn-ghost{color:var(--bone)}

.guide-next{font-size:.92rem;color:var(--muted);max-width:66ch}

@media (max-width:700px){
  .guide-hero{padding-top:calc(var(--nav-h,74px) + 44px)}
  .guide-cta{padding:30px 24px}
  .callout{padding:24px 22px}
}

/* Guide cards on the Uluwatu page (added 2026-08-09). */
.guide-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
.gcard{
  display:block;background:var(--bone);border-radius:18px;padding:30px 28px 26px;
  text-decoration:none;color:inherit;
  transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s ease;
}
.gcard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(22,19,15,.10)}
.gc-eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--clay-deep)}
.gcard h3{font-size:1.22rem;font-weight:800;letter-spacing:-.015em;line-height:1.2;margin:14px 0 12px}
.gcard p{font-size:.94rem;line-height:1.65;color:var(--muted);margin:0 0 20px}
.gc-go{font-size:.82rem;font-weight:700;letter-spacing:.04em;color:var(--clay-deep)}
@media (prefers-reduced-motion:reduce){.gcard{transition:none}.gcard:hover{transform:none}}

/* Attribution link under the review cards (added 2026-08-09). Only rendered
   when live Google reviews actually replaced the fallback cards. */
.reviews-more{
  display:inline-block;margin-top:26px;
  font-size:.86rem;font-weight:700;color:var(--clay-deep);
  text-decoration:underline;text-underline-offset:4px;
}
.reviews-more:hover{color:var(--ink)}

/* The footer legal row (.footer-legal: registered name, address, business
   phone for Meta's business verification, 2026-08-10) was removed on Janice's
   order 2026-08-19 once verification read `verified`; the Privacy Policy link
   now lives in .footer-note. Legal identity: privacy.html + Organization JSON-LD. */

/* The home page's bottom .legal-bar (Privacy link + "Manage or cancel" pill) was
   removed on Lorena's order 2026-09-27: nothing sits on top of the three panels. */

/* ---- What's On tabs + embedded FAQ + circular logo (Janice batch 2026-08-10) ---- */
.ev-tabs{display:flex;gap:10px;margin:4px 0 30px;flex-wrap:wrap}
.ev-tab{font-family:inherit;font-weight:800;letter-spacing:.18em;text-transform:uppercase;font-size:.7rem;
  color:var(--bone);background:transparent;border:1px solid rgba(245,240,230,.28);border-radius:100px;
  padding:11px 24px;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease}
.ev-tab:hover{border-color:var(--gold);color:var(--gold)}
.ev-tab.is-on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.ev-tab.is-on:hover{color:var(--ink)}
.ev-pane[hidden]{display:none}
.events .faq-head{margin-bottom:20px}
.events .faq-note{max-width:52ch;color:rgba(245,240,230,.6);font-size:.95rem;margin-top:10px}
.events .faq-embed .faq-group{color:var(--gold)}
.events .faq-embed .faq-item{border-bottom-color:rgba(245,240,230,.14)}
.events .faq-embed .faq-item summary h4{color:var(--bone)}
.events .faq-embed .faq-item summary:hover h4,
.events .faq-embed .faq-item[open] summary h4{color:var(--gold)}
.events .faq-embed .faq-item summary::after{
  background:
    linear-gradient(var(--gold),var(--gold)) center/13px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) center/2px 13px no-repeat;
}
.events .faq-embed .faq-item > p{color:rgba(245,240,230,.72)}
.events .faq-embed .faq-item > p a{color:var(--gold)}
/* circular badge logo replaces the head icon + text lockup */
.nav-mark .brand-head{height:46px}
.footer .mark .brand-head{height:64px}
.selector-brand .mark .brand-head{height:48px}

/* ============================================================
   FLYERS (2026-08-19) — Janice's daily deck + deals wall.
   Everything is usable with no JS and no motion: the deck is a
   scroll-snap row, the wall is tilted paper; app.js adds the drift.
   ============================================================ */
/* --- week deck (inside #whats-on, ink background) ---
   Not a native scroller: .wk-track clips, .wk-slider is translated by JS.
   touch-action:pan-y = the page always owns vertical gestures; horizontal
   drag/wheel move the deck. (A nested overflow-x scroller with scroll-snap
   trapped vertical swipes on Safari/iOS, 2026-08-19.) */
.wk{margin:0 0 clamp(34px,5vw,56px);--wk-w:clamp(190px,21vw,270px);--wk-gap:clamp(12px,1.8vw,22px)}
.wk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:6px}
.wk-kicker{color:rgba(245,240,230,.6);font-size:.95rem;max-width:46ch;line-height:1.5}
.wk-nav{display:flex;gap:8px;flex:0 0 auto}
.wk-arrow{width:44px;height:44px;border-radius:50%;border:1px solid rgba(245,240,230,.28);background:transparent;color:var(--bone);
  font:inherit;font-size:1.1rem;cursor:pointer;transition:border-color .3s,color .3s,transform .3s var(--ease)}
.wk-arrow:hover{border-color:var(--gold);color:var(--gold);transform:scale(1.06)}
.wk-track{position:relative;overflow:hidden;padding:16px 0 20px;touch-action:pan-y pinch-zoom;cursor:grab;
  user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.wk-track.is-dragging{cursor:grabbing}
.wk-track:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:12px}
.wk-slider{position:relative;display:flex;gap:var(--wk-gap);width:max-content;will-change:transform;
  transition:transform .6s var(--ease)}
.wk-track.is-dragging .wk-slider,.wk-track.no-anim .wk-slider{transition:none}
.wk-card{position:relative;flex:0 0 var(--wk-w);width:var(--wk-w);aspect-ratio:9/16;border:0;padding:0;background:var(--ink-2);
  border-radius:18px;overflow:hidden;cursor:pointer;-webkit-user-drag:none;
  transform:scale(.9);opacity:.55;box-shadow:0 18px 40px -22px rgba(0,0,0,.7);
  transition:transform .6s var(--ease),opacity .6s var(--ease),box-shadow .6s var(--ease)}
.wk-card img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.wk-card.is-active{transform:scale(1);opacity:1;box-shadow:0 34px 70px -24px rgba(0,0,0,.8)}
.wk-card:hover{opacity:1}
.wk-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wk-card .wk-today{position:absolute;top:12px;left:12px;z-index:2}
.wk-card .wk-today .ev-tag{box-shadow:0 6px 18px -6px rgba(0,0,0,.6);background:rgba(22,19,15,.72);backdrop-filter:blur(6px)}
.wk-dots{display:flex;justify-content:center;gap:8px;margin-top:4px;flex-wrap:wrap}
.wk-dots button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(245,240,230,.2);background:transparent;color:rgba(245,240,230,.6);
  font:inherit;font-weight:800;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  transition:background .3s,border-color .3s,color .3s,transform .3s var(--ease)}
.wk-dots button:hover{border-color:var(--gold);color:var(--gold)}
.wk-dots button.is-on{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:scale(1.08)}
@media (max-width:900px){
  .wk{--wk-w:70vw;--wk-gap:14px}
  .wk-head{flex-direction:column;align-items:flex-start;gap:12px}
  .wk-kicker{font-size:.9rem}
  .wk-track{margin-inline:calc(-1 * clamp(20px,4vw,48px));-webkit-mask-image:none;mask-image:none}
  .wk-dots button{width:34px;height:34px;font-size:.62rem}
}
@media (prefers-reduced-motion:reduce){
  .wk-card,.wk-arrow,.wk-dots button,.wk-slider{transition:none}
  .wk-card{transform:none;opacity:1}
}

/* --- deals wall (own section, bone-2 background) --- */
.deals{background:var(--bone-2);overflow:hidden}
.deals-note{color:var(--muted);font-size:.95rem;max-width:34ch;line-height:1.5}
.deals-wall{display:flex;justify-content:center;align-items:flex-end;margin-top:clamp(10px,3vw,30px);padding:30px 0 40px;--dw:clamp(160px,16.2vw,236px)}
.deal{position:relative;flex:0 0 var(--dw);width:var(--dw);margin-inline:-6px}
.deal:nth-child(even){margin-bottom:34px}
.deal:hover{z-index:5}
.deal-tilt{transform:rotate(var(--rot,0deg));transition:transform .6s var(--ease)}
.deal:hover .deal-tilt{transform:rotate(0deg) translateY(-16px) scale(1.07)}
.deal-inner{display:block;width:100%;aspect-ratio:9/16;border:0;padding:0;background:var(--sand);border-radius:14px;overflow:hidden;cursor:pointer;
  box-shadow:0 26px 54px -24px rgba(22,19,15,.5);transition:box-shadow .6s var(--ease)}
.deal:hover .deal-inner{box-shadow:0 44px 90px -26px rgba(22,19,15,.6)}
.deal-inner:focus-visible{outline:2px solid var(--clay);outline-offset:4px}
.deal-inner img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  /* 2-column tilted grid: every poster fully visible, nothing to swipe, the
     page owns the gesture. The 5th sits centred on its own row. */
  .deals-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;align-items:start;justify-items:stretch;
    --dw:100%;margin-top:0;padding:16px 0 10px}
  .deal{width:100%;margin-inline:0}
  .deal:nth-child(even){margin-bottom:0;margin-top:30px}
  .deal:last-child:nth-child(odd){grid-column:1 / -1;width:calc(50% - 7px);justify-self:center;margin-top:0}
  .deal-tilt{transform:rotate(calc(var(--rot,0deg) * .55))}
}
}
@media (prefers-reduced-motion:reduce){
  .deal-tilt,.deal-inner{transition:none}
  .deal:hover .deal-tilt{transform:rotate(var(--rot,0deg))}
}

/* --- shared lightbox --- */
.lb{position:fixed;inset:0;z-index:2000;background:rgba(22,19,15,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;
  /* the modal owns scroll input while open (app.js cancels wheel/touch/keys on it);
     html is overflow-x:clip here, so a body{overflow:hidden} lock never reached the viewport */
  overscroll-behavior:contain;touch-action:none}
.lb[hidden]{display:none}
.lb-img{display:block;max-height:92vh;max-width:min(92vw,calc(92vh * 9 / 16));width:auto;height:auto;border-radius:16px;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.85);cursor:default;animation:lbIn .38s var(--ease)}
.lb-x{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));right:calc(18px + env(safe-area-inset-right,0px));width:46px;height:46px;border-radius:50%;border:1px solid rgba(245,240,230,.3);
  background:rgba(245,240,230,.08);color:var(--bone);font:inherit;font-size:1.7rem;line-height:1;cursor:pointer;transition:background .3s,color .3s}
.lb-x:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
@keyframes lbIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lb-img{animation:none}}

/* ---------- 10% direct-booking unlock card (booking.html, 2026-09-01) ---------- */
.dc-card{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:center;background:var(--ink);color:var(--bone);
  border-radius:24px;padding:30px 34px;margin-bottom:26px;position:relative;overflow:hidden}
.dc-card::after{content:'10%';position:absolute;right:-14px;bottom:-42px;font-size:9rem;font-weight:900;letter-spacing:-.05em;
  color:rgba(217,164,65,.09);pointer-events:none;line-height:1}
.dc-eyebrow{font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.dc-card h3{font-size:clamp(1.25rem,2.6vw,1.7rem);font-weight:800;line-height:1.2;letter-spacing:-.01em}
.dc-card h3 em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--gold)}
.dc-card p{font-size:.88rem;line-height:1.65;color:rgba(245,240,230,.72);margin-top:10px}
.dc-fields{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-bottom:10px}
/* Selected by WHERE the field lives, not by its type. The old rule listed
   text+email only, so the WhatsApp field (type=tel, added 2026-09-01) fell
   through to the browser default and rendered as a white box with an almost
   invisible placeholder — Lorena spotted it 2026-09-04. Enumerating types rots
   the moment a field is added; .dc-fields holds exactly the visible inputs
   (the honeypot #dc-bot and the consent checkbox both live outside it). */
.dc-card .dc-fields input{width:100%;border:1.5px solid rgba(245,240,230,.22);border-radius:100px;
  padding:12px 18px;font:inherit;font-size:.88rem;background:rgba(245,240,230,.07);color:var(--bone)}
.dc-card input::placeholder{color:rgba(245,240,230,.45)}
.dc-card input:focus{outline:none;border-color:var(--gold)}
#dc-bot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#dc-btn{width:100%;justify-content:center;padding:13px 20px}
.dc-err{display:none;color:#F2A08C;font-size:.8rem;font-weight:600;margin-top:8px}
.dc-fine{font-size:.7rem!important;color:rgba(245,240,230,.45)!important;margin-top:10px!important;line-height:1.6!important}
.dc-fine a{color:rgba(245,240,230,.65);text-decoration:underline}
.dc-code-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#dc-code{font-size:clamp(1.6rem,3.4vw,2.1rem);font-weight:900;letter-spacing:.14em;color:var(--gold);
  border:2px dashed rgba(217,164,65,.5);border-radius:16px;padding:10px 22px;font-variant-numeric:tabular-nums}
.dc-copy-btn{border:1.5px solid rgba(245,240,230,.3);background:transparent;color:var(--bone);font:inherit;font-weight:700;
  font-size:.8rem;border-radius:100px;padding:10px 18px;cursor:pointer;transition:background .25s,color .25s}
.dc-copy-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.dc-done-note{font-size:.84rem!important}
/* A code that has already been spent must LOOK spent — it used to re-open the
   same gold card, which reads as a second discount (Janice 2026-09-07). */
#dc-done.is-spent #dc-code{color:rgba(245,240,230,.42);text-decoration:line-through;text-decoration-thickness:2px}
#dc-done.is-spent .dc-done-note{color:#E8B4A0!important}
.dc-slide #dcp-done.is-spent .dc-code{color:rgba(245,240,230,.42);text-decoration:line-through;text-decoration-thickness:2px}
@media(max-width:820px){
  .dc-card{grid-template-columns:1fr;gap:18px;padding:24px 20px}
  .dc-fields{grid-template-columns:1fr}
  .dc-card::after{font-size:6.5rem;bottom:-30px}
}

/* strip on location pages pointing at the unlock (uluwatu.html) */
.dc-strip{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center;
  background:linear-gradient(90deg,rgba(217,164,65,.14),rgba(196,105,67,.14));border:1px solid rgba(196,105,67,.25);
  border-radius:100px;padding:12px 22px;margin:18px auto 0;max-width:640px;font-size:.86rem;font-weight:600}
.dc-strip a{color:var(--clay);font-weight:800;white-space:nowrap}

/* ---------- Life at the Lama carousel (.lg, 2026-09-01 — replaces the dive pin) ---------- */
.lg-sec{background:var(--ink);color:var(--bone);padding-bottom:110px;overflow:hidden}
.lg{margin-top:8px}
.lg-track{overflow:hidden;touch-action:pan-y;cursor:grab;outline:none;padding:10px 0 4px}
.lg-track:active{cursor:grabbing}
.lg-slider{display:flex;gap:18px;will-change:transform;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.lg-card{position:relative;flex:0 0 auto;width:min(74vw,520px);aspect-ratio:4/3;border:0;padding:0;border-radius:22px;overflow:hidden;
  background:#221D16;cursor:pointer;opacity:.55;transform:scale(.94);transition:opacity .4s,transform .4s}
.lg-card.is-on{opacity:1;transform:none}
.lg-card img{width:100%;height:100%;object-fit:cover;display:block}
.lg-cap{position:absolute;left:14px;bottom:14px;background:rgba(22,19,15,.72);backdrop-filter:blur(6px);color:var(--bone);
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:100px;pointer-events:none}
.lg-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px}
.lg-arrow{width:46px;height:46px;border-radius:50%;border:1px solid rgba(245,240,230,.28);background:transparent;color:var(--bone);
  font:inherit;font-size:1.1rem;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.lg-arrow:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.lg-dots{display:flex;gap:8px}
.lg-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(245,240,230,.25);cursor:pointer;transition:background .3s,transform .3s}
.lg-dots button.on{background:var(--gold);transform:scale(1.35)}
@media(max-width:700px){.lg-card{width:82vw}.lg-sec{padding-bottom:80px}}
@media (prefers-reduced-motion:reduce){.lg-slider{transition:none}.lg-card{transition:none}}

/* ---------- 10% unlock SLIDE-IN (2026-09-02) ----------
   Replaces the centre modal: Lorena asked for a panel that comes in from the
   side on its own, not a dialog that covers the page. No backdrop and no scroll
   lock — the guest keeps reading while it sits there. */
/* The honeypot is never seen by a human: visible, a guest could type in it and
   the server would treat them as a bot and silently drop the lead. */
.dc-slide input[name=bot-field],#dcp-bot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;padding:0!important;border:0!important}
/* Clear of the chat bubble (.lama-bot, 64px at bottom/right 20) — measured
   2026-09-02: both sat at bottom:20;right:20 and overlapped. */
.dc-slide{position:fixed;right:20px;bottom:100px;z-index:80;width:340px;max-width:calc(100vw - 32px);
  background:var(--ink);color:var(--bone);border-radius:20px;padding:22px 22px 20px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);border:1px solid rgba(217,164,65,.22);
  transform:translateX(calc(100% + 28px));opacity:0;visibility:hidden;
  transition:transform .5s cubic-bezier(.2,.9,.25,1),opacity .4s,visibility .5s}
.dc-slide.is-in{transform:none;opacity:1;visibility:visible}
.dc-slide h3{font-size:1.32rem;font-weight:800;line-height:1.15;letter-spacing:-.01em;margin:2px 0 0}
.dc-slide h3 em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--gold)}
.dc-slide p{font-size:.82rem;line-height:1.55;color:rgba(245,240,230,.7);margin:7px 0 0}
.dc-slide-eyebrow{font-size:.58rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.dc-slide form{margin-top:13px;display:grid;gap:8px}
.dc-slide input[type=text],.dc-slide input[type=email],.dc-slide input[type=tel]{
  width:100%;border:1.5px solid rgba(245,240,230,.2);border-radius:100px;padding:11px 17px;
  font:inherit;font-size:.85rem;background:rgba(245,240,230,.06);color:var(--bone)}
.dc-slide input::placeholder{color:rgba(245,240,230,.42)}
.dc-slide input:focus{outline:none;border-color:var(--gold)}
.dc-slide .btn{width:100%;justify-content:center;margin-top:3px}
.dc-slide-tick{display:flex;gap:9px;align-items:flex-start;font-size:.76rem;line-height:1.45;color:rgba(245,240,230,.72);cursor:pointer;margin:2px 0}
.dc-slide-tick input{appearance:none;-webkit-appearance:none;flex:none;width:19px;height:19px;margin-top:1px;
  border:1.5px solid rgba(245,240,230,.32);border-radius:6px;background:transparent;cursor:pointer;position:relative}
.dc-slide-tick input:checked{background:var(--gold);border-color:var(--gold)}
.dc-slide-tick input:checked::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.dc-slide-tick strong{color:var(--bone);font-weight:700}
.dc-slide-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(245,240,230,.22);background:transparent;color:var(--bone);font-size:1.15rem;line-height:1;
  cursor:pointer;transition:background .25s,color .25s}
.dc-slide-x:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.dc-slide .dc-err{color:#F0A58C;font-size:.76rem;font-weight:600;margin-top:8px;display:none}
.dc-slide .dc-code-row{display:flex;align-items:center;gap:10px;margin:10px 0 0;flex-wrap:wrap}
.dc-slide .dc-code{font-size:1.15rem;font-weight:900;letter-spacing:.1em;color:var(--gold);
  border:2px dashed rgba(217,164,65,.5);border-radius:12px;padding:8px 14px}
.dc-slide .dc-copy-btn{border:1px solid rgba(245,240,230,.25);background:transparent;color:var(--bone);
  border-radius:100px;font:inherit;font-weight:700;font-size:.74rem;padding:7px 14px;cursor:pointer}
.dc-slide .hidden{display:none}
/* Phones: a side panel would be the whole screen anyway — come up from the
   bottom instead, clear of the chat bubble. */
@media(max-width:640px){
  .dc-slide{right:12px;left:12px;bottom:94px;width:auto;max-width:none;padding:20px 18px 18px;
    transform:translateY(calc(100% + 20px))}
  .dc-slide.is-in{transform:none}
  .dc-slide h3{font-size:1.22rem}
}
@media (prefers-reduced-motion:reduce){ .dc-slide{transition:opacity .2s,visibility .2s} }

/* ---------- consent ticks on the 10% form (2026-09-02, mirrors /signin) ---------- */
.dc-ticks{display:grid;gap:10px;margin:4px 0 12px}
.dc-tick{display:flex;gap:10px;align-items:flex-start;font-size:.78rem;line-height:1.55;color:rgba(245,240,230,.72);cursor:pointer}
.dc-tick input{appearance:none;-webkit-appearance:none;flex:none;width:19px;height:19px;margin-top:1px;border:1.5px solid rgba(245,240,230,.35);
  border-radius:6px;background:rgba(245,240,230,.06);cursor:pointer;position:relative;transition:background .2s,border-color .2s}
.dc-tick input:checked{background:var(--gold);border-color:var(--gold)}
.dc-tick input:checked::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.dc-tick strong{color:var(--bone);font-weight:700}
.dc-tick a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}

/* ── HOMEPAGE PROSE + LINK ROW (SEO plan 2026-09-05, P1) ──────────────────────
   The homepage is a full-viewport picker and the GBP landing page. It linked
   only to the three locations, so the strongest page on the site passed no
   equity to the pages built to rank. The hint carries one indexable sentence
   naming the entity and the place; the legal bar became a real link row. */

/* ── COMPARISON TABLE (best-hostels + padang-padang guides) ─────────────────── */
.cmp-wrap{overflow-x:auto;margin:26px 0 10px;border-radius:16px;background:var(--bone-2);box-shadow:0 1px 0 rgba(22,19,15,.06),0 10px 30px rgba(22,19,15,.06)}
.cmp{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px}
.cmp th,.cmp td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(22,19,15,.08)}
.cmp th{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
.cmp tr:last-child td{border-bottom:none}
.cmp td b{font-weight:800;color:var(--ink)}
.cmp .us td{background:linear-gradient(90deg,rgba(196,105,67,.10),rgba(196,105,67,.03))}
.cmp .num{white-space:nowrap;font-variant-numeric:tabular-nums}
.cmp small{display:block;color:var(--muted);font-size:.78rem;margin-top:2px}
.disclose{background:#FDF6E7;border-left:4px solid var(--gold);border-radius:8px;padding:16px 20px;margin:0 0 26px;font-size:.95rem;line-height:1.65;color:var(--ink-2)}
.disclose b{color:var(--ink)}
.answer{background:var(--bone-2);border-radius:16px;padding:22px 26px;margin:0 0 26px;line-height:1.7;color:var(--ink-2);max-width:none}
.answer b{color:var(--ink)}


/* The homepage carried extra bottom padding so an 8-link SEO row could not
   cover the panels. Both are gone (2026-09-07) — the row is back to "Privacy
   Policy" — so the panels get their own spacing back instead of being squeezed
   for a bar that no longer exists. */


/* ══ UI-COMPONENT-STANDARD polish layer (Lorena 2026-09-04: «PROHIBIDO el estilo plano»).
   Appended, not rewritten: the base rules above keep their layout, this layer
   adds the finish every control must have: gradient fill, top highlight,
   two-layer shadow, own border, the five states, .16s, 44px. Gate:
   python3 tools/ui-polish-audit.py assets/style.css ══ */
.btn{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02));border:1.5px solid currentColor;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(22,19,15,.10),0 8px 20px -12px rgba(22,19,15,.25);min-height:44px;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;}
.btn:hover:not(:disabled){filter:brightness(1.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 4px rgba(22,19,15,.12),0 12px 24px -12px rgba(22,19,15,.3);transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(22,19,15,.18),0 1px 1px rgba(22,19,15,.1);filter:none}
.btn:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.btn:disabled,.btn[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.btn-clay{background:linear-gradient(180deg,#D47C55 0%,var(--clay) 52%,#A8532F 100%);border:1px solid rgba(120,55,30,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 1px 2px rgba(22,19,15,.22),0 14px 34px -12px rgba(196,105,67,.65);min-height:44px;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;color:var(--white)}
.btn-clay:hover:not(:disabled){filter:brightness(1.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 2px 4px rgba(22,19,15,.24),0 18px 38px -12px rgba(196,105,67,.72);transform:translateY(-1px)}
.btn-clay:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(22,19,15,.28),0 1px 1px rgba(22,19,15,.18);filter:none}
.btn-clay:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.btn-clay:disabled,.btn-clay[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.btn-ink{background:linear-gradient(180deg,#332C24 0%,var(--ink) 100%);border:1px solid rgba(0,0,0,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(22,19,15,.3),0 14px 30px -12px rgba(22,19,15,.7);min-height:44px;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;color:var(--bone)}
.btn-ink:hover:not(:disabled){filter:brightness(1.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 4px rgba(22,19,15,.3),0 18px 34px -12px rgba(22,19,15,.75);transform:translateY(-1px)}
.btn-ink:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(0,0,0,.45),0 1px 1px rgba(22,19,15,.2);filter:none}
.btn-ink:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.btn-ink:disabled,.btn-ink[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.btn-ghost{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02));border:1.5px solid currentColor;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(22,19,15,.10),0 8px 20px -12px rgba(22,19,15,.25);min-height:44px;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;}
.btn-ghost:hover:not(:disabled){filter:brightness(1.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 4px rgba(22,19,15,.12),0 12px 24px -12px rgba(22,19,15,.3);transform:translateY(-1px)}
.btn-ghost:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(22,19,15,.18),0 1px 1px rgba(22,19,15,.1);filter:none}
.btn-ghost:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.btn-ghost:disabled,.btn-ghost[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.rev-loc button{background:linear-gradient(180deg,#FFFFFF 0%,#F6F0E3 100%);border:1px solid rgba(22,19,15,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(22,19,15,.08),0 8px 20px -12px rgba(22,19,15,.18);min-height:44px;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;}
.rev-loc button:hover:not(:disabled){filter:brightness(1.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(22,19,15,.10),0 12px 24px -12px rgba(22,19,15,.22);transform:translateY(-1px)}
.rev-loc button:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(22,19,15,.14),0 1px 1px rgba(22,19,15,.06);filter:none}
.rev-loc button:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.rev-loc button:disabled,.rev-loc button[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.rev-loc button.active{background:linear-gradient(180deg,#332C24,var(--ink));color:var(--bone);border-color:rgba(0,0,0,.55)}
.scale button{background:linear-gradient(180deg,#FFFFFF 0%,#F6F0E3 100%);border:1px solid rgba(22,19,15,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(22,19,15,.08),0 8px 20px -12px rgba(22,19,15,.18);min-height:44px;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;}
.scale button:hover:not(:disabled){filter:brightness(1.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(22,19,15,.10),0 12px 24px -12px rgba(22,19,15,.22);transform:translateY(-1px)}
.scale button:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(22,19,15,.14),0 1px 1px rgba(22,19,15,.06);filter:none}
.scale button:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.scale button:disabled,.scale button[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.scale button.on{background:linear-gradient(135deg,#D47C55,var(--clay) 50%,#A8532F);color:var(--white);border-color:rgba(120,55,30,.55)}
.lama-chips button{background:linear-gradient(180deg,#FFFFFF 0%,#F6F0E3 100%);border:1px solid rgba(22,19,15,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(22,19,15,.08),0 8px 20px -12px rgba(22,19,15,.18);min-height:44px;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;}
.lama-chips button:hover:not(:disabled){filter:brightness(1.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(22,19,15,.10),0 12px 24px -12px rgba(22,19,15,.22);transform:translateY(-1px)}
.lama-chips button:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(22,19,15,.14),0 1px 1px rgba(22,19,15,.06);filter:none}
.lama-chips button:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.lama-chips button:disabled,.lama-chips button[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.lama-chips button:hover:not(:disabled){background:linear-gradient(180deg,#332C24,var(--ink));color:var(--bone)}
.lama-input button{background:linear-gradient(180deg,#D47C55 0%,var(--clay) 52%,#A8532F 100%);border:1px solid rgba(120,55,30,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 1px 2px rgba(22,19,15,.22),0 14px 34px -12px rgba(196,105,67,.65);min-height:44px;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;min-width:46px}
.lama-input button:hover:not(:disabled){filter:brightness(1.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 2px 4px rgba(22,19,15,.24),0 18px 38px -12px rgba(196,105,67,.72);transform:translateY(-1px)}
.lama-input button:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(22,19,15,.28),0 1px 1px rgba(22,19,15,.18);filter:none}
.lama-input button:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.lama-input button:disabled,.lama-input button[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.teaser-form button{background:linear-gradient(180deg,#D47C55 0%,var(--clay) 52%,#A8532F 100%);border:1px solid rgba(120,55,30,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 1px 2px rgba(22,19,15,.22),0 14px 34px -12px rgba(196,105,67,.65);min-height:44px;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;}
.teaser-form button:hover:not(:disabled){filter:brightness(1.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 2px 4px rgba(22,19,15,.24),0 18px 38px -12px rgba(196,105,67,.72);transform:translateY(-1px)}
.teaser-form button:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(22,19,15,.28),0 1px 1px rgba(22,19,15,.18);filter:none}
.teaser-form button:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.teaser-form button:disabled,.teaser-form button[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.wk-dots button{background:linear-gradient(180deg,rgba(245,240,230,.14),rgba(245,240,230,.05));border:1px solid rgba(245,240,230,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.25),0 8px 20px -12px rgba(0,0,0,.5);min-height:44px;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;width:44px;height:44px}
.wk-dots button:hover:not(:disabled){filter:brightness(1.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 4px rgba(0,0,0,.28),0 12px 24px -12px rgba(0,0,0,.55);transform:translateY(-1px)}
.wk-dots button:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.2);filter:none}
.wk-dots button:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.wk-dots button:disabled,.wk-dots button[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.wk-dots button.is-on{background:linear-gradient(180deg,#E6B85E,var(--gold));border-color:var(--gold);color:var(--ink)}
.lg-dots{gap:0}
.lg-dots button{position:relative;width:44px;height:44px;min-height:44px;background:transparent;border:1px solid transparent;box-shadow:none;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.lg-dots button::after{content:'';position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background:linear-gradient(180deg,rgba(245,240,230,.45),rgba(245,240,230,.2));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.35);transition:transform .16s ease,background .16s ease}
.lg-dots button.on::after{background:linear-gradient(180deg,#E6B85E,var(--gold));transform:scale(1.35)}
.lg-dots button.on{transform:none}
.lg-dots button:hover:not(:disabled)::after{transform:scale(1.2)}
.lg-dots button:active:not(:disabled)::after{transform:scale(.9)}
.lg-dots button:focus-visible{outline:2px solid var(--gold);outline-offset:-6px;border-radius:50%}
.lg-dots button:disabled{opacity:.4}
.book-dates input{background:linear-gradient(180deg,#FFFFFF 0%,#F6F0E3 100%);border:1px solid rgba(22,19,15,.16);box-shadow:inset 0 1px 2px rgba(22,19,15,.10),inset 0 1px 0 rgba(255,255,255,.35),0 1px 0 rgba(255,255,255,.25);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;}
.book-dates input:hover:not(:disabled){filter:brightness(1.02);border-color:rgba(196,105,67,.55)}
.book-dates input:active:not(:disabled){filter:none}
.book-dates input:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.book-dates input:disabled,.book-dates input[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.book-dates select{background:linear-gradient(180deg,#FFFFFF 0%,#F6F0E3 100%);border:1px solid rgba(22,19,15,.16);box-shadow:inset 0 1px 2px rgba(22,19,15,.10),inset 0 1px 0 rgba(255,255,255,.35),0 1px 0 rgba(255,255,255,.25);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;}
.book-dates select:hover:not(:disabled){filter:brightness(1.02);border-color:rgba(196,105,67,.55)}
.book-dates select:active:not(:disabled){filter:none}
.book-dates select:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.book-dates select:disabled,.book-dates select[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.rev-comment textarea{background:linear-gradient(180deg,#FFFFFF 0%,#F6F0E3 100%);border:1px solid rgba(22,19,15,.16);box-shadow:inset 0 1px 2px rgba(22,19,15,.10),inset 0 1px 0 rgba(255,255,255,.35),0 1px 0 rgba(255,255,255,.25);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;}
.rev-comment textarea:hover:not(:disabled){filter:brightness(1.02);border-color:rgba(196,105,67,.55)}
.rev-comment textarea:active:not(:disabled){filter:none}
.rev-comment textarea:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.rev-comment textarea:disabled,.rev-comment textarea[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.rev-name input{background:linear-gradient(180deg,#FFFFFF 0%,#F6F0E3 100%);border:1px solid rgba(22,19,15,.16);box-shadow:inset 0 1px 2px rgba(22,19,15,.10),inset 0 1px 0 rgba(255,255,255,.35),0 1px 0 rgba(255,255,255,.25);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;}
.rev-name input:hover:not(:disabled){filter:brightness(1.02);border-color:rgba(196,105,67,.55)}
.rev-name input:active:not(:disabled){filter:none}
.rev-name input:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.rev-name input:disabled,.rev-name input[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.waitlist input{background:linear-gradient(180deg,rgba(245,240,230,.14),rgba(245,240,230,.05));border:1px solid rgba(245,240,230,.28);box-shadow:inset 0 1px 2px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.05);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;}
.waitlist input:hover:not(:disabled){filter:brightness(1.02);border-color:rgba(196,105,67,.55)}
.waitlist input:active:not(:disabled){filter:none}
.waitlist input:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.waitlist input:disabled,.waitlist input[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.waitlist-stack input{background:linear-gradient(180deg,rgba(245,240,230,.14),rgba(245,240,230,.05));border:1px solid rgba(245,240,230,.28);box-shadow:inset 0 1px 2px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.05);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;}
.waitlist-stack input:hover:not(:disabled){filter:brightness(1.02);border-color:rgba(196,105,67,.55)}
.waitlist-stack input:active:not(:disabled){filter:none}
.waitlist-stack input:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.waitlist-stack input:disabled,.waitlist-stack input[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.lama-input input{background:linear-gradient(180deg,#FFFFFF 0%,#F6F0E3 100%);border:1px solid rgba(22,19,15,.16);box-shadow:inset 0 1px 2px rgba(22,19,15,.10),inset 0 1px 0 rgba(255,255,255,.35),0 1px 0 rgba(255,255,255,.25);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;}
.lama-input input:hover:not(:disabled){filter:brightness(1.02);border-color:rgba(196,105,67,.55)}
.lama-input input:active:not(:disabled){filter:none}
.lama-input input:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.lama-input input:disabled,.lama-input input[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.teaser-form input{background:linear-gradient(180deg,rgba(245,240,230,.14),rgba(245,240,230,.05));border:1px solid rgba(245,240,230,.28);box-shadow:inset 0 1px 2px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.05);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;}
.teaser-form input:hover:not(:disabled){filter:brightness(1.02);border-color:rgba(196,105,67,.55)}
.teaser-form input:active:not(:disabled){filter:none}
.teaser-form input:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.teaser-form input:disabled,.teaser-form input[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.dc-fields input{background:linear-gradient(180deg,rgba(245,240,230,.14),rgba(245,240,230,.05));border:1px solid rgba(245,240,230,.28);box-shadow:inset 0 1px 2px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.05);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;}
.dc-fields input:hover:not(:disabled){filter:brightness(1.02);border-color:rgba(196,105,67,.55)}
.dc-fields input:active:not(:disabled){filter:none}
.dc-fields input:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.dc-fields input:disabled,.dc-fields input[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.dc-card input{background:linear-gradient(180deg,rgba(245,240,230,.14),rgba(245,240,230,.05));border:1px solid rgba(245,240,230,.28);box-shadow:inset 0 1px 2px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.05);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;}
.dc-card input:hover:not(:disabled){filter:brightness(1.02);border-color:rgba(196,105,67,.55)}
.dc-card input:active:not(:disabled){filter:none}
.dc-card input:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.dc-card input:disabled,.dc-card input[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.dc-slide input{background:linear-gradient(180deg,rgba(245,240,230,.14),rgba(245,240,230,.05));border:1px solid rgba(245,240,230,.28);box-shadow:inset 0 1px 2px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.05);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;}
.dc-slide input:hover:not(:disabled){filter:brightness(1.02);border-color:rgba(196,105,67,.55)}
.dc-slide input:active:not(:disabled){filter:none}
.dc-slide input:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.dc-slide input:disabled,.dc-slide input[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none;cursor:default}
.dc-tick input{background:linear-gradient(180deg,rgba(245,240,230,.16),rgba(245,240,230,.06));border:1.5px solid rgba(245,240,230,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 1px 2px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.05);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;position:relative}
.dc-tick input:checked{background:linear-gradient(180deg,#E6B85E,var(--gold));border-color:var(--gold)}
.dc-tick input:hover:not(:disabled){filter:brightness(1.08)}
.dc-tick input:active:not(:disabled){transform:scale(.94)}
.dc-tick input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dc-tick input:disabled{opacity:.45}
.dc-slide-tick input{background:linear-gradient(180deg,rgba(245,240,230,.16),rgba(245,240,230,.06));border:1.5px solid rgba(245,240,230,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 1px 2px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.05);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;position:relative}
.dc-slide-tick input:checked{background:linear-gradient(180deg,#E6B85E,var(--gold));border-color:var(--gold)}
.dc-slide-tick input:hover:not(:disabled){filter:brightness(1.08)}
.dc-slide-tick input:active:not(:disabled){transform:scale(.94)}
.dc-slide-tick input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dc-slide-tick input:disabled{opacity:.45}

/* ── specificity catch-ups: base rules with a typed/attribute selector or a
   parent chain outrank the plain component selector above, so the finish
   is restated at their own specificity (measured in the browser 2026-09-05:
   the discount panel's text inputs stayed solid). ── */
.dc-slide input[type=text],.dc-slide input[type=email],.dc-slide input[type=tel],.dc-card .dc-fields input{
  background:linear-gradient(180deg,rgba(245,240,230,.14),rgba(245,240,230,.05));border:1px solid rgba(245,240,230,.28);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.05);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease,border-color .16s ease}
.dc-slide input[type=text]:focus,.dc-slide input[type=email]:focus,.dc-slide input[type=tel]:focus,.dc-card .dc-fields input:focus{border-color:var(--gold);background:linear-gradient(180deg,rgba(245,240,230,.18),rgba(245,240,230,.08))}
/* hover fills that the base rules painted solid */
.btn-clay:hover:not(:disabled),.lama-input button:hover:not(:disabled),.teaser-form button:hover:not(:disabled){background:linear-gradient(180deg,#C46943 0%,#A8532F 60%,#8E4426 100%)}
.btn-ghost:hover:not(:disabled){background:linear-gradient(180deg,rgba(22,19,15,.10),rgba(22,19,15,.04))}
.btn-ink:hover:not(:disabled){background:linear-gradient(180deg,#3B342B 0%,#1E1A15 100%)}

/* ── Manage / cancel a direct booking (2026-09-23) ─────────────────────────── */
.mb-card{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;align-items:center;margin-bottom:26px;padding:26px 30px;border-radius:24px;
  background:linear-gradient(180deg,#FFFFFF,#F6F0E4);border:1px solid rgba(22,19,15,.09);color:var(--ink);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(22,19,15,.05),0 16px 36px -18px rgba(22,19,15,.28);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.mb-eyebrow{font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--clay);margin-bottom:8px}
.mb-card h3{font-size:clamp(1.2rem,2.4vw,1.55rem);font-weight:800;line-height:1.2;letter-spacing:-.01em}
.mb-card h3 em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--clay)}
.mb-card p{font-size:.86rem;line-height:1.6;color:var(--muted);margin-top:8px}
.mb-action{display:flex;gap:10px;align-items:stretch}
.mb-action input{flex:1;min-width:0;min-height:44px;padding:13px 18px;border-radius:100px;font:inherit;font-size:16px;color:var(--ink);
  border:1.5px solid var(--sand);background:linear-gradient(180deg,#F1EBDF,var(--bone));
  box-shadow:inset 0 1px 2px rgba(22,19,15,.08),0 1px 0 rgba(255,255,255,.7);
  transition:box-shadow .16s ease,border-color .16s ease,background .16s ease,transform .16s ease}
.mb-action input::placeholder{color:#9C8F79}
.mb-action input:hover{border-color:#CDBB9C}
.mb-action input:active{box-shadow:inset 0 2px 4px rgba(22,19,15,.13)}
.mb-action input:focus{outline:none;border-color:var(--clay)}
.mb-action input:focus-visible{outline:2px solid var(--clay);outline-offset:2px;border-color:var(--clay);box-shadow:inset 0 1px 2px rgba(22,19,15,.06),0 0 0 4px rgba(196,105,67,.12)}
.mb-action input:disabled{opacity:.45;box-shadow:none}
.mb-action .btn{white-space:nowrap;justify-content:center}
@media (max-width:720px){.mb-card{grid-template-columns:1fr;padding:22px 20px}.mb-action{flex-direction:column}.mb-action .btn{width:100%}}


/* ══ UBUD (2026-10-24) ══════════════════════════════════════════════════════
   ubud.html is built from Uluwatu's own components (hero, marquee, story,
   stats, rooms, book-band: the rules above) so the two pages match (Lorena
   2026-10-24: «mira el estilo de la de uluwatu, la idea es que hagan match»).
   This block only adds what Ubud needs on top: the photo buttons, the dark
   photo lane (.ug: its own engine, because app.js fills every .lg carousel with
   the team's Uluwatu uploads), the lockers band and the photo viewer.
   ONE motion idea (motion-website law): a curtain reveal on the photos as they
   scroll in, the picture settling inside its frame, and a viewer that grows out
   of the tapped photo. Mechanics from Lorena's component sources, rewritten
   here: Skiper UI «Image Reveal» (the clip-path curtain), UI Arc «Lightbox
   gallery» (Pro, the idea only: zoom from the slot). No pins, no ScrollTrigger
   of ours (this site's iPhone pin history, top of this file). Without JS every
   photo is simply visible: the hidden states live under html.ub-js.
   SIZING LAW: 16 of the 17 sources are 1024 px on the short side, so no slot
   paints them wider than their real width on a 2x screen; only the lockers band
   (Sony original, 5395 px) runs edge to edge. ══ */

/* hero form + story photo kept at the photo's real size */
.ub-hero-form{margin-top:26px}
.hero .teaser-note{margin-top:12px}
.ub-story{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.ub-story .story-media{max-width:460px;width:100%;justify-self:center}

/* a photo = a button that opens the viewer */
.ub-ph{position:relative;display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.ub-ph:focus-visible{outline:2px solid var(--clay);outline-offset:4px}
.ub-frame{position:relative;display:block;width:100%;height:100%;overflow:hidden}
.ub-frame img{width:100%;height:100%;object-fit:cover;scale:1.08}
.ub-cap{position:absolute;left:14px;bottom:14px;padding:7px 14px;border-radius:100px;pointer-events:none;
  background:rgba(22,19,15,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--bone);
  font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}

/* the curtain (only once the script runs; --d = this photo's turn in its batch) */
html.ub-js .ub-reveal .ub-frame{clip-path:inset(100% 0 0 0);transition:clip-path 1.15s cubic-bezier(.77,0,.18,1) var(--d,0ms)}
html.ub-js .ub-reveal .ub-frame img{scale:1.3;transition:scale 1.7s cubic-bezier(.22,1,.36,1) var(--d,0ms)}
html.ub-js .ub-reveal .ub-cap,html.ub-js .ub-reveal .ub-count{opacity:0;translate:0 10px;transition:opacity .5s ease calc(var(--d,0ms) + .75s),translate .5s var(--ease) calc(var(--d,0ms) + .75s)}
html.ub-js .ub-reveal.is-in .ub-frame{clip-path:inset(0 0 0 0)}
html.ub-js .ub-reveal.is-in .ub-frame img{scale:1.08}
html.ub-js .ub-reveal.is-in .ub-cap,html.ub-js .ub-reveal.is-in .ub-count{opacity:1;translate:0 0}
html.ub-js .ub-ph.is-done .ub-frame img{transition:scale .9s var(--ease)}
.ub-ph:hover .ub-frame img,html.ub-js .ub-ph.is-done:hover .ub-frame img{scale:1.14}

/* the drift inside each frame: CSS scroll-driven, only where supported, never with reduced motion */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .ub-frame img{animation:ubDrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes ubDrift{from{translate:0 -3.5%}to{translate:0 3.5%}}

/* room cards: Uluwatu's .room, with a photo button, a count and the room's other photos */
.ub-rooms .room-media{border-radius:0}
.ub-rooms .room-media img{transition:none}
.ub-count{position:absolute;right:14px;top:14px;padding:7px 13px;border-radius:100px;pointer-events:none;
  background:rgba(245,240,230,.94);color:var(--ink);font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 6px 18px -8px rgba(22,19,15,.45)}
.ub-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 18px}
.ub-thumb{position:relative;display:block;padding:0;border:0;border-radius:12px;overflow:hidden;aspect-ratio:1/1;cursor:zoom-in;background:var(--sand);
  box-shadow:inset 0 0 0 1px rgba(22,19,15,.08);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.ub-thumb img{width:100%;height:100%;object-fit:cover;transition:scale .6s var(--ease)}
.ub-thumb:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(22,19,15,.08),0 10px 22px -12px rgba(22,19,15,.45)}
.ub-thumb:hover img{scale:1.08}
.ub-thumb:active{transform:translateY(1px)}
.ub-thumb:focus-visible{outline:2px solid var(--clay);outline-offset:2px}

/* the lockers: the one camera original, edge to edge, curtain opens from the middle */
.ub-band{position:relative;margin:0;color:var(--bone);background:var(--ink)}
.ub-band .ub-frame{height:min(84vh,780px);min-height:440px;background:var(--ink)}
.ub-band .ub-frame::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(22,19,15,.2) 0%,rgba(22,19,15,0) 36%,rgba(22,19,15,.84) 100%)}
html.ub-js .ub-band .ub-reveal .ub-frame{clip-path:inset(0 50% 0 50%);transition:clip-path 1.3s cubic-bezier(.77,0,.18,1)}
html.ub-js .ub-band .ub-reveal.is-in .ub-frame{clip-path:inset(0 0 0 0)}
.ub-band-copy{position:absolute;left:0;right:0;bottom:clamp(30px,6vh,70px);pointer-events:none}
.ub-band-eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.ub-band-title{font-size:clamp(2rem,5vw,4.2rem);font-weight:800;letter-spacing:-.03em;line-height:.96;text-transform:uppercase;margin-top:10px}
.ub-band-line{max-width:40ch;margin-top:12px;font-size:1.02rem;color:rgba(245,240,230,.86)}

/* the dark photo lane: Uluwatu's «Dive into the Lama» look, cards keep each photo's own shape */
.ug-sec{background:var(--ink);color:var(--bone);overflow:hidden}
.ug-sec .section-title{color:var(--bone)}
.ug-hint{max-width:32ch;color:rgba(245,240,230,.6);font-size:.92rem}
.ug{margin-top:4px}
.ug-track{overflow:hidden;touch-action:pan-y;cursor:grab;outline:none;padding:10px 0 6px}
.ug-track:active{cursor:grabbing}
.ug-track:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.ug-slider{display:flex;gap:18px;align-items:flex-end;will-change:transform;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ug-card{flex:0 0 auto;height:min(60vh,500px);width:auto;aspect-ratio:var(--ar);border-radius:22px;overflow:hidden;background:#221D16;
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 30px 60px -30px rgba(0,0,0,.85);opacity:.5;transform:scale(.95);transform-origin:bottom center;
  transition:opacity .45s ease,transform .45s var(--ease)}
.ug-card.is-on{opacity:1;transform:none}
.ug-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:26px}
.ug-progress{position:relative;width:min(240px,40vw);height:3px;border-radius:3px;background:rgba(245,240,230,.18);overflow:hidden}
.ug-progress i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--gold);transition:width .45s var(--ease)}
.ug-num{min-width:52px;text-align:center;font-size:.72rem;font-weight:800;letter-spacing:.14em;color:rgba(245,240,230,.7)}

/* closing band: Uluwatu's .book-band with the waitlist form */
.ub-book .teaser-form{margin:0 auto;max-width:520px}
.ub-book .teaser-note{margin-top:12px}
.ub-book .teaser-alt{margin-top:22px}
.ub-book .waitlist-done{margin:0 auto;max-width:520px}

/* ── the viewer (built by ubud-rooms.js; one instance) ── */
html.ubv-open{overflow:hidden}
.ubv{position:fixed;inset:0;z-index:2100;display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:var(--bone);overscroll-behavior:contain;touch-action:none}
.ubv[hidden]{display:none}
.ubv-bg{position:absolute;inset:0;background:rgba(16,13,10,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ubv-top{position:relative;display:flex;align-items:center;gap:14px;padding:calc(12px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-right,0px)) 8px calc(20px + env(safe-area-inset-left,0px))}
.ubv-room{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.ubv-count{font-size:.72rem;font-weight:700;letter-spacing:.14em;color:rgba(245,240,230,.58);margin-right:auto}
.ubv-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;height:100%;padding:6px clamp(12px,5vw,80px);overflow:hidden}
.ubv-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:14px;box-shadow:0 40px 100px -20px rgba(0,0,0,.85);
  user-select:none;-webkit-user-select:none;-webkit-user-drag:none;transform-origin:center center}
.ubv-foot{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;padding:10px 18px calc(16px + env(safe-area-inset-bottom,0px))}
.ubv-cap{min-width:13ch;text-align:center;font-family:var(--font-s);font-style:italic;font-size:1.06rem;color:rgba(245,240,230,.9)}
/* round controls on dark (viewer + photo lane) — UI-COMPONENT-STANDARD finish */
.btn-ubv{display:grid;place-items:center;width:48px;height:48px;min-height:44px;border-radius:50%;color:var(--bone);font:inherit;font-size:1.25rem;line-height:1;cursor:pointer;
  background:linear-gradient(180deg,rgba(245,240,230,.16) 0%,rgba(245,240,230,.05) 100%);border:1px solid rgba(245,240,230,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.35),0 10px 24px -12px rgba(0,0,0,.7);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease,color .16s ease}
.btn-ubv:hover:not(:disabled){filter:brightness(1.08);background:linear-gradient(180deg,#E3B45A 0%,var(--gold) 100%);color:var(--ink);border-color:rgba(120,85,20,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 4px rgba(0,0,0,.35),0 14px 28px -12px rgba(0,0,0,.75);transform:translateY(-1px)}
.btn-ubv:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(0,0,0,.45),0 1px 1px rgba(0,0,0,.3);filter:none}
.btn-ubv:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn-ubv:disabled{opacity:.35;box-shadow:none;transform:none;filter:none;cursor:default}
.btn-ubv svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:900px){
  .ub-story{grid-template-columns:1fr}
}
@media (max-width:700px){
  .ug-card{height:min(46vh,340px);border-radius:18px}
  .ug-card .ub-cap{left:10px;bottom:10px;padding:6px 11px;font-size:.58rem}
  .ug-slider{gap:12px}
  .ub-band .ub-frame{height:72vh;min-height:420px}
  .ub-book .teaser-form{flex-direction:column;gap:9px}
  .ub-book .teaser-form button{width:100%}
  .ub-hero-form button,.ub-book .teaser-form button{justify-content:center}
  .ubv-stage{padding:4px 10px}
}
@media (prefers-reduced-motion:reduce){
  html.ub-js .ub-reveal .ub-frame,html.ub-js .ub-band .ub-reveal .ub-frame{clip-path:none!important;transition:none!important}
  html.ub-js .ub-reveal .ub-frame img{scale:1.08;transition:none!important}
  html.ub-js .ub-reveal .ub-cap,html.ub-js .ub-reveal .ub-count{opacity:1;translate:none;transition:none}
  .ug-slider,.ug-card{transition:none}
}

/* ═══ ULUWATU → UBUD (2026-10-28, Lorena: «en la página de uluwatu vamos a poner que vamos a abrir ubud»)
   Hero card + the #ubud-soon dark photo band on uluwatu.html; both go to ubud.html#notify.
   The card replaced the glass pill the same day (Lorena: «no está llamativo, no se ve como un evento súper
   importante» → picked option «D · Tarjeta con foto»): cream card with the real Ubud photo; in the flow on
   phones, floating beside the hero title (tilted, slides in) from 1280 px, where the title leaves room (≥40 px).
   Bench: tools/test-lama-ubud-halloween.mjs ═══ */
.ub-card{display:flex;align-items:center;gap:14px;max-width:460px;margin:0 0 20px;padding:8px 14px 8px 8px;border-radius:24px;color:var(--ink);text-decoration:none;
  background:linear-gradient(180deg,#FFFDF8 0%,#F2EADB 100%);border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.3),0 26px 50px -18px rgba(0,0,0,.8);transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.ub-card-pic{flex:none;width:96px;height:96px;border-radius:18px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.ub-card-pic img{display:block;width:100%;height:100%;object-fit:cover}
.ub-card-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.ub-card-top{display:flex;align-items:center;gap:8px}
.ub-card-new{display:inline-grid;place-items:center;min-height:24px;padding:0 9px;border-radius:999px;background:linear-gradient(180deg,var(--clay),var(--clay-deep));border:1px solid rgba(110,45,20,.5);color:var(--bone);font-weight:800;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.ub-card-eyebrow{font-size:.66rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ub-card-title{font-size:1.32rem;font-weight:800;line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.ub-card-title em{font-family:var(--font-s);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;color:var(--clay-deep)}
.ub-card-cta{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:700;color:var(--clay-deep)}
.ub-card:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(0,0,0,.3),0 32px 60px -18px rgba(0,0,0,.85)}
.ub-card:active{transform:translateY(1px);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.3),0 12px 24px -14px rgba(0,0,0,.7)}
.ub-card:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.ub-card[aria-disabled="true"]{opacity:.5;pointer-events:none}
@media (min-width:1280px){
  .ub-card{position:absolute;right:0;bottom:clamp(120px,17vh,170px);z-index:3;flex-direction:column;align-items:stretch;gap:0;width:316px;max-width:none;margin:0;padding:8px;border-radius:26px;transform:rotate(-2.5deg);animation:ub-card-in .9s var(--ease) 1.2s backwards}
  .ub-card-pic{width:100%;height:auto;aspect-ratio:3/2;border-radius:20px}
  .ub-card-body{gap:8px;padding:14px 10px 10px}
  .ub-card-title{font-size:1.75rem}
  .ub-card-cta{margin-top:4px;justify-content:center;min-height:46px;border-radius:999px;color:var(--bone);background:linear-gradient(180deg,#CB7149,var(--clay) 45%,var(--clay-deep));box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 10px -4px rgba(110,45,20,.6)}
  .ub-card:hover{transform:rotate(0deg) translateY(-4px)}
  .ub-card:active{transform:rotate(0deg) translateY(1px)}
}
@keyframes ub-card-in{from{opacity:0;transform:rotate(-2.5deg) translateY(26px)}to{opacity:1;transform:rotate(-2.5deg) translateY(0)}}
@media (prefers-reduced-motion:reduce){.ub-card{animation:none}}

.ub-soon{position:relative;overflow:hidden;background:var(--ink);color:var(--bone);padding:clamp(76px,12vh,132px) 0 clamp(96px,14vh,150px)}
.ub-soon-bg{position:absolute;inset:0;background-size:cover;background-position:center 46%;opacity:.26}
.ub-soon::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(22,19,15,.94) 0%,rgba(22,19,15,.66) 52%,rgba(22,19,15,.3) 100%)}
.ub-soon-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:clamp(30px,5vw,76px);align-items:center}
.ub-soon-title{margin:14px 0 0;font-size:clamp(2.3rem,5.4vw,4.7rem);font-weight:800;letter-spacing:-.03em;line-height:.96;text-transform:uppercase;text-wrap:balance}
.ub-soon-title em{font-family:var(--font-s);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;color:var(--gold)}
.ub-soon-copy p{margin:20px 0 0;max-width:44ch;color:rgba(245,240,230,.86);font-size:1.05rem;line-height:1.6}
.ub-soon-chips{list-style:none;margin:22px 0 30px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ub-soon-chips li{padding:9px 14px;border-radius:999px;border:1px solid rgba(245,240,230,.22);background:linear-gradient(180deg,rgba(245,240,230,.09),rgba(245,240,230,.03));font-size:.86rem;font-weight:600;color:rgba(245,240,230,.94)}
.ub-soon-cta{font-size:.9rem;padding:17px 34px}
.ub-soon-media{position:relative;display:block;margin:0 0 0 6%;border-radius:var(--radius-lg);outline-offset:6px}
.ub-soon-media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);transition:transform .5s var(--ease)}
.ub-soon-media:hover img:first-child{transform:scale(1.015)}
.ub-soon-media:focus-visible{outline:2px solid var(--gold)}
.ub-soon-media .ub-soon-float{position:absolute;left:-12%;bottom:-16%;width:46%;border-radius:var(--radius);border:6px solid var(--ink);transform:rotate(-4deg)}
@media (max-width:860px){
  .ub-soon-grid{grid-template-columns:minmax(0,1fr)}
  .ub-soon::after{background:linear-gradient(180deg,rgba(22,19,15,.9),rgba(22,19,15,.72))}
  .ub-soon-media{margin:6px 0 34px 10%}
  .ub-soon-media .ub-soon-float{left:-11%;bottom:-18%;width:48%;border-width:5px}
}