/* ============================================================
   RUN INK TATTOO BANGKOK — Premium Luxury Theme
   Color: Black & Gold  |  Font: Kanit
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  --black: #0a0a0a;
  --black-soft: #111111;
  --black-card: #161513;
  --black-elev: #1c1a16;
  --line: rgba(201, 162, 39, 0.18);
  --line-soft: rgba(255, 255, 255, 0.07);

  --gold: #c9a227;
  --gold-light: #e8cf7a;
  --gold-bright: #f4dd8a;
  --gold-deep: #9d7c17;
  --gold-grad: linear-gradient(135deg, #f4dd8a 0%, #c9a227 45%, #9d7c17 100%);

  --white: #f5f3ee;
  --grey: #b7b3a9;
  --grey-dim: #7f7b72;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 12px 40px rgba(201, 162, 39, 0.18);

  --container: 1200px;
  --gutter: 24px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --ff: 'Kanit', system-ui, -apple-system, sans-serif;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

/* touch-action: manipulation disables the browser's double-tap-to-zoom on
   mobile (single taps/scrolling stay instant). Pinch-zoom stays available on
   purpose — WCAG 1.4.4 requires the page to be resizable. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; touch-action: manipulation; }

body {
  font-family: var(--ff);
  background: var(--black);
  color: var(--white);
  line-height: 1.7;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---------- A11y utilities ----------
   .sr-only carries headings that exist only to keep the document outline valid
   (a section the design gives no visible title). .skip-link sits off-screen
   until Tab reaches it, then drops in as the first stop on the page. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 300;
  transform: translate(-50%, -200%);
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--gold);
  color: #14100a;
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 0.25s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Background luxury texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px circle at 15% -10%, rgba(201, 162, 39, 0.10), transparent 45%),
    radial-gradient(700px circle at 100% 110%, rgba(201, 162, 39, 0.07), transparent 45%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Layout Helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 1;
}

.section { padding: 100px 0; position: relative; z-index: 1; }
.section--tight { padding: 70px 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--gold-grad);
}

.section-head { max-width: 720px; margin: 0 auto 60px; text-align: center; }
.section-head .eyebrow { justify-content: center; }
.section-head p { color: var(--grey); margin-top: 14px; }

h1, h2, h3, h4 { font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; }

.h-xl { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 600; }
.h-lg { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; }
.h-md { font-size: clamp(1.5rem, 3vw, 2rem); }

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

.text-muted { color: var(--grey); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s;
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); }

.btn--gold {
  background: var(--gold-grad);
  color: #1a1400;
  box-shadow: var(--shadow-gold);
}
.btn--gold:hover { box-shadow: 0 18px 50px rgba(201, 162, 39, 0.35); }

.btn--ghost {
  border: 1px solid var(--line);
  color: var(--white);
  background: rgba(255, 255, 255, 0.02);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-light); }

.btn-arrow { transition: transform 0.3s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: background 0.4s, padding 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.nav .brand { justify-self: start; }
.nav .nav-menu { justify-self: center; }
.nav .nav-cta { justify-self: end; }
/* Smaller header CTA button (does not affect other .btn on the site) */
.nav-cta .btn { padding: 9px 20px; font-size: 0.82rem; gap: 7px; }
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  letter-spacing: 1px;
}
.brand-mark {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold-grad);
  color: #14100a;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: var(--shadow-gold);
}
.brand-name { font-size: 1.05rem; line-height: 1.1; }
.brand-name small {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 3px;
  color: var(--gold-light);
  font-weight: 400;
}
.brand-logo {
  height: 60px;
  width: auto;
  display: block;
  transition: height 0.4s var(--ease);
}
.site-header.scrolled .brand-logo { height: 48px; }
.brand-logo--footer { height: 92px; }

.nav-menu { display: flex; align-items: center; gap: 6px; }
/* drawer-only extras — revealed inside the mobile off-canvas menu */
.nav-drawer-brand,
.nav-drawer-social { display: none; }
.nav-menu a {
  position: relative;
  padding: 8px 16px;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--grey);
  transition: color 0.3s;
}
.nav-menu a::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 2px;
  height: 1px;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav-menu a:hover,
.nav-menu a.active { color: var(--white); }
.nav-menu a:hover::after,
.nav-menu a.active::after { transform: scaleX(1); }

.nav-cta { display: flex; align-items: center; gap: 14px; }

/* Language switcher (TH / EN dropdown) */
.lang-switch { position: relative; }
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--gold-light);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.lang-toggle:hover {
  border-color: var(--gold);
  background: rgba(201, 162, 39, 0.08);
  color: var(--gold-bright);
}
/* CSS-drawn flags (no inline <svg> — dev servers inject scripts into svg tags) */
.flag {
  width: 22px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  display: inline-block;
  flex: none;
  vertical-align: middle;
  background-size: 100% 100%;
  background-position: center;
}
.flag-th {
  background: linear-gradient(180deg,
    #a51931 0 16.66%,
    #f4f5f8 16.66% 33.33%,
    #2d2a4a 33.33% 66.66%,
    #f4f5f8 66.66% 83.33%,
    #a51931 83.33% 100%);
}
.flag-en {
  background-color: #012169;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' preserveAspectRatio='none'%3E%3Cpath d='M0,0 60,30 M60,0 0,30' stroke='%23ffffff' stroke-width='6'/%3E%3Cpath d='M0,0 60,30 M60,0 0,30' stroke='%23c8102e' stroke-width='3.5'/%3E%3Cpath d='M30,0 V30 M0,15 H60' stroke='%23ffffff' stroke-width='10'/%3E%3Cpath d='M30,0 V30 M0,15 H60' stroke='%23c8102e' stroke-width='6'/%3E%3C/svg%3E");
}
.lang-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  color: var(--gold-light);
  margin-left: 1px;
  transition: transform 0.3s var(--ease);
}
.lang-switch.open .lang-caret { transform: rotate(180deg); }

/* show only the current language flag in the button */
.lang-toggle .flag-th,
.lang-toggle .flag-en { display: none; }
html[lang="th"] .lang-toggle .flag-th { display: inline-block; }
html[lang="en"] .lang-toggle .flag-en { display: inline-block; }

/* dropdown menu */
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: rgba(14, 14, 14, 0.98);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  z-index: 120;
}
.lang-switch.open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #eaeaea;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-option:hover { background: rgba(201, 162, 39, 0.12); color: var(--gold-light); }
.lang-option[aria-current="page"] { color: var(--gold-light); font-weight: 600; }

/* Page scroll lock while the mobile drawer is open (--sbw is set in main.js) */
body.nav-open { overflow: hidden; padding-right: var(--sbw, 0px); }
body.nav-open .site-header {
  padding-right: var(--sbw, 0px);
  /* .site-header.scrolled sets backdrop-filter, which makes the header a
     containing block for its position:fixed descendants — that shrinks the
     .nav-menu drawer from the full viewport down to the header's own box.
     Drop it while the drawer is open; .nav-backdrop does the blurring anyway. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Blurred backdrop behind the mobile drawer (element is created in main.js) */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;              /* under .site-header (100), over page content */
  background: rgba(8, 8, 8, 0.55);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s var(--ease);
}
.nav-backdrop.open { opacity: 1; visibility: visible; }
@media (min-width: 769px) {
  .nav-backdrop { display: none; }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  z-index: 110;
}
.nav-toggle span {
  width: 26px; height: 2px;
  background: var(--gold-light);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* symmetric, so the copy sits at true optical centre */
  padding: 140px 0 140px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* kept low so the warm window light in the hero photo survives the overlay */
  filter: grayscale(0.1) contrast(1.05);
}
/* real <img> LCP element — fills the hero exactly as the old background did */
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* background video sits inside .hero-bg, above the fallback image but below the
   dark overlay (::after) and the copy (.hero-inner, z-index:2) */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* transparent until it's actually playing, so the <img> underneath stays the
     LCP and there's no black flash from the empty (posterless) video element */
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.hero-video.is-playing { opacity: 1; }
/* desktop shows the landscape clip; the portrait one waits for the phone query */
.hero-video--mobile { display: none; }
/* users who prefer reduced motion get the still fallback image, not the loop */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* centred pool of shade under the copy, replacing the old left-edge scrim
       that no longer lines up now the text is centred */
    radial-gradient(115% 85% at 50% 46%, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.5) 50%, transparent 100%),
    linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.7) 60%, var(--black) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  /* stays a normal centred container (max-width + margin auto inherited from
     .container) so its left edge lines up with the header logo; the copy inside
     is flush left and each block is width-capped individually below */
  text-align: left;
}
/* cap the headline's line length without shifting its left edge off the logo */
.hero h1 { max-width: 780px; }
.hero .eyebrow { max-width: 780px; }
.hero h1 { margin: 10px 0 22px; }
/* margin-inline: 0 so the narrower lead starts on that same left edge */
.hero p.lead { font-size: 1.15rem; color: var(--grey); max-width: 560px; margin-inline: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 60px;
  padding-top: 34px;
  border-top: 1px solid var(--line-soft);
}
.hero-stats .stat b {
  display: block;
  font-size: 2rem;
  font-weight: 600;
  color: var(--gold-light);
}
.hero-stats .stat span { font-size: 0.85rem; color: var(--grey-dim); letter-spacing: 1px; }

.scroll-hint {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 0.7rem;
  letter-spacing: 3px;
  color: var(--grey-dim);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.scroll-hint span {
  width: 1px; height: 42px;
  background: linear-gradient(var(--gold), transparent);
  animation: scrollLine 2s var(--ease) infinite;
}
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================================
   FEATURE STRIP
   ============================================================ */
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.feature {
  padding: 32px 28px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--black-card);
  text-align: center;
  transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s var(--ease);
}
.feature:hover {
  transform: translateY(-6px);
  border-color: var(--line);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
}
.feature .ico {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: rgba(201, 162, 39, 0.08);
  border: 1px solid var(--line);
  color: var(--gold-light);
  margin: 0 auto 22px;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.feature .ico svg { width: 25px; height: 25px; }
.feature:hover .ico {
  background: var(--gold-grad);
  color: #1a1204;
  border-color: transparent;
  transform: translateY(-2px);
}
.feature h3 { font-size: 1.15rem; margin-bottom: 10px; }
.feature p { font-size: 0.9rem; color: var(--grey); line-height: 1.7; }

/* ============================================================
   SERVICES CARDS
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.service-card {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--black-card);
  transition: transform 0.5s var(--ease), border-color 0.5s;
}
.service-card:hover { transform: translateY(-8px); border-color: var(--line); }
.service-card .media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
}
.service-card .media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
  filter: grayscale(0.2);
}
.service-card:hover .media img { transform: scale(1.08); }
.service-card .media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.6));
}
.service-card .body { padding: 26px 26px 30px; }
.service-card .tag {
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-light);
}
.service-card h3 { font-size: 1.35rem; margin: 8px 0 12px; }
.service-card p { color: var(--grey); font-size: 0.92rem; }
.service-card .price {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.service-card .price b { color: var(--gold-light); font-weight: 600; }
.service-card .price a { font-size: 0.85rem; color: var(--gold-light); font-weight: 600; transition: color 0.3s; }
.service-card .price a:hover { color: var(--gold-bright); }

/* ============================================================
   PROCESS / STEPS
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 34px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: var(--black-card);
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-size: 2.4rem;
  font-weight: 600;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.85;
}
.step h3 { font-size: 1.1rem; margin: 12px 0 8px; }
.step p { font-size: 0.88rem; color: var(--grey); }

/* ============================================================
   PORTFOLIO / GALLERY
   ============================================================ */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 44px;
}
.filter-btn {
  padding: 9px 22px;
  border-radius: 100px;
  border: 1px solid var(--line-soft);
  color: var(--grey);
  font-size: 0.9rem;
  transition: all 0.3s;
}
.filter-btn:hover { color: var(--white); border-color: var(--line); }
.filter-btn.active {
  background: var(--gold-grad);
  color: #1a1400;
  border-color: transparent;
  font-weight: 500;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.gallery-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line-soft);
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), filter 0.5s;
  filter: grayscale(0.3);
}
.gallery-item:hover img { transform: scale(1.1); filter: grayscale(0); }
.gallery-item .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.8));
  opacity: 0;
  transition: opacity 0.4s;
}
.gallery-item:hover .overlay { opacity: 1; }
.gallery-item .overlay small { color: var(--gold-light); letter-spacing: 2px; font-size: 0.7rem; text-transform: uppercase; }
.gallery-item .overlay b { font-weight: 500; }
.gallery-item .zoom {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(201,162,39,0.9);
  color: #14100a;
  transform: scale(0.6);
  opacity: 0;
  transition: all 0.4s var(--ease);
}
.gallery-item:hover .zoom { transform: scale(1); opacity: 1; }
.gallery-item.hide { display: none; }

/* Slider arrows — wrapper + buttons are created in main.js (makeSlider).
   Shared by the reviews gallery and the home-page atmosphere strip.
   Hidden by default; the mobile block below turns them on. */
.slider { position: relative; }
.slider-nav { display: none; }

/* Studio atmosphere grid */
.vibe-viewport { overflow: hidden; }
/* clones exist only to seam the phone marquee — hidden on desktop & tablet */
.vibe-item--clone { display: none; }
.vibe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.vibe-item {
  margin: 0;
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  cursor: pointer;
}
.vibe-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.15);
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
}
.vibe-item:hover img { transform: scale(1.06); filter: grayscale(0); }
.vibe-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

/* TikTok video embeds (clean player — video only) */
.tiktok-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  align-items: flex-start;
  margin-top: 8px;
}
.tiktok-video {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: #000;
}
.tiktok-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 6, 6, 0.92);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px;
  touch-action: none;
  overscroll-behavior: contain;
}
.lightbox.open { display: flex; animation: fade 0.3s ease; }
.lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  /* Zoom is LOCKED. Opting out of native gestures stops the browser from
     pinch-zooming the WHOLE page, which used to push the photo off-screen and
     strand the fixed nav buttons. JS only handles swipe (change photo / close),
     never a scale. */
  touch-action: none;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.lightbox-close {
  position: absolute;
  top: 24px; right: 30px;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--gold-light);
  font-size: 1.4rem;
  background: rgba(0,0,0,0.4);
  transition: all 0.3s;
}
.lightbox-close:hover { background: var(--gold); color: #14100a; }
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--gold-light);
  font-size: 1.9rem;
  line-height: 1;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.3s, color 0.3s, opacity 0.25s, transform 0.3s var(--ease);
  z-index: 2;
}
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-nav:hover { background: var(--gold); color: #14100a; }
.lightbox-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox-next:hover { transform: translateY(-50%) translateX(3px); }
@media (max-width: 560px) {
  .lightbox-nav { width: 44px; height: 44px; font-size: 1.6rem; }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
}
/* Touch-only hint — the gestures aren't discoverable, so say them once and
   fade out. Absolutely positioned, so it stays out of the flex centring. */
@media (hover: none) {
  .lightbox.open::after {
    content: 'ปัดซ้าย-ขวาเพื่อเปลี่ยนรูป · ปัดลงเพื่อปิด';
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    max-width: 92vw;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.55);
    color: var(--gold-light);
    font-size: 0.74rem;
    white-space: nowrap;
    pointer-events: none;
    animation: lb-hint 4.5s ease forwards;
  }
}
@keyframes lb-hint { 0%, 65% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
/* Real Google reviews badge */
.google-badge {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 500px;
  margin: 0 auto 44px;
  padding: 16px 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--black-card);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.google-badge:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.google-badge .g-logo { flex: none; width: 38px; height: 38px; display: grid; place-items: center; }
.google-badge .g-logo svg { width: 100%; height: 100%; }
.google-badge .g-meta { display: flex; flex-direction: column; gap: 2px; }
.google-badge .g-line { display: flex; align-items: center; gap: 8px; }
.google-badge .g-line b { font-size: 1.3rem; color: var(--white); font-weight: 600; line-height: 1; }
.google-badge .g-stars { color: var(--gold); letter-spacing: 2px; font-size: 0.95rem; }
.google-badge .g-sub { font-size: 0.82rem; color: var(--grey); }
.google-badge .g-arrow { margin-left: auto; color: var(--gold-light); font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 480px) {
  .google-badge { flex-wrap: wrap; justify-content: center; text-align: center; border-radius: var(--radius); padding: 20px; }
  .google-badge .g-arrow { margin: 6px 0 0; width: 100%; }
}

.review-card {
  display: flex;
  flex-direction: column;
  padding: 32px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, var(--black-card), var(--black-soft));
  transition: transform 0.4s var(--ease), border-color 0.4s;
}
.review-card:hover { transform: translateY(-6px); border-color: var(--line); }
.review-card .stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 16px; }
.review-card p { color: var(--white); font-weight: 300; }
.review-card .who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.review-card .avatar {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-grad);
  color: #14100a;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 6px 16px rgba(0, 0, 0, 0.35);
}
/* Varied warm gold/bronze tones per reviewer (on-brand, dark text stays readable) */
.reviews-grid .review-card:nth-child(1) .avatar { background: linear-gradient(135deg, #f4dd8a, #c9a227); }
.reviews-grid .review-card:nth-child(2) .avatar { background: linear-gradient(135deg, #f0c674, #c98a1f); }
.reviews-grid .review-card:nth-child(3) .avatar { background: linear-gradient(135deg, #e8bd8c, #b0763a); }
.reviews-grid .review-card:nth-child(4) .avatar { background: linear-gradient(135deg, #efe2b2, #cbb267); }
.reviews-grid .review-card:nth-child(5) .avatar { background: linear-gradient(135deg, #e7ab7c, #b0602f); }
.reviews-grid .review-card:nth-child(6) .avatar { background: linear-gradient(135deg, #dccd8e, #9d8a3f); }
.review-card .who b { display: block; font-weight: 500; }
.review-card .who span { font-size: 0.8rem; color: var(--grey-dim); }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 70px 40px;
  text-align: center;
  border: 1px solid var(--line);
  background:
    radial-gradient(600px circle at 50% -20%, rgba(201,162,39,0.18), transparent 60%),
    linear-gradient(160deg, var(--black-elev), var(--black-soft));
}
.cta h2 { margin-bottom: 16px; }
.cta p { color: var(--grey); max-width: 520px; margin: 0 auto 30px; }
.cta .hero-actions { justify-content: center; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 50px;
  align-items: stretch;
}
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 32px;
}
.info-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.info-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Hours card spans the full bottom row to keep the odd-count grid balanced */
.info-columns .info-item--static { grid-column: 1 / -1; }
.contact-info .info-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--black-card);
  color: var(--white);
  transition: transform 0.3s var(--ease), border-color 0.3s, background 0.3s;
}
a.info-item:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  background: var(--black-elev);
}
.contact-info .info-item .ico {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(201,162,39,0.1);
  color: var(--gold-light);
}
.contact-info .info-item .ico svg { width: 20px; height: 20px; }
.info-text { display: flex; flex-direction: column; min-width: 0; }
.info-text b { font-weight: 500; font-size: 0.95rem; color: var(--white); }
.info-text span {
  font-size: 0.82rem;
  color: var(--grey);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.socials-title {
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 16px;
}
.socials { display: flex; flex-wrap: wrap; gap: 12px; }
.socials a {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-soft);
  color: var(--grey);
  transition: all 0.3s var(--ease);
}
.socials a svg { width: 20px; height: 20px; }
.socials a:hover { color: var(--gold-light); border-color: var(--gold); transform: translateY(-3px); }

.contact-form {
  padding: 38px 34px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
  background: var(--black-card);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 0.82rem;
  color: var(--grey);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: rgba(0,0,0,0.35);
  color: var(--white);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 300;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,162,39,0.12);
}
.field select { appearance: none; }
.form-note {
  margin-top: 8px;
  font-size: 0.85rem;
  min-height: 20px;
}
.form-note.ok { color: #86d17f; }
.form-note.err { color: #e08a7a; }

.map-embed {
  position: relative;
  display: block;
  margin-top: 40px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  height: 340px;
  transition: border-color 0.4s var(--ease);
}
.map-embed img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.35) contrast(1.05);
  transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
}
.map-embed:hover { border-color: var(--gold); }
.map-embed:hover img { transform: scale(1.04); filter: grayscale(0) contrast(1); }
.map-cta {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--gold-grad);
  color: #1a1204;
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.map-cta::after { content: "↗"; font-weight: 700; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  padding: 170px 0 70px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color: var(--black);
  background-image:
    radial-gradient(700px circle at 50% 0%, rgba(201, 162, 39, 0.14), transparent 60%),
    linear-gradient(180deg,
      rgba(10, 10, 10, 0.72) 0%,
      rgba(10, 10, 10, 0.82) 55%,
      rgba(10, 10, 10, 1) 100%),
    var(--hero-img, none);
  background-position: center, center, center;
  background-size: cover, cover, cover;
  background-repeat: no-repeat;
}
.breadcrumb {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--grey-dim);
  margin-top: 18px;
}
.breadcrumb a:hover { color: var(--gold-light); }
.breadcrumb span { color: var(--gold-light); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 780px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--black-card);
}
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  text-align: left;
  color: var(--white);
  font-size: 1.02rem;
  font-weight: 400;
}
.faq-q .plus {
  flex: none;
  color: var(--gold-light);
  font-size: 1.4rem;
  transition: transform 0.35s var(--ease);
}
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.faq-a p { padding: 0 24px 24px; color: var(--grey); font-size: 0.92rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  padding: 44px 0 22px;
  background: var(--black-soft);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  text-align: center;
}
.footer-brand .brand { justify-content: center; }
.footer-brand p { color: var(--grey); font-size: 0.92rem; margin: 12px auto 0; max-width: 360px; }
.footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}
.footer-social a {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
.footer-social a:hover {
  border-color: var(--gold);
  background: rgba(201, 162, 39, 0.1);
  color: var(--gold-bright);
  transform: translateY(-3px);
}
.soc-ico {
  width: 18px; height: 18px;
  display: block;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.footer-col h4 {
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 14px;
}
.footer-col ul li { margin-bottom: 9px; }
.footer-col ul a { color: var(--grey); font-size: 0.92rem; transition: color 0.3s; }
.footer-col ul a:hover { color: var(--gold-light); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: 8px 20px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.85rem;
  color: var(--grey-dim);
}
.footer-bottom a:hover { color: var(--gold-light); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }

/* Above-the-fold hero copy is the LCP element — it must paint without waiting for
   main.js to download and run the IntersectionObserver (which is itself queued
   behind the header/footer fetch). So it animates in via a CSS keyframe that
   starts on load: opacity/transform end-state is set here (so it's visible even
   with JS off), and the animation replays the entrance automatically. */
.hero .reveal {
  opacity: 1;
  transform: none;
  animation: heroReveal 0.8s var(--ease) both;
}
.hero .reveal[data-delay="1"] { animation-delay: 0.1s; }
.hero .reveal[data-delay="2"] { animation-delay: 0.2s; }
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .reveal { animation: none; }
}

/* ---------- Floating WhatsApp/Line button ---------- */
.float-contact {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 100px;
  background: var(--gold-grad);
  color: #14100a;
  font-weight: 500;
  box-shadow: var(--shadow-gold);
  transition: transform 0.3s var(--ease);
}
.float-contact:hover { transform: translateY(-3px) scale(1.03); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .services-grid,
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 768px) {
  .section { padding: 72px 0; }
  /* the hero's bottom padding and the next section's top padding stack into one
     ~142px void on a short screen — halve both */
  .page-hero { padding: 124px 0 40px; }
  .page-hero + .section { padding-top: 40px; }
  .nav-toggle { display: flex; }
  .nav-menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(78vw, 340px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 28px 32px 32px;
    overflow-y: auto;
    background: rgba(12, 12, 12, 0.97);
    backdrop-filter: blur(16px);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform 0.45s var(--ease);
  }
  .nav-menu.open { transform: translateX(0); }
  .nav-menu a { font-size: 1.3rem; padding: 12px 0; }
  .nav-menu a::after { display: none; }

  /* Touch feedback on the real nav links (same selector main.js uses, so the
     drawer logo and social icons keep their own padding). Negative margin
     bleeds the highlight into the gutter while the text stays aligned. */
  .nav-menu > li:not([class]) > a {
    display: block;
    padding: 12px 14px;
    margin: 0 -14px;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
  }
  .nav-menu > li:not([class]) > a:active {
    background: rgba(201, 162, 39, 0.16);
    color: var(--gold-bright);
  }
  .nav-cta .btn { display: none; }

  /* --- drawer: logo on top --- */
  .nav-drawer-brand {
    display: block;
    padding-bottom: 22px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-drawer-brand > a { display: inline-block; padding: 0; }
  .nav-drawer-brand .brand-logo { height: 64px; margin: 0; }

  /* --- drawer: socials pinned to the bottom --- */
  .nav-drawer-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    margin-top: auto;      /* pushes the row to the bottom of the drawer */
    padding-top: 24px;
    border-top: 1px solid var(--line-soft);
  }
  .nav-drawer-social a {
    width: 40px; height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-light);
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
  }
  .nav-drawer-social a:hover {
    border-color: var(--gold);
    background: rgba(201, 162, 39, 0.1);
    color: var(--gold-bright);
  }
  .nav-drawer-social .soc-ico { width: 17px; height: 17px; }
  /* .nav-menu is position:fixed here, so it leaves the grid — drop to 2 tracks
     (brand | cta) so .nav-cta actually hugs the right edge instead of sitting
     in the middle `auto` column with an empty 1fr to its right. */
  .nav { grid-template-columns: 1fr auto; gap: 12px; }
  /* Pull the language pill + X out to the right edge. -8px cancels the
     .nav-toggle's own padding so the hamburger bars line up flush with the
     container gutter instead of sitting 8px inside it. */
  .nav-cta { gap: 10px; margin-right: -8px; }

  /* Drawer has its own logo, so fade out the header one while it's open.
     opacity (not display:none) — removing it would collapse the 1fr grid
     track and yank .nav-cta over to the left. */
  .nav > .brand {
    transition: opacity 0.3s var(--ease);
  }
  body.nav-open .nav > .brand {
    opacity: 0;
    pointer-events: none;
  }
  /* Portrait viewports crop the 1.6:1 hero hard from the sides. Centre lands on
     bare wall, so shift right to keep the machine and ink bottles in frame. */
  .hero-bg-img { object-position: 72% center; }
  /* swap to the portrait clip so phones see the hand + ink, not the bare wall */
  .hero-video--desktop { display: none; }
  .hero-video--mobile { display: block; }
  /* the copy fills the width here, so an even vertical scrim beats the radial */
  .hero-bg::after {
    background: linear-gradient(180deg,
      rgba(10,10,10,0.62) 0%, rgba(10,10,10,0.78) 55%, var(--black) 100%);
  }
  .hero { padding: 120px 0 110px; }

  /* Dial the copy back so the photo still reads as the subject. Scoped to .hero
     so .h-xl keeps its size anywhere else it's used. */
  .hero .eyebrow { font-size: 0.68rem; letter-spacing: 3px; margin-bottom: 14px; }
  .hero h1 { font-size: clamp(1.75rem, 7.4vw, 2.4rem); margin: 8px 0 16px; }
  .hero p.lead { font-size: 0.98rem; max-width: 34ch; }

  /* "ขั้นตอนการทำงาน": one card per slide, same peek/snap recipe as the others */
  .steps {
    --peek: 12vw;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(100vw - 2 * var(--peek));
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--peek);
    scrollbar-width: none;
  }
  .steps::-webkit-scrollbar { display: none; }
  .step {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  /* items parked off to the right are clipped by the scroller, so the reveal
     observer can't be relied on to un-hide them */
  .step.reveal { opacity: 1; transform: none; }

  /* 7 filter chips wrap to 3-4 rows at the desktop size — shrink them so they
     settle into 2 */
  .filters { gap: 8px; margin-bottom: 30px; }
  .filter-btn { padding: 7px 14px; font-size: 0.78rem; }

  .contact-grid { grid-template-columns: 1fr; gap: 34px; }

  /* Studio atmosphere: a seamless, always-on marquee. The figures are cloned in
     JS so the row is doubled; sliding the track exactly -50% lands the first
     clone where the first original began, so the loop has no seam. No arrows —
     to see images one-by-one the visitor taps through the lightbox instead. */
  .vibe-grid {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    width: max-content;
    /* pull the row to the true screen edge (cancel the container gutter) */
    margin-inline: calc(var(--gutter) * -1);
    animation: vibe-marquee 42s linear infinite;
    will-change: transform;
  }
  .vibe-item--clone { display: block; }   /* revealed only inside the marquee */
  .vibe-item {
    flex: 0 0 auto;
    width: 66vw;
    /* trailing gap on EVERY item (incl. the last) keeps -50% perfectly seamless */
    margin-right: 12px;
  }
  /* a press pauses the run so the moving image is easy to tap open */
  .vibe-grid:active { animation-play-state: paused; }
  /* the scroll-reveal observer is unreliable for a horizontally-shifted track */
  .vibe-item.reveal { opacity: 1; transform: none; }
  /* grayscale only clears on :hover, which never fires on touch */
  .vibe-item img { filter: none; }
  @keyframes vibe-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  /* reduced-motion: no auto-run — fall back to a plain swipeable strip */
  @media (prefers-reduced-motion: reduce) {
    .vibe-grid { animation: none; }
    .vibe-viewport { overflow-x: auto; scrollbar-width: none; }
    .vibe-viewport::-webkit-scrollbar { display: none; }
  }

  /* One slide width shared by BOTH gallery modes, so switching filters never
     changes how big the photos are. */
  .gallery {
    --peek: 12vw;
    --slide-w: calc(100vw - 2 * var(--peek));
  }
  /* filtered view: a single centred column at that same width */
  .gallery:not(.is-all) {
    grid-template-columns: var(--slide-w);
    justify-content: center;
    gap: 12px;
  }

  /* "ทั้งหมด": single row, one image per slide. 3/4 matches the source
     files (900x1200) exactly, so object-fit: cover crops nothing. */
  .gallery.is-all {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: var(--slide-w);
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;   /* don't chain into page/back-swipe */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    /* cancel the container gutter, then re-inset by --peek, so the first and
       last columns can still settle centred like every other one */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--peek);
    scrollbar-width: none;
  }
  .gallery.is-all::-webkit-scrollbar { display: none; }
  .gallery.is-all .gallery-item {
    scroll-snap-align: center;
    scroll-snap-stop: always;         /* one swipe = one column, never skips */
    aspect-ratio: 3 / 4;
  }

  /* Arrows sit in the --peek strip either side, vertically centred. */
  .slider-nav {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px; height: 40px;
    padding: 0 0 4px;                 /* optically centres the chevron glyph */
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--gold-light);
    font-size: 1.7rem;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.25s var(--ease), background 0.25s var(--ease);
  }
  .slider-nav--prev { left: 4px; }
  .slider-nav--next { right: 4px; }
  .slider-nav:active { background: rgba(201, 162, 39, 0.24); }
  /* nothing left to scroll that way — fade out rather than leave a dead button */
  .slider-nav:disabled { opacity: 0; pointer-events: none; }
  /* the gallery is only a slider under "ทั้งหมด" — no arrows on a plain grid */
  .gallery:not(.is-all) ~ .slider-nav { display: none; }
  /* home-page strip is a single row, so the same 40px button reads much bigger
     against it than it does over the reviews gallery's two rows */
  .vibe-grid ~ .slider-nav {
    width: 30px; height: 30px;
    font-size: 1.25rem;
    padding: 0 0 3px;
  }
  /* the scroll-reveal observer is unreliable for items parked off to the right
     inside a clipping scroller — just show them */
  .gallery.is-all .gallery-item.reveal { opacity: 1; transform: none; }
  /* hover-only affordances never fire on touch — show the caption outright */
  .gallery.is-all .gallery-item img { filter: none; }
  .gallery.is-all .gallery-item .overlay { opacity: 1; padding: 20px var(--gutter); }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; }
  /* .steps is a slider from 768px down, so it must not be reset to 1 column */
  .features,
  .services-grid,
  .reviews-grid,
  .gallery { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .info-columns { grid-template-columns: 1fr; }
  .hero-stats { gap: 26px; }
  .hero-stats .stat b { font-size: 1.6rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .float-contact span { display: none; }
  .float-contact { padding: 16px; }
}