/* =========================================================================
   KKV MEDIA — commercial & brand film studio, Sofia
   Monochrome, warm near-black, heavy film grain, oversized cropped type.
   Reference mood: bymonolog.com + cipher.tv. Signature: a timecode spine
   that runs with the scroll, viewfinder crop-brackets on every frame.
   Dark-native by design (client brand: black / dark grey / light grey).
   ========================================================================= */

/* ---------- self-hosted fonts (SIL Open Font License) — no requests to Google ---------- */
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/inter-tight-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/inter-tight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("assets/fonts/jetbrains-mono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Unbounded"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("assets/fonts/unbounded-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("assets/fonts/unbounded-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg:         #0A0A09;   /* warm near-black */
  --surface:    #131312;
  --surface-2:  #1C1C1B;
  --line:       #2A2A28;
  --line-2:     #3C3C39;
  --text:       #EAEAE4;   /* warm off-white  ~17:1 on --bg */
  --text-dim:   #A4A49C;   /* secondary        ~8.6:1 */
  --text-mute:  #86867E;   /* meta             ~5:1  */
  --ghost:      #232320;   /* the huge background wordmark */
  --invert-bg:  #EAEAE4;
  --invert-tx:  #0A0A09;
  --focus:      #EAEAE4;

  --maxw: 1320px;
  --rail-w: 92px;
  --pad-x: clamp(1.25rem, 5vw, 3rem);
  --sec-y: clamp(4.5rem, 11vw, 9rem);

  --f-display: "Unbounded", "Inter Tight", system-ui, sans-serif;
  --f-body:    "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --step:  240ms cubic-bezier(.2, .6, .2, 1);
  --step-slow: 560ms cubic-bezier(.2, .6, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul, ol { list-style: none; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: fixed; top: 0; left: 0; z-index: 600;
  transform: translateY(-120%);
  background: var(--invert-bg); color: var(--invert-tx);
  padding: .75rem 1.25rem; font: 500 .875rem/1 var(--f-body);
  transition: transform var(--step);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- film-leader loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-content: center; justify-items: center; gap: 1.25rem;
  background: var(--bg);
  transition: opacity .6s ease, visibility .6s;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__mark {
  font-family: var(--f-mono); font-size: .72rem;
  letter-spacing: .42em; text-indent: .42em; color: var(--text-dim);
}
.loader__tc {
  font-family: var(--f-mono); font-size: clamp(1.75rem, 7vw, 3rem);
  letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--text);
}
.loader__bar { width: min(220px, 60vw); height: 1px; background: var(--line-2); }
.loader__bar i { display: block; height: 100%; width: 0; background: var(--text); }

/* ---------- fixed film grain ---------- */
.grain {
  position: fixed; z-index: 2; inset: -60%;
  width: 220%; height: 220%;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift .55s steps(1) infinite;
  will-change: transform;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-6%, -4%); }
  25%  { transform: translate(4%, -8%); }
  37%  { transform: translate(-8%, 6%); }
  50%  { transform: translate(6%, 8%); }
  62%  { transform: translate(-4%, -6%); }
  75%  { transform: translate(8%, 4%); }
  87%  { transform: translate(-6%, 8%); }
  100% { transform: translate(0, 0); }
}

/* ---------- scroll progress ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120; background: var(--line); }
.progress__fill {
  display: block; height: 100%; width: 100%;
  background: var(--text); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 90ms linear;
}

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.site-header__inner {
  max-width: var(--maxw); margin-inline: auto; padding: 0 var(--pad-x);
  height: 64px; display: flex; align-items: center; gap: 1rem;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 0;
  font-family: var(--f-display); font-weight: 800;
  letter-spacing: .01em; font-size: clamp(.85rem, 3.5vw, 1rem);
  white-space: nowrap;
}
.wordmark__m { color: var(--text-mute); font-weight: 600; }
.wordmark--sm { font-size: .95rem; }

/* real logo image — shown when assets/kkv-logo.* exists; the text spans are
   the fallback (revealed via .wordmark--nofile if the file 404s). Red art is
   forced to white by the filter. */
.wordmark__img { display: block; height: 34px; width: auto; filter: brightness(0) invert(1); }
.wordmark--sm .wordmark__img { height: 24px; }
.wordmark .wordmark__text { display: none; }
.wordmark--nofile .wordmark__img { display: none; }
.wordmark--nofile .wordmark__text { display: inline-flex; align-items: baseline; gap: 0; }
.loader__logo { display: block; height: clamp(42px, 13vw, 72px); width: auto; filter: brightness(0) invert(1); }
.site-header__actions .btn { display: none; }

.site-nav {
  display: none; margin-inline-start: auto; gap: 1.75rem;
  font-family: var(--f-mono); font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.site-nav a { color: var(--text-dim); transition: color var(--step); }
.site-nav a:hover { color: var(--text); }
.site-header__actions { margin-inline-start: auto; display: flex; align-items: center; gap: .75rem; }
.site-nav + .site-header__actions { margin-inline-start: 1.75rem; }

.lang { display: inline-flex; border: 1px solid var(--line-2); border-radius: 2px; overflow: hidden; }
.lang__btn {
  padding: .4rem .6rem; min-height: 32px;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em;
  color: var(--text-mute); transition: color var(--step), background var(--step);
}
.lang__btn.is-active { background: var(--surface-2); color: var(--text); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6ch;
  min-height: 48px; padding: 0 1.4rem;
  font-family: var(--f-mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: background var(--step), color var(--step), border-color var(--step), transform var(--step);
}
.btn--sm { min-height: 40px; padding: 0 1rem; font-size: .72rem; }
.btn--solid { background: var(--invert-bg); color: var(--invert-tx); }
.btn--solid:hover { background: #fff; }
.btn--ghost { border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover { border-color: var(--text); background: var(--surface); }
.btn:active { transform: scale(.97); }
.btn__ico { width: 16px; height: 16px; fill: currentColor; }

/* ---------- timecode rail (desktop) ---------- */
.rail { display: none; }

/* ---------- page wrapper ---------- */
.page { max-width: var(--maxw); margin-inline: auto; padding: 0 var(--pad-x); }

/* ---------- shared ---------- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-mute);
  display: flex; align-items: center; gap: .6ch; flex-wrap: wrap;
}
.eyebrow .tc { color: var(--text-dim); }
.tc { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.section { padding-block: var(--sec-y); border-top: 1px solid var(--line); position: relative; }
.section--tight { padding-block: clamp(3rem, 7vw, 5rem); }
.section__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section__title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.6rem, 4.2vw, 2.6rem); line-height: 1.05;
  letter-spacing: -.01em; margin-top: .7rem;
}
.section__note {
  margin-top: 2rem;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em; color: var(--text-mute);
}

/* film-still placeholders — differ by luminance/composition, not hue.
   Replace .still backgrounds with real <img srcset> 1600x900 WebP/AVIF. */
.still {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  background: var(--surface); overflow: hidden; isolation: isolate;
}
.still__burn {
  position: absolute; left: 12px; bottom: 10px; z-index: 3;
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .05em;
  color: rgba(234,234,228,.6); text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.work-card .still__burn { display: none; }
.still--reel { background: linear-gradient(205deg,#3a3a3a 0%,#1b1b1a 50%,#0e0e0d 100%); }
.still__img {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(1) contrast(1.05);
  transition: filter var(--step), transform var(--step-slow);
}
.facade:hover .still__img { filter: grayscale(0) contrast(1); transform: scale(1.03); }
.still--01 { background: radial-gradient(130% 95% at 74% 8%, #4a4a48 0%, #222220 52%, #0f0f0e 100%); }
.still--02 { background: linear-gradient(180deg,#525250 0%,#262624 55%,#121211 100%); }
.still--03 { background: linear-gradient(115deg,#101010 0%,#161615 38%,#454542 100%); }
.still--04 { background: radial-gradient(95% 130% at 50% 118%, #4c4c49 0%, #1e1e1c 58%, #0f0f0e 100%); }
.still--05 { background: linear-gradient(160deg,#3d3d3b 0%,#141413 48%,#33332f 100%); }
.still--06 { background: linear-gradient(180deg,#101010 0%,#26261f 42%,#51514a 100%); }

/* viewfinder crop brackets */
.reel__brackets, .work-card__brackets { position: absolute; inset: 10px; z-index: 4; pointer-events: none; }
.reel__brackets i, .work-card__brackets i {
  position: absolute; width: 20px; height: 20px;
  border: 1px solid var(--text); opacity: .55;
  transition: inset var(--step), opacity var(--step);
}
.reel__brackets i:nth-child(1), .work-card__brackets i:nth-child(1){ inset: 0 auto auto 0; border-right: 0; border-bottom: 0; }
.reel__brackets i:nth-child(2), .work-card__brackets i:nth-child(2){ inset: 0 0 auto auto; border-left: 0; border-bottom: 0; }
.reel__brackets i:nth-child(3), .work-card__brackets i:nth-child(3){ inset: auto auto 0 0; border-right: 0; border-top: 0; }
.reel__brackets i:nth-child(4), .work-card__brackets i:nth-child(4){ inset: auto 0 0 auto; border-left: 0; border-top: 0; }

/* ---------- hero (full-bleed) ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100dvh;
  padding-block: clamp(6rem, 14vw, 9rem) 0;
  display: flex; flex-direction: column; justify-content: center;
}
.hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--pad-x);
  padding-bottom: clamp(3rem, 12vw, 8rem);
}
.hero__title {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.25rem, 9vw, 6rem);
  line-height: 1; letter-spacing: -.01em; text-transform: uppercase;
  margin: 1.5rem 0 0;
}
.hero__title .line { display: block; }
.hero__title .line:empty { display: none; }
.hero__title .line:nth-child(2) { color: var(--text-dim); }
.hero__sub {
  margin-top: 1.75rem; max-width: 44ch;
  font-size: 1.125rem; color: var(--text-dim);
}
.hero__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .9rem; }

/* the huge cropped studio wordmark bleeding across the hero base */
.hero__wordmark {
  position: absolute; left: 50%; bottom: -.1em; z-index: 1;
  transform: translateX(-50%);
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(3rem, 15.5vw, 15rem);
  line-height: .78; letter-spacing: -.05em;
  white-space: nowrap; color: var(--ghost);
  user-select: none; pointer-events: none;
}

/* ---------- showreel ---------- */
.showreel .eyebrow { margin-bottom: 1.25rem; }
.reel {
  position: relative;
  border: 1px solid var(--line);
}
.reel__play {
  position: absolute; inset: 0; z-index: 5; margin: auto;
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  border: 1px solid var(--text);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: transform var(--step), background var(--step);
}
.reel__play svg { width: 28px; height: 28px; fill: var(--text); margin-left: 3px; }
.reel__play:hover { transform: scale(1.06); background: color-mix(in srgb, var(--bg) 28%, transparent); }
.reel__cap {
  position: absolute; right: 12px; top: 10px; z-index: 5;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .05em;
  color: var(--text-dim); text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.reel__poster {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}
.reel.is-playing .reel__play,
.reel.is-playing .reel__brackets,
.reel.is-playing .reel__cap,
.reel.is-playing .still { display: none; }
.reel iframe,
.reel video { width: 100%; aspect-ratio: 16/9; border: 0; display: block; background: #000; }

/* ---------- work grid (loose two-column with vertical offset) ---------- */
.work-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 3vw, 1.75rem); }
.work-card { border: 1px solid var(--line); }
.facade { position: relative; display: block; width: 100%; text-align: left; }
.facade__play {
  position: absolute; inset: 0; z-index: 5; margin: auto;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 46%, transparent);
  border: 1px solid var(--text);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: transform var(--step);
}
.facade__play svg { width: 22px; height: 22px; fill: var(--text); margin-left: 2px; }
.work-card__meta {
  position: absolute; inset: auto 0 0 0; z-index: 5;
  display: flex; align-items: baseline; gap: .75ch; flex-wrap: wrap;
  padding: 2.5rem .9rem .8rem;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em;
}
.work-card__client { color: var(--text); font-weight: 500; }
.work-card__kind { color: var(--text-dim); text-transform: uppercase; }
.work-card__dur { color: var(--text-mute); margin-inline-start: auto; }
.facade:hover .facade__play { transform: scale(1.06); }
.facade:hover .work-card__brackets i:nth-child(1){ inset: 6px auto auto 6px; opacity: .9; }
.facade:hover .work-card__brackets i:nth-child(2){ inset: 6px 6px auto auto; opacity: .9; }
.facade:hover .work-card__brackets i:nth-child(3){ inset: auto auto 6px 6px; opacity: .9; }
.facade:hover .work-card__brackets i:nth-child(4){ inset: auto 6px 6px auto; opacity: .9; }

/* ---------- services ---------- */
.svc-list { border-top: 1px solid var(--line); }
.svc-row { display: grid; grid-template-columns: 1fr; gap: .3rem .5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.svc-row__tc { color: var(--text-mute); font-size: .72rem; align-self: start; }
.svc-row__name { font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -.005em; line-height: 1.25; }
.svc-row__desc { color: var(--text-dim); max-width: 60ch; }

/* ---------- clients (logo grid — two rows of seven on desktop) ---------- */
.clients {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem) clamp(.75rem, 1.6vw, 1.25rem);
  align-items: center;
}
.clients li {
  display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 52px;
}
.clients__logo {
  width: auto; height: auto;
  max-width: 100%;
  max-height: clamp(28px, 3.6vw, 46px);
  /* force every logo to a flat light tint so the grid stays monochrome —
     needs transparent-background source files */
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .7;
  transition: opacity var(--step);
}
/* stacked crest + wordmark needs more height to stay legible */
.clients__logo--tall { max-height: clamp(44px, 5.2vw, 68px); }
.clients li:hover .clients__logo { opacity: .9; }

@media (min-width: 560px)  { .clients { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .clients { grid-template-columns: repeat(7, 1fr); } }

/* ---------- process (stacked, divided list) ---------- */
.proc { border-top: 1px solid var(--line); }
.proc__step {
  padding: clamp(1.75rem, 5vw, 2.75rem) 0;
  border-bottom: 1px solid var(--line);
}
.proc__tc { display: block; color: var(--text-mute); font-size: .72rem; margin-bottom: .6rem; }
.proc__name { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.2rem, 3vw, 1.7rem); letter-spacing: -.01em; }
.proc__lead { margin-top: .5rem; color: var(--text); font-size: clamp(1rem, 2vw, 1.15rem); font-weight: 500; max-width: 62ch; }
.proc__desc { margin-top: .45rem; color: var(--text-dim); max-width: 66ch; }

/* ---------- instagram ---------- */
.ig__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem 1.5rem; flex-wrap: wrap; }
.ig__handles { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-family: var(--f-mono); font-size: .8rem; }
.ig__handles a { color: var(--text-dim); transition: color var(--step); }
.ig__handles a:hover { color: var(--text); }
/* Behold widget wrapper. Grid columns / gap / radius / video autoplay / hover
   are set in the Behold dashboard — match them there to: 3 cols, small gap,
   0 radius, subtle hover. These custom props are honoured by the widget where
   supported and are harmless otherwise. */
.ig-embed {
  margin: 1.5rem 0;
  min-height: clamp(280px, 52vw, 600px); /* reserve space while the script loads */
  --behold-gap: 6px;
  --behold-border-radius: 0px;
  --behold-row-gap: 6px;
  --behold-column-gap: 6px;
}
.ig-embed behold-widget { display: block; width: 100%; }
.ig-embed noscript a,
.ig-embed__link {
  font-family: var(--f-mono); font-size: .8rem; color: var(--text-dim);
  text-decoration: underline;
}
.ig-embed--fallback {
  min-height: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); padding: 2.5rem 1rem;
}
.ig-embed + .btn { margin-top: .5rem; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 4rem); }
.form { display: grid; gap: 1.1rem; align-content: start; }
.form__summary { border: 1px solid var(--line-2); background: var(--surface); padding: 1rem; font-size: .9rem; color: var(--text); }
.form__summary a { text-decoration: underline; }
.field { display: grid; gap: .4rem; }
.field label {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-dim);
}
.req { color: var(--text); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .9rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 2px;
  font-family: var(--f-body); font-size: 1rem;
  transition: border-color var(--step);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--text); outline-offset: 1px; }
.field--invalid input, .field--invalid textarea { border-color: #d9d9d3; box-shadow: inset 2px 0 0 var(--text); }
.field__err { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .03em; color: var(--text); min-height: 1em; }
.field__err:not(:empty)::before { content: "▲ "; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form__done { border: 1px solid var(--text); padding: 1rem; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .03em; }
.form__done--err { border-color: #c96; }
.studio { font-style: normal; color: var(--text-dim); display: grid; gap: .35rem; align-content: start; }
.studio__name { font-family: var(--f-display); font-weight: 700; color: var(--text); font-size: 1.1rem; }
.studio a:hover { color: var(--text); }
.studio__legal { margin-top: 1rem; font-size: .8rem; color: var(--text-mute); max-width: 44ch; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); position: relative; }
.site-footer__inner {
  max-width: var(--maxw); margin-inline: auto; padding: 2.5rem var(--pad-x);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center;
}
.site-footer__meta { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em; color: var(--text-mute); }
.site-footer__meta a:hover { color: var(--text); }
.site-footer__tag { margin-inline-start: auto; font-family: var(--f-display); font-weight: 700; color: var(--text-dim); }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 300; display: grid; padding: 64px var(--pad-x) var(--pad-x); overflow-y: auto; }
.modal[hidden] { display: none; }
.modal__scrim { position: fixed; inset: 0; background: rgba(4,4,4,.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal__dialog { position: relative; width: min(1100px, 94vw); margin: auto; }
.modal__frame { aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line-2); }
.modal__frame iframe,
.modal__frame video { width: 100%; height: 100%; border: 0; display: block; background: #000; }
/* "more from this brand" list under the player */
.modal__more { margin-top: 1rem; }
.modal__more-title {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-mute); margin-bottom: .5rem;
}
.modal__more-title #modalBrand { color: var(--text); }
.modal__list { border-top: 1px solid var(--line-2); }
.modal__item {
  width: 100%; display: flex; align-items: baseline; gap: 1rem;
  padding: .8rem 0; text-align: left;
  border-bottom: 1px solid var(--line-2);
  color: var(--text-dim); transition: color var(--step), padding var(--step);
}
.modal__item:hover, .modal__item:focus-visible { color: var(--text); padding-left: .5rem; }
.modal__item-n { color: var(--text-mute); font-size: .72rem; }
.modal__item-t { font-family: var(--f-display); font-weight: 600; font-size: .95rem; }
.modal__item-d { margin-inline-start: auto; color: var(--text-mute); font-size: .72rem; }
.is-current > .modal__item { color: var(--text); }
.is-current > .modal__item .modal__item-n::after { content: " ▶"; }
/* vertical (9:16) clips — frame narrows, dialog and list stay full width */
.modal--portrait .modal__frame {
  --ph: min(68vh, 700px);
  height: var(--ph); width: calc(var(--ph) * 9 / 16); margin-inline: auto;
}
.modal__close { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-2); }
.modal__close svg { width: 18px; height: 18px; stroke: var(--text); stroke-width: 2; fill: none; }
.modal__close:hover { border-color: var(--text); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--step-slow), transform var(--step-slow); }
.reveal.is-in { opacity: 1; transform: none; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (min-width: 640px) {
  .site-header__actions .btn { display: inline-flex; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .work-card:nth-child(even) { transform: translateY(clamp(1.5rem, 5vw, 3.5rem)); }
  .ig-embed { min-height: clamp(360px, 42vw, 620px); }
  .svc-row { grid-template-columns: 6.5rem 17rem 1fr; gap: 1rem 1.5rem; align-items: baseline; }
  .contact { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
@media (min-width: 768px) {
  .site-nav { display: flex; }
}
@media (min-width: 1024px) {
  .rail {
    display: flex; flex-direction: column; gap: .6rem;
    position: fixed; left: 0; top: 64px; bottom: 0; width: var(--rail-w);
    padding: 1.25rem .75rem; z-index: 90; border-right: 1px solid var(--line);
  }
  .rail__tc { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .02em; color: var(--text); font-variant-numeric: tabular-nums; }
  .rail__label { font-family: var(--f-mono); font-size: .54rem; letter-spacing: .1em; color: var(--text-mute); }
  .rail__track { position: relative; flex: 1; width: 1px; margin: .75rem auto 0; background: var(--line-2); }
  .rail__progress { position: absolute; inset: 0 0 auto 0; width: 100%; background: var(--text); transform: scaleY(0); transform-origin: 50% 0; transition: transform 90ms linear; }
  .page { padding-left: calc(var(--rail-w) + var(--pad-x)); }
  .hero__inner { padding-left: calc(var(--rail-w) + var(--pad-x)); }
  .site-footer__inner { padding-left: calc(var(--rail-w) + var(--pad-x)); }
}

/* =========================================================================
   REDUCED MOTION — the timecode still updates (it is information);
   grain freezes, reveals resolve, everything decorative holds still.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .grain { animation: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .work-card:nth-child(even) { transform: none; }
}

/* ---------- legal pages (privacy / terms) ---------- */
.doc {
  max-width: 760px; margin-inline: auto;
  padding: calc(64px + clamp(3rem, 8vw, 6rem)) var(--pad-x) clamp(3rem, 8vw, 6rem);
}
.site-header__actions .doc-back { display: inline-flex; }
.doc__title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.08; letter-spacing: -.01em;
  margin-top: 1rem;
}
.doc__meta { margin-top: .9rem; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; color: var(--text-mute); }
.doc__lead { margin-top: 1.75rem; font-size: 1.1rem; color: var(--text); max-width: 62ch; }
.doc__sec { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.doc__sec h2 { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.005em; margin-bottom: .9rem; }
.doc__sec p, .doc__sec li { color: var(--text-dim); max-width: 68ch; }
.doc__sec p + p, .doc__sec p + ul { margin-top: .9rem; }
.doc__sec ul { list-style: none; display: grid; gap: .7rem; }
.doc__sec li { position: relative; padding-left: 1.4rem; }
.doc__sec li::before { content: ""; position: absolute; left: 0; top: .72em; width: .55rem; height: 1px; background: var(--text-mute); }
.doc__sec strong { color: var(--text); font-weight: 500; }
.doc__sec a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); transition: text-decoration-color var(--step); }
.doc__sec a:hover { text-decoration-color: var(--text); }
.doc__sec code { font-family: var(--f-mono); font-size: .85em; color: var(--text); background: var(--surface); padding: .1em .35em; border: 1px solid var(--line); }
.doc-page .site-footer { margin-top: 0; }