/* Migration from V15: preserve seven-chapter intro editorial layout. */
/* V12 — Cinematic historical animation art direction */
.btf-prelude-timeline{grid-template-columns:repeat(7,minmax(0,1fr))}
.btf-prelude-shade{background:linear-gradient(90deg,rgba(3,10,13,.94) 0%,rgba(3,10,13,.87) 28%,rgba(3,10,13,.54) 44%,rgba(3,10,13,.08) 64%,rgba(3,10,13,.08) 100%)}
.btf-prelude{background:#020a0f}
.btf-prelude-copy{width:min(645px,46vw)}
.btf-prelude-copy h2{font-size:clamp(57px,6.5vw,113px);letter-spacing:-.078em;text-wrap:balance}
.btf-prelude-visual-label{color:rgba(201,255,214,.72)}
.btf-prelude-timeline button small{font-size:9px;letter-spacing:.1em}
.btf-prelude-top-rule{background:rgba(204,255,190,.28)}
.btf-prelude-finish{background:radial-gradient(circle at 52% 45%,rgba(60,160,107,.34),rgba(4,14,15,.93) 72%)}
.btf-prelude-identity small{color:#a1c6b0}
.btf-prelude-caption{color:#b2c4b3}
@media(max-width:1050px){
 .btf-prelude-copy{width:54vw}
 .btf-prelude-copy h2{font-size:clamp(45px,7.2vw,95px)}
}
@media(max-width:700px){
 .btf-prelude-timeline{gap:4px}
 .btf-prelude-shade{background:linear-gradient(180deg,rgba(3,10,12,.64),rgba(3,10,12,.07) 23%,rgba(3,10,12,.03) 42%,rgba(3,10,12,.63) 64%,rgba(3,10,12,.95) 100%)}
 .btf-prelude-copy{width:auto;bottom:clamp(205px,29vh,265px)}
 .btf-prelude-copy h2{font-size:clamp(43px,12.6vw,72px)}
 .btf-prelude-timeline button span{font-size:9px}
 .btf-prelude-timeline button small{font-size:6px;letter-spacing:0;overflow:hidden;white-space:nowrap}
 .btf-prelude-controls{row-gap:9px}
}
@media(max-width:390px){
 .btf-prelude-copy{bottom:clamp(205px,30vh,255px)}
 .btf-prelude-copy h2{font-size:clamp(38px,11.6vw,59px)}
 .btf-prelude-timeline button small{font-size:5.5px}
}


/* BEYOND THE FLOW V16 — CONTINUUM / EDITORIAL INDUSTRIAL DESIGN SYSTEM
   A coherent premium layer across hero, chapters, case studies, labs and contact. */
:root {--v16-acid:#ceff80;--v16-glass:rgba(15,31,30,.72);--v16-border:rgba(189,245,198,.20);--v16-moss:#081611;--v16-ice:#e8f4eb;}
body {background:radial-gradient(ellipse at 70% 17%,rgba(31,73,56,.11),transparent 40%),#070c0f}
.nav {background:rgba(6,14,16,.83);border-bottom:1px solid rgba(174,232,188,.14);box-shadow:0 12px 40px rgba(0,0,0,.13);isolation:isolate;transition:height .3s,background .3s}
.nav.v16-scrolled{background:rgba(5,12,13,.95);box-shadow:0 16px 45px rgba(0,0,0,.32)}
.brand-name{letter-spacing:.055em;font-size:12px}
.nav-links {gap:clamp(12px,1.3vw,24px)}
.nav-links a {position:relative;font-size:11px;font-weight:700;letter-spacing:.035em;white-space:nowrap}
.nav-links a:after {content:"";position:absolute;bottom:-18px;left:0;right:0;height:1px;background:var(--v16-acid);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav-links a[aria-current="location"]{color:#d9ff9c}
.nav-links a[aria-current="location"]:after,.nav-links a:hover:after{transform:scaleX(1)}
.nav-contact{border-radius:2px;box-shadow:0 10px 30px rgba(177,253,117,.06)}
.scroll-progress{height:3px;background:linear-gradient(90deg,#65e8ce,#ceff80);box-shadow:0 0 24px #c7ff6260}
.hero{background:radial-gradient(ellipse at 68% 42%,rgba(36,103,76,.14),transparent 42%),radial-gradient(ellipse at 7% 72%,rgba(60,139,123,.065),transparent 50%),#070d0f}
.hero-copy{z-index:5}
.hero h1{letter-spacing:-.103em;filter:drop-shadow(0 11px 42px rgba(0,0,0,.25))}
.hero .hero-flow{filter:drop-shadow(0 0 23px rgba(169,255,104,.14))}
.hero-subrow p{max-width:490px}
.hero .hero-actions{margin-top:24px}
.hero-stage{border-color:rgba(168,255,185,.12);background:radial-gradient(circle at 55% 42%,rgba(82,177,138,.13),transparent 45%),linear-gradient(150deg,#061012,#0a1c1b);box-shadow:inset 0 0 125px rgba(127,241,178,.045)}
.hero-stage:after{background:radial-gradient(ellipse at 58% 39%,rgba(206,255,128,.085),transparent 33%),linear-gradient(180deg,transparent 0%,rgba(0,7,11,.26) 100%)}
.stage-chip{background:rgba(7,24,22,.59);border:1px solid rgba(180,255,195,.14);backdrop-filter:blur(18px);box-shadow:0 10px 45px rgba(0,0,0,.18);border-radius:6px}
.stage-chip strong{letter-spacing:.035em}
.stage-top,.stage-bottom{letter-spacing:.13em}
.v9-hero-shortcuts{margin-top:13px}
.v9-fast-open{background:transparent;border-color:rgba(192,255,167,.33);padding:13px 16px;border-radius:2px}
.v9-fast-open:hover{border-color:#c7ff62;background:rgba(206,255,128,.08)}
.v10-hero-prelude{opacity:.92}
.v7-gfx-open{opacity:.78;transition:opacity .2s}
.v7-gfx-open:hover{opacity:1}
.ticker {background:#0c1c19;border-block:1px solid rgba(174,230,191,.1)}
.journey-chrome .journey-top{letter-spacing:.12em}
.journey-atlas{backdrop-filter:blur(18px);background:linear-gradient(145deg,rgba(6,27,24,.74),rgba(10,25,25,.30));border-color:rgba(205,255,192,.25)}
.journey-steps .journey-content h2{text-shadow:0 8px 50px rgba(0,0,0,.16)}
.journey-content::after{opacity:.38}
.manifesto{position:relative}
.manifesto:before,.expertise:before,.projects:before,.about:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(178,253,159,.19),transparent);pointer-events:none}
.manifesto-grid p{max-width:780px}
.section-label span:last-child{color:#9bafa5}
.section-heading h2,.about-content h2{line-height:.99}
.section-heading h2 em,.about-content h2 em{filter:drop-shadow(0 0 20px rgba(179,255,95,.1))}
/* Guided visitor paths: clearly offer a recruiter a fast, practical route. */
.v16-pathways{padding-top:85px;padding-bottom:150px;position:relative;isolation:isolate}
.v16-pathways:before{content:"";position:absolute;inset:0 -2vw 0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 83% 45%,rgba(81,173,135,.085),transparent 40%)}
.v16-pathways-heading{display:flex;justify-content:space-between;align-items:end;gap:48px;margin-bottom:37px}
.v16-kicker{font-size:10px;color:#b7e8bd;letter-spacing:.22em;font-weight:800}
.v16-pathways h2{font-size:clamp(37px,5vw,75px);font-weight:860;letter-spacing:-.074em;line-height:1.04;margin:18px 0 0}
.v16-pathways h2 em{color:#c7ff62;font-style:normal}
.v16-pathways-heading>p{font-size:14px;line-height:1.65;color:#adbfb2;max-width:325px;margin:0 0 6px}
.v16-pathways-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.v16-path-card{--pointer-x:50%;--pointer-y:50%;position:relative;overflow:hidden;display:flex;min-width:0;min-height:305px;flex-direction:column;gap:11px;padding:27px 27px 23px;border:1px solid rgba(190,245,200,.15);background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(162,250,178,.095),transparent 46%),linear-gradient(135deg,rgba(25,50,42,.69),rgba(8,23,25,.8));transition:border-color .28s,box-shadow .3s,background .3s}
.v16-path-card:before{content:"";position:absolute;left:0;top:0;width:70px;height:2px;background:var(--v16-acid);opacity:.72;transition:width .45s}
.v16-path-card:hover,.v16-path-card:focus-visible{border-color:rgba(199,255,98,.61);box-shadow:0 20px 65px rgba(0,0,0,.24),0 0 40px rgba(103,222,179,.055)}
.v16-path-card:hover:before,.v16-path-card:focus-visible:before{width:100%}
.v16-path-number{font-size:9px;letter-spacing:.15em;font-weight:800;color:#a7d8b7}
.v16-path-symbol{font-size:48px;line-height:1.2;margin:14px 0 3px;color:#c7ff62;filter:drop-shadow(0 0 21px rgba(206,255,128,.18))}
.v16-path-card strong{font-size:clamp(22px,2vw,28px);line-height:1.08;letter-spacing:-.045em;font-weight:800}
.v16-path-card p{max-width:320px;color:#adc0b6;font-size:12px;line-height:1.6;margin:0}
.v16-path-action{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:15px;border-top:1px solid rgba(164,225,184,.15);font-size:9px;font-weight:850;letter-spacing:.1em;color:#d1f6d0}
.v16-path-action b{font-size:21px;color:#c7ff62;transition:transform .2s}
.v16-path-card:hover .v16-path-action b{transform:translate(3px,-3px)}
/* Immersive atelier */
.experience-v2{background:radial-gradient(ellipse at 50% 4%,rgba(54,157,118,.065),transparent 37%),#070e10}
.experience-frame{border:1px solid rgba(180,241,188,.26);box-shadow:0 25px 95px rgba(0,0,0,.43),inset 0 0 120px rgba(56,177,140,.07)}
.experience-scenes button{transition:color .22s,background .22s,border-color .22s,transform .22s}
.experience-scenes button:hover{transform:translateY(-3px)}
.v8-inspect-shell{border-color:rgba(197,255,176,.24)}
/* Expertise cards now feel like individual technology exhibits. */
.expertise{position:relative}
.exp-card{border-color:rgba(182,234,198,.18);background:linear-gradient(155deg,#10201e,#0d1719 73%);box-shadow:0 16px 55px rgba(0,0,0,.1);transition:border-color .3s,box-shadow .3s,background .3s}
.exp-card:hover,.exp-card:focus-visible{border-color:rgba(204,255,150,.53);box-shadow:0 25px 75px rgba(0,0,0,.26),inset 0 0 60px rgba(85,201,161,.035)}
.exp-art{filter:saturate(1.08)}
.exp-card:hover .exp-art{filter:saturate(1.24)}
.exp-body h3{letter-spacing:-.065em}
/* Case studies: clear problem/method/stage labels, distinct from numerical demos. */
.projects{position:relative}
.project-card{overflow:hidden;border:1px solid rgba(198,255,191,.16);box-shadow:0 25px 88px rgba(0,0,0,.17);transition:border-color .3s,box-shadow .3s}
.project-card:hover{border-color:rgba(199,255,98,.38);box-shadow:0 29px 100px rgba(0,0,0,.3),0 0 40px rgba(145,233,152,.042)}
.project-info{display:flex;flex-direction:column}
.project-info>p{max-width:500px}
.project-info .tag-row{margin-bottom:15px}
.v16-project-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:auto;padding-top:21px;border-top:1px solid rgba(184,244,191,.14)}
.v16-project-proof span{display:flex;flex-direction:column;gap:6px;font-size:9px;color:#9ec2af;letter-spacing:.10em;line-height:1.35;font-weight:760}
.v16-project-proof b{font-size:11px;line-height:1.35;color:#e0f0df;letter-spacing:0;font-weight:600}
.project-visual{isolation:isolate}
.project-visual:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(145deg,rgba(214,255,181,.04),transparent 33%,rgba(0,0,0,.13) 100%)}
.project-visual .app-window,.project-visual .q-app{filter:drop-shadow(0 24px 35px rgba(0,0,0,.32))}
/* The Operations Playbook has a cleaner grid and typographic rhythm. */
.playbook-layout{border-color:rgba(196,249,184,.26);border-radius:2px;box-shadow:0 25px 100px rgba(0,0,0,.24)}
.playbook-tab{border-radius:2px;transition:background .2s,border-color .2s,transform .2s}
.playbook-panel{background:radial-gradient(circle at 52% 25%,rgba(67,165,132,.13),transparent 42%),#081614}
.playbook-steps{margin-top:18px}
/* Lab: strong data legibility and interactive affordances. */
.lab-shell{border-color:rgba(186,240,197,.28);box-shadow:0 30px 95px rgba(0,0,0,.30)}
.lab-header{background:linear-gradient(105deg,#132a23,#0d1a1b)}
.lab-tab{transition:background .18s,color .18s,border-color .18s}
.lab-tab:focus-visible{position:relative;z-index:2}
.lab-results{background:linear-gradient(160deg,rgba(30,58,45,.92),rgba(12,28,28,.96));border:1px solid rgba(196,255,167,.13)}
.results-two strong{font-variant-numeric:tabular-nums;letter-spacing:-.045em}
.range-row input[type=range]{accent-color:#c7ff62}
/* About and contact, more editorial / less empty. */
.about{position:relative}
.about-portrait{border-color:rgba(192,241,191,.24);box-shadow:0 34px 90px rgba(0,0,0,.19)}
.about-content{position:relative}
.about-facts{border-color:rgba(191,255,179,.23)}
.about-facts strong{font-size:14px}
.contact-main:before{content:"";position:absolute;inset:0 6%;background:radial-gradient(circle at 50% 50%,rgba(115,223,160,.1),transparent 56%);pointer-events:none;z-index:-1}
.contact h2{text-shadow:0 25px 55px rgba(0,0,0,.25)}
.contact-actions .btn{min-width:180px}
.footer{border-color:rgba(191,255,179,.22)}
/* Actual operational controls. */
.v16-backtop{position:fixed;right:26px;bottom:26px;z-index:82;width:51px;height:51px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(203,255,152,.62);color:#e8ffe9;background:rgba(7,24,23,.90);box-shadow:0 14px 55px rgba(0,0,0,.35);backdrop-filter:blur(14px);opacity:0;transform:translateY(17px);pointer-events:none;transition:opacity .22s,transform .22s,border-color .22s}
.v16-backtop.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.v16-backtop:hover{border-color:#c7ff62}
.v16-backtop:after{content:'↑';font-size:21px;font-weight:800}
.v16-backtop-ring{position:absolute;inset:4px;border-radius:50%;border:1px solid rgba(198,255,180,.2)}
/* Fine tune content spacing, prevent decorative overlap, prefer measurable readability. */
.reveal{transition-duration:.64s}
.project-note{border-color:rgba(180,232,180,.25)}
@media(max-width:1100px){
 .nav-links{gap:12px}.nav-links a{font-size:10px}
 .v16-project-proof{grid-template-columns:1fr;gap:10px}
 .v16-project-proof span{flex-direction:row;justify-content:space-between;gap:10px}
}
@media(max-width:800px){
 .nav-links{gap:0}.nav-links a{font-size:16px}.nav-links a:after{display:none}
 .v16-pathways{padding-top:65px;padding-bottom:90px}
 .v16-pathways-heading{align-items:flex-start;flex-direction:column;gap:15px}
 .v16-pathways-grid{grid-template-columns:1fr}
 .v16-path-card{min-height:225px;padding:23px}
 .v16-path-symbol{font-size:36px;margin:3px 0}
 .v16-project-proof{grid-template-columns:repeat(3,minmax(0,1fr))}
 .v16-project-proof span{flex-direction:column}
 .v16-backtop{right:14px;bottom:14px;width:46px;height:46px}
}
@media(max-width:560px){
 .v16-pathways{padding-block:70px}
 .v16-pathways h2{font-size:clamp(40px,10vw,61px)}
 .v16-pathways-grid{gap:9px}
 .v16-path-card{min-height:220px;padding:20px 22px}
 .v16-path-card strong{font-size:25px}
 .v16-path-card p{font-size:12px}
 .v16-project-proof{grid-template-columns:1fr;gap:10px;padding-top:13px}
 .v16-project-proof span{flex-direction:row;justify-content:space-between;gap:12px}
 .v16-project-proof b{text-align:right;max-width:62%}
 .project-info{min-height:460px}
 .hero .hero-actions{gap:9px}
 .hero-copy{padding-bottom:23px}
 .nav-links a[aria-current="location"]{color:#ceff80}
 .contact-actions .btn{min-width:auto}
}
@media(prefers-reduced-motion:reduce){
 .nav,.v16-path-card,.v16-path-action b,.v16-backtop,.exp-card,.project-card{transition:none!important}
 .v16-backtop{transform:none}
}

/* TIMELINE SEVEN CHAPTERS: never wrap the final era to a new row. */
.btf-prelude-timeline{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(3px,.8vw,12px)}
.btf-prelude-timeline button{min-width:0}
.btf-prelude-timeline button small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){
 .btf-prelude-timeline{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
 .btf-prelude-timeline button small{font-size:6px;letter-spacing:0}
}
/* Programmatic heading focus after the cinematic intro should never draw a title frame. */
#hero-title[tabindex="-1"]:focus{outline:none!important}