{"version":3,"file":"ProjectHeader.B73n_LPL.mjs","names":["c","React.useRef","React.useState","__esmMin","le","init_npm_react_18_3_1","window","_e","de","p","c","init_jsx_runtime","ce","init_ssg_sandbox_shims","addPropertyControls","useRouter","ControlType","init_framer_DymZktPS","init_CmsCaseStudies","init_BackNav","navUp","useLiveCaseStudies","cameUp","init_FoilCard","PearsonShowcase","ZEGO_CSS","ZegoCard","init_ZegoComponents","goToCaseStudy","init_ProlificPromo","applyCms","useFoilRouter","ZegoVideoBar","caseStudyHref","CLIENTS","mountProlificPromo","init_PearsonComponents","init_BackButton","BackButton","useSiteTheme","fix","el","ref","s","h","n","storyParts","main","head","wrap","out","name","ProjectHeader","router","c$1","project","live","stories","x","root","styleRef","prpRef","sb","art","place","tx","br","st","ro","summary","setSummary","story","parts","back","home","r","go","toStory","named","next","target","split","SPLIT","CSS","lead","a","flt","vid","slotVars","d","v","k","comp","cls","i","sid","label","ARROW","DOWN","FIG","EXT","src","init_ProjectHeader"],"sources":["https:/framerusercontent.com/modules/xRRD64MfF6drzfuNJuBv/g2sFA13D7euSROhvLwq9/ProjectHeader.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,useRouter}from\"framer\";import{CLIENTS,caseStudyHref,applyCms,goToCaseStudy,useFoilRouter}from\"https://framerusercontent.com/modules/G3l66uVwxhfAmEaXLsqz/9VMT16dcnJLP494G2xxd/FoilCard.js\";import{useLiveCaseStudies}from\"https://framerusercontent.com/modules/zU36YQ7RXtHs4CkPKslb/uryH04OsavWGEk82q9C9/CmsCaseStudies.js\";import{navUp,cameUp}from\"https://framerusercontent.com/modules/NaVM54w8Ymh9lTyfHrMz/9muDJnVqpvYKVtb4ddx8/BackNav.js\";import BackButton from\"https://framerusercontent.com/modules/xjga9Ml5BLKBedwbmiTJ/KVb8TmOe2AwekVSddrx3/BackButton.js\";import PearsonShowcase from\"https://framerusercontent.com/modules/FLCdAaN7a8w5U5QJyuEt/K8FhjpWtTVHvhpjwMCRI/PearsonComponents.js\";import ZegoCard,{ZEGO_CSS,ZegoVideoBar}from\"https://framerusercontent.com/modules/teNuiySL1XhFQ1EJHWBf/ZKTlOCnBbltB6M52ur3V/ZegoComponents.js\";import{mountProlificPromo}from\"https://framerusercontent.com/modules/IN3ieEgLbiVzBi3IzHVr/BaV2Aqg2c41qRlKcMe6b/ProlificPromo.js\";/*\n * PROJECT HEADER: the top of each project page (/projects/prolific and so on). It is the home page's takeover made\n * into a page: the client's logo and meta, the title, a link to each interactive case study, and the picture\n * collage. On desktop it sits exactly where the takeover sat, so clicking a card turns the preview into this page;\n * on phones the card grows into the picture.\n *\n * The case study links come from the CMS (the hidden \"Mini case studies data\" list on the page, read through\n * CmsCaseStudies.tsx), in the server's HTML too. FoilCard's own lists stand in only where that list isn't on the page. \"Read the full story\" jumps to the written case study:\n * the layer named \"Story\" if there is one, otherwise whatever follows the header. A project with no written story\n * (Perception, for now) leaves that link out.\n */const ARROW='<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"/></svg>';const FIG='<svg class=\"fig\" viewBox=\"0 0 38 57\" aria-hidden=\"true\"><path fill=\"#1abcfe\" d=\"M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z\"/><path fill=\"#0acf83\" d=\"M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z\"/><path fill=\"#ff7262\" d=\"M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z\"/><path fill=\"#f24e1e\" d=\"M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z\"/><path fill=\"#a259ff\" d=\"M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z\"/></svg>';const EXT='<svg class=\"ext\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M7 17 17 7M9 7h8v8\"/></svg>';const DOWN='<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 5v14M6 13l6 6 6-6\"/></svg>';/* Split header: the recording the home page plays */const SPLIT={pearson:{poster:\"https://framerusercontent.com/assets/qJgWNjYeJae3UUsHebrnAJ4qceU.jpg\",label:\"Pearson design system: buttons, charts, switches, a date picker, forms and colour, ending on the documentation\",src:\"https://framerusercontent.com/assets/Qm9v1aiOy5iKXkOeFmPthc1jsGY.mp4\"}};const CSS=`\n.ph { --fg: var(--token-72be4b58-ad30-40d4-9403-e97ffbb2d1b3, #f6f6f6); --sub: var(--token-1103eab9-1384-4e53-8ad9-d060dcee532a, #a1a1a1);\n  --line: color-mix(in srgb, var(--fg) 15%, transparent); --soft: cubic-bezier(.22,.68,.26,1);\n  position: relative; width: 100%; box-sizing: border-box; color: var(--fg); font-family: Inter, sans-serif; overflow: hidden;\n  /* Fills its frame when the frame is taller (the page's Hero frame sets the height); the content sits in the middle.\n     Flex, not height: 100%: Safari resolves the percentage against Framer's 1px fill basis */\n  flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }\n:has(> .ph) { display: flex; flex-direction: column; }\n.ph * { box-sizing: border-box; }\n/* The client's colours, washed over the top of the page like the takeover's */\n.ph-wash { position: absolute; inset: 0 0 auto; height: 47.5rem; pointer-events: none; z-index: 0;\n  background: radial-gradient(60% 70% at 78% 20%, color-mix(in srgb, var(--b1) 24%, transparent), transparent 72%), radial-gradient(50% 60% at 18% 70%, color-mix(in srgb, var(--b2) 15%, transparent), transparent 72%);\n  -webkit-mask: linear-gradient(#000 60%, transparent); mask: linear-gradient(#000 60%, transparent); }\n/* v15: Pearson's header clips nothing, so a piece, shadow, glow or cursor is never cut. Sideways the page's own wrapper (Main) and this header clip with overflow-x: clip, which never makes a scroll container and leaves the vertical axis free. The wash stays inside the header. */\n.ph[data-project=\"pearson\"] { overflow-x: clip; overflow-y: visible; }\n.ph[data-project=\"pearson\"] .ph-wash { max-height: 100%; }\nmain:has(.ph[data-project=\"pearson\"]) { overflow-x: clip; overflow-y: visible; }\n.ph-in { position: relative; z-index: 1; width: 100%; max-width: 81rem; margin: 0 auto; padding: 5rem 3rem 3.5rem; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 3.5rem; min-height: 33.75rem; }\n/* A page, so Back sits top left */\n.ph-back { position: absolute; z-index: 2; left: 2.25rem; top: 1.375rem; }\n@media (max-width: 1199.98px) { .ph-back { left: 1.25rem; top: 1rem; } }\n@media (max-width: 809.98px) { .ph-back { left: .5rem; top: .625rem; } }\n.ph-tx { display: grid; align-content: start; min-width: 0; padding-top: .25rem; }\n.ph-brand { display: flex; align-items: center; gap: .875rem; min-height: 1.625rem; flex-wrap: wrap; }\n.ph-brand img { height: 1.5rem; width: auto; display: block; filter: brightness(0); opacity: .88; }\n@media (prefers-color-scheme: dark) { .ph-brand img { filter: none; opacity: 1; } }\n.ph-brand .rule { width: .0625rem; height: 1rem; background: var(--line); }\n.ph-brand .meta { font-size: .84375rem; color: var(--sub); white-space: nowrap; }\n/* Phones: the meta line sits on its own row under the logo, without the divider */\n@media (max-width: 809.98px) { .ph-brand { row-gap: .625rem; } .ph-brand .rule { display: none; } .ph-brand .meta { flex-basis: 100%; white-space: normal; } }\n.ph-title { margin: 1.375rem 0 0; font: 600 clamp(1.75rem, 2.6vw, 2.25rem)/1.12 Inter, sans-serif; letter-spacing: -0.035em; text-wrap: balance; max-width: 12.53em; color: var(--fg); } /* v9: 12.53em is Inter's 19ch, in a unit that does not change while the fallback font shows, so the title never rewraps on load (it went 3 lines to 2 at about 250ms, a layout shift) */\n.ph-links { margin: 1.625rem 0 0; padding: 0; list-style: none; display: grid; max-width: 30rem; border-top: .0625rem solid var(--line); }\n.ph-links li { border-bottom: .0625rem solid var(--line); }\n.ph-links li.full { border-bottom: 0; }\n.ph-links a { display: grid; grid-template-columns: minmax(0, 1fr) auto 1.125rem; align-items: center; gap: .875rem; min-height: 3rem; padding: .5625rem .125rem; color: var(--fg); text-decoration: none; transition: background .2s; -webkit-tap-highlight-color: transparent; }\n.ph-links .lbl { font: 500 1rem/1.35 Inter, sans-serif; letter-spacing: -0.012em; transition: transform .3s var(--soft); }\n.ph-links .out { font-size: .8125rem; color: var(--sub); white-space: nowrap; font-variant-numeric: tabular-nums; }\n.ph-links svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--sub); transition: transform .3s var(--soft); }\n@media (hover: hover) { .ph-links a:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); } .ph-links a:hover .lbl { transform: translateX(.375rem); } }\n.ph-links a:is(:hover, :focus-visible) svg { color: var(--fg); transform: translateX(.1875rem); }\n.ph-links li.full a:is(:hover, :focus-visible) svg { transform: translateY(.1875rem); }\n.ph-links a:focus-visible { outline: .125rem solid var(--fg); outline-offset: .125rem; }\n.ph-links li.full a { min-height: 2.75rem; }\n.ph-links li.full .lbl { font: 400 .84375rem/1.35 Inter, sans-serif; color: var(--sub); }\n/* v29: the list is a size container: when it is under 440px wide (the narrow text column, phones) each link is the label and the arrow on one row and the outcome under the label on the next, so the label is never squeezed to a word a line by the outcome's nowrap */\n.ph-links { container-type: inline-size; container-name: links; }\n@container links (max-width: 27.49875rem) {\n  .ph-links a { grid-template-columns: minmax(0, 1fr) 1.125rem; row-gap: .125rem; }\n  .ph-links .lbl { grid-column: 1; grid-row: 1; }\n  .ph-links .out { grid-column: 1; grid-row: 2; white-space: normal; }\n  .ph-links .out:empty { display: none; }\n  .ph-links a > :last-child { grid-column: 2; grid-row: 1; }\n}\n/* Perception's Figma Community link: its own call to action, the site's button shape (8px, 48px), opens in a new tab */\n.ph-cta { margin-top: 1.75rem; justify-self: start; display: inline-flex; align-items: center; gap: .875rem; height: 3rem; padding: 0 1.5rem 0 1.375rem; border-radius: .5rem;\n  background: var(--fg); color: #fff; font: 600 1rem/1 Inter, sans-serif; letter-spacing: -0.01em; text-decoration: none; transition: opacity .2s; -webkit-tap-highlight-color: transparent; }\n@media (prefers-color-scheme: dark) { .ph-cta { color: #141414; } }\n.ph-cta .fig { width: .9375rem; height: 1.375rem; flex: none; margin-right: .125rem; }\n.ph-cta .ext { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform .3s var(--soft); }\n@media (hover: hover) { .ph-cta:hover { opacity: .9; } }\n.ph-cta:is(:hover, :focus-visible) .ext { transform: translate(.125rem, -.125rem); }\n.ph-cta:focus-visible { outline: .125rem solid var(--fg); outline-offset: .1875rem; }\n.ph-cta .sr { position: absolute; width: .0625rem; height: .0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n/* The picture collage: the same slots as the takeover */\n.ph-art { position: relative; min-width: 0; min-height: 26.25rem; }\n/* Pearson's live picture (PearsonComponents.tsx). Its stage is the star: from 32px clear of the text column to the right edge of the content, and (v15) from the top of the text column's content (the logo row) down to the bottom of the text column, never closer than 24px to the hero's bottom edge.\n   --ph-at / --ph-ab are measured from the header when it mounts and when it resizes; the fallbacks are the header's padding. The pause button sits at the stage's bottom right, on the content's right edge. Nothing in the box or the stage clips.\n   The grid column stays as it is (it sets the hero's height); the stage is lifted out of it and measured from the hero itself, so the content block is no longer positioned (the text column carries the stacking instead). */\n.ph-stage { position: absolute; inset: 0; --pb-b: .5rem; --pb-r: .75rem; --pcs-gl: var(--ph-gl, 0rem); --pcs-el: 0rem; --pcs-er: 0rem; }\n/* v17: the montage's edge fade is the viewport's (as the carousel's): the stage box at 810 to 1199 sits well inside the viewport on the left and 32px in on the right */\n@media (min-width: 810px) { .ph-stage { --pcs-el: 100vw; --pcs-er: 2rem; } }\n@media (min-width: 1200px) { .ph-stage { --pcs-gl: var(--ph-gl, max(0rem, calc((min(100vw, 81rem) - 9.5rem) * .9 / 1.9 - 30rem))); } }\n@media (max-width: 809.98px) { .ph[data-project=\"pearson\"] .ph-art { margin-bottom: 1.5rem; } }\n@media (min-width: 810px) {\n  .ph[data-project=\"pearson\"] .ph-in { position: static; }\n  .ph[data-project=\"pearson\"] .ph-tx { position: relative; z-index: 1; }\n  .ph[data-project=\"pearson\"] .ph-art { position: static; }\n  .ph-stage { z-index: 0; inset: var(--ph-at, 4.75rem) 2rem max(1.5rem, var(--ph-ab, 3rem)) calc(2rem + min(30rem, (100% - 4rem - 2.25rem) * .9 / 1.9) + 2rem); --pb-b: 0rem; --pb-r: 0rem; }\n}\n/* v23: at 1200 and up the stage hangs off .ph-in (the content block), not off the header, so its top and bottom are CSS and right before any script runs: the top is the block's padding (80px) plus the text column's own 4px, the bottom its 56px padding (the text column fills the block's height). v14 measured both in JS from the header (the header centres the block, so the measure was 172px away from the fallback until hydration: a layout shift). The guide --ph-gl has a CSS default too: the text column's right edge past the stage's left (the column is (block - 152px) * .9 / 1.9 wide, the stage starts 30rem in), which JS then only confirms. */\n@media (min-width: 1200px) {\n  .ph[data-project=\"pearson\"] .ph-in { position: relative; }\n  .ph-stage { inset: 5.25rem 3rem 3.5rem calc(3rem + min(30rem, (100% - 9.5rem) * .9 / 1.9) + 2rem); --pcs-gl: var(--ph-gl, max(0rem, calc((min(100vw, 81rem) - 9.5rem) * .9 / 1.9 - 30rem))); }\n}\n/* A stack of separate screens (Perception's art.stack): back to front, each a step bigger, centred on one line,\n   turned slightly away from the text, and brought in one after another. The stack fills the same box as the other\n   clients' pictures (.ph-hero, .ph-sa, .ph-sb): from the box's left edge to its right, top at 4% and bottom at 100%;\n   on phones inset as they are there (4% left, 3% right, 4% top, 2% bottom). The screens are 800 x 1200; when the box\n   is too short for the whole screen, it shows the top of each (as the other heroes crop with object-position: left top).\n   The perspective scales with the screen, so the turn takes the same share off the left edge at every width (4.4%) */\n/* A size container needs a set height (min-height leaves its query height at 0) */\n.ph-stack { container-type: size; height: 26.25rem; --sl: 0cqw; --sr: 0cqw; --st: 4cqh; --sbt: 0cqh; }\n.ph-st { --u: calc((100cqw - var(--sl) - var(--sr)) / 1.802); --w: calc(var(--u) * var(--s));\n  --h: min(calc(var(--w) * 1.5), calc((100cqh - var(--st) - var(--sbt)) * var(--s)));\n  position: absolute; width: var(--w); height: var(--h); top: calc((100cqh + var(--st) - var(--sbt)) / 2 - var(--h) / 2);\n  left: calc(var(--sl) + var(--u) * var(--o)); z-index: var(--z); }\n.ph-st > div { position: absolute; inset: 0; border-radius: calc(var(--w) * .03); overflow: hidden;\n  transform: perspective(calc(var(--u) * 5.7)) rotateY(-10deg); transform-origin: 100% 50%;\n  box-shadow: 0 2.75rem 5rem -1.75rem light-dark(rgb(0 0 0 / .22), rgb(0 0 0 / .8)), 0 .875rem 1.75rem -.875rem light-dark(rgb(0 0 0 / .14), rgb(0 0 0 / .55)); }\n.ph-st img { display: block; width: 100%; height: auto; }\n/* The home screen has its own outline; keep it round the cropped bottom too */\n.ph-st2 > div::after { content: \"\"; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 calc(var(--w) * .0025) rgb(47 42 76); pointer-events: none; }\n.ph-st0 { --s: .846; --o: .956; --z: 1; }\n.ph-st1 { --s: .923; --o: .475; --z: 2; }\n.ph-st2 { --s: 1; --o: -.044; --z: 3; }\n.ph-slot { position: absolute; }\n/* The render is 4:3 with empty (transparent) margins round the action: the box's full width, in the flow */\n.ph-flt { position: relative; width: 100%; aspect-ratio: 4 / 3; pointer-events: none; }\n.ph-art.zgv-art.ph-float { height: auto; min-height: 0; container-type: normal; padding-bottom: 4rem; } /* the box is the video's height plus its control's */\n.ph-flt video { display: block; width: 100%; height: 100%; }\n/* A floating video (Perception's art.float): its control at the box's foot, left-aligned; on phones the video is 4:3 in the flow */\n.ph-art.zgv-art.ph-float .zgv-sb { top: auto; bottom: 0; left: 1rem; }\n@media (max-width: 809.98px) { .ph-art.zgv-art.ph-float .zgv-sb { left: 1rem; width: calc(100% - 1rem); } }\n.ph-hero { left: 0; top: 4%; width: 84%; height: 80%; z-index: 1; }\n.ph-prp-panel .prp { --prp-sbh: 0rem !important; --prp-fit: .8; }\n@media (max-width: 809.98px) { .ph-art:has(.ph-prp-panel) .ph-sa { display: none; } }\n.ph-prp-sb { right: auto !important; bottom: auto !important; --prp-ink: var(--pb-c, var(--token-72be4b58-ad30-40d4-9403-e97ffbb2d1b3, #f6f6f6)); }\n/* The two small pictures take a client's own placement (FoilCard's art slot) from 810px up, as in the takeover */\n.ph-sa { right: var(--s-right, 0); left: var(--s-left, auto); top: var(--s-top, 16%); bottom: var(--s-bottom, auto); width: var(--s-width, 31%); height: var(--s-height, 34%); z-index: 3; }\n/* A video hero (Zego): its player control under the video card, left-aligned with it, as Pearson's scrubber is under its card. 1200 and up: 3.8px below the card, 268 x 56, scaled with the card\n   (--zs: the card's width over Pearson's 551.7). Below 1200: 16px under the card at full size, with room kept under the box so the heading is pushed down, never overlapped.\n   The Driver Score sits at the card's top right, over its corner, at every width. */\n.ph-art.zgv-art { container-type: inline-size; --zs: calc(84cqw / 551.7); --zk: .0625rem; }\n.ph-art.zgv-art .zgv-sb { left: 0; top: calc(4% + 84cqw * 9 / 16 + .5rem); width: 84%; }\n/* v6: the video card is the video's own 16:9 (1280 x 720), so the whole frame shows: same width and left edge, the height follows. The Driver Score keeps its place on the card's top right (7.5% of the card's height down, 65% of it tall, as on the old 80% card) */\n@media (min-width: 810px) {\n  .ph-art.zgv-art .ph-hero { height: calc(84cqw * 9 / 16); }\n  .ph-art.zgv-art .ph-sa { top: calc(4% + 84cqw * 9 / 16 * .075); height: calc(84cqw * 9 / 16 * .65); }\n}\n/* v9: 1200 and up, the video card's size comes from the room it has, in pure CSS (no script), as in the takeover. The header is the window's height (100vh), its content block centred with 80px above and 56px below, so the art box (a size container) is the window's height less those 136px, never under 360px, and never taller than a 1.28:1 card and its row need (the art column is (min(100vw, 1296px) - 152px) / 1.9 wide; the card 84% of it).\n   --zA: the allotted width (84%). --zB: from the card's top (4% down) to the box's bottom. --zw: the allotted width, unless even a 16:9 card and its row would not fit --zB, then the 16:9 card scales down.\n   --zh: clamp(16:9, the room left, 1.28:1), so a tall window gets the 1.28:1 crop and a short one opens up towards 16:9. The control row hangs 3.8 units under the card, flush left; the Driver Score is placed and sized in units of the card's width (its right edge on the box's right edge at full width). No trig (WebKit). */\n@media (min-width: 1200px) { .ph-art.zgv-art { container-type: size; min-height: 0; height: clamp(22.5rem, calc(100svh - 8.5rem), calc((min(100vw, 81rem) - 9.5rem) * .4097 + .0625rem));\n    --zA: 84cqw; --zB: 96cqh;\n    --zw: min(var(--zA), max(calc(var(--zB) / .67089), calc((var(--zB) - 3.7375rem) / .5625)));\n    --zk: min(.0625rem, calc(var(--zw) / 551.7));\n    --zh: clamp(calc(var(--zw) * .5625), calc(var(--zB) - 59.8 * var(--zk)), calc(var(--zw) / 1.28)); }\n  .ph-art.zgv-art .ph-hero { width: var(--zw); height: var(--zh); }\n  .ph-art.zgv-art .ph-sa { right: auto; left: calc(var(--zw) * .7619); top: calc(4% + var(--zw) * .14154); width: calc(var(--zw) * .42845); height: calc(var(--zw) * .34276); }\n  .ph-art.zgv-art .zgv-sb { top: calc(4% + var(--zh) + 3.8 * var(--zk)); width: calc(268 * var(--zk)); } }\n@media (max-width: 809.98px) {\n  /* phones: the 16:9 card is in flow, so the box is exactly the card plus the control row under it (8px gap, 56 tall) */\n  .ph-art.zgv-art { --zs: calc(92cqw / 551.7); height: auto; padding-bottom: 4rem; margin-bottom: 0; }\n  .ph-art.zgv-art .ph-hero { position: relative; left: auto; top: auto; margin: 2.5% 0 0 4%; width: 92%; height: auto; aspect-ratio: 16 / 9; }\n  .ph-art.zgv-art .zgv-sb { left: 4%; top: auto; bottom: 0; width: 92%; }\n  .ph-art.zgv-art .ph-sa { right: 2%; top: 0; width: 38%; height: 54%; }\n}\n.ph-sb { left: var(--s-left, 8%); right: var(--s-right, auto); bottom: var(--s-bottom, 0); top: var(--s-top, auto); width: var(--s-width, 38%); height: var(--s-height, 30%); z-index: 2; }\n.ph-win { position: absolute; inset: 0; border-radius: .75rem; overflow: hidden; background: color-mix(in srgb, var(--fg) 8%, #1c1c1c); display: grid; grid-template-rows: 1.625rem minmax(0, 1fr);\n  box-shadow: 0 0 0 .0625rem light-dark(transparent, var(--line)), 0 3.75rem 5.625rem -3.125rem light-dark(rgb(0 0 0 / .25), rgb(0 0 0 / .9)), 0 1.875rem 3.75rem -2.5rem color-mix(in srgb, var(--b1) 40%, transparent);\n  transform: perspective(112.5rem) rotateY(-5deg) rotateX(1.5deg); transform-origin: 30% 50%; }\n.ph-win .bar { display: flex; align-items: center; gap: .375rem; padding: 0 .75rem; border-bottom: .0625rem solid var(--line); }\n.ph-win .bar i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--line); }\n.ph-win img, .ph-phone img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }\n.ph-vid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }\n.ph-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }\n.ph-panel { position: absolute; inset: 0; border-radius: 1.125rem; overflow: hidden; display: grid; place-items: center;\n  background: radial-gradient(70% 90% at 30% 20%, color-mix(in srgb, var(--b1) 46%, transparent), transparent 70%), radial-gradient(70% 80% at 80% 90%, color-mix(in srgb, var(--b2) 34%, transparent), transparent 70%), color-mix(in srgb, var(--fg) 6%, #161616);\n  box-shadow: 0 0 0 .0625rem light-dark(transparent, var(--line)), 0 3.75rem 5.625rem -3.125rem light-dark(rgb(0 0 0 / .25), rgb(0 0 0 / .9)); }\n.ph-phone { position: absolute; top: 5%; left: 50%; height: 90%; aspect-ratio: 9 / 18.5; border-radius: 1.875rem; padding: .4375rem; background: #0c0d10; box-shadow: 0 0 0 .0625rem rgb(255 255 255 / .12), 0 2.5rem 4.375rem -1.875rem light-dark(rgb(0 0 0 / .22), rgb(0 0 0 / .8)); transform: translateX(-50%) rotate(-3deg); }\n.ph-phone img { border-radius: 1.5rem; object-position: top center; background: #fff; }\n.ph-led img { height: 2.875rem; width: auto; max-width: 100%; object-fit: contain; }\n.ph-comp { position: absolute; inset: 0; border-radius: .875rem; overflow: hidden; background: var(--cbg, #fff); box-shadow: 0 0 0 .0625rem rgb(0 0 0 / .06), 0 1.875rem 3.125rem -1.5rem light-dark(rgb(0 0 0 / .25), rgb(0 0 0 / .9)); }\n.ph-comp img { width: 100%; height: 100%; display: block; object-fit: contain; padding: 8%; }\n.ph-comp.cover img { object-fit: cover; object-position: left top; padding: 0; }\n.ph-comp.bare { background: none; box-shadow: none; overflow: visible; border-radius: 0; }\n.ph-comp.bare img { padding: 0; object-fit: contain; filter: drop-shadow(0 .0625rem .0625rem rgb(16 18 40 / .12)) drop-shadow(0 .125rem .1875rem rgb(16 18 40 / .12)) drop-shadow(0 .375rem .625rem rgb(16 18 40 / .14)) drop-shadow(0 .875rem 1.5rem rgb(16 18 40 / .18)) drop-shadow(0 1.75rem 3rem rgb(16 18 40 / .24)); }\n/* Entrance: each part settles in turn, as in the takeover */\n.ph .p { animation: ph-in .8s var(--soft) both; animation-delay: calc(110ms + var(--i, 0) * 70ms); }\n@keyframes ph-in { from { opacity: 0; transform: translateY(.5rem) scale(.988); filter: blur(.3125rem); } }\n@media (prefers-reduced-motion: reduce) { .ph .p { animation: none; } }\n/* Tablet: narrower columns */\n@media (max-width: 1199.98px) { .ph-in { padding: 4.5rem 2rem 3rem; gap: 2.25rem; min-height: 0; } .ph-art { min-height: 22.5rem; } .ph-stack { height: 22.5rem; } }\n/* Phones: one column. Logo and meta, the picture, then the title and the links */\n@media (max-width: 809.98px) {\n  .ph-in { grid-template-columns: minmax(0, 1fr); padding: 4rem 1.25rem 2.25rem; gap: 0; }\n  .ph-tx { display: contents; }\n  .ph-brand { order: 1; } .ph-art { order: 2; min-height: 0; height: clamp(13.75rem, 62vw, 21.25rem); margin: 1.375rem -1.25rem 0; }\n  .ph[data-project=\"pearson\"] .ph-art { height: calc(min(100vw - 2rem, 31.3125rem) * 422 / 358 + 2.875rem); } /* v17: the montage (M4) is 422 high at 390 wide, and the pause button sits in a row under it */\n  .ph-title { order: 3; font-size: 1.75rem; } .ph-links { order: 4; max-width: none; } .ph-cta { order: 5; }\n  .ph-hero { left: 4%; top: 4%; width: 92%; height: 76%; }\n  .ph-stack { --sl: 4cqw; --sr: 3cqw; --st: 4cqh; --sbt: 2cqh; }\n  /* Phones keep the original crop (each screen cut to 800 x 1095) at the box's height, with the stack centred\n     between the insets rather than pinned to the left */\n  .ph-st { --u: min(calc((100cqh - var(--st) - var(--sbt)) / 1.369), calc((100cqw - var(--sl) - var(--sr)) / 1.802)); --h: calc(var(--w) * 1.369);\n    left: calc(50cqw + (var(--sl) - var(--sr)) / 2 - var(--u) * .901 + var(--u) * var(--o)); }\n  .ph-sa { right: 3%; left: auto; top: 30%; bottom: auto; width: 34%; height: 46%; } .ph-sb { left: 7%; right: auto; bottom: 2%; top: auto; width: 42%; height: 40%; }\n  .ph-wash { height: 40rem; }\n}\n/* v20: below the desktop breakpoint (1200) Pearson's header is the phone layout, tablets included: logo and meta, the art box, then the heading, links and button, in one column.\n   The art box is a flow item. Its height is the stage's side plus the reserved row (--pcs-row: the 16px gap, the 40px scrubber and 22px) so the scrubber sits inside the box and whatever follows (the heading, however long, and the list, however many links) is pushed below it by the page's own flow. Nothing is positioned from the text's height or the box's. */\n@media (max-width: 1199.98px) {\n  .ph[data-project=\"pearson\"] .ph-in { position: relative; grid-template-columns: minmax(0, 1fr); padding: 4.5rem var(--ph-px) 3rem; gap: 0; min-height: 0; }\n  .ph[data-project=\"pearson\"] .ph-tx { display: contents; position: static; z-index: auto; }\n  .ph[data-project=\"pearson\"] .ph-brand { order: 1; }\n  .ph[data-project=\"pearson\"] .ph-title { order: 3; font-size: 1.75rem; }\n  .ph[data-project=\"pearson\"] .ph-links { order: 4; max-width: 30rem; }\n  .ph[data-project=\"pearson\"] .ph-cta { order: 5; }\n  .ph[data-project=\"pearson\"] .ph-art { --pcs-row: 4.875rem; position: relative; order: 2; min-height: 0; margin: 1.375rem calc(var(--ph-px) * -1) 1.5rem; height: calc(min(100vw, 35rem) + var(--pcs-row)); }\n  .ph[data-project=\"pearson\"] .ph-stage { z-index: auto; inset: 0; --pb-b: .5rem; --pb-r: .75rem; --pcs-el: 0rem; --pcs-er: 0rem; --pcs-gl: 0rem; }\n}\n@media (max-width: 809.98px) { .ph[data-project=\"pearson\"] { --ph-px: 1.25rem; } .ph[data-project=\"pearson\"] .ph-in { padding: 4rem var(--ph-px) 2.25rem; } .ph[data-project=\"pearson\"] .ph-links { max-width: none; } }\n/* v29: Tablet (810 to 1199). The header is a size container (ph), so what follows is sized by its own width, not the window's (here it is the window's width, with no sidebar).\n   --ph-px: the content's inline inset, the page body's below the header (a centred 864px column, 48px at least). Pearson's inset calcs read it too. */\n@media (min-width: 810px) and (max-width: 1199.98px) {\n  .ph { container-type: inline-size; container-name: ph; --ph-px: max(3rem, (100cqw - 54rem) / 2); }\n  .ph-in { padding-inline: var(--ph-px); }\n  /* v31: the header now fits its content here (it was a full window tall), so the wash is never taller than it: its own bottom fade (the mask on .ph-wash) then ends at the header's bottom edge instead of being cut by overflow: hidden, as Pearson's already does */\n  .ph-wash { max-height: 100%; }\n  /* v30: Back sits on the same inset (its top stays) */\n  .ph-back { left: var(--ph-px); }\n  /* v30: the text column is too narrow here for the logo, divider and meta on one row (Pearson's 383px: 105 + 29 + about 270px), so, as on phones, the meta takes its own row and the divider goes */\n  .ph-brand { row-gap: .625rem; }\n  .ph-brand .rule { display: none; }\n  .ph-brand .meta { flex-basis: 100%; white-space: normal; }\n  /* Pearson under 960: one column. Title, links and picture share the column's edges; the picture spans it up to 720px, left-aligned with the text (the art box no longer bleeds to the window's edges). Its height follows the column (cqw, not vw) */\n  @container ph (width < 60rem) {\n    .ph[data-project=\"pearson\"] .ph-title, .ph[data-project=\"pearson\"] .ph-links { max-width: none; }\n    .ph[data-project=\"pearson\"] .ph-brand { row-gap: .875rem; }\n    .ph[data-project=\"pearson\"] .ph-brand .rule { display: block; }\n    .ph[data-project=\"pearson\"] .ph-brand .meta { flex-basis: auto; white-space: nowrap; }\n    .ph[data-project=\"pearson\"] .ph-art { margin: 1.375rem 0 1.5rem; max-width: 45rem; height: calc(min(100cqw - 2 * var(--ph-px), 35rem) + var(--pcs-row)); }\n  }\n  /* Pearson at 960 and up: the desktop's two columns (text left, picture right) in the same 864px column. The stage hangs off .ph-in as at 1200, its left edge the text column's right edge plus 32px (the desktop calc, with the inset and the 56px gap named); top and bottom are the block's 80px / 56px padding plus the text column's 4px, as there. The picture inside is the component's own sub-1200 square; its wide form is gated on the window at 1200 */\n  @container ph (min-width: 60rem) {\n    .ph[data-project=\"pearson\"] .ph-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); padding: 5rem var(--ph-px) 3.5rem; gap: 3.5rem; min-height: 33.75rem; }\n    .ph[data-project=\"pearson\"] .ph-tx { display: grid; position: relative; z-index: 1; }\n    .ph[data-project=\"pearson\"] .ph-title { font-size: clamp(1.75rem, 2.6cqw, 2.25rem); }\n    .ph[data-project=\"pearson\"] .ph-art { position: static; min-height: 26.25rem; margin: 0; height: auto; }\n    .ph[data-project=\"pearson\"] .ph-stage { z-index: 0; inset: 5.25rem var(--ph-px) 3.5rem calc(var(--ph-px) + min(30rem, (100% - 2 * var(--ph-px) - 3.5rem) * .9 / 1.9) + 2rem); }\n  }\n}\n/* Header layout \"Split\": title left, recording right, the interactive case studies as cards below. Same column as the page body */\n.phs-in { position: relative; z-index: 1; width: 100%; max-width: 90rem; margin: 0 auto; padding: 5.5rem 4rem 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: center; }\n.phs-tx { grid-column: span 5; min-width: 0; }\n.phs-tx .ph-title { font-size: clamp(2.5rem, 3.6vw, 3.25rem); line-height: 1.08; margin-top: 2.5rem; max-width: none; }\n/* Desktop layouts: the wash runs past the header and fades out on its own mask, then scrolls away with the page, as on the homepage */\n.ph[data-head] { overflow: clip visible; }\n.ph[data-head] .ph-wash { max-height: none; }\n.phs-lead { margin: 1.5rem 0 0; font-size: 1.125rem; line-height: 1.75rem; color: var(--sub); text-wrap: pretty; }\n.phs-art { grid-column: span 7; position: relative; aspect-ratio: 16 / 9; border-radius: 1rem; overflow: hidden; background: #2c2c30; min-width: 0; }\n/* Split with a live artwork (Zego): the same grid as the recording, with room for the piece that hangs off the card */\n.phs-in > .ph-art { grid-column: span 7; }\n.phs-in > .ph-art.zgv-art { min-height: 0; height: auto; aspect-ratio: 16 / 9; }\n.phs-art video { display: block; width: 100%; height: 100%; object-fit: cover; }\n/* CarFinance 247: the client's own logo (coral mark, dark word), a light-grey-word copy for dark mode, kept in colour. The Split layout stacks under 1200px, so the title shows once whatever the breakpoint. */\n.ph-brand img.ph-logo-d { display: none; }\n.ph[data-project=\"carfinance\"] .ph-brand img { filter: none; opacity: 1; }\n@media (prefers-color-scheme: dark) { .ph-brand img.ph-logo-l { display: none; } .ph-brand img.ph-logo-d { display: block; } }\n.ph[data-project=\"carfinance\"] .phs-tx .ph-title { font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.12; }\n.ph[data-project=\"carfinance\"] .phs-in > .ph-art { min-height: 0; height: auto; aspect-ratio: 1830 / 928; }\n.ph[data-project=\"carfinance\"] .ph-hero { left: 0; top: 0; width: 100%; height: 100%; }\n.ph[data-project=\"carfinance\"] .ph-panel { background: #FEF0ED; }\n@media (max-width: 1199.98px) {\n  .ph[data-project=\"carfinance\"] .phs-in { display: block; padding: 4.5rem 2rem 2rem; }\n  .ph[data-project=\"carfinance\"] .phs-in > .ph-art { margin: 2rem 0 0; }\n}\n@media (max-width: 809.98px) {\n  .ph[data-project=\"carfinance\"] .phs-in { padding: 4rem 1.25rem 1.5rem; }\n  .ph[data-project=\"carfinance\"] .phs-in > .ph-art { margin: 1.5rem 0 0; }\n}\n`;/* The site's light/dark toggle rewrites \"prefers-color-scheme\" in style tags when it runs; this header's style tag can\n   mount after that (a page reached through the router), so it applies the same rule: the stored toggle against the OS */function useSiteTheme(ref){React.useLayoutEffect(()=>{const fix=()=>{let t=null;try{t=localStorage.getItem(\"currentToggleState\");}catch{}const el=ref.current;if(!el||t!==\"dark\"&&t!==\"light\")return;const s=t===(window.matchMedia(\"(prefers-color-scheme: dark)\").matches?\"dark\":\"light\")?\"dark\":\"light\";const h=el.innerHTML,n=h.replace(/prefers-color-scheme:\\s?\\w+/g,`prefers-color-scheme: ${s}`);if(n!==h)el.innerHTML=n;};fix();window.addEventListener(\"themeChange\",fix);return()=>window.removeEventListener(\"themeChange\",fix);});}/* The written story: everything after the header in the page's Main frame, apart from the footer */function storyParts(head){const main=head?.closest('[data-framer-name=\"Main\"]');if(!head||!main)return[];let wrap=head;while(wrap&&wrap.parentElement!==main)wrap=wrap.parentElement;const out=[];for(let n=wrap?.nextElementSibling;n;n=n.nextElementSibling){const name=n.getAttribute(\"data-framer-name\")||\"\";if(/footer/i.test(name)||n.querySelector('[data-framer-name^=\"Footer\"]'))continue;out.push(n);}return out;}export default function ProjectHeader({project=\"prolific\",story=true,head=\"Classic\",lead=\"\"}){useFoilRouter();const router=useRouter?.();const c=CLIENTS[project];/* The CMS list (drafts left out, the collection's order and words); FoilCard's list only when there's no CMS data */const live=useLiveCaseStudies(project);const stories=live?live.map(x=>[x.id,x.title,x.outcome]):c?.stories??[];const root=React.useRef(null),styleRef=React.useRef(null);/* Prolific: its promo (ProlificPromo.tsx), live, framed in the hero panel, its control moved under the frame like Zego's */const prpRef=React.useRef(null);React.useEffect(()=>{const el=prpRef.current;if(!el)return;const h=mountProlificPromo(el,{autoplay:true,controls:true});const sb=el.querySelector(\".prp-sb\"),art=el.closest(\".ph-art\");if(sb&&art){sb.classList.add(\"ph-prp-sb\",\"zgv-sb\");art.appendChild(sb);art.removeAttribute(\"aria-hidden\");}return()=>{h.destroy();sb?.remove();};},[project]);useSiteTheme(styleRef);/* Pearson's picture runs from the top of the text column's content (the logo row) to the bottom of the text column: measured here (offsets ignore the entrance transforms), set as --ph-at / --ph-ab on the header */React.useLayoutEffect(()=>{const head=root.current;if(project!==\"pearson\"||!head)return;const place=()=>{const tx=head.querySelector(\".ph-tx\"),br=head.querySelector(\".ph-brand\");if(!tx||!br||getComputedStyle(tx).display===\"contents\"){head.style.removeProperty(\"--ph-gl\");return;}const st=head.querySelector(\".ph-stage\");/* v16: the text column's guide (its right edge + 32) as a distance from the stage box's left edge: the wide stage starts 43px right of it */if(st)head.style.setProperty(\"--ph-gl\",`${Math.max(0,tx.offsetLeft+tx.offsetWidth+32-st.offsetLeft)}px`);};place();const ro=typeof ResizeObserver!==\"undefined\"?new ResizeObserver(place):null;ro?.observe(head);const tx=head.querySelector(\".ph-tx\");if(tx)ro?.observe(tx);document.fonts?.ready?.then(place);return()=>ro?.disconnect();},[project]);React.useEffect(()=>{applyCms();},[project]);/* Arriving from a home page card: the summary only. The written story stays hidden until \"Read the full story\" */const[summary,setSummary]=React.useState(false);React.useLayoutEffect(()=>{let s=null;try{s=sessionStorage.getItem(\"ph-summary\");}catch{}if(s!==project||!story)return;const parts=storyParts(root.current);if(!parts.length)return;parts.forEach(n=>{n.style.setProperty(\"display\",\"none\",\"important\");});setSummary(true);return()=>parts.forEach(n=>{n.style.removeProperty(\"display\");});},[project,story]);if(!c)return null;/* Back: the previous page when there is one in this site, otherwise the home page (also when this page was\n       reached by going up from a case study opened from a shared link, so Back doesn't return to it) */const back=e=>{if(e.button||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey)return;if(router?.isInitialNavigation===false&&!cameUp()){e.preventDefault();history.back();return;}const home=router?.routes&&Object.entries(router.routes).find(([,r])=>r?.path===\"/\");if(home&&router.navigate){e.preventDefault();navUp();router.navigate(home[0],\"\");}};const go=e=>{if(e.defaultPrevented||e.button||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey)return;if(goToCaseStudy(e.currentTarget.getAttribute(\"href\")||\"\"))e.preventDefault();};const toStory=e=>{const head=root.current;if(!head)return;if(summary){storyParts(head).forEach(n=>{n.style.removeProperty(\"display\");});setSummary(false);try{sessionStorage.removeItem(\"ph-summary\");}catch{}}const named=document.querySelector('[data-framer-name=\"Story\"]');let next=head;while(next&&!next.nextElementSibling&&next.parentElement)next=next.parentElement;const target=named||(next?.nextElementSibling);if(!target)return;e.preventDefault();target.scrollIntoView({behavior:window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches?\"auto\":\"smooth\",block:\"start\"});};const split=head===\"Split\"?SPLIT[project]:null;if(split)return /*#__PURE__*/_jsxs(\"header\",{ref:root,className:\"ph\",\"data-project\":project,\"data-head\":\"split\",style:{[\"--b1\"]:c.b1,[\"--b2\"]:c.b2},children:[/*#__PURE__*/_jsx(\"style\",{ref:styleRef,dangerouslySetInnerHTML:{__html:CSS+ZEGO_CSS}}),/*#__PURE__*/_jsx(\"div\",{className:\"ph-wash\",\"aria-hidden\":\"true\"}),/*#__PURE__*/_jsx(BackButton,{className:\"ph-back\",variant:\"label\",link:\"/\",onClick:back}),/*#__PURE__*/_jsxs(\"div\",{className:\"phs-in\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"phs-tx\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"ph-brand p\",style:{[\"--i\"]:0},children:[/*#__PURE__*/_jsx(\"img\",{className:c.logoDark?\"ph-logo-l\":undefined,src:c.logo,alt:c.name}),c.logoDark&&/*#__PURE__*/_jsx(\"img\",{className:\"ph-logo-d\",src:c.logoDark,alt:c.name}),/*#__PURE__*/_jsx(\"span\",{className:\"rule\",\"aria-hidden\":\"true\"}),/*#__PURE__*/_jsx(\"span\",{className:\"meta\",children:c.meta})]}),/*#__PURE__*/_jsx(\"h1\",{className:\"ph-title p\",style:{[\"--i\"]:1},children:c.title}),lead.trim()&&/*#__PURE__*/_jsx(\"p\",{className:\"phs-lead p\",style:{[\"--i\"]:1.5},children:lead})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"phs-art zgv-art p\",style:{[\"--i\"]:1,viewTransitionName:\"ph-art\"},children:[/*#__PURE__*/_jsx(\"video\",{src:split.src,poster:split.poster,\"aria-label\":split.label,muted:true,loop:true,playsInline:true,preload:\"none\"}),/*#__PURE__*/_jsx(ZegoVideoBar,{cls:\"p\",style:\"--i:2\"})]})]})]});const a=c.art;const flt=!!a?.float&&project!==\"pearson\";const vid=!flt&&!a?.stack&&a?.hero?.kind===\"video\"&&project!==\"pearson\";/* \"top: 4%; width: 31%\" → --s-top, --s-width, which the slots use from 810px up */const slotVars=s=>Object.fromEntries((s||\"\").split(\";\").map(d=>d.split(\":\").map(v=>v.trim())).filter(d=>d.length===2&&d[0]).map(([k,v])=>[`--s-${k}`,v]));// The two side panels are optional: an artwork can be the hero image alone\nconst comp=(x,cls,i)=>!x?null:x.live?/*#__PURE__*/_jsx(\"div\",{className:`ph-slot ${cls} p zg-slot`,style:{[\"--i\"]:i,...slotVars(x.slot)},children:/*#__PURE__*/_jsx(ZegoCard,{})}):/*#__PURE__*/_jsx(\"div\",{className:`ph-slot ${cls} p`,style:{[\"--i\"]:i,...slotVars(x.slot)},children:/*#__PURE__*/_jsx(\"div\",{className:`ph-comp${x.cover?\" cover\":\"\"}${x.bare?\" bare\":\"\"}`,style:{[\"--cbg\"]:x.bg||\"#fff\"},children:/*#__PURE__*/_jsx(\"img\",{src:x.src,alt:\"\",decoding:\"async\"})})});return /*#__PURE__*/_jsxs(\"header\",{ref:root,className:\"ph\",\"data-project\":project,\"data-head\":head===\"Split\"?\"split\":undefined,style:{[\"--b1\"]:c.b1,[\"--b2\"]:c.b2},children:[/*#__PURE__*/_jsx(\"style\",{ref:styleRef,dangerouslySetInnerHTML:{__html:CSS+ZEGO_CSS}}),/*#__PURE__*/_jsx(\"div\",{className:\"ph-wash\",\"aria-hidden\":\"true\"}),/*#__PURE__*/_jsx(BackButton,{className:\"ph-back\",variant:\"label\",link:\"/\",onClick:back}),/*#__PURE__*/_jsxs(\"div\",{className:head===\"Split\"?\"phs-in\":\"ph-in\",children:[/*#__PURE__*/_jsxs(\"div\",{className:head===\"Split\"?\"phs-tx\":\"ph-tx\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"ph-brand p\",style:{[\"--i\"]:0},children:[/*#__PURE__*/_jsx(\"img\",{className:c.logoDark?\"ph-logo-l\":undefined,src:c.logo,alt:c.name}),c.logoDark&&/*#__PURE__*/_jsx(\"img\",{className:\"ph-logo-d\",src:c.logoDark,alt:c.name}),/*#__PURE__*/_jsx(\"span\",{className:\"rule\",\"aria-hidden\":\"true\"}),/*#__PURE__*/_jsx(\"span\",{className:\"meta\",children:c.meta})]}),/*#__PURE__*/_jsx(\"h1\",{className:\"ph-title p\",style:{[\"--i\"]:1},children:c.title}),head===\"Split\"?lead.trim()&&/*#__PURE__*/_jsx(\"p\",{className:\"phs-lead p\",style:{[\"--i\"]:1.5},children:lead}):/*#__PURE__*/_jsxs(\"ul\",{className:\"ph-links\",\"aria-label\":`${c.name} interactive case studies`,children:[stories.map(([sid,label,out],i)=>/*#__PURE__*/_jsx(\"li\",{className:\"p\",style:{[\"--i\"]:2+i*.5},children:/*#__PURE__*/_jsxs(\"a\",{href:caseStudyHref(project,sid),\"data-case-study\":\"\",onClick:go,children:[/*#__PURE__*/_jsx(\"span\",{className:\"lbl\",children:label}),/*#__PURE__*/_jsx(\"span\",{className:\"out\",children:out}),/*#__PURE__*/_jsx(\"span\",{dangerouslySetInnerHTML:{__html:ARROW}})]})},sid)),story&&/*#__PURE__*/_jsx(\"li\",{className:\"full p\",style:{[\"--i\"]:2+stories.length*.5},children:/*#__PURE__*/_jsxs(\"a\",{href:\"#story\",onClick:toStory,children:[/*#__PURE__*/_jsx(\"span\",{className:\"lbl\",children:\"Read the full story\"}),/*#__PURE__*/_jsx(\"span\",{className:\"out\"}),/*#__PURE__*/_jsx(\"span\",{dangerouslySetInnerHTML:{__html:DOWN}})]})})]}),c.plugin&&/*#__PURE__*/_jsxs(\"a\",{className:\"ph-cta p\",style:{[\"--i\"]:3+stories.length*.5},href:c.plugin.href,target:\"_blank\",rel:\"noopener\",children:[/*#__PURE__*/_jsx(\"span\",{dangerouslySetInnerHTML:{__html:FIG},style:{display:\"contents\"}}),/*#__PURE__*/_jsx(\"span\",{children:c.plugin.label}),/*#__PURE__*/_jsx(\"span\",{className:\"sr\",children:\" (opens in a new tab)\"}),/*#__PURE__*/_jsx(\"span\",{dangerouslySetInnerHTML:{__html:EXT},style:{display:\"contents\"}})]})]}),/*#__PURE__*/_jsx(\"div\",{className:\"ph-art\"+(flt?\" ph-float zgv-art\":a?.stack?\" ph-stack\":\"\")+(vid||project===\"prolific\"?\" zgv-art\":\"\"),\"aria-hidden\":project===\"pearson\"||a?.a?.live||a?.b?.live||vid||flt?undefined:\"true\",style:{viewTransitionName:\"ph-art\"},children:project===\"pearson\"?/* the live showcase: its static montage is server-rendered (so it is also what JS-off and reduced motion see), then the reel starts after its dwell *//*#__PURE__*/_jsx(\"div\",{className:\"ph-stage\",children:/*#__PURE__*/_jsx(PearsonShowcase,{mode:\"slideshow\",background:\"none\",theme:\"auto\",clear:true,tall:true})}):flt?/* Perception: the promo, recorded, on no background (HEVC with alpha for Safari, VP9 with alpha for the rest), with the video's control *//*#__PURE__*/_jsxs(\"div\",{style:{display:\"contents\"},children:[/*#__PURE__*/_jsx(\"div\",{className:\"ph-flt p\",style:{[\"--i\"]:1},role:\"img\",\"aria-label\":a.float.label,children:/*#__PURE__*/_jsxs(\"video\",{poster:a.float.poster,muted:true,loop:true,playsInline:true,preload:\"none\",children:[/*#__PURE__*/_jsx(\"source\",{src:a.float.hevc,type:'video/quicktime; codecs=\"hvc1\"'}),/*#__PURE__*/_jsx(\"source\",{src:a.float.webm,type:\"video/webm\"})]})}),/*#__PURE__*/_jsx(ZegoVideoBar,{cls:\"p\",style:\"--i:2\"})]}):a?.stack?a.stack.map((src,n)=>/*#__PURE__*/_jsx(\"div\",{className:`ph-st ph-st${n} p`,style:{[\"--i\"]:1+n},children:/*#__PURE__*/_jsx(\"div\",{children:/*#__PURE__*/_jsx(\"img\",{src:src,alt:\"\",decoding:\"async\"})})},src)):a?/*#__PURE__*/_jsxs(\"div\",{style:{display:\"contents\"},children:[/*#__PURE__*/_jsx(\"div\",{className:\"ph-slot ph-hero p\",style:{[\"--i\"]:1},...a.hero.label?{role:\"img\",\"aria-label\":a.hero.label}:{\"aria-hidden\":\"true\"},children:project===\"prolific\"?/*#__PURE__*/_jsx(\"div\",{className:\"ph-panel ph-prp-panel\",ref:prpRef}):a.hero.kind===\"video\"?/*#__PURE__*/_jsx(\"div\",{className:\"ph-panel ph-vid\",children:/*#__PURE__*/_jsx(\"video\",{src:a.hero.src,poster:a.hero.poster,muted:true,loop:true,playsInline:true,preload:\"none\"})}):a.hero.kind===\"image\"?/*#__PURE__*/_jsx(\"div\",{className:\"ph-panel ph-vid\",children:/*#__PURE__*/_jsx(\"img\",{src:a.hero.src,alt:\"\",decoding:\"async\",style:a.hero.pos?{objectPosition:a.hero.pos}:undefined})}):a.hero.kind===\"phone\"?/*#__PURE__*/_jsx(\"div\",{className:\"ph-panel\",children:/*#__PURE__*/_jsx(\"div\",{className:\"ph-phone\",children:/*#__PURE__*/_jsx(\"img\",{src:a.hero.src,alt:\"\",decoding:\"async\"})})}):/*#__PURE__*/_jsxs(\"div\",{className:\"ph-win\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"bar\",children:[/*#__PURE__*/_jsx(\"i\",{}),/*#__PURE__*/_jsx(\"i\",{}),/*#__PURE__*/_jsx(\"i\",{})]}),/*#__PURE__*/_jsx(\"img\",{src:a.hero.src,alt:\"\",decoding:\"async\"})]})}),project!==\"prolific\"&&comp(a.b,\"ph-sb\",2),comp(a.a,\"ph-sa\",3),vid&&/*#__PURE__*/_jsx(ZegoVideoBar,{cls:\"p\",style:\"--i:4\"})]}):/*#__PURE__*/_jsx(\"div\",{className:\"ph-slot ph-hero p\",style:{[\"--i\"]:1},children:/*#__PURE__*/_jsx(\"div\",{className:\"ph-panel\",children:/*#__PURE__*/_jsx(\"div\",{className:\"ph-led\",children:/*#__PURE__*/_jsx(\"img\",{src:c.logo,alt:\"\"})})})})})]})]});}addPropertyControls(ProjectHeader,{project:{type:ControlType.Enum,title:\"Project\",options:[\"prolific\",\"pearson\",\"zego\",\"perception\",\"carfinance\"],optionTitles:[\"Prolific\",\"Pearson\",\"Zego\",\"Perception\",\"CarFinance 247\"],defaultValue:\"prolific\"},story:{type:ControlType.Boolean,title:\"Full story link\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},head:{type:ControlType.Enum,title:\"Header\",options:[\"Classic\",\"Split\"],defaultValue:\"Classic\"},lead:{type:ControlType.String,title:\"Lead\",defaultValue:\"\",displayTextArea:true}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ProjectHeader\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}"],"mappings":"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"}