/* ============================================================
   MATT CHAVEZ /// FREELANCE VIDEO
   Five tokens. No accent color. The footage is the only color.
   Zero border-radius. No shadows, gradients, glows, or blur.
   ============================================================ */

:root {
  --ink:  #0B0B0B;
  --bone: #EDEAE4;
  --ash:  #8A8A85;
  --rule: #1F1F1E;
  --font-display: "Archivo", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

* , *::before, *::after {
  box-sizing: border-box;
  border-radius: 0 !important;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--bone); color: var(--ink); }

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

a { color: var(--bone); }

:focus-visible { outline: 1px solid var(--bone); outline-offset: 3px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bone);
  color: var(--ink);
  padding: 10px 16px;
  z-index: 100;
}
.skip:focus { left: 0; }

/* Static film grain. 3%. Cut it if it ever reads as a gimmick. */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.wrap-narrow { max-width: 760px; }

.section { padding: 72px 0; border-top: 1px solid var(--rule); }

/* ---------- type utilities ---------- */

.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 14px;
}

.tc { color: var(--ash); }

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin-bottom: 40px;
  transform-origin: left center;
}

.display {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-size: clamp(2.6rem, 11vw, 6.75rem);
}

/* Longer hero line, sized to hold two lines at desktop width. */
.display-hero { font-size: clamp(2.1rem, 8.6vw, 4.3rem); line-height: 1.02; }

/* ---------- buttons: inverted rectangles, nothing else ---------- */

.btn {
  display: inline-block;
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--bone);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 14px 28px;
  cursor: pointer;
  transition: background 120ms linear, color 120ms linear;
}

.btn:hover {
  background: var(--ink);
  color: var(--bone);
}

.btn-small { padding: 9px 16px; font-size: 13px; }

.btn-submit { width: 100%; padding: 18px 28px; font-size: 16px; margin-top: 8px; }

.chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  border: 1px solid var(--rule);
  padding: 12px 14px;
  white-space: nowrap;
}

/* ---------- topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
}

.wordmark {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.nav { display: flex; align-items: center; gap: 20px; }

.nav a:not(.btn) {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--ash);
  transition: color 120ms linear;
}

.nav a:not(.btn):hover { color: var(--bone); }

/* ---------- hero ---------- */

.hero { padding: 64px 0 72px; }

.hero-sub {
  max-width: 620px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  margin-top: 26px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  margin-bottom: 56px;
}

/* ---------- video: key art, hard edges, never a card ---------- */

.player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: 1px solid var(--rule);
}

.player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--ink);
  border: 0;
  color: var(--bone);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.poster-title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(1.8rem, 7vw, 4.5rem);
  line-height: 1;
}

.poster-title-sm { font-size: clamp(1.2rem, 3.4vw, 2rem); }

.poster-corner {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 10px;
  color: var(--ash);
}

.poster-corner-right { left: auto; right: 14px; }

.poster-foot {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  font-size: 10px;
  color: var(--ash);
  text-align: center;
}

.play-square {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  background: var(--bone);
  transition: background 120ms linear;
}

.play-square::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-left: 14px solid var(--ink);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

.work-item .play-square {
  width: 40px;
  height: 40px;
  bottom: 16px;
}

.work-item .play-square::after {
  border-left-width: 11px;
  border-top-width: 7px;
  border-bottom-width: 7px;
}

.poster:hover .play-square { background: var(--ash); }

@media (max-width: 480px) {
  .play-square { width: 40px; height: 40px; bottom: 26px; }
  .play-square::after { border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; }
  .poster-title { transform: translateY(-10px); }
}

.poster .setup-note {
  position: absolute;
  bottom: 110px;
  left: 14px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ash);
  text-align: center;
}

.player-caption {
  font-size: 10px;
  color: var(--ash);
  margin-top: 10px;
}

/* ---------- selected work ---------- */

.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 28px;
}

.work-meta {
  font-size: 11px;
  color: var(--ash);
  margin-top: 10px;
}

/* ---------- services ---------- */

.service {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 40px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}

.service:first-of-type { border-top: 0; padding-top: 0; }

.service-title {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1;
}

.service-title-sm { font-size: clamp(1.15rem, 3vw, 1.5rem); font-weight: 800; }

.service-body p {
  max-width: 560px;
  color: var(--bone);
  font-size: 16px;
}

.service-body p + p { margin-top: 12px; }

.service-lead .service-body p { font-size: 17px; font-weight: 500; }

/* ---------- set change: about + credits ---------- */

.about p {
  max-width: 620px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
}

.about p + p { margin-top: 14px; }

.credits {
  margin-top: 44px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.credit-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
}

.credit-name { white-space: nowrap; }

.credit-dots {
  flex: 1;
  border-bottom: 1px dotted var(--ash);
  transform: translateY(-3px);
  min-width: 24px;
}

.credit-role {
  text-align: right;
  color: var(--bone);
}

.credit-staff { color: var(--ash); }

.credits-note {
  font-size: 10px;
  color: var(--ash);
  margin-top: 18px;
}

/* Logo strip. Placeholder frames until uniform bone-tinted files exist.
   Any future logo file: monochrome, tinted --bone, consistent height. */
.logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 36px;
}

.logo-slot {
  border: 1px solid var(--rule);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 10px;
  font-size: 9px;
  color: var(--ash);
}

.logo-slot img {
  height: 32px;
  width: auto;
}

/* ---------- commerce sections: plain, legible, blunt ----------
   The A24 look stops here. No mono body, no letterspacing,
   comfortable reading sizes, high contrast. Legibility wins. */

.commerce-title {
  font-weight: 700;
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-transform: none;
  margin-bottom: 36px;
}

.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 44px;
}

.price-block { border-top: 1px solid var(--rule); padding-top: 20px; }

.price-number {
  font-weight: 900;
  font-size: clamp(3.4rem, 10vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.price-line {
  font-size: 18px;
  font-weight: 500;
  margin-top: 10px;
  max-width: 420px;
}

.facts { list-style: none; }

.facts li {
  font-size: 18px;
  font-weight: 500;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}

.facts li:last-child { border-bottom: 1px solid var(--rule); }

.fact-strong {
  background: var(--bone);
  color: var(--ink);
  padding-left: 14px !important;
  padding-right: 14px !important;
  font-weight: 700;
}

/* ---------- how i work: risk reduction, commerce treatment ---------- */

.how-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

.photo-frame {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 16px;
  font-size: 10px;
  color: var(--ash);
  max-width: 420px;
}

.photo-frame span { display: block; font-size: 9px; }

.photo-frame .pending { opacity: 0.7; }

.photo-frame.has-photo { padding: 0; }

.photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.how-copy p {
  font-size: 18px;
  font-weight: 500;
  max-width: 560px;
}

.how-copy p + p { margin-top: 14px; }

.how-facts { margin: 24px 0; }

/* ---------- form ---------- */

.commerce-lead {
  font-size: 18px;
  font-weight: 500;
  max-width: 520px;
  margin-bottom: 36px;
}

.hp { position: absolute; left: -9999px; }

.field { margin-bottom: 22px; }

.field label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--ash);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  padding: 14px;
  appearance: none;
  -webkit-appearance: none;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ash); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--bone);
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23EDEAE4' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.field select:invalid { color: var(--ash); }

.field-row { display: grid; grid-template-columns: 1fr; gap: 0 22px; }

/* ---------- footer ---------- */

.footer { border-top: 1px solid var(--rule); padding: 32px 0 40px; }

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-meta { font-size: 10px; color: var(--ash); }

.footer-mail a {
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   MOTION. One orchestrated moment on load, then stillness.
   ============================================================ */

.rise {
  opacity: 0;
  transform: translateY(10px);
  animation: rise 480ms ease forwards;
}

.r1 { animation-delay: 60ms; }
.r2 { animation-delay: 160ms; }
.r3 { animation-delay: 280ms; }
.r4 { animation-delay: 380ms; }

.reel-player {
  opacity: 0;
  animation: fadein 640ms ease forwards;
  animation-delay: 620ms;
}

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadein {
  to { opacity: 1; }
}

/* Scroll: eyebrows fade, rules draw. 200ms. Nothing else moves. */

.reveal {
  opacity: 0;
  transition: opacity 200ms ease;
}

.reveal-rule {
  transform: scaleX(0);
  transition: transform 200ms ease 80ms;
}

.in-view .reveal,
.reveal.in-view { opacity: 1; }

.in-view .reveal-rule,
.reveal-rule.in-view { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .reel-player { animation: none; opacity: 1; transform: none; }
  .reveal, .reveal-rule { transition: none; opacity: 1; transform: none; }
  .btn, .poster .play-square, .nav a, .panel, .art, .slate { transition: none; }
  .playhead { transform: scaleY(1); }
}

/* ============================================================
   BREAKPOINTS. Mobile is the primary layout.
   ============================================================ */

@media (min-width: 700px) {
  .wrap { padding-left: 40px; padding-right: 40px; }
  .section { padding: 96px 0; }
  .hero { padding: 88px 0 96px; }
  .work-grid { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .price-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .how-grid { grid-template-columns: minmax(260px, 380px) 1fr; gap: 56px; align-items: start; }
  .footer-inner { flex-direction: row; align-items: baseline; justify-content: space-between; }
  .credits { font-size: 13px; }
  .service { grid-template-columns: 320px 1fr; align-items: start; }
  .service-lead { grid-template-columns: 1fr; }
  .service-lead .service-body { margin-top: 18px; }
}

@media (min-width: 1080px) {
  .section { padding: 120px 0; }
  .hero { padding: 104px 0 120px; }
  .hero-sub { font-size: 18px; }
  .service { grid-template-columns: 420px 1fr; }
  .service-lead { grid-template-columns: 1fr 1fr; }
  .service-lead .service-body { margin-top: 6px; }
}

/* ============================================================
   SET CHANGE. The producer case study.
   Secondary section. Sub-hero scale. Numbered slate markers
   live here and nowhere else on the site.
   ============================================================ */

/* The hook: 2-3 second muted loop of the set pull. Placeholder until
   the clip exists. Scope ratio, hard edges, no controls. */

.hook-frame {
  aspect-ratio: 2.35 / 1;
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 16px;
  font-size: 11px;
  color: var(--ash);
  margin: 6px 0 32px;
}

.hook-frame span { font-size: 9px; opacity: 0.7; }

.hook-video {
  display: block;
  width: 100%;
  aspect-ratio: 2.35 / 1;
  object-fit: cover;
  margin: 6px 0 32px;
}

.setchange-title {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: clamp(1.9rem, 5vw, 3rem);
}

.setchange-credit {
  font-size: 17px;
  font-weight: 500;
  margin-top: 14px;
  max-width: 620px;
}

.setchange-note {
  font-size: 10px;
  color: var(--ash);
  margin-top: 8px;
}

.setchange-lead {
  font-size: 16px;
  max-width: 560px;
  color: var(--bone);
  margin-top: 20px;
}

.setchange-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-top: 48px;
}

/* The connector line and slate markers */

.steps {
  position: relative;
  padding-left: 60px;
}

.steps::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--rule);
}

/* The playhead: a bone progress line that fills the track as you
   scroll. Scrubbing, not decoration. Static full line under
   prefers-reduced-motion (set by script). */

.playhead {
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--bone);
  transform: scaleY(0);
  transform-origin: top center;
}

.step {
  position: relative;
  padding: 30px 0;
}

.step + .step { border-top: 1px solid var(--rule); }

.slate {
  position: absolute;
  left: -60px;
  top: 30px;
  width: 40px;
  padding: 6px 0;
  text-align: center;
  font-size: 11px;
  color: var(--ash);
  background: var(--ink);
  border: 1px solid var(--rule);
  transition: background 120ms linear, color 120ms linear, border-color 120ms linear;
}

/* The lit slate: the active step inverts, like a lit tally light. */
.step.is-active .slate {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}

.phase {
  font-size: 10px;
  color: var(--ash);
  margin-bottom: 8px;
}

.step-title {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.1;
  margin-bottom: 10px;
}

.step-copy {
  font-size: 16px;
  max-width: 52ch;
}

.step-copy + .step-copy { margin-top: 10px; }

.deliverable {
  font-size: 10px;
  color: var(--ash);
  margin-top: 14px;
}

/* Per-step artifact frame. Mobile and mid widths only. */

.step-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  color: var(--ash);
  font-size: 10px;
  padding: 12px;
  margin-bottom: 18px;
}

.step-media span { font-size: 9px; opacity: 0.8; }

/* Sticky artifact panel. Desktop only. */

.panel-col { display: none; }

.film-block { margin-top: 56px; }

@media (min-width: 1080px) {
  .setchange-grid { grid-template-columns: 1fr 1.1fr; gap: 56px; }

  .step-media { display: none; }

  .panel-col {
    display: block;
    position: sticky;
    top: 92px;
    align-self: start;
  }

  .panel-stage {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--rule);
  }

  .panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 200ms linear;
  }

  .panel.is-active { opacity: 1; }

  .panel-tag {
    position: absolute;
    top: 12px;
    left: 14px;
    z-index: 2;
    font-size: 10px;
    color: var(--ash);
  }

  .tc-readout {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 3;
    font-size: 11px;
    color: var(--bone);
  }

  /* One artifact at a time. Multiple artifacts crossfade while the
     step is in view. Real files replace the labels full-bleed. */
  .art {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 24px;
    font-size: 13px;
    color: var(--ash);
    opacity: 0;
    transition: opacity 200ms linear;
  }

  .art.is-on { opacity: 1; }

  .art .pending { display: block; font-size: 9px; opacity: 0.7; }

  .art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .film-block { margin-top: 88px; }
}