@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap";body{margin:0;touch-action:manipulation}:root{--app-height: 100vh}:before,:after,*{box-sizing:border-box}*{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}*[hidden]{display:none}body{line-height:1.5}menu,ol,ul,li{list-style:none;list-style-type:none}blockquote,q{quotes:none}b,strong{font-weight:bolder}select{text-transform:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}button{cursor:pointer;background:transparent;background-image:none}button:focus{outline:0}::-moz-focus-inner{border-style:none;padding:0}:-moz-ui-invalid{box-shadow:none}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}img,video{width:100%;max-width:100%;height:auto}input:focus{outline:none}a:active,a:focus,a:visited,a{text-decoration:none}body,canvas{-webkit-touch-callout:none}canvas{-webkit-user-select:none}img{font-size:0;border:0;outline:0;user-select:none}textarea{outline:none;border:none}:root{--bp-desktop: 1200px;--bp-tablet: 820px;--bp-mobile: 480px;--color-bg: #fcfcfc;--color-bg-alt: #d9e8f1;--color-bg-muted: #eff4f4;--color-highlight: #3932DC;--color-dark: #050419;--color-dark-alt: #373647;--color-text: #050419;--color-text-light: #fcfcfc;--color-text-muted: #585765;--color-text-disabled: #8c8c95;--color-text-subtle: #b2b1b8;--color-border: #e6e6e8;--color-border-dark: #373647;--font-ui: "Roboto", sans-serif;--font-body: "Roboto", sans-serif;--text-xs: 12px;--text-sm: 14px;--text-base: 18px;--text-lg: 24px;--text-xl: 36px;--text-2xl: 80px;--text-3xl: 96px;--tracking-wide: .72px;--tracking-tight: -.96px;--tracking-tighter: -1.44px;--tracking-tightest: -3.2px;--tracking-hero: -5.76px;--leading-none: 1;--leading-tight: .9;--leading-snug: 1.2;--leading-normal: 1.4;--space-xs: 12px;--space-sm: 18px;--space-md: 20px;--space-lg: 24px;--space-xl: 40px;--space-2xl: 48px;--space-3xl: 96px;--space-4xl: 128px;--space-5xl: 192px;--radius-sm: 2px;--radius-md: 12px;--radius-full: 156px;--btn-height: 40px;--header-height: 80px;--icon-size: 48px;--icon-lg: 96px;--ease-default: cubic-bezier(.25, 1, .5, 1)}@media (max-width: 820px){:root{--header-height: 64px}}::selection{background:#3932dc;color:#fff}.relative{position:relative}.fixed-full{position:fixed;inset:0}.z1{z-index:1}.z2{z-index:2}.dnone{display:none!important}.vhidden{visibility:hidden}.flx{display:flex}.flx-column{display:flex;flex-direction:column}.flx-center{display:flex;align-items:center;justify-content:center}.abs-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.space-between{justify-content:space-between}.align-center{align-items:center}.w-100{width:100%}.mh-100{min-height:100vh}.pb-30{padding-bottom:30px}.unselectable{user-select:none;pointer-events:none}.udragnone{user-select:none;-webkit-user-drag:none}.deviceorientation-activate.show{pointer-events:all;position:fixed;inset:0;z-index:100000;opacity:0}.btn{display:inline-flex;align-items:center;justify-content:center;height:var(--btn-height);padding:0 var(--space-md);border-radius:var(--radius-full);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;text-decoration:none;transition:opacity .3s var(--ease-default)}@media (pointer: fine){.btn:hover{opacity:.85}}.btn--dark{background-color:var(--color-dark);color:var(--color-text-light)}.btn--light{background-color:var(--color-bg);color:var(--color-text)}.pill-btn-span{position:relative;z-index:1}.pill-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:var(--radius-full);font-size:var(--text-sm);letter-spacing:.28px;text-transform:uppercase;text-decoration:none;transition:color .3s var(--ease-default)}.pill-btn--dark{background-color:var(--color-dark);color:var(--color-text-light)}.pill-btn--glass{background-color:#0504191a;backdrop-filter:blur(10px);color:var(--color-text)}.pill-btn--light{background-color:var(--color-bg);color:var(--color-text)}.pill-btn:disabled{pointer-events:none;opacity:.6}@media all and (pointer: fine){.pill-btn:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--radius-full);opacity:0;transition:opacity .3s var(--ease-default);background:var(--color-highlight)}.pill-btn:hover:before{opacity:1}.pill-btn:hover.pill-btn--glass{color:var(--color-text-light)}}.section-image{flex-shrink:0;width:400px;height:400px;border-radius:24px;overflow:hidden}.section-image img{width:100%;height:100%;object-fit:cover}@media all and (max-width: 1380px){.section-image{flex-shrink:unset!important}}@media (max-width: 1200px){.section-image{width:300px;height:300px}}@media (max-width: 820px){.section-image{width:200px;height:200px}}.sub-hero{display:flex;flex-direction:column;gap:var(--space-4xl);padding:256px 48px 96px;width:100%}.sub-hero .sub-hero__title{font-weight:500;font-size:var(--text-3xl);line-height:var(--leading-tight);letter-spacing:-3.84px;color:var(--color-text);opacity:0;transform:perspective(1000px) translate(50%) translate3d(-222.2px,88px,0) rotateY(60deg) rotateX(35deg);transition:opacity 1.5s cubic-bezier(.16,1,.3,1),transform 1.5s cubic-bezier(.16,1,.3,1)}.sub-hero .sub-hero__title span{display:block}.sub-hero .sub-hero__content{display:flex;align-items:flex-start;justify-content:space-between;width:100%}.sub-hero .sub-hero__icon{position:relative;flex-shrink:0;width:40px;height:40px;border-radius:6px;overflow:hidden;opacity:0;transform:translateY(120px);transition:opacity 1s ease .2s,transform 2s cubic-bezier(.16,1,.3,1) .2s}.sub-hero .sub-hero__icon:before{content:"";position:absolute;inset:0;background:var(--color-dark);border-radius:6px;z-index:0;transition:background-color .3s ease}.sub-hero .sub-hero__icon svg{position:relative;z-index:1;transition:transform .8s ease}.sub-hero .sub-hero__icon svg:last-child{position:absolute;inset:0;margin:auto;transform:translateY(-40px)}.sub-hero .sub-hero__body{display:flex;flex-direction:column;gap:48px;max-width:700px;opacity:0;transform:perspective(1000px) translate(50%) translate3d(-222.2px,88px,0) rotateY(60deg) rotateX(35deg);transition:opacity 1.5s cubic-bezier(.16,1,.3,1) .1s,transform 1.5s cubic-bezier(.16,1,.3,1) .1s}.sub-hero .sub-hero__text{font-size:var(--text-lg);line-height:var(--leading-snug);color:var(--color-text-muted)}.sub-hero.show .sub-hero__title{opacity:1;transform:perspective(1000px) translate(0) translateZ(0) rotateY(0) rotateX(0)}.sub-hero.show .sub-hero__icon{opacity:1;transform:translateY(0)}.sub-hero.show .sub-hero__body{opacity:1;transform:perspective(1000px) translate(0) translateZ(0) rotateY(0) rotateX(0)}@media (pointer: fine){.sub-hero__icon:hover:before{background:var(--color-highlight)}.sub-hero__icon:hover svg{transform:translateY(40px)}.sub-hero__icon:hover svg:last-child{transform:translateY(0)}}@media (max-width: 1200px){.sub-hero{gap:96px;padding:200px 40px 80px}.sub-hero .sub-hero__title{font-size:72px;letter-spacing:-2.88px}.sub-hero .sub-hero__body{max-width:550px}.sub-hero .sub-hero__text{font-size:20px}}@media (max-width: 820px){.sub-hero{gap:32px;padding:120px 24px 48px}.sub-hero .sub-hero__title{font-size:32px;line-height:1;letter-spacing:-1.28px}.sub-hero .sub-hero__content{flex-direction:column;gap:32px}.sub-hero .sub-hero__icon{display:none}.sub-hero .sub-hero__body{gap:32px;max-width:100%}.sub-hero .sub-hero__text{font-size:16px}}.sub-hero-image__overflow{width:100%;overflow:hidden}.sub-hero-image{padding:0 48px;width:100%;opacity:0;transform:perspective(1000px) translate3d(80px,60px,-60px);transition:opacity 1.3s cubic-bezier(.16,1,.3,1) .167s,transform 1.3s cubic-bezier(.16,1,.3,1) .167s}.sub-hero-image.show{opacity:1;transform:perspective(1000px) translateZ(0)}.sub-hero-image__wrapper{width:100%;background:#3932dc;border-radius:24px;overflow:hidden}.sub-hero-image__img{display:block;width:100%;height:auto;object-fit:cover}@media (max-width: 1200px){.sub-hero-image{padding:0 40px}.sub-hero-image__wrapper{border-radius:20px}}@media (max-width: 820px){.sub-hero-image{padding:0 24px}.sub-hero-image__wrapper{border-radius:12px}}.sub-section{display:flex;flex-direction:column;gap:var(--space-3xl);padding:var(--space-4xl) var(--space-2xl);width:100%}.sub-section .sub-section__title{font-weight:500;font-size:64px;line-height:var(--leading-none);letter-spacing:-2.56px;color:var(--color-text);max-width:700px;margin:0;opacity:0;transform:translateY(60px);transition:opacity 1s cubic-bezier(.16,1,.3,1) .4s,transform 1s cubic-bezier(.16,1,.3,1) .4s}.sub-section .sub-section__body{display:flex;justify-content:flex-end;width:100%;opacity:0;transform:translateY(60px);transition:opacity 1s cubic-bezier(.16,1,.3,1) .5s,transform 1s cubic-bezier(.16,1,.3,1) .5s}.sub-section .sub-section__body p{font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text-muted);max-width:800px;margin:0}.sub-section.show .sub-section__title,.sub-section.show .sub-section__body{opacity:1;transform:translateY(0)}@media (max-width: 1200px){.sub-section{gap:72px;padding:96px 40px}.sub-section .sub-section__title{font-size:48px;letter-spacing:-1.92px}.sub-section .sub-section__body p{max-width:600px}}@media (max-width: 820px){.sub-section{gap:32px;padding:48px 24px}.sub-section .sub-section__title{font-size:24px;line-height:1.1;letter-spacing:var(--tracking-tight)}.sub-section .sub-section__body{justify-content:flex-start}.sub-section .sub-section__body p{font-size:16px;max-width:100%}}.mission-bridge{position:relative;display:flex;flex-direction:column;align-items:center;padding:var(--space-5xl) var(--space-2xl);overflow:hidden;max-width:100vw}.mission-bridge__bg{position:absolute;inset:0;pointer-events:none}.mission-bridge__ellipse{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);overflow:visible}.mission-bridge__ellipse ellipse{fill:none;stroke:#585765;stroke-width:1;stroke-dasharray:2 4;animation:dash-move 8s linear infinite;animation-play-state:paused}.mission-bridge__ellipse--outer{width:clamp(600px,100vw + 100px,1500px);height:clamp(750px,(100vw + 100px) * 8 / 15,800px)}.mission-bridge__ellipse--outer ellipse{stroke-dashoffset:24}.mission-bridge__ellipse--inner{width:clamp(750px,(100vw + 100px) * 8 / 15,800px);height:clamp(750px,(100vw + 100px) * 8 / 15,800px)}.mission-bridge__ellipse--inner ellipse{animation-direction:reverse}.mission-bridge.show .mission-bridge__ellipse ellipse{animation-play-state:running}.mission-bridge__blur{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(1600px,120vw);height:400px;background:radial-gradient(ellipse at center,var(--color-bg) 0%,var(--color-bg) 45%,transparent 100%)}.mission-bridge__content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-2xl);text-align:center}.mission-bridge__logo{width:128px;height:128px;color:#0f32dc}.mission-bridge__logo .loader__logo{width:128px;height:128px}.mission-bridge__title{font-weight:500;font-size:var(--text-2xl);line-height:var(--leading-none);letter-spacing:var(--tracking-tightest);color:var(--color-text);max-width:1200px;margin:0}.mission-bridge__title-line{display:block}.mission-bridge__text{font-size:var(--text-lg);line-height:var(--leading-snug);color:var(--color-text-muted);max-width:800px;margin:0}.mission-bridge__cta{display:flex;gap:var(--space-lg)}@media (max-width: 820px){.mission-bridge__ellipse--outer{height:clamp(600px,(100vw + 100px) * 8 / 15,750px)}.mission-bridge__ellipse--inner{width:clamp(600px,(100vw + 100px) * 8 / 15,750px);height:clamp(600px,(100vw + 100px) * 8 / 15,750px)}}@media (max-width: 1200px){.mission-bridge{padding:var(--space-4xl) var(--space-xl)}.mission-bridge__title{font-size:64px;letter-spacing:-2.56px}.mission-bridge__text{font-size:20px;max-width:600px}}@media (max-width: 960px){.mission-bridge__title{font-size:6.6vw;letter-spacing:-.26vw}}@media (max-width: 820px){.mission-bridge{padding:var(--space-3xl) 24px}.mission-bridge__blur{width:100vw;height:300px}.mission-bridge__logo,.mission-bridge__logo .loader__logo{width:96px;height:96px}.mission-bridge__title{font-size:32px;letter-spacing:-1.28px}.mission-bridge__text{font-size:16px;max-width:530px}.mission-bridge__cta{flex-direction:column-reverse;gap:var(--space-xs);width:100%;max-width:280px}.mission-bridge__cta .pill-btn{width:100%}}@media (max-width: 520px){.mission-bridge__title-line{display:inline}}.accordion-drawer{display:flex;flex-direction:column;gap:var(--space-2xl);padding:0 var(--space-2xl);width:100%;opacity:0;transform:translateY(60px);transition:opacity 1s cubic-bezier(.16,1,.3,1) .5s,transform 1s cubic-bezier(.16,1,.3,1) .5s}.accordion-drawer.show{opacity:1;transform:translateY(0)}.accordion-drawer-item{border-bottom:1px solid var(--color-border)}.accordion-drawer-item__header{width:100%;padding-bottom:var(--space-2xl);gap:var(--space-lg)}.accordion-drawer-item__text{gap:16px}.accordion-drawer-item__number{display:flex;font-family:var(--font-ui);font-weight:500;font-size:64px;line-height:1;letter-spacing:-2.56px;color:var(--color-text-disabled)}.accordion-drawer-item__digit{position:relative;display:inline-block;overflow:hidden}.accordion-drawer-item__digit-default,.accordion-drawer-item__digit-hover{display:inline-block;transition:transform .4s var(--ease-default);transition-delay:calc(var(--digit-index) * 50ms)}.accordion-drawer-item__digit-default{position:relative}.accordion-drawer-item__digit-hover{position:absolute;top:0;left:0;color:var(--color-highlight);transform:translateY(100%)}.accordion-drawer-item__title{font-family:var(--font-ui);font-weight:500;font-size:64px;line-height:1;letter-spacing:-2.56px;color:var(--color-text)}.accordion-drawer-item__icon{flex-shrink:0;width:40px;height:20px;display:flex}.accordion-drawer-item__icon img{width:100%;height:100%;transition:transform .3s ease}.accordion-drawer-item__content{max-height:0;overflow:hidden;transition:max-height .8s ease}.accordion-drawer-item__content-inner{padding-top:var(--space-3xl);padding-bottom:var(--space-2xl)}@media (pointer: fine){.accordion-drawer-item__header:hover .accordion-drawer-item__digit-default{transform:translateY(-100%);transition-duration:.6s}.accordion-drawer-item__header:hover .accordion-drawer-item__digit-hover{transform:translateY(0);transition-duration:.6s}}.accordion-drawer-item--open .accordion-drawer-item__icon img{transform:rotate(180deg)}.accordion-drawer-item__layout{display:flex;gap:40px;width:100%;max-width:1400px;justify-content:space-between}.accordion-drawer-item__body{display:flex;flex-direction:column;gap:var(--space-2xl);max-width:800px}.accordion-drawer-item__subtitle{font-family:var(--font-ui);font-weight:500;font-size:var(--text-lg);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);color:var(--color-text);margin:0}.accordion-drawer-item__description{font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text-muted);margin:0}.accordion-drawer-item__bullets{display:flex;flex-direction:column;gap:var(--space-xl)}.accordion-drawer-item__bullet{display:flex;flex-direction:column;gap:var(--space-md)}.accordion-drawer-item__bullet h4{font-family:var(--font-ui);font-weight:500;font-size:var(--text-lg);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);color:var(--color-text)}.accordion-drawer-item__bullet p{font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text-muted)}@media (max-width: 1200px){.accordion-drawer-item__number,.accordion-drawer-item__title{font-size:48px;letter-spacing:-1.92px}.accordion-drawer-item__layout{gap:80px}}@media (max-width: 1080px){.accordion-drawer-item__layout,.outcome{gap:40px}}@media (max-width: 820px){.accordion-drawer{gap:var(--space-lg);padding:0 var(--space-lg)}.accordion-drawer-item__header{padding-bottom:var(--space-lg)}.accordion-drawer-item__number,.accordion-drawer-item__title{font-size:24px;line-height:1.1;letter-spacing:var(--tracking-tight)}.accordion-drawer-item__icon{width:12px;height:6px}.accordion-drawer-item__content-inner{padding-top:32px;padding-bottom:var(--space-lg)}.accordion-drawer-item__layout{flex-direction:column;gap:32px}.accordion-drawer-item__body{gap:32px}.accordion-drawer-item__subtitle{font-size:24px;line-height:1.1}.accordion-drawer-item__description{font-size:16px}.accordion-drawer-item__bullets{gap:32px}.accordion-drawer-item__bullet h4{font-size:24px;line-height:1.1}.accordion-drawer-item__bullet p{font-size:16px}}.apply-sections{overflow:visible}.apply-section-wrapper.sticky-stack__item{position:sticky;top:0;width:100%;overflow:hidden}.apply-section{position:relative;background:var(--color-bg);display:flex;justify-content:space-between;padding:var(--space-4xl) var(--space-2xl);border-bottom:1px solid var(--color-border);min-height:100vh;opacity:0;transform:perspective(1000px) translate3d(200px,0,-60px);transition:opacity 1.3s cubic-bezier(.16,1,.3,1) .167s,transform 1.3s cubic-bezier(.16,1,.3,1) .167s}.apply-section.show{opacity:1;transform:perspective(1000px) translateZ(0)}.apply-section .apply-section__side{flex:1}.apply-section .apply-section__title{font-size:var(--text-xl);font-weight:500;line-height:1.2;letter-spacing:-1.44px;color:var(--color-text);padding:0 24px 0 0}.apply-section .apply-section__content{display:flex;flex-direction:column;gap:var(--space-2xl);width:800px;flex-shrink:0}.apply-section .apply-section__text{font-size:var(--text-base);line-height:1.4;color:var(--color-text-muted);max-width:600px;margin:0}.apply-section .apply-section__image{width:100%;height:400px;border-radius:var(--radius-md);overflow:hidden;background:var(--color-highlight)}.apply-section .apply-section__img{width:100%;height:100%;object-fit:cover}.apply-section .apply-section__overlay{position:absolute;inset:0;background:#0000;pointer-events:none;z-index:10}@media (max-width: 1200px){.apply-section{gap:24px;padding:96px 40px}.apply-section .apply-section__content{width:600px}.apply-section .apply-section__image{height:320px}}@media (max-width: 820px){.apply-sections{width:100vw;overflow:hidden}.apply-section-wrapper.sticky-stack__item{position:relative}.apply-section{min-height:auto;flex-direction:column;gap:8px;padding:48px 24px}.apply-section .apply-section__title{font-size:24px;letter-spacing:-.96px;padding:0}.apply-section .apply-section__content{width:100%;gap:24px}.apply-section .apply-section__text{font-size:16px;max-width:100%}.apply-section .apply-section__image{height:280px}}.outcome{display:flex;gap:40px;width:100%;justify-content:space-between;max-width:1400px}@media (max-width: 1200px){.outcome{gap:80px}}@media (max-width: 820px){.outcome{flex-direction:column;gap:32px}}.outcome__content{flex-shrink:0;width:800px;gap:var(--space-2xl)}@media (max-width: 1200px){.outcome__content{width:100%}}.outcome__header{gap:12px}@media (max-width: 820px){.outcome__header{gap:var(--space-lg)}}.outcome__title{font-family:var(--font-ui);font-weight:500;font-size:var(--text-lg);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);color:var(--color-text)}@media (max-width: 820px){.outcome__title{line-height:1.1}}.outcome__subtitle{font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text-muted)}@media (max-width: 820px){.outcome__subtitle{font-size:16px}}.outcome__items{display:flex;gap:var(--space-xl)}@media (max-width: 1200px){.outcome__items{flex-direction:column}}.outcome-item{flex:1;gap:var(--space-2xl)}@media (max-width: 1200px){.outcome-item{gap:var(--space-lg)}}.outcome-item__number{font-family:var(--font-ui);font-weight:500;font-size:64px;line-height:var(--leading-none);letter-spacing:-2.56px;color:var(--color-text)}@media (max-width: 1200px){.outcome-item__number{font-size:48px;letter-spacing:-1.92px}}@media (max-width: 820px){.outcome-item__number{font-size:36px;letter-spacing:var(--tracking-tighter);line-height:var(--leading-snug)}}.outcome-item__text{gap:var(--space-md)}.outcome-item__title{font-family:var(--font-ui);font-weight:500;font-size:var(--text-lg);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);color:var(--color-text)}@media (max-width: 820px){.outcome-item__title{line-height:1.1}}.outcome-item__description{font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text-muted)}@media (max-width: 820px){.outcome-item__description{font-size:16px}}@media (max-width: 1080px){.outcome{gap:32px}}.vectr-engine{display:flex;flex-direction:column;gap:48px;width:100%;max-width:1400px;justify-self:flex-end}.vectr-engine__content{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;width:100%}.vectr-engine__content_wrapper{gap:var(--space-2xl)}.vectr-engine__text{display:flex;flex-direction:column;gap:32px;max-width:800px}.vectr-engine__title{font-family:var(--font-ui);font-weight:500;font-size:var(--text-lg);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);color:var(--color-text);margin:0}.vectr-engine__body{display:flex;flex-direction:column;gap:0}.vectr-engine__body p{font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text-muted);margin:0 0 1.4em}.vectr-engine__body p:last-child{margin-bottom:0}.vectr-engine__features{display:flex;gap:40px;width:100%}.vectr-engine__feature{display:flex;flex-direction:column;gap:20px;width:240px}.vectr-engine__feature-title{font-family:var(--font-ui);font-weight:500;font-size:var(--text-lg);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);color:var(--color-text);margin:0}.vectr-engine__feature-desc{font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text-muted);margin:0}@media (max-width: 1200px){.vectr-engine__feature{flex:1;width:auto}}@media (max-width: 820px){.vectr-engine{gap:48px}.vectr-engine__content{flex-direction:column-reverse;gap:32px}.vectr-engine__text{gap:32px}.vectr-engine__title{font-size:24px;line-height:1.1}.vectr-engine__body p{font-size:16px}.vectr-engine__features{flex-direction:column;gap:40px}.vectr-engine__feature{width:100%}.vectr-engine__feature-title{font-size:24px;line-height:1.1}.vectr-engine__feature-desc{font-size:16px}}.sticky-stack{display:flex;flex-direction:column}.sticky-stack__item{position:relative}.sticky-stack__item:nth-child(1){z-index:1}.sticky-stack__item:nth-child(2){z-index:2}.sticky-stack__item:nth-child(3){z-index:3}.sticky-stack__item:nth-child(4){z-index:4}.sticky-stack__item:nth-child(5){z-index:5}.sticky-stack__item:nth-child(6){z-index:6}.sticky-stack__item:nth-child(7){z-index:7}.sticky-stack__item:nth-child(8){z-index:8}.sticky-stack__item:nth-child(9){z-index:9}.sticky-stack__item:nth-child(10){z-index:10}.form{display:flex;flex-direction:column;gap:32px}.form__row{display:flex;gap:24px}@media (max-width: 820px){.form__row{flex-direction:column}}.form__field{position:relative;display:flex;flex-direction:column;gap:12px;flex:1}.form__field--full{width:100%}.form__label{font-family:var(--font-ui);font-weight:600;font-size:18px;line-height:1.4;color:var(--color-text)}@media (max-width: 820px){.form__label{font-size:14px}}.form__required{color:red}.form__input{height:48px;padding:0 24px;border:1px solid var(--color-text-subtle);border-radius:100px;font-family:var(--font-body);font-size:18px;line-height:1.4;color:var(--color-text);background:transparent;transition:border-color .2s var(--ease-default)}.form__input::placeholder{color:var(--color-text-subtle)}.form__input:-webkit-autofill,.form__input:-webkit-autofill:hover,.form__input:-webkit-autofill:focus,.form__input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--color-bg) inset!important;-webkit-text-fill-color:var(--color-text)!important;caret-color:var(--color-text)}.form__input:focus{outline:none;border-color:var(--color-highlight)}.form__input--error{border-color:red}@media (max-width: 820px){.form__input{height:40px;font-size:16px}.form__input::placeholder{font-size:14px}}.form__radio-group{display:flex;flex-direction:column;gap:16px}.form__radio-options{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}@media (max-width: 820px){.form__radio-options{flex-direction:column}}.form__radio{display:flex;align-items:center;gap:12px;cursor:pointer}.form__radio input{appearance:none;width:20px;height:20px;border:1px solid var(--color-text-subtle);border-radius:100px;cursor:pointer;transition:border-color .2s var(--ease-default),background-color .2s var(--ease-default)}.form__radio input:checked{border-color:var(--color-text);background-color:var(--color-text);box-shadow:inset 0 0 0 4px var(--color-bg)}.form__radio input:focus{outline:none;border-color:var(--color-highlight)}@media (pointer: fine){.form__radio:hover input:not(:checked){border-color:var(--color-highlight)}}.form__radio span{font-family:var(--font-body);font-size:14px;line-height:1.3;color:var(--color-text)}.form__disclaimer-wrap{display:flex;flex-direction:column;gap:4px}.form__disclaimer{font-family:var(--font-body);font-size:14px;line-height:1.3;color:var(--color-text)}.form__disclaimer a{text-decoration:underline;text-decoration-color:currentColor;color:inherit;transition:text-decoration-color .3s var(--ease-default)}@media (pointer: fine){.form__disclaimer a:hover{text-decoration-color:var(--color-highlight)}}.form__disclaimer-details{display:inline;font-size:14px;line-height:inherit;font-family:inherit}.form__disclaimer-details summary{display:inline-block;cursor:pointer;font:inherit;color:inherit;text-decoration:underline;text-decoration-color:currentColor;transition:text-decoration-color .3s var(--ease-default);list-style:none}.form__disclaimer-details summary::-webkit-details-marker{display:none}@media (pointer: fine){.form__disclaimer-details summary:hover{text-decoration-color:var(--color-highlight)}}.form__disclaimer-details[open] summary{display:none}.form__disclaimer-details>span{display:block;margin-top:8px;font-size:inherit;line-height:inherit;font-family:inherit}.form__error{position:absolute;left:0;bottom:-6px;font-size:12px;color:red;transform:translateY(100%)}.form__error:empty{display:none}@media (max-width: 820px){.form__error{position:relative;bottom:auto;transform:none;margin-top:-8px}}.form__success{padding:24px;background:var(--color-bg-muted);border-radius:12px;text-align:center}.form__success h3{font-family:var(--font-ui);font-weight:500;font-size:24px;margin-bottom:8px}.form__success p{font-size:16px;color:var(--color-text-muted)}.form__checkbox-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 24px}@media (max-width: 820px){.form__checkbox-grid{grid-template-columns:1fr;gap:20px}}.form__checkbox{display:flex;align-items:center;gap:12px;cursor:pointer}.form__checkbox input{position:absolute;opacity:0;width:0;height:0}.form__checkbox-icon{width:20px;height:20px;border:1px solid var(--color-text-subtle);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color .2s var(--ease-default),border-color .2s var(--ease-default)}.form__checkbox-icon svg{opacity:0;color:var(--color-bg);transition:opacity .2s var(--ease-default)}input:checked+.form__checkbox-icon{background:var(--color-text);border-color:var(--color-text)}input:checked+.form__checkbox-icon svg{opacity:1}input:focus+.form__checkbox-icon{border-color:var(--color-text)}.form__checkbox-label{font-family:var(--font-ui);font-size:18px;line-height:1.4;color:var(--color-text)}@media (max-width: 820px){.form__checkbox-label{font-size:14px}}.form__radio-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media (max-width: 820px){.form__radio-card-grid{grid-template-columns:1fr}}.form__radio-card{display:flex;align-items:center;justify-content:space-between;flex-direction:row-reverse;gap:12px;padding:12px;border:1px solid var(--color-text-subtle);border-radius:12px;cursor:pointer;transition:border-color .2s var(--ease-default)}.form__radio-card input{appearance:none;width:20px;height:20px;border:1px solid var(--color-text-subtle);border-radius:100px;flex-shrink:0;transition:border-color .2s var(--ease-default),background-color .2s var(--ease-default)}.form__radio-card input:checked{border-color:var(--color-text);background-color:var(--color-text);box-shadow:inset 0 0 0 4px var(--color-bg)}.form__radio-card input:focus{outline:none;border-color:var(--color-text)}.form__radio-card span{font-family:var(--font-ui);font-size:18px;line-height:1.4;color:var(--color-text)}@media (max-width: 820px){.form__radio-card span{font-size:14px}}.form__radio-card:has(input:checked){border-color:var(--color-text)}@media (pointer: fine){.form__radio-card:hover{border-color:var(--color-text)}}.form__textarea{padding:24px;border:1px solid var(--color-text-subtle);border-radius:12px;font-family:var(--font-body);font-size:18px;line-height:1.4;color:var(--color-text);background:transparent;resize:none;min-height:120px;transition:border-color .2s var(--ease-default)}.form__textarea::placeholder{color:var(--color-text-subtle)}.form__textarea:focus{outline:none;border-color:var(--color-text)}@media (max-width: 820px){.form__textarea{padding:16px;font-size:16px}.form__textarea::placeholder{font-size:14px}}.form__file-upload{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 24px;border:1px solid var(--color-text-subtle);border-radius:100px;cursor:pointer;transition:border-color .2s var(--ease-default)}.form__file-upload[hidden]{display:none}@media (pointer: fine){.form__file-upload:hover{border-color:var(--color-text)}}@media (max-width: 820px){.form__file-upload{height:40px}}.form__file-upload-text{font-family:var(--font-body);font-size:18px;line-height:1.4;color:var(--color-text-subtle)}@media (max-width: 820px){.form__file-upload-text{font-size:14px}}.form__file-upload svg{color:var(--color-text-subtle);flex-shrink:0}.form__file-input{position:absolute;width:0;height:0;opacity:0}.form__file-loading,.form__file-filled{display:flex;align-items:center;justify-content:space-between;gap:12px;height:48px;padding:0 24px;border:1px solid var(--color-text-subtle);border-radius:100px}@media (max-width: 820px){.form__file-loading,.form__file-filled{height:40px;padding:0 18px}}.form__file-loading[hidden],.form__file-filled[hidden]{display:none}.form__file-loading-text,.form__file-filled-name{font-family:var(--font-body);font-size:18px;line-height:1.4;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}@media (max-width: 820px){.form__file-loading-text,.form__file-filled-name{font-size:14px}}.form__file-loading-text{color:var(--color-text-subtle)}.form__file-spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--color-text-subtle);border-top-color:var(--color-text);flex-shrink:0;animation:form-file-spin .8s linear infinite}.form__file-remove{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-text);flex-shrink:0;transition:opacity .2s var(--ease-default)}@media (pointer: fine){.form__file-remove:hover{opacity:.6}}.form__file-remove svg{display:block}@keyframes form-file-spin{to{transform:rotate(360deg)}}.request-crew{display:flex;min-height:min(100vh - 80px,850px);margin-top:80px;overflow:hidden}@media (max-width: 820px){.request-crew{flex-direction:column;min-height:auto}}.request-crew__left{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:48px}.request-crew__left:after{content:"";position:absolute;top:0;right:0;width:1px;height:100%;background:var(--color-border);transform:scaleY(0);transform-origin:top center;transition:transform 1.5s cubic-bezier(.16,1,.3,1) .15s}@media (max-width: 820px){.request-crew__left{padding:48px 24px}.request-crew__left:after{display:none}}.request-crew__right{flex:1;display:flex;align-items:center;justify-content:center;padding:48px}@media (max-width: 820px){.request-crew__right{position:relative;padding:48px 24px}.request-crew__right:before{content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:var(--color-border);transform:scaleX(0);transform-origin:left center;transition:transform 1.5s cubic-bezier(.16,1,.3,1) .4s}}.request-crew__title{font-family:var(--font-ui);font-weight:500;font-size:64px;line-height:1;letter-spacing:-2.56px;color:var(--color-text);opacity:0;transform:perspective(1000px) translate(50%) translate3d(-222.2px,88px,0) rotateY(60deg) rotateX(35deg);transition:opacity 1.5s cubic-bezier(.16,1,.3,1),transform 1.5s cubic-bezier(.16,1,.3,1)}@media (max-width: 820px){.request-crew__title{font-size:32px;letter-spacing:-1.28px}}.request-crew__description{font-family:var(--font-body);font-size:24px;line-height:1.2;color:var(--color-text);opacity:0;transform:perspective(1000px) translate(50%) translate3d(-222.2px,88px,0) rotateY(60deg) rotateX(35deg);transition:opacity 1.5s cubic-bezier(.16,1,.3,1) .1s,transform 1.5s cubic-bezier(.16,1,.3,1) .1s}.request-crew__description p{margin:0}@media (max-width: 820px){.request-crew__description{font-size:16px;margin-top:32px}}.request-crew__form-wrapper{width:100%;max-width:524px}.request-crew__form-wrapper>.form>*{opacity:0;transform:translateY(60px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}.request-crew__form-wrapper>.form>:nth-child(1){transition-delay:.5s}.request-crew__form-wrapper>.form>:nth-child(2){transition-delay:.6s}.request-crew__form-wrapper>.form>:nth-child(3){transition-delay:.7s}.request-crew__form-wrapper>.form>:nth-child(4){transition-delay:.8s}.request-crew__form-wrapper>.form>:nth-child(5){transition-delay:.9s}.request-crew__form-wrapper>.form>:nth-child(6){transition-delay:1s}.request-crew__form-wrapper>.form>:nth-child(7){transition-delay:1.1s}.request-crew__form-wrapper>.form>:nth-child(8){transition-delay:1.2s}.request-crew.show .request-crew__left:after{transform:scaleY(1)}.request-crew.show .request-crew__title,.request-crew.show .request-crew__description{opacity:1;transform:perspective(1000px) translate(0) translateZ(0) rotateY(0) rotateX(0)}.request-crew.show .request-crew__form-wrapper>.form>*{opacity:1;transform:translateY(0)}.request-crew.show .request-crew__right:before{transform:scaleX(1)}.apply-modal{position:fixed;inset:0;z-index:1000;pointer-events:none;opacity:0;visibility:hidden;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px 140px;transition:opacity .3s var(--ease-default),visibility .3s var(--ease-default)}@media (max-width: 820px){.apply-modal{padding:64px 0 120px}}.apply-modal--close-inline{justify-content:flex-start}.apply-modal--close-inline .apply-modal__container{margin:0}.apply-modal--close-inline .apply-modal__close{position:relative;bottom:auto;left:auto;transform:none;margin-top:40px}.apply-modal.is-open{pointer-events:auto;opacity:1;visibility:visible}.apply-modal.is-open .apply-modal__overlay{opacity:1}.apply-modal.is-open .apply-modal__container{opacity:1;transform:scale(1)}.apply-modal.is-closing{pointer-events:none}.apply-modal.is-closing .apply-modal__overlay{opacity:0}.apply-modal.is-closing .apply-modal__container{opacity:0;transform:scale(.95)}.apply-modal__overlay{position:fixed;inset:0;background:#0f32dce6;backdrop-filter:blur(25px);opacity:0;transition:opacity .4s var(--ease-default);pointer-events:none}.apply-modal__container{position:relative;margin:auto;transform:scale(.95);display:flex;flex-direction:column;align-items:center;gap:32px;opacity:0;transition:opacity .3s var(--ease-default),transform .3s var(--ease-default)}@media (max-width: 820px){.apply-modal__container{gap:24px;width:calc(100% - 48px);max-width:327px}}.apply-modal__card{width:500px}@media (max-width: 820px){.apply-modal__card{width:100%}}.apply-modal__title{font-family:var(--font-ui);font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-.04em;color:var(--color-text);margin:0}@media (max-width: 820px){.apply-modal__title{font-size:20px;line-height:1.1}}.apply-modal__form{gap:24px}.apply-modal__close{position:fixed;display:flex;flex-direction:column;gap:8px;bottom:38px;z-index:100000000;left:50%;transform:translate(-50%);font-family:var(--font-ui);font-size:12px;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--color-bg);padding:16px;transition:opacity .2s var(--ease-default)}@media (pointer: fine){.apply-modal__close:hover{opacity:.7}.apply-modal__close:hover .am-close-line{transform:scaleX(0)}}.am-close-line{width:100%;height:1px;background:var(--color-bg);transition:transform .3s var(--ease-default);transform-origin:center}.modal-card{background:var(--color-bg);border:4px solid rgba(252,252,252,.1);border-radius:12px;padding:48px;display:flex;flex-direction:column;gap:32px}@media (max-width: 820px){.modal-card{padding:24px}}.modal-nav{display:flex;align-items:center;justify-content:space-between;width:100%}.modal-nav__arrow{width:40px;height:40px;padding:0;border:none;border-radius:6px;background:var(--color-text);color:var(--color-bg);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .3s var(--ease-default)}.modal-nav__arrow:disabled{background:#e6e6e8;color:#b2b1b8;pointer-events:none}@media (pointer: fine){.modal-nav__arrow:not(:disabled):hover{background:var(--color-highlight)}}.modal-nav__arrow svg{display:block}.modal-nav__counter{font-family:var(--font-ui);font-size:14px;line-height:1.4;color:var(--color-text);user-select:none}.modal-steps-wrapper{position:relative;width:500px;min-height:540px}@media (max-width: 820px){.modal-steps-wrapper{width:100%}}.modal-step{position:absolute;top:0;left:0;width:100%;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .6s var(--ease-default),transform .6s var(--ease-default)}.modal-step--active{position:relative;opacity:1;transform:translateY(0);pointer-events:auto;z-index:10}.modal-step--complete{opacity:1;transform:translateY(0) scale(.8);pointer-events:none;z-index:1}.modal-step--complete.modal-card{background:#fcfcfcb3;filter:blur(20px);transition:filter .9s var(--ease-default),background-color .9s var(--ease-default),transform .9s var(--ease-default)}.review-summary{display:flex;flex-direction:column;gap:24px}.review-summary__item{display:flex;flex-direction:column;gap:16px}.review-summary__item h4{font-family:var(--font-ui);font-weight:600;font-size:18px;line-height:1;color:var(--color-text);margin:0}@media (max-width: 820px){.review-summary__item h4{font-size:14px}}.review-summary__item--hidden{display:none}.review-summary__content{font-family:var(--font-ui);font-size:18px;line-height:1.4;color:var(--color-text)}@media (max-width: 820px){.review-summary__content{font-size:14px}}.review-summary__content p{margin:0}.modal-success{display:none}.modal-success--active{display:flex}.modal-success__title{font-family:var(--font-ui);font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-.04em;color:var(--color-text);margin:0}@media (max-width: 820px){.modal-success__title{line-height:1.1}}.modal-success__body{font-family:var(--font-ui);font-size:18px;line-height:1.4;color:var(--color-text);margin:0}@media (max-width: 820px){.modal-success__body{font-size:14px}}.modal-success__cta{width:100%;display:flex;justify-content:center}.apply-modal__close--hidden{display:none!important}@keyframes dash-move{to{stroke-dashoffset:-24}}@keyframes dash-move-reverse{to{stroke-dashoffset:48}}@keyframes draw-line{to{stroke-dashoffset:0}}@keyframes erase-line-outer{0%{stroke-dasharray:3700 3700;stroke-dashoffset:0}to{stroke-dasharray:0 3700;stroke-dashoffset:-3700}}@keyframes erase-line-inner{0%{stroke-dasharray:2520 2520;stroke-dashoffset:0}to{stroke-dasharray:0 2520;stroke-dashoffset:-2520}}@keyframes logo-rotate{0%{transform:rotate(-60deg)}to{transform:rotate(0)}}@keyframes cube-fade{0%{opacity:0}to{opacity:1}}@keyframes cube-slide{0%{transform:translate(var(--cube-tx),var(--cube-ty))}to{transform:translate(0)}}@keyframes fade-out{to{opacity:0;transform:translateY(-40px)}}#loader{position:fixed;inset:0;z-index:100000}#loader .loader__logo{color:var(--color-highlight);z-index:1;width:clamp(80px,min((100vw - 120px) * .064,(100vh - 60px) * .12),96px);height:clamp(80px,min((100vw - 120px) * .064,(100vh - 60px) * .12),96px);animation:logo-rotate 1.5s ease-out forwards}#loader .loader__logo .arrow-mask-line{stroke-dasharray:60;stroke-dashoffset:60;animation:draw-line .5s ease-out both .8s}#loader .loader__logo [id^=cube_]{animation:cube-fade .4s ease both,cube-slide .4s ease-out both}#loader .loader__logo #cube_01{--cube-tx: 0px;--cube-ty: -20px;animation-delay:0s}#loader .loader__logo #cube_02{--cube-tx: 14px;--cube-ty: -14px;animation-delay:.08s}#loader .loader__logo #cube_03{--cube-tx: 20px;--cube-ty: 0px;animation-delay:.16s}#loader .loader__logo #cube_04{--cube-tx: 14px;--cube-ty: 14px;animation-delay:.24s}#loader .loader__logo #cube_05{--cube-tx: 0px;--cube-ty: 20px;animation-delay:.32s}#loader .loader__logo #cube_06{--cube-tx: -14px;--cube-ty: 14px;animation-delay:.4s}#loader .loader__logo #cube_07{--cube-tx: -20px;--cube-ty: 0px;animation-delay:.48s}#loader .loader__logo #cube_08{--cube-tx: -14px;--cube-ty: -14px;animation-delay:.56s}#loader .loader__ellipse{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);overflow:visible}#loader .loader__ellipse ellipse{fill:none;stroke:#585765;stroke-width:1;stroke-dasharray:2 4;animation:dash-move 4s linear infinite}#loader .loader__ellipse--outer{width:1500px;max-width:calc(100vw - 120px);aspect-ratio:1500/800;max-height:calc(100vh - 60px)}#loader .loader__ellipse--outer ellipse{stroke-dashoffset:24}#loader .loader__ellipse--inner{width:800px;aspect-ratio:1;max-width:min(100vh - 60px,(100vw - 120px) * 8 / 15)}#loader .loader__ellipse .loader__draw{stroke-dasharray:3700;stroke-dashoffset:3700;animation:draw-line 2s ease-out forwards}#loader .loader__ellipse .loader__draw--inner{stroke-dasharray:2520;stroke-dashoffset:2520;animation:draw-line 1.8s ease-out forwards .2s}#loader.hide .loader__logo{animation:fade-out .6s ease forwards .5s}#loader.hide .loader__draw--outer{animation:erase-line-outer 2s ease both}#loader.hide .loader__draw--inner{animation:erase-line-inner 2s ease both .2s}@media (max-width: 820px){#loader .loader__logo{width:48px;height:48px}#loader .loader__ellipse--outer{width:330px;height:176px;max-width:none;max-height:none;aspect-ratio:auto}#loader .loader__ellipse--inner{width:176px;height:176px;max-width:none;aspect-ratio:auto}}html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:clip}.lenis.lenis-smooth iframe{pointer-events:none}header{position:fixed;top:0;left:0;width:100%;height:var(--header-height);padding:0 var(--space-sm) 0 2px;z-index:11;display:flex;align-items:center;justify-content:space-between;transition:transform 1.2s var(--ease-default);transform:translate3d(0,-100%,0)}header.show{transform:translateZ(0)}header .header__nav-left{display:flex;align-items:center}header .header__nav-left a{padding:16px;font-size:var(--text-xs);line-height:100%;font-weight:400;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text);text-decoration:none;transition:opacity .3s var(--ease-default),color .3s var(--ease-default)}@media (pointer: fine){header .header__nav-left a:hover{color:var(--color-highlight)}}header .header__logo{position:absolute;left:50%;transform:translate(-50%)}header .header__logo a{display:block;color:var(--color-text);padding:18px}header .header__logo svg{width:93px;height:16px}header .header__logo svg path{transition:fill .3s var(--ease-default)}@media (min-width: 769px){header.header--white .header__nav-left a{color:var(--color-text-light)}
.header__nav-left a .nav-char{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom}
.header__nav-left a .nav-char__a,.header__nav-left a .nav-char__b{display:block;transition:transform .5s var(--ease-default);transition-delay:var(--d,0s);will-change:transform}
.header__nav-left a .nav-char__a{color:inherit}
.header__nav-left a .nav-char__b{position:absolute;left:0;top:100%;color:#050419}
header.header--on-light .header__nav-left a .nav-char__a,header.header--on-light .header__nav-left a .nav-char__b{transform:translateY(-100%)}header.header--white .header__logo svg path{fill:var(--color-text-light)}header.header--white .pill-btn--glass{background-color:#fcfcfc26;color:var(--color-text-light)}}header .header__nav-right{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-lg);width:400px}header .header__nav-right .header__ctas{display:flex;align-items:center;gap:10px}@media (max-width: 820px){header{padding:0;background-color:transparent;transition:background-color .3s var(--ease-default),transform 1.2s var(--ease-default)}header .header__nav-left{display:none}header .header__logo{position:static;transform:none}header .header__logo svg{width:69px;height:12px}header .header__nav-right{z-index:8;width:auto;gap:var(--space-lg)}header .header__nav-right .header__ctas{display:none}header:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:#e6e6e8;opacity:0;transition:opacity .3s var(--ease-default)}header.sub-page,header.header--white{background-color:var(--color-bg)}header.sub-page:after,header.header--white:after{opacity:1}header.menu-open{background-color:transparent}header.menu-open:after{opacity:0}}html.preload .mobile-nav,html.preload .mobile-nav *,html.preload .mobile-nav__overlay{transition:none!important}.mobile-nav{display:none;position:fixed;top:0;left:0;width:100%;z-index:9;pointer-events:none}@media (max-width: 820px){.mobile-nav{display:block}}.mobile-nav__overlay{position:fixed;inset:0;background:#0504194d;backdrop-filter:blur(25px);opacity:0;pointer-events:none;z-index:9;transition:opacity .4s var(--ease-default)}.mobile-nav__panel-bg{position:absolute;top:12px;left:50%;transform:translate(-50%) translate3d(0,-40px,0);width:calc(100% - 24px);height:0;background:var(--color-bg);border-radius:24px;opacity:0;transition:opacity .3s var(--ease-default),transform .4s var(--ease-default),height .4s var(--ease-default)}.mobile-nav__panel{position:absolute;top:12px;left:50%;transform:translate(-50%);width:calc(100% - 24px);padding:64px 12px 12px;overflow:hidden;border-radius:24px}.mobile-nav__header{display:flex;justify-content:space-between;align-items:center;position:absolute;top:0;left:0;right:0;padding:var(--space-lg);opacity:0;transition:opacity .3s var(--ease-default)}.mobile-nav__logo .logo{width:80px;height:auto}.mobile-nav__close{padding:8px}.mobile-nav__close svg{display:block}.mobile-nav__list{display:flex;flex-direction:column;align-items:center}.mobile-nav__item{opacity:0;transform:translateY(40px);transition:opacity .6s var(--ease-default),transform .6s var(--ease-default)}.mobile-nav__item a{display:flex;padding:12px;font-size:var(--text-base);line-height:100%;letter-spacing:1.08px;text-transform:uppercase;color:var(--color-text);text-decoration:none;transition:opacity .3s var(--ease-default)}@media (pointer: fine){.mobile-nav__item a:hover{opacity:.7}}.mobile-nav__ctas{display:flex;flex-direction:column;gap:10px;margin-top:14px}.mncta{opacity:0;transform:translateY(40px);transition:opacity .6s var(--ease-default),transform .6s var(--ease-default)}.mobile-nav__cta{width:100%;justify-content:center}.mobile-nav__overlay.show{opacity:1;pointer-events:auto}.mobile-nav.is-open{pointer-events:auto}.mobile-nav.is-open .mobile-nav__panel-bg{opacity:1;height:280px;transform:translate(-50%) translateZ(0)}.mobile-nav.is-open .mobile-nav__header{opacity:1}.mobile-nav.is-open .mobile-nav__item,.mobile-nav.is-open .mncta{opacity:1;transform:translateY(0)}.mobile-nav.is-closing .mobile-nav__header,.mobile-nav.is-closing .mobile-nav__item,.mobile-nav.is-closing .mncta{opacity:0;transform:translateY(0);transition-delay:0s!important}.mobile-nav.is-closing .mobile-nav__panel-bg{transition-delay:.1s}.menu-btn{display:none;width:66px;height:64px;padding:0;background:none;border:none;position:relative;z-index:11}@media (max-width: 820px){.menu-btn{display:flex;align-items:center;justify-content:center}}.menu-btn__icon{display:block;position:relative;width:30px;height:10px}.menu-btn__line{position:absolute;left:0;width:30px;height:2px;background:var(--color-dark);transition:transform .3s var(--ease-default),opacity .3s var(--ease-default)}.menu-btn__line--1{top:0}.menu-btn__line--2{top:4px}.menu-btn__line--3{top:8px}.menu-btn[aria-expanded=true]{pointer-events:none}.hero-spacer{min-height:max(40svh,420px);width:100%}.hero{position:fixed;top:0;left:0;width:100%;height:100svh;display:flex;flex-direction:column;align-items:center;pointer-events:none}.hero .hero__content{display:flex;flex-direction:column;align-items:center;gap:var(--space-2xl);text-align:center;color:#050419;padding-top:var(--space-4xl)}.hero .hero__title{font-weight:500;font-size:var(--text-3xl);line-height:var(--leading-tight);letter-spacing:var(--tracking-hero);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;opacity:0;transform:perspective(1000px) translate(50%) translate3d(-222.2px,88px,0) rotateY(60deg) rotateX(35deg);transition:opacity 1.5s cubic-bezier(.16,1,.3,1),transform 1.5s cubic-bezier(.16,1,.3,1)}
.hero__title-name{font-family:var(--font-ui);font-size:13px;font-weight:500;line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-subtle);margin-bottom:20px}
.hero .hero__title span{display:block}.hero .hero__subtitle{max-width:620px;font-size:var(--text-lg);line-height:var(--leading-snug);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;opacity:0;transform:perspective(1000px) translate(50%) translate3d(-222.2px,88px,0) rotateY(60deg) rotateX(35deg);transition:opacity 1.5s cubic-bezier(.16,1,.3,1) .3s,transform 1.5s cubic-bezier(.16,1,.3,1) .3s}.hero .hero__subtitle br.sp{display:none}.hero .hero__subtitle span{display:block}.hero.show .hero__title,.hero.show .hero__subtitle{opacity:1;transform:perspective(1000px) translate(0) translateZ(0) rotateY(0) rotateX(0)}.hero.show .hero__scroll-btn>span:after{transform:scaleX(1) translateZ(0)}.hero.show .hsbtn-in{transform:translateZ(0)}.hero.hide .hsbtn-in{transform:translate3d(0,calc(100% + 7px),0);transition:transform .35s ease}.hero.hide .hero__scroll-btn>span:after{transform:scaleX(0) translateZ(0);transition:transform .4s cubic-bezier(.55,0,1,.45) .1s}.hero .hero__scroll-btn{white-space:nowrap;position:absolute;bottom:var(--space-2xl);left:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:center;height:var(--btn-height);padding:0 var(--space-md);font-size:14px;font-weight:400;line-height:normal;letter-spacing:.28px;text-transform:uppercase}.hero .hero__scroll-btn>span{overflow:hidden;position:relative;padding:0 0 8px}.hero .hero__scroll-btn>span:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0) translateZ(0);transition:transform .9s cubic-bezier(.16,1,.3,1) .25s}.hsbtn-in{display:flex;transform:translate3d(0,calc(100% + 7px),0);transition:transform 1.5s cubic-bezier(.16,1,.3,1) .65s}@media (max-width: 1024px){.hero .hero__content{padding-top:100px;gap:32px}.hero .hero__title{font-size:64px;letter-spacing:-3px}.hero .hero__subtitle{font-size:var(--text-base)}}@media (max-width: 820px){.hero .hero__content{padding-top:126px;padding-left:var(--space-md);padding-right:var(--space-md);gap:var(--space-lg)}.hero .hero__title{font-size:64px;letter-spacing:-2px}.hero .hero__subtitle{font-size:16px;max-width:280px}.hero .hero__subtitle br.sp{display:none}.hero .hero__subtitle span{display:inline}.hero .hero__scroll-btn{bottom:32px;font-size:11px}}.flow{--flow-height-multiplier: 1;position:relative;height:calc(456svh * var(--flow-height-multiplier));width:100%}.flow__wrapper{position:sticky;top:0;width:100%;height:100svh;display:flex;align-items:flex-end}.flow__steps{position:relative;padding:var(--space-2xl);display:flex;flex-direction:column;width:max-content}.flow__step{display:flex;flex-direction:column;backface-visibility:hidden}.flow__header{display:flex;align-items:center;gap:var(--space-md);cursor:pointer}.flow__step--active .flow__header{cursor:default;pointer-events:none}.flow__number{display:flex;align-items:center;justify-content:center;width:var(--icon-size);height:var(--icon-size);border-radius:var(--radius-md);font-family:var(--font-ui);font-weight:500;font-size:var(--text-sm);color:var(--color-text);flex-shrink:0;position:relative}.flow__number span{position:relative;z-index:1}.flow__number:before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--color-bg);transform:scale(0);transition:transform .5s cubic-bezier(.16,1,.3,1)}.flow__title{font-family:var(--font-ui);font-weight:500;font-size:var(--text-lg);line-height:1.3;color:var(--color-text);margin:0;transform:scale(.5833);transform-origin:left center;transition:transform .5s cubic-bezier(.16,1,.3,1)}.flow__body{display:grid;grid-template-rows:0px 0fr;overflow:hidden;transition:grid-template-rows .6s cubic-bezier(.16,1,.3,1)}.flow__body:before{content:"";min-height:0;overflow:hidden}.flow__body-inner{display:flex;gap:var(--space-md);min-height:0;overflow:hidden}.flow__track{display:flex;align-items:center;justify-content:center;width:var(--icon-size);height:100%;flex-shrink:0}.flow__track-bar{width:2px;height:100%;background:#05041933;border-radius:var(--radius-sm);position:relative;overflow:hidden}.flow__track-fill{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color-dark);transform:scaleY(0);transform-origin:top center}.flow__description{font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text-muted);max-width:500px;margin:0;opacity:0;transform:translateY(8px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}.flow__step--active .flow__number:before{transform:scale(1);transition-duration:.6s}.flow__step--active .flow__title{transform:scale(1);line-height:var(--leading-snug)}.flow__step--active .flow__body{grid-template-rows:var(--space-lg) 1fr}.flow__step--active .flow__description{opacity:1;transform:translateY(0);transition-delay:.15s}@media (max-width: 820px){.flow{--flow-height-multiplier: 1.25}.flow__wrapper{height:100dvh}.flow__steps{padding:24px;bottom:0;left:0}.flow__description{max-width:280px;font-size:16px}.flow__step--active .flow__title{transform:scale(1)}.flow__title{font-size:20px;transform:scale(.7)}.flow__number{width:40px;height:40px}.flow__track{width:40px}}.features{position:relative;width:100%;height:400vh;background:var(--color-bg)}.features__sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:var(--space-3xl);padding:var(--space-5xl) var(--space-xl)}.features__sticky .features__title{font-weight:500;font-size:64px;line-height:var(--leading-none);letter-spacing:var(--tracking-tightest);color:var(--color-text)}.features__sticky .features__grid{display:flex;gap:var(--space-xl);width:100%}.feature-item{flex:1;min-width:0;padding-left:var(--space-lg);border-left:1px solid var(--color-border)}.feature-item .feature-item__content{display:flex;flex-direction:column;gap:var(--space-2xl)}.feature-item .feature-item__icon{width:96px;height:96px;display:flex;align-items:center;justify-content:center}.feature-item .feature-item__icon img{max-width:100%;max-height:100%;object-fit:contain}.feature-item .feature-item__text{display:flex;flex-direction:column;gap:var(--space-md)}.feature-item .feature-item__title{font-weight:500;font-size:var(--text-lg);line-height:var(--leading-none);letter-spacing:var(--tracking-tight);color:var(--color-text)}.feature-item .feature-item__description{font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text-muted)}@media (max-width: 1200px){.features{height:auto}.features__sticky{position:static;height:auto;padding:120px var(--space-xl);gap:64px}.features__sticky .features__title{font-size:56px;letter-spacing:-2px}.features__sticky .features__grid{flex-wrap:wrap;gap:32px}.feature-item{flex:1 1 calc(50% - 16px);min-width:280px;gap:32px}.feature-item .feature-item__title{font-size:20px}}@media (max-width: 820px){.features__sticky{padding:80px 24px;gap:96px}.features__sticky .features__title{font-size:32px;letter-spacing:-1.5px}.features__sticky .features__grid{flex-direction:column;gap:var(--space-2xl)}.feature-item{flex:1 1 100%;gap:32px;padding-left:0;padding-bottom:48px;border-left:none;border-bottom:1px solid var(--color-border)}.feature-item:last-child{border-bottom:none;padding-bottom:0}.feature-item .feature-item__title{font-size:var(--text-base)}.feature-item .feature-item__content{gap:32px}}.standards{padding:var(--space-5xl) var(--space-xl);background-color:var(--color-bg)}.standards__container{display:flex;align-items:center;gap:134px}.standards__image{width:800px;height:400px;border-radius:24px;overflow:hidden}.standards__image img{object-fit:cover;height:100%}.standards__content{min-width:570px;max-width:570px;display:flex;flex-direction:column;gap:var(--space-2xl)}.standards__title{font-weight:500;font-size:64px;line-height:var(--leading-none);letter-spacing:-2.56px;color:var(--color-text)}.standards__title span{display:block}.standards__description{font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text-muted)}@media (max-width: 1280px){.standards{padding:120px var(--space-xl)}.standards__container{gap:64px}.standards__image{width:50%;height:350px}.standards__title{font-size:48px;letter-spacing:-2px}}@media (max-width: 1079px){.standards__container{flex-direction:column;gap:48px;align-items:flex-start}.standards{padding:0 24px 96px}.standards__image{width:100%;height:auto;aspect-ratio:2/1;border-radius:var(--radius-md)}.standards__content{max-width:600px;min-width:auto}}@media (max-width: 820px){.standards__content{gap:32px}.standards__title{font-size:32px;letter-spacing:-1.28px}.standards__description{font-size:17px}}.faq{position:relative;width:100%;background-color:var(--color-bg);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);padding:0 var(--space-2xl)}.faq .faq__container{display:flex;gap:48px;max-width:1600px;margin:0 auto}.faq .faq__left,.faq .faq__right{padding:var(--space-4xl) 0}.faq .faq__left{flex:1;max-width:704px}.faq .faq__right{flex:1;display:flex;flex-direction:column}.faq .faq__title{font-weight:500;font-size:64px;line-height:var(--leading-none);letter-spacing:var(--tracking-tightest);color:var(--color-text);margin:0}.faq_split_bar{min-height:0;width:1px;background-color:var(--color-border)}.faq-item{border-bottom:1px solid var(--color-border)}.faq-item:first-child{margin-top:-48px}.faq-item .faq-item__header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);padding:48px 0;text-align:left}.faq-item .faq-item__question{font-weight:500;font-size:var(--text-lg);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);color:var(--color-text)}.faq-item .faq-item__icon{flex-shrink:0;width:40px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:#050419;transition:background .3s ease}.faq-item .faq-item__icon img{width:100%;height:100%;transition:transform .3s ease;transform:rotate(180deg)}.faq-item .faq-item__content{max-height:0;overflow:hidden;transition:max-height .6s ease,padding .5s ease}.faq-item .faq-item__answer{font-size:var(--text-base);line-height:1.5;color:var(--color-text-muted);margin:0;padding-bottom:32px}@media (pointer: fine){.faq-item .faq-item__header:hover .faq-item__icon{background:var(--color-highlight)}}.faq-item.faq-item--open .faq-item__icon img{transform:rotate(0)}@media (max-width: 1200px){.faq{padding:120px var(--space-xl)}.faq .faq__title{font-size:56px;letter-spacing:-2px}.faq-item .faq-item__question{font-size:20px}.faq-item .faq-item__answer{font-size:16px}}@media all and (max-width: 1080px){.faq__container{flex-direction:column}.faq .faq__left,.faq .faq__right{max-width:100%;padding:0}.faq_split_bar{width:100%;height:1px}.faq-item:last-child{border-bottom:none}}@media (max-width: 820px){.faq{padding:0 var(--space-lg)}.faq .faq__container{flex-direction:column;gap:var(--space-2xl);padding-bottom:12px}.faq .faq__left{flex:none;max-width:100%;padding-top:var(--space-3xl)}.faq .faq__title{font-size:32px;letter-spacing:-1.28px}.faq-item:first-child{border-top:none}.faq-item .faq-item__header{gap:var(--space-xs);padding:var(--space-2xl) 0}.faq-item .faq-item__question{font-size:20px}.faq-item .faq-item__icon{width:40px;height:24px}.faq-item .faq-item__answer{font-size:16px;line-height:var(--leading-normal);padding-bottom:var(--space-2xl)}.faq-item .faq-item__content{margin-top:-16px}}.cta-section{position:relative;width:100%;background-color:var(--color-dark);border-bottom:1px solid var(--color-border-dark);padding:var(--space-4xl) var(--space-xl);display:flex;flex-direction:column;gap:var(--space-2xl)}.cta-section .cta-section__title{font-weight:500;font-size:var(--text-2xl);line-height:var(--leading-none);letter-spacing:var(--tracking-tightest);color:var(--color-text-light);margin:0}.cta-section .cta-section__title span{display:block}.cta-section .cta-section__subtitle{font-size:24px;line-height:1.2;color:#b2b1b8;margin:0;max-width:600px}@media (max-width: 1200px){.cta-section{padding:var(--space-3xl) var(--space-xl)}.cta-section .cta-section__title{font-size:56px;letter-spacing:-2px}}@media (max-width: 820px){.cta-section{padding:48px 24px;gap:48px}.cta-section .cta-section__title{font-size:32px;letter-spacing:-1.5px}.cta-section .cta-section__subtitle{font-size:18px}.cta-section .cta-section__title span{display:inline}}.industry-card{gap:48px}.industry-card .industry-card__image{position:relative;height:400px;border-radius:24px;overflow:hidden}.industry-card .industry-card__img{width:100%;height:100%;object-fit:cover}.industry-card .industry-card__title{font-family:var(--font-ui);font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-.96px;color:var(--color-text);margin:0;max-width:600px}.industry-card .industry-card__services{display:flex;flex-direction:column;gap:20px;list-style:none;padding:0;margin:0}.industry-card .industry-card__service{font-size:20px;line-height:1.2;letter-spacing:-.8px;color:var(--color-text);text-transform:capitalize}.industry-card .industry-card__divider{height:1px;background:#d9d9d9}@media (max-width: 820px){.industry-card{gap:24px}.industry-card .industry-card__image{height:auto;aspect-ratio:2/1;border-radius:12px}.industry-card .industry-card__title{font-size:20px;letter-spacing:-.8px}.industry-card .industry-card__services{gap:14px}.industry-card .industry-card__service{font-size:16px;letter-spacing:-.64px}}.industries-title{font-size:var(--text-xl);font-weight:500;line-height:120%;letter-spacing:-1.44px;padding:48px;opacity:0;transform:translateY(60px);transition:opacity 1s cubic-bezier(.16,1,.3,1) .4s,transform 1s cubic-bezier(.16,1,.3,1) .4s}.industries-title.show{opacity:1;transform:translateY(0)}.industry-section{border-bottom:1px solid #d9d9d9;overflow:visible;opacity:0;transform:translateY(60px);transition:opacity 1s cubic-bezier(.16,1,.3,1) .5s,transform 1s cubic-bezier(.16,1,.3,1) .5s}.industry-section.show{opacity:1;transform:translateY(0)}.industry-row-wrapper{position:sticky;top:0}.industry-row{position:relative;display:flex;gap:48px;padding:96px 48px;background:var(--color-bg);justify-content:space-between}.industry-row__nav{flex-shrink:0;padding-top:24px;align-self:flex-start}.industry-row__card{flex:1;max-width:800px}.industry-row__overlay{position:absolute;inset:0;background:#0000;pointer-events:none;z-index:10}.industry-nav{display:flex;flex-direction:column;gap:12px}.industry-nav__item{font-family:var(--font-ui);font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-.96px;color:var(--color-text-subtle);text-decoration:none;transition:color .3s var(--ease-default)}.industry-nav__item.is-active{color:var(--color-text)}@media (pointer: fine){.industry-nav__item:hover{color:var(--color-text)}}@media (max-width: 820px){.industry-row-wrapper{position:relative}.industry-row{flex-direction:column;padding:64px 24px;min-height:auto}.industry-row__nav{display:none}.industry-row__card{max-width:100%}}.stat-carousel-section{justify-content:flex-end;padding:48px;opacity:0;transform:translateY(60px);transition:opacity 1s cubic-bezier(.16,1,.3,1) .35s,transform 1s cubic-bezier(.16,1,.3,1) .35s}.stat-carousel-section.show{opacity:1;transform:translateY(0)}.stat-carousel{display:flex;flex-direction:column;gap:32px;max-width:800px;width:100%}.stat-carousel__slide{display:none}.stat-carousel__slide.is-active{display:block}.stat-card{display:flex;align-items:flex-start;justify-content:space-between;background-color:var(--color-dark);border-radius:24px;height:400px;padding:48px}.stat-card__text{display:flex;flex-direction:column;gap:24px;color:var(--color-text-light)}.stat-card__value{font-family:var(--font-ui);font-weight:600;font-size:128px;line-height:1.1;letter-spacing:-5.12px}.stat-card__description{font-family:var(--font-ui);font-weight:500;font-size:var(--text-xl);line-height:var(--leading-snug);letter-spacing:var(--tracking-tighter)}.stat-card__grid{display:flex;flex-wrap:wrap;width:300px;flex-shrink:0;align-content:flex-start}.stat-card__dot{width:30px;height:30px;border-radius:50%}.stat-card__dot--filled{background-color:#0f32dc}.stat-card__dot--unfilled{background-color:var(--color-text-light)}.stat-carousel__indicators{gap:12px}.stat-carousel__indicator{width:60px;height:2px;border-radius:10px;background-color:var(--color-text-subtle);transition:background-color .3s var(--ease-default)}.stat-carousel__indicator.is-active{background-color:var(--color-dark)}@media (pointer: fine){.stat-carousel__indicator:hover{background-color:var(--color-dark)}}.stat-carousel__arrows{gap:12px}.stat-carousel__arrow{width:60px;height:40px;border-radius:12px;background-color:var(--color-dark);transition:opacity .3s var(--ease-default)}.stat-carousel__arrow:disabled{opacity:.3;pointer-events:none}@media (pointer: fine){.stat-carousel__arrow:hover{opacity:.85}}.stat-carousel__chevron{width:24px;height:auto}.stat-carousel__chevron--down{transform:rotate(180deg)}@media (max-width: 820px){.stat-carousel-section{padding:24px}}@media (max-width: 820px){.stat-carousel{gap:24px}.stat-card{flex-direction:column;align-items:flex-start;height:auto;border-radius:12px;padding:24px;gap:24px}.stat-card__text{gap:32px}.stat-card__value{font-size:64px;letter-spacing:-2.56px}.stat-card__description{font-weight:600;font-size:20px;line-height:var(--leading-normal)}.stat-card__grid{width:270px}.stat-card__dot{width:27px;height:27px}.stat-carousel__indicator{width:30px}.stat-carousel__arrow{width:40px;height:40px;border-radius:10px}}.privacy-layout{display:flex;gap:96px;padding:96px 48px 296px;justify-content:space-between;max-width:1400px}.privacy-layout__nav{flex-shrink:0;position:sticky;top:96px;align-self:flex-start;opacity:0;transform:translate(80px);transition:opacity 1.3s cubic-bezier(.16,1,.3,1) .25s,transform 1.3s cubic-bezier(.16,1,.3,1) .25s}.privacy-layout.show .privacy-layout__nav{opacity:1;transform:translate(0)}.privacy-layout__body{flex:1;max-width:800px;overflow:hidden}.privacy-nav{display:flex;flex-direction:column;gap:12px}.privacy-nav__item{font-family:var(--font-ui);font-weight:500;font-size:18px;line-height:1.2;letter-spacing:-.72px;color:var(--color-text-subtle);text-decoration:none;transition:color .2s var(--ease-default)}.privacy-nav__item.is-active{color:var(--color-text)}@media (pointer: fine){.privacy-nav__item:hover{color:var(--color-text)}}.privacy-sections{display:flex;flex-direction:column;gap:64px;opacity:0;transform:translate(80px);transition:opacity 1.3s cubic-bezier(.16,1,.3,1) .35s,transform 1.3s cubic-bezier(.16,1,.3,1) .35s}.privacy-layout.show .privacy-sections{opacity:1;transform:translate(0)}.privacy-sections__updated{font-size:var(--text-sm);color:var(--color-text-subtle)}.privacy-section{display:flex;flex-direction:column;gap:24px}.privacy-section__title{font-size:var(--text-lg);font-weight:500;line-height:var(--leading-snug);letter-spacing:var(--tracking-tight)}.privacy-section__content{font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text-muted)}.privacy-section__content p{margin:0 0 16px}.privacy-section__content p:last-child{margin-bottom:0}.privacy-section__content ul,.privacy-section__content ol{margin:0 0 16px;padding-left:24px}.privacy-section__content li{margin-bottom:8px}.privacy-section__content a{color:var(--color-text);text-decoration:underline}.privacy-contact{padding-top:32px;border-top:1px solid var(--color-border)}.privacy-contact p{margin:0 0 8px;font-size:var(--text-base);color:var(--color-text-muted)}.privacy-contact p:last-child{margin-bottom:0}.privacy-contact a{color:var(--color-text)}@media (max-width: 820px){.privacy-layout{flex-direction:column;padding:64px 24px}.privacy-layout__nav{display:none}.privacy-layout__body{max-width:100%}.privacy-sections{gap:48px}.privacy-section__title{font-size:20px}}.privacy-request__layout{max-width:800px;margin:0 auto;padding:64px 48px 160px;display:flex;flex-direction:column;gap:48px}.privacy-request__intro,.privacy-request__alternatives{display:flex;flex-direction:column;gap:16px;font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text-muted)}.privacy-request__intro h2,.privacy-request__alternatives h2{font-size:var(--text-lg);font-weight:500;line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);color:var(--color-text)}.privacy-request__intro p,.privacy-request__alternatives p{margin:0}.privacy-request__intro a,.privacy-request__alternatives a{color:var(--color-text);text-decoration:underline}.privacy-request__alternatives{padding-top:32px;border-top:1px solid var(--color-border)}.privacy-request__alternatives ul{list-style:none;display:flex;flex-direction:column;gap:16px}.privacy-request__alternatives small{font-size:var(--text-sm);color:var(--color-text-subtle)}@media (max-width: 820px){.privacy-request__layout{padding:48px 24px 96px;gap:32px}}.footer{width:100%;background-color:var(--color-dark)}.footer-nav{display:flex;width:100%;height:200px;border-bottom:1px solid var(--color-border-dark)}.footer-nav-btn{flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-2xl);height:100%;text-decoration:none;border-right:1px solid var(--color-border-dark);position:relative;overflow:hidden}.footer-nav-btn:last-child{border-right:none}.footer-nav-btn .footer-nav-btn__bg{position:absolute;inset:0;z-index:0;background-color:var(--color-bg);transform:scaleX(0);transform-origin:left center;transition:transform .8s var(--ease-default)}.footer-nav-btn .footer-nav-btn__label{position:relative;z-index:1;font-weight:500;font-size:var(--text-xl);line-height:var(--leading-snug);letter-spacing:var(--tracking-tighter);color:var(--color-text-light);transition:transform .8s var(--ease-default),color .8s var(--ease-default)}.footer-nav-btn .footer-nav-btn__arrows{position:relative;z-index:1;width:23px;height:32px;overflow:hidden}.footer-nav-btn .footer-nav-btn__arrow{position:absolute;top:0;width:23px;height:32px;transition:transform .8s var(--ease-default)}.footer-nav-btn .footer-nav-btn__arrow--current{left:0}.footer-nav-btn .footer-nav-btn__arrow--next{left:-100%}@media all and (pointer: fine){.footer-nav-btn:hover .footer-nav-btn__bg{transform:scaleX(1)}.footer-nav-btn:hover .footer-nav-btn__label{color:var(--color-dark);transform:translate(10px)}.footer-nav-btn:hover .footer-nav-btn__arrow--current{transform:translate(200%)}.footer-nav-btn:hover .footer-nav-btn__arrow--next{transform:translate(100%)}}.footer__bottom{display:flex;flex-direction:column;gap:var(--space-2xl);padding:var(--space-2xl)}.footer__logo{width:100%;height:auto;overflow:hidden}.footer__logo path{transform:translateY(calc(100% + 2px))}.footer__bottom.is-visible .footer__logo path{transform:translateY(0);transition:transform .8s var(--ease-default)}.footer__bottom.is-visible .footer__logo path:nth-child(1){transition-delay:0s}.footer__bottom.is-visible .footer__logo path:nth-child(2){transition-delay:.06s}.footer__bottom.is-visible .footer__logo path:nth-child(3){transition-delay:.12s}.footer__bottom.is-visible .footer__logo path:nth-child(4){transition-delay:.18s}.footer__bottom.is-visible .footer__logo path:nth-child(5){transition-delay:.24s}.footer__meta{display:flex;align-items:center;gap:var(--space-lg);font-size:var(--text-sm);line-height:var(--leading-normal)}.footer__copyright{margin-right:auto;color:var(--color-text-disabled)}.footer__privacy{position:relative;color:var(--color-text-light)}.footer__privacy:after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background-color:var(--color-highlight);transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--ease-default)}.footer__credit{color:var(--color-text-disabled);transition:color .3s var(--ease-default)}@media all and (pointer: fine){.footer__privacy:hover:after{transform:scaleX(1)}.footer__credit:hover{color:var(--color-text-light)}}@media (max-width: 1200px){.footer-nav{height:160px}.footer-nav-btn{padding:0 var(--space-lg)}.footer-nav-btn .footer-nav-btn__label{font-size:28px}}@media (max-width: 820px){.footer-nav{flex-direction:column;height:auto;border-top:1px solid var(--color-border-dark)}.footer-nav-btn{flex:none;height:72px;border-right:none;border-bottom:1px solid var(--color-border-dark);padding:0 var(--space-lg)}.footer-nav-btn:last-child{border-bottom:none}.footer-nav-btn .footer-nav-btn__label{font-size:20px;letter-spacing:var(--tracking-tight)}.footer-nav-btn .footer-nav-btn__arrows,.footer-nav-btn .footer-nav-btn__arrow{width:18px;height:26px}.footer__bottom{padding:var(--space-2xl) var(--space-lg);gap:var(--space-2xl)}.footer__meta{flex-wrap:wrap;row-gap:var(--space-lg)}.footer__copyright{flex:1}.footer__credit{width:100%}}body{font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}canvas{position:fixed;top:0;left:0;user-select:none;pointer-events:none;touch-action:pan-y;z-index:-1;opacity:0;transition:opacity .7s ease-out}canvas.is-ready{opacity:1}body.debug canvas{opacity:1!important}#app{position:relative;pointer-events:none}.lil-gui{top:initial!important;bottom:0}.transition-pages{position:fixed;inset:0;z-index:9;pointer-events:none}.transition-pages:before,.transition-pages:after{content:"";position:absolute;inset:0}.transition-pages:before{background-color:#000;opacity:0}.transition-pages:after{background-color:var(--color-bg);transform-origin:right top;transform:rotate(-90deg) translateZ(0)}.transition-pages.to-home:after{background-color:#d0e1eb}.transition-pages.show:after{transform:rotate(0) translateZ(0);transition:transform .72s ease-in-out}.transition-pages.show:before{opacity:.2;transition:opacity .6s ease-in-out}.transition-pages.hide:before{opacity:0;display:none}.transition-pages.hide:after{transform:rotate(-90deg) translateZ(0);transition:none}@media (max-width: 980px){.transition-pages.show:after{transition:transform .45s ease-in-out}.transition-pages.show:before{transition:opacity .35s ease-in-out}}@media all and (max-width: 820px){br.pc{display:none}}#app[data-astro-cid-5hce7sga]{width:100%;height:100%;overflow:hidden}#app[data-astro-cid-5hce7sga]>canvas[data-astro-cid-5hce7sga]{z-index:-1}


/* ============================================================
   Portfolio supplemental styles (Vishnujan Narayanan)
   Builds on the reference design tokens — no token/color edits.
   ============================================================ */

/* Vanta NET background lives full-screen behind everything (continuous,
   like the reference's fixed Three.js canvas). Light blue-grey scene. */
#app{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}
#vanta-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
body{background-color:#1b2236}
/* content pages sit on a solid surface (no Vanta behind text) */
.subpage-body{background-color:#1b2236}

/* Text logo replacing the Vectr SVG */
.logo-text{font-family:"Inter",sans-serif;font-weight:700;font-size:24px;letter-spacing:-1px;color:var(--color-dark);line-height:1;display:inline-block}
.footer__logo.logo-text,.footer .logo-text{color:var(--color-text-light)}

/* Reveal utilities (vanilla IntersectionObserver) */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.show{opacity:1;transform:none}
.feature-item__content{opacity:0;transform:translateY(80px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.feature-item__content.show{opacity:1;transform:none}
html.no-js .reveal,html.no-js .feature-item__content{opacity:1;transform:none}

/* Projects (features grid) */
.feature-item__num{font-family:"Inter",sans-serif;font-weight:500;font-size:40px;letter-spacing:-1px;color:var(--color-text-subtle)}
a.feature-item{text-decoration:none;color:inherit;transition:border-left-color .3s ease}
a.feature-item:hover{border-left-color:var(--color-highlight)}
.proj-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.proj-tag{font-family:var(--font-ui);font-size:12px;letter-spacing:.4px;padding:4px 10px;border:1px solid var(--color-border);border-radius:999px;color:var(--color-text-muted)}

/* Skills (reuses .standards layout) */
.skills-groups{display:flex;flex-direction:column;gap:32px}
.skill-group{display:flex;flex-direction:column;gap:12px}
.skill-group__name{font-family:var(--font-ui);font-size:14px;text-transform:uppercase;letter-spacing:.72px;color:var(--color-text-muted)}
.skill-tags{display:flex;flex-wrap:wrap;gap:8px}
.skill-tag{font-family:var(--font-ui);font-size:14px;padding:6px 12px;border:1px solid var(--color-border);border-radius:999px;color:var(--color-text)}
.placeholder-box{background:var(--color-bg-muted);display:flex;align-items:center;justify-content:center}
.placeholder-box .logo-text{font-size:120px;color:var(--color-text-subtle)}

/* Chevron icon inside accordion (replaces img) */
.faq-item__icon svg{width:16px;height:16px;transition:transform .3s ease;transform:rotate(180deg)}
.faq-item--open .faq-item__icon svg{transform:rotate(0)}
.faq-item__icon svg path{stroke:var(--color-text-light)}

/* ---- Sub-page chrome (project + blog pages) ---- */
.breadcrumb{font-family:var(--font-ui);font-size:14px;color:var(--color-text-muted);padding:120px var(--space-xl) 0;max-width:840px;margin:0 auto}
.breadcrumb a{color:var(--color-text-muted)}
.breadcrumb a:hover{color:var(--color-highlight)}
.breadcrumb span{color:var(--color-text-subtle);margin:0 8px}

.article{max-width:760px;margin:0 auto;padding:32px var(--space-xl) var(--space-4xl)}
.article h1{font-family:"Inter",sans-serif;font-weight:500;font-size:48px;line-height:1.05;letter-spacing:-1.5px;color:var(--color-text);margin-bottom:16px}
.article .meta{font-family:var(--font-ui);font-size:14px;color:var(--color-text-muted);margin-bottom:32px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.article h2{font-family:"Inter",sans-serif;font-weight:500;font-size:28px;letter-spacing:-.5px;color:var(--color-text);margin:40px 0 12px}
.article p{font-size:18px;line-height:1.65;color:var(--color-text-muted);margin-bottom:20px}
.article ul{margin:0 0 20px 22px;list-style:disc}
.article li{font-size:18px;line-height:1.6;color:var(--color-text-muted);margin-bottom:8px}
.article a{color:var(--color-highlight)}
.article .back{display:inline-block;margin-top:40px;font-family:var(--font-ui);font-size:14px;color:var(--color-highlight)}
.tech-list{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 8px}
.tech-list span{font-family:var(--font-ui);font-size:14px;padding:6px 12px;border:1px solid var(--color-border);border-radius:999px;color:var(--color-text)}
.gh-btn{margin-top:24px}

/* Blog index */
.page-head{padding:140px var(--space-xl) 0;max-width:900px;margin:0 auto}
.page-head h1{font-family:"Inter",sans-serif;font-weight:500;font-size:56px;letter-spacing:-2px;color:var(--color-text)}
.page-head p{font-size:18px;color:var(--color-text-muted);margin-top:12px;max-width:620px}
.post-list{max-width:900px;margin:0 auto;padding:24px var(--space-xl) var(--space-4xl);display:flex;flex-direction:column}
.post-card{display:block;text-decoration:none;padding:40px 0;border-bottom:1px solid var(--color-border)}
.post-card:first-child{border-top:1px solid var(--color-border)}
.post-card__title{font-family:"Inter",sans-serif;font-weight:500;font-size:28px;letter-spacing:-.5px;color:var(--color-text);margin-bottom:10px}
.post-card:hover .post-card__title{color:var(--color-highlight)}
.post-card__meta{font-family:var(--font-ui);font-size:13px;color:var(--color-text-muted);margin-bottom:12px;display:flex;gap:16px;flex-wrap:wrap}
.post-card__excerpt{font-size:17px;line-height:1.6;color:var(--color-text-muted)}

@media (max-width:820px){
  .article h1{font-size:36px}
  .page-head h1{font-size:40px}
  .breadcrumb{padding-top:110px}
}

body.nav-open{overflow:hidden}

/* --- scroll / layering fixes (hero overlap + projects length) --- */
.flow,.features,.standards,.faq,.cta-section{position:relative;z-index:2}
/* Hero sits ABOVE the scrolling sections (was z-index:1, below the flow) so its
   exit animation paints over the flow's opaque sky instead of being covered by it
   as the flow scrolls up. Safe because .hero is pointer-events:none + transparent,
   and its text is opacity:0 once exited, so it never blocks or hides the sections. */
.hero{z-index:3}
.features{height:150vh}
.hero__content,.hero__scroll-btn{will-change:opacity,transform}

.flow__title a{color:inherit;text-decoration:none}

/* Hero exit is TRIGGERED by scroll (main.js toggles .hero--leaving past a
   threshold) but PLAYED by CSS at a fixed duration — scroll position no longer
   scrubs it frame-by-frame. Exit = the entrance mirrored to the opposite
   (top-left) corner, rotation kept at the entrance values. Removing the class
   eases everything back to the resting .hero.show state. The .hero.show prefix
   gives the specificity to beat the resting/arrival rules. Easing is a fast-
   start curve (no slow ease-in ramp) so motion begins the instant it triggers. */
.hero.show.hero--leaving .hero__title,.hero.show.hero--leaving .hero__subtitle{opacity:0;transform:perspective(1000px) translate(-50%) translate3d(222.2px,-88px,0) rotateY(60deg) rotateX(35deg);transition:opacity .35s cubic-bezier(.2,0,0,1),transform .35s cubic-bezier(.2,0,0,1)}
/* scroll cue leaves with it: label slides back down out of the clip, underline retracts */
.hero.show.hero--leaving .hsbtn-in{transform:translate3d(0,calc(100% + 7px),0);transition:transform .6s cubic-bezier(.2,0,0,1)}
.hero.show.hero--leaving .hero__scroll-btn>span:after{transform:scaleX(0) translateZ(0);transition:transform .4s var(--ease-default)}
/* Return (scroll back up) gets its own fast, synced transition instead of the
   slow 1.5s entrance one (which also staggers the subtitle .3s behind the
   title) — that combination read as a hesitant, half-finished return. Same
   selector specificity as .hero--leaving above; main.js keeps the two classes
   mutually exclusive so there's no rule-order ambiguity. */
.hero.show.hero--returning .hero__title,.hero.show.hero--returning .hero__subtitle{transition:opacity .4s cubic-bezier(.2,0,0,1),transform .4s cubic-bezier(.2,0,0,1)}
.hero.show.hero--returning .hsbtn-in{transition:transform .4s cubic-bezier(.2,0,0,1)}

/* ============================================================
   Continuous light scene (revision 2026-06-15)
   The hero AND flow are transparent so the single fixed Vanta net
   shows through both, exactly like the reference's continuous canvas.
   ============================================================ */

/* Hero is transparent so the Vanta net shows behind it; the scene is
   light, so the text stays dark (base .hero colour = --color-text). */
.hero{background:transparent}.hero .hero__content{position:relative;z-index:1}

/* Give the hero its own full screen: the flow must start below the
   fold so its cards never paint over the fixed hero before you scroll. */
/* 200svh reserves room for the two-phase hero exit: ~1 viewport of pinned
   zoom-out, then ~1 viewport for the hero to scroll up off the top before the
   flow section begins (see updateHeroExit in main.js). */
.hero-spacer{min-height:316svh}/* 300 base + 16 (HERO_DWELL 0.16·vh) for the fullscreen checkpoint dwell */

/* ============================================================
   Flow — three.js parallax journey (2026-06-16)
   500vh section; the wrapper pins for one screen and four stages
   slide left. A transparent three.js canvas (.flow__gl) renders the
   depth scene behind the DOM content; the journey spine stays pinned.
   ============================================================ */
.flow{height:500vh;background:transparent}
.flow__wrapper{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

/* Airy light sky (hue cross-fades via JS) + soft indigo horizon glow */
.flow__sky{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#d0e1eb 0%,#dfe9f2 55%,#eef3f8 100%)}
/* Horizon glow removed: its rgba(77,139,255,.08) radial tinted the bottom of flow,
   making flow's end ~rgb(198,218,237) vs the writing section's bare #d0e1eb — a subtle
   shade seam. Now flow bottoms out at the same #d0e1eb contour bg as writing. */
.flow__horizon{display:none}

/* three.js canvas — between sky and content */
.flow__gl{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}

/* Horizontal track of four full-viewport stages */
.flow__track{position:absolute;inset:0;z-index:2;display:flex;width:400vw;height:100%;will-change:transform}
/* No overflow clip here: a per-panel clip slices flying cards exactly at the
   seam between zones (the "cut off" feeling). The outer .flow__wrapper already
   clips at the screen edge, so cards can hand off across the seam unbroken. */
.flow-panel{position:relative;flex:0 0 100vw;width:100vw;height:100%}

/* Stage content (z3, over the floats) */
.flow-panel__floats{position:absolute;inset:0;z-index:1;pointer-events:none}
.flow-panel__content{position:absolute;z-index:3;left:clamp(24px,6vw,120px);top:50%;transform:translateY(-58%);max-width:min(46vw,540px);will-change:transform,opacity}
.flow-panel__index{display:block;font-family:var(--font-ui);font-weight:500;font-size:var(--text-sm);letter-spacing:.28em;color:var(--color-highlight);margin-bottom:18px}
.flow-panel__title{font-family:"Inter",sans-serif;font-weight:600;font-size:clamp(48px,7vw,104px);line-height:.92;letter-spacing:-.03em;color:var(--color-text);margin:0}
.flow-panel__sub{margin:24px 0 0;font-size:var(--text-lg);line-height:1.35;color:var(--color-text-muted);max-width:480px}
.flow-panel__pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.flow-panel__pill{font-family:var(--font-ui);font-size:12px;letter-spacing:.02em;padding:7px 14px;border:1px solid rgba(57,50,220,.25);border-radius:999px;color:var(--color-highlight);background:rgba(255,255,255,.72)}
/* The whole .flow-panel__content block now slides in from the mid-right and
   sticks at its rest spot (JS-driven, see flow.js) — no per-letter reel. The
   title text renders plainly; line breaks come from the <br> in the markup. */
.flow-panel__title{white-space:pre-line}
/* index / sub / pills ride the active/passed hand-off as a grouped slide+fade */
.flow-panel__content .flow-panel__index,.flow-panel__content .flow-panel__sub,.flow-panel__content .flow-panel__pills{opacity:0;transform:translateY(26px);transition:opacity .5s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.flow-panel--passed .flow-panel__content .flow-panel__index,.flow-panel--passed .flow-panel__content .flow-panel__sub,.flow-panel--passed .flow-panel__content .flow-panel__pills{opacity:0;transform:translateY(-26px)}
.flow-panel--active .flow-panel__content .flow-panel__index{opacity:1;transform:none;transition-delay:.06s}
.flow-panel--active .flow-panel__content .flow-panel__sub{opacity:1;transform:none;transition-delay:.16s}
.flow-panel--active .flow-panel__content .flow-panel__pills{opacity:1;transform:none;transition-delay:.24s}

/* Side vertical labels (top-right) */

/* Floating data cards */
.flow-card{position:absolute;width:230px;background:rgba(255,255,255,.92);border:1px solid rgba(5,4,25,.08);border-radius:14px;padding:16px 18px;box-shadow:0 18px 40px -16px rgba(5,4,25,.28)}
.flow-card--focal{width:268px;padding:18px 20px;box-shadow:0 30px 64px -20px rgba(57,50,220,.45)}
.flow-card__shot{width:100%;height:104px;border-radius:8px;margin-bottom:12px;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--color-highlight),var(--color-dark))}
.flow-card--focal .flow-card__shot{height:130px}
.flow-card__shot::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.14) 0 8px,transparent 8px 16px)}
.flow-card__name{font-family:"Inter",sans-serif;font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--color-text);margin:0}
.flow-card__tool{font-family:"Inter",sans-serif;font-weight:600;font-size:22px;letter-spacing:-.02em;color:var(--color-text);margin:0}
.flow-card--focal .flow-card__tool{font-size:28px}
.flow-card__line{font-size:13px;line-height:1.45;color:var(--color-text-muted);margin:8px 0 0}
.flow-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.flow-card__tag{font-family:var(--font-ui);font-size:11px;padding:3px 9px;border:1px solid var(--color-border);border-radius:999px;color:var(--color-text-muted);background:rgba(255,255,255,.6)}

/* Journey spine — pinned at the bottom of the pinned wrapper */
.flow-journey{position:absolute;left:0;right:0;bottom:0;z-index:4;height:170px;pointer-events:none;opacity:0;transition:opacity .5s var(--ease-default)}
.flow-journey.is-live{opacity:1}
.flow-journey__svg{position:absolute;left:0;top:0;width:100%;height:150px;overflow:visible}
.flow-journey__line{fill:none;stroke:rgba(57,50,220,.22);stroke-width:2}
.flow-journey__fill{fill:none;stroke:var(--color-highlight);stroke-width:2.5;stroke-linecap:round}
.flow-journey__nodes{position:absolute;inset:0;overflow:visible}
.flow-journey__node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:0;padding:0;pointer-events:auto;cursor:pointer;opacity:0;transition:opacity .3s var(--ease-default)}
.flow-journey__node--in{opacity:1}
.flow-journey__zone{font-family:var(--font-ui);font-size:9px;letter-spacing:.22em;color:var(--color-text-subtle);opacity:.7;transition:opacity .3s,color .3s}
.flow-journey__dot{width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid rgba(57,50,220,.4);transition:width .35s var(--ease-default),height .35s var(--ease-default),background-color .35s,border-color .35s,box-shadow .35s}
.flow-journey__name{font-family:var(--font-ui);font-size:11px;letter-spacing:.02em;color:var(--color-text-muted);white-space:nowrap;opacity:0;transform:translateY(-4px);transition:opacity .35s,transform .35s,color .35s}
.flow-journey__node--active .flow-journey__dot{width:20px;height:20px;background:var(--color-highlight);border-color:var(--color-highlight);box-shadow:0 0 0 6px rgba(57,50,220,.14)}
.flow-journey__node--active .flow-journey__name{opacity:1;transform:translateY(0);color:var(--color-text)}
.flow-journey__node--active .flow-journey__zone{color:var(--color-highlight);opacity:1}
@media (pointer:fine){.flow-journey__node:hover .flow-journey__name{opacity:1;transform:translateY(0)}.flow-journey__node:not(.flow-journey__node--active):hover .flow-journey__dot{border-color:var(--color-highlight);box-shadow:0 0 0 5px rgba(57,50,220,.10)}.flow-journey__node:hover .flow-journey__zone{color:var(--color-highlight);opacity:1}}

/* ---- Mobile: drop the pin + GL, stack the four stages ---- */
@media (max-width:820px){
  .flow{height:auto}
  .flow__wrapper{position:relative;height:auto;overflow:visible}
  .flow__gl,.flow__sky,.flow__horizon,.flow-journey{display:none}
  .flow__track{position:relative;flex-direction:column;width:100%;transform:none!important}
  .flow-panel{width:100%;height:auto;padding:88px 24px 40px;background:linear-gradient(180deg,#e8eef7,#f5f6f9)}
  .flow-panel:nth-child(2){background:linear-gradient(180deg,#eaedf5,#f6f6f9)}
  .flow-panel:nth-child(3){background:linear-gradient(180deg,#ece8f6,#f7f5fb)}
  .flow-panel:nth-child(4){background:linear-gradient(180deg,#e6eef2,#f6f8f8)}
  .flow-panel__content{position:relative;left:auto;top:auto;transform:none!important;opacity:1!important;max-width:100%}
  .flow-panel__title{font-size:clamp(40px,11vw,60px)}
  /* No JS-driven active state on mobile — force the content + its parts visible */
  .flow-panel__content .flow-panel__index,.flow-panel__content .flow-panel__sub,.flow-panel__content .flow-panel__pills{opacity:1!important;transform:none!important}
  .flow-panel__floats{position:relative;inset:auto;display:flex;flex-direction:column;gap:14px;margin-top:32px;pointer-events:auto}
  .flow-card{position:relative!important;left:auto!important;top:auto!important;width:100%!important;transform:none!important;opacity:1!important;backdrop-filter:none;background:#fff}
  .flow-card--focal{width:100%!important}
}
/* ---- Flow 3D image objects (desktop GL replaces the DOM card floats) ---- */
/* The reference's global `canvas{opacity:0}` (only `canvas.is-ready` is shown)
   was hiding our WebGL canvases — they never get .is-ready. Force them visible. */
.flow__gl,#vanta-bg canvas,#bg-contours,#hero-contours,#writing-contours,.section-contours,.term-side-contours{opacity:1}
@media (min-width:821px){.flow--gl .flow-panel__floats{display:none}}

/* Scroll cue: white text. Exit = reverse of its entrance (label slides back down into the
   clip, underline retracts right→left), but FASTER. Toggled by .is-exiting on scroll start. */
.hero .hero__scroll-btn{color:#050419}
.hero.show .hero__scroll-btn.is-exiting .hsbtn-in{transform:translate3d(0,calc(100% + 7px),0);transition-duration:.13s;transition-timing-function:cubic-bezier(.4,0,1,1)}
.hero.show .hero__scroll-btn.is-exiting>span:after{transform:scaleX(0) translateZ(0);transition-duration:.11s;transition-delay:0s}

/* Header over the hero: white "Hire Me" + white, slightly larger left nav links. */
.pill-btn--glass{color:#050419}
header .header__nav-left a{color:#050419;font-size:16px}

/* Tool-logo marquee behind the hero (z-index 2 < hero 3; later opaque sections cover it).
   Rows scroll horizontally with page scroll; fades in as the hero zooms out. */
.hero-video{position:fixed;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;background:#000;pointer-events:none;will-change:transform}.tool-marquee{position:fixed;inset:0;z-index:1;pointer-events:none;display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,2.4vh,34px);overflow:hidden;opacity:0;will-change:transform}
.tool-marquee__row{display:flex;align-items:center;gap:clamp(28px,4vw,72px);white-space:nowrap;will-change:transform}
.tool-marquee__word{font-size:clamp(42px,9vh,118px);line-height:.95;letter-spacing:-.02em;text-transform:uppercase}
/* Two clearly-different fonts, both FILLED (mirrors the reference's serif + sans rows). */
/* Top row: high-contrast serif display (Brier-like), filled darker blue than the cert CTA. */
.tool-marquee__row.is-top .tool-marquee__word{font-family:'Bodoni Moda',Georgia,serif;font-weight:900;font-style:italic;letter-spacing:0;color:#6f9be8}
/* Bottom row: bold grotesque sans, filled white. */
.tool-marquee__row.is-bottom .tool-marquee__word{font-family:'Roboto Flex',Inter,system-ui,sans-serif;font-weight:800;color:#fff}

/* Background swap (dynamic-bg-swap): hero now shows the light flow-sky gradient as its
   zoom-out image; the shader (#vanta-bg) is the global background revealed behind it AND
   shown through the flow (flow__sky forced transparent — beats flow.js's inline paint). */
.hero .hero__bg{position:absolute;inset:0;z-index:0;background:rgb(208,225,235)}
.flow .flow__sky{background:transparent!important}

/* Flow titles over the dark shader background → white */
.flow .flow-panel__title{color:var(--flow-title-col,#4d8bff)}

/* Journey wheel/spine → bright blue (over the dark flow background) */
.flow-journey__line{stroke:rgba(var(--journey-rgb,77,139,255),.25)}
.flow-journey__fill{stroke:rgb(var(--journey-rgb,77,139,255))}
.flow-journey__dot{border-color:rgba(var(--journey-rgb,77,139,255),.5)}
.flow-journey__node--active .flow-journey__dot{background:rgb(var(--journey-rgb,77,139,255));border-color:rgb(var(--journey-rgb,77,139,255));box-shadow:0 0 0 6px rgba(var(--journey-rgb,77,139,255),.16)}
.flow-journey__node--active .flow-journey__zone{color:rgb(var(--journey-rgb,77,139,255))}
.flow-journey__node:hover .flow-journey__zone{color:rgb(var(--journey-rgb,77,139,255))}
.flow-journey__node:not(.flow-journey__node--active):hover .flow-journey__dot{border-color:rgb(var(--journey-rgb,77,139,255));box-shadow:0 0 0 5px rgba(var(--journey-rgb,77,139,255),.12)}
.flow-journey__name{color:rgba(255,255,255,.75)}
.flow-journey__node--active .flow-journey__name{color:#fff}

/* Flow zone meta text → readable on dark bg (was indigo/blue) */
.flow .flow-panel__index{color:var(--flow-index-col,#fff)}
.flow .flow-panel__sub{color:var(--flow-sub-col,rgba(255,255,255,.82))}
.flow .flow-panel__pill{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08)}

/* Global topographic blue-contour background plane (canvas drawn in main.js):
   one fixed layer shared by the hero zoom-out reveal and the flow section. Sits above
   the shader (#vanta-bg, z-1) and below all content. */
#bg-contours{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}

/* Hero contour canvas (darker shade, same field as #bg-contours) */
.hero .hero__bg #hero-contours{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}


/* ============================================================
   WRITING — hover-driven horizontal accordion (per reference)
   Left: section heading. Right (anchored): thin vertical colour strips
   (rail = vertical label + number). Hovering/focusing a strip expands
   it by ONE fixed content column (--cw) to reveal the post; the other
   strips shift along and exactly ONE is open at a time (first by
   default). CSS-only. Mobile → plain full-width blocks.
   ============================================================ */
.writing{
  --strip:clamp(64px,7vw,108px);     /* collapsed strip width */
  --cw:230px;                        /* fixed width a panel opens by — a constant px (no vw) so the open text column never resizes with the viewport. Smaller = narrower open panel; the freed width spreads to every closed strip via flex-grow. */
  --h:clamp(540px,82vh,880px);
  position:relative;z-index:2;background:transparent;color:#fff;
  /* 100vh visible + 30vh DWELL (the pin holds the revealed blog while the fan-out plays — like the
     hero's phase-1→2 checkpoint dwell) + 100vh sticky window for features to slide over. */
  height:230vh;
}
/* Stage holds the layout centred (timed reveal fires on a threshold, main.js — not scroll-pinned). */
.writing__pin{position:sticky;top:0;height:100vh;
  display:flex;align-items:center;overflow:hidden;background:transparent}
/* Section-local contour plane (drawn in main.js, same field as #bg-contours). It carries a
   VERTICAL light→dark wash that mirrors the flow's zone-4→zone-1 look: zone-4 light blue with
   dark lines at the TOP, easing down to zone-1 dark navy with light-blue lines at the BOTTOM. */
#writing-contours{position:absolute;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}
/* Empty left pad stays transparent so the fixed #bg-contours plane (the flow
   section's organic-line background) shows through as a continuation. Only the
   strips carry their own solid backgrounds, so the contours read on the left only. */

/* Left pad — holds the section intro (title + description); strips sit on the right.
   position/z-index lifts it above the #writing-contours canvas (z-index:0). Colours are
   dark to read on the light-blue contour field the left side shows at the reveal. */
.writing__pad{flex:0 0 clamp(120px,26vw,520px);align-self:stretch;position:relative;z-index:2;display:flex;align-items:flex-start;padding:calc(50vh - var(--h)/2) clamp(20px,3vw,56px) 0}
.writing__intro{max-width:360px}
.writing__eyebrow{display:inline-block;font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#26a269;margin-bottom:14px}
.writing__title{font-family:"Inter",sans-serif;font-weight:600;font-size:clamp(40px,5vw,68px);line-height:.98;letter-spacing:-.03em;color:#1b2236;margin:0}
.writing__desc{margin:18px 0 0;font-size:clamp(14px,1.1vw,16px);line-height:1.6;color:rgba(27,34,54,.8);max-width:34ch}

/* Strip group fills the remaining width on the right. Collapsed panels SHARE that width
   (flex-grow:1 below), so the group always stays full — it never shrinks and one panel always
   reads as open. The open panel takes a fixed content column on top of its share. */
.wstack{flex:1 1 auto;min-width:0;display:flex;align-items:center;height:var(--h)}

.wpanel{
  position:relative;display:flex;overflow:hidden;min-width:0;
  flex:1 1 0;                         /* grow:1 shrink:1 stay CONSTANT — only the basis below changes */
  align-self:center;height:var(--ph,100%);   /* subtle height taper: far-left slightly shorter */
  background:var(--bg);
  /* Bleed each panel's own colour to the RIGHT so the seam where it meets the next panel is
     always covered during the fan-out (per-panel scale/tilt opens small gaps). Two layers: a
     SOLID near-bleed that fully covers the seam, then a SOFT (blurred) fade so the bleed has no
     hard outer edge — otherwise that edge reads as a thin line in the gaps. */
  box-shadow:14px 0 0 0 var(--bg), 26px 0 18px -8px var(--bg);
  will-change:flex-basis,transform;   /* transform = the JS fly-in reveal (main.js) */
  /* The hover accordion animates ONLY flex-basis (not flex-grow): grow/shrink stay constant so
     the free-space redistribution is monotonic — no per-frame wobble. Gentle ease at both ends. */
  transition:flex-basis .95s cubic-bezier(.32,0,.16,1) 70ms;
}
/* --ph = panel height: a GENTLE taper (far-left ~91% → front 100%) for a touch of depth. */
/* z-index rises left→right: leftmost panel sits at the BOTTOM, rightmost on TOP (so each
   panel's right-bleed covers the seam with the panel to its right). */
.wpanel:nth-child(1){--bg:#3b518a;--ph:80%;z-index:1}
.wpanel:nth-child(2){--bg:#293754;--ph:90%;z-index:2}
.wpanel:nth-child(3){--bg:#161d2e;--ph:100%;z-index:3}
/* NOTE: the open panel deliberately KEEPS its own left→right z-index (it must stay BELOW its
   right neighbour) — its content is clipped to its own panel by overflow:hidden, so it never
   needs to overlap the neighbour. Lifting it above would push its blurred right-bleed shadow
   (box-shadow on .wpanel) over the next panel, softening that panel's edge. */

/* Open state: ONLY flex-basis changes (grow/shrink constant at 1/1). The open panel
   carries +(--strip + --cw) of basis, so it ends up exactly one content column wider
   than the others while every panel still shares the leftover space — fills the width,
   never overflows, and animates smoothly.
   Which panel is open is driven SOLELY by the `is-open` class set in main.js (on
   mouseenter, and on focusin for keyboard) — one open at a time. We deliberately do NOT
   open on :focus-within: a focused Read link would latch its panel open independently of
   the hover accordion (and stick after Back via bfcache focus restore) → two open. */
.wpanel.is-open{flex-basis:calc(var(--strip) + var(--cw))}

/* Rail — the strip that always shows (vertical label top, number bottom).
   Fills the collapsed panel (so the label centres); resolves to --strip when the
   panel is open because the content column then takes --cw. */
.wpanel__rail{position:relative;flex:1 1 auto;min-width:var(--strip);
  border-left:1px solid rgba(255,255,255,.08);
  font-family:"Roboto",sans-serif;color:rgba(255,255,255,.6)}
/* Label + number are PINNED to the --strip zone at the panel's left edge, so they hold a fixed
   position as the panel resizes (during the reveal + when other panels open) — they never drift
   with the rail's changing width. */
.wpanel__vert{position:absolute;left:calc(var(--strip) / 2);top:30px;transform:translateX(-50%) rotate(180deg);will-change:opacity;
  writing-mode:vertical-rl;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.wpanel__num{position:absolute;left:0;right:auto;width:var(--strip);bottom:62px;text-align:center;will-change:opacity;
  font-family:"Inter",sans-serif;font-weight:300;font-size:1.5rem;color:#4d8bff}

/* Content — pinned ABSOLUTELY at a fixed place (just right of the strip) with a FIXED width, so
   it's out of the flex flow: the panel's width animating open/closed never reflows or resizes the
   text. Opening/closing ONLY fades it in/out. Clipped by the panel's overflow:hidden while closed. */
.wpanel__content{position:absolute;left:var(--strip);top:0;bottom:0;z-index:2;
  width:clamp(230px,23vw,360px);box-sizing:border-box;   /* FIXED width (vw-stable) so the text wraps the same the whole way — opening no longer re-flows it; it just slides in. */
  display:flex;flex-direction:column;justify-content:space-between;gap:20px;   /* heading anchored TOP, description anchored BOTTOM */
  padding:clamp(32px,3vw,52px) clamp(28px,2.6vw,44px);
  pointer-events:none;opacity:0;transform:translateX(104px);   /* parked further off to the RIGHT (clipped by the panel) while closed — longer slide-in */
  transition:opacity .5s ease-in-out .12s, transform .7s cubic-bezier(.32,0,.16,1) .05s}
.wpanel.is-open .wpanel__content{opacity:1;transform:translateX(0);pointer-events:auto}   /* slides left into place */

/* Thin vertical divider just LEFT of the text (between the rail and the content), like the
   line in the reference's open panel. It enters from the left and settles slightly to the
   right as the panel opens. On the panel (not the content) so it moves independently. */
.wpanel::after{content:"";position:absolute;left:var(--strip);top:0;bottom:0;width:2px;z-index:3;
  background:rgba(255,255,255,.22);pointer-events:none;
  opacity:0;transform:translateX(-22px);
  transition:opacity .5s ease-in-out .12s, transform .7s cubic-bezier(.32,0,.16,1) .05s}
.wpanel.is-open::after{opacity:1;transform:translateX(0)}

.wpanel__meta{display:none}   /* category / read-time line removed */
.wpanel__title{margin:0;font-family:"Inter",sans-serif;font-size:clamp(1.8rem,2.4vw,2.5rem);line-height:1.06;letter-spacing:-.02em}
.wpanel__title--hairline{font-weight:300}
.wpanel__title--thin{font-weight:300}
.wpanel__title--light{font-weight:400}
.wpanel__title--regular{font-weight:500}
.wpanel__text{margin:0;font-family:"Inter",sans-serif;font-size:.98rem;line-height:1.5;color:rgba(255,255,255,.78)}
/* READ button sits in the STRIP, centred under the number. It's a panel child (not inside the
   content), so it has its OWN motion: it reels in from the LEFT on open and retreats left on
   close — like the divider line — rather than sliding from the right with the text. */
.wpanel__link{position:absolute;left:0;bottom:24px;width:var(--strip);box-sizing:border-box;z-index:4;
  text-align:center;font-family:"Roboto",sans-serif;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(77,139,255,.6);
  pointer-events:none;opacity:0;transform:translateX(-22px);
  transition:opacity .5s ease-in-out .12s, transform .7s cubic-bezier(.32,0,.16,1) .05s, color .25s, text-decoration-color .25s}
.wpanel.is-open .wpanel__link{opacity:1;transform:translateX(0);pointer-events:auto}
.wpanel__link:hover{color:#4d8bff;text-decoration-color:#4d8bff}

/* Mobile / no-hover: drop the accordion — heading + plain full-width post blocks, all open */
@media (max-width:820px){
  .writing{display:block;overflow:visible;height:auto}
  .writing__pin{position:static;display:block;height:auto;overflow:visible}
  .writing__pad{display:block;padding:0 24px 8px}
  .writing__intro{max-width:none}
  .wstack{display:block;height:auto}
  .wpanel{display:block;flex:none;transform:none!important;height:auto!important;align-self:auto;box-shadow:none}
  .wpanel__rail{display:none}
  .wpanel__content{position:static;flex:none;width:100%;opacity:1!important;padding:48px 28px;gap:16px;justify-content:flex-start}
  .wpanel:nth-child(odd){background:#1b2236}
  .wpanel:nth-child(even){background:#243049}
  .wpanel__title{font-size:clamp(1.8rem,7vw,2.4rem)}
  .wpanel__text{font-size:.95rem}
  /* rail is hidden on mobile, so put READ back into normal flow (not the off-screen strip slot) */
  .wpanel__link{position:static;left:auto;bottom:auto;width:auto;text-align:left;font-size:.72rem;opacity:1;transform:none}
}

/* ============================================================
   Dark continuous backdrop — Selected Work / Skills / Services
   (2026-06-20, branch extend-dark-bg-projects)
   These three sections used to paint a light --color-bg box with
   dark text. They now go TRANSPARENT so their per-section contour
   canvas (#section-contours, drawn in main.js: zone-1 navy + light-
   blue lines, viewport-aligned) runs the dark world continuously
   out of the blog section through them. Text recolours to light.
   ============================================================ */
.features,.standards,.faq{background:transparent;background-color:transparent}
/* per-section contour canvas sits behind the content */
.section-contours{position:absolute;inset:0;z-index:0;pointer-events:none}
/* keep each section's real content above its canvas */
.features__sticky,.standards__container,.faq__container{position:relative;z-index:1}

/* --- Selected Work (.features) --- */
.features__sticky .features__title{color:var(--color-text-light)}
.features .feature-item{border-left-color:rgba(255,255,255,.16)}
.features .feature-item .feature-item__title{color:var(--color-text-light)}
.features .feature-item .feature-item__description{color:#aeb4c6}
.features .feature-item__num{color:#7f86a0}
.features .proj-tag{border-color:rgba(255,255,255,.22);color:#c2c7d6}

/* --- Skills (.standards) — plain white section: dark text, single-column,
   no left placeholder box (the title/skill groups take the whole width) --- */
.standards .standards__title{color:var(--color-text)}
.standards .standards__description{color:var(--color-text-muted)}
.standards .skill-group__name{color:var(--color-text-muted)}
.standards .skill-tag{border-color:#e6e6e8;color:var(--color-text)}
/* 50/50 split: text left, Linux logo right. Text sits 20% higher (as before);
   the logo sits a further ~12.5% up (half of the prior extra up-move), and on
   TOP of the dark bulge (.skills-curve z-index:3) → container z-index 4. */
.standards .standards__container{align-items:center;gap:var(--space-3xl);transform:translateY(-20%);z-index:4}
.standards .standards__content{flex:1 1 50%;min-width:0;max-width:none;transform:translateY(-12%)}
.standards__logo{flex:0 0 50%;width:50%;height:auto;border-radius:0;overflow:visible;display:flex;align-items:center;justify-content:center;position:relative;z-index:5;transform:translateY(-10%)}
.standards__logo-stack{position:relative;width:100%;max-width:620px}
.standards__logo-stack img.standards__logo-main{display:block;width:100%;height:auto;object-fit:contain;position:relative;z-index:2;will-change:transform}
/* slower logos sit ON TOP of Linux (z 3), faster ones BEHIND it (z 1) */
.standards__logo-stack img.skill-float--front{z-index:3}
.standards__logo-stack img.skill-float--back{z-index:1}
/* small skill logos scattered in/around Linux — 5% of its size, each parallaxes
   upward on scroll at its own data-speed (driven in main.js). The high-specificity
   selector beats the reference `.standards__image img{height:100%;object-fit:cover}`
   rule that was stretching+cropping them into thin vertical slices. */
/* recolour each (multi-colour) logo with the SVG luminance→blue duotone (defined
   in index.html) — keeps internal light/dark detail (recognisable) but fully blue,
   no warm wash. Same filter as the penguin for a cohesive look. */
.standards__logo-stack img.skill-float{position:absolute;width:15%;height:auto;object-fit:contain;will-change:transform;filter:url(#ink-blue) drop-shadow(0 4px 10px rgba(15,22,40,.25))}
@media (max-width:820px){
  .standards .standards__container{flex-direction:column;align-items:flex-start;transform:translateY(-20%)}
  .standards .standards__content,.standards__logo{flex:1 1 100%;width:100%}
  .standards__logo{transform:translateY(-10%)}
  .standards__logo-stack{max-width:360px}
}

/* --- Services (.faq) --- */
.faq{border-top-color:rgba(255,255,255,.12);border-bottom-color:rgba(255,255,255,.12)}
.faq .faq__title{color:var(--color-text-light)}
.faq .faq_split_bar{background-color:rgba(255,255,255,.12)}
.faq .faq-item{border-bottom-color:rgba(255,255,255,.12)}
.faq .faq-item .faq-item__question{color:var(--color-text-light)}
.faq .faq-item .faq-item__answer{color:#aeb4c6}
/* chevron pill: dark #050419 vanished on the navy — switch to a light glass pill, dark stroke */
.faq .faq-item .faq-item__icon{background:rgba(255,255,255,.1)}
.faq .faq-item__icon svg path{stroke:var(--color-text-light)}
@media (pointer:fine){.faq .faq-item .faq-item__header:hover .faq-item__icon{background:var(--color-highlight)}}

/* ============================================================
   CTA pill text reel (2026-06-20, branch cta-reel-sync)
   Both header pills (Hire Me + Get In Touch) reel PER-LETTER on a
   world flip (like the nav), but with NO word gap, and both pills
   roll together (.is-rolled toggled on both at once) so they're in
   unison. __a = current-world copy (colour inherited from the span,
   set in main.js); __b = the alt (light-world) colour, fixed here.
   ============================================================ */
header .pill-btn-span{display:inline-flex;vertical-align:middle}
header .pill-char{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;white-space:pre}
header .pill-char__a,header .pill-char__b{display:block;transition:transform .5s var(--ease-default);transition-delay:var(--d,0s);will-change:transform}
header .pill-char__a{color:inherit}
header .pill-char__b{position:absolute;left:0;top:100%}
header .pill-btn.is-rolled .pill-char__a,header .pill-btn.is-rolled .pill-char__b{transform:translateY(-100%)}
header .pill-btn--glass .pill-char__b{color:#050419}                 /* Hire Me — light-world black */
header .pill-btn--dark .pill-char__b{color:var(--color-text-light)}  /* Get In Touch — light-world white */

/* ============================================================
   Nav-link per-letter HOVER WEIGHT REEL
   Hovering a nav link makes the hovered letter (and its neighbours,
   with a falloff) dynamically bolden. Roboto Flex (variable) lets the
   weight interpolate continuously; a short transition keeps it snappy.
   --w is set per .nav-char in main.js from the cursor distance.
   ============================================================ */
.header__nav-left a .nav-char{font-family:"Roboto Flex","Roboto",sans-serif;font-variation-settings:"wght" var(--w,400)}
/* the glyph-bearing leaves carry the weight transition so the inherited --w change animates smoothly */
.header__nav-left a .nav-char__a,.header__nav-left a .nav-char__b,.header__nav-left a .nav-char__c{transition:transform .5s var(--ease-default),font-variation-settings .14s var(--ease-default);transition-delay:var(--d,0s),0s}

/* ============================================================
   Header buttons — per-letter HOVER REEL (self-reel)
   On hover each button rolls its letters up to a same-colour clone
   (__c, color:inherit → always legible) with a per-letter stagger
   (--hd, local to the button), composing with the scroll world-flip
   reel (which still rolls __a/__b inside __face). Snappy + staggered.
   ============================================================ */
.header__nav-left a .nav-char__col,header .pill-char__col{display:block;position:relative;transition:transform .42s var(--ease-default);transition-delay:var(--hd,0s);will-change:transform}
.header__nav-left a .nav-char__face,header .pill-char__face{display:block;position:relative;overflow:hidden}
/* clone colour: --hc is set in JS at the threshold worlds (sky blue from white text / dark blue
   from black text); in the INITIAL HERO --hc is cleared → currentColor = same-colour self-reel. */
.header__nav-left a .nav-char__c,header .pill-char__c{display:block;position:absolute;left:0;top:100%;color:var(--hc,currentColor)}
/* HERO only (at the very top): force the clone to the SAME colour; once scrolled, --hc takes over. */
header.is-hero .header__nav-left a .nav-char__c,header.is-hero .pill-char__c{color:currentColor}
.header__nav-left a:hover .nav-char__col,.header__nav-left a:focus-visible .nav-char__col,header .pill-btn:hover .pill-char__col,header .pill-btn:focus-visible .pill-char__col{transform:translateY(-100%)}

/* ============================================================
   Blog → Features cover-scroll
   .writing is 200vh with .writing__pin sticky (top:0). The features
   section is pulled UP by 100vh so it rides over the pinned blog as
   you scroll through the second half of .writing — a gradual cover.
   features sits ABOVE the blog (z-index 3 > .writing's 2); its own
   .section-contours canvas (opaque navy) makes the cover solid.
   ============================================================ */
.features{margin-top:-100svh;z-index:3}
@media (max-width:820px){.features{margin-top:0}}

/* ============================================================
   Terminal demo (replaces the Selected-work grid). Sits inside the
   features sticky window so it keeps the scroll-up-into-sticky cover.
   Medium-blue window; commands typed + install output streamed by
   main.js, then a blinking prompt waits for the next command.
   ============================================================ */
/* 200vh = ~100vh typing/cover approach + ~100vh pin while the latched card reveal
   plays. Trimmed from 360vh so scrolling down isn't stuck in a long pinned dead-zone. */
.features{height:200vh}
.features__sticky{position:sticky;top:0;height:100vh;z-index:1;align-items:stretch;justify-content:flex-start;padding:0;gap:0}
.terminal{position:relative;z-index:1;width:100%;height:100vh;display:flex;flex-direction:column;overflow:hidden;border:0;border-radius:0;background:transparent;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace}
.terminal__bar{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:11px 16px;background:#000;border-bottom:1px solid rgba(255,255,255,.08)}
.terminal__dots{display:flex;gap:8px}
.terminal__dot{width:12px;height:12px;border-radius:50%}
.terminal__dot--r{background:#ff5f56}
.terminal__dot--y{background:#ffbd2e}
.terminal__dot--g{background:#27c93f}
.terminal__title{color:#aeb6d6;font-size:13px;letter-spacing:.2px}
.terminal__body{flex:1 1 auto;display:flex;flex-direction:column;overflow:hidden;padding:26px 34px;color:#dfe4f2;font-size:15px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.terminal__line{white-space:pre-wrap}
.term-user{color:#6ee59a;font-weight:600}
.term-path{color:#6cb0ff}
.term-mysql{color:#7fd0ff;font-weight:600}
.term-cursor{display:inline-block;width:8px;height:1.05em;margin-left:1px;vertical-align:-2px;background:#dfe4f2}
.term-cursor.is-blink{animation:termblink 1.05s steps(1) infinite}
/* Caret sitting INSIDE the line (mid-string edits on the SELECT query): the block would
   otherwise push the rest of the line right by its own width, opening a gap that moves
   with it. Negative margin cancels width + margin-left so it takes NO space and overlays
   the character it's on — a real block cursor; the char shows through on the blink. */
.term-cursor.is-over{margin-right:-9px;position:relative;z-index:1}
/* SQL colouring for the `mysql>` lines (typed script + the live facet-driven query). */
.sql-kw{color:#6cb0ff;font-weight:600}     /* SELECT FROM WHERE AND IN */
.sql-id{color:#e8b866}                     /* table + column identifiers */
.sql-str{color:#6ee59a}                    /* quoted values */
.sql-op{color:#8f98b5}                     /* * = , ( ) ; */
@keyframes termblink{50%{opacity:0}}
/* SELECT * FROM projects → result rendered as Lando "helmet-grid"-style cards:
   image base + notched-corner frame + hover image/overlay reveal + blue accent. */
/* Phase 2 is TIMED (fired by .terminal.is-revealing, not scroll-scrubbed):
   the pre-lines collapse+fade so SELECT eases to the top, then (transition-delay)
   the project cards come into picture. Reverses when the class is removed. */
.term-pre{flex:0 0 auto;overflow:hidden;max-height:60vh;opacity:1;will-change:max-height,opacity;transition:max-height .6s cubic-bezier(.4,0,.2,1),opacity .45s ease}
.terminal.is-revealing .term-pre{max-height:0;opacity:0}
/* Result fills the remaining body height so the cards viewport can clip + pan.
   flex-basis MUST be 0 (not auto): the cards' tall content as the basis would push the
   body's flex column into shrink mode and squash/clip .term-pre — breaking the typing. */
.term-result{margin:0;flex:1 1 0;min-height:0;display:flex}
/* Cards viewport: clips the panning cards (hard cut-off) so they don't overlap the
   SELECT line / panel above. */
.term-cards-view{flex:1 1 auto;min-width:0;overflow:hidden}
/* Inner layer that actually pans up on scroll so all cards scroll through the terminal. */
/* overflow-anchor:none — filtering hides cards, which shrinks the grid; scroll
   anchoring would compensate by shifting scrollY, dragging the section off the
   cover threshold so the reappearing set pans up behind the viewport's top clip. */
.term-cards-pan{will-change:transform;overflow-anchor:none}
.term-projects{overflow-anchor:none}
@media (max-width:820px){.terminal{height:auto;min-height:100vh}.terminal__body{overflow:visible;display:block}.term-cards-view{overflow:visible}.term-cards-pan{transform:none!important}}
/* Title bar stays VISIBLE and FIXED at the terminal's top — it does not swipe away
   or shift when the terminal covers the top of the screen. */
/* Projects result = a side panel (LEFT, flush to the terminal's left edge) + cards grid.
   The panel breaks out of the body's 34px left padding (margin-left:-34px) so it starts
   right at the border with no gap; the grid keeps a gap after it. */
.term-pgrid{flex:1 1 auto;min-height:0;display:flex;gap:28px;align-items:stretch;padding-top:44px;margin-left:-34px}
.term-projects{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-content:start;align-items:start}
/* Panel appears with the SAME rise+fade as the cards (Lando reveal), keyed off the
   LATCHED .is-revealing class (same as the cards) so once it appears it STAYS — it
   does not vanish when you scroll back up. */
.term-side{position:relative;flex:0 0 clamp(220px,21vw,330px);align-self:flex-start;max-height:calc(100vh - var(--header-height) - 64px);overflow-y:auto;overscroll-behavior:contain;border:1px solid rgba(124,208,255,.22);border-left:0;border-radius:0 10px 10px 0;background:transparent;min-height:240px;opacity:0;transform:translateY(64px);will-change:opacity,transform;transition:opacity .9s cubic-bezier(.19,1,.22,1) .5s,transform .9s cubic-bezier(.19,1,.22,1) .5s}
.term-side-contours{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:0 10px 10px 0}
.term-side .filter{position:relative;z-index:1}
.terminal.is-revealing .term-side{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.term-side{opacity:1;transform:none;transition:none}}
/* panel's own slim scrollbar */
.term-side{scrollbar-width:thin;scrollbar-color:rgba(124,208,255,.4) transparent}
.term-side::-webkit-scrollbar{width:8px}
.term-side::-webkit-scrollbar-thumb{background:rgba(124,208,255,.35);border-radius:8px;border:2px solid transparent;background-clip:content-box}
.term-side::-webkit-scrollbar-thumb:hover{background:rgba(124,208,255,.55);background-clip:content-box}
@media (max-width:1100px){.term-side{flex-basis:clamp(190px,26vw,290px)}}
@media (max-width:820px){.term-pgrid{flex-direction:column;margin-left:-18px;margin-right:-18px}.term-side{flex:0 0 auto;width:100%;min-height:0;max-height:none;overflow:visible;border-left:1px solid rgba(124,208,255,.22);border-radius:0}}
/* hidden by the side-panel filter */
.proj-card.is-filtered-out{display:none}
/* ---- "Filter by" facet panel ---- */
.filter{font-family:var(--font-ui);padding:18px 16px 16px 34px;display:flex;flex-direction:column;gap:6px}
@media (max-width:820px){.filter{padding:16px 18px}}
.filter__head{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#7fd0ff;margin-bottom:8px}
.filter__group{border-top:1px solid rgba(124,208,255,.12)}
.filter__folder{width:100%;display:flex;align-items:center;gap:9px;padding:11px 2px;background:none;border:0;cursor:pointer;color:#dfe4f2;font:inherit;font-size:13px;font-weight:600;text-align:left}
.filter__chev{flex:0 0 auto;width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;color:#7fd0ff;transition:transform .25s ease}
.filter__group.is-open .filter__chev{transform:rotate(90deg)}
.filter__name{flex:1 1 auto}
.filter__items{list-style:none;margin:0;padding:0;overflow:hidden;max-height:0;opacity:0;transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .25s ease}
.filter__group.is-open .filter__items{max-height:1200px;opacity:1;padding-bottom:8px}
.filter__item{display:flex;align-items:center;gap:9px;padding:5px 2px 5px 14px;cursor:pointer;color:#aeb8d4;font-size:12.5px;transition:color .2s}
.filter__item:hover{color:#eaf0ff}
.filter__cb{position:absolute;opacity:0;width:0;height:0}
.filter__box{flex:0 0 auto;width:14px;height:14px;border:1px solid rgba(124,208,255,.45);border-radius:4px;position:relative;transition:background .2s,border-color .2s}
.filter__cb:checked+.filter__box{background:#4d8bff;border-color:#4d8bff}
.filter__cb:checked+.filter__box:after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #0d1628;border-width:0 2px 2px 0;transform:rotate(45deg)}
.filter__cb:focus-visible+.filter__box{outline:2px solid #7fd0ff;outline-offset:2px}
.filter__item .filter__label{flex:1 1 auto}
.filter__cb:checked~.filter__label{color:#eaf0ff}
.filter__n{flex:0 0 auto;font-size:11px;color:#6b76a0;font-variant-numeric:tabular-nums}
.filter__clear{margin-top:10px;align-self:flex-start;background:none;border:1px solid rgba(124,208,255,.4);border-radius:999px;color:#bfe0ff;font:inherit;font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;padding:6px 13px;cursor:pointer;transition:color .25s,background .25s,border-color .25s}
.filter__clear:hover{color:#0d1628;background:#4d8bff;border-color:#4d8bff}
/* Each card pops in with the zone-title APPEAR animation, copied EXACTLY from
   flow.js (poseStr + APPEAR pose, ENTER_MS=420, easeOut cubic, no fade-in):
   translateX(22vw)=ex(vw*0.22) perspective translate(50%) translate3d(-222.2,88)
   rotateY(60) rotateX(35) → identity. The 22vw is what makes it fly in from the
   RIGHT. Opacity snaps (0s) so it's hidden during its delay then enters un-faded.
   Lando "helmet-grid" reveal: each card RISES up from below + fades in
   (rest = translate(0)), staggered along the anti-diagonal (row+col) via
   the JS-set --cd: [0,0] first, then [0,1]+[1,0], then [1,1]+[2,0]+…. */
.term-projects .proj-card{opacity:0;transform:translateY(64px);will-change:opacity,transform;transition:transform .9s cubic-bezier(.19,1,.22,1) var(--cd,0s),opacity .9s cubic-bezier(.19,1,.22,1) var(--cd,0s)}
.terminal.is-revealing .term-projects .proj-card{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.term-projects .proj-card{opacity:1;transform:none;transition:none}}
.proj-card{position:relative;display:block;width:100%;aspect-ratio:406.89/411;color:#dfe4f2;isolation:isolate}
/* Clip the image (+ hover-reveal) to the notched frame shape so it no longer spills
   past the bottom-right notch. Polygon = the frame path's notch as % of the 407×411
   viewBox: shelf top y=371.983→90.5%, ledge x=263.329→64.7%, bevel x=210.862→51.8%. */
.proj-card__media{position:absolute;inset:0;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 90.5%,64.7% 90.5%,51.8% 100%,0 100%)}
.proj-card__img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.78);transition:transform .7s cubic-bezier(.19,1,.22,1),filter .5s}
.proj-card:hover .proj-card__img{transform:scale(1.06);filter:saturate(1.05) brightness(1.03)}
/* Inverted: blue reveal panel is OPEN by default (blue tint), and the SAME wipe
   animation closes it on hover/active to expose the full-colour photo. */
.proj-card__reveal{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:22px;background:linear-gradient(160deg,rgba(28,31,42,.72),rgba(56,61,80,.92));clip-path:polygon(0% -14%,12.5% -7.9%,25% -3.5%,37.5% -0.9%,50% 0%,62.5% -0.9%,75% -3.5%,87.5% -7.9%,100% -14%,100% 100%,0% 100%);transition:clip-path .32s cubic-bezier(.4,0,.2,1)}
.proj-card:hover .proj-card__reveal,.proj-card:focus-within .proj-card__reveal{clip-path:polygon(0% 100%,12.5% 100%,25% 100%,37.5% 100%,50% 100%,62.5% 100%,75% 100%,87.5% 100%,100% 100%,100% 100%,0% 100%);transition:clip-path .65s cubic-bezier(.19,1,.22,1)}
.proj-card__desc{font-size:13.5px;line-height:1.55;color:#fff}
/* notched frame (two layers; overlay lights up on hover) */
.proj-card__frame{position:absolute;inset:0;pointer-events:none;z-index:10}
.proj-card__frame svg{width:100%;height:100%;display:block}
.proj-card__frame.is-base{color:rgba(124,208,255,.26)}
.proj-card__frame.is-overlay{color:#4d8bff;opacity:0;transition:opacity .4s ease}
.proj-card:hover .proj-card__frame.is-overlay,.proj-card:focus-within .proj-card__frame.is-overlay{opacity:1}
/* label pinned bottom (title left, index accent right), above the image, below reveal-text */
/* Title block sits on the taller LEFT portion of the notched frame (the bottom
   step drops only the left side), leaving the raised right shelf for the button. */
.proj-card__label{position:absolute;left:18px;right:40%;top:16px;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:2px;pointer-events:none}
.proj-card__title{font-size:15px;font-weight:600;line-height:1.25;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5);transition:color .3s ease}
.proj-card:hover .proj-card__title,.proj-card:focus-within .proj-card__title,.proj-card.is-active .proj-card__title{color:#3ddc84}
/* "View code" button sits IN the bottom-right notch (the cut space the image used to
   spill into) — anchored to that corner and sized to fit the notch band (~9.5% tall). */
.proj-card__code{position:absolute;right:-1%;bottom:-0.75%;z-index:11;display:inline-flex;align-items:center;gap:4px;padding:4px 11px;font-family:var(--font-ui);font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#bfe0ff;background:rgba(13,22,40,.7);border:1px solid rgba(124,208,255,.4);border-radius:999px;text-decoration:none;pointer-events:auto;transition:color .3s,background .3s,border-color .3s}
.proj-card__code:hover{color:#0d1628;background:#4d8bff;border-color:#4d8bff}
.term-result__meta{margin-top:16px;color:#7e88aa;font-size:13px;opacity:0;transition:opacity .4s ease}
.terminal.is-revealing .term-result__meta{opacity:1;transition-delay:var(--meta-d,1s)}
@media (prefers-reduced-motion:reduce){.term-result__meta{opacity:1;transition:none}}
@media (max-width:1100px){.term-projects{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.terminal{width:100%;height:100vh}.terminal__body{font-size:12px;padding:16px 18px}.term-projects{grid-template-columns:1fr 1fr;gap:12px}}

/* ---- Handwritten "Check out my Certificates" CTA over the hero video ---- */
/* Visually-hidden helper (real link text for screen readers; SVG is aria-hidden) */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Full-screen layer that rides WITH the video: main.js sets its transform to the
   exact translateY()+scale() the .hero-video gets during the zoom-out, origin centre,
   so the writing shrinks and drifts up locked to the (paused) video rectangle. */
.cert-layer{position:fixed;inset:0;z-index:2;pointer-events:none;transform-origin:50% 50%;will-change:transform,opacity;opacity:0}
/* During the gallery collapse the handwritten "Certificates" CTA is lifted ABOVE the receive clip
   (z 70) and faded in around the mid of the zoom-out (opacity driven inline by main.js). */
.cert-layer.is-collapsing{z-index:80}
.cert-cta{position:absolute;left:49%;top:51%;width:min(1040px,87vw);transform:translate(-50%,-50%) rotate(-13deg);pointer-events:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
/* Clickable/hoverable only from ~90% of the hero zoom-out onward (is-active, set by main.js). */
.cert-layer.is-active .cert-cta{pointer-events:auto}
/* Hover colour (text blue + video de-grey) is driven entirely by main.js, gated by the writing
   completion (colorStr = hoverAmt·cT): full true colour only at the pop. (No binary CSS flip.) */
/* Pull-in transition: full-screen overlay above everything (incl. the header). Starts at the
   hero video's current scaled-down rectangle (transform set inline by main.js), zooms to full
   screen over the clip's duration, plays once. transform-origin centre mirrors the zoom-out. */
.pullout-video{position:fixed;inset:0;z-index:50;width:100%;height:100%;object-fit:cover;background:#000;pointer-events:none;transform-origin:50% 50%;opacity:0;visibility:hidden;will-change:transform}
.pullout-video.is-playing{opacity:1;visibility:visible}
/* Closing transition: above the gallery (60); zooms it back out to the hero rectangle. */
.receive-video{position:fixed;inset:0;z-index:70;width:100%;height:100%;object-fit:cover;background:#000;pointer-events:none;transform-origin:50% 50%;opacity:0;visibility:hidden;will-change:transform}
.receive-video.is-playing{opacity:1;visibility:visible}
/* Certificate gallery (opens after the pull-in). Its OWN scroll container so it works while
   the page behind stays locked. Each .cert-slide is sticky full-screen; later slides paint
   over earlier ones (DOM order) and scroll up to cover them — the features-over-blog stack. */
.cert-gallery{position:fixed;inset:0;z-index:60;background:#fff;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s var(--ease-default)}
.cert-gallery.is-open{opacity:1;visibility:visible;pointer-events:auto}
.cert-gallery__scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* Back-to-home button, pinned top-right over the slides. */
.cert-gallery__back{position:absolute;top:24px;right:24px;z-index:2;display:inline-flex;align-items:center;height:var(--btn-height);padding:0 var(--space-lg);border-radius:var(--radius-full);background:rgba(5,4,25,.82);border:1px solid rgba(255,255,255,.16);box-shadow:0 4px 18px rgba(0,0,0,.28);backdrop-filter:blur(8px);font-family:var(--font-ui);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-light);transition:background-color .3s var(--ease-default),color .3s var(--ease-default),box-shadow .3s var(--ease-default)}
@media (pointer:fine){.cert-gallery__back:hover{background:var(--color-highlight);color:var(--color-text-light);box-shadow:0 6px 22px rgba(57,50,220,.38)}}
/* Per-letter vertical REEL on the back button (same roller the nav pills use): each letter is a
   clip whose __col rolls up on hover to reveal an identical __c clone rising from below. */
.cert-gallery__back .pill-char{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;white-space:pre}
.cert-gallery__back .pill-char__col{display:block;position:relative;transition:transform .42s var(--ease-default);transition-delay:var(--hd,0s);will-change:transform}
.cert-gallery__back .pill-char__face{display:block;position:relative}
.cert-gallery__back .pill-char__c{display:block;position:absolute;left:0;top:100%;color:inherit}
.cert-gallery__back:hover .pill-char__col,.cert-gallery__back:focus-visible .pill-char__col{transform:translateY(-100%)}
/* "Scroll to see more" prompt, bottom-right; fades out once you reach the last certificate. */
.cert-gallery__hint{position:absolute;bottom:24px;right:24px;z-index:2;display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius-full);background:rgba(5,4,25,.72);backdrop-filter:blur(8px);font-family:var(--font-ui);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-light);pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease-default),transform .4s var(--ease-default)}
.cert-gallery.is-open .cert-gallery__hint{opacity:.9;transform:translateY(0)}
.cert-gallery__hint.is-hidden{opacity:0!important;transform:translateY(8px)!important}
.cert-gallery__hint-arrow{display:inline-block;animation:certHintBob 1.5s var(--ease-default) infinite}
@keyframes certHintBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.cert-gallery__hint-arrow{animation:none}}
@media (max-width:820px){.cert-gallery__back{top:16px;right:16px}.cert-gallery__hint{bottom:16px;right:16px;font-size:11px;padding:6px 12px}}
.cert-slide{position:sticky;top:0;height:calc(100vh + var(--cert-dwell, 10vh));display:flex;align-items:flex-start;justify-content:center;background:#fff}
.cert-slide:first-child{--cert-dwell:0vh}
.cert-slide__fig{position:relative;display:flex;align-items:center;justify-content:center;width:100vw;height:100vh}
/* Fit the whole certificate to the screen (no card / no navy surround). */
.cert-slide__img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.cert-slide--end{padding:0;background:#000}
.cert-slide__loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
/* "Open ↗" caption — opens the original PDF in a new tab (the image is the render). */
.cert-slide__open{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:8px 16px;border-radius:var(--radius-full);background:#0504190d;backdrop-filter:blur(6px);font-family:var(--font-ui);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text);opacity:.85;transition:opacity .3s var(--ease-default),color .3s var(--ease-default)}
@media (pointer:fine){.cert-slide__open:hover{opacity:1;color:#3ddc84}}
.cert-cta__svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
/* The cursive letters are a FILLED path, revealed by a mask built from the traced
   centre-line PEN PATH (.cert-cta__seg, ordered by writing order). main.js sequences the
   stroke dash-offsets so a pen tip inks each stroke in turn — scroll-scrubbed, reversible. */
/* Base ink is white; the hover blue is driven inline by main.js (eased by hoverAmt·cT), so no
   CSS fill transition here (it would double-ease/lag the per-frame value). */
.cert-cta__fill{fill:#fff;stroke:#000;stroke-width:0;paint-order:stroke;transition:stroke-width .35s ease}
/* The black outline pops in the moment the video pauses (is-written, set by main.js at zoom-out 97%). */
.cert-layer.is-written .cert-cta__fill{stroke-width:1.2}
/* Bleed fix: butt caps (no half-width overshoot past a stroke's ends — was the "crossbar
   spills past the stem" symptom) + per-stroke reveal width. The new artwork
   (Certificates_ballet_thick_thin.svg) labels every trace stroke thin/medium/thick to match
   the local thickness of the calligraphy it inks, so each band hugs its own region and can't
   reach a neighbouring letter's fill at an intersection (t/f crossbars, e loops). Carried on
   the data-w attribute; tunable via --ink-w. */
.cert-cta__seg{stroke-width:var(--ink-w,8)}
.cert-cta__seg[data-w="thin"]{--ink-w:4.5}
.cert-cta__seg[data-w="medium"]{--ink-w:8}
.cert-cta__seg[data-w="thick"]{--ink-w:12}
/* The opening flourish (Thin1) is a hairline loop — give it the narrowest band of all. */
.cert-cta__seg[data-i="0"]{--ink-w:1}
.cert-cta__seg[data-i="8"]{--ink-w:4}  /* thin_to_thick9 */
.cert-cta__seg[data-i="13"]{--ink-w:1}  /* think14 */
.cert-cta__seg[data-i="14"]{--ink-w:1}  /* thin15 — keep narrow so it doesn't uncover adjustmedium19/thick20 fill */
/* fthin16 (data-i 15) is split into 6 sub-segments in index.html that taper --ink-w 1 → 3 inline. */
.cert-cta__seg[data-i="16"]{--ink-w:4}  /* thick17 */
.cert-cta__seg[data-i="17"]{--ink-w:3}  /* fmedium18 */
.cert-cta__seg[data-i="18"]{--ink-w:3}  /* adjustmedium19 */
.cert-cta__seg[data-i="25"]{--ink-w:1}  /* thick26 */
.cert-cta__seg[data-i="27"]{--ink-w:2}  /* 28redone1 */
.cert-cta__seg[data-i="30"]{--ink-w:1}  /* thin to thick31 — thin all the way */
.cert-cta__seg[data-i="32"]{--ink-w:1.5}  /* thick33 */
.cert-cta__seg[data-i="33"]{--ink-w:2}  /* adjust needed34 */
.cert-cta__seg[data-i="36"]{--ink-w:.5}  /* thin37 */
@media (max-width:820px){.cert-cta{width:78vw;top:54%}}

/* GitHub card revealed over the video during the hero's internal zoom-out (phase A).
   Anchored BOTTOM-LEFT, sits ABOVE the video (z-index 3). No fade, no rotation, no
   slide: the card has a fixed DESIGN height (75vh) and main.js SCALES it from the
   bottom-left corner — visually 40vh at the reveal point, growing to its full 75vh as
   the video reaches fullscreen — then shrinks/fades back out as the edge zoom-out
   begins so it never floats over the sections below. */
.gh-reveal{position:fixed;inset:0;z-index:3;display:flex;align-items:flex-end;justify-content:flex-start;padding:clamp(20px,3.5vh,56px) clamp(12px,2.2vw,40px);pointer-events:none;opacity:0;overflow:hidden;transform-origin:50% 50%;will-change:opacity,transform}
.gh-card{display:flex;flex-direction:column;width:min(440px,86vw);height:65vh;border-radius:14px;background:#010409;border:1px solid #30363d;box-shadow:0 24px 70px rgba(0,0,0,.5);color:#e6edf3;font-family:var(--font-ui,Inter,system-ui,sans-serif);text-decoration:none;overflow:hidden;transform-origin:50% 100%;will-change:transform}
.gh-card__head{display:flex;flex-direction:column;gap:10px;padding:22px 26px 16px;background:#010409}
.gh-card__body{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;min-height:0;padding:16px 26px 22px;background:#0d1117}
.gh-card__headrow{display:flex;align-items:center;justify-content:space-between;gap:16px}
.gh-card__idcol{display:flex;flex-direction:column;gap:6px;min-width:0}
.gh-card__top{display:flex;align-items:center;gap:10px}
.gh-card__logo{width:28px;height:28px;color:#e6edf3;flex:0 0 auto}
.gh-card__brand{font-size:22px;font-weight:700;letter-spacing:-.01em;color:#e6edf3}
.gh-card__avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid #30363d;background:#161b22;flex:0 0 auto}
.gh-card__avatar[src=""],.gh-card__avatar:not([src]){display:none}
.gh-card__handle{font-size:17px;font-weight:600;color:#e6edf3}
.gh-card__bio{margin:0;font-size:14px;line-height:1.5;color:#7d8590}
.gh-card__contrib{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid #21262d}
.gh-card__label{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#7d8590}
.gh-card__label b{color:#39d353;font-weight:800;font-size:13px}
.gh-card__chart{width:100%}
.gh-card__chart svg{width:100%;height:auto;display:block;font-family:var(--font-ui,Inter,system-ui,sans-serif)}
.gh-card__repos{list-style:none;margin:0;padding:10px 0 0;display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:#58a6ff;border-top:1px solid #21262d}
.gh-card__repos li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gh-card__repos li::before{content:"\2022";color:#39d353;margin-right:8px}
.gh-card__cta{margin-top:auto;font-size:14px;font-weight:600;color:#2f81f7}
.gh-reveal.is-live .gh-card{pointer-events:auto}
.gh-card:hover{border-color:#8b949e}
.gh-card:hover .gh-card__cta{text-decoration:underline}
@media (max-width:820px){.gh-reveal{display:none}}
@media (prefers-reduced-motion:reduce){.gh-reveal{transition:none}}

/* Projects→Skills curved seam: dark band's bottom edge is straight at first
   and bulges (curves out) downward into the light skills section on scroll. */
.standards{position:relative}
.skills-curve{position:absolute;top:0;left:0;width:100%;height:140px;z-index:3;pointer-events:none;overflow:hidden}
.skills-curve__svg{display:block;width:100%;height:100%}
.skills-curve__path{fill:#0f1628}
@media (max-width:820px){.skills-curve{display:none}}
/* Blank dark breathing room below the projects terminal, before the curved
   seam + Skills section — so the transition doesn't feel congested. */
.projects-tail{position:relative;z-index:1;height:clamp(132px,25.2vh,276px);background-color:#0f1628}
@media (max-width:820px){.projects-tail{height:72px}}

/* ============================================================
   What's Up — On Socials (Lando fanned-card spread)
   Exact card sizes/radius from lando-css-reference; the fan
   transforms are scroll-driven inline by main.js (socialsFan).
   ============================================================ */
.s.is-callout-socials{position:relative;z-index:2;background-color:rgb(208,225,235);overflow:hidden;padding:clamp(4rem,9vh,8rem) 0}
.callout-socials-inner{justify-content:center;align-items:center;display:flex}
.callout-socials-layout{text-align:center;row-gap:clamp(2rem,4vh,3.5rem);flex-flow:column;justify-content:flex-start;align-items:center;width:100%;display:flex}
.callout-socials-heading{display:flex;flex-flow:column;align-items:center;line-height:.92;font-family:var(--font-ui),sans-serif;font-weight:700;letter-spacing:-.04em;text-transform:uppercase;font-size:clamp(2.6rem,7vw,5.5rem);color:var(--color-text)}
.callout-socials-heading__line{display:inline-block;padding:.02em .18em}
.callout-socials-heading__line.is-hl{background-color:var(--color-highlight);color:var(--color-text-light)}
/* card spread — exact reference dimensions */
.callout-socials-card-layout{justify-content:center;align-items:center;width:100%;max-width:80rem;height:32.5rem;display:flex;position:relative}
.callout-socials-card-w{z-index:0;backface-visibility:hidden;will-change:transform;border-radius:2.985rem;flex:none;width:18rem;height:31.5rem;position:absolute;overflow:clip;transform-origin:50% 50%;box-shadow:0 1.44rem 2.7rem rgba(5,4,25,.22)}
.image.is-social-card{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Branded social cards — fill a .callout-socials-card-w (18rem x 31.5rem, overflow:clip).
   Dimensions/placement/animation of the wrapper are untouched; this is inner content only. */
.soc-card{position:absolute;inset:0;display:flex;flex-direction:column;padding:1.9rem 1.6rem;box-sizing:border-box;text-decoration:none;color:#fff;overflow:hidden;font-family:var(--font-ui),Inter,system-ui,sans-serif}
.soc-card__top{display:flex;align-items:center;gap:.6rem;margin-bottom:auto}
.soc-card__logo{width:2rem;height:2rem;flex:0 0 auto;color:inherit}
.soc-card__brand{font-size:1.3rem;font-weight:700;letter-spacing:-.01em}
.soc-card__mid{margin-top:auto;margin-bottom:auto;display:flex;flex-direction:column;gap:.55rem}
.soc-card__handle{font-size:1.15rem;font-weight:600;line-height:1.2}
.soc-card__desc{margin:0;font-size:.9rem;line-height:1.45;opacity:.82}
.soc-card__cta{margin-top:1.4rem;font-size:.95rem;font-weight:600;display:inline-flex;align-items:center;gap:.3rem}
.soc-card:hover .soc-card__cta{text-decoration:underline}

/* GitHub (centre) — richer, mirrors the hero gh-card (two-tone head/body bg, no avatar) */
.soc-card--github{padding:0;border:1px solid #30363d;color:#e6edf3;justify-content:flex-start}
.soc-card__gh-head{background:#010409;padding:1.7rem 1.6rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;border-bottom:1px solid #30363d}
.soc-card__gh-headrow{display:flex;align-items:center;justify-content:space-between;gap:.9rem}
.soc-card__gh-idcol{display:flex;flex-direction:column;gap:.5rem;min-width:0;flex:1 1 auto}
.soc-card--github .soc-card__handle{font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.soc-card__gh-avatar{width:3rem;height:3rem;border-radius:50%;object-fit:cover;border:1px solid #30363d;background:#161b22;flex:0 0 auto}
.soc-card__gh-body{background:#161b22;flex:1 1 auto;min-height:0;padding:1.3rem 1.6rem 1.9rem;display:flex;flex-direction:column}
.soc-card--github .soc-card__top{gap:.55rem}
.soc-card--github .soc-card__brand{color:#e6edf3}
.soc-card--github .soc-card__handle{color:#e6edf3}
.soc-card--github .soc-card__desc{color:#7d8590;opacity:1}
.soc-card__repos{list-style:none;margin:.9rem 0 0;padding:.8rem 0 0;display:flex;flex-direction:column;gap:.35rem;font-size:.82rem;color:#58a6ff;border-top:1px solid #21262d}
.soc-card__repos li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.soc-card__repos li::before{content:"\2022";color:#39d353;margin-right:.5rem}
.soc-card--github .soc-card__cta{margin-top:auto;color:#2f81f7}

/* LinkedIn — profile-style card: dark cover banner over a white profile body */
.soc-card--linkedin{padding:0;background:#fff;color:#1a1a1a;border:1px solid #e0e0e0;justify-content:flex-start}
.soc-card__li-cover{flex:0 0 auto;height:7rem;padding:1.1rem 1.3rem;display:flex;align-items:flex-start;background:linear-gradient(140deg,#0a66c2 0%,#004182 100%)}
.soc-card__li-brand{display:flex;align-items:center;gap:.45rem}
.soc-card__li-logo{width:1.7rem;height:1.7rem;flex:0 0 auto}
.soc-card__li-wordmark{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;color:#fff}
.soc-card__li-avatar{width:5.2rem;height:5.2rem;border-radius:50%;object-fit:cover;border:.28rem solid #fff;background:#eee;margin:-2.9rem 0 0 1.3rem;position:relative;z-index:2}
.soc-card__li-body{flex:1 1 auto;min-height:0;padding:.7rem 1.3rem 1.5rem;display:flex;flex-direction:column}
.soc-card__li-nameline{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap}
.soc-card--linkedin .soc-card__handle{color:#1a1a1a;font-size:1.2rem;font-weight:700;line-height:1.15}
.soc-card__li-pronoun{font-size:.72rem;color:#8a8a8a;font-weight:500}
.soc-card--linkedin .soc-card__desc{color:#2c2c2c;opacity:1;margin-top:.4rem;font-size:.9rem;line-height:1.4;font-weight:500}
.soc-card__li-loc{margin-top:.55rem;font-size:.78rem;color:#8a8a8a}
.soc-card__li-conn{margin-top:.3rem;font-size:.82rem;font-weight:600;color:#0a66c2}
.soc-card--linkedin .soc-card__cta{margin-top:auto;color:#0a66c2}

/* Instagram — gradient header over a white profile body with stats + a photo grid */
.soc-card--instagram{padding:0;background:#fff;color:#1a1a1a;border:1px solid #e6e6e8;justify-content:flex-start}
.soc-card__ig-head{flex:0 0 auto;display:flex;align-items:center;gap:.55rem;padding:1.1rem 1.3rem;background:linear-gradient(95deg,#feda75 0%,#fa7e1e 22%,#d62976 55%,#962fbf 80%,#4f5bd5 100%)}
.soc-card__ig-head .soc-card__logo{width:1.7rem;height:1.7rem}
.soc-card__ig-head .soc-card__brand{color:#fff;font-size:1.15rem}
.soc-card__ig-body{flex:1 1 auto;min-height:0;padding:1rem 1.2rem 1.4rem;display:flex;flex-direction:column}
.soc-card__ig-top{display:flex;align-items:center;gap:1rem}
.soc-card__ig-ring{flex:0 0 auto;padding:.16rem;border-radius:50%;background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf)}
.soc-card__ig-avatar{display:block;width:4rem;height:4rem;border-radius:50%;object-fit:cover;border:.14rem solid #fff;background:#eee}
.soc-card__ig-stats{display:flex;gap:.9rem;font-size:.72rem;color:#3a3a3a}
.soc-card__ig-stats span{display:flex;flex-direction:column;align-items:center;line-height:1.2}
.soc-card__ig-stats b{font-size:1rem;color:#1a1a1a}
.soc-card--instagram .soc-card__handle{color:#1a1a1a;font-size:1rem;font-weight:700;margin-top:.9rem}
.soc-card--instagram .soc-card__desc{color:#3a3a3a;opacity:1;margin-top:.25rem;font-size:.82rem;line-height:1.4}
.soc-card--instagram .soc-card__cta{margin-top:auto;padding-top:1rem;color:#d6216f}

/* Substack — orange header over a white profile body */
.soc-card--substack{padding:0;background:#fff;color:#1a1a1a;border:1px solid #e6e6e8;justify-content:flex-start}
.soc-card__ss-head{flex:0 0 auto;display:flex;align-items:center;gap:.55rem;padding:1.1rem 1.3rem;background:#ff6719}
.soc-card__ss-head .soc-card__logo{width:1.7rem;height:1.7rem}
.soc-card__ss-head .soc-card__brand{color:#fff;font-size:1.15rem}
.soc-card__ss-body{flex:1 1 auto;min-height:0;padding:1.3rem 1.3rem 1.5rem;display:flex;flex-direction:column}
.soc-card__ss-avatar{width:4.4rem;height:4.4rem;border-radius:50%;object-fit:cover;border:1px solid #eee;background:#eee;margin-bottom:.8rem}
.soc-card--substack .soc-card__handle{color:#1a1a1a;font-size:1.2rem;font-weight:700;line-height:1.15}
.soc-card__ss-handle{margin-top:.15rem;font-size:.82rem;color:#8a8a8a}
.soc-card--substack .soc-card__desc{color:#2c2c2c;opacity:1;margin-top:.6rem;font-size:.86rem;line-height:1.45}
.soc-card--substack .soc-card__cta{margin-top:auto;padding-top:1rem;color:#ff6719}

/* Per-brand palettes */
.soc-card--email{background:linear-gradient(155deg,#3b3f47 0%,#16181d 100%);border:1px solid #2a2d34}

.callout-socials-intro-w{margin-top:1rem;row-gap:1.25rem;flex-flow:column;justify-content:flex-start;align-items:center;display:flex}
.callout-socials-follow{font-family:var(--font-ui),sans-serif;font-size:clamp(1.25rem,2.6vw,1.75rem);font-weight:500;color:var(--color-text);background-color:var(--color-highlight);color:var(--color-text-light);padding:.05em .35em}
.callout-socials-links-layout{column-gap:2.25rem;row-gap:.75rem;flex-flow:row wrap;justify-content:center;display:flex}
.callout-socials-link{font-family:var(--font-ui),sans-serif;font-size:var(--text-sm);font-weight:500;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text);transition:color .3s ease}
.callout-socials-link:hover{color:var(--color-highlight)}
@media (max-width:820px){
  .callout-socials-card-layout{height:auto;flex-flow:row wrap;gap:1rem;max-width:36rem}
  .callout-socials-card-w{position:relative;transform:none!important;aspect-ratio:20/35;width:9rem;height:auto;border-radius:1.4rem}
  .soc-card{padding:.85rem .8rem}
  .soc-card__logo{width:1.1rem;height:1.1rem}
  .soc-card__brand{font-size:.72rem}
  .soc-card__handle{font-size:.66rem}
  .soc-card__desc{font-size:.55rem;line-height:1.35}
  .soc-card__cta{font-size:.58rem;margin-top:.6rem}
  .soc-card__gh-head{padding:.85rem .8rem .5rem;gap:.3rem}
  .soc-card__gh-body{padding:.5rem .8rem .85rem}
  .soc-card__gh-avatar{width:1.8rem;height:1.8rem}
  .soc-card__gh-headrow{gap:.4rem}
  .soc-card__li-cover{height:3.4rem;padding:.55rem .6rem}
  .soc-card__li-logo{width:.95rem;height:.95rem}
  .soc-card__li-wordmark{font-size:.62rem}
  .soc-card__li-avatar{width:2.6rem;height:2.6rem;border-width:.14rem;margin:-1.5rem 0 0 .6rem}
  .soc-card__li-body{padding:.35rem .7rem .8rem}
  .soc-card--linkedin .soc-card__handle{font-size:.66rem}
  .soc-card__li-pronoun{font-size:.42rem}
  .soc-card--linkedin .soc-card__desc{font-size:.52rem;margin-top:.25rem}
  .soc-card__li-loc{font-size:.44rem;margin-top:.3rem}
  .soc-card__li-conn{font-size:.48rem}
  .soc-card__ig-head{padding:.55rem .6rem;gap:.3rem}
  .soc-card__ig-head .soc-card__logo{width:.95rem;height:.95rem}
  .soc-card__ig-head .soc-card__brand{font-size:.62rem}
  .soc-card__ig-body{padding:.55rem .6rem .7rem}
  .soc-card__ig-top{gap:.5rem}
  .soc-card__ig-avatar{width:2rem;height:2rem}
  .soc-card__ig-stats{gap:.4rem;font-size:.4rem}
  .soc-card__ig-stats b{font-size:.55rem}
  .soc-card--instagram .soc-card__handle{font-size:.6rem;margin-top:.45rem}
  .soc-card--instagram .soc-card__desc{font-size:.48rem;margin-top:.15rem}
  .soc-card__ss-head{padding:.55rem .6rem;gap:.3rem}
  .soc-card__ss-head .soc-card__logo{width:.95rem;height:.95rem}
  .soc-card__ss-head .soc-card__brand{font-size:.62rem}
  .soc-card__ss-body{padding:.7rem .7rem .8rem}
  .soc-card__ss-avatar{width:2.2rem;height:2.2rem;margin-bottom:.4rem}
  .soc-card--substack .soc-card__handle{font-size:.66rem}
  .soc-card__ss-handle{font-size:.46rem}
  .soc-card--substack .soc-card__desc{font-size:.5rem;margin-top:.3rem}
  .soc-card__repos{font-size:.5rem;gap:.15rem;margin-top:.4rem;padding-top:.4rem}
  .s.is-callout-socials{padding:4rem 1.25rem}
}

/* ============================================================
   Brand beats — Product canvas (Lando Collabs treatment)
   Two sections: editorial hero (brand-teaser) +
   pain-point rows + coming-soon (brand-manifesto).
   Both share rgb(208,225,235) fill + contour canvas.
   ============================================================ */

/* ---- Shared base ----------------------------------------- */
.brand-teaser,
.brand-manifesto{position:relative;z-index:2;overflow:hidden;background-color:rgb(208,225,235)}
.flow,.features,.brand-teaser,.brand-manifesto,.faq,.cta-section{position:relative;z-index:2}

/* ---- Section 1: editorial hero (Lando Collabs layout) ---- */
.brand-teaser{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(4rem,10vh,7rem) var(--space-xl) clamp(1.5rem,2vh,2rem)}
.brand-teaser__inner{position:relative;z-index:4;display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(2rem,5vw,6rem);max-width:1280px;width:100%;margin:0 auto}



/* Editorial title — left side (PARTNERS &CAMPAIGNS equivalent) */
.brand-teaser__copy{flex:0 1 40%;max-width:40%;position:relative;z-index:1}
.brand-teaser__title{display:flex;flex-direction:column;line-height:.92;color:var(--color-text)}
.bt-line{display:block}
.bt-sans{font-family:var(--font-ui),sans-serif;font-weight:900;font-size:clamp(3.2rem,7.5vw,6.8rem);letter-spacing:-.04em;text-transform:uppercase}
.bt-serif{font-family:"Bodoni Moda",serif;font-style:italic;font-weight:700;font-size:clamp(2.8rem,6.8vw,6.2rem);letter-spacing:-.02em;text-transform:none;color:var(--color-highlight)}

/* Description — right side (the small paragraph) */
.brand-teaser__desc-col{flex:0 0 min(32em,44%);position:relative;z-index:1;padding-bottom:.4rem}
.brand-teaser__desc{font-family:var(--font-body),sans-serif;font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.6;color:var(--color-text-muted)}

/* ---- Section 2: pain rows + coming soon ------------------ */
.brand-manifesto{min-height:100vh;display:flex;align-items:flex-start;padding:0rem clamp(1rem,2vw,2rem)}
.brand-manifesto__inner{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;gap:0}

/* Pain row */
.bm-row{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start;padding:clamp(3.5rem,7vh,6rem) 0}
.bm-row--flip .bm-row__left{order:2;text-align:right;padding-left:clamp(1rem,3vw,3rem);padding-right:clamp(.5rem,2vw,2.5rem)}
.bm-row--flip .bm-row__right{order:1;text-align:left;padding-top:0;padding-left:clamp(.5rem,2vw,2.5rem);padding-right:clamp(1rem,3vw,3rem)}

.bm-num{display:block;font-family:var(--font-ui),sans-serif;font-weight:900;font-size:clamp(4rem,10vw,8rem);line-height:.85;letter-spacing:-.05em;color:var(--color-highlight);opacity:.2;margin-bottom:-.1em;user-select:none}
.bm-headline{font-family:var(--font-ui),sans-serif;font-weight:900;font-size:clamp(1.7rem,3.2vw,2.8rem);line-height:1.08;letter-spacing:-.03em;color:var(--color-text);margin-bottom:.7em}
.bm-headline em{font-style:italic;font-family:"Bodoni Moda",serif;font-weight:700}
.bm-body{font-size:clamp(.92rem,1.2vw,1rem);line-height:1.65;color:var(--color-text-muted);max-width:30em}

.bm-row__right{padding-top:clamp(2rem,5vh,4rem)}
.bm-solve-label{display:inline-block;font-family:var(--font-ui),sans-serif;font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--color-highlight);margin-bottom:.85em}
.bm-solve-text{font-family:var(--font-body),sans-serif;font-size:clamp(.95rem,1.25vw,1.08rem);line-height:1.7;color:var(--color-text);font-weight:500;max-width:30em}
.bm-row--flip .bm-row__right .bm-solve-text{text-align:left;max-width:30em;display:inline-block}

/* Thin divider between rows */
.bm-divider{display:none}

/* Coming Soon footer */
.bm-coming-soon{margin-top:clamp(3rem,7vh,5rem);align-self:flex-end;text-align:right;max-width:32rem}
.bm-cs-eyebrow{display:inline-flex;flex-direction:row-reverse;align-items:center;gap:.6em;font-family:var(--font-ui),sans-serif;font-weight:500;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-highlight);margin-bottom:1em}
.bm-cs-dot{width:.5em;height:.5em;border-radius:50%;background:var(--color-highlight);box-shadow:0 0 0 0 rgba(57,50,220,.5);animation:bt-pulse 2.2s ease-out infinite}
.bm-cs-label{font-family:var(--font-ui),sans-serif;font-weight:900;font-size:clamp(2.4rem,5vw,4.4rem);line-height:.9;letter-spacing:-.04em;color:var(--color-text);margin-bottom:1.4em}
.bm-cs-label em{font-style:italic;font-family:"Bodoni Moda",serif;font-weight:700;font-size:.92em}
.bm-cs-chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.55em}

/* ---- Responsive ------------------------------------------ */
@media (max-width:820px){
  .brand-teaser{min-height:auto;padding:5rem 1.5rem 4rem;justify-content:flex-start}
  .brand-teaser__inner{flex-direction:column;align-items:flex-start;gap:2rem}
  .brand-teaser__desc-col{flex:none;width:100%}
  
  .brand-manifesto{min-height:auto;padding:4rem 1.5rem 5rem}
  .bm-row{grid-template-columns:1fr;gap:1.8rem}
  .bm-row--flip .bm-row__left,.bm-row--flip .bm-row__right{order:unset}
  .bm-row__right{padding-top:0}
  .bm-headline{font-size:clamp(1.5rem,6vw,2rem)}
}

/* 02 flip: number + headline + body all right-aligned */
.bm-row--flip .bm-row__left .bm-num,
.bm-row--flip .bm-row__left .bm-headline,
.bm-row--flip .bm-row__left .bm-body{text-align:right}

/* 02 fix: body block right-anchored + headline full-width right-align */
.bm-row--flip .bm-row__left .bm-body{margin-left:auto;max-width:28em}
.bm-row--flip .bm-row__left .bm-headline{max-width:none}

/* 02 fix column: push toward centre + drop down */
.bm-row--flip .bm-row__right{padding-left:clamp(4rem,10vw,9rem)!important;padding-top:clamp(3rem,6vh,5rem)!important}

/* ============================================================
   Brand canvas — aesthetic refinements
   ============================================================ */

/* Hero: eyebrow with accent dash */
.bt-eyebrow{display:inline-flex;align-items:center;gap:.85em;font-family:var(--font-ui),sans-serif;font-weight:500;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--color-highlight);margin-bottom:clamp(1.5rem,3vh,2.4rem)}
.bt-eyebrow__dash{display:inline-block;width:2.6em;height:2px;background:var(--color-highlight);border-radius:2px}

/* Hero title: tighter, more refined rhythm; serif word indented for elegance */
.brand-teaser__title{line-height:.9;letter-spacing:-.045em}
.bt-serif{margin-left:.45em}

/* Description column: small em-dash accent above, lighter refined type */
.brand-teaser__desc-col{align-self:flex-end}
.bt-desc-mark{display:block;font-family:"Bodoni Moda",serif;font-size:2.4rem;line-height:.4;color:var(--color-highlight);margin-bottom:.5rem}
.brand-teaser__desc{font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.62;color:var(--color-text);max-width:24em}

/* Coming-soon footer (bottom-right, no line) */
.bm-cs-label{margin-bottom:1.1em}
.bm-cs-label em{color:var(--color-highlight)}

/* Pain numbers: lighter, more like a quiet index mark */
.bm-num{opacity:.16;font-weight:900}
.bm-headline em{color:var(--color-highlight)}

@media (max-width:820px){
  .brand-teaser__desc-col{align-self:flex-start}
  .bm-coming-soon{align-self:flex-start;text-align:left;max-width:none}
  .bm-cs-eyebrow{flex-direction:row}
  .bm-cs-chips{justify-content:flex-start}
}

/* Hero tagline — three staccato phrases under the description */
.bt-tagline{margin-top:1.5rem;font-family:var(--font-ui),sans-serif;font-weight:700;font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.35;letter-spacing:-.01em;color:var(--color-text)}
.bt-tagline span{color:var(--color-highlight);padding:0 .35em}

/* QuickForge brand title — single inline word, larger */
.brand-teaser__title{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:0}
.brand-teaser__title .bt-sans{font-size:clamp(3.6rem,8.5vw,7.6rem)}
.brand-teaser__title .bt-serif{font-size:clamp(3.4rem,8vw,7.2rem);margin-left:.04em}
.bt-tagline{margin-top:clamp(1.4rem,3vh,2.2rem)}

/* Hero description now stacked under the tagline (left column) */
.brand-teaser__copy .brand-teaser__desc{margin-top:clamp(1.4rem,3vh,2rem);max-width:30em;color:var(--color-text-muted)}

/* Right column reserved for the product image */
.brand-teaser__media{flex:0 0 58%;align-self:center;display:flex;align-items:center;justify-content:center}
.brand-teaser__media{position:relative;left:8rem}
.bt-media-main{width:120%;max-width:120%;height:auto;aspect-ratio:1.127/1;object-fit:fill;border-radius:16px;display:block;transform:translateY(-4.5rem)}
/* notification overlay — 1/5 the main image width, bottom-right overlap */
/* Chat composite — header bar (heading_area) on top, connected to a fixed
   square-ish window where the messages image scrolls (scroll-driven, JS). */
.bt-chat{position:absolute;left:-16%;bottom:-5rem;width:46%;z-index:2;border-radius:0;overflow:hidden;background:#fff;box-shadow:0 26px 56px -18px rgba(5,4,25,.55)}
.bt-chat__head{display:block;width:100%;height:auto}
.bt-chat__foot{display:block;width:100%;height:auto}
/* the window: fixed aspect (square-ish viewport), clips the scrolling feed */
.bt-chat__window{position:relative;width:100%;height:0;padding-bottom:78%;overflow:hidden;background:#fff}
.bt-chat__feed{position:absolute;top:0;left:0;width:100%;height:auto;display:block;will-change:transform}

@media (max-width:820px){
  .brand-teaser__copy{flex:none;max-width:none}
  .brand-teaser__media{display:none}
}

/* ============================================================
   Flow stages — 4-item text list + 4 square project/blog cards.
   The list (left, inside .flow-panel__content) and the cards (right,
   pinned + scroll-faded by flow.js) are coupled: hovering an item OR a
   card adds .is-active to the matching pair, which lights the card up
   exactly like the Projects-section .proj-card :hover.
   ============================================================ */
.flow-panel__list{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;max-width:480px;color:#fff}
.flow-panel__list li{margin:0}
.flow-panel__item{display:inline-block;padding:7px 0;font-size:clamp(18px,1.7vw,25px);font-weight:600;line-height:1.18;letter-spacing:-.01em;color:inherit;text-decoration:none;cursor:pointer;transition:color .25s var(--ease-default),transform .25s var(--ease-default)}
.flow-panel__item:hover,.flow-panel__item.is-active{transform:translateX(8px)}
/* grouped reveal in step with the index/title (mirrors the old sub/pills fade) */
.flow-panel__content .flow-panel__list{opacity:0;transform:translateY(26px);transition:opacity .5s var(--ease-default),transform .5s var(--ease-default)}
.flow-panel--passed .flow-panel__content .flow-panel__list{transform:translateY(-26px)}
.flow-panel--active .flow-panel__content .flow-panel__list{opacity:1;transform:none;transition-delay:.2s}

/* The card grid that replaced the GL image. flow.js pins + fades it. */
.flow-panel__cards{position:absolute;z-index:4;top:50%;left:50%;width:min(44vw,581px);display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:17.6px;opacity:0;will-change:transform,opacity}
/* Plain SQUARE cards (not the notched .proj-card shape): drop the corner notch and
   the notched SVG frame; use a square inset border that lights up on activation. */
.flow-panel__cards .proj-card{aspect-ratio:1/1;width:100%;overflow:hidden;border-radius:0;box-shadow:inset 0 0 0 1.5px rgba(124,208,255,.28);transition:box-shadow .35s ease,border-radius .45s cubic-bezier(.19,1,.22,1)}
.flow-pcard .proj-card__media{clip-path:none}
/* Blog cards have no photo — an indigo→blue gradient face instead of an <img>. */
.flow-panel__cards .proj-card__shot{position:absolute;inset:0;background:linear-gradient(150deg,#222a6b,#3f6fd8)}
/* Class-driven activation = the same look as a :hover, so text-hover and card-hover
   both light the card up: zoom/darken the image, wipe the reveal open, blue border. */
.proj-card.is-active .proj-card__img{transform:scale(1.06);filter:saturate(1.05) brightness(1.03)}
.proj-card.is-active .proj-card__shot{filter:brightness(.78)}
.proj-card.is-active .proj-card__reveal{clip-path:polygon(0% 100%,12.5% 100%,25% 100%,37.5% 100%,50% 100%,62.5% 100%,75% 100%,87.5% 100%,100% 100%,100% 100%,0% 100%);transition:clip-path .65s cubic-bezier(.19,1,.22,1)}
.flow-pcard.is-active,.flow-pcard:hover{box-shadow:inset 0 0 0 2px #4d8bff;border-radius:22px}

@media (max-width:820px){
  .flow-panel__list{max-width:none}
  .flow-panel__cards{position:static;width:100%;transform:none!important;opacity:1!important;margin-top:26px;gap:12px}
}

/* ---------- Linux terminal boot loader ---------- */
html.boot-active{overflow:hidden;height:100%}
#boot-loader{position:fixed;inset:0;z-index:100001;display:flex;background:#0c0c0c;font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;transition:opacity .5s ease}
#boot-loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.boot-term{flex:1;display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;background:#0c0c0c}
.boot-term__bar{display:flex;align-items:center;gap:8px;height:42px;padding:0 18px;background:#000}
.boot-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.boot-dot--r{background:#ff5f56}.boot-dot--y{background:#ffbd2e}.boot-dot--g{background:#27c93f}
.boot-term__title{margin-left:12px;font-size:12px;letter-spacing:.4px;color:#8b93a7}
.boot-term__body{flex:1;padding:28px clamp(18px,5vw,64px);display:flex;flex-direction:column}
.boot-out{margin:0;font:inherit;font-size:13.5px;line-height:1.6;color:#d0d0d0;white-space:pre-wrap;word-break:break-word}
.boot-line{min-height:1.6em}
/* ANSI-ish terminal palette (matches Ubuntu/WSL): only the prompt is coloured. */
.b-usr{color:#26a269;font-weight:700}
.b-path{color:#3b8eea;font-weight:700}
.b-cmd{color:#e6e6e6}
.boot-caret{display:inline-block;width:9px;height:15px;margin-left:1px;vertical-align:-2px;background:#d0d0d0;animation:boot-blink 1s steps(1) infinite}
.boot-bar{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:18px}
.boot-bar__track{flex:1;height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.boot-bar__fill{width:0;height:100%;border-radius:6px;background:linear-gradient(90deg,#26a269,#33c7de);transition:width .35s ease}
.boot-bar__pct{min-width:42px;text-align:right;font-size:12px;color:#8a8a8a}
@keyframes boot-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
@media (max-width:820px){
  .boot-term__body{min-height:210px;padding:16px}
  .boot-out{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .boot-caret{animation:none}
  .boot-bar__fill{transition:none}
}

/* ---------- flow__cd: rolling scroll-typed terminal, top-left of the flow section
   Continues the boot loader's shell (flow.js). Line 0 `cd highlights` types as the
   section scrolls in; then one `cat domain N` per zone. Clipped to ~2 lines: the
   current + previous show, older lines rise up and fade. Pinned in .flow__wrapper. */
/* ONE terminal element. flow.js reparents it to <body> and drives its fixed top/opacity every
   frame (parked bottom-left in the zoom-out → rides up → pinned → scrolls away). z-index clears
   the hero video (z-index 2). The CSS position/top here is the pre-JS fallback. */
.flow__cd{position:fixed;top:calc(var(--header-height) + 18px);left:clamp(18px,4vw,48px);z-index:1;margin:0;font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:clamp(12px,1.3vw,15px);line-height:1.4;color:var(--cli-punct,#d0d0d0);pointer-events:none;height:2.9em;overflow:hidden}
.flow__cd-stack{transition:transform .4s ease}
.flow__cd-row{margin:0;transition:opacity .4s ease}
.flow__cd-row--pending,.flow__cd-row--past{opacity:0}
.flow__cd-row--prev,.flow__cd-row--cur{opacity:1}
.flow__cd-cmd{color:#e6e6e6}
.flow__cd .b-usr{color:var(--cli-usr,#26a269)}
.flow__cd .b-path{color:var(--cli-path,#3b8eea)}
.flow__cd-row--dark .flow__cd-cmd{color:#111}
.flow__cd-row--dark .flow__cd-caret{background:#111}
.flow__cd-caret{display:inline-block;width:.55em;height:1.05em;margin-left:2px;vertical-align:-.15em;background:#d0d0d0;animation:boot-blink 1s steps(1) infinite}
/* Only the current (typing) line carries the blinking caret. */
.flow__cd-row:not(.flow__cd-row--cur) .flow__cd-caret{display:none}
@media (max-width:820px){
  .flow__cd{display:none}
}
@media (prefers-reduced-motion:reduce){
  .flow__cd-caret{animation:none}
}
.term-projects .proj-card__media{clip-path:shape(from 1.966% 0.122%,line to 98.007% 0.122%,arc to 99.85% 1.946% of 1.843% 1.825% cw,line to 99.85% 88.804%,arc to 98.007% 90.628% of 1.843% 1.825% cw,line to 64.7% 90.628%,arc to 60.185% 92.782% of 5.774% 5.718% ccw,line to 56.131% 97.817%,arc to 51.809% 99.878% of 5.529% 5.475% cw,line to 1.966% 99.878%,arc to 0.123% 98.054% of 1.843% 1.825% cw,line to 0.123% 1.946%,arc to 1.966% 0.122% of 1.843% 1.825% cw,close);transition:clip-path 2s cubic-bezier(.19,1,.22,1)}
.term-projects .proj-card:hover .proj-card__media,.term-projects .proj-card:focus-within .proj-card__media{clip-path:shape(from 6.634% 0.243%,line to 93.339% 0.243%,arc to 99.727% 6.569% of 6.388% 6.326% cw,line to 99.727% 88.804%,arc to 98.007% 90.507% of 1.72% 1.703% cw,line to 64.7% 90.507%,arc to 60.089% 92.706% of 5.897% 5.839% ccw,line to 56.035% 97.741%,arc to 51.809% 99.757% of 5.405% 5.353% cw,line to 6.634% 99.757%,arc to 0.246% 93.431% of 6.388% 6.326% cw,line to 0.246% 6.569%,arc to 6.634% 0.243% of 6.388% 6.326% cw,close);transition:none}
.term-projects .proj-card__frame.is-base{transition:opacity 2s ease}.term-projects .proj-card:hover .proj-card__frame.is-base,.term-projects .proj-card:focus-within .proj-card__frame.is-base{opacity:0;transition:none}
@media (prefers-reduced-motion:reduce){.term-projects .proj-card__media,.term-projects .proj-card__frame.is-base{transition:none}}
.reel-word{display:inline-block;white-space:nowrap}
.reel-char{display:inline-block;position:relative;overflow:hidden;vertical-align:top}
.reel-char__col{display:block;position:relative;transition:transform .2s var(--ease-default);transition-delay:var(--hd-rev,0s);will-change:transform}
.reel-char__a{display:block;color:inherit}
.reel-char__c{display:block;position:absolute;left:0;top:100%;width:100%;color:#3ddc84}
.flow-panel--light .reel-char__c{color:#26a269}
.flow-panel__item.is-active .reel-char__col,.flow-panel__item:hover .reel-char__col,.flow-panel__item:focus-visible .reel-char__col{transform:translateY(-100%);transition-delay:var(--hd,0s)}
@media (prefers-reduced-motion:reduce){.reel-char__col{transition:none}}

/* ===== Footer (.lfooter) — Lando-style: dark notched box (SVG mask) on a sky-blue
   gradient, static contour pattern inside, sky-blue tools marquee ===== */
.lfooter{
  --lf-sky:#3d7dd6;          /* sky-blue on light (brand, hovers on gradient) */
  --lf-sky-bright:#8fc4ff;   /* sky-blue on dark (marquee, highlight, pill) */
  --lf-ink:#0f1a2e;          /* dark text on the gradient */
  --lf-box:#0f1628;          /* the dark box (matches the projects navy) */
  --lf-dim:rgba(190,210,235,.55);  /* muted labels on the dark box */
  --lf-sky-vivid:#6db4f8;          /* the saturated sky the lead-in ramps into */
  --lf-lead:clamp(160px,32vh,400px);   /* airy gradient runway above the box (reference) */
  background-color:rgb(208,225,235);   /* section colour at the top of the runway */
  position:relative;
  z-index:2;   /* above the fixed #bg-contours canvas so its moving lines don't show here */
  padding:14px clamp(14px,1.8vw,30px) 0;
}
/* Lando's exact gradient: a radial whose centre sits ~2 heights ABOVE the footer, so the
   transparent→vivid boundary is a downward-bowing ARC — the sky blue climbs higher at the
   sides and dips around the box's top bump (.footer-bg-gradient in the reference) */
.lfooter::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle farthest-corner at 50% -190%,rgba(109,180,248,0) 68%,var(--lf-sky-vivid) 83%);
  pointer-events:none;
}

/* top bar (on the gradient, above the box) */
.lfooter__topbar{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;padding:8px 6px 12px}
.lfooter__brand{
  display:flex;flex-direction:column;line-height:.92;
  font-weight:700;letter-spacing:-.5px;text-transform:uppercase;
  font-size:clamp(20px,2vw,30px);color:var(--lf-ink);
}
.lfooter__brand span:last-child{color:var(--lf-sky)}

/* the notched dark box */
.lfooter__layout{position:relative;padding-bottom:8px;margin-top:var(--lf-lead)}
.lfooter__clip{
  position:relative;
  aspect-ratio:1688/896;               /* must match the mask viewBox so it maps 1:1 */
  background:var(--lf-box);
  color:#f4f8ff;
  border-radius:30px;                  /* fallback shape if mask-image fails to load */
  overflow:hidden;
  -webkit-mask-image:url("images/footer-mask.svg");mask-image:url("images/footer-mask.svg");
  -webkit-mask-size:cover;mask-size:cover;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
/* static contour lines inside the box (Lando blobs pattern, recoloured blue) */
.lfooter__pattern{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.14;pointer-events:none;
}

/* inner content column */
.lfooter__inner{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:clamp(56px,6.5vw,110px) clamp(28px,6vw,110px) 0;
}

/* big headline */
.lfooter__headline{
  text-align:center;
  font-weight:700;text-transform:uppercase;
  letter-spacing:clamp(-1px,-.3vw,-4px);
  line-height:.96;
  font-size:clamp(34px,6.6vw,112px);
}
.lfooter__hl-row{display:block}
.lfooter__headline .is-hl{color:var(--lf-sky-bright)}

/* left / right columns */
.lfooter__cols{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:24px;margin-top:auto;margin-bottom:clamp(64px,9vw,160px);
}
.lfooter__col{display:flex;flex-direction:column;gap:6px}
.lfooter__col--right{text-align:right;align-items:flex-end}
.lfooter__col-label{
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--lf-dim);margin-bottom:10px;
}
.lfooter__navlink{
  font-weight:700;text-transform:uppercase;letter-spacing:.3px;
  font-size:clamp(18px,1.9vw,30px);line-height:1.18;color:#f4f8ff;
  transition:color .25s ease,transform .25s ease;width:max-content;
}
.lfooter__col--right .lfooter__navlink{align-self:flex-end}
.lfooter__navlink:hover{color:var(--lf-sky-bright);transform:translateX(2px)}
.lfooter__col--right .lfooter__navlink:hover{transform:translateX(-2px)}

/* portrait cutout — bottom-centre of the box, like the reference's helmet
   (above the marquee, below the email pill; clipped by the notched mask) */
.lfooter__me{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:auto;height:66%;
  z-index:2;pointer-events:none;user-select:none;
  filter:brightness(.78) saturate(.92);   /* sink into the dark box like the reference helmet */
}

/* sky-blue tools marquee (inside the box, near the bottom edge) */
.lfooter__mq{
  position:absolute;left:0;right:0;bottom:7.5%;
  display:flex;overflow:hidden;pointer-events:none;
}
.lfooter__mq-track{
  display:flex;align-items:center;flex:none;
  gap:clamp(34px,4vw,68px);padding-right:clamp(34px,4vw,68px);
  animation:lf-mq 32s linear infinite;
}
.lfooter__mq-track i{
  flex:none;display:block;
  width:clamp(28px,2.4vw,42px);height:clamp(28px,2.4vw,42px);
  background:var(--lf-sky-bright);
  -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;
}
@keyframes lf-mq{to{transform:translateX(-100%)}}

/* email pill — sits on the bottom-centre tab of the mask */
.lfooter__email{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  z-index:3;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--lf-sky-bright);color:var(--lf-box);
  font-weight:700;text-transform:uppercase;letter-spacing:.4px;font-size:14px;
  padding:14px 26px;border-radius:999px;
  transition:background .25s ease,transform .25s ease;
}
.lfooter__email:hover{background:#aed6ff;transform:translateX(-50%) translateY(-2px)}

/* legal row — in the gradient shelves either side of the bottom tab */
.lfooter__bottom{
  position:absolute;left:12px;right:12px;bottom:4px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  font-size:12px;letter-spacing:.2px;color:var(--lf-ink);
  pointer-events:none;
}
.lfooter__copy{font-size:clamp(9px,.68vw,12px);white-space:nowrap}  /* must fit the mask's left shelf (18% wide), which scales with vw */
.lfooter__legal{display:flex;gap:22px}
.lfooter__legal a{color:var(--lf-ink);pointer-events:auto;transition:color .25s ease}
.lfooter__legal a:hover{color:var(--lf-sky)}

@media (prefers-reduced-motion:reduce){
  .lfooter__mq-track{animation:none}
}

@media (max-width:820px){
  .lfooter{padding:12px 12px 0;--lf-lead:clamp(90px,18vh,180px)}
  .lfooter__clip{aspect-ratio:auto;-webkit-mask-image:none;mask-image:none;border-radius:22px}
  .lfooter__inner{position:static;padding:36px 22px 0}
  .lfooter__headline{font-size:clamp(30px,9vw,44px);letter-spacing:-1px}
  .lfooter__cols{flex-direction:row;gap:18px;margin-top:34px;margin-bottom:0}
  .lfooter__navlink{font-size:18px}
  .lfooter__me{display:none}   /* no room in the stacked mobile layout */
  .lfooter__mq{position:static;margin-top:36px;padding-bottom:30px}
  .lfooter__mq-track i{width:26px;height:26px}
  .lfooter__email{position:static;transform:none;width:max-content;margin:18px auto 0;display:flex}
  .lfooter__email:hover{transform:translateY(-2px)}
  .lfooter__bottom{position:static;flex-direction:column;align-items:flex-start;gap:10px;padding:14px 10px 16px}
}