:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-smooth:cubic-bezier(.22,.8,.25,1)}
.ambient-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.92}
.site-header,main,.site-footer{position:relative;z-index:1}
.site-header{background:color-mix(in srgb,var(--bg) 88%,transparent)}
.nav-links a{position:relative;padding:8px 0}
.nav-links a:after{content:"";position:absolute;left:0;bottom:1px;width:100%;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease-out)}
.nav-links a:hover:after,.nav-links a.active:after{transform:scaleX(1)}
.nav-links a.active{color:var(--text)}
.button,.button-small,button:not(.icon-button):not(.filter-button),.arrow-link{transition:color .2s var(--ease-out),background-color .2s var(--ease-out),border-color .2s var(--ease-out),box-shadow .25s var(--ease-out),transform .18s var(--ease-out)}
.button{position:relative;isolation:isolate;overflow:hidden;--mx:50%;--my:50%}
.button:before{content:"";position:absolute;inset:0;z-index:-2;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .34s var(--ease-out)}
.button:after{content:"";position:absolute;inset:-50%;z-index:-1;opacity:0;background:radial-gradient(circle at var(--mx) var(--my),#ff6a612c,transparent 34%);transition:opacity .22s}
.button:hover:before{transform:scaleX(1)}
.button:hover:after{opacity:1}
.button:active,button:active{transform:scale(.97)}
.button-arrow,a.button>span[aria-hidden]{display:inline-block;transition:transform .2s var(--ease-out)}
.button:hover .button-arrow,.button:hover>span[aria-hidden]{transform:translateX(4px)}
.button:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:4px;box-shadow:0 0 0 5px #e1060030}
.button.is-loading{cursor:progress;opacity:.8}
.button.is-loading:before{transform:scaleX(1);animation:loading-sweep 1.1s ease-in-out infinite alternate}
@keyframes loading-sweep{from{transform:scaleX(.08)}to{transform:scaleX(.85)}}
.ripple{position:absolute;width:12px;height:12px;border-radius:50%;background:#ffffff70;transform:translate(-50%,-50%);pointer-events:none;z-index:3;animation:ripple .58s ease-out forwards}
@keyframes ripple{to{width:210px;height:210px;opacity:0}}
.page-transition{position:fixed;inset:0;background:#080808;z-index:100;pointer-events:none;opacity:0;transition:opacity .15s}
.page-transition.is-active{opacity:.34}
.preloader{position:fixed;inset:0;display:grid;place-content:center;gap:16px;background:#080808;color:#f4f4f4;z-index:200;font:14px var(--mono);transition:opacity .3s}
.preloader[hidden]{display:none}.preloader.is-done{opacity:0;pointer-events:none}.preloader-skip{justify-self:center;background:transparent;color:var(--muted);border:1px solid var(--line);padding:6px 12px}
.custom-cursor{position:fixed;left:0;top:0;width:28px;height:28px;z-index:150;pointer-events:none;opacity:0;transform:translate3d(calc(var(--cx, -100px) - 50%),calc(var(--cy, -100px) - 50%),0);transition:opacity .2s}
.has-custom-cursor .custom-cursor{opacity:1}.custom-cursor:before,.custom-cursor i{content:"";position:absolute;inset:0;border:1px solid #f02b27a0;border-radius:50%;transition:transform .18s,background .18s}.custom-cursor i{inset:11px;background:var(--red);border:0}.custom-cursor.is-hovering:before{transform:scale(1.35);background:#e1060017}
.has-custom-cursor,.has-custom-cursor a,.has-custom-cursor button{cursor:none}.has-custom-cursor input,.has-custom-cursor textarea,.has-custom-cursor select{cursor:text}
.form-feedback{min-height:1.6em;margin:8px 0}.form-feedback.success{color:#83cf91}.form-feedback.error{color:#ff7770}
.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden}
.breadcrumbs{font:11px var(--mono);color:var(--muted);padding-top:20px}.timeline{list-style:none;margin:30px 0;padding:0 0 0 20px;border-left:1px solid var(--line)}.timeline-item{position:relative;padding:0 0 28px 18px;display:grid;gap:4px}.timeline-dot{position:absolute;width:9px;height:9px;left:-25px;top:7px;background:var(--red);border-radius:50%;box-shadow:0 0 12px #e10600aa}.timeline-item time{font:11px var(--mono);color:var(--muted)}
.shop-tools{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:10px;margin:25px 0}.shop-tools input,.shop-tools select{width:100%;min-width:0;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:10px}.shop-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px}.shop-summary{position:sticky;top:95px;align-self:start}.service-card[hidden]{display:none}.service-card{transition:transform .3s var(--ease-out),opacity .25s}.service-badges{display:flex;gap:7px;flex-wrap:wrap}.badge{font:10px var(--mono);border:1px solid var(--line);padding:4px 7px;color:var(--red)}.summary-line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12px}.gallery-item{padding:0;border:1px solid var(--line);background:var(--surface);overflow:hidden}.gallery-item img{display:block;width:100%;height:auto}.lightbox{max-width:min(92vw,1100px);max-height:92vh;padding:14px;background:var(--surface);border:1px solid var(--line)}.lightbox::backdrop{background:#000d}.lightbox img{max-width:86vw;max-height:80vh;display:block}.lightbox button{position:absolute;right:10px;top:8px;color:var(--text);background:var(--surface);border:1px solid var(--line)}
.back-top{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border:1px solid var(--line);background:conic-gradient(var(--red) var(--scroll,0deg),var(--surface2) 0);color:#fff;border-radius:50%;z-index:20;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s}.back-top.is-visible{opacity:1;pointer-events:auto;transform:none}
.cookie-banner{position:fixed;z-index:30;bottom:18px;left:18px;max-width:min(520px,calc(100vw - 36px));padding:14px 16px;background:var(--surface);border:1px solid var(--line);box-shadow:0 12px 40px #0009;display:flex;align-items:center;gap:16px;font-size:12px}
@media(max-width:950px){.nav-links{gap:12px}.nav-links a{font-size:11px}.shop-tools{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.nav-links{max-height:75vh;overflow:auto}.shop-layout{grid-template-columns:1fr}.shop-summary{position:static}.shop-tools{grid-template-columns:1fr 1fr}.shop-tools input{grid-column:1/-1}.custom-cursor{display:none}.cookie-banner{left:12px;bottom:12px;right:12px;max-width:none}}
@media(pointer:coarse){.custom-cursor{display:none}}
@media(prefers-reduced-motion:reduce){.page-transition,.preloader,.button,.button:before,.button:after,.nav-links a:after,.ripple{animation:none!important;transition:none!important}.custom-cursor{display:none!important}}


/* Keep the full desktop navigation on one line and preserve a visible pointer. */
.nav-links{flex:1;min-width:0;justify-content:center;gap:clamp(10px,1.15vw,18px);flex-wrap:nowrap;white-space:nowrap}
.nav-links a{flex-shrink:0;font-size:12px}
.nav-actions{flex-shrink:0;gap:10px;white-space:nowrap}
.nav-actions .login-link{font-size:12px}
.nav-actions .button{white-space:nowrap;flex:none;padding-inline:11px;font-size:11px;gap:8px}
.icon-button{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:6px}
.icon-button svg{display:block;width:20px;height:20px}
.menu-toggle svg path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
@media(prefers-reduced-motion:reduce){.has-custom-cursor,.has-custom-cursor a,.has-custom-cursor button{cursor:auto!important}.custom-cursor{display:none!important}}

/* Keep account actions close to the navigation links. */
.nav{justify-content:flex-start;gap:clamp(16px,2vw,24px)}
.nav-links{flex:0 1 auto;justify-content:flex-start;gap:clamp(10px,1vw,15px)}
.nav-actions{margin-left:0}
.nav-cta-arrow{width:14px;height:14px;flex:none;stroke:currentColor;stroke-width:2;fill:none}

/* Shared spacing, readable prose and progressive enhancement defaults. */
:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;--red-ink:#ff514b;--content-width:1160px}
body{min-height:100vh;display:flex;flex-direction:column}
main.wrap{flex:1;width:min(var(--content-width),calc(100% - 48px))}
.site-footer{width:100%}
.section{padding-block:clamp(var(--space-7),7vw,var(--space-9))}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-4);align-items:stretch}
.grid>*{grid-column:span 6;min-width:0}
.grid>.empty-state{grid-column:1/-1}
.contact-inbox{grid-template-columns:repeat(2,minmax(0,1fr))}
.contact-inbox>*{grid-column:span 1}
.page-heading{padding-block:var(--space-8) var(--space-4)}
p{max-width:72ch;line-height:1.7;overflow-wrap:anywhere}
.hero p{max-width:62ch}
.project-card,.service-card,.panel,.form-panel{background:color-mix(in srgb,var(--surface) 96%,transparent)}
.ambient-bg{opacity:.68}
.hero-content{isolation:isolate}
.hero-content:before{content:"";position:absolute;inset:-20px -5vw;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center, color-mix(in srgb,var(--bg) 92%,transparent) 0%,color-mix(in srgb,var(--bg) 74%,transparent) 57%,transparent 82%)}
:where(.eyebrow,.section-kicker,.service-category,.project-meta,.arrow-link){color:var(--red-ink)}
::selection{background:var(--red);color:#fff}
:where(button,a,input,select,textarea){scroll-margin-block:90px}
.lang-switch,.login-link,.footer-links a,.footer-bottom a{min-height:44px;display:inline-flex;align-items:center}
.nav-links a{min-height:44px;display:flex;align-items:center;padding-block:10px}
.icon-button{width:44px;height:44px;min-width:44px}
.button-small{min-height:44px}
.reading-progress{position:fixed;z-index:220;inset:0 auto auto 0;width:100%;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;pointer-events:none}
.site-header,.nav{transition:height .22s var(--ease-out),min-height .22s var(--ease-out),padding .22s var(--ease-out)}
.site-header.is-compact{height:62px}
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease-out) var(--reveal-delay,0ms),transform .55s var(--ease-out) var(--reveal-delay,0ms)}
.js .reveal.is-visible{opacity:1;transform:none}
.js .hero-content h1{animation:hero-enter .72s var(--ease-out) both}
@keyframes hero-enter{from{opacity:0;transform:translateY(16px);clip-path:inset(0 0 100%)}to{opacity:1;transform:none;clip-path:inset(0)}}
.scroll-cue{display:inline-flex;align-items:center;gap:9px;margin-top:26px;color:var(--muted);font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.scroll-cue:after{content:"";width:1px;height:24px;background:var(--red);transform-origin:top;animation:scroll-cue 1.4s var(--ease-smooth) infinite}
@keyframes scroll-cue{0%,100%{transform:scaleY(.35);opacity:.5}50%{transform:scaleY(1);opacity:1}}
.tech-ticker{overflow:hidden;border-block:1px solid var(--line);background:var(--surface);padding-block:var(--space-3);margin-block:var(--space-5)}
.tech-ticker-track{display:flex;width:max-content;gap:var(--space-6);animation:ticker 38s linear infinite}
.tech-ticker span{font:11px var(--mono);letter-spacing:.08em;color:var(--muted);white-space:nowrap}
@keyframes ticker{to{transform:translateX(-50%)}}
.project-card,.service-card{transition:transform .24s var(--ease-out),border-color .24s var(--ease-out),background-color .24s var(--ease-out)}
.project-card:hover,.service-card:hover{transform:translateY(-3px);border-color:#74302e;background:var(--surface2)}
.gallery-item img{transition:transform .6s var(--ease-out);transform-origin:center}
.gallery-item:hover img{transform:scale(1.025)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--red);box-shadow:0 0 0 3px #e1060020}
.field [aria-invalid=true]{border-color:var(--red);box-shadow:0 0 0 2px #e1060020}
button:disabled,.button:disabled{opacity:.6;cursor:not-allowed;transform:none}
:focus-visible{outline:2px solid var(--red-ink);outline-offset:3px}
html{scrollbar-color:var(--red) var(--bg);scrollbar-width:thin}
html::-webkit-scrollbar{width:10px}html::-webkit-scrollbar-track{background:var(--bg)}html::-webkit-scrollbar-thumb{background:#7a1815;border:2px solid var(--bg)}html::-webkit-scrollbar-thumb:hover{background:var(--red)}
@media(max-width:700px){
 main.wrap{width:calc(100% - 34px)}
 .grid>*{grid-column:1/-1}
 .contact-inbox>*{grid-column:span 1}
 .site-header{height:auto;min-height:66px}
 .nav{height:auto;min-height:66px;flex-wrap:wrap;padding-block:8px;gap:8px 14px}
 .nav-links{order:3;position:static;display:flex;flex:1 0 100%;flex-wrap:wrap;justify-content:flex-start;gap:4px 14px;max-height:none;overflow:visible;padding:8px 0}
 .nav-actions{margin-left:auto}
 .nav-actions .button,.nav-actions .login-link{display:none}
 .js .menu-toggle{display:inline-flex}
 .js .nav-links{display:none;position:absolute;z-index:20;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:10px 20px;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 14px 24px #0008}
 .js .nav-links.is-open{display:flex}
 .js .nav-links a{min-height:44px}
 .scroll-cue{margin-top:18px}
 .tech-ticker{margin-block:var(--space-4)}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 .js .reveal{opacity:1;transform:none}
 .scroll-cue:after,.tech-ticker-track{animation:none!important}
 .custom-cursor{display:none!important}
 .has-custom-cursor,.has-custom-cursor a,.has-custom-cursor button{cursor:auto!important}
}
@media(max-width:700px){html:not(.js) .menu-toggle{display:none}html:not(.js) .nav-actions .login-link{display:inline-flex}.js .nav-links{top:100%}}
@media(min-width:701px) and (max-width:1150px){
 .nav{position:relative}
 .js .menu-toggle{display:inline-flex}
 .js .nav-links{display:none;position:absolute;z-index:20;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:10px 20px;background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 24px #0008}
 .js .nav-links.is-open{display:flex}
 .js .nav-links a{min-height:44px}
 .js .nav-actions .button{display:none}
}
.site-header.is-hidden{transform:translateY(-100%)}
.project-card,.service-card{isolation:isolate}
.project-card:before,.service-card:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(260px circle at var(--card-x,50%) var(--card-y,50%),#ff514b10,transparent 70%);transition:opacity .2s}
.project-card:hover:before,.service-card:hover:before{opacity:1}
.gallery-item img{width:100%;aspect-ratio:16/9;object-fit:cover}
@media(min-width:701px) and (max-width:1150px){html:not(.js) .nav{height:auto;min-height:76px;flex-wrap:wrap;padding-block:8px}html:not(.js) .nav-links{flex:1 0 100%;flex-wrap:wrap;white-space:normal}.js .nav-links{transform:translateY(-6px);opacity:0;visibility:hidden;max-height:0;overflow:hidden;transition:opacity .18s,transform .18s,max-height .22s,visibility .18s}.js .nav-links.is-open{display:flex;transform:none;opacity:1;visibility:visible;max-height:75vh}}
@media(max-width:700px){html:not(.js) .nav{height:auto;min-height:66px}html:not(.js) .nav-links{position:static;display:flex;flex:1 0 100%;flex-wrap:wrap;white-space:normal} .js .nav-links{transform:translateY(-6px);opacity:0;visibility:hidden;max-height:0;overflow:hidden;transition:opacity .18s,transform .18s,max-height .22s,visibility .18s}.js .nav-links.is-open{display:flex;transform:none;opacity:1;visibility:visible;max-height:75vh}}
@media(prefers-reduced-motion:reduce){.site-header.is-hidden{transform:none}.project-card:before,.service-card:before{display:none}}
a:hover{color:var(--red-ink)}
.badge{color:var(--red-ink)}
.explorer strong{color:var(--red-ink)}
.shop-tools input,.shop-tools select,.admin-filters input,.admin-filters select{min-height:44px}
main{min-width:0}
@media(max-width:380px){.wrap,main.wrap{width:calc(100% - 24px)}.brand img{width:128px;height:auto}.nav{gap:6px 8px}.nav-actions{gap:3px}.icon-button{width:44px;min-width:44px}.editor-body{grid-template-columns:92px minmax(0,1fr)}.explorer{font-size:9px;padding-inline:6px}.code{font-size:9px;padding:10px}.shop-tools{grid-template-columns:1fr}.shop-tools input{grid-column:auto}}
.arrow-link,.filter-button{min-height:44px;display:inline-flex;align-items:center}
.eyebrow,.section-kicker,.service-category,.project-meta,.arrow-link{color:var(--red-ink)}

/* Admin navigation stays in actions on desktop and moves into the mobile menu. */
.admin-menu-link{display:none}
.admin-nav-button{background:transparent;border-color:var(--line);color:var(--text)}
.admin-nav-button:hover{border-color:var(--red);color:var(--text)}
@media(max-width:700px){.admin-menu-link{display:block}.nav-actions .admin-nav-button{display:none}}

@media(max-width:700px){.nav-actions .admin-nav-button{display:inline-flex;min-height:34px;padding-inline:9px}}