.studio-hero {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.65fr);
  grid-template-rows: 1fr auto;
  column-gap: clamp(36px, 4.8vw, 80px);
  row-gap: 34px;
  align-items: center;
  padding: 164px clamp(28px, 4vw, 64px) 66px;
  min-height: min(830px, 100svh);
  background: var(--color-black);
  color: var(--color-ivory);
  border-radius: 24px;
}
.studio-hero-copy { align-self: end; min-width: 0; }
.studio-hero-brand { width: 100%; height: auto; margin: 0 0 48px; }
.studio-hero h1 {
  font: 400 clamp(28px, 2.65vw, 42px)/1.12 var(--font-sans);
  letter-spacing: -.045em;
  margin: 0 0 24px;
  max-width: 430px;
  text-wrap: balance;
}
.studio-hero-copy > p { margin: 0; max-width: 400px; font-size: 15px; line-height: 1.65; color: var(--color-mist); }
.studio-film { min-width: 0; margin: 0; grid-column: 2; grid-row: 1 / 3; width: 100%; }
.studio-film video { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: contain; background: var(--color-graphite); border-radius: 4px; }
.optical-frame {
  --rim: clamp(14px, 1.8vw, 26px);
  --light-x: 22%; --light-y: 0%;
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--rim); border-radius: calc(var(--rim) + 10px);
  background: linear-gradient(135deg, #777981, #25272c 28%, #101116 68%, #5b5ce2);
  box-shadow: 0 30px 50px -22px #000, 0 1px 0 #f4f1ea40 inset, 0 -1px 0 #8586f440 inset;
}
.optical-reflection { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .42; filter: blur(2px) saturate(.65); pointer-events: none; }
.optical-frame::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at var(--light-x) var(--light-y), #f4f1ea40, transparent 55%), linear-gradient(135deg, #f4f1ea70 0%, transparent 27%, #0b0c0f99 55%, #8586f46b 100%);
}
.optical-frame::after {
  content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  border: 1px solid #f4f1ea38;
  background: radial-gradient(ellipse at var(--light-x) var(--light-y), #f4f1eacc, #f4f1ea08 55%, #8586f473 100%);
  padding: 2px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.optical-frame video { position: relative; z-index: 2; border-radius: 10px; box-shadow: 0 0 0 1px #0b0c0faa, 0 2px 8px #0008; }
@supports not (mask-composite: exclude) { .optical-frame::after { background: none; } }
@media(max-width:760px) { .optical-frame { --rim: 12px; } .optical-frame video { border-radius: 8px; } }
.studio-film-error { font-size: 14px; }
.studio-hero-actions { display: flex; align-self: start; flex-direction: column; align-items: flex-start; gap: 18px; }
.studio-hero-actions .button { padding-inline: 24px; background: var(--color-purple); color: #fff; }
.studio-hero-actions .button:hover { background: var(--color-ivory); color: var(--color-black); }
.studio-work-link { display: inline-flex; align-items: center; gap: 24px; min-height: 44px; font-size: 14px; text-decoration: none; }
.studio-work-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.studio-work-link span { color: var(--color-purple-on-dark); }
@media (min-width: 1600px) { .studio-hero { max-width: 1800px; margin-inline: auto; } }
@media (max-width: 1050px) {
  .studio-hero { grid-template-columns: minmax(230px, .85fr) minmax(0, 1.3fr); padding-inline: 28px; column-gap: 28px; min-height: 760px; }
  .studio-hero-brand { margin-bottom: 32px; }
}
@media (max-width: 760px) {
  .studio-hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 116px 20px 34px; gap: 28px; border-radius: 20px; }
  .studio-hero-copy { align-self: stretch; }
  .studio-hero-brand { width: min(100%, 350px); margin: 0 0 28px; }
  .studio-hero h1 { font-size: clamp(28px, 7.6vw, 40px); max-width: 520px; margin-bottom: 16px; }
  .studio-hero-copy > p { font-size: 14px; max-width: 520px; }
  .studio-film { margin: 0 -8px; width: calc(100% + 16px); }
  .studio-hero-actions { align-self: stretch; gap: 6px; }
  .studio-hero-actions .button { width: 100%; }
  .studio-work-link { align-self: center; }
}