.studio-gallery {
  --sg-accent: #ff5c1c;
  --sg-card-width: clamp(250px, 32vw, 410px);
  --sg-rear-offset: clamp(170px, 22vw, 290px);
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: clamp(68px, 7vw, 110px) 5vw 66px;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  color: #f2f1ef;
  background: #08090a;
  border-top: 1px solid #ffffff12;
  scroll-margin-top: 92px;
}
.studio-gallery *, .studio-gallery *::before, .studio-gallery *::after { box-sizing: border-box; }
.studio-gallery::before {
  content: "";
  position: absolute;
  inset: 24% -15% -25%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, #42444a24 0, #16171908 40%, transparent 67%);
}
.studio-gallery__header, .studio-gallery__controls {
  width: min(100%, 1200px);
  margin-inline: auto;
}
.studio-gallery__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.studio-gallery__eyebrow { margin: 0 0 18px; color: #97989d; font-size: .6875rem; font-weight: 700; letter-spacing: .2em; }
.studio-gallery__eyebrow::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 11px 1px 0; background: var(--sg-accent); }
.studio-gallery__title {
  margin: 0;
  font-family: Impact, "Arial Black", Arial, sans-serif;
  font-size: clamp(56px, 7.3vw, 112px);
  line-height: .92;
  font-weight: 900;
  letter-spacing: -.015em;
  color: #f2f1ef;
}
.studio-gallery__title span {
  display: block;
  margin-top: 7px;
  color: #bcc0c7;
  background: linear-gradient(180deg, #fff 5%, #c5c7cc 35%, #7d818a 47%, #e6e9ed 54%, #c1c3c9 83%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.studio-gallery__header-count { margin: 0 0 4px; padding-bottom: 9px; color: #9b9ca2; border-bottom: 1px solid #6b6d7245; font-size: .75rem; letter-spacing: .16em; white-space: nowrap; }
.studio-gallery__carousel { width: min(100%, 1200px); max-width: 100%; margin: 6px auto 0; outline: none; }
.studio-gallery__carousel:focus-visible { outline: 1px solid var(--sg-accent); outline-offset: 10px; border-radius: 4px; }
.studio-gallery__stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: clamp(455px, 52vw, 640px);
  perspective: 1200px;
  perspective-origin: 50% 45%;
  touch-action: pan-y;
  overflow: hidden;
}
.studio-gallery__stage::after {
  content: "";
  position: absolute;
  width: min(80%, 770px);
  height: 110px;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  z-index: -1;
  background: radial-gradient(ellipse, #000 0, transparent 68%);
  pointer-events: none;
}
.studio-gallery__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--sg-card-width);
  aspect-ratio: 4 / 5;
  margin: 0;
  padding: 12px;
  overflow: hidden;
  border: 1px solid #a5a8b04f;
  border-radius: 16px;
  background: linear-gradient(130deg, #24262b 0, #101114 30%, #08090b 68%, #2a2a2c 100%);
  box-shadow: 0 27px 54px #000a, inset 0 1px 0 #ffffff24, inset 0 -1px 0 #ffffff0b;
  transform-origin: center;
  transition: transform 900ms cubic-bezier(.2, .75, .2, 1), opacity 900ms ease, border-color 900ms ease, filter 900ms ease;
  will-change: transform;
  backface-visibility: hidden;
}
.studio-gallery__card::after { content: ""; position: absolute; inset: auto 20% 0; height: 1px; background: linear-gradient(90deg, transparent, #ff5c1c91, transparent); }
.studio-gallery__card img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 8px; user-select: none; -webkit-user-drag: none; background: #090a0c; }
.studio-gallery__card.is-active { z-index: 2; transform: translate3d(-50%, -50%, 0) rotateY(0); opacity: 1; filter: brightness(1); border-color: #c7c9d285; }
.studio-gallery__card.is-rear { z-index: 1; opacity: .53; filter: brightness(.72); pointer-events: none; }
.studio-gallery__card.is-rear.is-right { transform: translate3d(calc(-50% + var(--sg-rear-offset)), -50%, -190px) rotateY(-25deg) scale(.89); }
.studio-gallery__card.is-rear.is-left { transform: translate3d(calc(-50% - var(--sg-rear-offset)), -50%, -190px) rotateY(25deg) scale(.89); }
.studio-gallery__card.is-offstage { z-index: 0; opacity: 0; visibility: hidden; transform: translate3d(-50%, -50%, -300px) scale(.75); }
.studio-gallery__controls { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 15px; border-top: 1px solid #6c6e742a; }
.studio-gallery__caption { min-width: 120px; }
.studio-gallery__caption-label { display: block; margin-bottom: 6px; font-size: .625rem; color: #7f8188; font-weight: 700; letter-spacing: .16em; }
.studio-gallery__caption-name { font-size: .875rem; font-weight: 600; }
.studio-gallery__navigation { display: flex; align-items: center; gap: 13px; }
.studio-gallery button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.studio-gallery button:focus-visible { outline: 2px solid var(--sg-accent); outline-offset: 4px; }
.studio-gallery__arrow { display: inline-grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; padding: 0; border: 1px solid #60636a7a; border-radius: 50%; background: #16171a; transition: background 180ms ease, border-color 180ms ease; }
.studio-gallery__arrow svg { width: 18px; height: 18px; }
.studio-gallery__arrow:hover { border-color: #b2b4bc; background: #2b2c30; }
.studio-gallery__dots { display: flex; align-items: center; gap: 2px; }
.studio-gallery__dot { display: inline-grid; place-items: center; width: 32px; height: 42px; padding: 0; border: 0; border-radius: 6px; background: transparent; }
.studio-gallery__dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #676a73; transition: width 200ms ease, background 200ms ease; }
.studio-gallery__dot[aria-current="true"]::before { width: 20px; border-radius: 4px; background: var(--sg-accent); }
.studio-gallery__auto { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; min-width: 130px; padding: 8px 12px; border: 1px solid #60636a5c; border-radius: 8px; background: transparent; font-size: .75rem !important; }
.studio-gallery__auto:hover { border-color: #b2b4bc; background: #ffffff06; }
.studio-gallery__auto svg { width: 12px; height: 12px; }
.studio-gallery__auto .studio-gallery__play-icon { display: none; }
.studio-gallery__auto[aria-pressed="true"] .studio-gallery__pause-icon { display: none; }
.studio-gallery__auto[aria-pressed="true"] .studio-gallery__play-icon { display: block; }
.studio-gallery__auto:disabled { opacity: .5; cursor: default; }
.studio-gallery__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .studio-gallery { --sg-card-width: clamp(224px, 70vw, 310px); --sg-rear-offset: clamp(95px, 25vw, 170px); padding: 70px 5vw 44px; scroll-margin-top: 78px; }
  .studio-gallery__header { align-items: flex-start; gap: 10px; }
  .studio-gallery__title { font-size: clamp(48px, 10.2vw, 76px); }
  .studio-gallery__header-count { margin-top: 32px; font-size: .625rem; }
  .studio-gallery__eyebrow { margin-bottom: 16px; font-size: .625rem; }
  .studio-gallery__stage { height: calc(var(--sg-card-width) * 1.44 + 70px); perspective: 1000px; }
  .studio-gallery__card { padding: 8px; border-radius: 13px; }
  .studio-gallery__card img { border-radius: 7px; }
  .studio-gallery__card.is-rear.is-right { transform: translate3d(calc(-50% + var(--sg-rear-offset)), -50%, -145px) rotateY(-27deg) scale(.91); }
  .studio-gallery__card.is-rear.is-left { transform: translate3d(calc(-50% - var(--sg-rear-offset)), -50%, -145px) rotateY(27deg) scale(.91); }
  .studio-gallery__controls { flex-wrap: wrap; gap: 18px 12px; padding-top: 20px; }
  .studio-gallery__caption { min-width: 94px; }
  .studio-gallery__navigation { gap: 5px; margin-left: auto; }
  .studio-gallery__arrow { width: 40px; height: 40px; flex-basis: 40px; }
  .studio-gallery__auto { min-width: 120px; margin-left: auto; }
}
@media (max-width: 370px) {
  .studio-gallery__title { font-size: 46px; }
  .studio-gallery__header-count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-gallery *, .studio-gallery *::before, .studio-gallery *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}