/* POSSIBLD. motion: editorial reveals, tactile controls, native page transitions. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:poss-page-out .18s ease both}
::view-transition-new(root){animation:poss-page-in .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes poss-page-out{to{opacity:0}}
@keyframes poss-page-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.button,.bf-submit,.bf-call,.concept-explore,.inline-link,.poss-mobile-menu button{transition:background .22s,color .22s,box-shadow .22s,translate .22s!important}
.button:hover,.bf-submit:hover,.bf-call:hover{box-shadow:5px 5px 0 #a78bfa;translate:0 -2px}
.button:active,.bf-submit:active,.bf-call:active{box-shadow:1px 1px 0 #a78bfa;translate:0 1px}
header nav a,.foot nav a{transition:color .2s,translate .2s}
.foot nav a:hover{color:#CFEE08;translate:4px 0}
.process-graphic>div{transition:background .25s,padding .25s}
.process-graphic>div:hover{background:#CFEE08;padding-left:12px}
.concept-image{appearance:none;border:0;padding:0;display:block;width:100%;text-align:left;color:inherit;background:transparent;cursor:zoom-in;position:relative}
.concept-image::after{content:'View details +';position:absolute;right:14px;bottom:14px;padding:9px 12px;background:#CFEE08;color:#0f0f10;font:500 12px/1.3 'IBM Plex Mono',monospace;border:1px solid #0f0f10;transition:background .2s}
.concept-image:focus-visible{outline:3px solid #a78bfa;outline-offset:4px}
.concept-image:hover::after{background:#a78bfa}
.poss-art-dialog{width:min(1100px,96vw);max-height:92dvh;border:1px solid #0f0f10;padding:56px 20px 20px;background:#f6f7f8;color:#0f0f10;overflow:auto}
.poss-art-dialog::backdrop{background:#0f0f10cc;backdrop-filter:blur(4px)}
.poss-art-dialog[open]{animation:poss-page-in .25s ease both}
.poss-art-dialog img{display:block;width:100%;height:auto;max-height:72dvh;object-fit:contain}
.poss-art-dialog p{font:14px/1.4 'Space Grotesk',sans-serif;text-align:center}
.poss-art-close{position:absolute;right:16px;top:12px;padding:10px 14px;border:1px solid #0f0f10;background:#CFEE08;color:#0f0f10;font:500 14px 'Space Grotesk',sans-serif;cursor:pointer}
.poss-mobile-menu.open nav{animation:poss-page-in .22s ease both}
@media(hover:hover) and (pointer:fine){
 .context-scenes .scene-card{transition:translate .3s ease,filter .3s ease}
 .context-scenes .scene-card:hover{translate:0 -5px;filter:drop-shadow(0 12px 14px #0001)}
 .concept-image img{transition:filter .3s ease!important}
 .concept-image:hover img{filter:drop-shadow(0 10px 12px #0002)}
 .principles>div,.value-grid article,.method-grid>div{transition:background .25s,translate .25s}
 .value-grid article:hover,.method-grid>div:hover{background:#CFEE0826;translate:0 -3px}
}
@media(prefers-reduced-motion:reduce){
 ::view-transition-old(root),::view-transition-new(root){animation:none}
 .poss-art-dialog[open],.poss-mobile-menu.open nav{animation:none}
 .button,.bf-submit,.bf-call,.concept-explore,.inline-link,.poss-mobile-menu button,header nav a,.foot nav a,.process-graphic>div,.context-scenes .scene-card,.concept-image img,.principles>div,.value-grid article,.method-grid>div{transition:none!important;translate:none!important}
}

/* Three continuous typographic lanes, in the Production palette. */
.poss-ticker{width:100%;max-width:100%;overflow:hidden;background:#0F0F10;color:#F6F7F8;border:0;padding:20px 0 30px;box-sizing:border-box}
.poss-ticker-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(20px,4vw,60px) 18px}
.poss-ticker-head p{margin:0;font:500 12px/1.4 'IBM Plex Mono',monospace;letter-spacing:.12em;color:#b8bbc0}
.poss-ticker-head button{border:1px solid #64646a;background:transparent;color:#f6f7f8;padding:7px 11px;font:500 12px/1.4 'IBM Plex Mono',monospace;cursor:pointer}
.poss-ticker-head button:hover,.poss-ticker-head button:focus-visible{background:#CFEE08;color:#0f0f10;border-color:#CFEE08}
.poss-ticker-row{overflow:hidden;max-width:100%;padding:9px 0}
.poss-ticker-track{display:flex;width:max-content;animation:poss-ticker-slide 42s linear infinite}
.poss-ticker-row:nth-child(2) .poss-ticker-track{animation-direction:reverse;animation-duration:48s}
.poss-ticker-row:nth-child(3) .poss-ticker-track{animation-direction:reverse;animation-duration:54s}
.poss-ticker-group{display:flex;flex-shrink:0;align-items:center;justify-content:flex-start;min-width:0;gap:40px;padding-right:40px}
.poss-ticker-group span{white-space:nowrap;font:700 clamp(24px,3.2vw,46px)/1.2 'Space Grotesk',sans-serif;letter-spacing:-.035em;color:#55545D}
.poss-ticker-group span:nth-child(even){color:#0F0F10}
.poss-ticker-group span.ticker-lime{color:#6840B4}
.poss-ticker-group span.ticker-lilac{color:#6840B4}
.poss-ticker.is-paused .poss-ticker-track{animation-play-state:paused}
@media(hover:hover){.poss-ticker:hover .poss-ticker-track{animation-play-state:paused}}
@keyframes poss-ticker-slide{to{transform:translateX(-50%)}}
@media(max-width:600px){.poss-ticker{padding:18px 0 22px}.poss-ticker-group span{font-size:25px}.poss-ticker-row{padding:8px 0}}
@media(prefers-reduced-motion:reduce){.poss-ticker-track{animation:none;display:block;width:100%}.poss-ticker-group{min-width:0;justify-content:center;flex-wrap:wrap;gap:14px 26px;padding:0 20px}.poss-ticker-group[aria-hidden]{display:none}.poss-ticker-group span{white-space:normal;font-size:22px}.poss-ticker-head button{display:none}}

/* Keep Start Anywhere colour panels visible throughout their entrance. */
#main [data-framer-name="Start Anywhere Scenarios"]>div{opacity:1!important;translate:none!important}
#main [data-framer-name="Start Anywhere Scenarios"]>[data-framer-name="Idea Needs Making"]{background:#e5f600!important;color:#0f0f10!important}
#main [data-framer-name="Idea Needs Making"] .framer-text{color:#0f0f10!important}

/* Compact ticker and seamless scenario tiles. */
.poss-ticker{padding:12px 0 16px}
.poss-ticker-head{padding-bottom:8px}
.poss-ticker-row{padding:6px 0}
.poss-ticker-group span{font-size:clamp(20px,2.5vw,34px)}
#main [data-framer-name="Start Anywhere"] [data-framer-name="Start Anywhere Scenarios"]{gap:0!important;background:transparent!important;align-items:stretch!important}
#main [data-framer-name="Start Anywhere Scenarios"]>div{height:auto!important;align-self:stretch!important;border:0!important}
@media(max-width:809.98px){
 #main [data-framer-name="Introduction"] .framer-zuvuvd{padding:28px 8px!important}
 .poss-ticker{padding:12px 0 14px}
 .poss-ticker-row{padding:5px 0}
 .poss-ticker-group span{font-size:21px}
}
/* Lighter and quieter marquee typography. */
.poss-ticker{padding:10px 0 12px}
.poss-ticker-row{padding:4px 0}
.poss-ticker-group span{font-size:clamp(16px,1.7vw,24px);font-weight:400;letter-spacing:-.015em}
@media(max-width:809.98px){.poss-ticker{padding:10px 0 12px}.poss-ticker-row{padding:4px 0}.poss-ticker-group span{font-size:16px;font-weight:400}}

/* Equal spacing inside every lane and across its loop seam. */
.poss-ticker-group span{flex:0 0 auto}
@media(max-width:809.98px){.poss-ticker-group{gap:28px;padding-right:28px}}
@media(prefers-reduced-motion:reduce){.poss-ticker-group{gap:14px 26px;padding:0 20px}}

/* Brief CTA and an interactive colour change for the call CTA. */
#main [data-framer-name="Introduction"] a:has([data-framer-name="Brief Us"]){background:#A78BFA!important;color:#0F0F10!important;transition:background .22s ease,color .22s ease!important}
#main [data-framer-name="Introduction"] a:has([data-framer-name="Brief Us"]) .framer-text{color:#0F0F10!important;--framer-text-color:#0F0F10!important}
#main [data-framer-name="Introduction"] a:has([data-framer-name="Brief Us"]):hover{background:#bca5fc!important}
#brief-form .bf-schedule{transition:background .22s ease,color .22s ease,box-shadow .22s ease!important}
#brief-form .bf-schedule:hover,#brief-form .bf-schedule:focus-visible,#brief-form .bf-schedule:active{background:#A78BFA!important;color:#0F0F10!important}
#brief-form .bf-schedule:focus-visible{outline:2px solid #0F0F10;outline-offset:4px}
@media(prefers-reduced-motion:reduce){#brief-form .bf-schedule,#main [data-framer-name="Introduction"] a:has([data-framer-name="Brief Us"]){transition:none!important}}

/* Compact lanes, sized for a quiet supporting role. */
.poss-ticker{padding:7px 0 8px}
.poss-ticker-row{padding:3px 0}
.poss-ticker-group span{font-size:clamp(14px,1.35vw,19px);line-height:1.2;font-weight:400}
@media(max-width:809.98px){.poss-ticker{padding:6px 0 7px}.poss-ticker-row{padding:3px 0}.poss-ticker-group span{font-size:14px}}

/* Framer entrance styles must never leave reserved, empty content areas. */
#main [data-framer-name="Process"] [data-framer-name][style*="opacity"],
#main div[data-framer-name="Services"] [data-framer-name][style*="opacity"]{opacity:1!important;transform:none!important;filter:none!important}
#main [data-framer-name="Process"]{padding:56px 40px!important;gap:32px!important;height:auto!important}
#main div[data-framer-name="Services"]{padding:56px 40px!important;gap:32px!important;height:auto!important}
@media(max-width:809.98px){#main [data-framer-name="Process"],#main div[data-framer-name="Services"]{padding:44px 20px!important;gap:28px!important}}
#main [data-framer-name="Introduction"] a:has([data-framer-name="Brief Us"]){background:#A78BFA!important;color:#0F0F10!important}
#main [data-framer-name="Introduction"] [data-framer-name="Brief Us"] .framer-text{font-weight:400!important;letter-spacing:0!important;color:#0F0F10!important;--framer-text-color:#0F0F10!important}
#main [data-framer-name="Introduction"] a:has([data-framer-name="Brief Us"]):is(:hover,:focus-visible,:active){background:#CFEE08!important;color:#0F0F10!important}
#main [data-framer-name="Introduction"] a:has([data-framer-name="Brief Us"]):focus-visible{outline:2px solid #0F0F10;outline-offset:4px}

/* Quiet two-lane marquee. */
.poss-ticker{padding:14px 0;background:#0F0F10}
.poss-ticker-row{padding:7px 0}
.poss-ticker-group{gap:56px;padding-right:56px}
.poss-ticker-group span,.poss-ticker-group span:nth-child(even){color:#F6F7F8;font-size:clamp(13px,1.1vw,16px);font-weight:400;letter-spacing:0}
.poss-ticker-group span.ticker-lime{color:#CFEE08}
.poss-ticker-group span.ticker-lilac{color:#A78BFA}
@media(max-width:809.98px){.poss-ticker-group{gap:36px;padding-right:36px}.poss-ticker-group span{font-size:13px}}
@media(prefers-reduced-motion:reduce){.poss-ticker-group{gap:14px 26px;padding:0 20px}}

/* Yellow lettering alongside the lavender accents, with a fine edge for light backgrounds. */
.poss-ticker-group span.ticker-yellow{color:#CFEE08}

/* Keep looping motion idle while the section or browser tab is out of view. */
.poss-ticker.is-offscreen .poss-ticker-track{animation-play-state:paused}