/* ============================================================
   POLICING 5.0 — page-scoped identity layer
   Loaded by policing-5-0.html ONLY, and every rule is scoped under
   .p50 (set on <body>), so the WPS design system is untouched
   everywhere else. The WPS shell carries the page — nav, footer,
   Museo Sans, .sect rhythm, the 1240px shell, card radii, pill
   buttons — and this file adds the Policing 5.0 identity on top:
   its palette, its official theme marks and map, and its content
   from the client's brand deck and website presentation.

   Colours read from POLICING5.0_BrandDevelopment (May 2025).
   Note --p50-navy (#02426A) is within a hair of WPS --wps-deep
   (#05426A), which is why the two identities sit together easily.
   ============================================================ */
.p50{
  --p50-navy:#02426A;      /* logo primary            */
  --p50-blue:#0A84FF;      /* Future Skills & Talent Development     */
  --p50-yellow:#FFC20E;    /* Navigating Digital Realities           */
  --p50-green:#00A651;     /* Forging the Future of Community Safety */
  --p50-violet:#7B33D3;    /* Future-Ready Policing                  */
  --p50-grey:#878783;      /* Adaptive Policing                      */
  --p50-red:#EC1C24;       /* A Culture of Wellbeing                 */
}

/* ---------- brand mark: the client's own Policing 5.0 logo (real artwork, not a drawn approximation) ---------- */
.p50-mark{width:132px;height:auto;flex:none}
.p50-lock .logo-on-dark{display:none}
.p50-lock .logo-on-light{display:block}
.p50-lock{display:inline-flex;align-items:center;margin:18px 0 22px}

/* ---------- tagline — the brand's three-part line ---------- */
.p50-tag{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:26px;list-style:none}
.p50-tag li{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 15px;border-radius:999px;border:1px solid var(--brd-hi);background:var(--glass);color:var(--ink)}

/* ---------- generic mask-icon helper (used by the map's stat icons) ---------- */
.p50-sym{display:block;background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}

/* ============================================================
   VIDEO BANNER
   ============================================================ */
.p50-video{position:relative;padding-top:0;background:#000}
/* full-bleed hero, no black band above. The Vimeo source is 16:9 but has letterbox
   bars baked in (picture area ≈ 2.6:1, bars ≈ 16% top and bottom). The frame is sized
   to the picture area and the iframe is scaled so its picture covers the frame —
   the baked-in bars fall outside and are cropped by overflow:hidden. */
.p50-video__frame{--fh:max(37vw, 440px);position:relative;width:100%;height:var(--fh);overflow:hidden}
.p50-video__frame iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100%, calc(var(--fh) * 2.62));height:auto;aspect-ratio:16/9;border:0;pointer-events:none}
@media (max-width:840px){ .p50-video__frame{--fh:max(56vw, 380px)} }

/* ============================================================
   INTRO / WHY IT MATTERS — two columns, overlapping the video
   ============================================================ */
.p50-intro{display:grid;grid-template-columns:1.15fr 1fr;gap:0;
  /* overlaps roughly a third of the video's own height (16:7 aspect, so height is
     7/16 of viewport width) — the extra -90px offsets .sect's own 88px top padding,
     which would otherwise eat into the negative margin before it reaches the video.
     Clamped so ultra-wide/narrow screens don't overlap too much or too little. */
  margin-top:clamp(-200px,calc(-7vw - 88px),-150px);position:relative;z-index:2;
  border-radius:var(--r-xl);overflow:hidden;background:var(--bg);
  box-shadow:0 30px 70px rgba(3,10,30,.16)}
.p50-intro__col{padding:52px 46px}
.p50-intro__col--why{position:relative;background:var(--glass);border-left:1px solid var(--brd)}
/* the brand shape pattern fills the empty space below the vision line — sat behind
   the text (z-index:-1) so it reads as a quiet decorative footer, not a competing
   graphic; faded in from the top so it never fights the paragraph above it */
.p50-intro__pattern{position:absolute;left:0;right:0;bottom:0;height:140px;z-index:-1;
  background:url('../p50/brand/shape-pattern.png') center 78%/340px auto repeat-x;opacity:.16;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);
  mask-image:linear-gradient(180deg,transparent,#000 55%);pointer-events:none}
.p50-intro__col .para + .para{margin-top:14px}
.p50-why{display:flex;flex-direction:column;gap:18px;margin:22px 0}
.p50-why > div{display:flex;gap:16px;align-items:flex-start}
.p50-why b{display:flex;flex:none;width:28px;height:28px;align-items:center;justify-content:center;
  border-radius:50%;font-size:12px;font-weight:700;color:#fff;background:var(--p50-navy)}
.p50-why p{font-size:14.5px;line-height:1.6;color:var(--w55)}
.p50-intro__vision{font-size:15px;line-height:1.65;font-weight:500;color:var(--ink);
  padding-top:20px;border-top:1px solid var(--brd)}
@media (max-width:900px){
  .p50-intro{grid-template-columns:1fr;margin-top:clamp(-130px,calc(-8vw - 60px),-90px)}
  .p50-intro__col{padding:36px 26px}
  .p50-intro__col--why{border-left:0;border-top:1px solid var(--brd)}
}

/* ============================================================
   KEY QUESTIONS
   ============================================================ */
/* The key-questions cards were a bespoke design: a per-card accent (--c) driving a 3px
   coloured top border, a tinted icon chip and a coloured label, in blue/green/violet.
   That broke three DESIGN-SPECS rules at once — 9.2 "one accent at a time" (sky blue
   carries interaction, teal is a detail accent), 9.4 "cards carry the design ... the same
   card language", and 1.1 (green #00A651 and violet #7B33D3 are not in the palette).
   They now use the shared .exp card + .eyebrow label from the design system, so the
   markup carries no styling of its own and inherits light/dark for free.
   Only the glyph needs a rule: per 4.5a a Phosphor icon is a mask over currentColor and
   sits directly on the surface at var(--wps-light) — no chip (chip rule 4.5 is for the
   two-tone brand icons only). */
.exp > .p50-sym{width:42px;height:42px;color:var(--wps-light);margin-bottom:20px}
.qcar__track > .exp > .eyebrow{font-size:clamp(13px,1vw,14px);font-weight:650;letter-spacing:.18em;margin-bottom:14px}

/* ============================================================
   SIX THEMES — official brand lockups, 3x2
   ============================================================ */
.p50-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.p50-card{display:flex;flex-direction:column;padding:22px 22px 24px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--brd);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.p50-card:hover{transform:translateY(-4px);background:var(--glass-hi)}
/* emblem-only crop of the official lockup (POLICING wordmark + theme name removed —
   the deck's PNG had them baked in as raster text; the same title now comes from the
   <h3> below so it stays selectable/translatable and can share sizing with the rest
   of the card system). All six source crops were normalized to one canvas size
   (353x534) before export, so a single fixed height here keeps every emblem the same
   size regardless of how much transparent padding its particular icon needed. */
/* align-self:flex-start is load-bearing: .p50-card is a column flexbox, so the default
   align-items:stretch would otherwise force this image to the card's full width — with
   height fixed and object-fit defaulting to `fill`, that stretched every emblem into a
   smeared, non-uniform-scaled band instead of a correctly proportioned icon. */
.p50-card__emblem{display:block;align-self:flex-start;height:64px;width:auto;object-fit:contain;margin-bottom:18px}
.p50-card h3{font-size:19px;line-height:1.25;font-weight:750;color:var(--ink);margin-bottom:10px}
.p50-card p{font-size:14px;line-height:1.6;color:var(--w55)}
@media (max-width:900px){.p50-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.p50-grid{grid-template-columns:1fr}}

/* ============================================================
   SHAPE MARQUEE — decorative divider between Six Themes and Global Reach
   ============================================================ */
/* Two identical copies of the shape row sit side by side in a flex track; animating
   the track exactly -50% (one copy's width) loops seamlessly, since the next frame
   is pixel-identical to frame zero. Shapes are the client's own brand marks (red/
   yellow/grey/purple/blue), self-hosted as flat SVGs — no masking needed since each
   already carries its own fill colour. */
.p50-marquee{overflow:hidden;padding:26px 0;background:var(--glass);
  border-top:1px solid var(--brd);border-bottom:1px solid var(--brd);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.p50-marquee__track{display:flex;width:max-content;animation:p50Marquee 112s linear infinite}
.p50-marquee__set{display:flex;align-items:center;flex:none}
.p50-marquee__set img{height:38px;width:auto;flex:none;margin-right:64px}
@keyframes p50Marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.p50-marquee__track{animation:none}}

/* ============================================================
   GLOBAL REACH / MAP
   ============================================================ */
/* No panel background — the map sits directly on the section's own surface (light page
   field or dark near-black, whichever theme is active) rather than a fixed navy card. */
/* The landmass itself is a dotted network, not the deck's flat gray fill — the client
   asked to align it with a "dotted world map" reference. Rather than rasterizing the
   deck's map.svg into a bitmap of dots (fragile, a build step, another asset to keep in
   sync), the *same* map.svg is used as a CSS mask over a tiled dot pattern: the mask's
   alpha (from the landmass fill) decides where dots are visible, the ocean stays empty.
   One file, still the deck's real geometry, no extra asset and no JS. Dot colour is
   var(--ink) at low opacity so it reads on the page's own field in both themes, rather
   than a colour tuned for a dark panel that no longer exists. */
.p50-map__art{position:relative;width:100%;aspect-ratio:15185942/7115175;margin-top:20px}
/* the dot pattern lives on its own layer so its opacity doesn't dilute the pins, which
   sit as direct children of .p50-map__art at full strength */
.p50-map__art::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle, var(--ink) 1.1px, transparent 1.1px);
  background-size:4.2px 4.2px;opacity:.4;
  -webkit-mask:url('../p50/map/world.svg') center/100% 100% no-repeat;
  mask:url('../p50/map/world.svg') center/100% 100% no-repeat}
/* The blue markers are decorative reach points only. Country-specific labels were removed
   because approximate pins on a stylized SVG can become misleading. */
.p50-map__pin{position:absolute;width:16px;height:16px;transform:translate(-50%,-50%);
  pointer-events:none;z-index:3}
.p50-map__pin::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:var(--p50-navy);opacity:.55;animation:p50Pulse 2.4s ease-out infinite}
.p50-map__pin::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:var(--p50-navy);box-shadow:0 0 0 2px var(--bg)}

@media (prefers-reduced-motion:reduce){
  .p50-map__pin::before{animation:none}
}
/* the ring grows from the pin's own footprint, not a fixed pixel blob, so it stays
   proportionate to the dot at any viewport width */
@keyframes p50Pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(3.2);opacity:0}}

/* ============================================================
   WHITE PAPER / REPORT — one brand-navy feature panel: large cover on the left,
   title / copy / headline stats / CTA on the right, session photos as a strip below.
   ============================================================ */
.p50-wp{position:relative;border-radius:var(--r-xl);overflow:hidden;padding:56px;color:#fff;
  background:radial-gradient(80% 90% at 0% 0%,rgba(0,176,166,.26) 0%,rgba(0,176,166,0) 55%),
             radial-gradient(70% 80% at 100% 100%,rgba(0,157,217,.32) 0%,rgba(0,157,217,0) 60%),
             linear-gradient(160deg,#07061A 0%,#14479C 60%,#0E3178 100%);
  box-shadow:0 21px 50px rgba(0,0,0,.175);--wps-teal:#00CEAF}
.p50-wp::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;background:url('../images/mv-brand-swoosh.svg') center/190% auto no-repeat}
.p50-wp__main{position:relative;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:64px;align-items:center}
.p50-wp__cover{position:relative;padding:18px 0 18px 10px}
.p50-wp__cover::before{content:"";position:absolute;inset:8% -6% 0 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,206,175,.45),rgba(0,206,175,0));filter:blur(20px)}
.p50-wp__cover img{position:relative;display:block;width:100%;height:auto;border-radius:10px;
  box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08);transform:perspective(1200px) rotateY(8deg) rotateZ(-1.5deg);transition:transform .6s var(--ease)}
.p50-wp:hover .p50-wp__cover img{transform:perspective(1200px) rotateY(0) rotateZ(0)}
.p50-wp__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.p50-wp__tag{font-family:var(--f-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.28);color:#fff}
.p50-wp__tag--soon{border-color:rgba(0,206,175,.5);color:var(--wps-teal)}
.p50-wp .p50-wp__body h3{font-size:clamp(26px,2.8vw,38px);line-height:1.12;font-weight:750;color:#fff;margin-bottom:16px}
.p50-wp__body > p{font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.78);max-width:560px}
.p50-wp__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:34px 0;padding:26px 0;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);max-width:560px}
.p50-wp__stats div{display:flex;flex-direction:column-reverse;gap:8px}
.p50-wp__stats dd{margin:0;font-size:clamp(34px,3.6vw,46px);font-weight:700;line-height:1;color:#fff}
.p50-wp__stats dt{font-family:var(--f-m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--wps-teal)}
.p50-wp__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.p50-wp__photos{position:relative;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:14px;margin-top:48px;height:210px}
.p50-wp__photos figure{margin:0;border-radius:var(--r-md);overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.p50-wp__photos img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.p50-wp__photos figure:hover img{transform:scale(1.04)}
.p50-wp__photos figure:nth-child(1) img{object-position:center 42%}
.p50-wp__photos figure:nth-child(3) img{object-position:center 30%}
@media (max-width:980px){
  .p50-wp{padding:40px 32px}
  .p50-wp__main{grid-template-columns:1fr;gap:36px}
  .p50-wp__cover{max-width:240px}
  .p50-wp__photos{height:170px;margin-top:36px}
}
@media (max-width:600px){
  .p50-wp{padding:32px 22px}
  .p50-wp__cover{max-width:190px}
  .p50-wp__stats dt{font-size:9.5px;letter-spacing:.08em}
  .p50-wp__stats{gap:12px}
  .p50-wp__photos{grid-template-columns:1fr 1fr;height:auto}
  .p50-wp__photos figure{aspect-ratio:4/3}
  .p50-wp__photos figure:first-child{grid-column:1 / -1;aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){ .p50-wp__cover img,.p50-wp__photos img{transition:none} }
/* .tbc marker is defined once in inner.css and already loaded by this page */

/* ============================================================
   PARTNERS & INSTITUTIONS — centre the trailing incomplete row
   ============================================================ */
/* 12 logos don't divide evenly into the shared 8-col grid (base.css), so the last
   4 sit flush left under columns 1-4 instead of centred on their own row. Flexbox
   wrap with matching per-item width reproduces the same 8-per-row layout but lets
   a short final row centre itself — page-scoped so base.css (shared by other pages)
   stays untouched. Only needed at the 8-col (desktop) breakpoint: the narrower
   4-col and 2-col grids divide 12 evenly, so no orphan row occurs there. */
.p50 .plogo-grid--all{display:flex;flex-wrap:wrap;justify-content:center}
.p50 .plogo-grid--all .plogo{flex:0 0 calc((100% - 7*14px)/8);width:calc((100% - 7*14px)/8)}
/* 12 divides evenly into 4 and 2 columns, so these breakpoints just mirror base.css's
   own grid-template-columns switch — matching widths, matching gap */
@media (max-width:1080px){.p50 .plogo-grid--all .plogo{flex-basis:calc((100% - 3*14px)/4);width:calc((100% - 3*14px)/4)}}
@media (max-width:760px){.p50 .plogo-grid--all .plogo{flex-basis:calc((100% - 14px)/2);width:calc((100% - 14px)/2)}}

/* Partners use the same continuous, duplicated-track marquee language as the
   homepage "Top Police Forces and Associations" strip. */
.p50-partner-marquee{overflow:hidden;padding:12px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.p50-partner-marquee__track{display:flex;width:max-content;animation:p50PartnerScroll 38s linear infinite;will-change:transform}
.p50-partner-marquee__set{display:flex;flex:none;gap:14px;padding-right:14px}
.p50-partner-marquee .plogo{flex:0 0 190px;width:190px;min-height:88px;border-radius:16px;padding:14px 22px}
.p50-partner-marquee .plogo img{max-height:42px;max-width:138px;width:auto;height:auto;object-fit:contain}
.p50-partner-marquee:hover .p50-partner-marquee__track{animation-play-state:paused}
@keyframes p50PartnerScroll{to{transform:translateX(-50%)}}
@media (max-width:760px){
  .p50-partner-marquee__track{animation-duration:30s}
  .p50-partner-marquee .plogo{flex-basis:152px;width:152px;min-height:76px;padding:12px 16px}
  .p50-partner-marquee .plogo img{max-width:112px;max-height:36px}
}
@media (prefers-reduced-motion:reduce){.p50-partner-marquee__track{animation:none}}

/* "Police leadership, academia / and industry" — keep the first line whole (2 lines total) */
.head--centre:has(#partnersH){max-width:960px}
@media (min-width:761px){ #partnersH{white-space:nowrap} #partnersH em{white-space:nowrap} }

/* ---------- partner logos — damped stepping carousel ---------- */
.lcar{--per:6;--gap:14px;position:relative}
.lcar__view{overflow:hidden;margin:-12px 0;padding:12px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.lcar__track{display:flex;flex-wrap:nowrap;gap:var(--gap);will-change:transform;
  transition:transform 1.25s cubic-bezier(.16,1,.3,1)}
.lcar__track > .plogo{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));min-width:0;min-height:88px;border-radius:14px;padding:12px}
.lcar__track > .plogo img{max-height:40px}
.lcar:not(.is-live) .lcar__track{flex-wrap:wrap;justify-content:center}
@media (max-width:1080px){ .lcar{--per:4} }
@media (max-width:760px){ .lcar{--per:2.4} .lcar__track > .plogo{min-height:76px} }

/* ---------- speakers — homepage "Top leaders & speakers" card (flag beside country, no badge) ---------- */
.pspk .spk{background:#fff;border:1px solid rgba(0,157,217,.32)}
.pspk .spk:hover{transform:translateY(-5px);border-color:rgba(0,157,217,.55);box-shadow:none}
.pspk .spk__r{color:#5A5A72}
.pspk .spk__c{display:flex;align-items:center;gap:6px}
.pspk .spk__flag{flex:none;width:16px;height:11px;border-radius:2px;background-color:rgba(0,0,0,.06);background-size:cover;background-position:center;box-shadow:0 1px 3px rgba(0,0,0,.25);border:1px solid rgba(0,0,0,.08)}
.pspk .spk__n{font-size:16px}
.pspk__btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- reach: country roll-call pills ---------- */
/* The pins stay decorative and unlabelled (approximate positions on a stylised map),
   so the authoritative country list lives here instead, where each name is real text
   next to its flag. Pill geometry is shared with .p50-tag so the page reads as one system. */
.p50-reach{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;margin:22px 0 0;padding:0;list-style:none}
.p50-reach li{display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 15px;border-radius:999px;border:1px solid var(--brd-hi);
  background:var(--glass);color:var(--ink)}
.p50-reach img{flex:none;width:18px;height:12px;border-radius:2px;object-fit:cover;
  background-color:rgba(0,0,0,.06);box-shadow:0 1px 3px rgba(0,0,0,.25);
  border:1px solid rgba(0,0,0,.08)}

/* ---------- key questions: three fixed boxes (was a carousel) ---------- */
.p50-q3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:8px}
.p50-q3 > .exp{flex:none;border:1.5px solid #B9CDE6;box-shadow:0 2px 6px rgba(28,39,66,.04),0 12px 30px rgba(40,60,120,.06)}
.p50-q3 > .exp:hover{border-color:#36A4DD}
.p50-q3 > .exp > .eyebrow{font-size:clamp(13px,1vw,14px);font-weight:650;letter-spacing:.18em;margin-bottom:14px}
[data-theme="dark"] .p50-q3 > .exp{border-color:rgba(191,214,244,.34);box-shadow:none}
[data-theme="dark"] .p50-q3 > .exp:hover{border-color:#36A4DD}
@media(max-width:980px){.p50-q3{grid-template-columns:1fr}}

/* ---------- reach map: flags on the map, inside a themed panel ---------- */
.p50-map--panel{margin-top:8px;padding:clamp(18px,3vw,40px);border:1.5px solid #C9D8EC;border-radius:28px;background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(236,244,252,.85));box-shadow:0 2px 6px rgba(28,39,66,.04),0 18px 44px rgba(40,60,120,.08)}
.p50-map--panel .p50-map__art{margin-top:0}
[data-theme="dark"] .p50-map--panel{border-color:rgba(191,214,244,.26);background:linear-gradient(160deg,rgba(20,27,48,.9),rgba(13,19,38,.88));box-shadow:none}
.p50-flag{position:absolute;z-index:3;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #fff,0 4px 12px rgba(7,6,26,.28);cursor:pointer;outline:none;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.p50-flag > img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.p50-flag:hover,.p50-flag:focus-visible{z-index:6;transform:scale(1.35);box-shadow:0 0 0 2px #36A4DD,0 6px 16px rgba(7,6,26,.32)}
.p50-flag__tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);padding:6px 11px;border-radius:999px;background:#0B1B4D;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .18s var(--ease),transform .18s var(--ease)}
.p50-flag:hover .p50-flag__tip,.p50-flag:focus-visible .p50-flag__tip,.p50-flag.is-open .p50-flag__tip{opacity:1;transform:translate(-50%,0)}
[data-theme="dark"] .p50-flag{background:#0B1B4D;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 4px 12px rgba(0,0,0,.4)}
.p50-reach--sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:760px){.p50-flag{width:16px;height:16px;margin:-8px 0 0 -8px;box-shadow:0 0 0 1.5px #fff,0 2px 6px rgba(7,6,26,.28)}.p50-flag:hover,.p50-flag:focus-visible{transform:scale(1.5)}}
@media(prefers-reduced-motion:reduce){.p50-flag,.p50-flag__tip{transition:none}}
.p50-flag:focus .p50-flag__tip{opacity:1;transform:translate(-50%,0)}
.p50-flag:focus{z-index:6}
body.p50 .p50-q3 > .exp{border-color:#A9C2E0}
body.p50 .p50-q3 > .exp:hover{border-color:#36A4DD}
[data-theme="dark"] body.p50 .p50-q3 > .exp{border-color:rgba(191,214,244,.38)}

/* ---------- reach map (v2): navy markers on the map, the countries as chips below ---------- */
.p50-map--panel{max-width:1080px;margin-inline:auto}
.p50-map__art{max-width:980px;margin-inline:auto}
.p50-pin{position:absolute;z-index:3;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#0B2E5C;box-shadow:0 0 0 6px rgba(11,46,92,.12),0 0 0 2px #fff inset}
.p50-pin::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(11,46,92,.18);animation:p50Halo 2.8s ease-out infinite}
@keyframes p50Halo{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.p50-pin__tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);padding:5px 10px;border-radius:999px;background:#0B1B4D;color:#fff;font-size:11px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
.p50-pin:hover .p50-pin__tip{opacity:1}
.p50-countries{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:1080px;margin:28px auto 0;padding:0;list-style:none}
.p50-country{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border:1px solid var(--card-brd,#C9D8EC);border-radius:999px;background:var(--glass,#fff);color:var(--w,#16213A);font-size:var(--t-card-size,14px);font-weight:600;line-height:1}
.p50-country img{width:22px;height:22px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(11,46,92,.12)}
[data-theme="dark"] .p50-pin{background:#9CD3F5;box-shadow:0 0 0 6px rgba(156,211,245,.16),0 0 0 2px #0B1B4D inset}
[data-theme="dark"] .p50-country{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff}
@media(max-width:760px){.p50-pin{width:8px;height:8px;margin:-4px 0 0 -4px;box-shadow:0 0 0 3px rgba(11,46,92,.12)}.p50-pin::after{display:none}.p50-country{padding:6px 11px 6px 6px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.p50-pin::after{animation:none}}

/* Reach map: flags sit on the map. Where flags would overlap (Europe), assets/js/policing-5.js
   nudges them apart and a thin leader line plus a dot marks each country's true location. */
.p50-mk{position:absolute;z-index:3;width:0;height:0}
.p50-mk:hover,.p50-mk:focus-within{z-index:8}
.p50-mk__in{position:absolute;left:0;top:0;transform:translate(var(--dx,0px),var(--dy,0px));transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.p50-mk .p50-flag{left:0;top:0}
.p50-mk__dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#0B2E5C;opacity:0;transition:opacity .3s}
.p50-mk.is-moved .p50-mk__dot{opacity:1}
.p50-map__lines{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.p50-map__lines line{stroke:#0B2E5C;stroke-opacity:.45;stroke-width:1}
[data-theme="dark"] .p50-mk__dot{background:#9CD3F5}
[data-theme="dark"] .p50-map__lines line{stroke:#9CD3F5;stroke-opacity:.5}
@media(prefers-reduced-motion:reduce){.p50-mk__in{transition:none}}

/* Reach map sits flat on the page background: no card, border or shadow (client, 2 Oct 2026). */
.p50-map--panel,[data-theme="dark"] .p50-map--panel{padding:0;border:0;border-radius:0;background:none;box-shadow:none}

/* White paper panel: looping photo strip from the 2025 workshop, same pattern as the homepage awards strip
   (two copies of the set drift left; pauses on hover; faded edges). */
.p50-reel{position:relative;margin-top:48px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.p50-reel__track{display:flex;width:max-content;animation:p50Reel 80s linear infinite}
.p50-reel:hover .p50-reel__track{animation-play-state:paused}
.p50-reel__ph{flex:none;width:300px;aspect-ratio:3/2;margin:0 16px 0 0;border-radius:var(--r-md,16px);overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.p50-reel__ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease,ease)}
.p50-reel__ph:hover img{transform:scale(1.04)}
@keyframes p50Reel{to{transform:translateX(-50%)}}
html[dir="rtl"] .p50-reel__track{animation-name:p50ReelRtl}
@keyframes p50ReelRtl{to{transform:translateX(50%)}}
@media (max-width:760px){.p50-reel{margin-top:32px}.p50-reel__ph{width:200px;margin-right:12px}}
@media (prefers-reduced-motion:reduce){.p50-reel__track{animation:none}.p50-reel{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}

/* Small flags on phones: a larger invisible tap area (about 36px) so each flag is easy to tap. */
.p50-mk .p50-flag::before{content:"";position:absolute;inset:-10px;border-radius:50%}