html{overflow-x:clip}
/* BEYOND THE FLOW / V10 — THE EVOLUTION PRELUDE
   All styles scoped: existing portfolio sections remain unchanged. */
:root{--prelude-gold:#ecd5a2;--prelude-mint:#c7ff8a}
.btf-prelude{position:fixed;inset:0;width:100%;height:100%;height:100dvh;z-index:2147480000;background:#061014;color:#f3f5ed;isolation:isolate;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;font-family:inherit;transition:opacity .85s cubic-bezier(.22,.8,.22,1),visibility 0s linear .85s}
html.btf-prelude-on .btf-prelude{visibility:visible;opacity:1;pointer-events:auto;transition:none}
html.btf-prelude-on body{overflow:hidden!important}
.btf-prelude.is-exiting{opacity:0!important;pointer-events:none!important;transition:opacity .92s cubic-bezier(.16,.75,.18,1)!important;visibility:visible!important}
.btf-prelude #btf-prelude-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:1}
.btf-prelude-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(4,12,14,.97) 0%,rgba(4,12,14,.88) 27%,rgba(4,12,14,.33) 53%,rgba(4,12,14,.06) 100%),radial-gradient(ellipse at 73% 48%,transparent 8%,rgba(2,8,10,.5) 90%)}
.btf-prelude-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.21;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.28' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.btf-prelude button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btf-prelude button:focus-visible,.v10-hero-prelude button:focus-visible{outline:2px solid #c8ff81;outline-offset:5px}
.btf-prelude-top{position:absolute;top:clamp(25px,5.2vh,58px);left:clamp(24px,5.4vw,96px);right:clamp(24px,5.4vw,96px);display:flex;justify-content:space-between;align-items:center;gap:20px;z-index:8}
.btf-prelude-identity{display:flex;align-items:center;gap:17px;min-width:0;color:#ecf5e8}
.btf-prelude-identity strong{font-size:12px;letter-spacing:.19em;white-space:nowrap}
.btf-prelude-identity small{font-size:10px;letter-spacing:.14em;color:#94aba3;white-space:nowrap}
.btf-prelude-star{font-size:24px;color:#c9ff88;line-height:1}
.btf-prelude-top-rule{height:15px;width:1px;background:rgba(192,233,210,.25)}
.btf-prelude-skip{flex-shrink:0;background:rgba(204,252,188,.065);color:#e8ffda;border:1px solid rgba(207,255,197,.28);padding:13px 17px;letter-spacing:.15em;font-size:10px;font-weight:850;transition:background .22s,border .22s,transform .22s}
.btf-prelude-skip:hover{background:rgba(199,255,138,.18);border-color:rgba(199,255,138,.6);transform:translateY(-2px)}
.btf-prelude-skip span{font-size:15px;margin-left:14px}
.btf-prelude-copy{position:absolute;left:clamp(25px,7.8vw,132px);top:50%;transform:translateY(-47%);width:min(660px,49vw);z-index:5;transition:opacity .35s,transform .5s}
.btf-prelude-copy.btf-switch{animation:btfCopyCut .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes btfCopyCut{0%{opacity:.1;transform:translateY(calc(-47% + 23px));filter:blur(10px)}100%{opacity:1;transform:translateY(-47%);filter:blur(0)}}
.btf-prelude-eyebrow{display:flex;align-items:center;gap:12px;color:#c7ff8a;font-size:10px;font-weight:800;letter-spacing:.20em;text-transform:uppercase;line-height:1.5}
.btf-prelude-dot{width:7px;height:7px;border-radius:50%;background:#c7ff8a;box-shadow:0 0 16px #c7ff8a;flex-shrink:0}
.btf-prelude-eyebrow #btf-prelude-year{color:#94a79c;border-left:1px solid rgba(220,250,211,.21);padding-left:13px;white-space:nowrap}
.btf-prelude-copy h2{color:#f1f6ed;font-weight:850;font-size:clamp(55px,7.2vw,126px);line-height:.91;letter-spacing:-.085em;max-width:760px;margin:29px 0 21px;text-wrap:balance;text-shadow:0 25px 55px rgba(0,0,0,.4)}
.btf-prelude-copy h2 .btf-prelude-period{color:#c8ff87}
.btf-prelude-copy p{font-size:clamp(16px,1.36vw,22px);line-height:1.55;color:#b8c9bf;max-width:520px;font-weight:400;margin:0;letter-spacing:-.018em;text-wrap:pretty}
.btf-prelude-caption{display:flex;align-items:center;gap:14px;color:#9faea4;margin-top:43px;font-size:9px;font-weight:750;letter-spacing:.2em;line-height:1.4}
.btf-prelude-hairline{width:32px;height:1px;background:#a2e999}
.btf-prelude-visual-label{position:absolute;bottom:clamp(172px,20vh,220px);right:clamp(25px,6vw,97px);z-index:4;display:flex;flex-direction:column;align-items:flex-end;gap:9px;color:rgba(212,237,225,.54);font-size:9px;letter-spacing:.16em}
.btf-prelude-visual-label b{color:#c8ff87}
.btf-prelude-rail{position:absolute;right:clamp(26px,5.4vw,96px);top:50%;transform:translateY(-50%);z-index:5;display:flex;align-items:center;gap:14px;writing-mode:vertical-rl;color:#718d87;letter-spacing:.16em;font-size:9px;font-weight:750}
.btf-prelude-rail span{height:70px;width:1px;background:linear-gradient(to bottom,#a5ff8e,transparent)}
.btf-prelude-rail strong{color:#c7ff8a;letter-spacing:.09em}
.btf-prelude-bottom{position:absolute;z-index:9;bottom:clamp(23px,5.6vh,65px);left:clamp(25px,5.4vw,96px);right:clamp(25px,5.4vw,96px);display:flex;flex-direction:column;gap:24px}
.btf-prelude-timeline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.btf-prelude-timeline button{display:flex;flex-direction:column;align-items:stretch;gap:10px;text-align:left;border:0;background:transparent;color:#7d9991;padding:0;min-width:0}
.btf-prelude-timeline button span{font-size:12px;font-weight:850;transition:color .3s;letter-spacing:.1em}
.btf-prelude-timeline button i{width:100%;height:2px;position:relative;background:rgba(172,209,181,.24);overflow:hidden}
.btf-prelude-timeline button i:after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--phase,0%);background:#c7ff8a;box-shadow:0 0 10px rgba(199,255,138,.45);transition:width .15s linear}
.btf-prelude-timeline button.is-done i:after{width:100%}
.btf-prelude-timeline button.is-active span,.btf-prelude-timeline button.is-active small{color:#e2f7dc}
.btf-prelude-timeline button:hover span{color:#e2f7dc}
.btf-prelude-timeline button small{font-size:9px;font-weight:750;letter-spacing:.13em;line-height:1.2;white-space:nowrap}
.btf-prelude-controls{display:flex;align-items:center;gap:19px;border-top:1px solid rgba(187,225,190,.12);padding-top:14px;min-height:27px}
.btf-prelude-controls .btf-prelude-time{margin-right:auto;font-size:12px;font-weight:700;color:#e5f2df;letter-spacing:.1em;white-space:nowrap}
.btf-prelude-controls button{border:0;background:none;padding:4px 0;color:#afc2b5;font-size:10px;font-weight:750;letter-spacing:.09em;white-space:nowrap;transition:color .25s}
.btf-prelude-controls button:hover{color:#c8ff8a}
.btf-prelude-controls button span{color:#b3ff7b;margin-left:5px}
.btf-prelude-finish{position:absolute;z-index:7;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;background:radial-gradient(circle at 50% 50%,rgba(63,149,104,.23),rgba(4,14,15,.91) 70%);opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.09);transition:opacity .7s ease,transform 1s cubic-bezier(.2,.7,.2,1),visibility .7s}
.btf-prelude-finish.is-on{opacity:1;visibility:visible;transform:scale(1)}
.btf-prelude-finish span{color:#c7ff8a;font-size:11px;font-weight:750;letter-spacing:.26em;text-align:center}
.btf-prelude-finish strong{font-size:clamp(64px,11vw,180px);line-height:.86;letter-spacing:-.09em;text-align:center;font-weight:850;color:#f4f8f1}
.btf-prelude-finish em{color:#c7ff8a;font-style:normal}
.v10-hero-prelude{display:flex;align-items:center;gap:15px;margin-top:18px;flex-wrap:wrap}
.v10-hero-prelude button{background:none;color:#c7ff8a;border:none;border-bottom:1px solid rgba(199,255,138,.34);padding:0 0 7px;font-size:10px;font-weight:800;letter-spacing:.09em;transition:border-color .2s,color .2s;cursor:pointer}
.v10-hero-prelude button:hover{color:#f0ffdc;border-color:#c7ff8a}
.v10-hero-prelude button span{margin-right:7px}
.v10-hero-prelude>span{color:#68887b;font-size:9px;letter-spacing:.13em}
@media(max-width:1100px){
 .btf-prelude-shade{background:linear-gradient(90deg,rgba(4,12,14,.96) 0%,rgba(4,12,14,.78) 41%,rgba(4,12,14,.16) 100%)}
 .btf-prelude-copy{width:56vw}
 .btf-prelude-copy h2{font-size:clamp(56px,8vw,95px)}
}
@media(max-width:700px){
 .btf-prelude-top{top:22px;left:21px;right:21px}
 .btf-prelude-identity{gap:9px}.btf-prelude-identity strong{font-size:9px;letter-spacing:.10em}.btf-prelude-identity small,.btf-prelude-top-rule{display:none}.btf-prelude-star{font-size:19px}
 .btf-prelude-skip{padding:11px 12px;font-size:9px;letter-spacing:.08em}.btf-prelude-skip span{margin-left:6px}
 .btf-prelude-shade{background:linear-gradient(180deg,rgba(3,10,12,.56),rgba(3,10,12,.28) 19%,rgba(3,10,12,.08) 44%,rgba(3,10,12,.62) 64%,rgba(3,10,12,.94) 100%)}
 .btf-prelude-copy{width:auto;left:24px;right:26px;top:auto;bottom:clamp(211px,29vh,270px);transform:none}
 .btf-prelude-copy.btf-switch{animation:btfMobileCopy .5s ease both}
 @keyframes btfMobileCopy{0%{opacity:.15;transform:translateY(15px);filter:blur(5px)}100%{opacity:1;transform:none;filter:blur(0)}}
 .btf-prelude-copy h2{font-size:clamp(48px,13vw,78px);max-width:580px;margin:14px 0 13px;letter-spacing:-.073em}
 .btf-prelude-copy p{font-size:14px;line-height:1.45;max-width:390px}
 .btf-prelude-eyebrow{font-size:8px;gap:7px;letter-spacing:.1em;flex-wrap:wrap}.btf-prelude-eyebrow #btf-prelude-year{padding-left:7px}
 .btf-prelude-caption{font-size:8px;margin-top:16px;gap:9px;letter-spacing:.12em}
 .btf-prelude-hairline{width:18px}
 .btf-prelude-visual-label,.btf-prelude-rail{display:none}
 .btf-prelude-bottom{bottom:23px;left:21px;right:21px;gap:17px}
 .btf-prelude-timeline{gap:5px}
 .btf-prelude-timeline button{gap:8px}.btf-prelude-timeline button span{font-size:10px}.btf-prelude-timeline button i{height:2px}.btf-prelude-timeline button small{font-size:6px;letter-spacing:0;overflow:hidden;text-overflow:clip}
 .btf-prelude-controls{flex-wrap:wrap;gap:11px;padding-top:13px}
 .btf-prelude-controls .btf-prelude-time{font-size:10px;flex-basis:100%}
 .btf-prelude-controls button{font-size:8px;letter-spacing:.04em}
 .btf-prelude-finish{padding:20px}
 .btf-prelude-finish span{font-size:8px;letter-spacing:.14em;line-height:1.5}
 .btf-prelude-finish strong{font-size:clamp(55px,16vw,90px)}
 .v10-hero-prelude{margin-top:10px}.v10-hero-prelude>span{display:none}.v10-hero-prelude button{font-size:9px}
}
@media(max-width:390px){.btf-prelude-copy{bottom:clamp(193px,27vh,230px)}.btf-prelude-copy h2{font-size:clamp(43px,12.7vw,62px)}.btf-prelude-copy p{font-size:13px}.btf-prelude-caption{margin-top:12px}.btf-prelude-controls{gap:9px}}
@media(prefers-reduced-motion:reduce){.btf-prelude,.btf-prelude-finish,.btf-prelude-copy{transition:none!important;animation:none!important}}

.btf-prelude-finish strong{transition:transform .95s cubic-bezier(.17,.79,.21,1)}
.btf-prelude.is-exiting .btf-prelude-finish strong{transform:translate(-9vw,-5vh) scale(.92)}
@media(max-width:700px){.btf-prelude.is-exiting .btf-prelude-finish strong{transform:translateY(-8vh) scale(.84)}}
