/* ============================================================
   ARC — design tokens
   ============================================================ */
/* Neue Haas Grotesk: Text cut for body and small sizes, Display cut for
   large headings. These are trial files under a personal-use licence,
   included for the client preview only: buy the commercial web licence
   (and its fuller character set) before launch. Characters the trial
   files lack (· / : & + – etc.) fall through to Helvetica Neue, which was
   drawn from Neue Haas Grotesk, so the switch is not visible. */
@font-face { font-family: "NHG Text"; src: url("assets/fonts/neue-haas-grotesk-font-fanily/neuehaasgrottext-55roman-trial.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "NHG Text"; src: url("assets/fonts/neue-haas-grotesk-font-fanily/neuehaasgrottext-56italic-trial.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "NHG Text"; src: url("assets/fonts/neue-haas-grotesk-font-fanily/neuehaasgrottext-65medium-trial.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "NHG Text"; src: url("assets/fonts/neue-haas-grotesk-font-fanily/neuehaasgrottext-75bold-trial.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "NHG Display"; src: url("assets/fonts/neue-haas-grotesk-font-fanily/neuehaasgrotdisp-45light-trial.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "NHG Display"; src: url("assets/fonts/neue-haas-grotesk-font-fanily/neuehaasgrotdisp-55roman-trial.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "NHG Display"; src: url("assets/fonts/neue-haas-grotesk-font-fanily/neuehaasgrotdisp-65medium-trial.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* Palette (ARC_P11) */
  --background: #F0EEEC;  /* page */
  --surface: #F5F4F2;     /* sections, cards, form */
  --ink: #352C22;         /* text, logo */
  --muted: #645A50;       /* secondary text: espresso 30% toward greige, 5.8:1 */
  --button: #352C22;      /* primary button */
  --on-button: #F5F4F2;   /* text on the button */
  --accent: #3D372E;      /* small accents: figure numbers, rules, cursor */
  --sand: #D1C7BB;        /* greige: image placeholders, hover fills */

  --bg: var(--background);
  --bg-2: var(--surface);
  --paper: #F5F4F2;
  --mist: #F5F4F2;            /* light text and marks over photos and film (both modes) */
  --copper: var(--ink);       /* legacy name: primary text colour */
  --amber: var(--accent);     /* legacy name: accent colour */
  --terracotta: var(--accent);
  --clay: var(--accent);
  --ink-rgb: 53 44 34;        /* for translucent lines and tints */
  --accent-rgb: 61 55 46;
  --theme-color: #F0EEEC;
  --copper: var(--ink);       /* legacy name: primary text colour */
  --amber: var(--accent);     /* legacy name: accent colour */
  --terracotta: var(--accent);
  --clay: var(--accent);
  --rule: rgb(var(--ink-rgb) / .14);
  --ease: cubic-bezier(.76, 0, .24, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --pad: 16px;
  /* Neue Haas Grotesk for Latin text; Thai falls through to Anuphan */
  --font: "NHG Text", "Helvetica Neue", Helvetica, Arial, "Anuphan", sans-serif;
  --font-display: "NHG Display", "NHG Text", "Helvetica Neue", Helvetica, Arial, "Anuphan", sans-serif;
}
/* ============================================================
   Dark mode: follows the device setting unless the visitor picks
   one with the header switch (stored as data-theme on <html>)
   ============================================================ */
:root[data-theme="dark"] {
  --background: #352C22; --surface: #3D372E; --ink: #F0EEEC; --muted: #D1C7BB;
  --button: #F0EEEC; --on-button: #352C22; --accent: #D1C7BB; --sand: #4A4137;
  --paper: #3D372E; --ink-rgb: 240 238 236; --accent-rgb: 209 199 187; --theme-color: #352C22;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: #352C22; --surface: #3D372E; --ink: #F0EEEC; --muted: #D1C7BB;
    --button: #F0EEEC; --on-button: #352C22; --accent: #D1C7BB; --sand: #4A4137;
    --paper: #3D372E; --ink-rgb: 240 238 236; --accent-rgb: 209 199 187; --theme-color: #352C22;
    color-scheme: dark;
  }
}
/* ============================================================
   Section bands: espresso and greige sections break up the page.
   Each band re-points the colour tokens, so everything inside
   (text, rules, buttons, logos) follows the band automatically.
   ============================================================ */
.tone-dark, .tone-greige {
  --bg: var(--band); --bg-2: var(--band); --background: var(--band); --surface: var(--band);
  --copper: var(--band-ink); --ink: var(--band-ink); --muted: var(--band-muted);
  --amber: var(--band-accent); --accent: var(--band-accent); --terracotta: var(--band-accent); --clay: var(--band-accent);
  --rule: rgb(var(--ink-rgb) / .16);
  background-color: var(--band); color: var(--band-ink);
}
.tone-dark {
  --band: #352C22; --band-ink: #F0EEEC; --band-muted: #D1C7BB; --band-accent: #D1C7BB;
  --ink-rgb: 240 238 236; --accent-rgb: 209 199 187;
  --paper: #3D372E; --sand: #4A4137; --button: #F0EEEC; --on-button: #352C22;
}
.tone-greige {
  --band: #D1C7BB; --band-ink: #352C22; --band-muted: #4E453B; --band-accent: #3D372E;
  --ink-rgb: 53 44 34; --accent-rgb: 61 55 46;
  --paper: #DCD4CA; --sand: #BFB4A6; --button: #352C22; --on-button: #F5F4F2;
}
:root[data-theme="dark"] .tone-dark { --band: #241E17; --paper: #2E271F; --sand: #3D352B; }
:root[data-theme="dark"] .tone-greige {
  --band: #4A4036; --band-ink: #F0EEEC; --band-muted: #D1C7BB; --band-accent: #D1C7BB;
  --ink-rgb: 240 238 236; --accent-rgb: 209 199 187;
  --paper: #554A3F; --sand: #5C5145; --button: #F0EEEC; --on-button: #352C22;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tone-dark { --band: #241E17; --paper: #2E271F; --sand: #3D352B; }
  :root:not([data-theme="light"]) .tone-greige {
    --band: #4A4036; --band-ink: #F0EEEC; --band-muted: #D1C7BB; --band-accent: #D1C7BB;
    --ink-rgb: 240 238 236; --accent-rgb: 209 199 187;
    --paper: #554A3F; --sand: #5C5145; --button: #F0EEEC; --on-button: #352C22;
  }
}

/* Header gets a soft backdrop once the page scrolls, so it reads over any band */
.header.is-scrolled {
  background-color: color-mix(in srgb, var(--background) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px);
}
.to-top { box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }

/* Ease colours when the visitor switches */
html.theme-switching, html.theme-switching * { transition: background-color .45s var(--ease-soft), color .45s var(--ease-soft), border-color .45s var(--ease-soft), fill .45s var(--ease-soft), stroke .45s var(--ease-soft) !important; }

@media (min-width: 768px) { :root { --pad: 32px; } }
@media (min-width: 1024px) { :root { --pad: 48px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); overflow-x: clip; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  font-family: var(--font); color: var(--copper); background: var(--bg);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
body.is-loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
em[data-i18n] { font-style: normal; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Large headings use the Display cut */
.statement__text, .svc__index, .svc__title, .film__title, .reel__title, .cta h3,
.hero__tagline-word, .drawer__nav .inner, .inquiry__done-title, .pd-head__title, .pd-next__title { font-family: var(--font-display); }

/* ============================================================
   Loader — column wipe + counter
   ============================================================ */
.loader { position: fixed; inset: 0; z-index: 1030; pointer-events: auto; }
.loader__blocks { position: absolute; inset: 0; display: flex; }
.loader__blocks i { flex: 1; height: 100%; background: var(--paper); margin-right: -1px; transform-origin: left; }
.loader__mark { position: absolute; inset: 0; display: grid; place-items: center; }
.loader__logo { width: clamp(96px, 18vw, 150px); height: auto; display: block; fill: var(--ink); }
.loader__count {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  color: var(--amber); font-size: 14px; letter-spacing: .05em; font-variant-numeric: tabular-nums;
}
.loader.is-done { pointer-events: none; }

/* ============================================================
   Header
   ============================================================ */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1020;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--pad); transition: transform .5s var(--ease-soft), background-color .3s;
}
.header.is-hidden { transform: translateY(-110%); }
.header__logo { width: 52px; display: block; }
.header__logo .wordmark { width: 100%; height: auto; display: block; }
.wordmark { fill: var(--ink); }
.header__nav { display: none; gap: 40px; }
.header__nav a {
  font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  position: relative; padding: 4px 0;
}
.header__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--amber);
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
/* Light / dark switch */
.theme-toggle {
  width: 40px; height: 40px; display: grid; place-items: center; margin-left: auto; padding: 0;
  border: 0; background: none; color: var(--ink); cursor: pointer;
}
.theme-toggle svg { width: 18px; height: 18px; transition: transform .6s var(--ease); }
.theme-toggle:hover svg { transform: rotate(-20deg); }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}

/* EN / TH switch: beside the menu button on phones, after the nav on desktop */
.lang { display: flex; align-items: center; gap: 4px; margin-right: 8px; font-size: 12px; font-weight: 500; letter-spacing: .08em; }
.lang span { color: rgb(var(--ink-rgb) / .35); }
.lang button {
  min-width: 36px; min-height: 40px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: rgb(var(--ink-rgb) / .45); transition: color .3s;
}
.lang button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 6px; }
.lang button:hover { color: var(--ink); }
.menu-toggle {
  width: 40px; height: 40px; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 7px; position: relative; z-index: 2;
}
.menu-toggle span { display: block; width: 28px; height: 1.5px; background: var(--copper); margin-left: auto; transition: transform .5s var(--ease), width .5s var(--ease); }
.menu-toggle span:last-child { width: 18px; }
.menu-open .menu-toggle span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-open .menu-toggle span:last-child { width: 28px; transform: translateY(-4.25px) rotate(-45deg); }
@media (min-width: 768px) {
  .header__logo { width: 64px; }
  .header__nav { display: flex; margin-left: auto; }
  .theme-toggle { margin-left: 24px; }
  .lang { margin: 0 0 0 8px; }
  .menu-toggle { display: none; }
}

/* ============================================================
   Drawer (mobile)
   ============================================================ */
.drawer { position: fixed; inset: 0; z-index: 1010; pointer-events: none; }
.drawer__fill {
  position: absolute; inset: 0; background: var(--paper);
  clip-path: inset(0 0 100% 0); display: flex; flex-direction: column; justify-content: space-between;
  padding: 120px var(--pad) 40px;
}
.menu-open .drawer { pointer-events: auto; }
.drawer__plan { position: absolute; inset: 0; width: 100%; height: 100%; }
.drawer__nav { position: relative; display: flex; flex-direction: column; }
.drawer__nav a { display: block; position: relative; padding: 18px 0; }
.drawer__nav .mask { display: block; overflow: hidden; }
.drawer__nav .inner { display: flex; align-items: baseline; gap: 16px; font-size: clamp(40px, 12vw, 64px); font-weight: 500; letter-spacing: -.02em; transform: translateY(110%); }
.drawer__nav i { font-style: normal; font-size: 11px; color: var(--amber); letter-spacing: .1em; }
.drawer__nav .rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); transform: scaleX(0); transform-origin: left; }
.drawer__contact { position: relative; display: flex; flex-direction: column; gap: 8px; font-size: 14px; opacity: 0; }
.drawer__contact span { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.drawer__cta { margin-top: 12px; font-weight: 600; }

/* ============================================================
   Shared: plan backgrounds, labels with corner marks
   ============================================================ */
.plan line, .plan polyline, .plan path, .plan ellipse { vector-effect: non-scaling-stroke; }

.label { position: relative; display: inline-flex; align-items: center; padding: 8px; margin-bottom: 24px; }
.label h2 { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--copper); }
.corners i, .btn__corners i { position: absolute; width: 7px; height: 7px; border-color: var(--amber); border-style: solid; border-width: 0; }
.corners i:nth-child(1), .btn__corners i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.corners i:nth-child(2), .btn__corners i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.corners i:nth-child(3), .btn__corners i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.corners i:nth-child(4), .btn__corners i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* ============================================================
   Hero
   ============================================================ */
/* Hero: the film plays full-bleed behind the ARC mark */
.hero { position: relative; height: 100svh; overflow: hidden; background: var(--bg); color: var(--mist); }
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08); will-change: transform, opacity;
}
.hero__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(36,30,23,.55) 0%, rgba(36,30,23,.15) 28%, rgba(36,30,23,.2) 62%, rgba(36,30,23,.7) 100%),
    radial-gradient(ellipse at center, rgba(36,30,23,.28), rgba(36,30,23,0) 70%);
}
.hero__marks { inset: 16px; z-index: 2; }
@media (min-width: 1024px) { .hero__marks { inset: 32px; } }
.hero__marks i::before, .hero__marks i::after { background: var(--mist); opacity: .7; }

.hero__logo {
  position: absolute; z-index: 3; top: 46%; left: 50%; transform: translate(-50%, -50%);
  width: 50vw; aspect-ratio: 1000/786; margin: 0;
  opacity: .7; /* the film shows through the mark */
}
.hero__wordmark { width: 100%; height: 100%; display: block; overflow: visible; }
.hero__wordmark .o { fill: none; stroke: var(--mist); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.hero__wordmark .f { fill: var(--mist); opacity: 0; }

.hero__tagline {
  position: absolute; z-index: 3; top: calc(46% + 20vw + 20px); left: var(--pad); right: var(--pad);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; opacity: 0;
}
.hero__tagline-word { color: var(--mist); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2.2rem); letter-spacing: -.01em; line-height: 1; }
.hero__tagline-text { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; text-wrap: balance; color: rgba(245,244,242,.85); }

/* Film caption, bottom-left */
.hero__film {
  position: absolute; z-index: 3; left: calc(var(--pad) + 8px); bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 4px; max-width: 60vw; color: var(--mist); opacity: 0;
}
.hero__film-label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.hero__film-label b { font-weight: 500; font-variant-numeric: tabular-nums; margin-left: 4px; }
.hero__film-title { font-size: 14px; font-weight: 500; line-height: 1.25; }
.hero__film-view { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.hero__film-view span { display: inline-block; transition: transform .45s var(--ease); }
.hero__film:hover .hero__film-view span { transform: translateX(4px); }

/* Scroll cue, bottom-centre on wide screens, bottom-right on phones */
.hero__scroll {
  position: absolute; z-index: 3; right: calc(var(--pad) + 8px); bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--mist); opacity: 0;
}
.hero__scroll i { position: relative; width: 1px; height: 44px; overflow: hidden; background: rgba(245,244,242,.3); }
.hero__scroll i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--mist); animation: heroScroll 2s var(--ease) infinite; }
.hero__scroll em { font-style: normal; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }
@keyframes heroScroll { from { transform: translateY(-100%); } to { transform: translateY(260%); } }

@media (min-width: 769px) and (orientation: landscape) {
  .hero__logo { width: min(30vw, 46svh); }
  .hero__tagline { top: calc(46% + min(11.8vw, 18svh) + 28px); }
  .hero__film { left: calc(var(--pad) + 16px); bottom: 48px; }
  .hero__scroll { right: auto; left: 50%; transform: translateX(-50%); bottom: 48px; }
}

/* Header turns light while it sits over the film */
.header.is-over-hero { color: var(--mist); background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.header.is-over-hero .wordmark { fill: var(--mist); }
.header.is-over-hero .header__nav a, .header.is-over-hero .theme-toggle { color: var(--mist); }
.header.is-over-hero .lang button { color: rgba(245,244,242,.6); }
.header.is-over-hero .lang button[aria-pressed="true"], .header.is-over-hero .lang button:hover { color: var(--mist); }
.header.is-over-hero .lang span { color: rgba(245,244,242,.4); }
.header.is-over-hero .menu-toggle span { background: var(--mist); }
.menu-open .header.is-over-hero .menu-toggle span { background: var(--copper); }

.frame-marks { position: absolute; inset: -10px; pointer-events: none; }
.frame-marks i { position: absolute; width: 14px; height: 14px; opacity: 0; }
.frame-marks i::before, .frame-marks i::after { content: ""; position: absolute; background: var(--amber); opacity: .75; }
.frame-marks i::before { width: 100%; height: 1px; }
.frame-marks i::after { width: 1px; height: 100%; }
.frame-marks .tl { top: 0; left: 0; }
.frame-marks .tr { top: 0; right: 0; } .frame-marks .tr::after { right: 0; }
.frame-marks .bl { bottom: 0; left: 0; } .frame-marks .bl::before { bottom: 0; }
.frame-marks .br { bottom: 0; right: 0; } .frame-marks .br::before { bottom: 0; } .frame-marks .br::after { right: 0; }

/* ============================================================
   Project grid — staggered columns with split-hover
   ============================================================ */
.grid { background: var(--bg-2); padding: 24px var(--pad) 16px; position: relative; }
/* Mosaic grid: blocks of seven tiles in mixed sizes that share one top and
   one bottom edge (after ARC's sketch). Every other block is mirrored. */
.grid__container { display: grid; gap: 10px; max-width: 1800px; margin: 0 auto; padding: 24px 0 0; }
.grid__block {
  display: grid; gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 38vw 26vw 34vw 30vw 30vw;
  grid-template-areas: "a b" "a c" "d d" "e g" "f g";
}
.grid__block--mirror { grid-template-areas: "b a" "c a" "d d" "g e" "g f"; }
@media (min-width: 768px) {
  .grid__container, .grid__block { gap: 20px; }
  .grid__container { padding-top: 48px; }
  .grid__block {
    grid-template-columns: 4fr 4fr 2.4fr 6fr;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    aspect-ratio: 2 / 1.02;
    grid-template-areas: "a b e g" "a b e g" "a c e g" "a c e g" "d d f g" "d d f g";
  }
  .grid__block--mirror {
    grid-template-columns: 6fr 2.4fr 4fr 4fr;
    grid-template-areas: "g e b a" "g e b a" "g e c a" "g e c a" "g f d d" "g f d d";
  }
}
@media (min-width: 1024px) { .grid__container, .grid__block { gap: 28px; } .grid__container { padding-top: 64px; } }
.tile--a { grid-area: a; } .tile--b { grid-area: b; } .tile--c { grid-area: c; } .tile--d { grid-area: d; }
.tile--e { grid-area: e; } .tile--f { grid-area: f; } .tile--g { grid-area: g; }

.tile { position: relative; display: block; min-width: 0; min-height: 0; container-type: inline-size; }
.tile__split { position: absolute; inset: 0; background: var(--sand); }
.tile__half { position: absolute; inset: 0; overflow: hidden; transition: transform .5s var(--ease-soft); }
.tile__half img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.tile__half--b { display: none; }
.tile__overlay { display: none; }
/* Touch / narrow: the name sits on the photo, so it can't break the edges */
.tile__below {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 10px 9px;
  background: linear-gradient(rgba(53,44,34,0), rgba(53,44,34,.6));
  color: var(--mist); font-size: 11px; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
@media (min-width: 1024px) {
  .tile__half--t { clip-path: inset(0 0 50% 0); }
  .tile__half--b { display: block; clip-path: inset(50% 0 0 0); }
  /* The split opens just wide enough for the name (--split is set per tile in main.js) */
  .tile.is-linked:hover .tile__half--t { transform: translateY(calc(-1 * var(--split, 15px))); }
  .tile.is-linked:hover .tile__half--b { transform: translateY(var(--split, 15px)); }
}

/* "All projects" link under the mosaic */
.grid__all {
  display: flex; align-items: baseline; gap: 10px; width: fit-content; margin: 40px auto 56px;
  padding: 10px 2px; border-bottom: 1px solid var(--rule);
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.grid__all b { font-weight: 600; color: var(--accent); }
.grid__all i { font-style: normal; transition: transform .45s var(--ease); }
.grid__all:hover i { transform: translateX(4px); }
:lang(th) .grid__all { letter-spacing: .02em; }
@media (min-width: 1024px) { .grid__all { margin: 56px auto 96px; } }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .tile__below { display: none; }
  .tile__overlay {
    display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 5; width: 88%; text-align: center; line-height: 1.2; opacity: 0; pointer-events: none; transition: opacity .5s;
    font-size: clamp(12px, 6.5cqw, 17px); font-weight: 600; text-wrap: balance; color: var(--ink); text-shadow: 0 0 10px var(--bg-2), 0 0 2px var(--bg-2);
  }
  .tile.is-linked:hover .tile__overlay { opacity: 1; }
}

/* ============================================================
   About statement — sticky sheet, words ink in with scroll
   ============================================================ */
.statement { background: var(--bg-2); height: 180vh; position: relative; }
@media (min-width: 1024px) { .statement { height: 250vh; } }
.statement__sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--pad); }
.statement .label { align-self: flex-start; }
.statement__sheet { position: relative; padding: 56px 24px 72px; overflow: hidden; }
@media (min-width: 1024px) { .statement__sheet { padding: 72px 64px 88px; } }
.statement__text {
  max-width: 1100px; margin: 0 auto; font-size: clamp(24px, 4.5vw, 62px);
  font-weight: 300; line-height: 1.2; letter-spacing: -.02em;
}
.statement__text strong { color: var(--amber); font-weight: 700; }
.statement__text .w { opacity: .12; transition: opacity .2s linear; }
.statement__crosshair { position: absolute; width: 18px; height: 18px; top: 0; left: 0; pointer-events: none; opacity: 0; }
.statement__crosshair::before, .statement__crosshair::after { content: ""; position: absolute; background: var(--amber); }
.statement__crosshair::before { left: 0; right: 0; top: 50%; height: 1px; }
.statement__crosshair::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.statement__hud { position: absolute; right: 24px; bottom: 24px; font-size: 10px; letter-spacing: .14em; color: var(--amber); font-variant-numeric: tabular-nums; opacity: .7; }

/* ============================================================
   Services — pinned card stack on desktop
   ============================================================ */
.services { background: var(--bg-2); position: relative; }
.services__header { padding: 64px var(--pad) 16px; }
.services__stage { position: relative; }
/* Mobile first: photo, then number, title, text and the project it shows */
.svc { display: grid; gap: 20px; padding: 24px var(--pad) 40px; background: var(--bg-2); position: relative; }
.svc__sheet-col { display: flex; justify-content: center; }
.svc__sheet { position: relative; width: 100%; aspect-ratio: 4/3; }
.svc__plate { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--sand); }
.svc__plate img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.svc__plate:hover img { transform: scale(1.04); }
.svc__fig {
  position: absolute; left: 12px; bottom: 12px; padding: 4px 8px; background: rgba(246,245,242,.9);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber);
}
.svc__sheet .frame-marks { inset: -8px; }
.svc__index { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: .1em; border: 1px solid rgb(var(--accent-rgb) / .35); border-radius: 128px; padding: 6px 16px; }
.svc__title { margin-top: 14px; font-size: 24px; font-weight: 500; line-height: 1.12; letter-spacing: -.02em; }
.svc__desc { margin-top: 12px; max-width: 46ch; font-size: 15px; line-height: 1.7; }
.svc__seen {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 2px 12px;
  margin-top: 20px; padding: 14px 0; max-width: 46ch; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.svc__seen-label { grid-row: 1 / 3; align-self: center; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.svc__seen-name { font-size: 15px; font-weight: 500; }
.svc__seen-meta { grid-column: 2; font-size: 12px; color: var(--muted); }
.svc__seen-arrow { grid-column: 3; grid-row: 1 / 3; align-self: center; color: var(--amber); transition: transform .45s var(--ease); }
.svc__seen:hover .svc__seen-arrow { transform: translateX(4px); }
@media (min-width: 601px) {
  .svc { padding: 32px var(--pad) 56px; }
  .svc__sheet { width: min(64vw, 480px); aspect-ratio: 4/5; }
  .svc__plate { box-shadow: 0 30px 60px -35px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.06); }
  .svc__index { border: 0; padding: 0; border-radius: 0; font-size: clamp(96px, 11vw, 176px); font-weight: 300; line-height: 1; letter-spacing: -.02em; color: rgb(var(--ink-rgb) / .12); }
  .svc__title { font-size: clamp(34px, 3.2vw, 50px); }
  .svc__desc { margin-top: 24px; font-size: 20px; }
}
.services__rail { display: none; }
@media (min-width: 601px) {
  .svc__sheet { width: min(44vw, 420px); }
  .svc__plate { background: var(--paper); box-shadow: 0 30px 60px -35px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.06); }
  .svc__index { border: 0; padding: 0; border-radius: 0; font-size: clamp(96px, 11vw, 176px); font-weight: 300; line-height: 1; letter-spacing: -.02em; color: rgb(var(--ink-rgb) / .12); }
  .svc__title { font-size: clamp(34px, 3.2vw, 50px); }
  .svc__desc { margin-top: 24px; font-size: 20px; }
}
@media (min-width: 1024px) {
  .svc { grid-template-columns: 1fr 1fr; align-items: center; min-height: 100vh; padding: 0 var(--pad); }
  .svc__sheet { width: min(32vw, 460px, 57vh); }
  .services.is-pinned .services__stage { height: 100vh; }
  .services.is-pinned .services__stack { position: absolute; inset: 0; }
  .services.is-pinned .svc { position: absolute; inset: 0; }
  .services__rail { display: block; position: absolute; z-index: 4; top: 50%; right: 24px; height: 38vh; transform: translateY(-50%); }
  .services__track { position: absolute; inset: 0 auto 0 0; width: 1px; background: rgb(var(--ink-rgb) / .18); overflow: hidden; }
  .services__fill { position: absolute; inset: 0; background: var(--amber); transform: scaleY(0); transform-origin: top; }
  .services__ticks { position: absolute; inset: 0 auto 0 -3px; display: flex; flex-direction: column; justify-content: space-between; }
  .services__ticks i { width: 7px; height: 1px; background: rgb(var(--ink-rgb) / .45); transition: background-color .3s; }
  .services__ticks i.is-active { background: var(--amber); }
}

/* ============================================================
   Contact CTA
   ============================================================ */
.cta { position: relative; isolation: isolate; overflow: hidden; padding: 80px var(--pad) 96px; background: var(--bg-2); }
.cta__container { position: relative; z-index: 2; display: grid; gap: 40px; max-width: 1200px; margin: 0 auto; }
.cta__intro { max-width: 520px; }
.cta h3 { font-size: 28px; font-weight: 500; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 20px; }
.cta p { font-size: 16px; line-height: 1.7; }
.cta p strong { color: var(--amber); }
.cta__social { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; }
.cta__social span { color: var(--muted); width: 100%; }
.cta__social a { position: relative; font-weight: 500; }
.cta__social a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--amber); }
@media (min-width: 1024px) {
  .cta { padding: 140px var(--pad); }
  .cta__container { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 96px; align-items: start; }
  .cta h3 { font-size: 44px; }
}

/* Inquiry form: large touch targets, 16px text so phones don't zoom in */
.inquiry { position: relative; display: grid; gap: 20px; padding: 24px 20px; background: var(--paper); border: 1px solid var(--rule); }
@media (min-width: 768px) { .inquiry { padding: 40px; } }
.inquiry__fields { display: grid; gap: 18px; }
@media (min-width: 768px) { .inquiry__fields { grid-template-columns: 1fr 1fr; gap: 22px 24px; } .field--wide, .inquiry__fields > .field:nth-child(3) { grid-column: 1 / -1; } }
.field { display: grid; gap: 8px; }
.field__label { display: flex; justify-content: space-between; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field__count { letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 0; border: 0; border-bottom: 1px solid rgb(var(--ink-rgb) / .3); border-radius: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.5; appearance: none; -webkit-appearance: none;
  transition: border-color .3s;
}
.field textarea { resize: vertical; min-height: 112px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--amber); }
.field [aria-invalid="true"] { border-bottom-color: #A33A2A; }
.field textarea::placeholder { color: rgb(var(--ink-rgb) / .4); }
.field__select { position: relative; }
.field__select::after { content: ""; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.field__error, .inquiry__error { min-height: 1em; font-size: 13px; color: #A33A2A; }
.field__error:empty { min-height: 0; }
.inquiry__error:empty { display: none; }
.inquiry__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.inquiry__privacy { font-size: 12px; color: var(--muted); }
/* Send button: a plain colour change on hover, nothing moves */
.inquiry .btn {
  width: 100%; justify-content: space-between; background: var(--button); color: var(--on-button);
  border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
  transition: background-color .3s var(--ease-soft), color .3s var(--ease-soft);
}
.inquiry .btn__bg { display: none; }
.inquiry .btn__icon path { stroke: currentColor; transition: none; }
.inquiry .btn .btn__text { color: inherit; transition: none; }
.inquiry .btn:hover { background: var(--sand); color: var(--ink); }
.inquiry .btn:hover .btn__icon svg { transform: none; }
.inquiry .btn:hover .btn__icon path, .inquiry .btn:hover .btn__text { stroke: currentColor; color: inherit; }
@media (min-width: 768px) { .inquiry .btn { width: auto; justify-self: start; } }
.inquiry.is-sending .btn { opacity: .7; pointer-events: none; }
.inquiry.is-done > :not(.inquiry__done) { visibility: hidden; }
.inquiry__done { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; padding: 32px; text-align: center; }
.inquiry__done[hidden] { display: none; }
.inquiry__done-title { font-size: 32px; font-weight: 500; letter-spacing: -.02em; }
.inquiry__again { justify-self: center; margin-top: 8px; padding: 10px 4px; border: 0; background: none; color: var(--amber); font: inherit; font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }

.cta__trail { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cta__trail span { position: absolute; width: 64px; height: 64px; border-radius: 2px; overflow: hidden; background-size: cover; background-position: center; }

.btn {
  position: relative; display: inline-flex; align-items: center; gap: 16px; height: 64px; padding: 0 32px;
  background: #fff; color: var(--copper); font-size: 14px; font-weight: 600; overflow: hidden;
}
.btn__corners { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.btn__text { position: relative; z-index: 2; transition: color .4s; }
.btn__bg { position: absolute; inset: 0; background: var(--copper); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease); z-index: 1; }
.btn__icon { position: relative; z-index: 2; width: 17px; height: 17px; overflow: hidden; }
.btn__icon svg { width: 17px; height: 17px; transition: transform .45s var(--ease); }
.btn:hover .btn__bg { transform: scaleY(1); }
.btn:hover .btn__text { color: #fff; }
.btn:hover .btn__icon svg { transform: translateX(4px); }
.btn:hover .btn__icon path { stroke: #fff; }

/* ============================================================
   Film — a framed window that opens to full bleed on scroll
   ============================================================ */
.film { position: relative; height: 260vh; background: var(--bg-2); }
.film__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.film__frame { position: absolute; inset: 0; clip-path: inset(30% 8% 30% 8%); will-change: clip-path; }
@media (min-width: 768px) { .film__frame { clip-path: inset(24% 26% 24% 26%); } }
.film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transform-origin: center; }
.film__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(53,44,34,0) 45%, rgba(53,44,34,.55)); opacity: 0; }
.film__frame .frame-marks { inset: 16px; }
.film__frame .frame-marks i { opacity: 1; }
.film__frame .frame-marks i::before, .film__frame .frame-marks i::after { background: var(--mist); }

.film__overlay {
  position: absolute; left: var(--pad); right: var(--pad); bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 12px; color: var(--mist); opacity: 0; pointer-events: none;
}
.film__overlay.is-on { pointer-events: auto; }
.film__overlay .label { justify-self: start; margin: 0; }
.film__overlay .label h2 { color: var(--mist); }
.film__overlay .corners i { border-color: var(--mist); }
.film__title { font-size: clamp(34px, 6vw, 96px); font-weight: 500; line-height: .98; letter-spacing: -.035em; }
.film__meta { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.film__link {
  position: relative; width: fit-content; margin-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.film__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(.3); transform-origin: left; transition: transform .5s var(--ease); }
.film__link:hover::after { transform: scaleX(1); }
.film__link span { display: inline-block; transition: transform .45s var(--ease); }
.film__link:hover span { transform: translateX(4px); }
.film__hud {
  position: absolute; top: calc(50% - 30vh); right: var(--pad); font-size: 10px; letter-spacing: .16em;
  color: var(--amber); font-variant-numeric: tabular-nums; transition: color .4s;
}
@media (min-width: 768px) { .film__hud { top: calc(24% - 28px); right: 26%; } }
.film__hud.is-light { color: var(--mist); }

/* ============================================================
   Reel — portrait film beside its project text
   ============================================================ */
/* Full-width band; content kept to a 1280px column inside it */
.reel {
  --inline: max(var(--pad), calc((100% - 1280px) / 2 + var(--pad)));
  display: grid; gap: 40px; padding: 96px var(--inline); background: var(--bg-2); align-items: center;
}
@media (min-width: 900px) { .reel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 96px; padding: 160px var(--inline); } }
.reel__media { width: min(100%, 440px); justify-self: center; }
.reel__media figcaption { margin-top: 12px; }
.reel__text { display: grid; gap: 16px; max-width: 520px; }
.reel__text .label { justify-self: start; margin: 0; }
.reel__title { font-size: clamp(40px, 5.6vw, 88px); font-weight: 500; line-height: .98; letter-spacing: -.035em; color: var(--ink); }
.reel__meta { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.reel__body { font-size: 16px; line-height: 1.75; }
@media (min-width: 1024px) { .reel__body { font-size: 18px; } }
.reel .film__link { color: var(--amber); }

/* ============================================================
   Shared figures: media frame, CAD dimension line, fig. number
   ============================================================ */
.media { position: relative; overflow: hidden; background: var(--sand); }
.media img, .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.pd-media .media img, .pd-media .media video { height: 108%; top: -4%; }
.media__expand { position: absolute; inset: 0; z-index: 2; border: 0; background: transparent; cursor: zoom-in; }
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) { .media__expand, [data-cursor] { cursor: none; } }

/* CAD dimension line above each figure */
.dim {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px; transform-origin: left;
  font-size: 9px; letter-spacing: .16em; color: var(--amber); font-variant-numeric: tabular-nums;
}
.dim i { position: relative; flex: 1; height: 1px; background: rgb(var(--accent-rgb) / .55); }
.dim i:first-child::before, .dim i:last-child::after {
  content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: var(--amber);
}
.dim i:first-child::before { left: 0; }
.dim i:last-child::after { right: 0; }
.dim em { font-style: normal; }

.fig-no { display: inline-flex; gap: 6px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.fig-no b { font-weight: 600; color: var(--amber); font-variant-numeric: tabular-nums; }

/* ============================================================
   Footer
   ============================================================ */
.footer { padding: 64px var(--pad) calc(28px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) { .footer { padding-top: 96px; } }
.footer__rule { display: block; height: 1px; background: rgb(var(--ink-rgb) / .22); transform: scaleX(0); transform-origin: left; }

/* Brand column + three link columns; two across on phones */
.footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; padding: 0 0 56px; }
.footer__brand { grid-column: 1 / -1; display: grid; gap: 20px; align-content: start; max-width: 340px; }
.footer__logo .wordmark { width: 104px; height: auto; display: block; }
.footer__tagline { font-size: 15px; line-height: 1.6; color: var(--muted); }
@media (min-width: 900px) {
  .footer__grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 48px; padding-bottom: 72px; }
  .footer__brand { grid-column: auto; }
}
.footer__col { display: grid; gap: 10px; align-content: start; font-size: 15px; }
.footer__col h2 { margin-bottom: 6px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.footer__col a, .footer__col p { width: fit-content; }
.footer__col a { position: relative; }
.footer__col a::after, .footer__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.footer__col a:hover::after, .footer__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.footer__col .footer__note { font-size: 13px; color: var(--muted); }

/* Bottom bar */
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding-top: 20px; font-size: 12px; color: var(--muted);
}
.footer__nav { display: flex; gap: 24px; }
.footer__nav a { position: relative; }
:lang(th) .footer__col h2 { letter-spacing: .04em; }

.inquiry__privacy a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }

/* ============================================================
   Privacy notice page
   ============================================================ */
.legal { max-width: 760px; margin: 0 auto; padding: 140px var(--pad) 96px; }
@media (min-width: 1024px) { .legal { padding-top: 180px; padding-bottom: 140px; } }
.legal__head { display: grid; gap: 16px; margin-bottom: 56px; padding-bottom: 40px; border-bottom: 1px solid var(--rule); }
.legal__updated { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.legal h1 { font-family: var(--font-display); font-size: clamp(40px, 6vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.legal__intro { font-size: 18px; line-height: 1.65; color: var(--muted); }
.legal__section { display: grid; gap: 12px; padding: 28px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) { .legal__section { grid-template-columns: 220px 1fr; gap: 32px; } .legal__section > :not(h2) { grid-column: 2; } }
.legal h2 { font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.legal__section p { font-size: 16px; line-height: 1.75; }
.legal__contact { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.legal__contact a { text-decoration: underline; text-underline-offset: 4px; }
.legal__contact span { color: var(--muted); }
:lang(th) .legal__updated, :lang(th) .legal h2 { letter-spacing: .02em; }
:lang(th) .legal__section p, :lang(th) .legal__intro { line-height: 1.9; }
/* No page script draws the footer rule in, so show it as is */
.page-privacy .footer__rule { transform: none; }

/* ============================================================
   Back to top
   ============================================================ */
.to-top {
  position: fixed; z-index: 900; right: var(--pad); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: var(--button); color: var(--on-button); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .4s var(--ease-soft), transform .5s var(--ease), visibility 0s .4s, background-color .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .4s var(--ease-soft), transform .5s var(--ease), background-color .3s; }
.to-top:hover { background: var(--sand); color: var(--ink); }
.to-top__arrow { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.to-top:hover .to-top__arrow { transform: translateY(-3px); }
.to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top__ring circle { fill: none; stroke: var(--sand); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; }
.to-top:hover .to-top__ring circle { stroke: var(--ink); }
.menu-open .to-top, .lb-open .to-top { opacity: 0; visibility: hidden; }
/* Projects page: sit above the Fig. counter */
.page-projects .to-top { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) { .to-top { right: 32px; bottom: 32px; } .page-projects .to-top { bottom: calc(4% + 48px); } }

/* ============================================================
   Thai: no capitals or tracking, a little more line height
   ============================================================ */
:lang(th) .label h2, :lang(th) .header__nav a, :lang(th) .field__label, :lang(th) .svc__seen-label,
:lang(th) .film__meta, :lang(th) .reel__meta, :lang(th) .hero__tagline-text, :lang(th) .film__link,
:lang(th) .pd-head__meta, :lang(th) .pd-next__meta, :lang(th) .pd-head__back, :lang(th) .pd-details dt,
:lang(th) .pj-card__title, :lang(th) .pj-card__meta, :lang(th) .fig-no, :lang(th) .svc__fig { letter-spacing: .02em; }
:lang(th) body { line-height: 1.6; }
:lang(th) .statement__text { line-height: 1.45; }
:lang(th) .svc__desc, :lang(th) .reel__body, :lang(th) .cta p, :lang(th) .pd-text p { line-height: 1.85; }
:lang(th) .film__title, :lang(th) .svc__title, :lang(th) .cta h3 { line-height: 1.25; }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .statement__text .w { opacity: 1; }
}