/* Home page: pieces that sit on top of the compiled Framer layout */
body.home-f{background:rgb(245,245,245)}
body.theme-on,.theme-on .bp{background-color:var(--theme-bg,rgb(64,18,255))!important}

/* header (Framer "Header 2": bar, then a grey box after scrolling) */
.hdr{position:sticky;top:0;z-index:40;height:80px;pointer-events:none}
.hdr-bar{display:flex;align-items:center;height:80px;padding:0 60px;gap:0;pointer-events:auto;transition:opacity .35s ease,transform .35s ease}
.hdr-logo{margin-right:76px}
.hdr-logo .logo-svg{height:20px}
/* side margins: content sits in a centered column (max 1280px) with comfortable gutters */
:root{--col:1280px;--side:max(clamp(20px,5vw,80px),calc((100vw / var(--z) - var(--col)) / 2))}
@media (min-width:1920px){:root{--col:1600px}}
@media (min-width:2200px){:root{--z:1.15}}
@media (min-width:2560px){:root{--z:1.33}}
@media (min-width:3200px){:root{--z:1.66}}
.home-f .sec-f{padding-left:var(--side)!important;padding-right:var(--side)!important;box-sizing:border-box}
.home-f .work .wrap,.about-f,.foot-f{padding-left:var(--side)!important;padding-right:var(--side)!important}
.hdr-bar{padding-left:var(--side);padding-right:var(--side)}
.pill-fixed{left:var(--side)}
@media (max-width:819.98px){:root{--side:16px}.pill-fixed{left:10px}}
.hdr nav{display:flex;gap:40px;flex:1}
.hdr nav a,.hdr-cv{font:400 15px/1.4 Poppins,sans-serif;color:rgba(0,0,0,.7);transition:color .2s}
.hdr nav a:hover,.hdr-cv:hover{color:rgb(64,18,255)}
.hdr-cv{display:flex;align-items:center;gap:6px;margin-right:0}
.hdr-cv svg{width:15px;height:15px}
.scrolled .hdr-bar{opacity:0;transform:translateY(-12px);pointer-events:none}
.pill-fixed{position:fixed;top:17px;left:var(--side);width:230px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .35s ease,transform .35s ease,height .45s cubic-bezier(.2,.7,.2,1),width .45s cubic-bezier(.2,.7,.2,1)}
.pill-fixed .pill-tag{display:none}
.pill-fixed.open{width:350px}
.pill-fixed.open .pill-tag{display:inline}
.scrolled .pill-fixed{opacity:1;transform:none;pointer-events:auto}
@media (max-width:819.98px){
  .hdr{height:0}
  .hdr-bar{display:none}
  .pill-fixed{top:10px;left:10px;width:calc(100% - 20px);max-width:none;opacity:1;transform:none;pointer-events:auto}
  .pill-fixed .pill-tag{display:inline}
  .pill-fixed.open{width:calc(100% - 20px)}
}

/* Framer buttons (Audit/Button) */
.fbtn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:20px 32px;border-radius:100px;font:500 18px/1.2 Poppins,sans-serif;letter-spacing:-.01em;white-space:nowrap;transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.fbtn svg{width:20px;height:20px;transition:transform .3s ease}
.fbtn:hover svg{transform:translate(2px,-2px)}
.fbtn-primary{background:rgb(64,18,255);color:#fff!important}
.fbtn-primary:hover{background:rgb(26,15,46)}
.fbtn-outline{background:rgb(245,245,245);color:rgb(26,15,46)!important;border:1px solid rgba(26,15,46,.2)}
.fbtn-outline:hover{background:rgb(26,15,46);color:#fff!important}
.fbtn-light{background:#fff;color:rgb(64,18,255)!important}
.fbtn-light:hover{background:rgb(240,238,255)}
@media (max-width:819.98px){.fbtn{padding:16px 24px;font-size:16px}}

/* ticker */
.ticker{display:flex;overflow:hidden}
.ticker-track{display:flex;align-items:center;flex:none;animation:tick var(--tick-d,40s) linear infinite}
@keyframes tick{to{transform:translateX(-100%)}}

/* work grid: the portfolio cards sit inside the Framer page */
.home-f .work{width:100%;align-self:stretch;padding:0 0 0}
.home-f .work .wrap{max-width:none;padding:0 40px}
@media (max-width:819.98px){.home-f .work .wrap{padding:0 16px}}
.home-f .work{font-family:Poppins,sans-serif;font-weight:300;color:#000}
.home-f .work .eyebrow{font:300 16px/1.4 Poppins,sans-serif;letter-spacing:.14em;color:rgba(0,0,0,.4)}
.home-f .work h2{font:300 clamp(36px,5vw,60px)/1.15 Poppins,sans-serif;letter-spacing:-.05em;color:rgb(36,36,36)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.filters button{font:400 13px/1 Poppins,sans-serif;padding:10px 16px;border-radius:100px;border:1px solid rgba(0,0,0,.12);background:transparent;color:rgba(0,0,0,.6);cursor:pointer;transition:.25s}
.filters button:hover{border-color:rgb(64,18,255);color:rgb(64,18,255)}
.filters button.on{background:rgb(64,18,255);border-color:rgb(64,18,255);color:#fff}
.card.hide{display:none}

.work-more{display:flex;justify-content:center;margin-top:clamp(40px,5vw,64px)}
.cv-link-row{margin-top:18px}
.cv-link{display:inline-flex;align-items:center;gap:6px;font:400 14px/1.2 Poppins,sans-serif;color:rgb(26,15,46);padding-bottom:3px;border-bottom:1px solid rgba(26,15,46,.35);transition:color .25s,border-color .25s}
.cv-link svg{width:14px;height:14px}
.cv-link:hover{color:rgb(64,18,255);border-color:rgb(64,18,255)}
/* About and Work pages */
.page-f main{display:flex;flex-direction:column;padding-top:60px}
.about-page{padding-bottom:0}
.about-page .about-grid{margin-bottom:0}
.about-page .h-f{font-size:clamp(34px,6vw,72px)}
.work-page{padding:20px 0 0}
@media (max-width:819.98px){.page-f main{padding-top:84px}}

/* Home About: banner + one strong line */
.about-home .eyebrow-f{margin-bottom:48px}
.hb{border-radius:10px;overflow:hidden;background:rgb(26,15,46)}
.hb-img{display:block;width:100%;height:auto}
.hb-ph{position:relative;height:clamp(320px,42vw,600px);background:radial-gradient(60% 90% at 50% 100%,#2b1bd6 0%,#140b5c 55%,#07061A 100%);overflow:hidden}
.hb-ph img{position:absolute;left:50%;bottom:0;height:100%;width:auto;transform:translateX(-50%);object-fit:cover;z-index:2;-webkit-mask-image:radial-gradient(70% 85% at 50% 60%,#000 55%,transparent 100%);mask-image:radial-gradient(70% 85% at 50% 60%,#000 55%,transparent 100%)}
.hb-name{position:absolute;left:0;right:0;top:50%;transform:translateY(-62%);text-align:center;font:500 clamp(56px,10.5vw,170px)/1 Poppins,sans-serif;letter-spacing:-.06em;color:#fff;white-space:nowrap;z-index:1}
.hb-role{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,36px);z-index:2;font:400 clamp(16px,2vw,28px)/1.15 Poppins,sans-serif;letter-spacing:-.03em;color:#fff;text-align:right}
.hb-copy{display:flex;flex-direction:column;gap:48px;margin-top:80px;padding:0 30px}
.hb-side{align-self:flex-end;text-align:right}
.hb-side .about-cta{justify-content:flex-end}
.hb-line{font:400 clamp(30px,4.4vw,64px)/1.12 Poppins,sans-serif;letter-spacing:-.045em;color:rgb(26,15,46);margin:0}
.hb-line .hl{color:rgb(64,18,255)}
.hb-side{max-width:420px}
.hb-side p{font:300 15px/1.55 'Noto Sans',sans-serif;color:rgba(0,0,0,.55);margin:0 0 22px}
.fbtn-small{padding:12px 20px;font-size:14px;gap:8px}
.fbtn-small svg{width:15px;height:15px}
.about-home .about-cta{gap:10px}
@media (max-width:819.98px){.about-home .eyebrow-f{margin-bottom:28px}.hb-copy{margin-top:40px;padding:0;gap:28px}.hb-ph img{height:92%}.fbtn-small{padding:11px 18px;font-size:14px}}

/* About page sections */
.sec-about{width:100%;box-sizing:border-box;padding:160px var(--side) 0}
.h-s{font:300 clamp(36px,5vw,60px)/1.12 Poppins,sans-serif;letter-spacing:-.05em;color:rgb(36,36,36);margin:24px 0 22px}
.h-s span{color:rgba(36,36,36,.4)}
.lead-s{font:300 18px/1.55 'Noto Sans',sans-serif;letter-spacing:-.01em;color:rgba(0,0,0,.55);max-width:560px;margin:0}
.caps{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:center}
.caps .h-s{margin-top:16px}
/* separator lines between About sections */
.sep-f{width:100%;box-sizing:border-box;padding:160px var(--side) 0}
.sep-f span{display:block;height:1px;background:rgba(0,0,0,.1)}
.sep-f+.sec-about{padding-top:120px}
/* process: header on the right, outlined cards that turn blue */
.proc-head{margin-left:auto;width:min(560px,100%)}
/* working experience */
.wexp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:start}
.wexp-l{position:sticky;top:110px}
.wx{display:flex;justify-content:space-between;gap:32px;padding:30px 0;border-bottom:1px solid rgba(0,0,0,.12)}
.wx:first-child{border-top:1px solid rgba(0,0,0,.12)}
.wx-l h3{font:400 24px/1.2 Poppins,sans-serif;letter-spacing:-.03em;color:rgb(26,15,46);margin:0 0 12px}
.wx-l ul{list-style:none;padding:0;margin:0}
.wx-l li{font:300 15px/1.5 'Noto Sans',sans-serif;color:rgba(0,0,0,.55);margin-bottom:4px}
.wx-r{flex:none;width:200px;text-align:right;display:flex;flex-direction:column;gap:6px}
.wx-r b{font:400 15px/1.3 Poppins,sans-serif;color:rgb(26,15,46)}
.wx-r span{font:400 14px/1.2 Poppins,sans-serif;color:rgb(64,18,255)}
.wx-r small{font:300 13px/1.3 'Noto Sans',sans-serif;color:rgba(0,0,0,.45)}
@media (max-width:1199.98px){.wexp{grid-template-columns:1fr;gap:40px}.wexp-l{position:static}}
@media (max-width:819.98px){.sep-f{padding-top:96px}.sep-f+.sec-about{padding-top:72px}.proc-head{margin-left:0}.wx{flex-direction:column;gap:12px}.wx-r{width:auto;text-align:left}}
.caps-r{display:flex;flex-direction:column;gap:34px}
.cap-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;font:400 15px/1.2 Poppins,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgb(26,15,46)}
.cap-top b{font-weight:400;color:rgb(64,18,255);letter-spacing:0}
.cap-bar{position:relative;height:22px;background:repeating-linear-gradient(90deg,rgba(64,18,255,.16) 0 2px,transparent 2px 6px)}
.cap-bar i{position:absolute;inset:0 auto 0 0;width:0;background:repeating-linear-gradient(90deg,rgb(64,18,255) 0 2px,transparent 2px 6px);transition:width 1.4s cubic-bezier(.22,1,.36,1)}
.cap-bar.in i,.no-js .cap-bar i{width:var(--pct)}
.pcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:64px}
.pcard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:400px;padding:28px;background:rgb(245,245,245);border:1px solid rgba(0,0,0,.15);border-radius:10px;overflow:hidden;box-sizing:border-box;transition:background-color .35s,border-color .35s}
.pcard:hover{background:rgb(64,18,255);border-color:rgb(64,18,255)}
.pcard-n{position:absolute;top:18px;right:22px;font:500 120px/1 Poppins,sans-serif;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px rgba(64,18,255,.35);transition:-webkit-text-stroke-color .35s}
.pcard:hover .pcard-n{-webkit-text-stroke-color:rgba(255,255,255,.7)}
.pcard h3{font:400 15px/1.2 Poppins,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgb(64,18,255);margin:0 0 14px;transition:color .35s}
.pcard p{font:300 16px/1.5 'Noto Sans',sans-serif;color:rgba(0,0,0,.6);margin:0;transition:color .35s}
.pcard:hover h3,.pcard:hover p{color:#fff}
.sec-exp{padding-top:160px!important}
.tcards{display:flex;gap:16px;margin-top:56px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.tcard{flex:0 0 min(360px,80vw);scroll-snap-align:start;display:flex;flex-direction:column;justify-content:space-between;min-height:340px;margin:0;padding:28px;background:#fff;border-radius:10px;box-sizing:border-box}
.tq{font:500 64px/0.6 Poppins,sans-serif;color:rgba(64,18,255,.25)}
.tcard blockquote{font:300 19px/1.5 'Noto Sans',sans-serif;color:rgb(26,15,46);margin:18px 0 28px}
.tcard figcaption{display:flex;align-items:center;gap:12px}
.tcard figcaption img{width:40px;height:40px;border-radius:6px;object-fit:cover}
.tcard figcaption b{display:block;font:400 15px/1.2 Poppins,sans-serif;color:rgb(26,15,46)}
.tcard figcaption small{font:300 13px/1.3 'Noto Sans',sans-serif;color:rgba(0,0,0,.5)}
@media (max-width:1199.98px){.caps{grid-template-columns:1fr;gap:48px}.pcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:819.98px){.sec-about{padding-top:96px}.sec-exp{padding-top:96px!important}.pcards{grid-template-columns:1fr;margin-top:40px}.pcard{min-height:260px}.pcard-n{font-size:90px}.cap-top{font-size:13px}}

/* CTA "Let's Talk" (Framer LetsTalk) */
.letstalk{position:relative;display:inline-block;font-family:Poppins,sans-serif;font-weight:400;letter-spacing:-.04em;line-height:1.1;color:rgb(26,15,46);transition:color .28s ease}
.letstalk::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;background:rgb(64,18,255);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.letstalk:hover{color:rgb(64,18,255)}
.letstalk:hover::after{transform:scaleX(1)}
@media (max-width:819.98px){.letstalk{font-size:40px!important}}

/* typing headline */
.typing{overflow:hidden}
.typing-t{display:inline-block;font:700 118px/1 Inter,sans-serif;letter-spacing:-.065em;color:rgb(64,18,255);white-space:nowrap}
.typing-t .c{opacity:0}
.typing-t .c.on{opacity:1}
.typing-t .cur{display:inline-block;width:.08em;height:.8em;background:currentColor;margin-left:.04em;vertical-align:baseline;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* footer */
.foot-f{width:100%;align-self:stretch;box-sizing:border-box;padding:200px 40px 50px}
.foot-contact{margin-left:min(650px,45%);display:flex;flex-direction:column;align-items:flex-start;gap:40px}
.foot-titles{display:flex;flex-direction:column;gap:40px}
.foot-k{font:300 30px/1.2 Poppins,sans-serif;letter-spacing:.02em;color:rgba(0,0,0,.5);margin:0}
.foot-h{font:300 40px/1.2 'Noto Sans',sans-serif;letter-spacing:.02em;color:rgba(0,0,0,.8);margin:0}
.foot-f .avail-f{margin:0!important}
.fctas{display:flex;flex-wrap:wrap;gap:24px 72px;padding-top:4px}
.fcta{display:flex;align-items:center;gap:14px;color:rgba(0,0,0,.8);transition:opacity .4s}
.fcta:hover{opacity:.55}
.fcta-i{flex:none;display:flex;padding:9px;border:1.5px solid rgb(64,18,255);border-radius:5px}
.fcta-i svg{width:20px;height:20px}
.fcta-t{font:300 22px/1.2 Poppins,sans-serif;letter-spacing:.01em}
.foot-typing{margin:100px 0 80px}
.foot-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;font:300 14px/1.2 Poppins,sans-serif;color:rgba(0,0,0,.8)}
.foot-bar span{display:flex;align-items:center;gap:3px}
.foot-bar svg{width:14px;height:14px}
.foot-bar a{transition:opacity .4s}
.foot-bar a:hover{opacity:.5}
.foot-line{height:1px;background:#000;margin-top:20px}
@media (max-width:1199.98px){.foot-contact{margin-left:0}.foot-f{padding-top:140px}}
@media (max-width:819.98px){
  .foot-f{padding:96px 16px 32px}.foot-contact{gap:28px}.foot-titles{gap:16px}.foot-k{font-size:20px}.foot-h{font-size:28px}
  .fctas{gap:16px;flex-direction:column}.fcta-i{padding:8px}.fcta-i svg{width:18px;height:18px}.fcta-t{font-size:18px;overflow-wrap:anywhere}
  .foot-typing{margin:64px 0 48px}.foot-bar{gap:14px 20px;justify-content:flex-start}
}

/* FAQ (Framer Questionnary) */
.faq{display:flex;flex-direction:column;gap:20px}
.qa{border-top:1px solid rgba(0,0,0,.15);padding-top:20px}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;cursor:pointer;font:300 30px/1.2 Poppins,sans-serif;letter-spacing:-.03em;color:rgba(0,0,0,.8)}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:relative;flex:none;width:22px;height:22px;margin-top:8px}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:0;top:10px;width:22px;height:1.5px;background:rgb(64,18,255);transition:transform .3s ease}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i::after{transform:rotate(0)}
.qa p{font:300 18px/1.5 'Noto Sans',sans-serif;color:rgba(0,0,0,.55);padding:16px 120px 4px 0;margin:0}
.faq-s .qa summary{font-size:20px}
.faq-s .qa p{font-size:15px;padding-right:0}

/* process (Framer How We Work/Process) */
.process{display:flex;gap:16px;width:100%;align-self:stretch}
.ptabs{flex:none;width:280px;height:600px;background:#fff;border-radius:10px;padding:10px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between}
.plist{display:flex;flex-direction:column;gap:6px}
.ptab{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:18px 20px 16px;border-radius:8px;cursor:pointer;transition:background .3s}
.ptab:hover{background:rgba(240,238,255,.5)}
.ptab.on{background:rgb(247,246,255)}
.ptab-row{display:flex;gap:14px;align-items:baseline;font:400 16px/1.2 Poppins,sans-serif;color:rgba(26,15,46,.42)}
.ptab-row b{font-weight:400;color:rgba(26,15,46,.42)}
.ptab.on .ptab-row,.ptab.on .ptab-row b{color:#000}
.ptab-row span{font-size:16px;line-height:1.2}
.pbar{display:block;height:3px;border-radius:3px;background:rgba(64,18,255,.12);overflow:hidden;opacity:0}
.ptab.on .pbar{opacity:1}
.pbar i{display:block;height:100%;width:0;background:rgb(64,18,255)}
.ptab.on .pbar i{animation:pfill 7s linear forwards}
.process.paused .ptab.on .pbar i{animation-play-state:paused}
@keyframes pfill{to{width:100%}}
.pnote{display:flex;gap:10px;align-items:flex-start;padding:16px 20px 14px;font:300 14px/1.4 'Noto Sans',sans-serif;color:rgba(26,15,46,.6);margin:0}
.pnote svg{flex:none;width:18px;height:18px}
.ppanels{flex:1;min-width:0;position:relative;height:600px}
.ppanel{position:absolute;inset:0;display:flex;gap:10px;padding:10px;background:#fff;border-radius:10px;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
.ppanel.on{opacity:1;visibility:visible}
.ptext{width:42%;display:flex;flex-direction:column;justify-content:space-between;padding:34px 28px 26px 30px;box-sizing:border-box}
.ptop{display:flex;flex-direction:column;gap:18px}
.pk{font:500 13px/1.2 Poppins,sans-serif;letter-spacing:.14em;color:rgb(64,18,255);margin:0}
.ptext h3{font:400 40px/1.05 Poppins,sans-serif;letter-spacing:-.045em;color:rgb(26,15,46);margin:0}
.pd{font:300 18px/1.5 'Noto Sans',sans-serif;color:rgba(0,0,0,.5);margin:0}
.precv{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.precv p{font:500 12px/1.2 Poppins,sans-serif;letter-spacing:.14em;color:rgba(26,15,46,.45);margin:0}
.pchip{display:inline-flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;border-radius:100px;background:rgba(240,238,255,.5);font:400 15px/1.2 Poppins,sans-serif;color:rgb(26,15,46)}
.pchip svg{width:18px;height:18px}
.pvis{flex:1;border-radius:8px;background:radial-gradient(60% 80% at 70% 30%,#4012FF55 0%,transparent 60%),radial-gradient(70% 90% at 30% 80%,#1B0C78 0%,transparent 70%),#07061A;position:relative;overflow:hidden}
.pnum{position:absolute;right:28px;bottom:10px;font:400 200px/1 Poppins,sans-serif;letter-spacing:-.06em;color:rgba(239,235,255,.14)}

/* about (styled like the Framer sections) */
.about-f{width:100%;box-sizing:border-box;padding:0 40px;align-self:stretch}
.eyebrow-f{display:flex;flex-direction:column;gap:40px;margin-bottom:88px}
.eyebrow-f .line{display:block;height:1px;background:rgba(0,0,0,.1)}
.eyebrow-f p,.label-f{font:300 16px/1.2 Poppins,sans-serif;letter-spacing:.14em;color:rgba(0,0,0,.4);margin:0}
.h-f{font:300 60px/1.15 Poppins,sans-serif;letter-spacing:-.05em;color:rgb(36,36,36);margin:0 0 64px;max-width:1300px}
.h-f span{color:rgba(36,36,36,.4)}
.about-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:60px;align-items:start;margin-bottom:120px}
.portrait-f{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:10px;display:block}
.about-copy p{font:300 22px/1.45 'Noto Sans',sans-serif;letter-spacing:-.02em;color:rgba(0,0,0,.7);margin:0 0 18px}
.stats-f{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 28px}
.stats-f div{background:#fff;border-radius:10px;padding:20px 24px;min-width:150px}
.stats-f b{display:block;font:300 52px/1 Poppins,sans-serif;letter-spacing:-.05em;color:rgb(64,18,255)}
.stats-f span{font:300 14px/1.3 'Noto Sans',sans-serif;color:rgba(26,15,46,.6)}
.avail-f{display:flex;align-items:center;gap:10px;font:400 15px/1.4 Poppins,sans-serif!important;color:rgb(26,15,46)!important;margin:0 0 28px!important}
.pulse{flex:none;width:9px;height:9px;border-radius:50%;background:#1ea35b;box-shadow:0 0 0 0 rgba(30,163,91,.5);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(30,163,91,0)}100%{box-shadow:0 0 0 0 rgba(30,163,91,0)}}
.about-cta{display:flex;flex-wrap:wrap;gap:14px}
.about-cols-f{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:61px}
.about-cols-f .label-f{margin-bottom:24px}
.about-cols-f .xrows+.label-f,.about-cols-f .chips-f+.label-f{margin-top:48px}
.xrows{border-top:1px solid rgba(0,0,0,.12)}
.xrow{display:flex;gap:28px;padding:32px 0;border-bottom:1px solid rgba(0,0,0,.12);transition:transform .35s ease}
.xrow:hover{transform:translateX(14px)}
.xrow-s{padding:24px 0}
.xn{flex:none;width:150px;font:400 15px/1.5 Poppins,sans-serif;color:rgb(64,18,255)}
.xmain h4{font:300 34px/1.15 Poppins,sans-serif;letter-spacing:-.045em;color:rgb(36,36,36);margin:0 0 6px}
.xrow-s .xmain h4{font-size:24px}
.xorg{font:300 14px/1.3 Poppins,sans-serif!important;letter-spacing:.12em;text-transform:uppercase;color:rgb(64,18,255)!important;margin:0 0 14px!important}
.xmain ul{list-style:none;padding:0;margin:0}
.xmain li{font:300 18px/1.45 'Noto Sans',sans-serif;letter-spacing:-.02em;color:rgba(0,0,0,.5);margin-bottom:6px}
.chips-f{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:10px;padding:12px 20px 12px 16px;border-radius:100px;background:rgb(247,246,255);font:400 15px/1.2 Poppins,sans-serif;color:rgb(26,15,46)}
.chip svg{width:18px;height:18px}
.chip-o{background:transparent;border:1px solid rgba(26,15,46,.15);padding:12px 18px}
.langs-f{font:300 20px/1.4 'Noto Sans',sans-serif;color:rgba(0,0,0,.7);margin:0}
@media (max-width:1199.98px){
  .h-f{font-size:46px}.about-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px}
  .about-cols-f{grid-template-columns:1fr}.about-copy p{font-size:19px}
}
@media (max-width:819.98px){
  .about-f{padding:0 16px}.eyebrow-f{gap:24px;margin-bottom:40px}.eyebrow-f p,.label-f{font-size:12px}
  .h-f{font-size:34px;margin-bottom:32px}.about-grid{grid-template-columns:1fr;gap:28px;margin-bottom:64px}
  .portrait-f{max-width:340px}.about-copy p{font-size:17px}.stats-f b{font-size:38px}.stats-f div{min-width:0;flex:1;padding:16px}
  .xrow{flex-direction:column;gap:6px;padding:22px 0}.xn{width:auto}.xmain h4{font-size:24px}.xmain li{font-size:15px}.sp-f{height:96px!important}
}
.eyebrow-in{width:100%;margin-bottom:72px}
@media (max-width:819.98px){.eyebrow-in{margin-bottom:40px}}

.intro-home{padding-top:clamp(80px,9vw,140px)!important}
.page-f main>.sec-about:first-child{padding-top:80px}
.intro-home .about-cta{gap:10px}
.page-f main>.about-home:first-child{padding-top:80px}

/* footer */
.ft{width:100%;align-self:stretch;box-sizing:border-box;background:#fff;padding:clamp(56px,7vw,96px) var(--side) clamp(48px,6vw,80px);margin-top:clamp(80px,10vw,160px);font-family:Poppins,sans-serif;color:rgb(26,15,46)}
.ft-top{display:flex;justify-content:space-between;align-items:center}
.ft-year{display:flex;align-items:center;gap:8px;font:400 14px/1 Poppins,sans-serif}
.ft-year svg{width:16px;height:16px}
.ft-up{display:flex;align-items:center;gap:16px;font:500 13px/1 Poppins,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:rgb(26,15,46)}
.ft-up i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgb(26,15,46);transition:background .25s,transform .25s}
.ft-up i svg{width:18px;height:18px;transform:rotate(-45deg)}
.ft-up:hover i{background:rgb(64,18,255);transform:translateY(-3px)}
.ft-mid{margin:clamp(64px,8vw,110px) 0 clamp(40px,5vw,64px)}
.ft-k{font:400 14px/1.2 Poppins,sans-serif;letter-spacing:.02em;text-transform:uppercase;margin:0 0 6px 4px}
.ft-big{display:block;font:400 clamp(56px,11.5vw,190px)/.9 Poppins,sans-serif;letter-spacing:-.05em;color:rgb(232,232,232);text-transform:uppercase;white-space:nowrap;transition:color .35s ease}
.ft-big{transition:opacity .3s ease}
.ft-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.ft-pills{display:flex;flex-wrap:wrap;gap:12px}
.ft-pill{display:inline-flex;align-items:center;justify-content:center;min-width:116px;padding:14px 22px;border:1px solid rgba(26,15,46,.55);border-radius:100px;font:500 13px/1 Poppins,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:rgb(26,15,46);box-sizing:border-box;transition:background .25s,color .25s,border-color .25s}
.ft-pill:hover{background:rgb(26,15,46);border-color:rgb(26,15,46);color:#fff}
.ft-by{font:300 13px/1.6 Poppins,sans-serif;color:rgba(26,15,46,.55);text-align:right;margin:0}
.ft-by b{font-weight:400;color:rgb(26,15,46)}
@media (max-width:819.98px){
  .ft-big{white-space:normal;font-size:clamp(48px,16vw,96px)}
  .ft-pill{min-width:0;padding:12px 18px;font-size:12px}
  .ft-by{text-align:left}
  .ft-up span{display:none}
}
.ft a.ft-big{color:rgb(232,232,232)}
.ft a.ft-big:hover{opacity:.6}
.ft a.ft-big{display:inline-block;max-width:100%}
/* hover and click only over the letters: the link itself ignores the pointer, its words catch it */
.ft a.ft-big{pointer-events:none}
.ft a.ft-big span{pointer-events:auto;display:inline-block;line-height:.74}
.ft a.ft-big:hover{opacity:1}
.ft a.ft-big:has(span:hover){opacity:.6}
.ft a.ft-big span{line-height:.8;overflow:hidden;vertical-align:top;padding-top:.02em}

/* contact page (Framer "Let's Talk": title, intro, inquiry form) */
.ct{width:100%;box-sizing:border-box;padding:80px var(--side) 0;font-family:Poppins,sans-serif;color:rgb(36,36,36)}
.ct-head h1{font:400 clamp(60px,7vw,100px)/1.2 Poppins,sans-serif;letter-spacing:-.06em;color:rgb(36,36,36);margin:0}
.ct-info{font:300 clamp(22px,2.4vw,40px)/1.2 'Noto Sans',sans-serif;color:rgba(0,0,0,.5);width:52%;margin:40px 0 0}
.ct-label{display:flex;flex-direction:column;gap:40px;margin-top:50px}
.ct-line{display:block;height:1px;background:rgba(0,0,0,.1)}
.ct-label p{font:300 16px/1.2 Poppins,sans-serif;letter-spacing:.12em;color:rgba(0,0,0,.4);margin:0}
.ct-label p span{color:rgba(0,0,0,.8)}
.ct-body{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(40px,6vw,110px);align-items:start;margin-top:clamp(80px,9vw,140px)}
.ct-form{display:flex;flex-direction:column;gap:30px}
.ct-two{display:flex;gap:10px}
.ct-two>label{flex:1 1 0;min-width:0}
.ct-form label{display:flex;flex-direction:column;gap:10px}
.ct-form label>span{font:300 20px/1.2 Poppins,sans-serif;color:rgba(0,0,0,.8)}
.ct-form input,.ct-form select,.ct-form textarea{width:100%;box-sizing:border-box;height:70px;padding:0 20px;border:1px solid rgba(0,0,0,.2);border-radius:3px;background:transparent;font:300 18px/1.3 Poppins,sans-serif;color:rgb(26,15,46);outline:none;transition:border-color .2s}
.ct-form textarea{height:auto;min-height:180px;padding:18px 20px;resize:vertical}
.ct-form select{appearance:none;-webkit-appearance:none;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 20px center/18px no-repeat}
.ct-form ::placeholder{color:rgb(153,153,153)}
.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{border-color:rgb(0,0,0)}
.ct-form .bad{border-color:#e5484d}
.ct-send{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:10px}
.ct-send .fbtn{border:0;cursor:pointer;font-size:22px;padding:24px 40px}
.ct-note{font:300 14px/1.4 Poppins,sans-serif;color:rgba(0,0,0,.45);margin:0}
.ct-note.err{color:#e5484d}
.ct-side{position:sticky;top:110px;display:flex;flex-direction:column}
.ct-side .avail-f{margin:0 0 20px!important}
.ct-rows{border-top:1px solid rgba(0,0,0,.1)}
.ct-row{display:grid;grid-template-columns:96px minmax(0,1fr) 16px;align-items:center;gap:12px;padding:20px 0;border-bottom:1px solid rgba(0,0,0,.1);color:rgb(26,15,46);transition:padding .25s ease}
.ct-row svg{width:16px;height:16px;opacity:.4;transition:opacity .25s,transform .25s}
a.ct-row:hover{padding-left:6px}
a.ct-row:hover svg{opacity:1;transform:translate(2px,-2px);color:rgb(64,18,255)}
.ct-k{font:300 13px/1.2 Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(0,0,0,.45)}
.ct-v{font:400 16px/1.3 Poppins,sans-serif;overflow-wrap:anywhere}
.ct-copy{align-self:flex-start;margin-top:16px;padding:0;border:0;background:none;cursor:pointer;font:400 14px/1.2 Poppins,sans-serif;color:rgb(64,18,255);text-decoration:underline;text-underline-offset:4px}
.ct-cv{margin-top:32px}
.ct-small{font:300 14px/1.6 Poppins,sans-serif;color:rgba(0,0,0,.5);margin:28px 0 0}
@media (max-width:1199.98px){.ct-body{grid-template-columns:1fr}.ct-side{position:static;order:-1}.ct-info{width:80%}}
@media (max-width:819.98px){
  .ct{padding-top:40px}.ct-info{width:100%;margin-top:24px}.ct-label{margin-top:40px;gap:24px}.ct-label p{font-size:12px}
  .ct-body{margin-top:48px;gap:64px}.ct-two{flex-direction:column;gap:30px}
  .ct-form label>span{font-size:17px}.ct-form input,.ct-form select{height:60px}
  .ct-send .fbtn{font-size:18px;padding:18px 28px}
}

/* tech skills (About): monogram cards, filter chips, cursor glow */
.tech-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:end}
.tech-side{display:flex;flex-direction:column;gap:32px}
.tech-f{display:flex;flex-wrap:wrap;gap:8px}
.tech-f button{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid rgba(26,15,46,.18);border-radius:100px;background:transparent;cursor:pointer;font:400 14px/1 Poppins,sans-serif;color:rgb(26,15,46);transition:background .25s,color .25s,border-color .25s}
.tech-f button i{font-style:normal;font-size:11px;color:rgba(26,15,46,.45);transition:color .25s}
.tech-f button:hover{border-color:rgb(64,18,255);color:rgb(64,18,255)}
.tech-f button.on{background:rgb(64,18,255);border-color:rgb(64,18,255);color:#fff}
.tech-f button.on i{color:rgba(255,255,255,.7)}
.tech-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:64px}
.tk{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:250px;padding:24px;border-radius:14px;background:#fff;border:1px solid rgba(26,15,46,.06);box-sizing:border-box;isolation:isolate;
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1),filter .45s ease,border-color .3s,box-shadow .45s}
.tk::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(64,18,255,.13),transparent 65%)}
.tk:hover{border-color:rgba(64,18,255,.35);box-shadow:0 18px 40px -22px rgba(64,18,255,.45)}
.js .tk.ap.in:hover{transform:translateY(-6px)}
.tk:hover::before{opacity:1}
.tk-top{display:flex;justify-content:space-between;align-items:flex-start}
.tk-ic{position:relative;display:block;width:58px;height:58px;perspective:400px}
.tk-ic b{position:absolute;inset:0;display:grid;place-items:center;border-radius:12px;font:500 22px/1 Poppins,sans-serif;letter-spacing:-.03em;backface-visibility:hidden;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.tk-ic b:first-child{border:1.5px solid rgb(64,18,255);color:rgb(64,18,255)}
.tk-ic b:last-child{background:rgb(64,18,255);color:#fff;transform:rotateY(180deg)}
.tk:hover .tk-ic b:first-child{transform:rotateY(-180deg)}
.tk:hover .tk-ic b:last-child{transform:rotateY(0)}
.tk-n{font:300 13px/1 Poppins,sans-serif;letter-spacing:.1em;color:rgba(26,15,46,.35)}
.tk h3{font:400 22px/1.15 Poppins,sans-serif;letter-spacing:-.03em;color:rgb(26,15,46);margin:auto 0 6px;padding-top:40px}
.tk-g{font:400 11px/1.2 Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgb(64,18,255);margin:0 0 10px}
.tk-u{font:300 14px/1.45 'Noto Sans',sans-serif;color:rgba(0,0,0,.55);margin:0}
.tk-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgb(64,18,255);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.tk:hover .tk-bar{transform:scaleX(1)}
.tech-grid.filtered .tk.off{opacity:.28;filter:grayscale(1);transform:scale(.96)}
.tech-grid.filtered .tk.off:hover{transform:scale(.96)}
@media (max-width:1199.98px){.tech-top{grid-template-columns:1fr;gap:28px}.tech-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:819.98px){.tech-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:40px}.tk{min-height:210px;padding:18px;border-radius:12px}.tk-ic{width:46px;height:46px}.tk-ic b{font-size:18px;border-radius:10px}.tk h3{font-size:18px;padding-top:28px}.tk-u{font-size:13px}.tech-f button{padding:9px 14px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.tk,.tk-ic b,.tk-bar{transition:none}}
.tk-u{min-height:2.9em}
@media (max-width:819.98px){.tk-u{min-height:4.35em}}
/* skills bars: the row reacts on hover */
.cap-top span{transition:color .3s ease}
.cap-bar i{transition:width 1.4s cubic-bezier(.22,1,.36,1),filter .3s ease}
.cap:hover .cap-top span{color:rgb(64,18,255)}
.cap:hover .cap-bar i{filter:brightness(1.25) saturate(1.2)}
/* About banner: the photo fills the whole box, centered; no dark background, no faded edges */
.hb{background:transparent}
.hb-ph{background:none}
.hb-ph img{left:0;top:0;bottom:auto;width:100%;height:100%;transform:none;object-fit:cover;object-position:50% 30%;-webkit-mask-image:none;mask-image:none}
@media (max-width:819.98px){.hb-ph img{height:100%}}
/* the banner takes the photo's own proportions: the whole picture shows, nothing cropped, at every size */
.hb-ph{height:auto}
.hb-ph img{position:static;display:block;width:100%;height:auto}
@media (max-width:819.98px){.hb-ph img{height:auto}}
/* header CV: a solid brand button like the others */
.hdr-cv{gap:8px;padding:10px 20px;border:1px solid rgb(64,18,255);border-radius:100px;background:rgb(64,18,255);color:#fff;font-weight:500;font-size:14px;line-height:1.2;transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.hdr-cv:hover{background:rgb(26,15,46);border-color:rgb(26,15,46);color:#fff}
.hdr-cv svg{transition:transform .3s ease}
.hdr-cv:hover svg{transform:translate(2px,-2px)}
/* header CV: page-colored button with border, blue on hover */
.hdr-cv{background:rgb(245,245,245);border-color:rgba(26,15,46,.2);color:rgb(26,15,46)}
.hdr-cv:hover{background:rgb(64,18,255);border-color:rgb(64,18,255);color:#fff}