/* WECRAFT STUDIO — Premium cinematic agency styles */
:root {
  --ivory: #f7f5f2;
  --wine: #7e2134;
  --wine-deep: #521625;
  --rose: #d2a3aa;
  --ink: #242222;
  --muted: #79736e;
  --line: #d5ccc6;
  --dark: #1f1a1b;
  --dark-line: #463a3b;
  --header: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: Prompt, Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img, video { display: block; }

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  height: var(--header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6%;
  background: #f7f5f2e8;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid #ddd5d0;
}
.logo { font: 600 25px/1 'Cormorant Garamond', serif; letter-spacing: .18em; }
.logo small { display: block; text-align: center; font: 400 8px/1.6 Prompt, sans-serif; letter-spacing: .45em; }
.nav { display: flex; align-items: center; gap: 28px; font-size: 11px; letter-spacing: .14em; }
.nav a:hover { color: var(--wine); }
.nav-cta { border: 1px solid var(--wine); padding: 11px 17px; color: var(--wine); }
.menu-toggle { display: none; border: 0; background: none; font-size: 23px; color: var(--ink); }

/* Shared */
section { padding: 115px 7%; }
.eyebrow { margin: 0; color: var(--wine); font-size: 10px; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 13px 23px;
  background: var(--wine); border: 1px solid var(--wine); color: #fff;
  font-size: 11px; letter-spacing: .12em; transition: .3s;
}
.btn:hover { background: var(--wine-deep); transform: translateY(-3px); }
.btn.ghost { background: transparent; color: var(--wine); }
.btn.light { background: transparent; border-color: #f7f2ef88; color: #f7f2ef; }
.btn.light:hover { background: #f7f2ef; color: var(--dark); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 44px; }
.section-heading > p { max-width: 520px; margin: 0; font-size: 13px; line-height: 2.2; color: var(--muted); }
.statement h2, .section-heading h2, .contact h2 {
  font: 500 clamp(48px, 6vw, 90px)/.98 'Cormorant Garamond', serif;
  letter-spacing: -.035em; margin: 15px 0;
}
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* Hero */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: 5%;
  padding: calc(var(--header) + 48px) 7% 64px;
  overflow: hidden;
}
.hero h1 { font-size: clamp(40px, 5vw, 78px); font-weight: 400; line-height: 1.32; letter-spacing: -.055em; margin: 21px 0; }
.hero h1 em { font-style: normal; color: var(--wine); }
.lead { max-width: 565px; color: #5e5853; font-size: 14px; line-height: 2; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-stats { display: flex; gap: 38px; margin: 46px 0 0; padding-top: 24px; border-top: 1px solid var(--line); max-width: 520px; }
.hero-stats dt { font: 500 40px/1 'Cormorant Garamond', serif; color: var(--wine); }
.hero-stats dd { margin: 8px 0 0; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

.hero-stage { position: relative; display: grid; place-items: center; min-height: 560px; }
/* Film-set backdrop behind the reel: camera + slate + script silhouettes in the wine CI */
.set-backdrop {
  position: absolute; inset: 5% -18% 9% 4%;
  overflow: hidden; background: var(--wine-deep);
  box-shadow: 0 50px 90px -50px #3b0a16cc;
}
.set-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 42%;
  transform-origin: 72% 40%;
  animation: setPush 22s ease-in-out infinite alternate;
}
.set-backdrop::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 45% at 50% 38%, #ffd9df1f, transparent 70%), linear-gradient(90deg, #2a0a12b3, transparent 28%, transparent 72%, #2a0a1255);
  animation: setFlicker 7s ease-in-out infinite;
}
.vf { position: absolute; z-index: 1; width: 22px; height: 22px; border: 0 solid #f2c9d0b3; }
.vf.tl { top: 16px; left: 16px; border-top-width: 1px; border-left-width: 1px; }
.vf.tr { top: 16px; right: 16px; border-top-width: 1px; border-right-width: 1px; }
.vf.bl { bottom: 16px; left: 16px; border-bottom-width: 1px; border-left-width: 1px; }
.vf.br { bottom: 16px; right: 16px; border-bottom-width: 1px; border-right-width: 1px; }
.set-slate, .set-rec { position: absolute; z-index: 1; font: 500 10.5px/1 Prompt, sans-serif; letter-spacing: .22em; color: #f2c9d0d9; }
.set-slate { left: 46px; bottom: 22px; }
.set-rec { right: 46px; top: 22px; display: flex; align-items: center; gap: 7px; }
.set-rec i { width: 7px; height: 7px; border-radius: 50%; background: #ff5a6e; animation: pulse 1.6s ease-in-out infinite; }
.reel-frame {
  position: relative; z-index: 1;
  height: min(72vh, 640px); aspect-ratio: 9 / 16;
  overflow: hidden; background: #130e0f center / cover no-repeat;
  border: 1px solid #ffffff55;
  box-shadow: 0 40px 80px -30px #3b0a16aa, 0 0 0 10px #f7f5f2;
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.reel-wash { position: absolute; inset: 0; background: linear-gradient(180deg, #13090c66, transparent 22%, transparent 70%, #13090ccc); pointer-events: none; }
.reel-label { position: absolute; top: 16px; left: 16px; display: flex; align-items: center; gap: 8px; color: #fff; font-size: 9px; letter-spacing: .24em; }
.reel-label i { width: 7px; height: 7px; border-radius: 50%; background: #ff5a6e; box-shadow: 0 0 0 4px #ff5a6e33; animation: pulse 1.6s ease-in-out infinite; }
.reel-play {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  padding: 13px 10px; border: 1px solid #ffffffaa; background: #ffffff1a;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; font-size: 10px; letter-spacing: .2em; transition: .3s;
}
.reel-play:hover { background: #fff; color: var(--wine); }
.hero-caption { position: absolute; right: 0; bottom: 0; color: var(--wine); font: italic 22px 'Cormorant Garamond', serif; z-index: 1; }

/* Client strip */
.client-strip { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; }
.marquee { display: flex; gap: 36px; width: max-content; animation: marquee 38s linear infinite; font-size: 11px; letter-spacing: .3em; color: var(--muted); white-space: nowrap; }
.marquee b { color: var(--wine); font-weight: 400; }

/* About */
.statement { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; align-items: center; }
.statement h2 span { color: var(--wine); }
.prose { font-size: 13px; line-height: 2.3; color: var(--muted); }

/* Services */
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.service { padding: 29px 22px; min-height: 215px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: .3s; }
.service:hover { background: #eee7e1; }
.service .num { margin-bottom: 26px; color: var(--wine); font-size: 10px; }
.service h3 { font: 500 25px/1.05 'Cormorant Garamond', serif; margin: 0; }
.service p { font-size: 12px; line-height: 1.9; color: var(--muted); }

/* Work */
.dark { background: var(--dark); color: #f7f2ef; }
.dark .eyebrow { color: var(--rose); }
.dark .section-heading > p { color: #c5b9b7; }
.work { padding-bottom: 80px; }

.category-bar {
  position: sticky; top: var(--header); z-index: 10;
  display: flex; gap: 10px; overflow-x: auto;
  margin: 0 -7% 8px; padding: 14px 7%;
  background: #1f1a1bf0;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--dark-line);
  scrollbar-width: none;
}
.category-bar::-webkit-scrollbar { display: none; }
.cat-tab {
  flex: 0 0 auto;
  display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; text-align: left;
  padding: 11px 16px; border: 1px solid #6c5e5e; background: transparent; color: #e3d8d6;
  font-size: 10px; letter-spacing: .14em; transition: .25s;
}
.cat-tab small { grid-column: 1; font-size: 11px; letter-spacing: .02em; color: #b7a9a8; margin-top: 3px; }
.cat-tab em { grid-column: 2; grid-row: 1 / span 2; font: normal 500 22px/1 'Cormorant Garamond', serif; color: var(--rose); }
.cat-tab em.soon { font: 500 9px/1 Prompt, sans-serif; letter-spacing: .14em; padding: 5px 7px; border: 1px solid var(--rose); }
.cat-tab:hover { border-color: #f7f2ef; }
.cat-tab.active { background: #f7f2ef; color: var(--dark); border-color: #f7f2ef; }
.cat-tab.active small { color: var(--muted); }
.cat-tab.active em { color: var(--wine); }
.cat-tab.active em.soon { border-color: var(--wine); }

.chapter { padding: 56px 0 64px; border-top: 1px solid var(--dark-line); }
.chapter:first-child { border-top: 0; }
.chapter[hidden] { display: none; }
.chapter-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; margin-bottom: 30px; }
.chapter-title { display: grid; grid-template-columns: auto 1fr; column-gap: 22px; align-items: end; max-width: 860px; }
.chapter-no { grid-row: 1 / span 2; align-self: center; font: italic 400 76px/.9 'Cormorant Garamond', serif; color: var(--rose); }
.chapter-head h3 { margin: 0; font: 500 clamp(28px, 2.8vw, 42px)/1.2 Prompt, sans-serif; letter-spacing: -.01em; }
.chapter-th { margin: 6px 0 0; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.5; color: #f2c9d0; }
.chapter-foot { display: flex; align-items: center; gap: 18px; }
.chapter-foot > span { font-size: 12.5px; letter-spacing: .04em; color: #a99a99; }

.work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 26px 18px; }
.work-card { display: block; padding: 0; border: 0; background: none; color: inherit; text-align: left; min-width: 0; }
.work-card .frame {
  position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden;
  background: #120d0e; border: 1px solid #3b3031; transition: border-color .35s, transform .5s;
}
.work-card video { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.work-card .shade { position: absolute; inset: 0; background: linear-gradient(180deg, #0d080999 0, transparent 22%, transparent 64%, #0d0809e6); pointer-events: none; }
.work-card .client {
  position: absolute; top: 10px; left: 10px; max-width: calc(100% - 70px);
  padding: 5px 8px; background: #1f1a1bd9; color: #fff;
  font-size: 8px; letter-spacing: .18em; line-height: 1.5;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.work-card .dur { position: absolute; top: 10px; right: 10px; padding: 5px 8px; background: #1f1a1bd9; color: #fff; font-size: 10px; letter-spacing: .08em; }
.work-card .play {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center;
  width: 58px; height: 58px; border: 1px solid #ffffffb3; border-radius: 50%;
  background: #7e213499; color: #fff; font-size: 16px; padding-left: 3px;
  transform: translate(-50%, -50%); transition: .35s;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.work-card.is-playing .play { opacity: .0; transform: translate(-50%, -50%) scale(.8); }
.work-card:hover .frame, .work-card:focus-visible .frame { border-color: var(--rose); }
.work-card:hover video { transform: scale(1.045); }
.work-card:hover .play, .work-card:focus-visible .play { opacity: 1; transform: translate(-50%, -50%) scale(1); background: var(--wine); }
.work-card:focus-visible { outline: 1px solid var(--rose); outline-offset: 4px; }
.card-meta { display: block; padding-top: 14px; }
.card-meta strong { display: block; font-weight: 400; font-size: 14px; line-height: 1.5; }
.card-meta small { display: block; margin-top: 5px; font-size: 9px; letter-spacing: .16em; color: #a99a99; }

/* Podcast panel */
.podcast-panel {
  position: relative; overflow: hidden; min-height: 460px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
  padding: 36px; border: 1px solid var(--dark-line);
  background: radial-gradient(120% 90% at 85% 10%, #7e213466, transparent 60%), linear-gradient(160deg, #2a2122, #171213);
}
.onair { display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .26em; color: #f2c9d0; }
.onair i { width: 8px; height: 8px; border-radius: 50%; background: #ff5a6e; box-shadow: 0 0 0 5px #ff5a6e2b; animation: pulse 1.6s ease-in-out infinite; }
.wave { display: flex; align-items: center; gap: 5px; height: 150px; }
.wave span {
  flex: 1; height: 100%; background: linear-gradient(180deg, var(--rose), var(--wine));
  border-radius: 3px; transform-origin: center;
  animation: wave 1.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.09s);
}
.formats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--dark-line); }
.formats div { padding: 18px 14px 0 0; }
.formats b { display: block; font: 500 30px/1 'Cormorant Garamond', serif; color: #fff; }
.formats span { display: block; margin-top: 8px; font-size: 10px; line-height: 1.7; letter-spacing: .1em; color: #c5b9b7; }
.podcast-panel p { margin: 0; font-size: 13px; color: #e3d8d6; }

/* Process */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.process-grid article { border-top: 1px solid #b9ada6; padding-top: 20px; }
.process-grid b { font: 400 46px 'Cormorant Garamond', serif; color: var(--wine); }
.process-grid h3 { font: 500 30px 'Cormorant Garamond', serif; margin: 13px 0; }
.process-grid p { font-size: 12px; line-height: 1.9; color: var(--muted); }

/* Contact */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; background: var(--wine); color: #fff; }
.contact .eyebrow { color: #f3cdd4; }
.contact h2 { color: #fff; }
.contact p { line-height: 2; color: #f0dadd; }
.contact form { display: grid; gap: 12px; align-content: start; }
.contact input, .contact select, .contact textarea {
  width: 100%; padding: 15px 6px; background: transparent; border: 0; border-bottom: 1px solid #fff7;
  color: #fff; outline: 0; border-radius: 0; font-size: 13px; -webkit-appearance: none; appearance: none;
}
.contact input::placeholder, .contact textarea::placeholder { color: #e6c7cf; }
.contact select option { color: #222; }
.contact button { padding: 15px; margin-top: 10px; border: 1px solid #fff; background: #fff; color: var(--wine); font-size: 11px; letter-spacing: .1em; transition: .3s; }
.contact button:hover { background: transparent; color: #fff; }
.form-status { min-height: 1em; margin: 4px 0 0; font-size: 12px; }

footer { display: flex; justify-content: space-between; gap: 20px; padding: 32px 7%; color: #817873; font-size: 11px; }

/* Modal player */
.modal {
  position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; gap: 24px;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: #0a0708f2;
}
.modal.open { display: flex; animation: fadeIn .35s ease; }
.modal-body { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 100%; }
.modal video { height: min(78vh, 900px); max-width: 92vw; aspect-ratio: 9 / 16; background: #000; outline: 0; }
.modal figcaption { display: grid; gap: 6px; text-align: center; color: #fff; max-width: 520px; }
.modal figcaption span { font-size: 9px; letter-spacing: .22em; color: var(--rose); }
.modal figcaption strong { font: 500 28px/1.15 'Cormorant Garamond', Prompt, serif; }
.modal figcaption small { font-size: 10px; letter-spacing: .16em; color: #b7a9a8; }
.modal-close { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 20px; border: 0; background: none; color: #fff; font-size: 38px; line-height: 1; z-index: 2; }
.modal-nav { width: 52px; height: 52px; flex: 0 0 auto; border: 1px solid #ffffff66; border-radius: 50%; background: transparent; color: #fff; font-size: 26px; line-height: 1; transition: .25s; }
.modal-nav:hover { background: #fff; color: var(--wine); }

/* Animations */
@keyframes setPush { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.5%, 1%); } }
@keyframes setFlicker { 0%, 100% { opacity: 1; } 46% { opacity: .8; } 50% { opacity: 1; } 54% { opacity: .9; } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes wave { 0%, 100% { transform: scaleY(.18); } 50% { transform: scaleY(1); } }
@keyframes fadeIn { from { opacity: 0; } }

/* Tablet (iPad) */
@media (max-width: 1100px) {
  .chapter { padding: 44px 0 52px; }
  .chapter-no { font-size: 58px; }
  .set-backdrop { right: -14%; }
}

@media (max-width: 900px) {
  :root { --header: 72px; }
  .nav {
    display: none; position: absolute; top: var(--header); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding: 12px 6%;
    background: var(--ivory); box-shadow: 0 12px 20px #0002;
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; }
  .menu-toggle { display: block; }
  .hero { grid-template-columns: 1.15fr .85fr; gap: 4%; padding-top: calc(var(--header) + 40px); }
  .hero h1 { font-size: clamp(34px, 5.6vw, 52px); }
  .hero-stage { min-height: 0; }
  .reel-frame { height: auto; width: 100%; max-width: 330px; }
  .hero-caption { font-size: 18px; bottom: -34px; }
  .statement, .contact { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 20px; }
  .modal { gap: 10px; }
  .modal-nav { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); }
  .modal-nav.prev { left: 20px; }
  .modal-nav.next { right: 20px; }
  .modal video { height: min(70vh, 820px); }
}

/* Phone */
@media (max-width: 640px) {
  section, .statement { padding: 76px 6%; }
  .hero { grid-template-columns: 1fr; padding: calc(var(--header) + 28px) 6% 56px; gap: 34px; }
  .hero-stage { grid-row: 1; }
  .reel-frame { width: min(76vw, 320px); box-shadow: 0 30px 60px -28px #3b0a16aa, 0 0 0 7px #f7f5f2; }
  .set-backdrop { inset: 7% -9% 9% -9%; }
  .set-slate { left: 40px; bottom: 20px; }
  .set-rec { right: 40px; top: 20px; }
  .hero-caption { position: static; margin-top: 18px; }
  .hero h1 { font-size: 38px; }
  .hero-stats { gap: 24px; }
  .hero-stats dt { font-size: 32px; }
  .service-grid { grid-template-columns: 1fr; }
  .service { min-height: 160px; }
  .category-bar { margin: 0 -6% 8px; padding: 12px 6%; }
  .chapter-head { align-items: flex-start; margin-bottom: 22px; }
  .chapter-no { font-size: 48px; }
  .chapter-foot { width: 100%; justify-content: space-between; }
  .ba-grid { grid-template-columns: 1fr; }
  .work-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 66%;
    overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -6%; padding: 0 6% 6px;
    scrollbar-width: none;
  }
  .work-grid::-webkit-scrollbar { display: none; }
  .work-card { scroll-snap-align: start; }
  .podcast-panel { padding: 24px; min-height: 380px; }
  .wave { height: 110px; gap: 3px; }
  .formats b { font-size: 22px; }
  .process-grid { gap: 18px; }
  footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Thai-first typography ----------
   Cormorant Garamond has no Thai glyphs, so Thai headings use Prompt.
   Numbers, wordmark and the English tagline keep Cormorant as part of the CI.
   Wide Latin tracking is reduced because it breaks the rhythm of Thai script. */
.statement h2, .section-heading h2, .contact h2 {
  font-family: Prompt, sans-serif; font-weight: 500;
  font-size: clamp(34px, 4.6vw, 64px); line-height: 1.24; letter-spacing: -.02em;
}
.section-heading h2 span { color: var(--wine); }
.dark .section-heading h2 span { color: var(--rose); }
.contact h2 span { color: #f2c9d0; }
.service h3 { font: 500 19px/1.45 Prompt, sans-serif; }
.process-grid h3 { font: 500 22px/1.4 Prompt, sans-serif; }
.formats b { font-family: 'Cormorant Garamond', Prompt, serif; }
.eyebrow { font-size: 12px; letter-spacing: .08em; }
.nav { font-size: 13px; letter-spacing: .02em; }
.btn { font-size: 13px; letter-spacing: .03em; }
.hero-stats dd { font-size: 12px; letter-spacing: .02em; text-transform: none; }
.reel-label { font-size: 11.5px; letter-spacing: .08em; }
.reel-play { font-size: 13px; letter-spacing: .05em; }
.marquee { font-size: 12px; letter-spacing: .16em; }
.cat-tab { font-size: 13.5px; font-weight: 500; letter-spacing: .01em; }
.cat-tab small { font-weight: 400; }
.cat-tab em.soon { font-size: 11px; letter-spacing: .04em; }
.work-card .client { font-size: 10px; letter-spacing: .04em; }
.card-meta small { font-size: 11.5px; letter-spacing: .02em; }
.onair { font-size: 12px; letter-spacing: .1em; }
.formats span { font-size: 12px; letter-spacing: .01em; }
.contact button { font-size: 14px; letter-spacing: .03em; }
.modal figcaption span { font-size: 12px; letter-spacing: .06em; }
.modal figcaption small { font-size: 11.5px; letter-spacing: .03em; }

/* Bring the video portfolio closer to the top: the hero no longer fills a whole tall screen. */
.hero { min-height: min(100svh, 820px); }
.work { padding-top: 88px; }
@media (max-width: 640px) {
  .work { padding-top: 64px; }
  .statement h2, .section-heading h2, .contact h2 { font-size: 32px; }
}

/* ---------- Hero promise line ---------- */
.hero-promise { margin: 0 0 10px; max-width: 580px; font-size: clamp(18px, 1.75vw, 24px); line-height: 1.6; font-weight: 400; color: var(--ink); }
.hero-promise b { font-weight: 500; color: var(--wine); white-space: nowrap; }
@media (max-width: 640px) { .hero-promise { font-size: 18px; } }

/* ---------- Before / After compare (CI category) ---------- */
.ba-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 30px 22px; }
.ba { margin: 0; min-width: 0; }
.ba-stage {
  position: relative; overflow: hidden; aspect-ratio: var(--ratio, 4 / 5);
  background: #120d0e; border: 1px solid #3b3031;
  cursor: ew-resize; touch-action: pan-y;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ba-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ba-before { -webkit-clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; transform: translateX(-1px); background: #fff; box-shadow: 0 0 14px #000a; pointer-events: none; }
.ba-knob {
  position: absolute; top: 50%; left: var(--pos, 50%); z-index: 1;
  display: grid; place-items: center; width: 54px; height: 54px;
  transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%;
  background: var(--wine); color: #fff; font-size: 17px; letter-spacing: .1em;
  box-shadow: 0 10px 24px #0008; pointer-events: none;
}
.ba-tag { position: absolute; top: 12px; padding: 6px 10px; background: #1f1a1bd9; color: #fff; font-size: 11px; letter-spacing: .16em; pointer-events: none; }
.ba-tag.before { left: 12px; }
.ba-tag.after { right: 12px; background: var(--wine); }
.ba-range { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ba-stage:focus-within { outline: 1px solid var(--rose); outline-offset: 4px; }

/* CI category before its artwork arrives */
.ci-panel { min-height: 420px; }
.ci-demo { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 220px; border: 1px solid var(--dark-line); overflow: hidden; }
.ci-half { display: flex; align-items: flex-start; padding: 12px; font-size: 11px; letter-spacing: .16em; }
.ci-half.before { background: repeating-linear-gradient(135deg, #2b2526 0 14px, #262021 14px 28px); color: #a99a99; }
.ci-half.after { justify-content: flex-end; background: linear-gradient(160deg, var(--wine), var(--wine-deep)); color: #fff; }

/* ---------- Contact: faint film-set shadow on the wine background ---------- */
.contact { position: relative; overflow: hidden; isolation: isolate; }
.contact-set {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  object-fit: cover; object-position: 20% 35%; opacity: .5; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 30%, transparent 78%);
  mask-image: linear-gradient(90deg, #000 0, #000 30%, transparent 78%);
}
@media (max-width: 900px) {
  .contact-set { opacity: .38; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 35%, transparent 75%); mask-image: linear-gradient(180deg, #000 0, #000 35%, transparent 75%); }
}

/* ---------- Film-set refinements ---------- */
/* Set labels live on the right edge, the part of the set that stays visible beside the reel. */
.set-slate { left: auto; bottom: 46px; right: 22px; writing-mode: vertical-rl; }
.set-rec { right: 22px; top: 46px; }
/* Leave room under the reel so the tagline never overlaps it. */
.hero-stage { padding-bottom: 44px; }
/* Anchor jumps land below the sticky header + category bar. */
.chapter { scroll-margin-top: calc(var(--header) + 110px); }
@media (max-width: 900px) {
  /* Two-column tablet hero: slimmer reel so the camera set shows on both sides. */
  .hero { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: clamp(34px, 5vw, 46px); }
  .reel-frame { max-width: 260px; }
  .set-backdrop { inset: 5% -20% 12% -8%; }
  .hero-stage { padding-bottom: 0; }
}
@media (max-width: 640px) {
  .hero { grid-template-columns: 1fr; }
  .hero h1 { font-size: 38px; }
  .reel-frame { max-width: 320px; }
  .set-backdrop { inset: 7% -9% 9% -9%; }
  .set-slate { right: 16px; bottom: 40px; }
  .set-rec { right: 16px; top: 40px; }
  .chapter { scroll-margin-top: calc(var(--header) + 96px); }
}