/* Premium portfolio — GSAP + Lenis */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{font-family:'Geist',ui-sans-serif,system-ui,-apple-system,sans-serif;background:#0a0a0a;color:#ededed;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
/* Perf: browser skips paint/layout work on off-screen sections — purely a render optimisation, identical visuals */
.work{content-visibility:auto;contain-intrinsic-size:1px 800px}
.services,.blog-preview-section,.contact{content-visibility:auto;contain-intrinsic-size:1px 600px}
.serif{font-family:'Instrument Serif','Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.01em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:#ededed;color:#0a0a0a}

/* Grain canvas + bg blobs */
.bg-grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;mix-blend-mode:overlay}
.bg-orb{position:fixed;width:55vw;height:55vw;border-radius:50%;filter:blur(70px);opacity:.07;pointer-events:none;z-index:0;will-change:transform;transform:translateZ(0);contain:strict}
.bg-orb.a{background:radial-gradient(circle,#6366f1,transparent 70%);top:-15vw;left:-15vw}
.bg-orb.b{background:radial-gradient(circle,#a855f7,transparent 70%);bottom:-20vw;right:-15vw}
/* Intro loader (0→100 count). Solid bg, no backdrop-filter; removed from DOM when done. */
.loader{position:fixed;inset:0;z-index:9999;background:#0a0a0a;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;padding:6vw 6vw 5vw;will-change:opacity;contain:strict}
.loader-count{display:flex;align-items:baseline;gap:.12em;font:400 clamp(4.5rem,20vw,17rem)/.85 'Instrument Serif',serif;font-style:italic;color:#ededed;letter-spacing:-.04em}
.loader-pct{font:500 .26em/1 'Geist',sans-serif;font-style:normal;opacity:.45;letter-spacing:.05em}
.loader-bar{width:100%;height:1px;margin-top:1.5rem;background:rgba(237,237,237,.12);overflow:hidden}
.loader-bar span{display:block;height:100%;width:0;background:#ededed;transform-origin:left;will-change:width}
.loader.done{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.loader{display:none}}
main{position:relative;z-index:2}
.nav{z-index:500}
.pre-loader{z-index:10000}
.cursor-dot{z-index:9999}

/* Cursor */
.cursor-dot{position:fixed;top:0;left:0;width:8px;height:8px;background:#ededed;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);transition:width .35s cubic-bezier(.7,0,.3,1),height .35s cubic-bezier(.7,0,.3,1),background .25s,opacity .25s}
.cursor-ring{position:fixed;top:0;left:0;width:36px;height:36px;border:1px solid rgba(237,237,237,.4);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .4s cubic-bezier(.7,0,.3,1),height .4s cubic-bezier(.7,0,.3,1),border-color .25s,background .25s}
.cursor-dot.hover{width:0;height:0;opacity:0}
.cursor-ring.hover{width:64px;height:64px;background:rgba(237,237,237,.08);border-color:#ededed}
.cursor-ring.text-hover{width:8px;height:8px;background:#ededed}
@media(max-width:900px){.cursor-dot,.cursor-ring{display:none}}

/* Loader */
.pre-loader{position:fixed;inset:0;background:#0a0a0a;display:flex;align-items:flex-end;justify-content:space-between;padding:2.5rem;transition:transform 1.1s cubic-bezier(.85,0,.15,1);overflow:hidden}
.pre-loader.done{transform:translateY(-100%)}
.pre-loader .pl-mark{font:400 5rem/1 'Instrument Serif',serif;font-style:italic;overflow:hidden;position:relative;z-index:2}
.pre-loader .pl-mark span{display:inline-block}
.pre-loader .pl-count{position:absolute;bottom:2.5rem;right:2.5rem;font:400 clamp(3.5rem,9vw,7rem)/1 'Instrument Serif',serif;font-style:italic;letter-spacing:-.04em;color:#ededed;font-variant-numeric:tabular-nums;pointer-events:none;animation:countPop .12s cubic-bezier(.7,0,.3,1)}
@keyframes countPop{0%{transform:translate(-50%,-50%) scale(.96);opacity:.7}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.pre-loader .pl-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(237,237,237,.08);overflow:hidden}
.pre-loader .pl-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#6366f1,#ededed);transition:width .15s linear}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2.5rem;transition:background .35s,backdrop-filter .35s,border-color .35s,padding .35s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(10,10,10,.7);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);border-bottom-color:rgba(237,237,237,.06);padding:1rem 2.5rem}
.nav-mark{font:400 1.6rem/1 'Instrument Serif',serif;font-style:italic;letter-spacing:-.01em;display:inline-block;transition:transform .4s cubic-bezier(.7,0,.3,1)}
.nav-mark:hover{transform:rotate(-6deg) scale(1.05)}
.nav-mark sup{font-size:.55em;margin-left:.15em;vertical-align:super;font-style:normal;font-family:'Geist',sans-serif;letter-spacing:0}
.nav-links{display:flex;gap:2.25rem;list-style:none;font:500 .82rem/1 'Geist',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.nav-links a{position:relative;display:inline-block;padding:.5rem 0;overflow:hidden}
.nav-links a span{display:inline-block;transition:transform .55s cubic-bezier(.7,0,.3,1)}
.nav-links a span.dup{position:absolute;left:0;top:100%}
.nav-links a:hover span{transform:translateY(-100%)}
.nav-cta{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.2rem;border:1px solid rgba(237,237,237,.25);border-radius:999px;font:500 .8rem/1 'Geist',sans-serif;letter-spacing:.05em;text-transform:uppercase;transition:background .4s,border-color .4s,color .4s,transform .4s;will-change:transform}
.nav-cta:hover{background:#ededed;color:#0a0a0a;border-color:#ededed}
.nav-cta .dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 12px #22c55e;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 8px #22c55e}50%{box-shadow:0 0 18px #22c55e,0 0 4px #22c55e}}
@media(max-width:900px){.nav{padding:1.1rem 1.5rem}.nav-links{display:none}}

/* Hero */
.hero{min-height:100vh;padding:9rem 2.5rem 3rem;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.hero-meta{display:flex;justify-content:space-between;font:500 .8rem/1.4 'Geist',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:rgba(237,237,237,.55)}
.hero-meta .col{max-width:14rem}
.hero-meta strong{display:block;color:#ededed;margin-bottom:.4rem;font-weight:500}
.hero-title{font-family:'Geist',sans-serif;font-weight:500;font-size:clamp(3rem,9.5vw,11.5rem);line-height:.95;letter-spacing:-.04em;margin:5rem 0 4rem;text-wrap:balance}
.hero-title .line{display:block;overflow:hidden;perspective:800px}
.hero-title .line span{display:inline-block;will-change:transform;transform-origin:bottom}
.hero-title .it{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;letter-spacing:-.02em;padding-right:.15em}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.5rem}
.hero-tag{font:400 1.1rem/1.4 'Instrument Serif',serif;font-style:italic;color:rgba(237,237,237,.7);max-width:24rem}
.hero-scroll{font:500 .75rem/1 'Geist',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(237,237,237,.55);display:flex;align-items:center;gap:.6rem}
.hero-scroll .ar{display:inline-block;animation:bobY 1.8s ease-in-out infinite}
@keyframes bobY{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* Marquee */
.marquee{padding:2rem 0;border-top:1px solid rgba(237,237,237,.08);border-bottom:1px solid rgba(237,237,237,.08);overflow:hidden;white-space:nowrap;display:flex;background:rgba(10,10,10,.6);backdrop-filter:blur(8px);transition:transform .8s cubic-bezier(.7,0,.3,1)}
.marquee-track{display:inline-flex;gap:3rem;padding-right:3rem;animation:marqueeScroll 45s linear infinite;will-change:transform;font:500 .85rem/1 'Geist',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(237,237,237,.5)}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:inline-flex;align-items:center;gap:3rem}
.marquee-track .star{color:rgba(237,237,237,.3);display:inline-block;animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Sections */
section{position:relative}
.sec-pad{padding:9rem 2.5rem}
@media(max-width:900px){.sec-pad{padding:6rem 1.5rem}.hero{padding:7rem 1.5rem 2rem}}
.eyebrow{font:500 .78rem/1 'Geist',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(237,237,237,.5);display:flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:#ededed;animation:pulseDot 2.4s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}

/* About */
.about{display:grid;grid-template-columns:1fr 1.4fr;gap:5rem;align-items:start}
@media(max-width:900px){.about{grid-template-columns:1fr;gap:2.5rem}}
.about-head .eyebrow{margin-bottom:2rem}
.about-head h2{font:400 clamp(2.2rem,4.5vw,3.6rem)/1.05 'Instrument Serif',serif;font-style:italic;letter-spacing:-.02em}
.about-body p{font:400 1.25rem/1.55 'Geist',sans-serif;color:rgba(237,237,237,.8);margin-bottom:1.4rem;text-wrap:pretty}
.about-body p strong{color:#ededed;font-weight:500}
.about-stats{margin-top:3rem;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;border-top:1px solid rgba(237,237,237,.1);padding-top:2.5rem}
@media(max-width:900px){.about-stats{grid-template-columns:repeat(2,1fr);gap:1.5rem}}
.about-stat{position:relative}
.about-stat .num{font:400 3rem/1 'Instrument Serif',serif;font-style:italic;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.about-stat .lbl{font:500 .72rem/1.4 'Geist',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(237,237,237,.55);margin-top:.5rem}

/* Works */
.works-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem;margin-bottom:5rem;padding-bottom:2rem;border-bottom:1px solid rgba(237,237,237,.1)}
.works-head h2{font:400 clamp(2.5rem,5.5vw,4.5rem)/1 'Instrument Serif',serif;font-style:italic;letter-spacing:-.02em}
.works-head .count{font:500 .8rem/1 'Geist',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(237,237,237,.55)}
.works-list{display:flex;flex-direction:column;gap:5rem}
.work{display:grid;grid-template-columns:80px 1fr;gap:2rem;cursor:pointer}
@media(max-width:900px){.work{grid-template-columns:1fr;gap:1rem}}
.work-num{font:400 1.6rem/1 'Instrument Serif',serif;font-style:italic;color:rgba(237,237,237,.55);padding-top:1rem;transition:color .4s,transform .4s}
.work:hover .work-num{color:#ededed;transform:translateX(4px)}
.work-body{display:flex;flex-direction:column;gap:1.5rem}
.work-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:#111;transform-style:preserve-3d;will-change:transform;transition:box-shadow .6s}
.work:hover .work-frame{box-shadow:0 30px 80px -20px rgba(0,0,0,.6),0 0 0 1px rgba(237,237,237,.08)}
.work-frame img,.work-frame .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background:#ededed;transition:transform 1.4s cubic-bezier(.2,.8,.2,1),filter .6s;will-change:transform}
.work:hover .work-frame img{transform:scale(1.04)}
.work:hover .work-frame .ph{transform:scale(1.04);filter:brightness(1.05)}
.work-frame .ph{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;padding:2rem;text-align:center;background:linear-gradient(135deg,#141420 0%,#0a0a0a 100%);overflow:hidden}
.work-frame .ph::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,rgba(99,102,241,.15),transparent 60%);pointer-events:none}
.work-frame .ph .glyph{font:400 8rem/1 'Instrument Serif',serif;font-style:italic;letter-spacing:-.04em;color:rgba(237,237,237,.92);position:relative;z-index:1;text-shadow:0 8px 60px rgba(99,102,241,.3)}
.work-frame .ph .lab{font:500 .8rem/1 'Geist',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(237,237,237,.55);position:relative;z-index:1}
.work-foot{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end}
@media(max-width:900px){.work-foot{grid-template-columns:1fr}}
.work h3{font:400 clamp(1.7rem,3vw,2.6rem)/1.05 'Instrument Serif',serif;font-style:italic;letter-spacing:-.02em;margin-bottom:.6rem;transition:transform .5s cubic-bezier(.7,0,.3,1)}
.work:hover h3{transform:translateX(8px)}
.work-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}
.work-tag{font:500 .68rem/1 'Geist',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(237,237,237,.6);padding:.5rem .8rem;border:1px solid rgba(237,237,237,.18);border-radius:999px;transition:border-color .35s,color .35s,background .35s}
.work:hover .work-tag{border-color:rgba(237,237,237,.4);color:rgba(237,237,237,.85)}
.work-desc{font:400 1rem/1.55 'Geist',sans-serif;color:rgba(237,237,237,.65);max-width:38rem}
.work-bullets{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.3rem}
.work-bullets li{display:flex;gap:.55rem;align-items:baseline;font-size:.9rem;line-height:1.5}
.work-bullets li::before{content:"—";color:rgba(237,237,237,.3);flex-shrink:0;font-size:.75rem}
.work-arrow{font:400 2.4rem/1 'Instrument Serif',serif;font-style:italic;color:rgba(237,237,237,.6);transition:transform .55s cubic-bezier(.7,0,.3,1),color .3s;display:inline-flex;flex-direction:column;align-items:flex-end;gap:.3rem}
.work:hover .work-arrow{transform:translate(10px,-10px) rotate(8deg);color:#ededed}
.work-link-url{font:500 .85rem/1 'Geist',sans-serif;font-style:normal;letter-spacing:.08em;color:rgba(237,237,237,.45);border-bottom:1px solid rgba(237,237,237,.2);padding-bottom:.2rem;white-space:nowrap;transition:color .3s,border-color .3s}
.work:hover .work-link-url{color:#ededed;border-color:#ededed}

/* Amazon multi-screen */
.work.featured .work-frame{aspect-ratio:16/10;background:#f8f8f8;border:1px solid rgba(237,237,237,.06)}
/* Browser chrome bar */
.work.featured .work-frame::before{content:"";position:absolute;top:0;left:0;right:0;height:28px;background:#191919;z-index:3;border-bottom:1px solid rgba(237,237,237,.07)}
.work.featured .work-frame::after{content:"";position:absolute;top:9px;left:10px;width:10px;height:10px;border-radius:50%;background:#ff5f57;z-index:4;box-shadow:16px 0 0 #febc2e,32px 0 0 #28c840}
.work.featured .work-frame img{top:28px;height:calc(100% - 28px);object-fit:contain;object-position:top center;background:#f8f8f8}
.amz-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.75rem}
.amz-tab{font:500 .65rem/1 'Geist',sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:.45rem .75rem;background:rgba(14,14,14,.88);border:1px solid rgba(237,237,237,.18);border-radius:6px;color:rgba(237,237,237,.85);cursor:pointer;transition:background .3s,border-color .3s,transform .3s}
.amz-tab:hover{transform:translateY(-2px);background:rgba(10,10,10,.85);border-color:rgba(237,237,237,.4)}
.amz-tab.active{background:#ededed;color:#0a0a0a;border-color:#ededed}

/* Services */
.services{border-top:1px solid rgba(237,237,237,.08)}
.services-head{margin-bottom:5rem}
.services-head h2{font:400 clamp(2.5rem,5.5vw,4.5rem)/1 'Instrument Serif',serif;font-style:italic;letter-spacing:-.02em;margin-top:1.5rem}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(237,237,237,.1)}
@media(max-width:900px){.services-grid{grid-template-columns:1fr}}
.service{padding:3rem 2rem;border-right:1px solid rgba(237,237,237,.1);border-bottom:1px solid rgba(237,237,237,.1);position:relative;overflow:hidden;transition:background .5s}
.service:nth-child(3n){border-right:none}
@media(max-width:900px){.service{border-right:none}}
.service::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(237,237,237,.06),transparent 50%);opacity:0;transition:opacity .4s;pointer-events:none}
.service:hover::before{opacity:1}
.service-num{font:500 .75rem/1 'Geist',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(237,237,237,.4);margin-bottom:1.5rem;position:relative;z-index:1}
.service h3{font:400 1.9rem/1.1 'Instrument Serif',serif;font-style:italic;letter-spacing:-.01em;margin-bottom:1.2rem;position:relative;display:inline-block;z-index:1}
.service h3::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:#ededed;transition:width .65s cubic-bezier(.7,0,.3,1)}
.service:hover h3::after{width:100%}
.service ul{list-style:none;margin-top:1rem;position:relative;z-index:1}
.service li{font:400 .92rem/1.7 'Geist',sans-serif;color:rgba(237,237,237,.6);padding:.3rem 0;border-bottom:1px solid rgba(237,237,237,.05);transition:color .3s,padding-left .3s}
.service:hover li{color:rgba(237,237,237,.85)}
.service li:hover{padding-left:.5rem;color:#ededed}
.service li::before{content:"— ";color:rgba(237,237,237,.4)}

/* Contact / footer */
.contact{padding:6rem 2.5rem 2rem;border-top:1px solid rgba(237,237,237,.08)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;padding-bottom:5rem;border-bottom:1px solid rgba(237,237,237,.08)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-eyebrow{margin-bottom:2rem}
.contact-mail{display:inline-block;font:400 clamp(2.5rem,7vw,6rem)/1 'Instrument Serif',serif;font-style:italic;letter-spacing:-.03em;position:relative;padding-bottom:.5rem;text-wrap:balance;will-change:transform}
.contact-mail::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(237,237,237,.3);transform-origin:left;transition:transform .65s cubic-bezier(.7,0,.3,1)}
.contact-mail:hover::after{transform:scaleX(1.02)}
.contact-side{font:400 1.05rem/1.55 'Geist',sans-serif;color:rgba(237,237,237,.65);max-width:24rem}
.contact-side p+p{margin-top:1rem}
.contact-side a{border-bottom:1px solid rgba(237,237,237,.3);padding-bottom:1px;transition:color .25s,border-color .25s}
.contact-side a:hover{color:#ededed;border-color:#ededed}

.footer{padding:3rem 0;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:2rem}
.footer-mark{font:400 8rem/.85 'Instrument Serif',serif;font-style:italic;letter-spacing:-.04em;will-change:transform}
@media(max-width:900px){.footer-mark{font-size:4.5rem}}
.footer-meta{font:500 .78rem/1.6 'Geist',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(237,237,237,.5);text-align:right}
.footer-meta a{display:inline-block;padding:.3rem 0;border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.footer-meta a:hover{color:#ededed;border-color:#ededed}
.footer-socials{display:flex;gap:1.5rem;margin-bottom:.5rem;justify-content:flex-end}

/* Magnetic class for buttons */
.magnetic{display:inline-block;will-change:transform}

/* Reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1.2s cubic-bezier(.7,0,.3,1),transform 1.2s cubic-bezier(.7,0,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal-img{clip-path:inset(100% 0 0 0);transition:clip-path 1.5s cubic-bezier(.7,0,.3,1)}
.reveal-img.in{clip-path:inset(0 0 0 0)}

/* Char reveal for headlines */
.char{display:inline-block;will-change:transform,opacity}
.char-wrap{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:.95}

/* ===== 375.studio-style additions ===== */

/* Third bg orb — subtle */
.bg-orb.c{background:radial-gradient(circle,#6366f1,transparent 70%);top:35vh;right:-10vw;width:40vw;height:40vw;opacity:.04}

/* Nav image peek (375.studio cut effect) */
.nav-peek{position:absolute;right:0;top:0;height:100%;width:220px;clip-path:inset(0 100% 0 0);transition:clip-path .55s cubic-bezier(.7,0,.3,1);pointer-events:none;z-index:-1;overflow:hidden}
.nav-peek.show{clip-path:inset(0 0% 0 0)}
.nav-peek img{width:100%;height:100%;object-fit:cover;object-position:top center;opacity:.55;filter:brightness(.45) saturate(1.6);display:block}

/* Active nav link */
.nav-links a.active span:first-child{opacity:1}
.nav-links a{transition:opacity .3s}
.nav-links a.active{opacity:1}

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:1.5px;background:linear-gradient(90deg,#6366f1,#a855f7);transform-origin:left;transform:scaleX(0);z-index:9999;pointer-events:none}

/* Page wipe transition */
.page-wipe{position:fixed;inset:0;background:#ededed;z-index:9997;pointer-events:none;clip-path:inset(0 100% 0 0)}

/* Floating cursor project label */
.cursor-label{position:fixed;top:0;left:0;pointer-events:none;z-index:9996;font:500 .7rem/1 'Geist',sans-serif;letter-spacing:.12em;text-transform:uppercase;background:#ededed;color:#0a0a0a;padding:.45rem .85rem;border-radius:999px;opacity:0;transition:opacity .2s;will-change:transform;white-space:nowrap}
.cursor-label.visible{opacity:1}

/* Contact mail masked line reveal */
.line-mask{display:block;overflow:hidden;line-height:1.05}
.line-inner{display:block;will-change:transform}

/* H2 word-split */
.w-word{display:inline-block;overflow:hidden;vertical-align:bottom}
.w-inner{display:inline-block;will-change:transform}

/* Works decorative ghost text */
.works-deco{position:absolute;top:2rem;left:-2vw;font:400 26vw/.9 'Instrument Serif',serif;font-style:italic;color:rgba(237,237,237,.022);white-space:nowrap;pointer-events:none;user-select:none;z-index:0;will-change:transform}

/* ===== Hero 2-col redesign ===== */
.hero{height:100vh;min-height:580px;padding:0;display:block;overflow:hidden;position:relative}
.hero-inner{display:grid;grid-template-columns:1fr .95fr;height:100%}
.hero-text-col{display:flex;flex-direction:column;justify-content:space-between;padding:7rem 2rem 2rem 4rem;position:relative;z-index:2}
.hero-text-col .hero-title{font-size:clamp(2.4rem,5.2vw,7rem);margin:2rem 0 2rem}
.hero-text-col .hero-tag{font-size:.95rem;max-width:22rem}
.hero-text-col .hero-meta .col{max-width:12rem}

/* Image column */
.hero-img-col{position:relative;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;padding-top:5rem}
.hero-portrait{height:85%;width:auto;max-width:95%;object-fit:cover;object-position:center top;filter:grayscale(75%) contrast(1.05);display:block;border-radius:14px 14px 0 0;flex-shrink:0}
.hero-img-grad{display:none}

/* Rotating badge */
.hero-badge{position:absolute;right:3rem;top:50%;transform:translateY(-55%);width:130px;height:130px;z-index:2}
.badge-ring{width:100%;height:100%;animation:badgeSpin 16s linear infinite}
.badge-text{font:500 .52rem/1 'Geist',sans-serif;letter-spacing:.2em;text-transform:uppercase;fill:rgba(237,237,237,.75)}
.badge-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 2rem/1 'Instrument Serif',serif;font-style:italic;color:rgba(237,237,237,.6)}
@keyframes badgeSpin{to{transform:rotate(360deg)}}

/* Social sidebar */
.hero-socials{position:absolute;left:1.6rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:1.2rem;z-index:5}
.hero-socials::before,.hero-socials::after{content:"";display:block;width:1px;height:2.5rem;background:rgba(237,237,237,.18)}
.h-social{color:rgba(237,237,237,.4);display:flex;transition:color .3s,transform .3s}
.h-social:hover{color:#ededed;transform:translateY(-2px)}

/* Hero cards row */
.hero-cards{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid rgba(237,237,237,.08);border-bottom:1px solid rgba(237,237,237,.08)}
.hcard{padding:1.4rem 2rem;border-right:1px solid rgba(237,237,237,.08);background:rgba(10,10,10,.75);backdrop-filter:blur(14px)}
.hcard:last-child{border-right:none}
.tech-strip{width:100%;background:rgba(10,10,10,.75);backdrop-filter:blur(14px);border-top:1px solid rgba(237,237,237,.08);border-bottom:1px solid rgba(237,237,237,.08);overflow:hidden}
.hcard-label{font:600 .62rem/1 'Geist',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:rgba(237,237,237,.38);margin-bottom:.9rem}

/* Skill bars */
.skill-bars{display:flex;flex-direction:column;gap:.48rem}
.sbar{display:flex;align-items:center;gap:.55rem}
.sbar-name{font:500 .68rem/1 'Geist',sans-serif;color:rgba(237,237,237,.6);width:5.2rem;flex-shrink:0;letter-spacing:.01em}
.sbar-track{flex:1;height:2px;background:rgba(237,237,237,.1);border-radius:999px;overflow:hidden}
.sbar-fill{height:100%;width:0;background:linear-gradient(90deg,#6366f1,#ededed);border-radius:999px;transition:width 1.4s cubic-bezier(.7,0,.3,1)}
.sbar-pct{font:500 .62rem/1 'Geist',sans-serif;color:rgba(237,237,237,.38);width:2.2rem;text-align:right;flex-shrink:0}

/* Experience stats */
.exp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;height:100%;align-content:center}
.exp-stat{padding-right:.75rem;border-right:1px solid rgba(237,237,237,.07)}
.exp-stat:last-child{border-right:none;padding-right:0}
.exp-num{font:400 2rem/1 'Instrument Serif',serif;font-style:italic;color:#ededed;letter-spacing:-.03em}
.exp-name{font:600 .6rem/1 'Geist',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(237,237,237,.7);margin:.35rem 0 .25rem}
.exp-sub{font:400 .6rem/1.4 'Geist',sans-serif;color:rgba(237,237,237,.38)}

/* Tech marquee wrapper */
.tech-marquee{overflow:hidden;width:100%}
/* Tech row — scrolling track */
.tech-row{display:flex;align-items:center;width:max-content;gap:2rem;animation:techScroll 28s linear infinite;will-change:transform}
.tech-row:hover{animation-play-state:paused}
@keyframes techScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tech-ico{display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:.7rem .5rem;border-radius:12px;border:1px solid rgba(237,237,237,.08);background:rgba(237,237,237,.03);transition:border-color .3s,background .3s,transform .3s;cursor:default;min-width:64px;flex:1;max-width:80px}
.tech-ico:hover{border-color:rgba(237,237,237,.25);background:rgba(237,237,237,.07);transform:translateY(-3px)}
.tech-ico img{width:28px;height:28px;object-fit:contain;display:block}
.tech-ico span{font:500 .58rem/1 'Geist',sans-serif;letter-spacing:.06em;color:rgba(237,237,237,.4);text-align:center;transition:color .3s}
.tech-ico:hover span{color:rgba(237,237,237,.8)}
@media(max-width:768px){
  .tech-row{gap:1.2rem;animation-duration:22s}
  .tech-ico{min-width:52px;max-width:64px;padding:.6rem .4rem}
  .tech-ico img{width:22px;height:22px}
  .tech-ico span{font-size:.5rem}
}
@media(max-width:480px){
  .tech-row{gap:.8rem;animation-duration:18s}
  .tech-ico{min-width:44px;max-width:54px;padding:.5rem .3rem}
  .tech-ico img{width:18px;height:18px}
  .tech-ico span{font-size:.48rem;letter-spacing:.02em}
}
@media(max-width:375px){
  .tech-row{gap:.6rem;animation-duration:16s}
  .tech-ico{min-width:38px;max-width:46px;padding:.45rem .2rem;border-radius:8px}
  .tech-ico img{width:16px;height:16px}
  .tech-ico span{display:none}
}

/* Mobile */
@media(max-width:900px){
  .hero{height:auto}
  .hero-inner{grid-template-columns:1fr}
  .hero-img-col{height:88vw;padding-top:0}
  .hero-portrait{height:100%;width:100%;object-fit:cover;border-radius:12px 12px 0 0}
  .hero-text-col{padding:5.5rem 1.5rem 2rem 2rem}
  .hero-text-col .hero-title{font-size:clamp(2.2rem,8vw,4rem);margin:1.5rem 0}
  .hero-socials{display:none}
  .hero-badge{right:1rem;width:100px;height:100px}
  .hero-cards{grid-template-columns:1fr}
  .hcard{border-right:none;border-bottom:1px solid rgba(237,237,237,.08)}
  .hcard:last-child{border-bottom:none}
}

/* ===== MOBILE HAMBURGER + OVERLAY ===== */
.nav-hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;width:44px;height:44px;gap:5px;border:1px solid rgba(237,237,237,.18);border-radius:10px;cursor:pointer;z-index:101;flex-shrink:0;transition:border-color .3s,background .3s}
.nav-hamburger:hover{border-color:rgba(237,237,237,.45);background:rgba(237,237,237,.06)}
.nav-hamburger span{display:block;width:18px;height:1.5px;background:#ededed;border-radius:999px;transition:transform .42s cubic-bezier(.7,0,.3,1),opacity .3s;transform-origin:center}
.nav-hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.nav-overlay{position:fixed;inset:0;background:rgba(10,10,10,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:98;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;opacity:0;pointer-events:none;transition:opacity .45s cubic-bezier(.7,0,.3,1)}
.nav-overlay.open{opacity:1;pointer-events:all}
.nav-overlay a{font:400 3.2rem/1 'Instrument Serif',serif;font-style:italic;letter-spacing:-.02em;color:rgba(237,237,237,.6);display:inline-block;transform:translateY(22px);opacity:0;transition:color .3s,transform .55s cubic-bezier(.7,0,.3,1),opacity .55s cubic-bezier(.7,0,.3,1)}
.nav-overlay.open a{transform:translateY(0);opacity:1}
.nav-overlay.open a:nth-child(1){transition-delay:.05s}
.nav-overlay.open a:nth-child(2){transition-delay:.10s}
.nav-overlay.open a:nth-child(3){transition-delay:.15s}
.nav-overlay.open a:nth-child(4){transition-delay:.20s}
.nav-overlay a:hover{color:#ededed}
.nav-overlay-cta{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 2rem;border:1px solid rgba(237,237,237,.22);border-radius:999px;font:500 .78rem/1 'Geist',sans-serif;letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:rgba(237,237,237,.6)!important;transform:translateY(22px);opacity:0;transition:background .4s,border-color .4s,color .4s,transform .55s cubic-bezier(.7,0,.3,1)!important,opacity .55s cubic-bezier(.7,0,.3,1)!important}
.nav-overlay.open .nav-overlay-cta{transform:translateY(0);opacity:1;transition-delay:.25s!important}
.nav-overlay-cta:hover{background:#ededed;color:#0a0a0a!important;border-color:#ededed}
.nav-overlay-cta .dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 12px #22c55e;animation:pulse 2s ease-in-out infinite;flex-shrink:0}

@media(max-width:900px){
  .nav-hamburger{display:flex}
  .nav>.nav-cta{display:none}
}

/* ===== AMZ TABS — horizontal scroll on mobile ===== */
@media(max-width:768px){
  .amz-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;gap:.3rem;padding-bottom:.2rem}
  .amz-tabs::-webkit-scrollbar{display:none}
  .amz-tab{flex-shrink:0;font-size:.6rem;padding:.38rem .62rem}
  .work.featured .work-frame::before{height:22px}
  .work.featured .work-frame::after{top:7px;width:8px;height:8px;box-shadow:14px 0 0 #febc2e,28px 0 0 #28c840}
  .work.featured .work-frame img{top:22px;height:calc(100% - 22px)}
}

/* ===== 480px — small phones ===== */
@media(max-width:480px){
  .sec-pad{padding:4rem 1.1rem}
  .hero-text-col{padding:5rem 1.1rem 1.5rem 1.1rem}
  .hero-text-col .hero-meta{display:none}
  .hero-text-col .hero-title{margin:1.2rem 0 1.4rem}
  .hero-badge{right:.6rem;width:88px;height:88px}
  .works-list{gap:2.5rem}
  .works-head{margin-bottom:2rem;padding-bottom:1.5rem}
  .work-tags{gap:.3rem}
  .work-tag{font-size:.6rem;padding:.38rem .65rem}
  .work-bullets li{font-size:.85rem}
  .services-head{margin-bottom:3rem}
  .service{padding:2rem 1.2rem}
  .about-body p{font-size:1.05rem}
  .about-stats{gap:1.2rem;padding-top:1.8rem}
  .contact{padding:4rem 1.1rem 1.5rem}
  .contact-side{max-width:100%}
  .footer-mark{font-size:3.5rem}
  .footer{padding:2rem 0;gap:1rem}
  .footer-meta{text-align:left}
  .footer-socials{justify-content:flex-start}
  .exp-stats{grid-template-columns:1fr 1fr}
  .exp-stat:last-child{grid-column:auto;border-right:none;padding-right:0}
}

/* ===== 375px — very small phones ===== */
@media(max-width:375px){
  .sec-pad{padding:3.5rem .9rem}
  .hero-text-col{padding:4.5rem .9rem 1.2rem .9rem}
  .hero-img-col{height:92vw}
  .contact-mail{font-size:clamp(1.8rem,8.5vw,2.8rem)}
  .works-list{gap:2rem}
  .work-desc{font-size:.88rem}
  .about-stat .num{font-size:2.4rem}
  .nav-overlay a{font-size:2.6rem}
}

/* ===== HERO CARDS + TECH STRIP — full mobile responsive ===== */

/* 900px — tablet: hcard stacking already set, just refine padding */
@media(max-width:900px){
  .hcard{padding:1.2rem 1.5rem}
  .hcard-label{margin-bottom:.7rem}
  .exp-stats{gap:.75rem}
}

/* 768px — large phones */
@media(max-width:768px){
  .hcard{padding:1.1rem 1.2rem}
  /* skill bars */
  .sbar-name{width:4.5rem;font-size:.63rem}
  .sbar-pct{width:2rem;font-size:.58rem}
  /* experience stats */
  .exp-num{font-size:1.7rem}
  .exp-name{font-size:.56rem}
  .exp-sub{font-size:.54rem}
  /* tech marquee */
  .tech-row{gap:1.2rem;animation-duration:22s}
  .tech-ico{min-width:60px;max-width:72px;padding:.75rem .5rem}
  .tech-ico img{width:28px;height:28px}
  .tech-ico span{font-size:.52rem}
}

/* 480px — small phones */
@media(max-width:480px){
  .hcard{padding:1rem 1rem}
  .sbar-name{width:3.8rem;font-size:.6rem}
  .sbar-track{height:2px}
  .sbar-pct{font-size:.56rem;width:1.8rem}
  .exp-stats{gap:.5rem}
  .exp-num{font-size:1.5rem}
  .exp-name{font-size:.54rem}
  .exp-sub{font-size:.5rem}
  /* tech */
  .tech-row{gap:.9rem;animation-duration:18s}
  .tech-ico{min-width:54px;max-width:64px;padding:.65rem .4rem}
  .tech-ico img{width:26px;height:26px}
  .tech-ico span{font-size:.48rem;letter-spacing:.02em}
}

/* 375px — very small phones */
@media(max-width:375px){
  .hcard{padding:.9rem .9rem}
  .sbar-name{width:3.4rem;font-size:.58rem}
  .exp-stats{grid-template-columns:repeat(3,1fr);gap:.3rem}
  .exp-num{font-size:1.3rem}
  /* tech: icons only, no labels */
  .tech-row{gap:.6rem;animation-duration:16s}
  .tech-ico{min-width:48px;max-width:58px;padding:.6rem .35rem;border-radius:10px}
  .tech-ico img{width:24px;height:24px}
  .tech-ico span{display:none}
}

/* Blog preview on homepage */
.blog-preview-section{position:relative}
.blog-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;max-width:1200px;margin:3rem auto 0;padding:0 2rem}
.blog-preview-card{display:flex;flex-direction:column;padding:2.2rem 2rem;border:1px solid rgba(237,237,237,.08);border-radius:18px;background:rgba(237,237,237,.02);transition:border-color .35s,background .35s,transform .35s cubic-bezier(.7,0,.3,1);text-decoration:none;color:inherit}
.blog-preview-card:hover{border-color:rgba(237,237,237,.22);background:rgba(237,237,237,.04);transform:translateY(-3px)}
.blog-preview-meta{font:500 .72rem/1 'Geist',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(237,237,237,.55);margin-bottom:1.2rem}
.blog-preview-card h3{font:400 1.35rem/1.3 'Geist',sans-serif;letter-spacing:-.015em;color:#ededed;margin-bottom:1rem}
.blog-preview-card p{font-size:.95rem;color:rgba(237,237,237,.65);margin-bottom:1.4rem;flex:1;line-height:1.55}
.blog-preview-cta{font:500 .82rem/1 'Geist',sans-serif;color:rgba(237,237,237,.9);letter-spacing:.02em}
@media(max-width:780px){.blog-preview-grid{grid-template-columns:1fr;gap:1.2rem;padding:0 1.2rem}.blog-preview-card{padding:1.8rem 1.4rem}.blog-preview-card h3{font-size:1.2rem}}

/* =========================================================
   Blog
   ========================================================= */
.blog-body{background:#0a0a0a;color:#ededed;min-height:100vh;font-family:'Geist',ui-sans-serif,system-ui,sans-serif;line-height:1.65}
.blog-body::before{content:'';position:fixed;inset:0;background:radial-gradient(circle at 20% -10%,rgba(99,102,241,.08),transparent 50%),radial-gradient(circle at 90% 110%,rgba(168,85,247,.08),transparent 50%);pointer-events:none;z-index:0}
.blog-body > main,.blog-body > footer{position:relative;z-index:1}

.blog-header{display:flex;justify-content:space-between;align-items:center;padding:1.4rem 2.5rem;border-bottom:1px solid rgba(237,237,237,.06);background:rgba(10,10,10,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:sticky;top:0;z-index:10}
.blog-back{font:400 1.4rem/1 'Instrument Serif',serif;font-style:italic;letter-spacing:-.01em;transition:transform .35s cubic-bezier(.7,0,.3,1)}
.blog-back:hover{transform:translateX(-3px)}
.blog-back sup{font-size:.55em;margin-left:.15em;vertical-align:super;font-style:normal;font-family:'Geist',sans-serif}
.blog-nav{display:flex;gap:2rem;font:500 .78rem/1 'Geist',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.blog-nav a{color:rgba(237,237,237,.65);transition:color .25s}
.blog-nav a:hover,.blog-nav a[aria-current="page"]{color:#ededed}
@media(max-width:700px){.blog-header{padding:1rem 1.2rem}.blog-nav{gap:1.1rem;font-size:.7rem}}

.blog-main{max-width:760px;margin:0 auto;padding:7rem 1.5rem 6rem}
.blog-main.blog-index{max-width:980px}

.blog-intro .eyebrow{display:inline-block;font:500 .72rem/1 'Geist',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(237,237,237,.55);padding-bottom:.6rem;border-bottom:1px solid rgba(237,237,237,.12);margin-bottom:1.8rem;border-top:none}
.blog-intro h1{font:300 clamp(2.4rem,5.5vw,4.2rem)/1.05 'Geist',sans-serif;letter-spacing:-.025em;margin-bottom:1.6rem}
.blog-intro h1 .serif{font-family:'Instrument Serif',serif;font-style:italic;color:rgba(237,237,237,.7);font-weight:400}
.blog-lede{font-size:1.1rem;color:rgba(237,237,237,.7);max-width:62ch;margin-bottom:5rem}

.blog-list{display:flex;flex-direction:column;gap:2.4rem;margin-bottom:5rem}
.blog-card{display:block;padding:0;border:1px solid rgba(237,237,237,.08);border-radius:18px;background:rgba(237,237,237,.02);overflow:hidden;transition:border-color .35s,background .35s,transform .35s cubic-bezier(.7,0,.3,1)}
.blog-card:hover{border-color:rgba(237,237,237,.22);background:rgba(237,237,237,.04);transform:translateY(-3px)}
.blog-card-media{position:relative;width:100%;height:340px;overflow:hidden;background:#0a0a0a;border-bottom:1px solid rgba(237,237,237,.06);margin:0}
.blog-card-media img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .7s cubic-bezier(.7,0,.3,1)}
.blog-card:hover .blog-card-media img{transform:scale(1.03)}
.blog-card-content{padding:2.2rem 2rem 2.4rem}
.blog-card-meta{display:flex;gap:1rem;flex-wrap:wrap;font:500 .72rem/1 'Geist',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(237,237,237,.55);margin-bottom:1.2rem}
.blog-card-title{font:400 clamp(1.4rem,2.6vw,1.9rem)/1.2 'Geist',sans-serif;letter-spacing:-.02em;margin-bottom:1rem;color:#ededed}
.blog-card-excerpt{font-size:.98rem;color:rgba(237,237,237,.65);margin-bottom:1.4rem;max-width:64ch}
.blog-card-cta{font:500 .82rem/1 'Geist',sans-serif;color:rgba(237,237,237,.9);letter-spacing:.02em}

.blog-cta{padding:2.4rem 2rem;border-top:1px solid rgba(237,237,237,.08);font-size:.95rem;color:rgba(237,237,237,.65)}
.blog-cta a{color:#ededed;border-bottom:1px solid rgba(237,237,237,.3);transition:border-color .25s}
.blog-cta a:hover{border-color:#ededed}

.blog-article-meta{display:flex;gap:.7rem;align-items:center;font:500 .76rem/1 'Geist',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(237,237,237,.55);margin-bottom:2rem}
.blog-article-meta a{color:rgba(237,237,237,.85);transition:color .25s}
.blog-article-meta a:hover{color:#ededed}
.blog-article-title{font:300 clamp(2rem,4.5vw,3.3rem)/1.08 'Geist',sans-serif;letter-spacing:-.025em;margin-bottom:2rem}
.blog-article-title .serif{font-family:'Instrument Serif',serif;font-style:italic;color:rgba(237,237,237,.85);font-weight:400}

.blog-article-hero{margin:1.6rem 0 3rem;border-radius:14px;overflow:hidden;border:1px solid rgba(237,237,237,.08);background:#0a0a0a}
.blog-article-hero img{width:100%;height:380px;display:block;object-fit:cover;object-position:top center}
.blog-article-hero figcaption{padding:1rem 1.3rem;font:400 .85rem/1.55 'Geist',sans-serif;color:rgba(237,237,237,.55);background:rgba(237,237,237,.02);border-top:1px solid rgba(237,237,237,.06)}

.blog-article-lede{font-size:1.18rem;color:rgba(237,237,237,.78);margin-bottom:2rem;line-height:1.55}

.blog-article p,.blog-article li{font-size:1.02rem;color:rgba(237,237,237,.78)}
.blog-article p{margin:1.2rem 0}
.blog-article a{color:#ededed;border-bottom:1px solid rgba(237,237,237,.3);transition:border-color .25s}
.blog-article a:hover{border-bottom-color:#ededed}
.blog-article h2{font:400 1.6rem/1.2 'Geist',sans-serif;letter-spacing:-.015em;margin:3rem 0 1.2rem;color:#ededed;padding-top:1rem;border-top:1px solid rgba(237,237,237,.08)}
.blog-article h3{font:500 1.15rem/1.3 'Geist',sans-serif;letter-spacing:-.01em;margin:2rem 0 .8rem;color:#ededed}
.blog-article strong{color:#ededed;font-weight:600}
.blog-article em{color:rgba(237,237,237,.85)}
.blog-article ul,.blog-article ol{margin:1.2rem 0 1.2rem 1.4rem}
.blog-article li{margin:.4rem 0}

.blog-article code{font-family:'Geist Mono','SFMono-Regular',Consolas,monospace;font-size:.88em;background:rgba(237,237,237,.07);padding:.12em .38em;border-radius:5px;color:#ededed;border:1px solid rgba(237,237,237,.06)}
.blog-article pre{background:#0f0f10;border:1px solid rgba(237,237,237,.08);border-radius:12px;padding:1.2rem 1.4rem;overflow-x:auto;margin:1.6rem 0;line-height:1.55;font-size:.86rem}
.blog-article pre code{background:none;border:none;padding:0;font-size:inherit;color:rgba(237,237,237,.92)}
.blog-ascii{background:#0f0f10;border:1px solid rgba(237,237,237,.08);border-radius:12px;padding:1.2rem;overflow-x:auto;margin:1.6rem 0;font-family:'Geist Mono',monospace;font-size:.78rem;line-height:1.5;color:rgba(237,237,237,.72)}

.blog-callout{margin:2rem 0;padding:1.4rem 1.6rem;border-left:2px solid #6366f1;background:rgba(99,102,241,.06);border-radius:0 12px 12px 0}
.blog-callout p,.blog-callout li{font-size:.98rem;color:rgba(237,237,237,.82)}
.blog-callout p:first-child{margin-top:0}
.blog-callout p:last-child{margin-bottom:0}

.blog-details{margin:1.6rem 0;border:1px solid rgba(237,237,237,.1);border-radius:12px;background:rgba(237,237,237,.02);overflow:hidden;transition:border-color .25s}
.blog-details[open]{border-color:rgba(237,237,237,.2)}
.blog-details summary{padding:1rem 1.3rem;cursor:pointer;font:500 .92rem/1.4 'Geist',sans-serif;color:#ededed;list-style:none;display:flex;align-items:center;gap:.7rem;transition:background .2s}
.blog-details summary::-webkit-details-marker{display:none}
.blog-details summary::before{content:'+';font-size:1.2rem;color:rgba(237,237,237,.55);transition:transform .25s,color .25s;font-family:'Geist Mono',monospace;width:1rem;display:inline-block}
.blog-details[open] summary::before{content:'−';color:#ededed}
.blog-details summary:hover{background:rgba(237,237,237,.03)}
.blog-details > *:not(summary){padding:0 1.3rem 1.2rem}
.blog-details > p{margin:.6rem 0}

.blog-table-wrap{overflow-x:auto;margin:1.6rem 0;border:1px solid rgba(237,237,237,.08);border-radius:12px}
.blog-table{width:100%;border-collapse:collapse;font-size:.92rem}
.blog-table th,.blog-table td{padding:.85rem 1.1rem;text-align:left;border-bottom:1px solid rgba(237,237,237,.06)}
.blog-table th{font-weight:500;color:#ededed;background:rgba(237,237,237,.04);font:500 .78rem/1.2 'Geist',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.blog-table td{color:rgba(237,237,237,.78)}
.blog-table tr:last-child td{border-bottom:none}

.blog-rule{border:none;border-top:1px solid rgba(237,237,237,.1);margin:3.5rem 0 2rem}
.blog-bio{font-size:.95rem;color:rgba(237,237,237,.7)}
.blog-bio p{margin:.6rem 0}
.blog-bio strong{color:#ededed}
.blog-bio-links{font:500 .82rem/1 'Geist',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:rgba(237,237,237,.6)}

.blog-next{margin-top:5rem;padding-top:2.5rem;border-top:1px solid rgba(237,237,237,.08)}
.blog-next-eyebrow{font:500 .72rem/1 'Geist',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(237,237,237,.55);display:block;margin-bottom:1rem}
.blog-next-card{display:block;padding:1.8rem 1.6rem;border:1px solid rgba(237,237,237,.08);border-radius:14px;background:rgba(237,237,237,.02);transition:border-color .3s,background .3s,transform .3s}
.blog-next-card:hover{border-color:rgba(237,237,237,.22);background:rgba(237,237,237,.04);transform:translateY(-2px)}
.blog-next-card h3{font:400 1.15rem/1.3 'Geist',sans-serif;letter-spacing:-.01em;color:#ededed;margin-bottom:.7rem}
.blog-next-card span{font:500 .82rem/1 'Geist',sans-serif;color:rgba(237,237,237,.65);letter-spacing:.02em}

.blog-footer{display:flex;justify-content:space-between;align-items:center;padding:2rem 2.5rem;border-top:1px solid rgba(237,237,237,.06);font:500 .78rem/1 'Geist',sans-serif;letter-spacing:.04em;color:rgba(237,237,237,.55);max-width:1200px;margin:0 auto}
.blog-footer a{color:rgba(237,237,237,.75);transition:color .25s}
.blog-footer a:hover{color:#ededed}
@media(max-width:700px){.blog-main{padding:5.5rem 1.2rem 4rem}.blog-card-content{padding:1.6rem 1.3rem 1.8rem}.blog-card-media{height:220px}.blog-article-meta{flex-wrap:wrap}.blog-article-hero img{height:240px}}