body.st { background: #000; }
.st main { display: block; overflow-x: clip; }
.st svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st h1 em, .st h2 em { color: var(--accent); font-style: normal; }
.nw { white-space: nowrap; }

.smap { position: absolute; inset: 0; overflow: hidden; container-type: size; --z: 1.7; --px: 50; --py: 50; --m: max(100cqw, 100cqh); display: block; background: #0b0b0b; }
.smap__ground { position: absolute; inset: 0; background: url("../img/studio-map.svg") no-repeat;
  background-size: calc(var(--m) * var(--z)) calc(var(--m) * var(--z));
  background-position: calc(var(--px) * 1cqw - var(--m) * var(--z) / 2) calc(var(--py) * 1cqh - var(--m) * var(--z) / 2); }
.smap__pin { position: absolute; left: calc(var(--px) * 1cqw); top: calc(var(--py) * 1cqh); width: 0; height: 0; }
.smap__pin::before { content: ''; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; background: rgba(4,166,75,.18); box-shadow: 0 0 0 1px rgba(4,166,75,.5); }
.smap__pin::after { content: ''; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #000; }
.smap__tag { position: absolute; left: 30px; top: -19px; display: grid; gap: 3px; padding: 8px 12px 9px; background: #000; border: 1px solid #2e2e2e; white-space: nowrap; box-shadow: 0 10px 24px rgba(0,0,0,.55); }
.smap__tag b { font-family: var(--head); font-size: 13px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.smap__tag small { font-size: 11px; line-height: 1.2; letter-spacing: .06em; color: #bdbdbd; }

.sinfo .eyebrow { display: block; margin: 0 0 18px; }
.sinfo h1 { font-size: clamp(46px, 4.6vw, 96px); line-height: .88; text-transform: uppercase; color: #fff; margin: 0 0 30px -0.04em; }
.sinfo h1 span { display: block; color: var(--accent); }
.sinfo .lede { font-size: 18px; line-height: 1.55; color: #cfcfcf; margin: 0 0 30px; max-width: 46ch; text-wrap: pretty; }
.sinfo dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 26px; border-top: 1px solid #2a2a2a; }
.sinfo dl div { padding: 16px 0; border-bottom: 1px solid #2a2a2a; }
.sinfo dl div:nth-child(odd) { padding-right: 20px; border-right: 1px solid #2a2a2a; }
.sinfo dl div:nth-child(even) { padding-left: 24px; }
.sinfo dt { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.sinfo dd { margin: 0; font-family: var(--head); font-size: 21px; line-height: 1.15; text-transform: uppercase; color: #fff; }
.sinfo dd small { display: block; margin-top: 4px; font-family: var(--body); font-size: 13px; letter-spacing: .02em; text-transform: none; color: #a8a8a8; }
.sinfo dd a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--accent); }
.sinfo dd a:hover { color: var(--accent); }
.sinfo .clean { margin: 0 0 30px; font-size: 14px; line-height: 1.6; color: #a8a8a8; max-width: 52ch; text-wrap: pretty; }
.sgo { display: flex; flex-wrap: wrap; gap: 12px; }
.sgo .btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; }
.sgo .btn svg { width: 18px; height: 18px; }

@media (max-width: 767px), (max-height: 500px) and (max-width: 1023px) {
  .sinfo h1 { font-size: min(56px, 11.6vw); margin-bottom: 22px; }
  .sinfo .lede { font-size: 16px; margin-bottom: 24px; }
  .sinfo dd { font-size: 17px; }
  .sgo .btn { flex: 1 1 100%; justify-content: center; }
  .smap__tag { left: 24px; padding: 6px 9px 7px; }
  .smap__tag b { font-size: 11px; }
  .smap__tag small { font-size: 10px; }
}

.s1 { position: relative; display: grid; grid-template-columns: 1fr min(42vw, 800px) min(42vw, 660px) 1fr; min-height: calc(100svh - 72px * var(--wz, 1)); background: #000; overflow: hidden; }
.s1__map { position: relative; grid-column: 2; }
.s1__map .smap { --px: 46; --z: 1.9; }   .s1__map::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, #000, transparent 16%, transparent 62%, #000), linear-gradient(#000, transparent 14%, transparent 86%, #000); }
.s1__txt { grid-column: 3; align-self: center; padding: 72px 0 80px clamp(24px, 3vw, 48px); }

@media (max-width: 1023px) {
  .s1 { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .s1__map { grid-column: 1; height: min(72vw, 58svh); }
  .s1__map .smap { --px: 42; }
  .s1__map::after { background: linear-gradient(transparent 60%, #000), linear-gradient(to right, #000, transparent 10%, transparent 90%, #000); }
  .s1__txt { grid-column: 1; width: min(100%, 640px); margin: -24px auto 0; padding: 0 24px 80px; position: relative; z-index: 2; }
}
@media (max-width: 767px), (max-height: 500px) and (max-width: 1023px) {
  .s1 { min-height: calc(100svh - 60px); }
  .s1__map { height: clamp(300px, 48svh, 520px); }   .s1__map .smap { --px: 26; --z: 2.2; }
  .s1__txt { padding: 0 20px 64px; }
}

.s1__map { --mt-img: url("../tex/grunge-flat-2100.webp"); --mt-op: .26; --mt-sz: 105; --mt-bl: overlay; }
.s1__map::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--mt-img) 50% 50% / calc(var(--mt-sz) * 1%) auto repeat; opacity: var(--mt-op); mix-blend-mode: var(--mt-bl); }
.s1__map::after { z-index: 2; }