/* V3 opening and persistent slim header. */
:root{--site-header-height:62px}
.story-header.site-header{position:fixed;inset:0 0 auto;height:var(--site-header-height);min-height:0;padding:0 clamp(22px,4vw,64px);flex-wrap:nowrap;border:0;border-bottom:1px solid rgba(9,38,95,.09);background:#fff;backdrop-filter:none;z-index:30}
.story-header.site-header .brand-logo{width:190px;height:auto}
.story-header.site-header nav{gap:0}
.story-header.site-header .nav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 14px;border:1px solid rgba(9,38,95,.18);border-radius:5px;background:#fff;color:#102549;font-size:12px;white-space:nowrap;transition:background .25s ease,border-color .25s ease,color .25s ease}
.story-header .nav-cta:hover{background:#e9edf5}
.liquid-story{--scene-height:max(620px,100svh);--night:1;--intro:0;--hint:0;--intro-lift:0px;position:relative;isolation:isolate;background:#061c45}
.story-scene{position:relative;height:var(--scene-height);min-height:620px;overflow:hidden;background:radial-gradient(ellipse 36% 43% at 50% 55%,#edf1f8 0%,#fff 85%)}
.story-enhanced{height:calc(var(--scene-height)*2.6)}
.story-enhanced .story-scene{position:sticky;top:0}
.story-night{position:absolute;inset:0;background:radial-gradient(ellipse 44% 52% at 50% 55%,#192d53 0%,#061c45 85%);opacity:var(--night);pointer-events:none}
.story-anchor{position:absolute;top:0;scroll-margin-top:0}
.story-enhanced .story-anchor{top:calc(var(--scene-height)*1.4)}
.story-opening{position:absolute;z-index:2;left:20px;right:20px;text-align:center;pointer-events:none}
.story-opening{top:15%;opacity:var(--intro);transform:translateY(var(--intro-lift))}
.story-eyebrow{font:600 10px/1.5 'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.18em;color:#687489;margin:0 0 20px}
.story-opening h1{font:600 clamp(52px,7.6vw,106px)/1.05 Manrope,sans-serif;letter-spacing:-.065em;margin:0;color:#102549}
.puzzle-visual{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;overflow:visible}
.puzzle-science,.puzzle-tile{will-change:transform}
.science-rim{opacity:calc(var(--night)*.34)}
.story-scroll{position:absolute;z-index:3;left:50%;bottom:8%;transform:translateX(-50%);display:flex;align-items:center;gap:20px;white-space:nowrap;font-size:11px;letter-spacing:.045em;color:#647084;opacity:var(--hint);padding:12px}
.story-scroll span:last-child{color:#87374e;font-size:23px;line-height:1}
.liquid-story a:focus-visible,.story-header a:focus-visible{outline:2px solid #d69aa8;outline-offset:5px}
@media(max-width:680px){
 :root{--site-header-height:56px}
 .story-header.site-header{height:var(--site-header-height);padding:0 18px;gap:14px}
 .story-header.site-header .brand-logo{width:148px}
 .story-header.site-header .nav-cta{font-size:11px;padding:8px 11px;min-height:44px}
 .story-opening{top:17%}
 .story-eyebrow{font-size:8px;letter-spacing:.13em;margin-bottom:18px}
 .story-opening h1{font-size:clamp(42px,10.7vw,70px)}
 .story-scroll{bottom:9%;font-size:10px}
}
@media(max-width:360px){.story-header.site-header{padding-inline:12px;gap:8px}.story-header.site-header .brand-logo{width:138px}.story-header.site-header .nav-cta{padding-inline:8px;font-size:10px}}
@media(max-height:700px) and (min-width:681px){.story-opening{top:16%}.story-opening h1{font-size:68px}.story-eyebrow{margin-bottom:12px}.story-scroll{bottom:6%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.story-header.site-header,.story-header .brand-logo{transition:none}}

/* The wider partnering field disappears; the three selected tiles retain their choreography. */
.puzzle-field{opacity:var(--field-opacity,0)}
.partner-surface{opacity:var(--selection,1)}
.partner-outline{opacity:calc(1 - var(--selection,1))}

/* The second headline completes the sentence as the selected partners assemble. */
.story-partnership{position:absolute;z-index:2;left:20px;right:20px;top:13%;text-align:center;pointer-events:none;opacity:var(--partner,1);transform:translateY(var(--partner-lift,0px))}
.story-partnership h2{font:600 clamp(38px,5.2vw,72px)/1.04 Manrope,sans-serif;letter-spacing:-.055em;margin:0;color:#f2f3f7}
.story-partnership h2 span{color:#d69aa8}
@media(max-width:680px){.story-partnership{top:16%}.story-partnership h2{font-size:clamp(35px,8.5vw,54px)}}
@media(max-height:700px) and (min-width:681px){.story-partnership{top:14%}.story-partnership h2{font-size:48px}}

/* Keep section navigation and anchored content clear of the persistent header. */
.flow-wrap{top:var(--site-header-height)}
.experts-in-flow,#software,#pricing{scroll-margin-top:var(--site-header-height)}
.stage,#strategy.stage{scroll-margin-top:calc(var(--site-header-height) + 118px)}
@media(max-width:680px){.stage,#strategy.stage{scroll-margin-top:calc(var(--site-header-height) + 76px)}}

/* Restored top-row navigation; a compact menu retains the slim phone header. */
.story-header.site-header nav{gap:24px;font-size:12px}
.story-header .header-links{display:flex;align-items:center;gap:26px}
.story-header.site-header nav .header-links a{display:inline-flex;align-items:center;min-height:40px;white-space:nowrap;color:#152035}
.story-header.site-header nav .header-links a:hover{color:#87374e}
.story-header.site-header .nav-cta{background:#09265f;border-color:#09265f;color:#fff}
.story-header.site-header .nav-cta:hover{background:#163970;border-color:#163970}
.story-header .header-menu{display:none}
@media(max-width:680px){
 .story-header.site-header nav{gap:8px}
 .story-header .header-links{display:none}
 .story-header .header-menu{display:block}
 .header-menu summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 6px;font-size:11px;color:#152035}
 .header-menu summary::-webkit-details-marker{display:none}
 .header-menu summary:focus-visible{outline:2px solid #ad5961;outline-offset:2px}
 .header-menu-links{position:absolute;right:18px;top:calc(var(--site-header-height) - 1px);min-width:190px;padding:8px;background:#fff;border:1px solid #dce2eb;border-radius:0 0 5px 5px;box-shadow:0 8px 20px rgba(9,38,95,.08)}
 .story-header.site-header nav .header-menu-links a{display:flex;align-items:center;min-height:44px;padding:10px 14px;font-size:13px;color:#152035}
 .header-menu-links a:hover{background:#f4f6fa}
}
@media(max-width:360px){.story-header.site-header .brand-logo{width:124px}.story-header.site-header nav{gap:6px}.header-menu-links{right:12px}}

/* Paint the opening state before the animation controller loads. */
.hero-js .liquid-story{--night:0;--intro:1;--hint:1;--partner:0;--partner-lift:18px;--selection:0;--field-opacity:1}
.hero-js .liquid-story:not(.story-ready) .puzzle-visual{visibility:hidden}