/* ov-pricing — /pricing overlap pass (2026-09-30). Page-scoped (front matter `css: … ov-pricing`),
   everything under .ov-pr. Copy untouched; plan cards and prices are left exactly as they were —
   the overlaps sit around them. Moments: hero photo + an outline frame ·
   the hire-plan screenshot over a photo that runs off the right edge · a portrait rising out of the
   editorial photo · closing card with a photo standing above and below it. */
.ov-pr{overflow-x:clip;--ov-sand:#E9DFCC;--ov-shadow:0 0 0 1px rgba(0,0,0,.05),0 30px 60px -24px rgba(30,22,10,.35),0 12px 24px -12px rgba(30,22,10,.18)}
.ov-pr picture{display:block}
.ov-pr picture img{display:block;width:100%;height:auto}

/* hero: thin accent frame offset behind the photo */
.ov-pr .ov-pr-hm{position:relative;isolation:isolate}
.ov-pr .ov-pr-hm::before{content:"";position:absolute;z-index:-1;inset:1.75rem -1.75rem -1.75rem 1.75rem;border:1px solid var(--accent);border-radius:var(--radius-img);opacity:.5}

/* #credits: the screenshot panel sits over a photograph that runs off the right edge */
.ov-pr .ov-pr-stage{position:relative;isolation:isolate;margin-top:var(--stack-l);padding-block:clamp(2.5rem,1.5rem + 4vw,5.5rem)}
.ov-pr .ov-pr-stage-p{position:absolute;z-index:-1;top:0;bottom:0;right:calc(50% - 50vw);width:calc(50vw - 50% + 46%)}
.ov-pr .ov-pr-stage-p img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;border-radius:var(--radius-img) 0 0 var(--radius-img)}
.ov-pr .ov-pr-stage .panel{margin:0 14% 0 0;background:rgba(242,239,232,.94);box-shadow:var(--ov-shadow)}

/* editorial: a portrait rises out of the top-left of the wide photo */
.ov-pr .ov-pr-ed{position:relative}
.ov-pr .ov-pr-ed-p{position:absolute;z-index:1;left:clamp(1.5rem,6vw,6rem);top:calc(-1 * clamp(3rem,1rem + 5vw,6.5rem));width:clamp(9rem,4rem + 13vw,19rem)}
.ov-pr .ov-pr-ed-p img{aspect-ratio:4/5;object-fit:cover;object-position:35% 45%;border:6px solid var(--bg);border-radius:var(--radius-img);box-shadow:var(--ov-shadow)}
.ov-pr #credits{padding-bottom:calc(var(--section) + 3rem)}

/* close: photo left, standing above and below the card; words left-aligned beside it */
.ov-pr .ov-pr-close{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(2rem,1rem + 4vw,5rem);text-align:left;padding:0 clamp(2rem,1rem + 4vw,5rem) 0 clamp(1.5rem,1rem + 2vw,3rem);margin-block:3rem}
.ov-pr .ov-pr-close-p{margin-block:-3rem}
.ov-pr .ov-pr-close-p img{aspect-ratio:4/5;object-fit:cover;object-position:62% 80%;border-radius:var(--radius-img);box-shadow:var(--ov-shadow)}
.ov-pr .ov-pr-close-t{padding-block:clamp(2.5rem,1.5rem + 3vw,4.5rem)}
.ov-pr .ov-pr-close .h2{margin-inline:0;max-width:17ch}
.ov-pr .ov-pr-close .d29-cta-row{justify-content:flex-start}
.ov-pr .ov-pr-close .pr-scope{margin:1.25rem 0 0}
.ov-pr .ov-pr-close-t > p{margin-inline:0}

@media (max-width:960px){
  .ov-pr .ov-pr-hm::before{inset:1rem -.75rem -1rem 1rem}
  .ov-pr .hero-grid{row-gap:calc(var(--stack-l) + 1.5rem)}
  .ov-pr .ov-pr-stage{padding-block:0}
  .ov-pr .ov-pr-stage-p{position:relative;left:auto;right:auto;width:auto;margin:0 calc(-1 * var(--gutter)) 0 20%}
  .ov-pr .ov-pr-stage-p img{aspect-ratio:4/3;height:auto;border-radius:var(--radius-img) 0 0 var(--radius-img)}
  .ov-pr .ov-pr-stage .panel{margin:-5rem 0 0}
  .ov-pr .ov-pr-close{grid-template-columns:1fr;gap:0;padding:0 clamp(1.5rem,1rem + 3vw,3rem)}
  .ov-pr .ov-pr-close-p{margin:-2.5rem 0 0}
  .ov-pr .ov-pr-close-p img{aspect-ratio:3/2}
}
@media (max-width:700px){
  .ov-pr .ov-pr-stage .panel{margin-top:-3.5rem}
  .ov-pr .ov-pr-ed-p{width:8rem;left:1rem;top:-3rem}
  .ov-pr .ov-pr-ed-p img{border-width:4px}
}