/* ═══════════════════════════════════════════════════════
   THE TAG HOTEL — style.css
   Tokens → Reset → Layout → Nav → Pages → Components
═══════════════════════════════════════════════════════ */


/* ── TOKENS ─────────────────────────────────────────── */
:root {
  --g:    #0C2212;
  --gm:   #132D19;
  --gs:   #1A3820;
  --gl:   #224529;
  --gold: #C9A55A;
  --glt:  #DEC07A;
  --cr:   #F5EDD8;
  --mu:   rgba(245,237,216,.52);
  --wh:   #FAFAF8;
  --bd:   rgba(201,165,90,.18);
  --tl:   #00B5C6;
  --f1:   'Cormorant Garamond', Georgia, serif;
  --f2:   'DM Sans', system-ui, sans-serif;
  --r:    8px;
  --nav:  62px;
  --tab:  54px;
  --top:  calc(62px + 54px);
  --safe: env(safe-area-inset-bottom, 0px);
  --shadow: 0 8px 32px rgba(0,0,0,.35);
}


/* ── RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--f2);
  background: var(--g);
  color: var(--cr);
  overflow: hidden;
  height: 100svh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
button { font-family: var(--f2); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--f2); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ── LOADER ─────────────────────────────────────────── */
#loader {
  position: fixed; inset: 0;
  background: var(--g);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s ease, visibility .6s ease;
}
#loader.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.ld-wrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.ld-logo { width: 80px; height: 80px; object-fit: contain; }
#ld-fallback {
  display: none;
  width: 70px; height: 70px;
  background: var(--gold); border-radius: 12px;
  font-family: var(--f1); font-size: 2rem; font-weight: 400;
  color: var(--g); align-items: center; justify-content: center;
}
.ld-name {
  font-family: var(--f1); font-size: 1.7rem; font-weight: 300;
  letter-spacing: .2em; color: var(--wh);
}
.ld-name span { color: var(--gold); }
.ld-stars { color: var(--gold); letter-spacing: .3em; font-size: .9rem; }
.ld-bar { width: 180px; height: 2px; background: var(--bd); border-radius: 2px; overflow: hidden; }
.ld-progress {
  height: 100%; width: 0; background: var(--gold); border-radius: 2px;
  animation: ldFill 1.4s ease forwards .2s;
}
@keyframes ldFill { to { width: 100%; } }


/* ── TOP NAV ────────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav);
  background: rgba(12,34,18,.96);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bd);
  display: flex; align-items: center;
  padding: 0 1rem; gap: .75rem;
  z-index: 900;
}
.n-logo {
  display: flex; align-items: center; gap: .65rem;
  flex-shrink: 0;
}
.n-logo-img { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; }
.n-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.n-logo-text strong {
  font-family: var(--f1); font-size: 1.1rem; font-weight: 400;
  letter-spacing: .12em; color: var(--wh);
}
.n-logo-text strong span { color: var(--gold); }
.n-logo-text small {
  font-size: .56rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mu);
}
.n-wa {
  margin-left: auto;
  display: flex; align-items: center; gap: .4rem;
  background: #25D366; color: #fff;
  font-size: .75rem; font-weight: 600;
  padding: .45rem .9rem; border-radius: 100px;
  white-space: nowrap; transition: opacity .2s;
  -webkit-tap-highlight-color: transparent;
}
.n-wa:hover { opacity: .85; }
.n-wa svg { width: 14px; height: 14px; fill: #fff; flex-shrink: 0; }


/* ── TAB BAR ────────────────────────────────────────── */
#tabs {
  position: fixed; top: var(--nav); left: 0; right: 0;
  height: var(--tab);
  background: rgba(12,34,18,.98);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bd);
  display: grid; grid-template-columns: repeat(6, 1fr);
  z-index: 899;
}
.tab {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  color: var(--mu);
  font-size: .58rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  transition: color .2s;
  position: relative;
  padding: 0 2px;
  -webkit-tap-highlight-color: transparent;
}
.tab svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s; }
.tab.active { color: var(--gold); }
.tab.active svg { transform: scale(1.15); }
.tab.active::after {
  content: '';
  position: absolute; bottom: 0; left: 15%; right: 15%;
  height: 2px; background: var(--gold); border-radius: 2px;
}


/* ── PAGES CONTAINER ────────────────────────────────── */
#pages {
  position: fixed;
  top: var(--top); left: 0; right: 0; bottom: 0;
  overflow: hidden;
}
.page {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--g);
  opacity: 0; transform: translateY(14px);
  pointer-events: none;
  transition: opacity .32s ease, transform .32s ease;
  padding-bottom: calc(5rem + var(--safe));
}
.page.active { opacity: 1; transform: translateY(0); pointer-events: auto; }


/* ── SHARED COMPONENTS ──────────────────────────────── */
.lbl {
  display: inline-block; font-size: .7rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .9rem;
}
.ttl {
  font-family: var(--f1); font-weight: 400;
  font-size: clamp(1.9rem, 6vw, 3rem);
  color: var(--wh); line-height: 1.1; margin-bottom: 1.2rem;
}
.ttl em { font-style: italic; color: var(--gold); }
.dvd { width: 40px; height: 2px; background: var(--gold); margin-bottom: 1.6rem; }
.pg-head { padding: 2rem 1.2rem 1.4rem; background: linear-gradient(to bottom, var(--gm), var(--g)); border-bottom: 1px solid var(--bd); }
.pg-sub { font-size: .88rem; color: var(--mu); line-height: 1.7; max-width: 50ch; }


.pill {
  display: inline-block; font-size: .7rem; font-weight: 500;
  color: var(--mu); background: var(--gs);
  padding: .22rem .65rem; border-radius: 100px;
}


.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.6rem; border-radius: var(--r);
  font-size: .84rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  transition: .25s ease; cursor: pointer; border: none;
  -webkit-tap-highlight-color: transparent; min-height: 44px;
}
.btn-gold { background: var(--gold); color: var(--g); }
.btn-gold:hover { background: var(--glt); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--cr); border: 1px solid var(--bd); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-wa { background: #25D366; color: #fff; }
.btn-wa:hover { background: #1ebe5d; }
.btn svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.w100 { width: 100%; }


/* reveal animation */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
.reveal.on { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; } .d3 { transition-delay: .3s; }


/* ── PAGE: HOME ─────────────────────────────────────── */
.hero {
  position: relative;
  height: calc(100svh - var(--top));
  min-height: 520px;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(160deg, var(--gm), var(--g));
}
.hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(12,34,18,.88) 0%, rgba(12,34,18,.55) 55%, rgba(12,34,18,.2) 100%);
}
.hero-fade-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; height: 40%; z-index: 2;
  background: linear-gradient(to top, var(--g) 0%, transparent 100%);
}
.hero-content {
  position: relative; z-index: 3;
  padding: 1.5rem 1.2rem 2.5rem;
  width: 100%;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(201,165,90,.3);
  padding: .35rem .9rem; border-radius: 100px; margin-bottom: 1rem;
}
.hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); animation: blink 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.hero-h1 {
  font-family: var(--f1); font-size: clamp(2.4rem, 9vw, 5rem); font-weight: 300;
  line-height: 1.04; color: var(--wh); margin-bottom: .6rem;
}
.hero-h1 em { font-style: italic; color: var(--gold); display: block; }
.hero-sub { font-size: .9rem; color: var(--mu); margin-bottom: 1.8rem; line-height: 1.6; max-width: 44ch; }
.hero-acts { display: flex; gap: .75rem; flex-wrap: wrap; }


.hero-prices {
  position: absolute; right: 1.2rem; bottom: 2.2rem; z-index: 3;
  background: rgba(12,34,18,.82); backdrop-filter: blur(12px);
  border: 1px solid var(--bd); border-radius: calc(var(--r)*1.5);
  padding: 1rem 1.2rem; min-width: 175px;
}
.hp-title {
  font-size: .64rem; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--mu); margin-bottom: .7rem;
}
.hp-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; font-size: .78rem; color: var(--mu); padding: .2rem 0;
  border-bottom: 1px solid rgba(201,165,90,.1);
}
.hp-row:last-child { border-bottom: none; }
.hp-row strong { color: var(--gold); font-family: var(--f1); font-size: .95rem; }
@media (max-width: 480px) { .hero-prices { display: none; } }


/* stat strip */
.stat-strip {
  display: flex; justify-content: space-around;
  background: var(--gold); padding: 1.1rem .5rem;
}
.ss { text-align: center; }
.ss-n { font-family: var(--f1); font-size: 1.55rem; font-weight: 500; color: var(--g); line-height: 1; }
.ss-l { font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(12,34,18,.65); }


/* quick services */
.qs-section { padding: 1.5rem 1.2rem; }
.qs-title {
  font-family: var(--f1); font-size: 1.5rem; font-weight: 400;
  color: var(--wh); margin-bottom: 1.1rem;
}
.qs-title em { font-style: italic; color: var(--gold); }
.qs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
@media (min-width: 600px) { .qs-grid { grid-template-columns: repeat(3, 1fr); } }
.qs-card {
  background: var(--gm); border: 1px solid var(--bd);
  border-radius: calc(var(--r)*1.5); overflow: hidden;
  cursor: pointer; transition: .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.qs-card:hover, .qs-card:active { border-color: var(--gold); transform: translateY(-2px); }
.qs-img {
  height: 85px; position: relative;
  background-size: cover; background-position: center;
  background-color: var(--gs);
}
.qs-img-art {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; opacity: .5;
  background: rgba(12,34,18,.3);
}
.qs-body { padding: .6rem .7rem; }
.qs-body strong { display: block; font-size: .78rem; font-weight: 600; color: var(--wh); margin-bottom: .15rem; }
.qs-body span { font-size: .65rem; color: var(--mu); }


/* info strip */
.info-strip {
  background: var(--gm); border-top: 1px solid var(--bd);
  padding: 1.2rem; display: flex; flex-direction: column; gap: .8rem;
}
.ir {
  display: flex; align-items: center; gap: .7rem;
  font-size: .84rem; color: var(--mu);
  transition: color .2s;
}
.ir:hover { color: var(--cr); }
.ir-ic { font-size: 1rem; flex-shrink: 0; width: 20px; text-align: center; }
.ir strong { color: var(--gold); }


/* ── PAGE: ROOMS ────────────────────────────────────── */
.rooms-notice {
  display: flex; align-items: flex-start; gap: .65rem;
  background: var(--gs); border: 1px solid var(--bd);
  border-radius: var(--r); padding: .9rem 1rem;
  font-size: .8rem; color: var(--mu);
  margin: 0 1.2rem 1.2rem;
}
.rooms-notice strong { color: var(--gold); }
.rooms-list { display: flex; flex-direction: column; gap: 1.1rem; padding: 0 1.2rem; }
.room-card {
  background: var(--gm); border: 1px solid var(--bd);
  border-radius: calc(var(--r)*1.5); overflow: hidden;
}
.room-media {
  height: 220px; position: relative;
  background: linear-gradient(135deg, var(--gs), var(--gl));
  overflow: hidden;
}
.room-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .4s ease;
}
.room-img.loaded { opacity: 1; }
.room-media-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem; opacity: .25;
  pointer-events: none;
}
.room-media::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%; z-index: 1;
  background: linear-gradient(to top, rgba(12,34,18,.8) 0%, transparent 100%);
}
.room-tag {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  background: var(--gold); color: var(--g);
  font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .22rem .7rem; border-radius: 100px;
}
.room-price-chip {
  position: absolute; bottom: .8rem; right: .8rem; z-index: 2;
  background: rgba(12,34,18,.85); backdrop-filter: blur(8px);
  border: 1px solid var(--gold); border-radius: var(--r);
  padding: .5rem .85rem; text-align: right;
}
.room-price-chip .rp {
  font-family: var(--f1); font-size: 1.4rem; color: var(--gold); line-height: 1;
}
.room-price-chip small { font-size: .65rem; color: var(--mu); }
.room-body { padding: 1.2rem 1.3rem; }
.room-name {
  font-family: var(--f1); font-size: 1.4rem; font-weight: 500;
  color: var(--wh); margin-bottom: .75rem;
}
.room-copy { font-size: .84rem; color: var(--mu); line-height: 1.65; margin-bottom: 1.1rem; }
.room-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.room-acts { display: flex; gap: .65rem; flex-wrap: wrap; }
.room-acts .btn { flex: 1; min-width: 120px; }


/* ── PAGE: MENU FLIPBOOK ────────────────────────────── */
.flipbook-wrap {
  padding: 1.5rem 1rem 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
}
.flipbook {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3/4;
  perspective: 1200px;
  cursor: pointer;
}
.book-spine {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 6px; z-index: 10;
  background: linear-gradient(to right, #8B6914, var(--gold), #8B6914);
  border-radius: 2px 0 0 2px;
  box-shadow: 2px 0 8px rgba(0,0,0,.5);
}
/* Each flipbook page */
.fb-page {
  position: absolute; inset: 0;
  border-radius: 0 var(--r) var(--r) 0;
  overflow: hidden;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.645,.045,.355,1);
  backface-visibility: hidden;
  box-shadow: var(--shadow);
}
.fb-page.flipped { transform: rotateY(-180deg); }


.fb-front, .fb-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 0 var(--r) var(--r) 0;
  overflow: hidden;
}
.fb-back { transform: rotateY(180deg); }


.fb-front img, .fb-back img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block;
}
.fb-front-cover {
  width: 100%; height: 100%;
  background: linear-gradient(160deg, var(--gs) 0%, var(--gl) 50%, var(--g) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 2rem;
}
.fb-cover-logo { width: 100px; height: 100px; object-fit: contain; }
.fb-cover-logo-fallback {
  width: 90px; height: 90px;
  background: var(--gold); border-radius: 12px;
  font-family: var(--f1); font-size: 2.2rem; color: var(--g);
  display: flex; align-items: center; justify-content: center;
}
.fb-cover-title {
  font-family: var(--f1); font-size: 1.8rem; font-weight: 400;
  color: var(--wh); letter-spacing: .12em; text-align: center;
}
.fb-cover-title span { color: var(--gold); }
.fb-cover-sub {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--mu); text-align: center;
}
.fb-cover-open {
  margin-top: .5rem; font-size: .75rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--bd);
  padding: .5rem 1.2rem; border-radius: 100px;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }


/* page turn shadow effect */
.fb-page::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 20px;
  background: linear-gradient(to right, transparent, rgba(0,0,0,.25));
  pointer-events: none; z-index: 5;
  border-radius: 0 var(--r) var(--r) 0;
}


/* page label */
.fb-label {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  padding: 1rem .9rem .7rem;
  background: linear-gradient(to top, rgba(12,34,18,.92) 0%, transparent 100%);
  font-size: .78rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); text-align: center;
}


/* fallback when image not loaded */
.fb-img-fallback {
  width: 100%; height: 100%;
  background: linear-gradient(160deg, var(--gm), var(--gs));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .8rem; padding: 1.5rem;
}
.fb-img-fallback .fb-fall-ic { font-size: 3.5rem; opacity: .5; }
.fb-img-fallback .fb-fall-ttl {
  font-family: var(--f1); font-size: 1.4rem; color: var(--wh);
  text-align: center; line-height: 1.3;
}
.fb-img-fallback .fb-fall-lbl {
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--mu);
}


/* flip controls */
.flip-controls {
  display: flex; align-items: center; gap: 1.5rem;
}
.flip-btn {
  width: 44px; height: 44px;
  background: var(--gm); border: 1px solid var(--bd);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--cr); transition: .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.flip-btn:hover, .flip-btn:active { background: var(--gold); color: var(--g); border-color: var(--gold); }
.flip-btn svg { width: 18px; height: 18px; stroke: currentColor; }
.flip-counter { font-family: var(--f1); font-size: 1.1rem; color: var(--mu); min-width: 60px; text-align: center; }
.flip-dots { display: flex; gap: .5rem; justify-content: center; }
.fd {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bd); border: none; cursor: pointer;
  transition: .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.fd.on { background: var(--gold); width: 22px; border-radius: 4px; }
.flip-cta { width: 100%; max-width: 420px; }


/* ── PAGE: CHOMA ────────────────────────────────────── */
.choma-hero {
  position: relative; min-height: 300px;
  display: flex; align-items: flex-end; overflow: hidden;
  padding: 2rem 1.2rem;
}
.choma-bg {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(160deg, #0C1808, #1A2E0A);
}
.choma-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s ease;
}
.choma-bg img.loaded { opacity: .45; }
.choma-bg-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(12,34,18,.96) 0%, rgba(12,24,8,.6) 100%);
}
.choma-fire {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 280px; height: 100px; z-index: 2;
  background: radial-gradient(ellipse at bottom, rgba(255,100,0,.22) 0%, transparent 70%);
  animation: fireGlow 2.5s ease-in-out infinite;
}
@keyframes fireGlow { 0%,100%{opacity:.4;transform:translateX(-50%) scaleY(1)} 50%{opacity:.85;transform:translateX(-50%) scaleY(1.15)} }
.choma-hero-content { position: relative; z-index: 3; }
.choma-ttl {
  font-family: var(--f1); font-size: clamp(2rem, 7vw, 3.5rem);
  font-weight: 300; color: var(--wh); line-height: 1.06;
  margin: .5rem 0 .8rem;
}
.choma-ttl em { font-style: italic; color: var(--gold); display: block; }
.choma-hero-content p { font-size: .88rem; color: var(--mu); line-height: 1.7; max-width: 44ch; margin-bottom: 1.4rem; }


.choma-photos {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .5rem; padding: .8rem 1.2rem;
}
.cp-item {
  height: 90px; border-radius: var(--r); overflow: hidden;
  position: relative; background: var(--gs);
}
.cp-item img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .4s ease;
}
.cp-item img.loaded { opacity: 1; }
.cp-art {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 1.8rem; opacity: .4;
}


.cuts-list { display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1.2rem; }
.cut-card {
  background: var(--gm); border: 1px solid var(--bd);
  border-radius: var(--r);
  display: flex; justify-content: space-between; align-items: center;
  padding: .95rem 1rem; gap: .75rem;
  transition: border-color .2s;
}
.cut-card:hover, .cut-card:active { border-color: var(--gold); }
.cut-left { display: flex; align-items: center; gap: .8rem; flex: 1; min-width: 0; }
.cut-icon { font-size: 1.7rem; flex-shrink: 0; }
.cut-name { font-size: .92rem; font-weight: 500; color: var(--wh); margin-bottom: .18rem; }
.cut-desc { font-size: .74rem; color: var(--mu); line-height: 1.4; }
.cut-right { text-align: right; flex-shrink: 0; }
.cut-price { font-family: var(--f1); font-size: 1.15rem; color: var(--gold); display: block; margin-bottom: .3rem; }
.cut-ord {
  font-size: .67rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--mu); background: var(--gs); border: 1px solid var(--bd);
  border-radius: var(--r); padding: .28rem .6rem; cursor: pointer;
  transition: .2s; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.cut-ord:hover, .cut-ord:active { background: var(--gold); border-color: var(--gold); color: var(--g); }
.choma-footer { display: flex; flex-direction: column; gap: .7rem; padding: .5rem 1.2rem 1rem; }


/* ── PAGE: GALLERY ──────────────────────────────────── */
.gallery-grid {
  padding: 1.2rem;
  columns: 2; column-gap: .65rem;
}
@media (min-width: 500px) { .gallery-grid { columns: 3; } }
@media (min-width: 700px) { .gallery-grid { columns: 4; } }
.gallery-item {
  break-inside: avoid; margin-bottom: .65rem;
  border-radius: var(--r); overflow: hidden;
  cursor: pointer; position: relative;
  background: var(--gm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-item:hover { transform: scale(1.02); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.gallery-item img {
  width: 100%; height: auto; display: block;
  opacity: 0; transition: opacity .4s ease;
  object-fit: cover;
}
.gallery-item img.loaded { opacity: 1; }
.gallery-item-fallback {
  height: 140px; display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; opacity: .3;
}
.gallery-item::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(12,34,18,0); transition: background .2s;
}
.gallery-item:hover::after { background: rgba(201,165,90,.1); }
.gallery-item .gi-overlay {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 1;
  padding: .5rem .65rem;
  background: linear-gradient(to top, rgba(12,34,18,.85) 0%, transparent 100%);
  font-size: .68rem; font-weight: 500; color: var(--cr);
  opacity: 0; transition: opacity .2s;
}
.gallery-item:hover .gi-overlay { opacity: 1; }


/* Lightbox */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 9990;
  background: rgba(0,0,0,.95); backdrop-filter: blur(8px);
  align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lb-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.15); color: #fff;
  font-size: 1.2rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s;
}
.lb-close:hover { background: rgba(255,255,255,.3); }
.lb-prev, .lb-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  font-size: 2rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s;
}
.lb-prev { left: .75rem; } .lb-next { right: .75rem; }
.lb-prev:hover, .lb-next:hover { background: rgba(201,165,90,.4); }
.lb-img-wrap {
  max-width: 92vw; max-height: 85svh;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
#lb-img { width: auto; height: auto; max-width: 90vw; max-height: 78svh; object-fit: contain; border-radius: var(--r); }
.lb-caption { font-size: .8rem; color: rgba(255,255,255,.6); text-align: center; }


/* ── PAGE: BOOK ─────────────────────────────────────── */
.contact-grid { display: flex; flex-direction: column; gap: .65rem; padding: 1.2rem; }
.cc {
  background: var(--gm); border: 1px solid var(--bd);
  border-radius: var(--r);
  display: flex; align-items: center; gap: .9rem;
  padding: .95rem 1rem; transition: border-color .2s;
}
.cc:hover { border-color: var(--gold); }
.wa-cc { border-color: rgba(37,211,102,.3); }
.wa-cc:hover { border-color: #25D366; }
.cc-ic {
  width: 42px; height: 42px; flex-shrink: 0;
  background: var(--gs); border: 1px solid var(--bd);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.wa-cc .cc-ic { background: #25D366; border-color: #25D366; }
.wa-cc .cc-ic svg { width: 20px; height: 20px; fill: #fff; }
.cc-ttl { font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--mu); margin-bottom: .2rem; }
.cc-val { font-size: .9rem; color: var(--cr); font-weight: 500; }
.wa-cc .cc-val { color: #25D366; }


.bk-form {
  background: var(--gm); border: 1px solid var(--bd);
  border-radius: calc(var(--r)*1.5); padding: 1.5rem 1.2rem;
  margin: 0 1.2rem 1.2rem;
}
.bk-form h3 { font-family: var(--f1); font-size: 1.4rem; font-weight: 400; color: var(--wh); margin-bottom: 1.3rem; }
.fg { margin-bottom: 1rem; }
.fg label { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--mu); margin-bottom: .4rem; }
.fg input, .fg select, .fg textarea {
  width: 100%; padding: .82rem .95rem;
  background: var(--gs); border: 1px solid var(--bd);
  border-radius: var(--r); color: var(--cr);
  font-size: .9rem; outline: none;
  transition: border-color .2s; appearance: none;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--gold); }
.fg textarea { resize: vertical; min-height: 80px; }
.fg select option { background: var(--gm); }
.fg2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 400px) { .fg2 { grid-template-columns: 1fr; } }


.map-box { margin: 0 1.2rem 1.2rem; border-radius: var(--r); overflow: hidden; height: 190px; border: 1px solid var(--bd); }
.map-box iframe { width: 100%; height: 100%; border: none; filter: grayscale(20%) brightness(.7); }


.services-mini { padding: 0 1.2rem 1rem; }
.sm-ttl { font-family: var(--f1); font-size: 1.3rem; font-weight: 400; color: var(--wh); margin-bottom: 1rem; }
.sm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (min-width: 450px) { .sm-grid { grid-template-columns: repeat(3, 1fr); } }
.sm-item {
  background: var(--gm); border: 1px solid var(--bd);
  border-radius: var(--r); padding: .65rem .8rem;
  font-size: .78rem; color: var(--mu);
  transition: .2s;
}
.sm-item:hover { border-color: var(--gold); color: var(--cr); }


/* ── FLOATING WA ────────────────────────────────────── */
#wa-float {
  position: fixed; right: 1rem; bottom: calc(1.2rem + var(--safe));
  width: 52px; height: 52px;
  background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 800; box-shadow: 0 4px 18px rgba(37,211,102,.4);
  transition: transform .25s ease;
  -webkit-tap-highlight-color: transparent;
}
#wa-float:hover { transform: scale(1.1); }
#wa-float::before {
  content: ''; position: absolute; inset: -6px;
  border-radius: 50%; background: rgba(37,211,102,.18);
  animation: wap 2.2s ease-out infinite;
}
#wa-float svg { width: 26px; height: 26px; fill: #fff; position: relative; z-index: 1; }
@keyframes wap { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2.3);opacity:0} }