.site-navigation{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:18px max(28px,calc((100vw - 1320px)/2));box-sizing:border-box;background:#09060ce8;border-bottom:1px solid #cda3e21f;backdrop-filter:blur(20px);font-family:Satoshi-Variable,system-ui,sans-serif}
.site-wordmark{font-size:30px;line-height:1;font-weight:900;letter-spacing:-1.8px;color:#fff;padding:7px 0}
.site-navigation nav{display:flex;align-items:center;gap:7px}
.site-navigation nav a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 21px;box-sizing:border-box;border:1px solid transparent;border-radius:28px;color:#cbbcd2;font-size:15px;line-height:1.3;transition:background .2s,color .2s,border-color .2s}
.site-navigation nav a:hover{color:#fff;background:#ab6ec915}
.site-navigation nav a[aria-current=page]{background:linear-gradient(120deg,#87359c45,#713e8830);color:#f8eaff;border-color:#d38bf564}
.section-page{position:relative;isolation:isolate;box-sizing:border-box;width:min(1240px,calc(100% - 64px));min-height:75dvh;padding:78px 0 95px;color:#fff;font-family:Satoshi-Variable,system-ui,sans-serif}
.section-page:before{content:'';position:absolute;z-index:-1;pointer-events:none;top:0;left:50%;transform:translateX(-50%);width:min(100vw,1450px);height:700px;background:radial-gradient(ellipse at 70% 3%,#76339429,transparent 54%)}
/* Route focus belongs on the main landmark without drawing a page-sized frame. */
#page-content:focus,#page-content:focus-visible{outline:none}
.section-page-heading{margin-bottom:46px}
.section-page-heading .section-kicker{font-size:12px;line-height:1.5;letter-spacing:2.5px;color:#d0a6dd}
.section-page-heading h1{max-width:950px;margin:22px 0 24px;font-size:clamp(43px,6.4vw,82px);font-weight:500;line-height:1.07;letter-spacing:-3px}
.section-page-heading h1>span{font-family:Satoshi-VariableItalic,serif;font-weight:400;color:#e8b8f4}
.page-project-count{font-size:15px;line-height:1.5;color:#a58eb2}
.projects-page .section-page-heading{text-align:center}
.projects-page .section-page-heading h1{margin-left:auto;margin-right:auto}
.projects-page .all-projects-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 28px}
.projects-page .all-project-caption strong{font-size:22px}
.projects-page .all-project-caption>span>span{font-size:14px}
.project-filter-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;max-width:760px;margin:0 auto 42px}.project-filter-tags button{appearance:none;padding:8px 13px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.025);color:rgba(255,255,255,.78);font:500 13px/1.1 Satoshi-Variable,system-ui,sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}.project-filter-tags button:hover{border-color:#e5b4f3a8;color:#fff;transform:translateY(-1px)}.project-filter-tags button.is-active{border-color:#e7b4f8;background:linear-gradient(120deg,#8e43a767,#a15abe35);color:#fff}
.about-page{width:100%;max-width:1400px;padding-top:0;padding-bottom:15px}
.about-page .aboutme-container{padding-top:70px;padding-bottom:100px}
.about-page .aboutme-title{font-size:clamp(44px,6vw,78px);font-weight:500;letter-spacing:-2px;line-height:1.1;opacity:1;margin-bottom:45px}
.about-page .hidden-paragraph.show{max-height:none;overflow:visible;margin-bottom:20px}
.about-page .aboutme-text{font-size:21px;line-height:1.65}
.about-page .aboutme-box{max-width:940px;padding-bottom:115px;border-color:transparent}
.about-page-link{display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:2;min-height:44px;margin-top:28px;padding:10px 20px;border:1px solid #e3c3f370;border-radius:100px;background:#60347325;color:#fff;font-size:15px;font-weight:600;box-sizing:border-box;transition:background .2s}
.about-page-link:hover{background:#663b7440}
.shop-page{width:min(1240px,calc(100% - 64px));padding-top:70px}
.shop-page .shop-section{padding:0}
.shop-page .shop-panel{max-width:none;min-height:555px}
.shop-page .shop-copy h1{font-size:clamp(44px,5.5vw,72px);font-weight:600;letter-spacing:-2px;line-height:1.08;margin:19px 0 24px;max-width:540px}
.shop-page .shop-description{font-size:20px;line-height:1.6}
.shop-page .shop-status{font-size:14px}
.contact-page{max-width:960px}
.contact-page .section-page-heading{text-align:center}
.contact-page .section-page-heading h1{font-size:clamp(42px,6vw,74px)}
.contact-form-panel{overflow:hidden;width:100%;border:1px solid #b97bd54a;border-radius:32px;background:#100c16;box-shadow:0 0 80px #7c33801c;box-sizing:border-box}
.contact-form-embed{width:100%;min-height:680px;height:75dvh;max-height:950px}
.contact-form-embed>div,.contact-form-embed iframe{width:100%;height:100%;min-height:680px;border:0;display:block}
.hero-container{scroll-margin-top:90px}
@media(max-width:1000px){.projects-page .all-projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.site-navigation{padding:16px 24px;gap:20px}.site-navigation nav a{padding:10px 15px}.section-page{width:calc(100% - 40px);padding-top:50px}.section-page-heading{margin-bottom:32px}.section-page-heading h1{letter-spacing:-2px}.about-page{width:100%;padding-top:0}.about-page .aboutme-container{padding-top:50px}.about-page .aboutme-box{width:calc(100% - 32px);padding-inline:32px}.about-page .aboutme-text{font-size:18px}.shop-page .shop-copy h1{font-size:51px}.contact-form-embed,.contact-form-embed>div,.contact-form-embed iframe{min-height:650px}}
@media(max-width:600px){.site-navigation{flex-direction:column;align-items:stretch;gap:14px;padding:16px 18px 12px}.site-wordmark{align-self:center;font-size:26px;padding:0}.site-navigation nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}.site-navigation nav a{padding:10px 4px;font-size:14px;line-height:1.3;white-space:nowrap}.section-page{padding-top:40px;padding-bottom:60px}.section-page-heading h1{font-size:clamp(39px,10vw,56px);letter-spacing:-1.6px;margin-top:16px}.section-page-heading .section-kicker{letter-spacing:2px}.project-filter-tags{justify-content:flex-start;gap:7px;margin-bottom:30px}.project-filter-tags button{padding:8px 11px;font-size:12px}.projects-page .all-projects-grid{gap:24px}.projects-page .all-project-caption strong{font-size:20px}.about-page{padding-top:0}.about-page .aboutme-title{font-size:48px;margin-bottom:35px}.about-page .aboutme-container{padding-top:40px;padding-bottom:50px}.about-page .aboutme-box{padding-inline:26px;padding-bottom:105px}.shop-page .shop-panel{min-height:0}.shop-page .shop-copy{padding:32px 26px 0}.shop-page .shop-copy h1{font-size:45px;letter-spacing:-1.6px}.shop-page .shop-description{font-size:18px}.shop-page .shop-visual{padding-bottom:30px}.contact-page .section-page-heading h1{font-size:43px}.contact-form-panel{border-radius:22px}.contact-form-embed,.contact-form-embed>div,.contact-form-embed iframe{min-height:640px}.hero-container{scroll-margin-top:120px}}
@media(prefers-reduced-motion:reduce){.site-navigation nav a,.about-page-link{transition:none}}
/* Keep navigation in a stable viewport layer, with measured space below it. */
:root{--site-header-height:82px;scroll-padding-top:calc(var(--site-header-height) + 18px)}
body{overflow-x:clip}
#root{padding-top:var(--site-header-height)}
.site-navigation{position:fixed;inset:0 0 auto;width:100%;max-width:100vw;z-index:200}
.site-navigation nav{min-width:0}
.site-navigation nav a{white-space:normal;text-align:center}
.hero-container{min-height:calc(100dvh - var(--site-header-height));scroll-margin-top:0;isolation:isolate}
#endorsements{scroll-margin-top:18px}
.aboutme-container:before,.aboutme-box:before,.aboutme-box:after{pointer-events:none}
.site-sparkles{position:fixed;inset:0;z-index:40;overflow:hidden;pointer-events:none;user-select:none;contain:strict}
.floating-sparkle{position:absolute;top:0;left:var(--left);width:var(--size);height:var(--size);border-radius:50%;background:var(--tint);box-shadow:0 0 9px var(--tint);opacity:0;animation:site-sparkle-drift var(--duration) linear var(--delay) infinite}
.floating-sparkle.is-star{border-radius:0;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%)}
@keyframes site-sparkle-drift{0%{transform:translate3d(0,105vh,0) scale(.45);opacity:0}12%{opacity:var(--brightness)}38%{opacity:.12}62%{opacity:var(--brightness)}88%{opacity:.12}100%{transform:translate3d(var(--drift),-10vh,0) scale(1);opacity:0}}
.lamp-intro-active .site-sparkles{z-index:1200}
.lamp-intro-active .floating-sparkle,.page-is-hidden .floating-sparkle,.page-is-hidden .intro-stars i,.page-is-hidden .intro-lamp img,.page-is-hidden .intro-smoke i{animation-play-state:paused}
@media(max-width:600px){:root{--site-header-height:113px}.site-navigation nav{gap:2px}.site-navigation nav a{padding:10px 3px;min-width:0}.floating-sparkle:nth-child(n+33){display:none}.hero-container{scroll-margin-top:0}}
@media(prefers-reduced-motion:reduce){.site-sparkles{display:none}.floating-sparkle{animation:none}}

/* Supplied Nabil vector wordmark. */
.site-wordmark{display:flex;align-items:center;flex-shrink:0}
.site-wordmark img,.intro-wordmark img{display:block;width:130px;height:auto}
.hero-wordmark{width:min(600px,78%);margin:80px 0 28px;line-height:0}
.hero-wordmark img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 18px #ffffff20)}
.hero-wordmark+.htext2{margin-top:-32px}
.shop-preview-signature img{display:block;width:86px;height:auto}
@media(max-width:600px){.site-wordmark img,.intro-wordmark img{width:110px}.hero-wordmark{margin-top:58px;width:80%;margin-bottom:20px}.hero-wordmark+.htext2{margin-top:-20px}.shop-preview-signature img{width:70px}}