.ph-home .ph-hero { min-height: max(620px, 100svh); padding: 0; background: transparent; }
.ph-home .ph-hero::before { content: ''; position: absolute; inset: 0; background: url('../images/home/studio-shadows.svg') center / cover no-repeat, linear-gradient(141deg, transparent 43%, #85797038 53%, transparent 64%), #f8f4ef; mask-image: linear-gradient(#000 65%, transparent 100%); pointer-events: none; }
.ph-hero-copy { position: absolute; top: 28%; left: 6.5%; width: 49%; max-width: none; padding: 0; z-index: 2; }
.ph-home .ph-hero h1 { font-family: 'Outfit', sans-serif; font-size: clamp(62px, 5.8vw, 104px); line-height: .98; font-weight: 300; letter-spacing: -.052em; color: #10110f; }
.ph-home .ph-hero h1 > span, .ph-home .ph-hero h1 > strong { display: block; }
.ph-home .ph-hero h1 > strong { font-weight: 700; letter-spacing: -.045em; white-space: nowrap; }
.ph-hero-link { margin-top: clamp(48px, 11vh, 115px); color: #151613 !important; background: transparent; border: 1px solid #20221d; border-radius: 999px; font: 600 clamp(14px, 1.15vw, 19px)/1.4 'Manrope', sans-serif; padding: 17px 29px; gap: 24px; }
.ph-hero-link:hover { background: #252720; color: #fff !important; }
.ph-hero-scroll { position: absolute; bottom: 5.5%; left: 5.2%; display: flex; align-items: center; gap: 30px; font: 500 10px/1.4 'Manrope', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #161812 !important; z-index: 2; }
.ph-hero-scroll > span { font-size: 34px; font-weight: 300; }
.ph-monitor { position: absolute; width: 58%; height: 100%; right: 0; top: 0; z-index: 1; container-type: size; --monitor-frame-height: min(100cqh, 160.70459cqw); }
.ph-monitor-canvas, .ph-monitor-fallback { mask-image: linear-gradient(#000 76%, transparent 100%); }
.ph-monitor-fallback { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ph-monitor-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; opacity: 0; }
.ph-monitor.is-ready .ph-monitor-canvas { opacity: 1; }
.ph-monitor-canvas.is-dragging { cursor: grabbing; }
.ph-monitor-canvas:focus-visible { outline: 1px solid #353731; outline-offset: -20px; border-radius: 24px; }
/* The square poster and the live camera share this frame, including before JS loads. */
.ph-monitor-poster { position: absolute; top: 50%; left: 50%; width: var(--monitor-frame-height); height: var(--monitor-frame-height); max-width: none; object-fit: contain; translate: -50% -50%; scale: 1.1; pointer-events: none; }
.ph-monitor.is-ready .ph-monitor-poster { visibility: hidden; }
.ph-monitor-control { visibility: hidden; position: absolute; z-index: 2; transform: translate(-50%, -50%); width: 28px; height: 28px; border: 0; border-radius: 50%; padding: 0; background: transparent; cursor: pointer; }
.ph-monitor-control:focus-visible { outline: 2px solid #fff !important; outline-offset: 3px !important; box-shadow: 0 0 0 5px #20221c; }
.ph-monitor-control:hover { background: #ffffff15; }
.ph-monitor.is-unavailable .ph-monitor-canvas { display: none; }
@media (max-width: 800px) {
  .ph-home .ph-hero { min-height: 100svh; flex-direction: column; padding: 114px 0 0; }
  .ph-home .ph-hero::before { background-position: right bottom; }
  .ph-hero-copy { position: relative; top: auto; left: auto; width: 100%; padding: 0 28px; order: 1; }
  .ph-home .ph-hero h1 { font-size: clamp(43px, 8vw, 64px); }
  .ph-hero-link { margin-top: 30px; padding: 14px 22px; font-size: 14px; }
  .ph-monitor { position: relative; order: 2; width: 100%; height: 440px; right: auto; top: auto; flex: none; margin-top: -32px; --monitor-frame-height: min(160.15625cqh, 160.70459cqw); }
  .ph-monitor-canvas, .ph-monitor-fallback { mask-image: linear-gradient(#000 calc(100% - 56px), transparent 100%); }
  .ph-monitor-control { width: 24px; height: 24px; }
  .ph-hero-scroll { position: relative; left: auto; bottom: auto; align-self: flex-start; margin: 16px 28px 22px; order: 3; }
}