#experience.flow-experience{height:100svh;min-height:760px;position:relative;margin:0;padding:0;--flow-intro:1;--flow-detail:0;--flow-closing:0;--flow-work:0;--flow-progress:0}
#experience.flow-experience:is([data-motion=ready],[data-motion=loading]){height:500svh;min-height:0}
#experience .flow-sticky{position:sticky;top:0;height:100svh;min-height:760px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 72% 42%,#fff 0%,#edf5fb 45%,#dceaf5 100%)}
#experience .flow-sticky:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 35%,#c2e3ff90,transparent 60%),radial-gradient(ellipse at 20% 80%,#ffce992b,transparent 50%);pointer-events:none}
#experience .flow-visual{position:absolute;inset:76px 0 0;z-index:0;pointer-events:none}
#experience .flow-visual canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .6s}
#experience .flow-poster{position:absolute;right:0;top:6%;width:60%;height:86%;object-fit:contain;opacity:1;transition:opacity .6s}
#experience .flow-visual[data-state=ready] canvas{opacity:1}
#experience .flow-visual[data-state=ready] .flow-poster{opacity:0}
#experience .flow-copy,#experience .flow-closing{position:absolute;z-index:3;top:45%;left:6%;width:43%;max-width:600px;transform:translateY(-35%);text-align:left;color:#152d43}
#experience .flow-copy{opacity:var(--flow-intro)}
#experience .flow-copy h1,#experience .flow-closing h2{font-size:clamp(58px,6vw,100px);font-weight:600;line-height:.99;letter-spacing:-.068em;margin:0;color:#172a3d;text-shadow:0 2px 1px #ffffffb0,0 -1px 1px #183b5412}
#experience .flow-copy h1 span,#experience .flow-closing h2 span,#experience .flow-detail h2 span{color:#0075dc}
#experience .flow-eyebrow{display:block;font-size:10px;font-weight:650;letter-spacing:.17em;margin:0 0 25px;color:#48667f}
#experience .flow-copy p,#experience .flow-closing p{font-size:clamp(14px,1.15vw,17px);line-height:1.7;max-width:385px;margin:25px 0 28px;color:#425e76}
#experience .flow-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#experience .flow-actions .button{font-size:14px;min-height:48px;padding:14px 18px;gap:16px}
#experience .flow-actions .button-secondary{padding:12px 8px;background:transparent!important;border-color:transparent!important;box-shadow:none!important}
#experience .flow-detail{position:absolute;z-index:2;bottom:9%;left:6%;right:6%;opacity:var(--flow-detail);pointer-events:none;text-shadow:0 1px 14px #fff}
#experience .flow-detail h2{font-size:clamp(38px,4.5vw,72px);line-height:1.03;letter-spacing:-.05em;margin:0;color:#183148}
#experience .flow-detail .flow-eyebrow{margin-bottom:16px}
#experience .flow-closing{opacity:var(--flow-closing)}
#experience .flow-projects{position:absolute;inset:0;z-index:5;perspective:1400px;pointer-events:none}
#experience .flow-project{position:absolute;top:18%;right:5%;width:min(64%,960px);opacity:0;transform-style:preserve-3d;pointer-events:auto;will-change:transform,opacity}
#experience .flow-project[inert]{pointer-events:none}
#experience .flow-project-label{display:flex;justify-content:space-between;margin:0 2px 16px;color:#335b78;font-size:11px;letter-spacing:.14em;font-weight:650}
#experience .flow-browser{display:block;overflow:hidden;border-radius:20px;border:1px solid #fff;background:#ffffffd9;box-shadow:0 34px 70px #183c6426,0 4px 8px #19476d1a,inset 0 0 0 3px #e8f6ff;transform:translateZ(30px);text-decoration:none}
#experience .flow-browser-bar{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:linear-gradient(#fffffff5,#eaf2f9e8);font-size:10px;color:#48677f;letter-spacing:.06em}
#experience .flow-browser-bar>span:first-child{font-size:8px;color:#9bb6cb;letter-spacing:3px}
#experience .flow-browser img{display:block;width:100%;height:auto;aspect-ratio:1.46;object-fit:cover;object-position:top;max-height:50svh}
#experience .flow-project-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px;background:#f5faffeb;border:1px solid #fff;border-radius:18px;padding:20px 24px;box-shadow:0 8px 28px #23476e10}
#experience .flow-project-caption h2{font-size:clamp(24px,2.3vw,36px);line-height:1.1;letter-spacing:-.035em;margin:0;color:#17334b}
#experience .flow-project-caption p{font-size:13px;color:#526d82;margin:7px 0 0}
#experience .flow-project-caption>a{display:flex;align-items:center;gap:16px;min-height:44px;white-space:nowrap;color:#0069be;font-size:14px;font-weight:600;text-decoration:none}
#experience .flow-project-caption>a span{font-family:Arial,sans-serif;font-size:24px}
#experience .flow-markets{position:absolute;bottom:24px;left:6%;right:6%;z-index:4;display:flex;gap:22px;opacity:1;pointer-events:auto}
#experience .flow-markets a{font-size:11px;color:#365b78;text-decoration:none;padding:10px 0;letter-spacing:.03em}
#experience .flow-progress{position:absolute;bottom:0;height:2px;left:0;right:0;background:#1389d4;transform:scaleX(var(--flow-progress));transform-origin:left}
#experience:not([data-motion=ready]) .flow-copy{opacity:1}
#experience:not([data-motion=ready]) :is(.flow-detail,.flow-closing,.flow-projects,.flow-progress){display:none}
@media(max-width:760px){
 #experience.flow-experience,#experience .flow-sticky{min-height:740px}
 #experience.flow-experience:is([data-motion=ready],[data-motion=loading]){height:470svh;min-height:0}
 #experience .flow-visual{inset:85px -2% 0}
 #experience .flow-poster{top:44%;right:4%;width:92%;height:45%}
 #experience .flow-copy,#experience .flow-closing{top:125px;left:8%;width:84%;max-width:none;transform:none}
 #experience .flow-copy h1,#experience .flow-closing h2{font-size:clamp(43px,12vw,64px);line-height:1.02;letter-spacing:-.065em}
 #experience .flow-eyebrow{font-size:8px;letter-spacing:.13em;margin-bottom:18px}
 #experience .flow-copy p,#experience .flow-closing p{font-size:13px;line-height:1.6;margin:16px 0 19px;max-width:330px}
 #experience .flow-actions{gap:6px}
 #experience .flow-actions .button{font-size:12px!important;min-height:44px;padding:12px 11px;gap:8px}
 #experience .flow-actions .button-secondary{font-size:11px!important;padding:10px 0;gap:8px}
 #experience .flow-detail{left:7%;right:7%;bottom:10%}
 #experience .flow-detail h2{font-size:clamp(34px,9vw,48px)}
 #experience .flow-project{top:24%;right:5%;width:90%}
 #experience .flow-project-label{font-size:9px;margin-bottom:12px}
 #experience .flow-browser{border-radius:13px;box-shadow:0 24px 48px #193d6c30,0 3px 8px #19476d18}
 #experience .flow-browser-bar{height:27px;padding:0 10px;font-size:9px}
 #experience .flow-browser img{max-height:none;aspect-ratio:1.42}
 #experience .flow-project-caption{padding:16px;margin-top:14px;gap:10px;flex-wrap:wrap;border-radius:14px}
 #experience .flow-project-caption h2{font-size:25px}
 #experience .flow-project-caption p{font-size:12px;margin-top:5px}
 #experience .flow-project-caption>a{font-size:13px;width:100%;justify-content:space-between;border-top:1px solid #c9dcec;padding-top:6px;margin-top:5px}
 #experience .flow-markets{bottom:18px;left:8%;right:8%;gap:15px;justify-content:center}
 #experience .flow-markets a{font-size:9px}
}
@media(prefers-reduced-motion:reduce){#experience.flow-experience[data-motion=ready]{height:100svh}#experience .flow-poster{opacity:1!important}#experience .flow-visual canvas,#experience .flow-detail,#experience .flow-projects,#experience .flow-closing,#experience .flow-progress{display:none}#experience .flow-copy{opacity:1!important}}
/* Preserve the portfolio narrative when a device cannot create a WebGL context. */
#experience[data-motion=ready] .flow-visual[data-state=fallback] .flow-poster{opacity:calc(1 - var(--flow-work)*.78);transform:scale(calc(1 + var(--flow-detail)*.65)) translateX(calc(var(--flow-work)*-22%));transition:opacity .2s,transform .2s}

#experience .flow-video{position:absolute;right:0;top:6%;width:60%;height:86%;object-fit:contain;opacity:0;pointer-events:none;mix-blend-mode:multiply}
#experience .flow-visual[data-playing=true] .flow-video{opacity:1}
#experience .flow-visual[data-playing=true] .flow-poster{opacity:0!important}
#experience .flow-visual[data-state=fallback] .flow-video{transform:scale(calc(1 + var(--flow-zoom)*1.7)) translateX(calc(var(--flow-work)*-40%));opacity:calc(1 - var(--flow-work)*.75)}
@media(max-width:760px){#experience .flow-video{top:44%;right:4%;width:92%;height:45%}#experience .flow-markets{left:14px;right:76px;bottom:calc(16px + env(safe-area-inset-bottom,0px));min-height:44px;gap:8px;padding:0 8px;justify-content:space-evenly;align-items:center;background:#f5fafff5;border:1px solid #fff;border-radius:14px;box-shadow:0 3px 15px #264a6714}#experience .flow-markets a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0;font-size:10px;font-weight:500;letter-spacing:0;color:#254761;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){#experience .flow-video{display:none!important}#experience .flow-poster{opacity:1!important}}
/* The native WebGL scene and animated compatibility view share one seamless stage. */
#experience .flow-sticky{background:#ecf4fa}
#experience .flow-sticky:before{display:none}
#experience .flow-video{mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent),linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent),linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-composite:source-in}

#experience .flow-visual[data-state=ready] .flow-video{display:none}

#experience .flow-markets[hidden]{display:none!important}
#oxo-privacy-controls .oxo-privacy-actions button[data-oxo-consent="essential"]{background:#f5faff!important;color:#23425a!important;border:1px solid #a9bdce!important}

#experience .flow-markets{background:#f5faff;color:#23425a;border-radius:14px;padding:0 14px;width:max-content;max-width:calc(100% - 90px)}
@media(max-width:760px){#experience .flow-markets{width:auto;padding:0 8px;background:#f5faff}}

#oxo-privacy-controls{background:#f5faff!important;color:#23425a!important}
#oxo-privacy-controls .oxo-privacy-copy p{color:#23425a!important;text-shadow:none!important}
#oxo-privacy-controls .oxo-privacy-copy a{color:#00579c!important;text-shadow:none!important}