@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@400;500;600;700&family=Prompt:wght@300;400;500;600;700&display=swap');

:root{
  --cream: #f4eee1;
  --cream-2: #ece3d1;
  --ink: #1a1510;
  --ink-soft: #211a15;
  --rust: #c1633a;
  --rust-dark: #a8502c;
  --olive: #8f8462;
  --green: #5c6b45;
  --mustard: #d9a441;
  --brown-dark: #241d17;
  --line: rgba(26,21,16,0.12);
  --line-light: rgba(244,238,225,0.16);
  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --radius: 18px;
}

/* Thai copy uses a single typeface (Prompt) across headlines and body,
   swapped in automatically whenever i18n.js sets <html lang="th">. */
html[lang="th"]{
  --font-display: 'Prompt', sans-serif;
  --font-body: 'Prompt', sans-serif;
}
/* Phrase spans added by i18n.js (see setThaiPhrases) — lines may only break
   at the spaces between them. Phones get the browser's own breaking back,
   since the longest phrases would be wider than a narrow screen. */
@media (min-width: 641px){
  .th-phrase{ white-space: nowrap; }
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior: smooth; }
/* smooth-scroll.js does its own easing; keeping the CSS one on as well makes
   every programmatic scroll animate twice and stutter. */
html.js-smooth-scroll{ scroll-behavior: auto; }

body{
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

.container{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Full-bleed variant for the work contact sheet: no max-width cap, just a
   thin gutter, so the sheet runs the width of the window like the reference. */
.container-wide{ max-width: none; padding: 0 40px; }
@media (max-width: 640px){
  .container-wide{ padding: 0 16px; }
}

.eyebrow{
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
}

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.08;
}

h1{ font-size: clamp(2.6rem, 6vw, 5.4rem); }
h2{ font-size: clamp(2rem, 4vw, 3.2rem); }
h3{ font-size: clamp(1.3rem, 2.4vw, 1.7rem); }

p.lead{
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: rgba(26,21,16,0.68);
  max-width: 46ch;
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }

.btn-primary{ background: var(--ink); color: var(--cream); }
.btn-primary:hover{ background: var(--rust); }

.btn-light{ background: var(--cream); color: var(--ink); }
.btn-light:hover{ background: var(--rust); color: var(--cream); }

.btn-outline{ background: transparent; color: var(--cream); border-color: var(--line-light); }
.btn-outline:hover{ background: var(--cream); color: var(--ink); }

.btn-rust{ background: var(--rust); color: var(--cream); }
/* Hover inverts the pair (cream fill, rust text). The old dark hover sat on top
   of dark photo scrims and made the button disappear. */
.btn-rust:hover{ background: var(--cream); color: var(--rust); }

/* ---------- Nav ---------- */
.site-nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.site-nav.on-dark{ color: var(--cream); }
.site-nav.scrolled{
  background: rgba(244,238,225,0.92);
  backdrop-filter: blur(10px);
  color: var(--ink);
  padding: 14px 0;
  border-color: var(--line);
}
.site-nav .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
}
.logo img{
  height: 46px;
  width: auto;
  display: block;
}
.nav-links{
  display:flex;
  align-items:center;
  gap: 40px;
  list-style:none;
}
.nav-links a{
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
  padding-bottom: 3px;
}
.nav-links a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background: currentColor;
  transition: width .25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:20px; }
/* Hamburger: hidden on desktop, the only way into the menu on phones. */
.nav-toggle{
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.nav-toggle span{
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transition: transform .3s ease, opacity .2s ease;
}
/* Open state turns the three bars into an X. */
.site-nav.menu-open .nav-toggle span:nth-child(1){ transform: translateY(5.5px) rotate(45deg); }
.site-nav.menu-open .nav-toggle span:nth-child(2){ opacity: 0; }
.site-nav.menu-open .nav-toggle span:nth-child(3){ transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 860px){
  .nav-toggle{ display: flex; }
  /* The menu is the same <ul> as desktop, re-laid-out as a drop-down panel so
     there is only one list of links to keep in sync. */
  .nav-links{
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 90px 24px 28px;
    background: var(--cream);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    transform: translateY(-100%);
    transition: transform .35s ease;
    z-index: -1;            /* slides out from behind the bar */
  }
  .site-nav.menu-open .nav-links{ transform: none; }
  .nav-links li + li{ border-top: 1px solid var(--line); }
  .nav-links a{
    display: block;
    padding: 16px 0;
    font-size: 17px;
    color: var(--ink);
  }
  .nav-links a::after{ content: none; }
  .nav-links a.active{ color: var(--rust); }
  /* The bar itself needs a solid background while the panel is down, otherwise
     the hero shows through the strip above it. */
  .site-nav.menu-open{
    background: var(--cream);
    color: var(--ink);
    border-color: var(--line);
  }
  .site-nav.menu-open .btn-light{ background: var(--ink); color: var(--cream); }
  .nav-cta .btn{ padding: 12px 20px; font-size: 13px; }
}
@media (max-width: 420px){
  .logo img{ height: 38px; }
  .nav-cta .btn{ padding: 11px 16px; font-size: 12px; }
}

/* ---------- Hero (Home) ---------- */
.hero{
  position: relative;
  height: 100svh;
  min-height: 620px;
  display:flex;
  align-items: flex-end;
  overflow:hidden;
  background: var(--ink);
}
.hero video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,16,12,0.55) 0%, rgba(20,16,12,0.25) 35%, rgba(20,16,12,0.85) 100%);
  z-index:1;
}
.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  padding-bottom: 72px;
  color: var(--cream);
}
.hero-content .eyebrow{ color: var(--mustard); }
/* The brand name is Latin-only, so it stays on Fraunces even in Thai mode
   instead of following the --font-display swap to Prompt. */
.hero-content h1{ margin: 14px 0 18px; font-family: 'Fraunces', serif; }
.hero-content p.lead{ color: rgba(244,238,225,0.82); margin-bottom: 32px; }

.scroll-cue{
  position:absolute;
  right: 32px; bottom: 32px;
  z-index:2;
  color: var(--cream);
  writing-mode: vertical-rl;
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
  opacity:0.75;
}
.scroll-cue span.dash{ display:block; width:1px; height:36px; background: currentColor; }

/* ---------- Section spacing ---------- */
section{ padding: 110px 0; }
.section-head{ margin-bottom: 56px; }
.section-head .eyebrow{ margin-bottom: 14px; display:block; }

/* ---------- Clients strip ---------- */
.clients{ background: var(--ink); color: var(--cream); padding: 90px 0; }
.clients .section-head p.lead{ color: rgba(244,238,225,0.65); }
.client-grid{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:center;
  gap: 34px 44px;
  padding: 10px 0;
  /* Deliberately narrower than the container: constraining the wrap width is
     what makes the wall taper into a centred cluster instead of stretching
     edge to edge in flat rows. */
  max-width: 620px;
  margin: 0 auto;
}
.client-logo{
  display:flex;
  align-items:center;
  justify-content:center;
}
.client-logo img{
  max-height: 40px;
  width: auto;
  height: auto;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity .3s ease, filter .3s ease, transform .3s ease;
}
.client-logo:hover img{
  filter: none;
  opacity: 1;
  transform: scale(1.06);
}
/* Logos whose artwork is essentially black line-art (measured: luminance < 110
   with almost no saturation). Revealing their true colour on hover would make
   them vanish against the dark section, so they stay white and respond with
   opacity + scale instead. */
.client-logo:hover img.client-logo-mono{
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 1;
}
/* Vary each logo's height so the wall reads as an organic scattered
   cluster (like a real "as seen in" wall) instead of a neat aligned grid. */
.client-grid{ align-items: flex-start; }
.client-logo{ align-self: center; }
/* A 7-step cycle (co-prime with the ~6 logos that fit per row) keeps the
   sizes from lining up the same way on every row, which is what makes the
   wrap taper organically instead of forming a tidy grid. */
.client-logo:nth-child(7n+1) img{ max-height: 58px; }
.client-logo:nth-child(7n+2) img{ max-height: 30px; }
.client-logo:nth-child(7n+3) img{ max-height: 46px; }
.client-logo:nth-child(7n+4) img{ max-height: 36px; }
.client-logo:nth-child(7n+5) img{ max-height: 54px; }
.client-logo:nth-child(7n+6) img{ max-height: 26px; }
.client-logo:nth-child(7n+7) img{ max-height: 42px; }
.client-logo:nth-child(3n) { transform: translateY(10px); }
.client-logo:nth-child(4n) { transform: translateY(-8px); }
/* Photo-based "logo" (not a flat vector mark) — brightness(0)/invert would
   flatten it into a solid block, so just desaturate instead. */
.client-logo img.client-logo-photo{
  max-height: 56px;
  border-radius: 6px;
  /* These three fill their whole frame with solid colour, so the usual
     brightness(0) invert(1) silhouette trick would flatten them into blank
     blocks. Lift them instead so they read against the dark section. */
  filter: grayscale(1) brightness(1.3);
  opacity: 0.75;
}
/* This one is a genuinely dark photograph (mean luminance ~76/255), so the
   shared lift above isn't enough to separate it from the dark section. */
.client-logo img.client-logo-photo[src*="nack-siwakorn"]{
  filter: grayscale(1) brightness(1.9);
  opacity: 0.85;
}
.client-logo:hover img.client-logo-photo{ filter: none; opacity: 1; }
@media (max-width: 860px){
  .client-grid{ gap: 32px 36px; }
  .client-logo img{ max-height: 32px; }
}

/* ---------- Work preview / grid (shared with Work page) ---------- */
.work-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.arrow-nav{ display:flex; gap:10px; }
.arrow-btn{
  width: 44px; height:44px;
  border-radius:50%;
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  background: transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.arrow-btn:hover{ background: var(--ink); color: var(--cream); border-color: var(--ink); }

.work-track{
  display:flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.work-track::-webkit-scrollbar{ display:none; }

.work-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.project-card{
  flex: 0 0 340px;
  scroll-snap-align: start;
  /* The whole card is a link to the case study — say so, including over the
     <video>, which otherwise shows the default arrow. */
  cursor: pointer;
}
.project-card .project-thumb,
.project-card .project-video{ cursor: pointer; }
.work-grid .project-card{ flex: unset; width: 100%; }

.project-thumb{
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(244,238,225,0.65);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow:hidden;
  transition: transform .35s ease;
  /* Keep `cover` unconditionally — animating background-size here would
     override it and letterbox landscape images / crop portrait ones. */
  background-size: cover;
  /* Per-image focal point: set --thumb-pos inline on the element to override,
     e.g. style="--thumb-pos: 70% 20%". Falls back to centered if unset. */
  background-position: var(--thumb-pos, center);
}
.project-thumb::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,8,6,0.1) 0%, rgba(10,8,6,0.55) 100%);
}
.project-card:hover .project-thumb{ transform: translateY(-6px); }
.project-thumb::after{
  content:'▶';
  position:absolute;
  font-size: 13px;
  color: rgba(244,238,225,0.85);
  width: 46px; height:46px;
  border: 1px solid rgba(244,238,225,0.5);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transform: scale(0.85);
  transition: all .3s ease;
}
.project-card:hover .project-thumb::after{ opacity:1; transform:scale(1); }

/* Video tiles: the clip fills the thumb and the still underneath stays as the
   poster, so a card without a clip yet looks identical. */
.project-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Colour while playing, drained to black and white on hover — per the reference. */
.project-thumb,
.project-video{
  transition: filter .4s ease, transform .4s ease;
}
.project-card:hover .project-thumb,
.project-card:hover .project-video{
  filter: grayscale(1);
}

.project-meta{ margin-top: 16px; }
.project-cat{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  display:block;
  margin-bottom: 6px;
}
.project-name{
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
}

/* thumbnail palette */
/* Use the longhand: the `background` shorthand would reset background-size
   and background-position (killing `cover` and per-image focal points on
   any element that also carries one of these palette classes). */
.c-dark{ background-color: #1c140f; }
.c-rust{ background-color: var(--rust); }
.c-olive{ background-color: var(--olive); }
.c-green{ background-color: var(--green); }
.c-brown{ background-color: #2c231b; }
.c-mustard{ background-color: var(--mustard); }

/* ---------- Work mosaic (Home selected work) ---------- */
.work-preview{ background: var(--ink); color: var(--cream); }
.work-preview .section-head .eyebrow{ color: var(--mustard); }
.work-preview .section-head p.lead{ color: rgba(244,238,225,0.65); }

.work-mosaic{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
.tile{
  display:block;
  background: #0e0b08;
  border: 1px solid rgba(244,238,225,0.08);
  border-radius: 10px;
  overflow: hidden;
}
.tile-media{ aspect-ratio: 4/3; overflow: hidden; }

.tile-media{
  width: 100%;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding: 14px;
  color: rgba(244,238,225,0.75);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
  transition: transform .4s ease;
  background-size: cover;
  background-position: center;
}
.tile-media::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,8,6,0) 45%, rgba(10,8,6,0.65) 100%);
}
.tile-media span{ position:relative; }
/* Looping clip, same as the matching tile on the work page. */
.tile-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The "video preview" label was a stand-in for a still; once a real clip plays
   it is just noise sitting on top of the footage. */
.tile-media.has-video span{ display: none; }
.tile:hover .tile-media{ transform: scale(1.03); }

.tile-caption{
  padding: 14px 18px;
  background: #0a0806;
}
.tile-cat{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  display:block;
  margin-bottom: 4px;
}
.tile-name{
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--cream);
}

@media (max-width: 760px){
  .work-mosaic{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Testimonials ---------- */
.testimonials{ background: var(--cream-2); }
.testi-wrap{ position: relative; max-width: 760px; margin: 0 auto; text-align:center; }
.testi-slide{ display:none; }
.testi-slide.active{ display:block; animation: fadeUp .5s ease; }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }
.testi-quote{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 400;
  line-height: 1.45;
  margin-bottom: 28px;
}
.testi-author{ font-weight: 600; font-size: 14px; }
.testi-role{ font-size: 13px; color: rgba(26,21,16,0.55); margin-top: 2px; }
.testi-controls{
  display:flex; align-items:center; justify-content:center; gap: 20px;
  margin-top: 40px;
}
.testi-dots{ display:flex; gap: 8px; }
.testi-dot{ width:7px; height:7px; border-radius:50%; background: rgba(26,21,16,0.25); cursor:pointer; transition: background .2s; }
.testi-dot.active{ background: var(--rust); }

/* ---------- CTA band ---------- */
.cta-band{
  position: relative;
  overflow: hidden;
  /* Longhand, not the `background` shorthand: the shorthand would reset
     background-size and the photo would tile at its native size. */
  background-color: var(--ink);
  background-image: url('../img/contact-bg.jpg');
  background-size: cover;
  background-position: center;
  color: var(--cream);
  border-radius: 28px;
  padding: 90px 60px;
  text-align:center;
  margin: 0 32px;
}
/* Same warm scrim as the contact hero so the type keeps its contrast. */
.cta-band::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,21,16,0.92) 0%, rgba(26,21,16,0.72) 45%, rgba(26,21,16,0.94) 100%);
}
.cta-band > *{ position: relative; z-index: 1; }
.cta-band h2{ margin-bottom: 20px; }
.cta-band p.lead{ margin: 0 auto 36px; color: rgba(244,238,225,0.7); white-space: pre-line; }
.cta-social{
  display:flex; align-items:center; justify-content:center; gap: 16px;
  margin-top: 40px;
}
.cta-social a{
  width: 42px; height:42px;
  border-radius:50%;
  border: 1px solid var(--line-light);
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, border-color .2s ease;
}
.cta-social a:hover{ background: var(--rust); border-color: var(--rust); }
.cta-email{ margin-top: 18px; font-size: 14px; color: rgba(244,238,225,0.6); }

/* ---------- Footer ---------- */
footer.site-footer{
  background: var(--ink);
  color: rgba(244,238,225,0.55);
  padding: 48px 0 32px;
  font-size: 13px;
}
.footer-row{
  display:flex; align-items:center; justify-content:space-between; gap: 20px; flex-wrap:wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-light);
  margin-bottom: 24px;
}
.footer-row .logo{ color: var(--cream); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--line-light);
}

/* ----- Footer columns ----- */
/* Two columns now: the logo stacked over the sitemap on the left, socials
   pushed to the far right. */
.footer-grid{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  padding-bottom: 40px;
}
.footer-brand .logo{ margin-bottom: 26px; }
.footer-heading{
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 16px;
}
.footer-links{ list-style: none; display: grid; gap: 9px; }
.footer-links a,
.footer-email{
  color: rgba(244,238,225,0.55);
  font-size: 14px;
  transition: color .2s ease;
}
.footer-links a:hover,
.footer-email:hover{ color: var(--cream); }
.footer-email{ display: inline-block; margin-bottom: 18px; }

/* ----- Social icons ----- */
.footer-social{ display: flex; gap: 10px; flex-wrap: wrap; }
.footer-social a{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.footer-social a:hover{
  background: var(--rust);
  border-color: var(--rust);
  transform: translateY(-2px);
}
.footer-social svg{
  width: 17px;
  height: 17px;
  /* Glyphs are drawn as strokes so a single colour rule controls them all;
     .fill marks the few solid dots that would vanish as outlines. */
  fill: none;
  stroke: rgba(244,238,225,0.75);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer-social a:hover svg{ stroke: var(--cream); }
.footer-social svg .fill{ fill: rgba(244,238,225,0.75); stroke: none; }
.footer-social a:hover svg .fill{ fill: var(--cream); }

/* ----- Oversized wordmark ----- */
.footer-wordmark{
  /* The wordmark is Latin-only, so it stays on Fraunces even in Thai mode
     instead of following the --font-display swap to Prompt. */
  font-family: 'Fraunces', serif;
  font-weight: 600;
  /* Scales with the viewport so it always spans the full width without
     overflowing — the whole point of the effect. */
  font-size: clamp(3rem, 15.5vw, 15rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--cream);
  opacity: 0.13;
  white-space: nowrap;
  user-select: none;
  padding-bottom: 12px;
}

@media (max-width: 860px){
  .footer-grid{ grid-template-columns: 1fr; gap: 32px; }
}

/* ================= WORK PAGE ================= */
.page-hero{
  padding: 190px 0 60px;
}
.page-hero h1{ margin-top: 14px; max-width: 14ch; }

.filter-pills{
  display:flex; flex-wrap:wrap; gap: 12px;
  margin: 44px 0 56px;
}
.pill{
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pill.active, .pill:hover{ background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* Contact-sheet layout: near-touching landscape tiles, captions hidden until
   hover (per the reference). */
.work-page-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding-bottom: 120px;
}
.work-page-grid .project-card{
  display:block;
  position: relative;
  /* Tiles are the grid now — no caption sits underneath them. */
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 4px;
  flex: unset;
}
.work-page-grid .project-card.hidden{ display:none; }

/* The thumb fills the tile; the rounding lives on the card instead. */
.work-page-grid .project-thumb{
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}
.work-page-grid .project-card:hover .project-thumb{ transform: none; }
/* The play badge is redundant once the caption appears on hover. */
.work-page-grid .project-thumb::after{ content: none; }

/* Caption overlay: centred, revealed with the black-and-white treatment. */
/* One centred line, "NAME // CATEGORY", exactly as the reference sets it. */
.work-page-grid .project-meta{
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 16px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  text-align: center;
  color: var(--cream);
  background: rgba(12,10,8,0.28);
  opacity: 0;
  transition: opacity .35s ease;
}
.work-page-grid .project-card:hover .project-meta{ opacity: 1; }
/* The markup lists the category first; the reference leads with the client. */
.work-page-grid .project-name{ order: 1; }
.work-page-grid .project-cat{ order: 2; }
.work-page-grid .project-name::after{
  content: ' //';
  margin-left: 0.4em;
}
.work-page-grid .project-name,
.work-page-grid .project-cat{
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 1.05vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--cream);
}

@media (max-width: 960px){
  .work-grid{ grid-template-columns: repeat(2, 1fr); }
  .work-page-grid{ grid-template-columns: repeat(2, 1fr); gap: 5px; }
}
@media (max-width: 640px){
  .work-grid{ grid-template-columns: 1fr; }
  .work-page-grid{ grid-template-columns: 1fr; gap: 5px; }
}

/* ================= ABOUT PAGE ================= */
/* Nothing follows the statement any more, so the hero carries no bottom
   padding of its own — the next section's padding is the whole gap. */
.about-hero{ padding: 190px 0 0; text-align: center; }
/* Scaled back from the full display size: at roughly 3.5x the eyebrow it
   reads as a composed statement over two lines instead of a shouted wall. */
.about-hero h1{
  font-size: clamp(1.75rem, 3.4vw, 2.7rem);
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: -0.005em;
  max-width: 26ch;
  margin: 0 auto;
}

/* Justified rows. Each row is a flex line whose items grow in proportion to
   their aspect ratio, so every image in a row lands on the same height and the
   row fills the container exactly — which is what gives the block a flat
   bottom edge instead of the ragged one a masonry column layout produces. */
.bts-grid{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.bts-row{
  display: flex;
  gap: 10px;
}
.bts-shot{
  position: relative;
  margin: 0;
  min-width: 0;
  border-radius: 10px;
  overflow: hidden;
}
.bts-shot img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Film grain: fractal noise generated inline (no image request) and blended
   over each frame so the stills read as shot footage rather than snapshots.
   The layer is pointer-transparent so it never blocks interaction. */
.bts-shot::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.34;
}
@media (max-width: 640px){
  .bts-grid, .bts-row{ gap: 6px; }
}

/* Click-to-enlarge for the behind-the-scenes grid. One overlay is reused for
   every photo; a second click anywhere closes it. */
.bts-shot{ cursor: zoom-in; }
.bts-lightbox{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(14,11,8,0.92);
  cursor: zoom-out;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.bts-lightbox.open{ opacity: 1; visibility: visible; }
.bts-lightbox img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  transform: scale(0.94);
  transition: transform .35s ease;
}
.bts-lightbox.open img{ transform: scale(1); }

/* Latin motto: stays on Fraunces in Thai mode, and sized to hold one line at
   desktop width rather than wrapping mid-phrase. */
.team-motto{
  font-family: 'Fraunces', serif;
  font-size: clamp(1.35rem, 2.9vw, 2.3rem);
  font-weight: 400;
  letter-spacing: 0;
}

/* Team section head: centred, with a larger eyebrow than the site default. */
.team-head{ text-align: center; }
.team-head .eyebrow{
  font-size: 15px;
  letter-spacing: 0.2em;
  margin-bottom: 18px;
}
.team-head .team-motto{
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

.team-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}

/* Card is the photo itself: name and tag sit on the image, and the role line
   stays hidden until hover (per the reference). */
.team-card{
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
}
.team-card img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Washed out until hover, then the baked-in film grade comes back. */
  filter: saturate(0.45);
  transition: transform .5s ease, filter .45s ease;
}
.team-card:hover img{
  transform: scale(1.05);
  filter: saturate(1);
}
/* Film grain, same inline fractal-noise trick as the behind-the-scenes grid.
   Sits above the photo but below the scrim and the type. */
.team-card::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.55;
}
/* Scrim so white type stays legible over any photo. */
.team-card::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(20,16,12,0) 58%, rgba(20,16,12,0.8) 100%);
  transition: background .4s ease;
  z-index: 1;
}
.team-card:hover::after{
  background: linear-gradient(180deg, rgba(20,16,12,0) 52%, rgba(20,16,12,0.88) 100%);
}
.team-overlay{
  position: absolute;
  left: 18px; right: 18px; bottom: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--cream);
}
.team-name{
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
}
.team-tag{
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(244,238,225,0.72);
}
.team-hidden{
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--rust);
  /* Collapsed rather than merely transparent, so the visible lines sit flush
     to the bottom edge until the role is revealed. */
  max-height: 0;
  opacity: 0;
  transform: translateY(6px);
  overflow: hidden;
  transition: max-height .35s ease, opacity .3s ease, transform .35s ease, margin-top .35s ease;
}
.team-card:hover .team-hidden{
  max-height: 3.2em;
  opacity: 1;
  transform: none;
  margin-top: 6px;
}
@media (max-width: 760px){ .team-grid{ grid-template-columns: repeat(2, 1fr); } }

/* Mission / Vision: label on the left, copy on the right, split by rules —
   the editorial two-column pattern from the reference. */
/* Photo background with a heavy warm scrim — cinematic, but the copy still
   has to be the thing you read, so the scrim stays dark and the image is
   fixed so it drifts behind the text as you scroll. */
.intent{
  position: relative;
  /* Longhand, not the `background` shorthand: the shorthand resets
     background-size and the photo would tile at its native size. */
  background-color: var(--ink);
  background-image: url('../img/unit01-bts-4.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--cream);
  overflow: hidden;
}
.intent::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,16,12,0.95) 0%, rgba(20,16,12,0.86) 50%, rgba(20,16,12,0.95) 100%);
}
.intent .container{ position: relative; z-index: 1; }
@media (max-width: 860px){
  /* iOS ignores fixed attachment and renders it badly; pin it instead. */
  .intent{ background-attachment: scroll; }
}
.intent .section-head{ margin-bottom: 40px; }
.intent-row{
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 40px;
  padding: 44px 0;
  border-top: 1px solid var(--line-light);
  align-items: start;
}
.intent-row:last-child{ border-bottom: 1px solid var(--line-light); }
.intent-label{
  font-family: 'Fraunces', serif;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}
.intent-body p{
  color: rgba(244,238,225,0.72);
  font-size: 15px;
  line-height: 1.75;
  max-width: 56ch;
}
.intent-body p + p{ margin-top: 18px; }
@media (max-width: 760px){
  .intent-row{ grid-template-columns: 1fr; gap: 18px; padding: 34px 0; }
}

.faq-list{ max-width: 780px; margin: 0 auto; }
.faq-item{
  border-bottom: 1px solid var(--line);
}
.faq-q{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding: 26px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family: var(--font-display);
  font-size: 18px;
  cursor:pointer;
  color: var(--ink);
}
.faq-q .plus{
  font-size: 20px;
  transition: transform .25s ease;
  flex: 0 0 auto;
  margin-left: 20px;
}
.faq-item.open .faq-q .plus{ transform: rotate(45deg); }
.faq-a{
  max-height:0;
  overflow:hidden;
  transition: max-height .35s ease;
}
.faq-a p{ padding-bottom: 26px; color: rgba(26,21,16,0.65); max-width: 65ch; font-size: 15px; }

/* ================= CONTACT PAGE ================= */
/* Column layout so the hero can absorb the leftover height and centre itself
   between the fixed nav and the footer, instead of sitting at the top with
   empty space below now that the form is gone. */
.contact-page{
  background: var(--brown-dark);
  color: var(--cream);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.contact-hero{
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 0 40px; /* top padding clears the fixed nav */
  text-align:center;
  overflow: hidden;
}
/* Behind-the-scenes photo as a full-bleed backdrop. It lives on its own layer
   (rather than on .contact-hero) so the dark scrim can sit on top of the image
   without also dimming the copy. */
.contact-hero-bg{
  position: absolute;
  inset: 0;
  background-image: url('../img/contact-bg.jpg');
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.contact-hero-bg::after{
  content: '';
  position: absolute;
  inset: 0;
  /* Warm dark scrim keyed to --brown-dark, heavier top and bottom so the
     fixed nav and the footer edge stay legible over the photo. */
  background:
    linear-gradient(180deg, rgba(26,21,16,0.92) 0%, rgba(26,21,16,0.72) 45%, rgba(26,21,16,0.94) 100%);
}
.contact-hero .container{
  position: relative;
  z-index: 1;
}
.contact-hero .eyebrow{ color: var(--mustard); }
/* Smaller than the global h1 scale — the contact page is a single short
   line of copy, so an oversized display size reads shouty rather than calm. */
.contact-hero h1{
  margin: 16px auto 14px;
  max-width: 20ch;
  font-size: clamp(2rem, 4vw, 3.4rem);
}
/* pre-line lets the copy keep its intended line break (a real newline in the
   translation string) while still wrapping normally on narrow screens.
   Needed because i18n.js assigns via textContent, so a <br> would print
   literally rather than break the line. */
.contact-hero p.lead{
  color: rgba(244,238,225,0.65);
  margin: 0 auto 34px;
  white-space: pre-line;
}

.quick-links{
  display:flex; align-items:center; justify-content:center; gap: 18px;
  margin-bottom: 56px;
}
.quick-btn{
  display:flex; align-items:center; gap:10px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--rust);
  color: var(--cream);
  font-weight: 600;
  font-size: 14px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.quick-btn:hover{ background: var(--cream); color: var(--rust); transform: translateY(-2px); }

.form-card{
  max-width: 640px;
  margin: 0 auto;
  background: rgba(244,238,225,0.04);
  border: 1px solid var(--line-light);
  border-radius: 24px;
  padding: 48px;
}
.form-card h3{ text-align:center; margin-bottom: 32px; }
.field{ position: relative; margin-bottom: 30px; }
.field label{
  display:block;
  font-size: 13px;
  color: rgba(244,238,225,0.55);
  margin-bottom: 8px;
}
.field input, .field textarea{
  width:100%;
  background: transparent;
  border:none;
  border-bottom: 1px solid var(--line-light);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 8px 2px 12px;
  outline:none;
  resize: none;
  transition: border-color .2s ease;
}
.field input:focus, .field textarea:focus{ border-color: var(--rust); }
.field textarea{ min-height: 90px; }

.form-footer{
  display:flex; align-items:center; gap: 18px; flex-wrap:wrap;
  margin-top: 8px;
}
.form-note{ font-size: 13px; font-style: italic; color: rgba(244,238,225,0.5); }
.form-success{
  display:none;
  margin-top: 20px;
  font-size: 14px;
  color: var(--mustard);
}
.form-success.show{ display:block; }

.based-in{
  text-align:center;
  padding: 56px 0 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,238,225,0.4);
}

.contact-page footer.site-footer{ background: transparent; border-top: 1px solid var(--line-light); margin-top: 40px; }
/* Trim the dead space under "Based in Bangkok" so the whole page fits one
   screen — otherwise the page overflows and .contact-hero's flex:1 has no
   spare height to centre its content with. */
.contact-page section{ padding-bottom: 0; }

/* ---------- Language switch ---------- */
.lang-switch{
  display:flex;
  align-items:center;
  gap: 2px;
  border: 1px solid rgba(128,120,110,0.35);
  border-radius: 999px;
  padding: 3px;
}
.lang-btn{
  background: none;
  border: none;
  padding: 5px 11px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  border-radius: 999px;
  transition: background .2s ease, opacity .2s ease;
}
.lang-btn.active{ opacity: 1; background: rgba(128,120,110,0.18); }
@media (max-width: 480px){
  .lang-btn{ padding: 5px 8px; font-size: 11px; }
}

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* Make mosaic / grid tiles clickable without odd link styling */
.tile-link, .project-link{ display:block; color:inherit; }

/* ================= CASE STUDY PAGE ================= */
.case-hero{
  background: var(--ink);
  color: var(--cream);
  padding: 190px 0 26px;
  text-align: center;
}
.case-hero .back-link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 13px;
  color: rgba(244,238,225,0.55);
  margin-bottom: 26px;
  transition: color .2s ease;
}
.case-hero .back-link:hover{ color: var(--cream); }
.case-hero .eyebrow{ color: var(--mustard); }
.case-hero h1{ margin: 16px auto 0; max-width: 20ch; }

.case-strip{
  background: var(--ink);
  padding: 56px 0 90px;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
}
.case-strip::-webkit-scrollbar{ display:none; }
.case-strip.dragging{
  cursor: grabbing;
  scroll-behavior: auto;
}
.case-strip.dragging .strip-card{ pointer-events: none; }
.strip-track{
  display:flex;
  gap: 22px;
  padding: 10px 32px 20px;
  width: max-content;
  margin: 0 auto;
}
.strip-card{
  position: relative;
  flex: 0 0 clamp(280px, 36vw, 560px);
  aspect-ratio: 4/3;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(244,238,225,0.4);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: transform .3s ease;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* The slow zoom lives on a pseudo-element and uses transform: scale() —
   animating background-size directly would override `cover` (even while
   paused), letterboxing landscape images and cropping portrait ones. */
.strip-card::before{
  content:'';
  position:absolute;
  inset:0;
  background-image: inherit;
  background-size: cover;
  background-position: inherit;
  background-repeat: no-repeat;
  animation: strip-drift 14s ease-in-out infinite alternate;
  animation-play-state: paused;
}
/* Film grain. ::before is taken by the zoom layer, so the grain gets ::after
   and sits above it — it must not scale with the drift or it would crawl. */
.strip-card::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.4;
}
.strip-card:hover{ transform: translateY(-6px); }
/* Portrait variant for pages whose stills come from vertical social footage:
   a 4:3 landscape card would crop a 9:16 frame down to a thin band. */
.case-strip--portrait .strip-card{
  flex: 0 0 clamp(170px, 18vw, 300px);
  aspect-ratio: 9/16;
}
.strip-card:hover::before{ animation-play-state: running; }
@keyframes strip-drift{
  from{ transform: scale(1); }
  to{ transform: scale(1.12); }
}

/* Credits now sit directly beneath the case title, so they read as part of
   the hero: no rules above and below, and no extra top padding that would
   detach them from the heading. */
.info-bar{
  background: var(--ink);
  padding: 0 0 46px;
}
.info-bar .container{
  display:flex;
  justify-content:center;
  gap: 90px;
  flex-wrap: wrap;
  text-align:center;
}
/* Credit block (case studies that list a crew rather than three stats):
   centred "Role: Name" lines, matching the reference. */
.credits{
  list-style: none;
  text-align: center;
  display: grid;
  gap: 6px;
  width: 100%;
}
.credits li{
  font-size: 15px;
  line-height: 1.7;
  color: rgba(244,238,225,0.82);
}
.credit-role{ color: rgba(244,238,225,0.55); }
.credit-name{ color: var(--cream); }

.info-label{
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244,238,225,0.5);
  margin-bottom: 8px;
  display:block;
}
.info-value{
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--cream);
}

.case-video{ background: var(--ink); padding: 90px 0 110px; }
.video-embed{
  max-width: 540px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
}
.video-embed .instagram-media{
  margin: 0 !important;
  min-width: 100% !important;
  width: 100% !important;
}
.video-frame{
  max-width: 920px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  border-radius: 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(244,238,225,0.6);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.video-frame.video-native::before,
.video-frame.video-native::after{
  content: none;
}
/* Embedded player (YouTube): the iframe draws its own controls, so the scrim
   and the play badge would only sit on top of them. */
.video-frame.video-embed::before,
.video-frame.video-embed::after{
  content: none;
}
.video-frame.video-embed{
  overflow: hidden;
  background: #000;
}
/* Click-to-play cover: our own still and play button, so nothing of the host
   player's branding shows until the viewer chooses to watch. */
.video-facade{
  cursor: pointer;
  background-size: cover;
  background-position: center;
}
.video-facade::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,8,6,0.15) 0%, rgba(10,8,6,0.45) 100%);
  transition: background .3s ease;
}
.video-facade:hover::before{ background: rgba(10,8,6,0.3); }
.facade-play{
  position: relative;
  z-index: 1;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1px solid rgba(244,238,225,0.7);
  background: rgba(20,16,12,0.35);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  transition: transform .3s ease, background .3s ease;
}
.facade-play::after{
  content: '';
  /* Triangle drawn with borders — nudged right so it sits optically centred. */
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--cream);
  margin-left: 5px;
}
.video-facade:hover .facade-play{
  transform: scale(1.08);
  background: rgba(193,99,58,0.85);
}

.video-frame.video-embed iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Vertical social clips (9:16) side by side, like a reels shelf. Four across
   on desktop, then a swipeable row on narrower screens rather than squashing
   them into slivers. */
.reel-row{
  display: grid;
  /* One column per clip, however many there are, so they always sit in a
     single row on desktop instead of wrapping one onto a second line. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 16px;
  max-width: 1116px;
  margin: 0 auto;
}
.reel{
  aspect-ratio: 9/16;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
}
.reel video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 860px){
  .reel-row{
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .reel{ scroll-snap-align: start; }
}

/* Two films on one case page: stacked, each keeping the standard frame. */
.video-stack{ display: grid; gap: 28px; }

.video-frame.video-native video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-frame::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,8,6,0.15) 0%, rgba(10,8,6,0.4) 100%);
}
.video-frame::after{
  content:'▶';
  position:absolute;
  font-size: 15px;
  color: rgba(244,238,225,0.9);
  width: 62px; height:62px;
  border: 1px solid rgba(244,238,225,0.5);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

.approach{ background: var(--cream); color: var(--ink); padding: 110px 0; text-align:center; }
.approach .eyebrow{ color: var(--rust); }
/* `balance` on both: these paragraphs run 2-3 lines, so evening the lines out
   removes the stranded short last line entirely. `pretty` only trims the final
   line and still left orphans in Thai, which has no spaces to work with. */
.approach h2{ margin: 14px auto 34px; max-width: 22ch; text-wrap: balance; }
.approach p{
  max-width: 62ch;
  margin: 0 auto 20px;
  color: rgba(26,21,16,0.68);
  font-size: 15px;
  line-height: 1.75;
  text-wrap: balance;
}

.other-works{ background: var(--cream); padding: 0 0 130px; text-align:center; }
.other-works .section-head{ margin-bottom: 50px; }
.other-grid{ display:flex; justify-content:center; gap: 44px; flex-wrap: wrap; }
.other-card{
  width: 250px;
  aspect-ratio: 3/4;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  transition: transform .3s ease;
  display:block;
}
.other-card:nth-child(1){ transform: rotate(-3deg); }
.other-card:nth-child(2){ transform: rotate(3deg); }
.other-card:hover{ transform: rotate(0) translateY(-6px); }
/* Looping clip, same as the matching tile on the work page. */
.other-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.other-media{
  height: 100%;
  position: relative;
  background-size: cover;
  background-position: var(--thumb-pos, center);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(244,238,225,0.5);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background-size: cover;
  background-position: center;
}
.other-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 18px 20px;
  background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
  text-align:left;
}
.other-cat{
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mustard);
  display:block;
  margin-bottom: 4px;
}
.other-name{ font-family: var(--font-display); font-size: 18px; color: #fff; }

@media (max-width: 640px){
  .info-bar .container{ gap: 40px; }
  .other-grid{ gap: 24px; }
}