/* Unlimited Podcast Bangkok — shared stylesheet for index.html (EN) and th.html (TH).
   Tokens, spacing scale and contrast ratios are documented in DESIGN.md. */

:root {
  /* light ground (default) — all pairs AA verified */
  --bg: #FFFFFF;
  --surface: #F4F2ED;
  --ink: #14120E;
  --ink-secondary: #57544C;
  --ink-muted: #6E6A61;
  --accent: #8A5A10;            /* text-safe bronze */
  --line: #E5DFD5;
  /* inverted bands */
  --inverse-bg: #14120E;
  --inverse-ink: #F4F2ED;
  --inverse-secondary: #ABA79E;
  --inverse-accent: #D9A441;    /* bright gold, dark ground only */
  --inverse-line: #33312B;
  /* 8px spacing system */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-6: 48px; --s-8: 64px; --s-12: 96px; --s-16: 128px;
  /* Motion. 120ms/ease is the browser default feel; premium interfaces move slower
     and decelerate. One curve everywhere so nothing feels borrowed. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 280ms;
  --font-display: "Fraunces", serif;
  --font-ui: "Instrument Sans", sans-serif;
  --tier-grid: 0.85fr 1fr 1fr 1.15fr;
}
html[lang="th"] {
  /* Thai needs a taller line box and has no italic/small-caps tradition */
  --font-display: "Noto Serif Thai", "Fraunces", serif;
  --font-ui: "Noto Sans Thai", "Instrument Sans", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Kerning and standard ligatures are off by default in some engines at small sizes.
     Turning them on is invisible until you look at "ff", "Th" and capital pairs. */
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  text-rendering: optimizeLegibility;
}
html[lang="th"] body { line-height: 1.75; }
/* height:auto is load-bearing. The width/height ATTRIBUTES on <img>/<video> act as
   presentational hints that set the CSS height property. With `width: 100%` but no
   height rule, the element keeps its attribute height (e.g. 854px) and `aspect-ratio`
   is ignored entirely — which is how a 240px reel rendered 854px tall. */
img, video { display: block; max-width: 100%; height: auto; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: var(--s-4); }
section { padding-block: clamp(72px, 8.5vw, 152px); }

.eyebrow {
  color: var(--accent); font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--s-2);
}
html[lang="th"] .eyebrow { letter-spacing: 0.02em; text-transform: none; }
h1, h2 {
  font-family: var(--font-display); font-weight: 500;
  /* Fraunces is variable on opsz 9–144. Pushing the optical size at display sizes
     gives the display cut — finer hairlines, tighter apertures — instead of letting
     the browser render body-weight letterforms very large. */
  font-optical-sizing: auto; font-variation-settings: "opsz" 96;
  letter-spacing: -0.022em;
  text-wrap: balance;          /* stops a lone word dropping to its own line */
}
h2 { font-size: clamp(32px, 3.5vw, 50px); line-height: 1.08; max-width: 16ch; }
h2.wide { max-width: 22ch; }
html[lang="th"] h2 { line-height: 1.35; letter-spacing: 0; }
.lede {
  color: var(--ink-secondary); margin-top: var(--s-3);
  max-width: 54ch; font-size: 17px; line-height: 1.62;
  text-wrap: pretty;           /* no single-word last line */
}
a { color: inherit; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding-inline: var(--s-4); border-radius: 999px;
  font-family: var(--font-ui); font-size: 15px; font-weight: 500;
  text-decoration: none; color: var(--ink);
  border: 1px solid var(--ink); background: none; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* Fill on hover rather than fading out. A button that goes translucent reads as
   disabled; one that fills reads as inviting. */
.btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.solid:hover { background: #2A261D; border-color: #2A261D; color: var(--bg); }
.band .btn:hover { background: var(--inverse-ink); color: var(--inverse-bg); }
.band .btn.solid:hover { background: #FFFFFF; color: var(--inverse-bg); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.textlink {
  color: var(--accent); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 38%, transparent);
  padding-bottom: 3px;
  transition: border-bottom-color var(--dur) var(--ease);
}
.textlink:hover { border-bottom-color: currentColor; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip {
  position: absolute; left: -9999px; top: var(--s-1);
  background: var(--ink); color: var(--bg);
  padding: var(--s-1) var(--s-2); border-radius: var(--s-1);
  font-size: 14px; font-weight: 500; text-decoration: none; z-index: 20;
}
.skip:focus { left: var(--s-4); }

/* ---------- inverted band ---------- */
.band { background: var(--inverse-bg); color: var(--inverse-ink); }
.band .eyebrow { color: var(--inverse-accent); }
.band h1, .band h2, .band h3 { color: var(--inverse-ink); }
.band .lede, .band p { color: var(--inverse-secondary); }
.band .textlink { color: var(--inverse-accent); }
.band .btn { color: var(--inverse-ink); border-color: var(--inverse-ink); }
.band .btn.solid { background: var(--inverse-ink); color: var(--inverse-bg); border-color: var(--inverse-ink); }
.band .btn:focus-visible, .band a:focus-visible { outline-color: var(--inverse-accent); }

/* ---------- nav ---------- */
/* Sticky header. The hairline is absent at rest and fades in once the page has
   scrolled, so the top of the page stays open and the rule only appears when it has
   something to separate. max-width moves from the header to the nav so the background
   can run full-bleed while the content stays aligned with every other .wrap. */
header.wrap {
  position: sticky; top: 0; z-index: 30;
  max-width: none;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  transition: box-shadow var(--dur) var(--ease);
}
@supports not (backdrop-filter: blur(1px)) {
  header.wrap { background: var(--bg); }
}
.is-stuck header.wrap { box-shadow: 0 1px 0 var(--line); }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); padding-block: var(--s-3);
  flex-wrap: wrap;
  max-width: 1056px; margin-inline: auto;
}
/* Logo lockup: inline SVG mark + real text. The name stays selectable text rather
   than becoming part of an image, so it still counts as content. The mark's left loop
   uses currentColor, so it flips to cream automatically on a dark ground. */
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 20px; font-weight: 500;
  text-decoration: none; letter-spacing: -0.01em; color: var(--ink);
}
.wordmark .mark { flex: none; width: 30px; height: 30px; }
.wordmark .dot { color: var(--accent); }
.band .wordmark { color: var(--inverse-ink); }
@media (max-width: 420px) {
  .wordmark { font-size: 18px; gap: 8px; }
  .wordmark .mark { width: 26px; height: 26px; }
}
.nav-right { display: flex; align-items: center; gap: var(--s-2); }
.nav-links { display: flex; gap: var(--s-3); list-style: none; }
.nav-links a {
  position: relative; font-size: 14px; font-weight: 500;
  text-decoration: none; color: var(--ink-secondary);
  transition: color var(--dur) var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav .btn { height: 44px; padding-inline: var(--s-3); font-size: 14px; }

/* language switch */
.lang { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 36px; padding-inline: 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  text-decoration: none; color: var(--ink-secondary);
}
.lang a[aria-current="true"] { background: var(--ink); color: var(--bg); }
.menu-btn { display: none; }

/* ---------- hero: copy left, video right, faded into the page ---------- */
.hero { position: relative; overflow: hidden; padding-block: var(--s-12); }
.hero-media {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 46%; aspect-ratio: 16 / 9;
  background: var(--surface);
  border-radius: var(--s-1) 0 0 var(--s-1);
  /* only the left 10% dissolves — the picture stays a picture.
     Native 16:9 so the frame is not cropped; it is sized down instead. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%);
  mask-image: linear-gradient(to right, transparent 0%, #000 10%);
}
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.hero > .wrap { position: relative; z-index: 1; }
.hero-copy { max-width: 560px; }
.hero h1 {
  font-size: clamp(44px, 6.4vw, 86px); line-height: 0.98;
  letter-spacing: -0.032em;   /* large display type needs more negative tracking */
  font-variation-settings: "opsz" 144;
}
.hero h1 .l { display: block; }

/* The hero eyebrow lives INSIDE the h1 so the heading text contains the location
   keyword while the tagline keeps the visual weight. It must opt out of the display
   font and the 76px line-height it would otherwise inherit. */
.hero h1 .eyebrow { display: block; font-family: var(--font-ui); line-height: 1.4; }
.hero h1 .l b { font-weight: 500; font-style: italic; color: var(--accent); }
html[lang="th"] .hero h1 { font-size: 56px; line-height: 1.25; }
html[lang="th"] .hero h1 .l b { font-style: normal; }
.hero .lede { font-size: 19px; line-height: 1.6; max-width: 46ch; margin-top: var(--s-4); }
.hero .actions { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); flex-wrap: wrap; }
/* A typed em dash before each item is a character doing a rule's job. Real hairlines
   sit on the baseline grid and disappear cleanly when the row wraps. */
.trust {
  display: flex; gap: 0; list-style: none; margin-top: var(--s-8);
  color: var(--ink-muted); font-size: 13px; letter-spacing: 0.01em;
  flex-wrap: wrap; align-items: center; row-gap: var(--s-2);
}
.trust li { padding-inline: var(--s-3); border-inline-start: 1px solid var(--line); }
.trust li:first-child { padding-inline-start: 0; border-inline-start: 0; }
.trust a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.trust a:hover { color: var(--ink); }
.star { color: var(--accent); font-size: 14px; letter-spacing: 0.05em; }

/* play-with-sound control over the hero video */
.sound-btn {
  position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding-inline: var(--s-2);
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font-ui); font-size: 14px; font-weight: 500;
  background: rgba(20, 18, 14, 0.82); color: var(--inverse-ink);
  backdrop-filter: blur(4px);
}
.sound-btn:hover { background: rgba(20, 18, 14, 0.94); }
.sound-btn:focus-visible { outline: 2px solid var(--inverse-accent); outline-offset: 2px; }
.sound-btn .ico { color: var(--inverse-accent); font-size: 12px; }

/* ---------- before / after slider ----------
   Drag the handle to wipe between the raw frame and the graded one. The reveal is a
   clip-path on the top image, so neither picture is ever squashed. */
.ba { --pos: 50%; position: relative; max-width: 760px; margin: var(--s-8) auto 0; }
.ba-frame {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--s-1); overflow: hidden; background: var(--surface);
}
.ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-frame .before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; -webkit-appearance: none; appearance: none;
}
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 100%; }
.ba-range::-moz-range-thumb { width: 56px; height: 100%; border: 0; opacity: 0; }
.ba-range:focus-visible + .ba-handle { outline: 2px solid var(--accent); outline-offset: 4px; }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; margin-left: -1px; background: #FFFFFF; z-index: 2; pointer-events: none;
}
.ba-handle::after {
  content: "\2194"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: #FFFFFF; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; box-shadow: 0 2px 12px rgba(20, 18, 14, 0.35);
}
.ba-tag {
  position: absolute; top: var(--s-2); z-index: 2;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(20, 18, 14, 0.82); color: #F4F2ED;
}
.ba-tag.l { left: var(--s-2); }
.ba-tag.r { right: var(--s-2); color: #F0C266; }
.ba-note { font-size: 13px; color: var(--ink-muted); margin-top: var(--s-2); }

/* ---------- section grounds ----------
   Sections alternate white → tint → white so each one reads as its own block.
   Dark bands are reserved for the three moments that carry the sell:
   testimonials, editing, membership — plus the closing CTA. */
.tint {
  background: var(--surface);
  /* hairlines and placeholder fills are re-darkened: --line disappears on tint,
     and #6E6A61 on #E8E4DB only reaches 4.25:1 */
  --line: #D5CEBF;
  --ink-muted: #625E56;
}
.tint .ph { background: #E8E4DB; }
.tint .included-grid article:hover, .tint .included-grid article:focus-within { background: #FFFFFF; }
.tint .carousel-controls button:hover { background: #FFFFFF; }

/* ---------- video testimonials ---------- */
.tcards .slide { flex: 0 0 40%; }
.tcard-btn {
  position: relative; display: block; width: 100%; padding: 0;
  border: 0; border-radius: var(--s-1); overflow: hidden;
  background: #24221C; cursor: pointer; line-height: 0;
}
.tcard-btn img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tcard-btn .play-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(20, 18, 14, 0.72); color: var(--inverse-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; padding-left: 4px; transition: background-color 150ms ease;
}
.tcard-btn:hover .play-badge { background: var(--inverse-accent); color: var(--inverse-bg); }
.tcard-btn:focus-visible { outline: 2px solid var(--inverse-accent); outline-offset: 3px; }
.tplayer { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--s-1); background: #24221C; }
.tname { font-size: 17px; font-weight: 600; color: var(--inverse-ink); margin-top: var(--s-2); }
.tmeta { font-size: 14px; color: var(--inverse-secondary); margin-top: 2px; }

/* ---------- client photos carousel ----------
   One big slide at a time, name and following overlaid on the image. */
.photos { position: relative; }
.photos .track { gap: var(--s-3); }
.photos .slide { flex: 0 0 92%; }
.photos figure { position: relative; margin: 0; }
.photos figure img {
  width: 100%; height: clamp(300px, 56vh, 640px);
  object-fit: cover; object-position: 50% 32%;
  border-radius: 12px; background: #24221C; display: block;
}
.photos figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: var(--s-12) var(--s-4) var(--s-4);
  text-align: center; border-radius: 0 0 12px 12px;
  background: linear-gradient(to top, rgba(20,18,14,0.92) 0%, rgba(20,18,14,0.72) 45%, rgba(20,18,14,0) 100%);
}
.photos .who {
  display: block; font-family: var(--font-display);
  font-size: 40px; font-weight: 500; line-height: 1.1;
  letter-spacing: -0.01em; color: var(--inverse-ink);
}
.photos .followers {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: center; margin-top: var(--s-2);
  font-size: 16px; color: var(--inverse-ink);
}
/* Verified badge. Platform blue is a deliberate exception to the one-accent rule:
   it is a recognised UI convention, not brand colour. 5.98:1 on the scrim. */
.photos .verified {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: none;
  border-radius: 50%; background: #4DA6FF; color: #14120E;
  font-size: 11px; line-height: 1; font-weight: 600;
}
.photos .followers a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(244,242,237,0.45); }
.photos .followers a:hover { color: #7FC0FF; border-bottom-color: #7FC0FF; }
.photos .followers .count { color: var(--inverse-secondary); }

/* arrows sit on the image edges, like the reference */
.photos .edge {
  position: absolute; top: clamp(150px, 28vh, 320px); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  border: 0; cursor: pointer; font-size: 18px; line-height: 1;
  background: rgba(255,255,255,0.92); color: var(--ink);
  box-shadow: 0 4px 16px rgba(20,18,14,0.18);
}
.photos .edge:hover { background: #FFFFFF; }
.photos .edge[disabled] { opacity: 0.35; cursor: default; }
.photos .edge.prev { left: calc(var(--s-2) * -1); }
.photos .edge.next { right: calc(var(--s-2) * -1); }
.photos .edge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* this carousel keeps only dots below the image — its arrows live on the edges */
.photos .carousel-controls { justify-content: center; margin-top: var(--s-3); }

/* ---------- reels recorded here ----------
   All five side by side. A row rather than a carousel, because five 9:16 cards at
   ~198px fit the 1056px track exactly — controls for something that does not scroll
   are just noise. Scrolls with snap below 860px. */
.reels-row {
  display: flex; gap: var(--s-2); margin-top: var(--s-6);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-bottom: var(--s-1);
}
.reels-row::-webkit-scrollbar { display: none; }
.reel {
  flex: 0 0 calc((100% - 4 * var(--s-2)) / 5);
  scroll-snap-align: start;
  display: block; text-decoration: none; color: inherit;
}
/* .frame is a <span> — without display:block the video inside it mis-lays out */
.reel .frame { position: relative; display: block; background: #1C1A15; border-radius: 12px; }
.reel .shot {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 12px; background: #1C1A15;
  transition: transform 180ms ease;
}
.reel:hover .shot { transform: translateY(-4px); }
.reel .frame .badge {
  position: absolute; right: var(--s-1); bottom: var(--s-1);
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(20, 18, 14, 0.82); color: #F4F2ED;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  pointer-events: none;
}
.reel .views { display: block; margin-top: var(--s-2); }
.reel .views strong {
  font-family: var(--font-display); font-size: 26px; font-weight: 500;
  line-height: 1; letter-spacing: -0.01em; font-variant-numeric: lining-nums;
}
.reel .views span { font-size: 13px; color: var(--ink-secondary); margin-left: 4px; }
.reel .handle {
  display: inline-block; font-size: 13px; color: var(--accent); margin-top: 2px;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}

/* roll-call of everyone else who has recorded here */
.roster { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--inverse-line); }
.roster-label { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inverse-secondary); margin-bottom: var(--s-3); }
.roster ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; }
.roster li { font-size: 17px; color: var(--inverse-ink); }
.roster li a { text-decoration: none; border-bottom: 1px solid var(--inverse-line); padding-bottom: 2px; }
.roster li a:hover { color: var(--inverse-accent); border-bottom-color: var(--inverse-accent); }
.roster li .sub { font-size: 14px; color: var(--inverse-secondary); }

/* ---------- everything included (hover pop-out) ---------- */
.included-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: var(--s-8); }
.included-grid article {
  border-top: 1px solid var(--line);
  padding: var(--s-3) var(--s-2) var(--s-4);
  margin-inline: calc(var(--s-2) * -1);
  border-radius: var(--s-1);
  background: transparent;
  transition: background-color var(--dur) var(--ease),
              border-top-color var(--dur) var(--ease);
}
/* No lift, no drop shadow. A card that jumps and casts a shadow is a 2018 SaaS
   gesture; the quieter signal is the rule above it taking the accent colour. */
.included-grid article:hover, .included-grid article:focus-within {
  background: var(--surface);
  border-top-color: var(--accent);
}
.included-grid .num { color: var(--ink-muted); font-size: 13px; font-variant-numeric: tabular-nums; display: block; margin-bottom: var(--s-2); transition: color var(--dur) var(--ease); }
.included-grid article:hover .num { color: var(--accent); }
.included-grid h3 { font-size: 18px; font-weight: 600; margin-bottom: var(--s-1); }
.included-grid p { color: var(--ink-secondary); font-size: 15px; }

/* On the dark band the cards become real filled blocks, not hairline-topped columns —
   a top rule alone all but disappears against near-black.
   Five cards: 3 across, then 2 across, both rows filling the width. */
.band .included-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-2);
}
.band .included-grid article { grid-column: span 2; }
.band .included-grid article:nth-child(4),
.band .included-grid article:nth-child(5) { grid-column: span 3; }
.band .included-grid article {
  margin-inline: 0;
  padding: var(--s-3) var(--s-3) var(--s-4);
  background: #1C1A15;
  border: 1px solid #3A372E;
  border-radius: 12px;
}
.band .included-grid .num {
  color: var(--inverse-accent); font-weight: 600; letter-spacing: 0.08em;
}
.band .included-grid h3 { font-size: 20px; color: var(--inverse-ink); }
.band .included-grid p { color: #C6C2B8; }
.band .included-grid article:hover, .band .included-grid article:focus-within {
  background: #24221B;
  border-color: var(--inverse-accent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

/* ---------- studio sets carousel ---------- */
#sets { padding-block: var(--s-8); }
.sets-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.sets-head h2 { font-size: 38px; line-height: 42px; }
.carousel { margin-top: var(--s-4); }
.track {
  display: flex; gap: var(--s-3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
  padding-bottom: var(--s-1);
}
.track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 76%; scroll-snap-align: start; }
/* Half the viewport height, so the room is visible without scrolling.
   object-position sits below centre because these sets have empty wall up top. */
.slide img {
  width: 100%; height: clamp(280px, 50vh, 620px);
  object-fit: cover; object-position: 50% 62%;
  border-radius: var(--s-1); background: var(--surface);
}
.slide .tag { display: block; color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-top: var(--s-2); }
html[lang="th"] .slide .tag { letter-spacing: 0; text-transform: none; }
.slide h3 { font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.2; margin-top: 4px; }
.slide p { color: var(--ink-secondary); font-size: 16px; margin-top: var(--s-1); max-width: 60ch; }
.carousel-controls { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.carousel-controls button {
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--ink); background: none; color: var(--ink);
  font-size: 16px; cursor: pointer; line-height: 1;
}
.carousel-controls button:hover { background: var(--surface); }
.carousel-controls button[disabled] { opacity: 0.3; cursor: default; }
.dots { display: flex; gap: var(--s-1); margin-left: var(--s-1); }
/* inactive dot is #9C9386 — 3.03:1 on white, the minimum WCAG allows for a
   state-carrying control. Do not lighten it to --line. */
.dots button { width: 32px; height: 4px; border-radius: 2px; border: 0; padding: 0; background: #9C9386; cursor: pointer; }
.dots button[aria-current="true"] { background: var(--accent); }
.sets-foot { margin-top: var(--s-6); }

/* ---------- editing (inverted band) ---------- */
.post-head { max-width: 660px; }
.post-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); margin-top: var(--s-8); }
/* Plain headings and a rule — no boxes. The heading is a link to the same place as the
   column's CTA, so either one gets you there. */
.post-group > h3 {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; padding-bottom: var(--s-2);
}
.post-group > h3 a { text-decoration: none; color: inherit; }
.post-group > h3 a:hover { color: var(--accent); }
.post-group.primary > h3 a:hover { color: var(--accent); }
.post-group .go { margin-top: var(--s-3); }
/* fill-on-hover: the outline button floods to solid ink instead of just fading */
.post-group .go .btn {
  position: relative; overflow: hidden; z-index: 0;
  transition: color 200ms ease;
}
.post-group .go .btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.post-group .go .btn:hover { color: var(--bg); opacity: 1; }
.post-group .go .btn:hover::before { transform: scaleY(1); }
html[lang="th"] .post-group > h3 { letter-spacing: 0; text-transform: none; }
/* light ground is the default; the .band overrides below cover the dark case */
.post-group.primary > h3 { color: var(--accent); border-bottom: 2px solid var(--accent); }
.post-group.optional > h3 { color: var(--ink); border-bottom: 1px solid var(--line); }
.post-group dt { font-size: 18px; font-weight: 600; color: var(--ink); margin-top: var(--s-3); }
.post-group dd { font-size: 15px; color: var(--ink-secondary); margin-top: 4px; padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.band .post-group.primary > h3 { color: var(--inverse-accent); border-bottom-color: var(--inverse-accent); }
.band .post-group.optional > h3 { color: var(--inverse-ink); border-bottom-color: var(--inverse-line); }
.band .post-group dt { color: var(--inverse-ink); }
.band .post-group dd { color: var(--inverse-secondary); border-bottom-color: var(--inverse-line); }
.post-foot { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); flex-wrap: wrap; }

/* ---------- results carousel ---------- */
.ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--ink-muted);
  font-size: 13px; text-align: center; padding: var(--s-2);
  border-radius: var(--s-1);
}
.results-carousel .slide { flex: 0 0 100%; }
.case { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s-6); align-items: center; }
.case .shot {
  width: 100%; height: clamp(260px, 42vh, 460px);
  object-fit: cover; border-radius: var(--s-1); background: var(--surface);
}
.case blockquote { font-family: var(--font-display); font-size: 26px; line-height: 1.35; font-weight: 500; }
html[lang="th"] .case blockquote { font-size: 22px; line-height: 1.6; }
.case figcaption { color: var(--ink-secondary); font-size: 15px; margin-top: var(--s-3); display: flex; align-items: center; gap: var(--s-2); }
.case .avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--surface); flex: none; font-size: 11px; }
.metrics { display: flex; gap: var(--s-4); margin-top: var(--s-4); flex-wrap: wrap; }
.metrics div { border-top: 1px solid var(--line); padding-top: var(--s-2); min-width: 116px; }
.metrics strong { display: block; font-family: var(--font-display); font-size: 34px; font-weight: 500; line-height: 1; }
.metrics span { display: block; color: var(--ink-muted); font-size: 13px; margin-top: 4px; }

/* ---------- google reviews ---------- */
.reviews-head { max-width: 620px; }
.reviews-mount { margin-top: var(--s-8); min-height: 200px; }
.reviews-fallback {
  border: 1px dashed var(--line); border-radius: var(--s-1);
  padding: var(--s-6); text-align: center; color: var(--ink-secondary);
}

/* ---------- pricing ---------- */
.phead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.tiers { display: grid; grid-template-columns: var(--tier-grid); column-gap: var(--s-4); align-items: end; }
.tier { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.tier.popular { border-top: 2px solid var(--accent); }

/* Pricing sits on tint, where a hairline all but disappears. Give the columns real
   edges: white cards, a visible border, and the featured tier inverted so the choice
   is obvious before anyone reads a word. */
#pricing .tier {
  border-radius: 14px; padding: var(--s-4) var(--s-3) var(--s-6);
  border: 1px solid transparent; border-top: 1px solid var(--line);
}
/* Solo is naked — an outlined box with no fill, so the three tiers read as a set
   while the fill (none / silver / gold) still carries the hierarchy. */
#pricing .tier.solo {
  background: none; border: 1px solid #BDB5A4; border-radius: 14px;
}
/* Podcast is silver */
#pricing .tier.silver {
  background: #EAE8E3; border: 1px solid #C4BFB4; border-radius: 14px;
}
#pricing .tier.silver .cadence { color: #565248; }
/* Premium is gold — but a LIGHT gold. Saturated #D9A441 behind body copy technically
   passes contrast and still reads badly: the chroma fights the letterforms. The pale
   tint gives ink 14.7:1 and stays unmistakably gold. Solid gold is kept for the flag
   chip, where it is a small block, not a reading surface. */
#pricing .tier.popular {
  /* Paler gold and a softer edge. The tier still reads as the gold one, but a
     saturated fill next to a saturated border is what made it look shouty. */
  background: #F6EBC9; border: 1px solid #D8BE72;
  color: var(--ink);
}
#pricing .tier.popular .flag {
  display: inline-block; color: var(--ink);
  background: #E8C46A; border-radius: 999px;
  padding: 5px 13px; margin-bottom: var(--s-2);
  min-height: 0; letter-spacing: 0.10em; font-size: 12px;
}
#pricing .tier.popular .for { color: var(--ink); }
#pricing .tier.popular .cadence { color: #57503E; }
#pricing .tier.popular .btn { background: var(--ink); color: #F4F2ED; border-color: var(--ink); }
/* the Premium name is too long to nowrap — it is allowed to run to two lines */
#pricing .tier.popular h3 { font-size: 14px; letter-spacing: 0.06em; font-weight: 600; white-space: normal; }
#pricing .tier.popular .price { font-size: 72px; }
#pricing .tier.popular h3, #pricing .tier.popular .price { color: var(--ink); }
#pricing .tier.popular .btn:focus-visible { outline-color: var(--inverse-accent); }
.flag { color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--s-1); min-height: 16px; }
html[lang="th"] .flag, html[lang="th"] .tier h3 { letter-spacing: 0; text-transform: none; }
.tier h3 { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--s-1); white-space: nowrap; }
.tier .for { color: var(--ink-secondary); font-size: 14px; line-height: 20px; min-height: 60px; margin-bottom: var(--s-2); }
.price { font-family: var(--font-display); font-size: 58px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; font-variation-settings: "opsz" 144; font-variant-numeric: lining-nums; }
.popular .price { font-size: 72px; }
.price .cur { font-size: 0.42em; vertical-align: 0.95em; margin-right: 2px; }
.cadence { color: var(--ink-muted); font-size: 13px; line-height: 16px; margin: var(--s-1) 0 var(--s-3); }
.tier .btn { width: 100%; white-space: nowrap; padding-inline: var(--s-2); }
.ftable { margin-top: var(--s-6); }
.compare { display: block; width: 100%; border-collapse: collapse; }
.compare thead, .compare tbody { display: block; }
.compare tr {
  display: grid; grid-template-columns: var(--tier-grid); column-gap: var(--s-4);
  align-items: center; min-height: var(--s-6); border-bottom: 1px solid var(--line);
}
.compare th, .compare td { font-size: 15px; font-weight: 400; text-align: left; font-variant-numeric: tabular-nums; padding-block: var(--s-1); }
.compare tbody th { color: var(--ink-secondary); }
.compare td { text-align: center; }
/* Column banding — with four columns and a dozen rows, the eye needs vertical guides.
   Solo gets a neutral band, Premium a warm one that matches its highlighted price card,
   and Podcast stays clear between them, so all three read as separate columns. */
.compare td:nth-child(3), .compare thead th:nth-child(3) { background: #E4E2DD; }
.compare td:nth-child(4), .compare thead th:nth-child(4) { background: #E9D49B; font-weight: 500; }
.compare td:nth-child(3), .compare td:nth-child(4),
.compare thead th:nth-child(3), .compare thead th:nth-child(4) { padding-inline: var(--s-1); }
/* the members-only row is a membership statement, so it goes black */
.compare tr.members td {
  background: var(--inverse-bg); color: var(--inverse-ink);
  font-weight: 500; border-radius: var(--s-1);
}
.compare tr.group th { background: none; }
.compare td.on::before { content: "✓"; }
.compare td.off::before { content: "—"; color: var(--ink-muted); }
.compare tr.group { border-bottom-color: var(--ink); margin-top: var(--s-4); }
.compare tr.group th { grid-column: 1 / -1; color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
html[lang="th"] .compare tr.group th, html[lang="th"] .compare thead th { letter-spacing: 0; text-transform: none; }
.compare thead tr { display: none; border-bottom: 1px solid var(--ink); }
.compare thead th { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.compare thead th + th { text-align: center; }
.footnote { color: var(--ink-muted); font-size: 13px; margin-top: var(--s-3); max-width: 660px; }

/* ---------- savings maths: the whole argument for a membership ---------- */
.per-session { font-size: 13px; color: var(--accent); font-weight: 500; margin: 0 0 var(--s-3); }
.savings {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6); margin-top: var(--s-8);
  padding-top: var(--s-4); border-top: 1px solid var(--ink);
}
.savings div { min-width: 0; }
.savings .lbl { display: block; font-size: 13px; color: var(--ink-secondary); }
.savings .amt {
  display: block; margin-top: var(--s-1);
  font-family: var(--font-display); font-size: 34px; font-weight: 500;
  line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums;
}
.savings .amt .cur { font-size: 0.44em; vertical-align: 0.9em; margin-right: 2px; }
.savings .was .amt { color: var(--ink-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.savings .keep .amt { color: var(--accent); }
.savings .keep .lbl { color: var(--accent); font-weight: 600; }

/* ---------- member proof ---------- */
.proof-clips { display: flex; gap: var(--s-2); margin-top: var(--s-6); overflow-x: auto; scrollbar-width: none; }
.proof-clips::-webkit-scrollbar { display: none; }
.proof-clips > * { flex: 0 0 calc((100% - 3 * var(--s-2)) / 4); }
.proof-clips .ph { width: 100%; aspect-ratio: 9 / 16; }
.proof-note { font-size: 13px; color: var(--ink-muted); margin-top: var(--s-3); }

/* ---------- membership (inverted band) ---------- */
.member { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; margin-top: var(--s-8); }
.member-list { list-style: none; }
.member-list li { padding-block: var(--s-3); border-top: 1px solid var(--inverse-line); display: grid; grid-template-columns: 20px 1fr; gap: var(--s-2); }
.member-list li:last-child { border-bottom: 1px solid var(--inverse-line); }
.member-list .mark { color: var(--inverse-accent); }
/* The headline benefit — free reels — gets the gold treatment. It is the reason the
   membership exists, so it should not read as item one of six. */
.member-list li.hero-benefit {
  background: var(--inverse-accent);
  border: 0; border-radius: 12px;
  padding: var(--s-3); margin-bottom: var(--s-2);
  grid-template-columns: 22px 1fr;
}
.member-list li.hero-benefit + li { border-top: 1px solid var(--inverse-line); }
.member-list li.hero-benefit .mark { color: var(--inverse-bg); }
.member-list li.hero-benefit strong { color: var(--inverse-bg); font-size: 19px; }
.member-list li.hero-benefit span.d { color: #3A2E10; }
.member-list strong { display: block; font-size: 17px; font-weight: 600; color: var(--inverse-ink); }
.member-list span.d { display: block; font-size: 15px; color: var(--inverse-secondary); margin-top: 2px; }
.member-cta { margin-top: var(--s-6); display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.member-price { margin-top: var(--s-6); }
.member-price .from { display: block; font-size: 13px; color: var(--inverse-secondary); }
.member-price .amt {
  font-family: var(--font-display); font-size: 56px; font-weight: 500;
  line-height: 1; letter-spacing: -0.02em; color: var(--inverse-ink);
  font-variant-numeric: lining-nums;
}
.member-price .amt .cur { font-size: 0.42em; vertical-align: 0.95em; margin-right: 2px; }
.member-price .per { font-size: 13px; color: var(--inverse-secondary); margin-top: var(--s-1); }

/* ---------- how it works ---------- */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); margin-top: var(--s-8); }
.how-grid li { list-style: none; border-top: 1px solid var(--line); padding-top: var(--s-3); }
.how-grid .n { display: block; font-family: var(--font-display); font-size: 28px; color: var(--accent); line-height: 1.1; margin-bottom: var(--s-1); }
.how-grid h3 { font-size: 18px; font-weight: 600; }
.how-grid p { color: var(--ink-secondary); font-size: 15px; margin-top: 4px; }
.how-foot { margin-top: var(--s-6); }

/* ---------- visit ---------- */
.visit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; }
.visit .pair { padding-block: var(--s-3); border-top: 1px solid var(--line); display: grid; grid-template-columns: 140px 1fr; gap: var(--s-3); }
.visit dt { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 2px; }
html[lang="th"] .visit dt { letter-spacing: 0; text-transform: none; }
.visit dd { color: var(--ink-secondary); font-size: 15px; }
.visit dd a { color: var(--accent); }
.visit .map-cta { margin-top: var(--s-4); }
.nearby { color: var(--ink-muted); font-size: 14px; margin-top: var(--s-6); }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding-block: var(--s-3); cursor: pointer; list-style: none; font-size: 17px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-size: 24px; color: var(--ink-muted); }
.faq details[open] summary::after { content: "–"; color: var(--accent); }
.faq details p { color: var(--ink-secondary); padding-bottom: var(--s-3); max-width: 640px; }
.faq .more { margin-top: var(--s-4); }

/* ---------- final CTA + footer ---------- */
.cta-band .actions { display: flex; gap: var(--s-3); margin-top: var(--s-4); flex-wrap: wrap; }
footer { border-top: 1px solid var(--line); }
footer .inner { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding-block: var(--s-4); font-size: 13px; color: var(--ink-muted); flex-wrap: wrap; }
footer a { color: var(--ink-muted); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero-media { width: 46%; }
  html[lang="th"] .hero h1 { font-size: 44px; }
}
@media (max-width: 860px) {
  .visit, .post-cols, .case, .member { grid-template-columns: 1fr; }
  .included-grid, .how-grid { grid-template-columns: 1fr 1fr; }
  .band .included-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band .included-grid article,
  .band .included-grid article:nth-child(4),
  .band .included-grid article:nth-child(5) { grid-column: auto; }
  .slide { flex-basis: 86%; }
  .photos .slide { flex-basis: 96%; }
  .reel { flex-basis: calc((100% - 2 * var(--s-2)) / 3); }
  .results-carousel .slide { flex-basis: 100%; }
  .case .shot { height: 260px; }
}
@media (max-width: 720px) {
  section { padding-block: var(--s-8); }
  .menu-btn { display: inline-flex; }
  .nav-links { display: none; order: 4; flex-basis: 100%; flex-direction: column; gap: 0; padding-bottom: var(--s-1); }
  .nav-links[data-open] {
    display: flex;
    /* sticky header + long menu on a short phone would otherwise be unscrollable */
    max-height: calc(100vh - 140px); overflow-y: auto;
  }
  .nav-links li { border-top: 1px solid var(--line); }
  .nav-links a { display: block; padding-block: var(--s-2); font-size: 16px; color: var(--ink); }
  .nav .btn:not(.menu-btn) { padding-inline: var(--s-2); }
  /* copy first, video immediately under it — the promise should lead on a phone */
  .hero { padding-block: var(--s-8); display: flex; flex-direction: column; }
  .hero > .wrap { order: 1; }
  .hero-media {
    order: 2;
    position: static; transform: none; width: 100%; margin-top: var(--s-6);
    aspect-ratio: 16 / 9; border-radius: var(--s-1);
    -webkit-mask-image: none; mask-image: none;
  }
  .sound-btn { left: var(--s-2); bottom: var(--s-2); font-size: 13px; }
  .photos .slide { flex-basis: 100%; }
  .photos figure img { height: clamp(260px, 46vh, 420px); border-radius: var(--s-1); }
  .photos figcaption { padding: var(--s-8) var(--s-3) var(--s-3); border-radius: 0 0 var(--s-1) var(--s-1); }
  .photos .who { font-size: 26px; }
  .photos .followers { font-size: 14px; }
  .photos .edge { width: 40px; height: 40px; top: auto; bottom: calc(50% + 10px); }
  .photos .edge.prev { left: 4px; }
  .photos .edge.next { right: 4px; }
  .tcard-btn .play-badge { width: 52px; height: 52px; font-size: 16px; }
  .reel { flex-basis: calc((100% - 1 * var(--s-2)) / 2); }
  .reel .views strong { font-size: 22px; }
  .ba { max-width: none; }
  .ba-handle::after { width: 38px; height: 38px; font-size: 16px; }
  #pricing .tier { padding: var(--s-3); }
  .roster ul { gap: var(--s-1) var(--s-3); }
  .roster li { font-size: 15px; }
  .ba { grid-template-columns: 1fr; }
  .member-price .amt { font-size: 44px; }
  .savings { grid-template-columns: 1fr; gap: var(--s-3); }
  .savings .amt { font-size: 28px; }
  .proof-clips > * { flex-basis: 46%; }
  .lede, .hero .lede { max-width: none; }
  .footnote { max-width: none; }
  .btn { padding-inline: var(--s-3); }
  .actions .btn, .post-foot .btn, .member-cta .btn, .how-foot .btn { width: 100%; }
  .actions, .post-foot, .member-cta { gap: var(--s-2); }
  .hero-copy { max-width: none; }
  html[lang="th"] .hero h1 { font-size: 34px; }
  h2 { font-size: 32px; line-height: 40px; }
  .stats { grid-template-columns: 1fr; gap: var(--s-4); }
  .stats strong { font-size: 44px; }
  .included-grid, .how-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .band .included-grid { grid-template-columns: 1fr; }
  .slide { flex-basis: 92%; }
  .slide img { height: clamp(240px, 42vh, 400px); }
  .slide h3 { font-size: 24px; }
  .sets-head h2 { font-size: 32px; line-height: 40px; }
  .case blockquote { font-size: 21px; }
  .metrics { gap: var(--s-3); }
  .metrics strong { font-size: 28px; }
  .phead { flex-direction: column; align-items: flex-start; margin-bottom: var(--s-6); }
  .tiers { grid-template-columns: 1fr; row-gap: var(--s-6); }
  .tiers .spacer { display: none; }
  .tier .for { min-height: 0; }
  .price { font-size: 48px; }
  .popular .price { font-size: 56px; }
  .ftable { margin-top: var(--s-6); }
  .compare tr { grid-template-columns: 1.6fr 1fr 1fr 1fr; column-gap: var(--s-1); }
  .compare th, .compare td { font-size: 14px; }
  .compare thead tr { display: grid; }
  .visit .pair { grid-template-columns: 1fr; gap: var(--s-1); }
  /* --- mobile pass: everything below is about a 390px screen --- */
  h2 { font-size: 30px; line-height: 36px; max-width: none; }
  .eyebrow { font-size: 12px; }
  .lede, .footnote, .visit dd, .faq details p { font-size: 15px; line-height: 1.6; }
  .nav { gap: var(--s-1); }
  .wordmark { font-size: 17px; }
  .nav .btn { font-size: 13px; padding-inline: 14px; }
  .hero h1 { font-size: 40px; line-height: 44px; letter-spacing: -0.015em; }
  .hero .lede { font-size: 16px; }
  .trust { gap: var(--s-2); font-size: 12px; }
  .band .included-grid article { padding: var(--s-3) var(--s-2) var(--s-3); }
  .band .included-grid h3 { font-size: 18px; }
  .post-cols { gap: var(--s-4); }
  .post-group dt { font-size: 17px; }
  .post-group dd { font-size: 15px; }
  .savings .amt { font-size: 26px; }
  .slide h3 { font-size: 22px; }
  .slide p { font-size: 15px; }
  .photos .who { font-size: 24px; }
  .metrics strong { font-size: 26px; }
  .how-grid h3, .included-grid h3 { font-size: 17px; }
  .visit .pair { padding-block: var(--s-2); }
  .faq summary { font-size: 16px; padding-block: var(--s-2); }
  .tier h3 { font-size: 12px; }
  .tier .for { font-size: 14px; }
  .cadence { font-size: 12px; }
  footer .inner { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .reviews-mount { margin-top: var(--s-4); }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .track { scroll-behavior: auto; }
  .included-grid article { transition: none; }
  .included-grid article:hover { transform: none; }
}

/* ================= interior pages: studio-sets.html, studio-location.html =========
   These reuse the landing page's components wherever possible. Only the pieces below
   are new. Section grounds still alternate — no two adjacent sections share one. */

/* Page head — the interior-page equivalent of the hero. Copy only, no media, because
   both pages put their strongest image in the first content section instead. */
.page-head { padding-block: var(--s-12) var(--s-8); }
.page-head h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(38px, 5.4vw, 60px); line-height: 1.05; letter-spacing: -0.02em;
  max-width: 15ch;
}
.page-head .lede { font-size: 18px; max-width: 540px; margin-top: var(--s-3); }
.page-head .actions { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); flex-wrap: wrap; }

/* Set profile — copy one side, photo the other, alternating down the page so the eye
   zig-zags instead of scanning one rigid column. */
.set-intro { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s-8); align-items: center; }
.set-intro.reverse .set-copy { order: 2; }
.set-intro.reverse .set-hero { order: 1; }
.set-hero img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; }
.set-facts { list-style: none; margin-top: var(--s-4); }
.set-facts li {
  padding-block: var(--s-2); border-top: 1px solid var(--line);
  color: var(--ink-secondary); font-size: 15px; line-height: 22px;
}
.set-facts li strong { color: var(--ink); font-weight: 600; }
.set-copy .go { margin-top: var(--s-4); }

/* Gallery — six 16:9 slots per set. Placeholders carry the exact filename they expect,
   so filling them is a copy-and-rename job, not a guess. */
.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2); margin-top: var(--s-8);
}
.gallery img, .gallery .ph {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--s-1);
}
.gallery .ph { font-size: 12px; font-family: var(--font-ui); }

/* Set comparison table. .compare paints columns 3 and 4 silver and gold because on the
   pricing table those columns ARE the silver and gold tiers. Here they are just sets,
   so the tier colouring is switched off — otherwise New York and Paris would read as
   upgrades of Shanghai, which is exactly the wrong message. */
.setcompare td:nth-child(3), .setcompare thead th:nth-child(3),
.setcompare td:nth-child(4), .setcompare thead th:nth-child(4) {
  background: none; font-weight: 400;
}

/* Location fact grid — two columns of the landing page's .visit pairs. */
.factgrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-8); margin-top: var(--s-8); }
.factgrid .pair {
  padding-block: var(--s-3); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 110px 1fr; gap: var(--s-3);
}
.factgrid dt { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 2px; }
html[lang="th"] .factgrid dt { letter-spacing: 0; text-transform: none; }
.factgrid dd { color: var(--ink-secondary); font-size: 15px; line-height: 22px; }
.factgrid dd a { color: var(--accent); }
.band .factgrid .pair { border-top-color: var(--inverse-line); }
.band .factgrid dt { color: var(--inverse-ink); }
.band .factgrid dd { color: var(--inverse-secondary); }
.band .factgrid dd a { color: var(--inverse-accent); }

/* Taxi line — the one instruction someone reads out loud, so it gets its own weight. */
.route-note {
  margin-top: var(--s-6); padding: var(--s-3);
  background: var(--surface); border-radius: var(--s-1);
  color: var(--ink-secondary); font-size: 15px; max-width: 640px;
}
.route-note strong { color: var(--ink); font-weight: 600; }
.tint .route-note { background: #E8E4DB; }

/* Nearby list — local SEO that reads like travel advice rather than a keyword dump. */
.nearby-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); list-style: none; margin-top: var(--s-8); }
.nearby-grid li { border-top: 1px solid var(--line); padding-top: var(--s-2); }
.nearby-grid strong { display: block; font-size: 16px; font-weight: 600; }
.nearby-grid span { display: block; color: var(--ink-secondary); font-size: 14px; margin-top: 2px; }

@media (max-width: 860px) {
  .set-intro { grid-template-columns: 1fr; gap: var(--s-4); }
  .set-intro.reverse .set-copy, .set-intro.reverse .set-hero { order: 0; }
  .factgrid { grid-template-columns: 1fr; column-gap: 0; }
  .nearby-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .page-head { padding-block: var(--s-8) var(--s-6); }
  .page-head h1 { font-size: 36px; max-width: none; }
  .page-head .lede { font-size: 16px; }
  .page-head .actions .btn { width: 100%; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .factgrid .pair { grid-template-columns: 1fr; gap: var(--s-1); }
  .nearby-grid { grid-template-columns: 1fr; }
}

/* ---------- set CTA pair: book, or ask about this specific set ----------
   The booking system does not carry the set choice through, so the WhatsApp link
   pre-writes the set name into the message. That one works today regardless. */
.set-cta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

/* ---------- "filmed on this set" ----------
   Proof that belongs to the room, not to the studio in general. Three across, because
   two looks thin and four makes each too small to read a face in. */
.filmed { margin-top: var(--s-8); }
.filmed-h {
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-secondary); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line);
}
html[lang="th"] .filmed-h { letter-spacing: 0; text-transform: none; }
.filmed-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-top: var(--s-3); }
.filmed-row .ph, .filmed-item img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--s-1);
}
.filmed-item { display: block; text-decoration: none; color: inherit; }
.filmed-item .who { display: block; font-size: 15px; font-weight: 600; margin-top: var(--s-1); }
.filmed-item .what { display: block; font-size: 13px; color: var(--ink-secondary); }
.filmed-item:hover .who { color: var(--accent); }

/* ---------- technical specs ----------
   Two columns of label/value. Placeholder brackets are deliberately loud — an
   unfilled spec on a page aimed at agencies is worse than no page at all. */
.specs { margin-top: var(--s-6); }
.specs dd { font-variant-numeric: tabular-nums; }

/* ---------- arrival photos ----------
   Four numbered steps of the walk in. The counter is the point: these are read in
   order, by someone standing on the street. */
.arrival {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2);
  margin-top: var(--s-6); list-style: none; counter-reset: arrival;
}
.arrival li { counter-increment: arrival; }
.arrival .ph, .arrival img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--s-1);
}
.arrival span {
  display: block; margin-top: var(--s-1);
  font-size: 13px; color: var(--ink-secondary); line-height: 18px;
}
.arrival span::before { content: counter(arrival) ". "; color: var(--accent); font-weight: 600; }

/* The taxi block became two paragraphs, so it needs spacing between them. */
.route-note p + p { margin-top: var(--s-2); }

@media (max-width: 860px) {
  .filmed-row { grid-template-columns: repeat(3, 1fr); }
  .arrival { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
}
@media (max-width: 720px) {
  .set-cta { align-items: flex-start; flex-direction: column; gap: var(--s-2); }
  .set-cta .btn { width: 100%; }
  .filmed-row { grid-template-columns: 1fr; }
  .arrival { grid-template-columns: repeat(2, 1fr); }
}

/* Photographs answer the cursor. 1.5% over 480ms is under the threshold where it
   reads as an animation — it reads as the image being alive. The frame needs
   overflow:hidden or the scaled image spills past its own corners. */
.photos figure, .set-hero { overflow: hidden; border-radius: var(--s-1); }
.gallery img { overflow: hidden; }
.photos figure img, .set-hero img, .gallery img { transition: transform 480ms var(--ease); }
.photos figure:hover img, .set-hero:hover img, .gallery img:hover { transform: scale(1.015); }
@media (prefers-reduced-motion: reduce) {
  .photos figure img, .set-hero img, .gallery img { transition: none; }
  .photos figure:hover img, .set-hero:hover img, .gallery img:hover { transform: none; }
}

/* ---------- reveal on scroll ----------
   Deliberately small: 10px and a fade. A big slide-up is a template gesture; the
   point here is only that the page feels composed rather than dumped on screen.

   Progressive enhancement: nothing is hidden until JS adds .js-reveal to <html>, so
   a failed script or a crawler still sees every word. Skipped entirely under
   prefers-reduced-motion — see site.js. */
.js-reveal main section > .wrap > *,
.js-reveal main section > .wrap > div > .eyebrow,
.js-reveal main section > .wrap > div > h2,
.js-reveal main section > .wrap > div > .lede {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.js-reveal main section.in > .wrap > *,
.js-reveal main section.in > .wrap > div > .eyebrow,
.js-reveal main section.in > .wrap > div > h2,
.js-reveal main section.in > .wrap > div > .lede {
  opacity: 1;
  transform: none;
}
/* a short stagger down the first few blocks, then everything lands together */
.js-reveal main section.in > .wrap > *:nth-child(2) { transition-delay: 70ms; }
.js-reveal main section.in > .wrap > *:nth-child(3) { transition-delay: 140ms; }
.js-reveal main section.in > .wrap > *:nth-child(n+4) { transition-delay: 190ms; }