/* Production services: his production photos crossfade behind the hero; then their answer, the four services and the sister property. */

/* ============ HERO ============ */
/* full-bleed background like the home video, but his real production photos crossfading on their own */
.pr-hero{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(620px,96svh,900px);display:flex;align-items:center;background:var(--nw1)}
.pr-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(28px,4vw,72px);background:var(--d4);clip-path:ellipse(80% 100% at 32% 100%);pointer-events:none;z-index:1}
.pr-bg{position:absolute;inset:0;z-index:-2}
.pr-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;opacity:0;transition:opacity 1s var(--ease);transform-origin:60% 50%}
.pr-bg img.on{opacity:1}
/* every photo keeps moving for its whole time on screen: it starts close and slowly pulls away, still moving as it fades out */
.pr-bg img.on,.pr-bg img.out{animation:pr-pull 4.4s linear both}
@keyframes pr-pull{from{transform:scale(1.16) translate3d(1.5%,0,0)}to{transform:scale(1) translate3d(0,0,0)}}
.pr-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,18,33,.88) 0%,rgba(6,18,33,.66) 36%,rgba(6,18,33,.16) 64%,transparent 78%),linear-gradient(180deg,rgba(6,18,33,.45) 0,transparent 18%,transparent 78%,rgba(6,18,33,.35) 100%)}
.pr-hero-copy{position:relative;padding:calc(var(--hdr-h) + 40px) 0 clamp(96px,8vw,140px)}
.pr-hero-copy > *{max-width:560px}
.pr-hero h1{font-size:var(--t-hero);line-height:.98;letter-spacing:-.02em;max-width:11ch;color:var(--nw-text)}
.pr-hero .lede{margin:22px 0 0;color:var(--nw-text);max-width:40ch}
.pr-hero-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.pr-cap{margin:26px 0 0;color:var(--nw-text-3);transition:opacity .5s}
.pr-cap.fade{opacity:0}
@media (prefers-reduced-motion:reduce){.pr-bg img{transition:none;animation:none!important;transform:none}}
@media (max-width:860px){
  .pr-hero{min-height:0;align-items:flex-end}
  .pr-bg{bottom:auto;height:calc(var(--hdr-h) + 46svh + 120px)}
  .pr-scrim{background:linear-gradient(180deg,rgba(6,18,33,.4) 0,transparent calc(var(--hdr-h) + 40px),transparent calc(var(--hdr-h) + 30svh),rgba(10,33,54,.85) calc(var(--hdr-h) + 42svh),#0A2136 calc(var(--hdr-h) + 46svh + 110px))}
  .pr-hero-copy{padding:calc(var(--hdr-h) + 38svh) 0 76px}
  .pr-hero h1{font-size:clamp(40px,11vw,58px)}
}

/* ============ FAQ answer + the two heights ============ */
.pr-faq{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end}
.pr-h2{font-size:clamp(28px,1rem + 2vw,48px);margin:0 0 18px;max-width:16ch}
.pr-quote{font-size:var(--t-lede);color:var(--ink-2);max-width:56ch;margin:0}
.pr-throws{display:flex;gap:clamp(28px,4vw,56px);margin:0}
.pr-throws div{margin:0}
.pr-throws dt{font:600 clamp(72px,3rem + 4vw,140px)/.9 var(--display);font-stretch:120%;letter-spacing:-.045em;font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}
.pr-throws dt span{font-size:.3em;margin-left:6px;letter-spacing:0;color:var(--aqua-ink);font-weight:560}
.pr-throws dd{margin:12px 0 0;font-size:var(--t-small);color:var(--ink-2);max-width:20ch}

/* ============ four services: rows, one photo each, alternating ============ */
.pr-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(36px,4vw,64px)}
.pr-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.pr-row:nth-child(even) img{order:2}
.pr-row img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px}
.pr-n{display:block;font:500 13px/1 var(--mono);color:var(--aqua-ink);margin-bottom:14px}
.pr-row h3{font-size:clamp(24px,1rem + 1.2vw,34px);line-height:1.1;margin:0 0 12px;max-width:16ch;font-weight:540}
.pr-row p{margin:0;color:var(--ink-2);max-width:44ch;font-size:18px}

/* ============ sister property (the page's one glass panel) ============ */
.pr-sister-card{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;padding:12px}
.pr-sister-card img{width:100%;height:auto;border-radius:12px}
.pr-h2s{font-size:clamp(28px,1rem + 2vw,46px);margin:0 0 16px}
.pr-sister-card .sub{margin:0}
.pr-sister-card > div{padding:12px clamp(8px,2vw,28px) 12px 0}

@media (max-width:860px){
  .pr-faq,.pr-row,.pr-sister-card{grid-template-columns:1fr}
  .pr-row:nth-child(even) img{order:0}
  .pr-sister-card > div{padding:4px 8px 12px}
}
.pr-hero .kicker{color:var(--nw-text-2);text-shadow:0 1px 12px rgba(6,18,33,.7)}
.pr-cap{text-shadow:0 1px 10px rgba(6,18,33,.8)}