:root{--ice:#a8d1f6;--navy:#050c11}
body{background:radial-gradient(ellipse at 80% 25%,#10263b55,transparent 50%),#050c11}
.header{background:linear-gradient(110deg,#050b10f5,#0c1a29ea 65%,#050b10f5)!important;backdrop-filter:blur(18px);isolation:isolate}
.header:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,#a8d1f620 28%,#cbeaffd9 50%,#a8d1f620 72%,transparent);background-size:240% 100%;animation:edge-light 9s ease-in-out 1.5s infinite;pointer-events:none}
.hero,.detail-hero,.skills-hero,.work-intro,.about-hero,.contact-page{isolation:isolate}
.hero-content,.detail-hero-copy{z-index:3!important}
.detail-hero:before{content:"";position:absolute;bottom:0;left:0;right:0;height:20%;background:linear-gradient(0deg,#050c11,transparent);z-index:2;pointer-events:none}
body .hero-panorama + .stats,body .stats{position:relative;background:linear-gradient(110deg,#071019 0%,#10202c 55%,#09141d 100%)!important;overflow:hidden}
.stats:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#a8d1f620 49%,transparent 63%);transform:translateX(-75%);opacity:0;pointer-events:none}
.stats:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#b4dcff55,transparent);box-shadow:0 0 12px #9ed4ff20}
.btn{position:relative;overflow:hidden;isolation:isolate;transition:box-shadow .35s,border-color .35s,background .35s,transform .35s!important}
.btn.outline{border-color:#b2cad57a!important;background:linear-gradient(135deg,#18222b66,#050c1177 50%,#8595a314)!important;box-shadow:inset 0 1px #e6f5ff20}
.btn.white{box-shadow:0 0 22px #a8d1f622}
.btn:hover{box-shadow:0 0 25px #a8d1f640!important;border-color:#dbeeff!important;transform:translateY(-2px)}
.card{--pointer-x:50%;--pointer-y:50%;border-color:#a8d1f62e!important;box-shadow:0 14px 40px #0003;transition:transform .35s,box-shadow .35s,border-color .35s}
.featured,.about-tease,.contact-banner,.quote{position:relative;overflow:hidden}
.preview-label{position:fixed;bottom:10px;right:10px;z-index:100;font:600 8px Montserrat,Arial,sans-serif;letter-spacing:.13em;color:#d7e8f5;background:#07111bda;border:1px solid #a8d1f640;padding:8px 10px;backdrop-filter:blur(10px);pointer-events:none}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.hero-video[hidden]{display:none}
@keyframes edge-light{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes stats-reflection{0%{transform:translateX(-100%);opacity:0}12%,80%{opacity:1}100%{transform:translateX(100%);opacity:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.btn:hover{transform:none}.card{transform:none!important}}
.work-project,.skill-card{position:relative;overflow:hidden;transition:box-shadow .35s,border-color .35s,transform .35s}
.stats.glint-played:after{animation:stats-reflection 3.2s ease-in-out 1.5s 1 forwards}

/* Shared midnight palette for home, Work and project details. */
:root{--surface-deep:#071019;--surface-panel:#0b1822;--surface-steel:#10202c;--surface-edge:#b4cee022;--tile-gradient:linear-gradient(115deg,#071019 0%,#10202c 65%,#0b1822 100%)}
body main .skills .skill-grid>div{background:var(--tile-gradient)!important;border-color:var(--surface-edge)}
body main .card{background-color:var(--surface-panel);border-color:var(--surface-edge)!important}
body main .card:after{background:linear-gradient(to bottom,transparent 0%,#0b1822e8 70%,var(--surface-panel) 100%)!important}
body main .work-project{background:var(--surface-panel)!important;border-color:var(--surface-edge)}
body main .work-project>div{background:var(--tile-gradient)!important}
body .skills-page .skill-card,body .skills-page .skill-card .skill-copy{background:var(--tile-gradient)!important;border-color:var(--surface-edge)}
body .skills-page .skill-card .skill-visual:after{background:var(--tile-gradient)!important;mask-image:linear-gradient(to top,#000,transparent);-webkit-mask-image:linear-gradient(to top,#000,transparent)}
body .related-case{background:var(--surface-panel);border-color:var(--surface-edge)}
body .related-case-image{background:var(--surface-deep)}
body .work-group{border-bottom-color:var(--surface-edge)}
/* A single, quiet logo entrance. Original artwork and geometry stay intact. */

/* Glow follows only the moving, logo-masked reflection. */
@media(max-width:650px){
 html body .header{display:grid!important;grid-template-columns:minmax(0,1fr) 48px 68px;gap:8px;padding:0 16px;height:64px;width:100%;min-width:0}
 html body .header a.brand.ab-logo-lockup{grid-column:1;width:100%!important;max-width:240px;min-width:0;justify-self:start}
 html body .header .menu{grid-column:2;margin:0;min-width:0;width:48px;min-height:44px;padding:0;font-size:10px;letter-spacing:.12em}
 html body .header .language-switch{grid-column:3;justify-self:end;gap:2px;padding-left:6px;margin:0;min-width:0}
 html body .header .language-switch a{min-width:27px;min-height:44px;font-size:11px}
 html body .header nav{position:absolute;top:64px;left:0;right:0;width:100%;max-height:calc(100dvh - 64px)}
 html body .hero.hero-panorama{height:auto;min-height:calc(100svh - 64px);background-position:76% top;background-size:auto 70%}
 html body .hero-panorama .hero-content{width:100%;min-width:0;max-width:100%;padding:clamp(190px,35svh,310px) 6% 24px}
 html body .hero-panorama .hero-overlay{background:linear-gradient(to bottom,transparent 18%,#020a101a 32%,#020a10c9 52%,#020a10 70%)}
 html body .hero-panorama .kicker{font-size:9px;line-height:1.5;letter-spacing:.15em;margin-bottom:12px;max-width:100%}
 html body .hero-panorama h1{font-size:clamp(22px,6.6vw,32px);line-height:1.08;margin:12px 0 14px}
 html[lang] body .hero.hero-panorama .hero-content>p:not(.kicker){font-size:14px;line-height:1.5;white-space:normal;margin-bottom:0}
 html body .hero-panorama .buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px;width:100%}
 html body .hero-panorama .buttons .btn{min-width:0;min-height:44px;padding:14px 8px;font-size:10px;letter-spacing:.05em;display:flex;align-items:center;justify-content:center}
}

@media(max-width:650px){.preview-label{display:none}}
/* A visible light edge travels with the reveal, then disappears. */

/* One inherited progress value positions both the crop and its luminous edge. */
@property --logo-progress{syntax:"<percentage>";inherits:true;initial-value:0%}
@property --logo-edge-opacity{syntax:"<number>";inherits:true;initial-value:0}
.header a.brand.ab-logo-lockup{--logo-progress:100%;--logo-edge-opacity:0;animation:none}
html.logo-first-visit .header a.brand.ab-logo-lockup{--logo-progress:0%;--logo-edge-opacity:0;animation:logo-reveal-scan 1.25s linear 1 both}
.header a.brand.ab-logo-lockup>img{animation:none;opacity:1;filter:none;clip-path:none}
html.logo-first-visit .header a.brand.ab-logo-lockup>img{clip-path:inset(0 calc(96.5818% - var(--logo-progress) * .9350586) 0 0)}
@keyframes logo-reveal-scan{0%{--logo-progress:0%;--logo-edge-opacity:0}8%{--logo-progress:0%;--logo-edge-opacity:1}92%{--logo-progress:100%;--logo-edge-opacity:1}100%{--logo-progress:100%;--logo-edge-opacity:0}}
@media(prefers-reduced-motion:reduce){.header a.brand.ab-logo-lockup{animation:none!important;--logo-progress:100%;--logo-edge-opacity:0}.header a.brand.ab-logo-lockup>img{clip-path:none!important}.header a.brand.ab-logo-lockup:after{display:none}}

/* The light is clipped to the original logo alpha; the parent blurs only those lit contours. */
.header .ab-logo-lockup .logo-contour-glow{display:block;position:absolute;inset:0;pointer-events:none;opacity:var(--logo-edge-opacity);z-index:3;mix-blend-mode:plus-lighter;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #ffffffcc)}
.header .ab-logo-lockup .logo-contour-light{display:block;position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(var(--logo-progress) - 12px),#ffffff33 calc(var(--logo-progress) - 7px),#ffffffaa calc(var(--logo-progress) - 3px),#fff calc(var(--logo-progress) - 1px),#fff calc(var(--logo-progress) + 1px),#ffffffaa calc(var(--logo-progress) + 3px),#ffffff33 calc(var(--logo-progress) + 7px),transparent calc(var(--logo-progress) + 12px));mask-image:url('/assets/logo-contour-mask.png');mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-image:url('/assets/logo-contour-mask.png');-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}
@media(max-width:650px){.header .ab-logo-lockup .logo-contour-glow{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #ffffffcc)}}
@media(prefers-reduced-motion:reduce){.header .ab-logo-lockup .logo-contour-glow{display:none}}

/* Soft shadow cast from the home hero onto the figures banner. */
body .hero-panorama + .stats{background:linear-gradient(to bottom,#000000a6 0px,#00000066 20px,#00000026 48px,transparent 85px),linear-gradient(110deg,#071019 0%,#10202c 55%,#09141d 100%)!important}

/* Shadow belongs to the figures strip, never to the hero photograph. */
.hero:after{content:none}
body .hero-panorama + .stats{background:linear-gradient(to bottom,#000000b3 0px,#00000073 24px,#00000026 60px,transparent 100px),linear-gradient(110deg,#071019 0%,#10202c 55%,#09141d 100%)!important}
html.reflections-waiting .header:after{animation:none}
.btn:after{content:none!important;animation:none!important}
/* Paired white actions use the outline action's dimensions in both languages. */
.btn.white.button-size-matched{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;flex:none;width:var(--outline-button-width);max-width:100%;height:var(--outline-button-height);padding-inline:6px;white-space:nowrap}
html[lang="en"] .hero .btn.white.button-size-matched{letter-spacing:0}

/* Publication context sits beside the client without competing with project content. */
.case-client strong.publication-platforms{font-size:12px;font-weight:500;line-height:1.65;color:#d2dce4}

/* Current section is underlined on desktop, including Work on project pages. */
@media(min-width:651px){.header nav a[aria-current="page"],.header nav a[aria-current="location"]{text-decoration-line:underline;text-decoration-color:#f9fbfd;text-decoration-thickness:1.5px;text-underline-offset:7px;text-decoration-skip-ink:none}}