/* PR agency animated film widget — uses the site's existing Inter font (see style.css) instead of an embedded copy. */


.prh{
  /* brand palette */
  --carmine:#CD0040;--white:#FFFFFF;--grey:#F4F6F8;
  /* derived tokens used by the drawings */
  --bg:var(--grey);
  --ink:#16171B;      /* dark objects: phones, cameras, front row */
  --panel:var(--white);--panel2:#E9EDF1;--sil:#C3CAD3;
  --paper:#141416;    /* main text + dark strokes */
  --mute:#6B7280;
  --line:rgba(20,22,26,.14);--line2:rgba(20,22,26,.07);
  --mag:var(--carmine);--mag-hi:var(--carmine);
  --display:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  /* ===== SECTION FIT =====
     The film fills the WHOLE section, edge to edge, at any shape
     (wide like 2.3:1, 16:9, or tall on phones) — nothing is cropped.
     --prh-header : height of the site's sticky header */
  --prh-header:66px;
  --prh-h:calc(100vh - var(--prh-header));
  --prh-h:calc(100svh - var(--prh-header));
  position:relative;box-sizing:border-box;width:100%;
  height:var(--prh-h);min-height:360px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:0;overflow:hidden;
  background:radial-gradient(ellipse 60% 70% at 60% 50%,#FFFFFF 0%,var(--grey) 70%);
}
.prh *,.prh *::before,.prh *::after{box-sizing:border-box}
.prh-screen{position:relative;flex:1 1 auto;min-height:0;width:100%;
  background:transparent;overflow:hidden;cursor:default}
.prh-screen.is-held{cursor:grabbing}
.prh-screen svg{display:block;width:100%;height:100%}
/* ---------- SVG stage (scoped) ---------- */
.prh .k{fill:var(--ink)} .prh .p{fill:var(--panel)} .prh .p2{fill:var(--panel2)} .prh .sil{fill:var(--sil)}
.prh .w{fill:var(--paper)} .prh .mu{fill:var(--mute)} .prh .m{fill:var(--mag)} .prh .mh{fill:var(--mag-hi)}
.prh .ln{fill:none;stroke:var(--line);stroke-width:1.5}
.prh .ln2{fill:none;stroke:var(--line2);stroke-width:1}
.prh .sw{fill:none;stroke:var(--paper);stroke-width:2}
.prh .sm{fill:none;stroke:var(--mag-hi);stroke-width:2.5}
.prh .bar-l{fill:var(--line)}
.prh-screen text{font-family:var(--sans)}
.prh .num{font:700 26px var(--sans);fill:var(--mag-hi);letter-spacing:1px}
.prh .h{font:800 66px var(--sans);fill:var(--paper);letter-spacing:-2.6px}
.prh .sub{font:500 23px var(--sans);fill:var(--mute);letter-spacing:-.2px}
.prh .lbl{font:600 17px var(--sans);fill:var(--paper);letter-spacing:-.1px}
.prh .cap{font:700 13px var(--sans);fill:var(--mute);letter-spacing:2.2px;text-transform:uppercase}

.prh .scene{opacity:0;transition:opacity .8s ease;pointer-events:none}
.prh .scene.on{opacity:1}
.prh .scene:not(.on) *{animation:none!important}
.prh .cam{transform-box:view-box;transform-origin:800px 420px}
.prh .fb{transform-box:fill-box;transform-origin:center}
.prh .fbl{transform-box:fill-box;transform-origin:left center}
.prh .fbb{transform-box:fill-box;transform-origin:center bottom}
.prh .draw{stroke-dasharray:1;stroke-dashoffset:0}

.prh .on .push{animation:prh-push 10s linear both}
.prh .on .pan{animation:prh-pan 10s linear both}
.prh .on .rise{animation:prh-rise 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
.prh .on .fade{animation:prh-fade 1.2s ease var(--d,0s) both}
.prh .on .pop{animation:prh-pop .9s cubic-bezier(.2,.8,.2,1.1) var(--d,0s) both}
.prh .on .draw{animation:prh-draw var(--t,1.6s) cubic-bezier(.5,0,.2,1) var(--d,0s) both}
.prh .on .slideL{animation:prh-slideL 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
.prh .on .slideR{animation:prh-slideR 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
.prh .on .grow{animation:prh-grow 1.4s cubic-bezier(.3,.7,.2,1) var(--d,0s) both}
.prh .on .growY{animation:prh-growY 1.3s cubic-bezier(.3,.7,.2,1) var(--d,0s) both}
.prh .on .ring{animation:prh-ring 3.6s ease-out var(--d,0s) infinite both}
.prh .on .flash{animation:prh-flash 2.8s linear var(--d,0s) infinite both}
.prh .on .blink{animation:prh-blink 1.1s ease-in-out infinite}
.prh .on .flow{stroke-dasharray:3 14;animation:prh-flow 1.2s linear infinite}
.prh .on .float{animation:prh-float 3.4s ease-out var(--d,0s) infinite both}
.prh .on .feed{animation:prh-feed 10s linear .4s both}
.prh .on .sweep{animation:prh-sweep 5s ease-in-out .6s both}
.prh .on .breath{animation:prh-breath 2.4s ease-in-out infinite}

/* UI kit motion */
.prh .prh-gauge{stroke-dasharray:var(--v) 1;stroke-dashoffset:var(--v)}
.prh .on .prh-gauge{animation:prh-gauge 1.8s cubic-bezier(.3,.7,.2,1) var(--d,0s) both}
@keyframes prh-gauge{from{stroke-dashoffset:var(--v)}to{stroke-dashoffset:0}}
.prh .prh-cur{opacity:0}
.prh .on .prh-cur{animation:prh-cur 2.4s cubic-bezier(.55,0,.2,1) var(--d,0s) both}
@keyframes prh-cur{0%{opacity:0;transform:translate(var(--x0),var(--y0))}10%{opacity:1}65%{opacity:1;transform:translate(var(--x1),var(--y1))}100%{opacity:1;transform:translate(var(--x1),var(--y1))}}
.prh .prh-click{opacity:0;transform-box:fill-box;transform-origin:center}
.prh .on .prh-click{animation:prh-click .8s ease-out calc(var(--d,0s) + 1.6s) both}
@keyframes prh-click{0%{opacity:.35;transform:scale(.15)}100%{opacity:0;transform:scale(1.5)}}
.prh .prh-toast{transform-box:fill-box;transform-origin:center top}
.prh .on .prh-toast{animation:prh-toast .7s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
@keyframes prh-toast{from{opacity:0;transform:translateY(-18px) scale(.96)}to{opacity:1;transform:none}}
.prh .prh-wipe{transform-box:view-box}
.prh .prh-wipe.go{animation:prh-wipe 1s cubic-bezier(.6,0,.3,1) both}
.prh.paused *{animation-play-state:paused!important}

@keyframes prh-push{from{transform:scale(1)}to{transform:scale(1.06)}}
@keyframes prh-pan{from{transform:translateX(26px) scale(1.04)}to{transform:translateX(-26px) scale(1.04)}}
@keyframes prh-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes prh-fade{from{opacity:0}to{opacity:1}}
@keyframes prh-pop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@keyframes prh-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes prh-slideL{from{opacity:0;transform:translateX(-70px)}to{opacity:1;transform:none}}
@keyframes prh-slideR{from{opacity:0;transform:translateX(70px)}to{opacity:1;transform:none}}
@keyframes prh-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes prh-growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes prh-ring{0%{opacity:0;transform:scale(.55)}25%{opacity:.7}100%{opacity:0;transform:scale(1.25)}}
@keyframes prh-flash{0%,100%{opacity:0}3%{opacity:1}14%{opacity:0}}
@keyframes prh-blink{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes prh-flow{to{stroke-dashoffset:-34}}
@keyframes prh-float{0%{opacity:0;transform:translateY(20px)}18%{opacity:1}100%{opacity:0;transform:translateY(-170px)}}
@keyframes prh-feed{from{transform:translateY(0)}to{transform:translateY(-470px)}}
@keyframes prh-sweep{from{transform:translateX(-900px)}to{transform:translateX(2100px)}}
@keyframes prh-breath{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes prh-wipe{from{transform:translateX(-1400px)}to{transform:translateX(2200px)}}

/* light-background overrides */
.prh .h{fill:var(--text)}
.prh .sub{fill:var(--text-mute)}
.prh .prh-avatar{fill:#B9C0CA}

@media (max-width:1024px){ /* tablets and below: frame follows the artwork's shape, not the full viewport height */
  .prh{height:auto;min-height:0;padding-bottom:36px}
  .prh-screen{flex:none;aspect-ratio:16/9}
  .prh-segs{bottom:12px}
}
@media (max-width:760px){ /* phones: portrait frame; the drawing is laid out for a 600 x 950 canvas (see pr-film.js) */
  .prh{height:auto;min-height:0;padding-bottom:36px}
  .prh-screen{flex:none;aspect-ratio:600/950}
  .prh .prh-L,.prh .prh-R{display:none}
  .prh-segs{bottom:12px;width:min(70%,320px)}
}
.prh-segs{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:6px;width:min(60%,440px);z-index:2}
.prh-seg{flex:1;height:20px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.prh-seg::before,.prh-seg i{content:"";position:absolute;left:0;top:9px;height:2px;border-radius:2px}
.prh-seg::before{right:0;background:#DDE2E8}
.prh-seg i{width:0;background:var(--carmine)}
.prh-seg:focus-visible{outline:2px solid var(--carmine);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.prh-screen *{animation:none!important}.prh .scene{transition:none}}

/* tablets (portrait and landscape) use the portrait layout as well; the frame is capped so it stays a comfortable size */
@media (max-width:1024px){
  .prh{height:auto;min-height:0;padding-bottom:36px}
  .prh-screen{flex:none;aspect-ratio:600/950}
  .prh .prh-L,.prh .prh-R{display:none}
  .hero-media-full{flex-direction:column;align-items:stretch}
  .hero-media-full .prh{width:min(100%,480px);margin:0 auto}
  .prh-segs{bottom:12px;width:min(70%,320px)}
}