/* ==========================================================================
   SAVATANG TATTOO SAMUI - DARK EDITORIAL DESIGN SYSTEM
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&display=swap');

:root {
  /* --- Core palette -----------------------------------------------------
     Target mix: ~60% black, 20% gold, 20% white, 10% red, warm grey filling
     the gaps. The neutrals carry a little red+yellow so they sit *under* the
     gold rather than fighting it - the old ones were faintly blue.
     -------------------------------------------------------------------- */

  /* Black 60% - four steps of warm near-black for stacking sections */
  --bg-primary: #0a0908;
  --bg-secondary: #100e0c;
  --bg-tertiary: #15120e;
  --bg-card: #17130f;
  --bg-card-hover: #1f1a14;
  --bg-paper: #ece8dc;

  /* White 20% + the grey in between */
  --text-primary: #f7f4ed;
  --text-secondary: #a49d90;
  --text-muted: #6f695e;
  --text-dark: #14110c;

  /* Gold 20% */
  --accent-gold: #c8a13f;
  --accent-gold-light: #e8cf90;
  --accent-gold-deep: #7d6218;
  --accent-gold-rgb: 200, 161, 63;

  /* Red 10% - deep tattoo-ink red, used only in small repeated marks */
  --accent-red: #b81d24;
  --accent-red-light: #dd3b3b;
  --accent-red-rgb: 184, 29, 36;

  /* Hairlines pick up a trace of gold so dividers read warm, not grey */
  --border-subtle: rgba(200, 161, 63, 0.11);
  --border-light: rgba(255, 255, 255, 0.13);
  --border-gold: rgba(200, 161, 63, 0.38);
  --tape-color: rgba(255, 255, 255, 0.22);
  --tape-border: rgba(255, 255, 255, 0.3);
  
  /* Typography */
  /* One family across the whole site. Kanit ships matching Latin and Thai cuts,
     so a mixed EN/TH line stays on a single face instead of falling back per
     glyph. The four roles are kept as separate vars - every rule already points
     at them - and are now separated by weight and tracking rather than family. */
  --font-serif: 'Kanit', 'Noto Serif Thai', Georgia, serif;
  --font-sans: 'Kanit', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Kanit', 'Noto Sans Thai', monospace;
  --font-hand: 'Kanit', 'Noto Sans Thai', cursive;
  
  /* Transitions */
  --transition-smooth: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s ease;
  
  /* Shadows */
  --shadow-polaroid: 0 16px 35px rgba(0, 0, 0, 0.6), 0 5px 15px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 25px rgba(var(--accent-gold-rgb), 0.18);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  letter-spacing: -0.01em;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(34, 28, 20, 0.55) 0%, transparent 60%),
    radial-gradient(circle at 10% 40%, rgba(24, 20, 15, 0.8) 0%, transparent 40%);
  background-attachment: fixed;
}

/* Noise overlay */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Typography styles */
h1, h2, h3, h4, .font-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  /* Evens out the lines of a wrapping heading instead of filling the first one
     and leaving a stub on the second. Matters most in Thai, which has no spaces
     and breaks wherever the dictionary allows. */
  text-wrap: balance;
}

/* Holds a phrase together across a line break. Thai has no spaces, so the
   browser breaks anywhere its dictionary allows - which stranded prepositions
   and split compounds. Each Thai heading is marked up as whole phrases instead. */
.nowrap {
  white-space: nowrap;
}

/* On a narrow phone a locked phrase would be wider than the screen, so the
   headings go back to breaking wherever they must. */
@media (max-width: 560px) {
  .hero-title .nowrap,
  h1 .nowrap,
  h2 .nowrap {
    white-space: normal;
  }
}

h1 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
}

h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
}

h3 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}

h4 {
  font-size: 1.25rem;
}

p {
  color: var(--text-secondary);
  font-weight: 300;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Container */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-narrow {
  max-width: 960px;
}

.section {
  padding: 6rem 0;
  position: relative;
}

/* First section on a page with no hero band - matches .page-hero top padding so
   the content clears the fixed header by the same amount as every other page. */
.section.section-lead {
  padding-top: 9.5rem;
}

/* Header & Navigation */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  transition: var(--transition-smooth);
  padding: 1.25rem 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(10, 10, 11, 0.75);
  border-bottom: 1px solid var(--border-subtle);
}

.site-header.scrolled {
  padding: 0.85rem 0;
  background: rgba(10, 10, 11, 0.92);
  border-bottom: 1px solid var(--border-light);
}

/* ==========================================================================
   Language-stable layout
   --------------------------------------------------------------------------
   Thai and English strings are different lengths, so anything sized by its own
   text moves when the visitor flips languages. The rules below reserve the
   larger of the two so the chrome stays put. Values are measured at a 1600px
   viewport; narrower screens simply exceed them, so they are inert there
   rather than wrong.
   ========================================================================== */

/* space-between let the nav slide sideways by ~27px: the Thai labels are 54px
   narrower in total, so the whole block re-flowed. A three-track grid pins the
   nav to the centre of the header no matter how wide its contents are. */
.header-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.header-container > nav {
  justify-self: center;
}

.header-container > .header-cta {
  justify-self: end;
}

.logo {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Brand badge. The source art is light-on-black, so the black is keyed out to
   real alpha in the asset itself - a blend mode could not do it cleanly because
   the JPEG black is not a true zero and the header sits in its own stacking
   context. */
.logo-mark {
  width: 44px;
  height: 44px;
  display: block;
  flex-shrink: 0;
}

.logo-word {
  line-height: 1;
}

.footer-brand .logo-mark {
  width: 64px;
  height: 64px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
}

/* Equal-width slots: centring the block alone still let "Home" and "Contact"
   slide ~27px in opposite directions as the labels changed length. */
.nav-links li {
  min-width: 4rem;
  text-align: center;
}

.nav-link {
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  position: relative;
  padding: 0.25rem 0;
}

.nav-link:hover,
.nav-link.active {
  color: var(--text-primary);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: var(--accent-gold);
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ==========================================================================
   Language switch (EN / TH)
   ========================================================================== */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.lang-opt {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.42rem 0.4rem;
  /* Fixed slot: "ไทย" is wider than "EN", and the active weight is heavier
     again, so without this the pill - and the header edge - changed size. */
  min-width: 3rem;
  text-align: center;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease;
}

.lang-opt:hover {
  color: #fff;
}

.lang-opt.is-active {
  background: var(--accent-gold);
  color: #14100a;
  font-weight: 600;
}

/* Held for a beat while a saved Thai preference is applied, so the visitor
   never sees a flash of English. i18n.js clears it; a timer is the fallback. */
.i18n-pending body {
  visibility: hidden;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: var(--transition-smooth);
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}

.btn-primary:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.15);
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-light);
  backdrop-filter: blur(4px);
}

.btn-outline:hover {
  border-color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}

.btn-gold {
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-light));
  color: var(--text-dark);
  font-weight: 600;
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(var(--accent-gold-rgb), 0.35);
}

.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.8rem;
}

/* Mobile Menu Toggle */
.mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0.5rem;
  z-index: 101;
}

.mobile-toggle svg {
  width: 24px;
  height: 24px;
}

/* ==========================================================================
   Hero Section - Parabolic Arch & 3D Cylinder Fan (Matching Design 100%)
   ========================================================================== */
.section-hero {
  padding-top: 5.5rem;
  padding-bottom: 3.5rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* On landscape screens the hero owns the whole first screen, so the next
   section never peeks in under the card fan. Skipped on tall/narrow windows,
   where it would only add dead space. */
@media (min-width: 769px) and (min-aspect-ratio: 5 / 4) {
  .section-hero {
    min-height: 100vh;
    /* Centre the whole hero block in the leftover space so the layout stays
       balanced whatever the headline length is (EN vs TH wrap differently). */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.hero-content {
  max-width: 900px;
  margin: 0 auto 0.5rem auto;
  position: relative;
  z-index: 10;
  /* Reserved for the taller (Thai) copy so the gallery below never jumps. */
  min-height: 11.6rem;
  animation: heroContentFadeIn 0.8s cubic-bezier(0.25, 0.55, 0.35, 1) 2.10s both;
}

.hero-tag {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
}

.hero-title {
  margin-bottom: 0.85rem;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  line-height: 1.08;
  color: #ffffff;
}

/* The home headline is the studio brand mark, set in caps. Doing it with
   text-transform (rather than typing it in caps) keeps the DOM text in normal
   case, so screen readers say the name instead of spelling it out letter by
   letter. Scoped to .section-hero so the other pages keep their sentence case. */
.section-hero .hero-title {
  min-height: auto;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.15;
}

.section-hero .hero-content {
  max-width: 1150px;
}

.hero-title em,
.section-hero .hero-title em {
  display: block;
  font-size: clamp(1.05rem, 2.2vw, 1.75rem);
  font-style: italic;
  font-family: var(--font-serif);
  color: var(--accent-gold-light);
  text-transform: none;
  letter-spacing: 0.01em;
  margin-top: 0.45rem;
  font-weight: 400;
}

.hero-desc {
  min-height: 3.9rem;
  font-size: 1.05rem;
  max-width: 860px;
  margin: 0 auto;
  color: var(--text-secondary);
  line-height: 1.7;
}


/* ==========================================================================
   Hero 3D Gallery Fan
   Geometry + choreography measured frame-by-frame from the reference video
   the client supplied (no longer kept in the repo). Reference viewport: 1444 x 820.
   Every size is expressed in --u so the fan keeps its exact proportions
   at any screen width. --u === 1vw on a 16:9 screen.
   ========================================================================== */
.hero-gallery-3d-wrap {
  --u: min(1vw, 1.76vh);
  --pp: calc(34 * var(--u));   /* per-card perspective distance */
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  height: calc(29 * var(--u));
  /* clip left/right only, so the card shadows stay visible above and below */
  clip-path: inset(-100vh 0 -100vh 0);
  z-index: 1;
}

.hero-smoke-bg {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  height: calc(24 * var(--u));
  background: radial-gradient(ellipse at center, rgba(44, 35, 22, 0.72) 0%, rgba(18, 15, 11, 0.24) 55%, transparent 76%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

.hero-gallery-curve {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Card shell. --dx/--cw/--ch/--ry/--cr/--d are set per position below.
   -------------------------------------------------------------------------- */
.gallery-card {
  position: absolute;
  top: 50%;
  left: calc(50% + var(--dx));
  width: var(--cw);
  height: var(--ch);
  margin-left: calc(var(--cw) / -2);
  margin-top: calc(var(--ch) / -2);
  border-radius: var(--cr);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: 0 calc(1.4 * var(--u)) calc(3.2 * var(--u)) rgba(0, 0, 0, 0.85);
  cursor: pointer;
  transform: perspective(var(--pp)) rotateY(var(--ry)) scale(1);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease;
  will-change: transform, opacity, clip-path;
  animation:
    galleryCardWipe var(--wdur) cubic-bezier(0.30, 0.70, 0.35, 1) var(--d) both,
    galleryCardFade var(--dur) cubic-bezier(0.25, 0.55, 0.35, 1) var(--d) both;
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  filter: grayscale(10%) contrast(107%);
  display: block;
}

.gallery-card .card-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem 0.4rem 0.55rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 20%, transparent);
  text-align: center;
  font-family: var(--font-hand);
  font-size: clamp(0.8rem, 1.1vw, 1.05rem);
  color: #fff;
  opacity: 0;
  transform: translateY(12px);
  transition: var(--transition-smooth);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Fan positions.
   dx  = card centre offset from screen centre  (video: 0 / 18.75 / 35 / 50 %)
   cw/ch = card box; ry tilts it so the edge nearest the screen edge is taller
   d   = entrance delay: outer pair first, centre card last
   -------------------------------------------------------------------------- */
.card-pos-1,
.card-pos-7 {
  --cw: calc(21.5 * var(--u));
  --ch: calc(26.4 * var(--u));
  --cr: calc(1.8 * var(--u));
  --d: 0.15s;
  --dur: 0.56s;
  --wdur: 0.26s;
  z-index: 1;
}

.card-pos-2,
.card-pos-6 {
  --cw: calc(18.6 * var(--u));
  --ch: calc(19.5 * var(--u));
  --cr: calc(1.6 * var(--u));
  --d: 0.55s;
  --dur: 0.70s;
  --wdur: 0.32s;
  z-index: 2;
}

.card-pos-3,
.card-pos-5 {
  --cw: calc(14.4 * var(--u));
  --ch: calc(17.0 * var(--u));
  --cr: calc(1.4 * var(--u));
  --d: 1.08s;
  --dur: 0.67s;
  --wdur: 0.30s;
  z-index: 3;
}

.card-pos-4 {
  --cw: calc(12.5 * var(--u));
  --ch: calc(15.9 * var(--u));
  --cr: calc(1.3 * var(--u));
  --d: 1.60s;
  --dur: 0.64s;
  --wdur: 0.29s;
  --dx: 0px;
  --ry: 0deg;
  z-index: 4;
}

.card-pos-1 { --dx: calc(-48.3 * var(--u));   --ry: 34.8deg; }
.card-pos-2 { --dx: calc(-30.0 * var(--u));   --ry: 30deg; }
.card-pos-3 { --dx: calc(-14.19 * var(--u));  --ry: 16.6deg; }
.card-pos-5 { --dx: calc(14.19 * var(--u));   --ry: -16.6deg; }
.card-pos-6 { --dx: calc(30.0 * var(--u));    --ry: -30deg; }
.card-pos-7 { --dx: calc(48.3 * var(--u));    --ry: -34.8deg; }

/* Cards left of centre wipe open left -> right, cards right of centre
   right -> left, the centre card opens from its middle outwards. */
.card-pos-1,
.card-pos-2,
.card-pos-3 { animation-name: galleryCardWipeL, galleryCardFade; }

.card-pos-5,
.card-pos-6,
.card-pos-7 { animation-name: galleryCardWipeR, galleryCardFade; }

.card-pos-4 { animation-name: galleryCardWipeC, galleryCardFade; }

@keyframes galleryCardWipeL {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes galleryCardWipeR {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes galleryCardWipeC {
  from { clip-path: inset(0 50% 0 50%); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes galleryCardFade {
  from {
    opacity: 0;
    transform: perspective(var(--pp)) rotateY(var(--ry)) scale(0.9);
  }
  to {
    opacity: 1;
    transform: perspective(var(--pp)) rotateY(var(--ry)) scale(1);
  }
}

/* Hover: straighten the card and pop it forward */
.gallery-card:hover {
  transform: perspective(var(--pp)) rotateY(0deg) scale(1.06);
  box-shadow: 0 calc(1.8 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.95),
              0 0 calc(1.6 * var(--u)) rgba(var(--accent-gold-rgb), 0.45);
  z-index: 50;
  clip-path: none;
}

.gallery-card:hover img {
  transform: scale(1.07);
  filter: grayscale(0%) contrast(112%);
}

.gallery-card:hover .card-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Hero action buttons sit over the lower part of the fan, as in the video */
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 10;
  margin-top: calc(-2.5 * min(1vw, 1.76vh));
  animation: heroActionsFadeIn 0.8s cubic-bezier(0.25, 0.55, 0.35, 1) 2.05s both;
}

@keyframes heroContentFadeIn {
  0%   { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes heroActionsFadeIn {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* On the landing page the header settles in last, as it does in the video */
body:has(.section-hero) .site-header {
  animation: heroHeaderFadeIn 0.95s cubic-bezier(0.25, 0.55, 0.35, 1) 2.62s both;
}

@keyframes heroHeaderFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-card,
  .hero-content,
  .hero-actions,
  body:has(.section-hero) .site-header,
  .contact-mark::before,
  .contact-mark-sheen::before {
    animation: none !important;
    opacity: 1;
    clip-path: none;
  }

  /* The glint has no still frame worth showing */
  .contact-mark-sheen::before {
    opacity: 0;
  }
}

/* ==========================================================================
   Meet The Artist Section
   ========================================================================== */
.artist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.artist-visual-wrap {
  position: relative;
}

.artist-portrait-box {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
}

.artist-portrait-box img {
  width: 100%;
  height: 540px;
  object-fit: cover;
  filter: grayscale(15%) contrast(105%);
}

.artist-name-watermark {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 0.9;
  color: #ffffff;
  text-shadow: 0 4px 15px rgba(0,0,0,0.8);
}

.artist-workspace-box {
  position: relative;
  margin-top: 1.5rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.artist-workspace-box img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.artist-sticker {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: var(--accent-gold-light);
  color: var(--text-dark);
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  font-family: var(--font-hand);
  font-size: 0.95rem;
  font-weight: 700;
  transform: rotate(-4deg);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.artist-info {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Label + heading + intro above the feature cards; reserved so the cards
   underneath keep their y when the copy switches language. */
.artist-info > div:first-child {
  min-height: 13.9rem;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

.artist-features {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.artist-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  min-height: 8.4rem;
  display: flex;
  /* Centred against the whole title+copy block. Top-aligned it sat level with
     the first line of the heading and read as falling off the top of the card. */
  align-items: center;
  gap: 1.25rem;
  transition: var(--transition-smooth);
}

.artist-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-light);
  transform: translateX(4px);
}

.card-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent-gold);
}

.artist-card-content h3 {
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
  color: var(--text-primary);
}

.artist-card-content p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ==========================================================================
   Studio film / showreel
   --------------------------------------------------------------------------
   One 16:9 slot per clip, framed like a single frame off a contact sheet. The
   grid is auto-fit, so one clip fills the row as the feature and two or three
   share it without any markup change. The slot is cheap until it is used: the
   <video> carries preload="none", so nothing but the poster is fetched before
   the visitor presses play.
   ========================================================================== */
.showreel-section {
  /* The artist section above shares this background, so the sections need a
     hairline between them; the pinboard below separates itself with its own. */
  border-top: 1px solid var(--border-subtle);
}

/* Reserved for the taller of the EN/TH copy - see "Language-stable layout". */
.showreel-header {
  min-height: 11.4rem;
  text-align: center;
  margin-bottom: 3rem;
}

.showreel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 2.5rem 2rem;
}

/* A lone clip is the feature, so it is held to a comfortable measure rather
   than stretched across the full container. Add a second and the cap lifts. */
.showreel-grid:has(> :only-child) {
  max-width: 920px;
  margin: 0 auto;
}

.showreel-item {
  margin: 0;
}

.showreel-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.55);
  transition: var(--transition-smooth);
}

.showreel-frame:hover {
  border-color: var(--border-gold);
}

.showreel-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Portrait slot. The studio films on a phone, so 9:16 is the normal case: the
   frame takes the video's shape rather than cropping it into a 16:9 letterbox,
   and the card is capped at a reel's width so a single clip does not run the
   full height of the viewport. Drop `is-portrait` for a landscape clip. */
.showreel-item.is-portrait {
  max-width: 380px;
  margin-inline: auto;
}

.showreel-item.is-portrait .showreel-frame {
  aspect-ratio: 9 / 16;
}

/* A portrait clip is already narrow, so `contain` would only add pillarboxing;
   `cover` is kept for a landscape clip dropped into the same slot. */
.showreel-item.is-portrait .showreel-video {
  object-fit: contain;
}

/* A soft scrim over the still frame, so the gold ring holds against a bright
   poster. It lifts the moment the clip starts. */
.showreel-frame:not(.is-empty):not(.is-playing)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.12) 60%);
  pointer-events: none;
}

.showreel-play {
  z-index: 2;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid var(--border-gold);
  background: rgba(10, 9, 8, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.showreel-play svg {
  width: 30px;
  height: 30px;
  /* The triangle's optical centre sits left of its bounding box. */
  margin-left: 4px;
}

.showreel-play:hover {
  background: rgba(var(--accent-gold-rgb), 0.18);
  color: var(--accent-gold-light);
  transform: scale(1.06);
}

/* Once it is running the video's own controls take over. */
.showreel-frame.is-playing .showreel-play {
  opacity: 0;
  pointer-events: none;
}

/* Empty slot. A reserved frame rather than a dead player, so the section can
   ship before the clip does; remove `is-empty` from the frame to go live. */
.showreel-frame.is-empty .showreel-video,
.showreel-frame.is-empty .showreel-play {
  display: none;
}

.showreel-frame:not(.is-empty) .showreel-placeholder {
  display: none;
}

.showreel-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--text-muted);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.015) 0 12px, transparent 12px 24px),
    var(--bg-card);
}

.showreel-placeholder svg {
  width: 46px;
  height: 46px;
  color: var(--accent-gold-deep);
}

.showreel-placeholder span {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.showreel-caption {
  margin-top: 0.9rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .showreel-header {
    min-height: 0;
    margin-bottom: 2.25rem;
  }

  .showreel-grid {
    gap: 2rem;
  }

  .showreel-play {
    width: 60px;
    height: 60px;
  }

  .showreel-play svg {
    width: 24px;
    height: 24px;
  }

  .showreel-placeholder svg {
    width: 36px;
    height: 36px;
  }
}

/* ==========================================================================
   "On The Board" - Polaroid & Sticky Note Pinboard
   ========================================================================== */
.board-header {
  min-height: 11.4rem;
  text-align: center;
  margin-bottom: 3.5rem;
}

.board-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 2.5rem 2rem;
  position: relative;
  padding: 1rem;
}

/* Polaroid Card */
.polaroid {
  background: #ffffff;
  padding: 12px 12px 28px 12px;
  border-radius: 2px;
  box-shadow: var(--shadow-polaroid);
  position: relative;
  transition: var(--transition-smooth);
  cursor: pointer;
}

.polaroid:hover {
  transform: translateY(-8px) scale(1.03) !important;
  z-index: 10;
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.8);
}

.polaroid-img-wrap {
  width: 100%;
  height: 280px;
  overflow: hidden;
  background: #111;
  position: relative;
}

.polaroid-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(108%) brightness(95%);
  transition: transform 0.5s ease;
}

.polaroid:hover .polaroid-img-wrap img {
  transform: scale(1.05);
}

.polaroid-caption {
  font-family: var(--font-hand);
  color: #1a1a1a;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  margin-top: 14px;
  line-height: 1.2;
}

/* Washi / Scotch Tape */
.tape {
  position: absolute;
  width: 80px;
  height: 22px;
  background-color: var(--tape-color);
  border-left: 1px dashed var(--tape-border);
  border-right: 1px dashed var(--tape-border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  backdrop-filter: blur(2px);
  z-index: 2;
  pointer-events: none;
}

.tape-top {
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
}

.tape-top-left {
  top: -8px;
  left: 10px;
  transform: rotate(-15deg);
}

.tape-top-right {
  top: -8px;
  right: 10px;
  transform: rotate(12deg);
}

/* Sticky Post-it Notes */
.sticky-note {
  position: absolute;
  background: var(--accent-red);
  color: #fdf4ec;
  padding: 0.85rem 1rem;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
  z-index: 5;
  border-radius: 1px;
  transition: var(--transition-smooth);
}

/* Where each note is pinned. These were inline styles on the three polaroids
   that carry one; as classes they can be pulled in on a phone, where a note
   hanging 22px outside a half-width card runs off the screen. */
.note-corner { top: -15px; right: -15px; transform: rotate(10deg); }
.note-left   { top: 60%;   left: -22px;  transform: rotate(-8deg); }
.note-right  { top: 66%;   right: -18px; transform: rotate(6deg); }

.sticky-note:hover {
  transform: scale(1.08) rotate(0deg) !important;
}

/* Polaroid Tilts for realistic handmade board look */
.tilt-left-1 { transform: rotate(-3deg); }
.tilt-right-1 { transform: rotate(2.5deg); }
.tilt-left-2 { transform: rotate(-2deg); }
.tilt-right-2 { transform: rotate(3.5deg); }
.tilt-left-3 { transform: rotate(-4deg); }
.tilt-right-3 { transform: rotate(1.5deg); }
.tilt-left-4 { transform: rotate(-2.5deg); }
.tilt-right-4 { transform: rotate(3deg); }

/* ==========================================================================
   "From Idea To Ink" - 4-Step Process Section
   ========================================================================== */
.process-section {
  position: relative;
  overflow: hidden;
}

/* Single centred column - the intro block that used to sit on the left is
   gone, so the cards get the full container and a readable measure instead of
   stretching the whole 1240px. */
.process-steps-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  padding: 1rem 0;
  max-width: 900px;
  margin: 0 auto;
}

/* Red dashed line weaving between cards */
.process-steps-wrap::before {
  content: '';
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 50%;
  width: 2px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--accent-red) 0,
    var(--accent-red) 8px,
    transparent 8px,
    transparent 16px
  );
  z-index: 1;
}

/* Pinned Note Card */
.pinned-card {
  background: #f1ede4;
  color: #1f1f1f;
  padding: 1.75rem 2rem;
  min-height: 11.6rem;
  border-radius: 3px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
  position: relative;
  z-index: 2;
  width: 85%;
  transition: var(--transition-smooth);
}

.pinned-card:nth-child(odd) {
  margin-right: auto;
  transform: rotate(-1.5deg);
}

.pinned-card:nth-child(even) {
  margin-left: auto;
  transform: rotate(2deg);
}

.pinned-card:hover {
  transform: scale(1.02) rotate(0deg) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* Red Push Pin */
.push-pin {
  position: absolute;
  top: -12px;
  width: 24px;
  height: 24px;
  background: radial-gradient(circle at 35% 35%, var(--accent-red-light), #6f0f14);
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.6);
  z-index: 4;
}

.pin-top-right { right: 20px; }
.pin-top-left { left: 20px; }

.pinned-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  border-bottom: 1px dashed rgba(0,0,0,0.15);
  padding-bottom: 0.5rem;
}

.pinned-step-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #7a7872;
}

.pinned-card h3 {
  color: #1a1a1a;
  font-size: 1.35rem;
  font-weight: 600;
}

.pinned-card p {
  color: #3d3b37;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ==========================================================================
   FAQ Accordion Section
   ========================================================================== */
/* Bottom-aligned row: when the Thai heading wraps taller the eyebrow above it
   rides up, so the heading block gets the same reservation as its container. */
.faq-header > div:first-child {
  min-height: 7rem;
}

.faq-header {
  min-height: 7rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2rem;
  /* Without this, grid stretches every card in a row to match the tallest one,
     so opening one answer visually opens an empty panel beside it. */
  align-items: start;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.faq-item.active {
  border-color: var(--border-light);
  background: var(--bg-card-hover);
}

.faq-trigger {
  width: 100%;
  padding: 1.25rem 1.5rem;
  background: transparent;
  border: none;
  text-align: left;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 1rem;
}

.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  flex-shrink: 0;
  position: relative;
  /* the "+" in the markup is decorative; the mark is drawn below so that it
     stays geometrically centred when the icon rotates into an x */
  font-size: 0;
  transition: var(--transition-smooth);
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: #fdf4ec;
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 1.5rem;
}

.faq-item.active .faq-content {
  padding: 0 1.5rem 1.5rem 1.5rem;
}

.faq-content p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ==========================================================================
   Quote Banner Section
   ========================================================================== */
.quote-section {
  padding: 5rem 0;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(36, 29, 19, 0.6) 0%, transparent 70%);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.quote-text {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 2.25rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--text-primary);
  max-width: 960px;
  margin: 0 auto;
}

/* ==========================================================================
   Contact / Booking Form Section
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: flex-start;
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 2rem;
}

.contact-info-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: var(--transition-fast);
}

.contact-info-card:hover {
  border-color: var(--border-light);
  background: var(--bg-card-hover);
}

.contact-info-card .icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-gold);
  flex-shrink: 0;
}

.booking-form {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 2.25rem;
  box-shadow: var(--shadow-card);
}

.form-group {
  margin-bottom: 1.35rem;
}

.form-label {
  display: block;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.form-control {
  width: 100%;
  padding: 0.85rem 1.15rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  transition: var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 10px rgba(var(--accent-gold-rgb), 0.25);
}

textarea.form-control {
  min-height: 110px;
  resize: vertical;
}

/* ==========================================================================
   Giant Footer Section
   ========================================================================== */
.site-footer {
  position: relative;
  padding-top: 5.5rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--border-subtle);
  background-color: #060607;
  overflow: hidden;
}

/* Warm halo so the footer reads as a continuation of the page, not a slab */
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 90%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
}

.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(var(--accent-gold-rgb), 0.07) 0%, transparent 70%);
  pointer-events: none;
}

.site-footer .container {
  position: relative;
  z-index: 1;
}

/* --- Upper grid: brand + three columns --------------------------------- */
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3.5rem;
}

/* The three blocks hold the full width: brand left, nav centre, studio flush
   right, so the row lines up with the copyright bar underneath. */
@media (min-width: 993px) {
  .footer-grid > :last-child {
    justify-self: end;
  }
}

.footer-brand .logo {
  margin-bottom: 1.1rem;
}

.footer-tagline {
  /* Thai wraps a line longer here; reserved so the whole footer keeps its
     height and the copyright bar does not jump on every page. */
  min-height: 5rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.7;
  max-width: 34ch;
  margin-bottom: 1.75rem;
}

/* Sits at the foot of the studio column, under the address and hours: the
   handles used to be spelled out as two more rows there, which duplicated
   buttons that were already on the page. */
.footer-social {
  display: flex;
  gap: 0.65rem;
  margin-top: 1.35rem;
}

.footer-social a {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  color: var(--text-secondary);
  transition: var(--transition-smooth);
}

.footer-social a svg {
  width: 26px;
  height: 26px;
}

.footer-social a:hover {
  color: var(--accent-gold-light);
  border-color: var(--border-gold);
  background: rgba(var(--accent-gold-rgb), 0.08);
  transform: translateY(-3px);
}

.footer-col-title {
  /* Thai raises the line box ~2px at this size; reserve the taller of the two. */
  min-height: 15px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 1.35rem;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  list-style: none;
}

.footer-nav a {
  color: var(--text-secondary);
  font-size: 0.9rem;
  position: relative;
  display: inline-block;
  transition: var(--transition-fast);
}

.footer-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--accent-gold);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-nav a:hover {
  color: var(--text-primary);
}

.footer-nav a:hover::after {
  width: 100%;
}

/* --- Studio details column --------------------------------------------- */
.footer-contact {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 14.5rem;
}

.footer-contact li {
  display: flex;
  gap: 0.7rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.footer-contact svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 0.25rem;
  color: var(--accent-gold-deep);
}

.footer-contact a {
  color: var(--text-secondary);
  transition: var(--transition-fast);
}

.footer-contact a:hover {
  color: var(--accent-gold-light);
}

.footer-contact .footer-note {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* --- Watermark ---------------------------------------------------------- */
.footer-watermark {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 11.8vw, 9.75rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  line-height: 0.9;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  margin-bottom: -0.12em;
  background: linear-gradient(180deg, rgba(var(--accent-gold-rgb), 0.2) 0%, rgba(var(--accent-gold-rgb), 0.04) 55%, transparent 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Bottom bar --------------------------------------------------------- */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.footer-legal {
  display: flex;
  /* Four links on one line fits a desktop bar and nothing narrower. With no
     wrap the row kept its full width on a phone, pushed the footer wider than
     the viewport and dragged the copyright line off the right edge with it -
     which is why "WhatsApp" showed as half a word. */
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  list-style: none;
  max-width: 100%;
}

.footer-legal a {
  color: var(--text-muted);
  transition: var(--transition-fast);
}

/* The three handles take the red of the palette so the row reads as social
   links rather than more small print; Privacy Policy stays muted. */
.footer-legal .social-link {
  color: var(--accent-red-light);
}

.footer-legal a:hover {
  color: var(--accent-gold-light);
}

.footer-legal .social-link:hover {
  color: #f16b6b;
}

@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.75rem 2.5rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .site-footer {
    padding-top: 4rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    padding-bottom: 2.75rem;
  }

  .footer-watermark {
    letter-spacing: 0.02em;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ==========================================================================
   Page Specific & Inner Pages
   ========================================================================== */
/* Both languages fit one line now, but a Thai line box runs ~16px taller than
   a Latin one at this size. Reserving a single Thai line keeps every page below
   the hero still when the language changes, with no visible gap. */
.page-hero h1 {
  min-height: 1.35em;
}

.page-hero {
  padding-top: 9.5rem;
  padding-bottom: 4rem;
  text-align: center;
  /* Two heading lines reserved; em-based so it tracks the clamped font size. */
  border-bottom: 1px solid var(--border-subtle);
  background: radial-gradient(circle at 50% 0%, rgba(40, 33, 21, 0.42) 0%, transparent 70%);
}

/* ==========================================================================
   Services - editorial rows
   Four services in an auto-fit grid fitted three per row and stranded the
   fourth beside two empty cells. One service per full-width row removes the
   arithmetic entirely, gives the photographs the most space on the site, and
   picks up the same alternating rhythm as the artist section on the home page.
   ========================================================================== */
.service-rows {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.service-row {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

/* Photo swaps sides down the column. The wider track swaps with it, so every
   photograph is the same size whichever side it lands on - otherwise the
   right-hand ones came out 5% smaller. */
.service-row:nth-child(even) {
  grid-template-columns: 1fr 1.05fr;
}

.service-row:nth-child(even) .service-row-media {
  order: 2;
}

/* Reserved for the taller of EN / TH. Kept just under the photo height so the
   photo always sets the row and nothing below shifts on a language switch. */
@media (min-width: 861px) {
  .service-row-body {
    min-height: 27rem;
  }
}

.service-row-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  cursor: zoom-in;
}

.service-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-row-media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  pointer-events: none;
}

.service-row-media:hover img {
  transform: scale(1.04);
}

.service-row-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 3.4rem;
  font-weight: 200;
  line-height: 1;
  color: rgba(var(--accent-gold-rgb), 0.32);
  margin-bottom: 0.75rem;
}

.service-row-body h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 0.5rem 0 0.9rem;
}

.service-row-body > p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 1.3rem;
  max-width: 46ch;
}

.service-row-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.service-row-points li {
  display: flex;
  gap: 0.6rem;
}

/* The tick used to be typed into the copy - and into both translations. Drawn
   here instead, so the dictionary holds words only. */
.service-row-points li::before {
  content: "\2014";
  color: var(--accent-gold);
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .service-rows {
    gap: 3.5rem;
  }

  /* Both selectors listed: .service-row:nth-child(even) outranks a bare
     .service-row even inside this query, so the even rows kept two columns. */
  .service-row,
  .service-row:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  /* Photo always leads on a single column */
  .service-row:nth-child(even) .service-row-media {
    order: 0;
  }

  .service-row-num {
    font-size: 2.6rem;
  }
}

/* Reviews & Testimonials */
.review-rating-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  margin-bottom: 3.5rem;
  flex-wrap: wrap;
}

.rating-stars {
  color: var(--accent-gold-light);
  font-size: 1.25rem;
  letter-spacing: 0.15em;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 2rem;
}

.review-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition-smooth);
}

.review-card:hover {
  border-color: var(--border-light);
  transform: translateY(-4px);
}

.review-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}

.review-author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border-light);
}

/* Modal Lightbox */
.lightbox-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.92);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  backdrop-filter: blur(8px);
}

.lightbox-modal.active {
  display: flex;
}

.lightbox-content {
  position: relative;
  max-width: 900px;
  max-height: 85vh;
}

.lightbox-content img {
  max-height: 80vh;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  box-shadow: 0 20px 50px rgba(0,0,0,0.9);
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
}

/* Notification Toast */
.toast-notification {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--bg-card-hover);
  border: 1px solid var(--accent-gold);
  color: var(--text-primary);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7);
  z-index: 9999;
  transform: translateY(100px);
  opacity: 0;
  transition: var(--transition-smooth);
}

.toast-notification.show {
  transform: translateY(0);
  opacity: 1;
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */
@media (max-width: 992px) {
  .artist-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .pinned-card {
    width: 100%;
    margin: 0 !important;
  }
}

@media (max-width: 768px) {
  .mobile-toggle {
    display: block;
  }
  
  /* The header list is desktop's nav. On a phone the menu is the full-screen
     panel below, which has room for the things a side drawer had nowhere to
     put: the portfolio link, a language switch that is not buried under the
     panel, opening hours and a booking button. */
  .nav-links {
    display: none;
  }
  
  /* --------------------------------------------------------------------
     The fan stays a fan on phones.

     Reproducing the desktop composition exactly means --u: 1vw, which puts
     seven cards across the screen at 84px each - too small to read. So the
     phone keeps the same arc with five cards instead of seven: the outer
     pair is dropped, the rest is re-spaced against the narrower screen, and
     --u is raised so what is left is a usable size. The 2/6 pair is still
     cropped by the screen edge at roughly the same fraction the 1/7 pair is
     cropped on desktop, which is what makes the two read as the same object.
     -------------------------------------------------------------------- */
  .hero-gallery-3d-wrap {
    --u: min(3.1vw, 2vh);
    height: calc(19 * var(--u));
  }

  .hero-smoke-bg {
    height: calc(15 * var(--u));
  }

  /* Three cards, not seven. Seven across a phone leaves each one about 84px
     wide and crowds the arc into a solid band; three at this scale gives the
     centre card real size and still crops the pair either side against the
     screen edge, which is what makes it read as the same arc as on desktop.
     The four hidden cards are also four full-size images not downloaded. */
  .card-pos-1,
  .card-pos-2,
  .card-pos-6,
  .card-pos-7 {
    display: none;
  }

  /* Card boxes keep their desktop proportions - the step down in height from
     the edge of the arc to its middle is what reads as depth, and evening it
     out is what made an earlier attempt look like a flat strip. The desktop
     spacing already suits a three-card arc, so only the scale changes. */

  /* ----------------------------------------------------------------------
     Swipeable arc.

     The three visible cards above are the no-JS baseline. When main.js takes
     over it adds .is-carousel and drives five slot classes instead: three in
     the arc and one parked off each edge, so a swipe slides the next
     photograph in along the same curve rather than cutting to it. Slot rules
     are three classes deep on purpose - they have to outrank the .card-pos-N
     geometry each card still carries.
     ---------------------------------------------------------------------- */
  .hero-gallery-curve.is-carousel .gallery-card {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    opacity: 0;
    pointer-events: none;
    transition: left 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                margin-left 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                margin-top 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.65s ease,
                box-shadow 0.65s ease !important;
    will-change: left, transform, opacity, width, height;
  }

  .hero-gallery-curve.is-carousel.is-settled .gallery-card {
    animation: none !important;
    clip-path: none !important;
  }

  .hero-gallery-curve.is-carousel .m-far-left {
    left: calc(50% - 54 * var(--u)) !important;
    width: calc(14.4 * var(--u)) !important;
    height: calc(17.0 * var(--u)) !important;
    margin-left: calc(14.4 * var(--u) / -2) !important;
    margin-top: calc(17.0 * var(--u) / -2) !important;
    transform: perspective(var(--pp)) rotateY(32deg) scale(1) !important;
    z-index: 1;
    opacity: 0 !important;
    pointer-events: none;
  }

  .hero-gallery-curve.is-carousel .m-far-right {
    left: calc(50% + 54 * var(--u)) !important;
    width: calc(14.4 * var(--u)) !important;
    height: calc(17.0 * var(--u)) !important;
    margin-left: calc(14.4 * var(--u) / -2) !important;
    margin-top: calc(17.0 * var(--u) / -2) !important;
    transform: perspective(var(--pp)) rotateY(-32deg) scale(1) !important;
    z-index: 1;
    opacity: 0 !important;
    pointer-events: none;
  }

  .hero-gallery-curve.is-carousel .m-out-left { 
    left: calc(50% - 34 * var(--u)) !important;
    width: calc(14.4 * var(--u)) !important;
    height: calc(17.0 * var(--u)) !important;
    margin-left: calc(14.4 * var(--u) / -2) !important;
    margin-top: calc(17.0 * var(--u) / -2) !important;
    transform: perspective(var(--pp)) rotateY(26deg) scale(1) !important;
    z-index: 2;
    opacity: 0.3 !important;
    pointer-events: none;
  }

  .hero-gallery-curve.is-carousel .m-out-right { 
    left: calc(50% + 34 * var(--u)) !important;
    width: calc(14.4 * var(--u)) !important;
    height: calc(17.0 * var(--u)) !important;
    margin-left: calc(14.4 * var(--u) / -2) !important;
    margin-top: calc(17.0 * var(--u) / -2) !important;
    transform: perspective(var(--pp)) rotateY(-26deg) scale(1) !important;
    z-index: 2;
    opacity: 0.3 !important;
    pointer-events: none;
  }

  .hero-gallery-curve.is-carousel .m-left  { 
    left: calc(50% - 14.19 * var(--u)) !important;
    width: calc(14.4 * var(--u)) !important;
    height: calc(17.0 * var(--u)) !important;
    margin-left: calc(14.4 * var(--u) / -2) !important;
    margin-top: calc(17.0 * var(--u) / -2) !important;
    transform: perspective(var(--pp)) rotateY(16.6deg) scale(1) !important;
    z-index: 3;
    opacity: 0.95 !important;
    pointer-events: auto;
  }

  .hero-gallery-curve.is-carousel .m-right { 
    left: calc(50% + 14.19 * var(--u)) !important;
    width: calc(14.4 * var(--u)) !important;
    height: calc(17.0 * var(--u)) !important;
    margin-left: calc(14.4 * var(--u) / -2) !important;
    margin-top: calc(17.0 * var(--u) / -2) !important;
    transform: perspective(var(--pp)) rotateY(-16.6deg) scale(1) !important;
    z-index: 3;
    opacity: 0.95 !important;
    pointer-events: auto;
  }

  .hero-gallery-curve.is-carousel .m-center {
    left: 50% !important;
    width: calc(12.5 * var(--u)) !important;
    height: calc(15.9 * var(--u)) !important;
    margin-left: calc(12.5 * var(--u) / -2) !important;
    margin-top: calc(15.9 * var(--u) / -2) !important;
    transform: perspective(var(--pp)) rotateY(0deg) scale(1) !important;
    z-index: 4;
    opacity: 1 !important;
    pointer-events: auto;
  }

  /* Nothing here is a hover surface on a touch screen, and the swipe would
     otherwise leave whichever card the finger passed over stuck enlarged. */
  .hero-gallery-curve.is-carousel .gallery-card:hover {
    transform: perspective(var(--pp)) rotateY(var(--ry)) scale(1);
    box-shadow: 0 calc(1.4 * var(--u)) calc(3.2 * var(--u)) rgba(0, 0, 0, 0.85);
  }

  .hero-gallery-curve.is-carousel .gallery-card:hover img {
    transform: none;
  }

  /* The centre card names itself; the others are peeks. */
  .hero-gallery-curve.is-carousel .m-center .card-caption {
    opacity: 1;
    transform: translateY(0);
  }

  /* Position indicator: one mark per centre position the arc can hold. It is
     a read-out, not a control - the arc is swiped, and a tap opens the photo. */
  .hero-gallery-dots:not([hidden]) {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: -0.5rem;
    pointer-events: none;
  }

  .hero-gallery-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    transition: background 0.25s ease, transform 0.25s ease;
  }

  .hero-gallery-dots span.is-active {
    background: var(--accent-gold);
    transform: scale(1.35);
  }

  .hero-actions {
    margin-top: 1.5rem;
  }
  
  .section {
    padding: 4rem 0;
  }

  /* .section above resets the hero padding, which would tuck the first line
     of the eyebrow under the fixed header - restore clearance here. */
  .section-hero {
    padding-top: 6.5rem;
    padding-bottom: 2.5rem;
  }
}

/* ==========================================================================
   Thai typography adjustments
   Thai has no italic tradition (browsers fake it by slanting) and its
   combining vowels/tones break apart under wide tracking, so both are
   neutralised while the page is in Thai. Latin copy is untouched.
   ========================================================================== */
html[lang="th"] em,
html[lang="th"] .hero-title em,
html[lang="th"] .quote-text {
  font-style: normal;
}

html[lang="th"] .section-label,
html[lang="th"] .showreel-caption,
html[lang="th"] .showreel-placeholder span,
html[lang="th"] .hero-tag,
html[lang="th"] .form-label,
html[lang="th"] .lang-opt {
  letter-spacing: 0.03em;
}

html[lang="th"] .hero-title,
html[lang="th"] h1,
html[lang="th"] h2 {
  line-height: 1.35;
}

html[lang="th"] .hero-desc,
html[lang="th"] p {
  line-height: 1.85;
}

/* ==========================================================================
   Red accents (the 10%)
   Red never carries text or structure - it only marks. Kept to a handful of
   small, repeated spots so it reads as deliberate rather than decorative.
   ========================================================================== */
::selection {
  background: var(--accent-red);
  color: #fdf4ec;
}

/* A red hairline under every section eyebrow, threading the accent through
   each section at a very low volume. */
.section-label {
  /* inline-block so the padding that carries the red rule actually occupies
     space - as a plain inline box the rule rode up into the heading below. */
  display: inline-block;
  position: relative;
  padding-bottom: 0.45rem;
}

.section-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 22px;
  height: 2px;
  background: var(--accent-red);
}

/* Centred eyebrows (board / FAQ / contact / closing CTA) need the rule centred too */
.board-header .section-label::after,
.showreel-header .section-label::after,
.contact-heading .section-label::after {
  left: 50%;
  transform: translateX(-50%);
}


/* ==========================================================================
   Portfolio gallery
   Masonry via CSS columns so each photo keeps its own aspect ratio - tattoo
   shots are a mix of tall limbs and wide chest pieces, and cropping them all
   to one shape loses the work.
   ========================================================================== */
.gallery-masonry {
  column-count: 4;
  column-gap: 1.25rem;
}

.gallery-item {
  break-inside: avoid;
  margin: 0 0 1.25rem 0;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.35s ease;
}

.gallery-item:hover {
  transform: translateY(-4px);
  border-color: var(--border-gold);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.6), var(--shadow-glow);
}

.gallery-item:hover img {
  transform: scale(1.04);
}

@media (max-width: 1100px) {
  .gallery-masonry { column-count: 3; }
}

@media (max-width: 768px) {
  .gallery-masonry { column-count: 2; column-gap: 0.75rem; }
  .gallery-item { margin-bottom: 0.75rem; }
}

/* Small phones used to drop to a single column, which blew each photograph up
   to the full width of the screen: thirty-five works became thirty-five screens
   of scrolling and the page read as a slideshow rather than a portfolio. Two
   columns hold at every width - at 360px that is a 162px thumbnail, big enough
   to read and to tap, and the same shape the desktop grid has. */
@media (max-width: 575px) {
  .gallery-masonry { column-gap: 0.6rem; }
  .gallery-item { margin-bottom: 0.6rem; }
}

/* The aftercare cards are the column variant of .artist-card in a narrower
   track, so they need their own reservation - the home value is far too low. */
.aftercare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1.75rem;
}

.aftercare-grid .artist-card {
  min-height: 16.2rem;
}


/* Same card in the /contact/ prep row - narrower again. */
.prep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1.5rem;
}

.prep-grid .artist-card {
  min-height: 12.2rem;
  /* .artist-card centres its children for the icon + copy row layout. Turned
     column here, that centring lands on the cross axis and shrink-wraps each
     child, so a one-line title sat centred while a two-line one filled the card
     and read as left aligned. Stretch puts every line on the same left edge. */
  align-items: stretch;
}

/* Thai runs long enough that two of the three titles wrap; reserving both lines
   starts every description at the same height instead of stepping down the row.
   2 lines x 1.15 line-height, in em so it tracks the font size. */
.prep-grid .artist-card h4 {
  min-height: 2.3em;
}

/* Testimonials sit in a grid; reserving the tallest keeps every row put and
   squares the cards up as a side effect. */
.review-card {
  min-height: 24.5rem;
}

/* ==========================================================================
   Contact lockup - brand mark beside the channel list
   ========================================================================== */
.contact-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3.5rem;
  /* Reserved for the taller of EN / TH so the lockup below never shifts. */
  min-height: 13.7rem;
}

.contact-heading h1,
.contact-heading h2 {
  /* Contact has no page hero, so this heading is the page h1. It keeps the h2
     type scale - it introduces a section, not a full-bleed hero. */
  font-size: clamp(2rem, 4vw, 3.25rem);
  min-height: 4.4rem;
  margin: 0.6rem 0 1rem;
}

.contact-heading p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

/* Hairline under the heading, fading out at both ends */
.contact-heading::after {
  content: "";
  display: block;
  width: min(760px, 100%);
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
}

.contact-lockup {
  display: grid;
  grid-template-columns: auto 1px 1fr;
  align-items: center;
  gap: 3.5rem;
  max-width: 920px;
  margin: 0 auto;
}

/* --- Brand mark ----------------------------------------------------------
   The medallion itself is pinned: the movement people see is the client's own
   logo loop inside it. Only the halo behind it and the glint across it still
   run, at 5.5s and 6s, so the two never line up.
   -------------------------------------------------------------------------- */
.contact-mark {
  position: relative;
  width: 260px;
  height: 260px;
  display: grid;
  place-items: center;
}

/* Warm halo so the medallion is lit rather than pasted onto the black */
.contact-mark::before {
  content: "";
  position: absolute;
  inset: -16%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-gold-rgb), 0.17) 0%, rgba(var(--accent-gold-rgb), 0.05) 45%, transparent 70%);
  pointer-events: none;
  animation: mark-breathe 5.5s ease-in-out infinite;
}

/* The disc and its gold rim are still drawn here; the artwork inside it is the
   client's own animation, so the wheel no longer has to be rebuilt in CSS. */
.contact-mark-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle closest-side,
      transparent 0 94.9%,
      var(--accent-gold) 94.9% 100%),
    #000000;
}

/* The logo loop, mastered square on the same black as the disc so it sits flush
   against the rim with no seam.

   The client's whole 6s animation, interpolated 24 -> 60fps and then played
   forward and backward. Two things had to be got right. The interpolator's block
   matching has to be kept on a short leash - the wheel is 8-fold symmetric, so a
   wide search can match a spike against the wrong twin 45deg away; true motion
   here is about 2deg per frame, so search_param=8 with mb_size=8 reaches the real
   motion and nothing else. And the file is an animation with a start and an end,
   not a loop, so played straight it popped back to its opening frame every 6s;
   the forward-then-backward pass makes every transition a one-frame step.

   Measured on the shipped file: synthesized frames hold 97% of the spike tips of
   the real frames beside them, and none of them falls outside the pair of real
   frames it sits between.

   Pointer events are handed back to .contact-mark: the badge keeps one hover
   target, and a long-press cannot raise the browser's video menu over a logo. */
.contact-mark-video {
  position: absolute;
  /* The disc paints its gold rim across the outer 5.1% of its radius, so the
     video stops just inside it - full bleed covered the rim and the medallion
     lost its edge. The box is sized explicitly rather than by insets alone: a
     replaced element reads `width: auto` as its intrinsic size (440px here),
     not as "fill the insets", and rendered at 440 inside a 260px disc. */
  top: 2.8%;
  left: 2.8%;
  width: 94.4%;
  height: 94.4%;
  z-index: 1;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  background: #000000;
  pointer-events: none;
  transition: filter 0.6s ease;
}

/* Light travelling across polished metal, clipped to the medallion disc */
.contact-mark-sheen {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}

.contact-mark-sheen::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -140%;
  width: 60%;
  height: 160%;
  transform: rotate(18deg);
  filter: blur(2px);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 246, 224, 0.05) 35%,
    rgba(255, 248, 232, 0.32) 50%,
    rgba(255, 246, 224, 0.05) 65%,
    transparent 100%);
  animation: mark-sheen 6s cubic-bezier(0.4, 0, 0.5, 1) 1.4s infinite;
}

/* Hover lifts the wheel back up rather than speeding it: changing
   animation-duration mid-loop makes the rotation jump. */
.contact-mark:hover::before {
  animation-duration: 2.4s;
}

.contact-mark:hover .contact-mark-video {
  filter: brightness(1.08);
}

@keyframes mark-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

/* Long rest between passes so the sweep reads as an occasional glint */
@keyframes mark-sheen {
  0%        { left: -140%; }
  55%, 100% { left: 240%; }
}

/* --- Divider ------------------------------------------------------------- */
.contact-lockup-rule {
  align-self: stretch;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-gold) 22%, var(--border-gold) 78%, transparent);
}

/* --- Channel list -------------------------------------------------------- */
.contact-lines {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-lines a,
.contact-lines > li > div {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: inherit;
}

.contact-lines-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  color: var(--accent-gold);
  transition: var(--transition-smooth);
}

.contact-lines-icon svg {
  width: 19px;
  height: 19px;
}

.contact-lines-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.contact-lines-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-lines-value {
  font-size: 0.98rem;
  color: var(--text-primary);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.contact-lines-value em {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--accent-gold);
}

.contact-lines-note {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--accent-gold);
  transition: var(--transition-smooth);
}

.contact-lines a:hover .contact-lines-icon {
  color: var(--accent-gold-light);
  border-color: var(--border-gold);
  background: rgba(var(--accent-gold-rgb), 0.08);
}

.contact-lines a:hover .contact-lines-value {
  color: var(--accent-gold-light);
}

.contact-lines a:hover .contact-lines-note {
  color: var(--accent-gold-light);
}

/* --- Island tip ---------------------------------------------------------- */
.island-tip {
  /* Thai copy runs a line shorter; reserved so the prep section below holds. */
  min-height: 6.85rem;
  max-width: 920px;
  margin: 3.5rem auto 0;
  background: rgba(var(--accent-gold-rgb), 0.05);
  border: 1px dashed var(--border-light);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
}

.island-tip h3 {
  font-family: var(--font-sans);
  color: var(--accent-gold);
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.island-tip p {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

@media (max-width: 860px) {
  .contact-lockup {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    justify-items: center;
    text-align: left;
  }

  /* The vertical rule turns horizontal once the columns stack */
  .contact-lockup-rule {
    width: min(320px, 100%);
    height: 1px;
    align-self: center;
    background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
  }

  .contact-mark {
    width: 210px;
    height: 210px;
  }

  .contact-lines {
    width: 100%;
    max-width: 420px;
  }
}

/* Swipe-row position dots - only the phone layout shows these */
/* ==========================================================================
   Legal pages - privacy policy and anything else that is a long read
   --------------------------------------------------------------------------
   One column of running text, so the only job here is a comfortable measure
   and enough air between the numbered sections that the page can be scanned
   as well as read.
   ========================================================================== */
.legal-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 1.25rem;
}

.legal-body {
  max-width: 780px;
  margin: 0 auto;
}

.legal-intro {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-secondary);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.legal-section {
  padding-top: 2.75rem;
}

.legal-section h2 {
  font-family: var(--font-serif);
  font-size: 1.28rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 0.9rem;
}

.legal-section h2 .legal-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--accent-gold);
  margin-right: 0.6rem;
  vertical-align: 0.12em;
}

.legal-section p {
  font-size: 0.94rem;
  line-height: 1.78;
  color: var(--text-secondary);
}

.legal-section p + p {
  margin-top: 0.85rem;
}

/* A closing paragraph after a list needs the same air the list opened with */
.legal-section ul + p {
  margin-top: 1.1rem;
}

.legal-section code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  color: var(--accent-gold-light);
  background: rgba(var(--accent-gold-rgb), 0.08);
  border-radius: 4px;
  padding: 0.1em 0.4em;
}

.legal-section ul {
  list-style: none;
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.legal-section li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.legal-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-gold);
  opacity: 0.75;
}

.legal-section li strong {
  color: var(--text-primary);
  font-weight: 500;
}

.legal-section a {
  color: var(--accent-gold);
  border-bottom: 1px solid rgba(var(--accent-gold-rgb), 0.35);
  transition: var(--transition-fast);
}

.legal-section a:hover {
  color: var(--accent-gold-light);
  border-bottom-color: var(--accent-gold-light);
}

/* Closing contact card - the one place on the page a reader is asked to act */
.legal-contact {
  margin-top: 3.5rem;
  padding: 1.75rem 1.9rem;
  background: rgba(var(--accent-gold-rgb), 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}

.legal-contact h2 {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--accent-gold);
  margin-bottom: 0.55rem;
}

.legal-contact p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.legal-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.1rem;
}

.legal-contact-links a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-gold);
  border-bottom: 1px solid rgba(var(--accent-gold-rgb), 0.35);
  transition: var(--transition-fast);
}

.legal-contact-links a:hover {
  color: var(--accent-gold-light);
  border-bottom-color: var(--accent-gold-light);
}

@media (max-width: 768px) {
  .legal-section {
    padding-top: 2.25rem;
  }

  .legal-section h2 {
    font-size: 1.12rem;
  }

  .legal-contact {
    padding: 1.4rem 1.25rem;
  }
}


/* ==========================================================================
   Error pages (404 / 500)
   ========================================================================== */
.error-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 2rem;
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.error-links a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: var(--transition-fast);
}

.error-links a:hover {
  color: var(--accent-gold-light);
}

.error-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

@media (max-width: 575px) {
  .error-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .error-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ==========================================================================
   Full-screen mobile menu
   --------------------------------------------------------------------------
   Sits above the header rather than beside it, so it carries its own logo and
   close button. Hidden from the accessibility tree and from hit-testing when
   shut - [hidden] alone would fight the display rule, so visibility and
   pointer-events do the closing and the panel keeps its fade.
   ========================================================================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.5rem 2rem;
  background: var(--bg-primary);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s ease, visibility 0.32s;
}

/* The panel is display:flex at all times so the entrance can animate; [hidden]
   would break that, so the attribute is only a no-JS fallback. */
.mobile-menu[hidden] {
  display: flex;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Same warm halo the footer uses, so the panel reads as part of the site */
.mobile-menu::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--accent-gold-rgb), 0.09) 0%, transparent 70%);
  pointer-events: none;
}

.mobile-menu > * {
  position: relative;
  z-index: 1;
}

.mobile-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.menu-close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: -0.5rem;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
}

.menu-close svg {
  width: 24px;
  height: 24px;
}

/* Focus returns to the hamburger when the panel closes, which is right for a
   keyboard but drew a ring after a plain tap too. :focus-visible keeps the
   ring for the keyboard only, and it is drawn in the site's own gold rather
   than the browser default. */
.mobile-toggle:focus,
.menu-close:focus {
  outline: none;
}

.mobile-toggle:focus-visible,
.menu-close:focus-visible,
.mobile-menu-nav a:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- The links ----------------------------------------------------------- */
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 0;
}

.mobile-menu-nav a {
  display: block;
  padding: 0.62rem 0;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 8.5vw, 2.3rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-primary);
  /* Each line lifts in behind the one before it once the panel is open */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.mobile-menu.is-open .mobile-menu-nav a {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu.is-open .mobile-menu-nav a:nth-child(1) { transition-delay: 0.06s; }
.mobile-menu.is-open .mobile-menu-nav a:nth-child(2) { transition-delay: 0.12s; }
.mobile-menu.is-open .mobile-menu-nav a:nth-child(3) { transition-delay: 0.18s; }
.mobile-menu.is-open .mobile-menu-nav a:nth-child(4) { transition-delay: 0.24s; }
.mobile-menu.is-open .mobile-menu-nav a:nth-child(5) { transition-delay: 0.30s; }

/* The page you are already on */
.mobile-menu-nav a.is-current {
  color: var(--accent-gold-light);
}

/* --- Everything under the links ------------------------------------------ */
.mobile-menu-foot {
  margin-top: auto;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem;
  opacity: 0;
  transition: opacity 0.4s ease 0.34s;
}

.mobile-menu.is-open .mobile-menu-foot {
  opacity: 1;
}

.menu-hours {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.menu-hours .footer-note {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.menu-cta {
  align-self: stretch;
  text-align: center;
}

.mobile-menu .footer-social {
  margin-top: 0;
}

/* The panel scrolls itself; a short phone in landscape should not have to
   reach the links through the page behind it. */
@media (max-height: 460px) {
  .mobile-menu-nav {
    padding: 1rem 0;
  }

  .mobile-menu-nav a {
    font-size: 1.35rem;
    padding: 0.4rem 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu-nav a,
  .mobile-menu-foot {
    transition: none;
  }

  .mobile-menu-nav a {
    opacity: 1;
    transform: none;
  }
}

/* Desktop never sees it, and it must not trap taps on a wide screen. */
@media (min-width: 769px) {
  .mobile-menu {
    display: none;
  }
}

/* ==========================================================================
   Responsive refinement layer
   --------------------------------------------------------------------------
   Everything below is additive and fires only under 1200px, so the desktop
   design is untouched. Tiers run widest to narrowest and each one only
   restates what actually has to change at that size.

   The phone tier is written at 768px rather than 767px on purpose: that is
   where the hamburger menu already takes over further up this file, and
   splitting the two would leave a one-pixel band with a desktop header and a
   mobile menu.
   ========================================================================== */

/* --- Laptop / landscape tablet: 992 - 1199px ----------------------------- */
@media (max-width: 1199px) {
  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* --- Portrait tablet: 768 - 991px ---------------------------------------- */
@media (max-width: 991px) {
  /* 16px gutters from here down - content never touches the screen edge */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .footer-grid {
    gap: 2.25rem;
  }
}

/* --- Phones: up to 768px -------------------------------------------------- */
@media (max-width: 768px) {
  /* Header --------------------------------------------------------------
     The logo, the language pill and the hamburger together measured 370px,
     wider than a 375px screen once the gutters were counted. */
  .site-header {
    padding: 0.9rem 0;
  }

  .site-header.scrolled {
    padding: 0.7rem 0;
  }

  .logo {
    font-size: 1.15rem;
    gap: 0.45rem;
    min-height: 44px;
  }

  .logo-mark {
    width: 36px;
    height: 36px;
  }

  .header-cta {
    gap: 0.6rem;
  }

  /* Narrower slot, taller hit area: the pill was 25px tall, half a finger. */
  .lang-opt {
    min-width: 2.6rem;
    padding: 1rem 0.45rem;
  }

  .mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }

  /* Slide-in menu -------------------------------------------------------- */
  .nav-links {
    /* dvh tracks the collapsing browser chrome; vh stays as the fallback */
    height: 100dvh;
    gap: 0.25rem;
  }

  /* Desktop reserves equal centred slots so the labels cannot shift when the
     language changes. In a vertical panel that just indents the text. */
  .nav-links li {
    min-width: 0;
    width: 100%;
    text-align: left;
  }

  .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    font-size: 1.05rem;
  }

  .nav-link.active::after {
    bottom: 10px;
    width: 2rem;
  }

  /* Touch targets -------------------------------------------------------- */
  .btn {
    min-height: 44px;
    padding: 0.8rem 1.5rem;
  }

  .footer-nav a,
  .footer-legal a,
  .footer-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .footer-social {
    gap: 0.85rem;
  }

  .footer-social a {
    width: 56px;
    height: 56px;
  }

  .footer-social a svg {
    width: 28px;
    height: 28px;
  }

  /* ----------------------------------------------------------------------
     Footer proportions on a phone.

     The 44px touch height above is right for the tap, but it stacks on top of
     the gaps these lists were given for desktop text, and the footer ended up
     1230px tall - three screens of scrolling for a logo, five links and an
     address. The height comes back out of the gaps, not the targets.
     ---------------------------------------------------------------------- */

  /* Five one-word links down a single column at 44px each ran 275px. Two
     columns put them in three rows and read as a deliberate block. */
  .footer-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
  }

  /* Every row here is already 44px tall for touch, so the 1rem between them
     was pure air on top of that. */
  .footer-contact {
    gap: 0.3rem;
  }

  /* The address carries a hard break so it sets as two tidy lines in the
     desktop column. A phone row is wider than that column, and the Thai
     address fits across it in one line, so the break is dropped here and the
     text is left to find its own. English is the longer of the two and still
     turns onto a second line - just at a sensible word rather than mid-address. */
  .footer-contact br {
    display: none;
  }

  /* The 44px tap box above centres its label, so a one-line row - the phone
     number, and the Thai address now that it fits across - sat 10px below the
     icon, which is pinned near the top of the row. Two-line rows fill the box
     and were already right. Top-aligning the label lines every row up on its
     first line without changing the tap area or the row height. */
  .footer-contact a {
    align-items: flex-start;
  }

  /* The address and the number are links and carry the 44px tap box; the hours
     are not, so that row was only as tall as its text and sat hard against the
     number while the address had 22px of air under it. Matching the heights
     puts the same step between every row. */
  .footer-contact li > span {
    min-height: 44px;
  }

  /* The opening hours and their note set as two lines in the desktop column.
     A phone row is wide enough for both, so the note joins the hours on one
     line, separated by a middot instead of a line break. Measured at 390px:
     271px of the 340px available in English, 305px in Thai. */
  .footer-contact .footer-note {
    display: inline;
    /* Thai runs long here and a 360px screen leaves 302px for the pair; a
       shade under the desktop note size keeps it on the one line. */
    font-size: 0.74rem;
  }

  .footer-contact .footer-note::before {
    content: "\00B7";
    margin: 0 0.3rem;
  }

  /* Small print ---------------------------------------------------------- */
  .footer-col-title {
    font-size: 0.78rem;
  }

  .section-label,
  .hero-tag {
    font-size: 0.8rem;
  }

  .contact-lines-label {
    font-size: 0.75rem;
  }

  .footer-legal a,
  .footer-bottom {
    font-size: 0.82rem;
  }

  /* A phone running Chrome's text-scaling setting renders this bar around 1.5x
     up; anything unbreakable here would push the page sideways again. */
  .footer-bottom {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .footer-legal {
    gap: 0 1.1rem;
  }

  .pinned-step-num {
    font-size: 0.82rem;
  }

  /* Page tops reserved 152px for the desktop header; the phone header is 78px. */
  .page-hero {
    padding-top: 7.5rem;
    padding-bottom: 2.5rem;
  }

  .section.section-lead {
    padding-top: 7.5rem;
  }

  /* Lightbox: a 2rem frame costs a phone a third of its width, and the close
     control was a bare glyph rather than a target. */
  .lightbox-modal {
    padding: 1.25rem;
  }

  .lightbox-close {
    top: -48px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    line-height: 1;
  }

  /* Long unbreakable strings - an email, a handle - cannot push the page */
  body {
    overflow-wrap: break-word;
  }

  /* Set by main.js while the slide-in menu is open */
  body.menu-open {
    overflow: hidden;
  }
}

/* --- Phones only: up to 767px --------------------------------------------
   Split from the block above because 768px is a portrait tablet: it keeps the
   hamburger and the slim header, but its rows stay two across. */
@media (max-width: 767px) {
  .prep-grid,
  .aftercare-grid,
  .review-grid {
    grid-template-columns: 1fr;
  }

  /* --------------------------------------------------------------------
     The board stays two across on a phone. One polaroid per row turns eight
     works into eight full screens of scrolling and reads as a list rather
     than as a pinboard; two across keeps the scatter of tilts and tape
     visible in one glance. Everything hung on the card - its padding, the
     photo, the caption, the tape, the sticky note - is scaled down with it,
     because at half the width the desktop sizes swamp the card.
     -------------------------------------------------------------------- */
  .board-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 0.85rem;
    padding: 0.5rem;
  }

  .polaroid {
    padding: 7px 7px 14px;
  }

  .polaroid-img-wrap {
    height: 170px;
  }

  .polaroid-caption {
    font-size: 0.95rem;
    margin-top: 9px;
  }

  .tape {
    width: 52px;
    height: 16px;
  }

  .sticky-note {
    padding: 0.4rem 0.5rem;
    font-size: 0.72rem;
  }

  /* A note hanging 15-22px outside a full-width card is a flourish; outside a
     half-width one it reaches into the next column, or off the screen. */
  .note-corner { top: -7px; right: -6px; }
  .note-left   { left: -8px; }
  .note-right  { right: -8px; }

  /* Two title lines are reserved for a three-across desktop row; one card per
     row is wide enough that every title fits on one line. */
  .prep-grid .artist-card h4 {
    min-height: 0;
  }
}

/* --- Small phones: up to 575px ------------------------------------------- */
@media (max-width: 575px) {
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Stacked full-width CTAs: two pills side by side leave ~150px each here */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .hero-actions .btn {
    width: 100%;
  }
}

/* --- Very small phones: up to 375px --------------------------------------- */
@media (max-width: 375px) {
  .logo {
    font-size: 1rem;
  }

  .logo-mark {
    width: 32px;
    height: 32px;
  }

  .header-cta {
    gap: 0.4rem;
  }

  .lang-opt {
    min-width: 2.2rem;
    padding: 1.05rem 0.35rem;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
  }

  .page-hero {
    padding-top: 7rem;
  }
}