:root{--surface:#002822;--raised:#0c352f;--aurora:#0a4239;--line:#1d4a42;--ink:#ffffff;--muted:#d1d1d1;--teal:#00987f;--teal-deep:#00564a;--teal-text:#20b096;--rust:#b14800;--rust-deep:#4c1f00;--display:Montserrat,system-ui,sans-serif;--sans:Inter,system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--teal-text)}a:hover{color:#ffffff}
img{max-width:100%}
.wrap{max-width:1280px;margin:0 auto;padding-left:40px;padding-right:40px}
.eyebrow{margin:0 0 20px;font:600 12px/16px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-text)}
.h-xl{margin:0;font-family:var(--display);font-weight:200;font-size:clamp(52px,7vw,116px);line-height:.96;letter-spacing:-.025em}
.h-l{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(36px,4.4vw,60px);line-height:1.06;letter-spacing:-.01em}
.h-m{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(28px,2.6vw,40px);line-height:1.12}
.lead{margin:0;font:400 20px/31px var(--sans);color:var(--muted)}
.body{margin:0;font:400 17px/27px var(--sans);color:var(--muted)}
.small{margin:0;font:400 13px/18px var(--sans);color:var(--muted)}
.label{font:600 12px/16px var(--sans);letter-spacing:.1em;text-transform:uppercase}
.accent{color:var(--teal-text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;border-radius:9999px;border:0;text-decoration:none;font:600 15px/20px var(--sans);cursor:pointer;transition:background .3s,color .3s,transform .3s}
.btn:hover{transform:translateY(-2px)}
.btn-teal{background:var(--teal);color:#000000}.btn-teal:hover{background:var(--teal-text);color:#000000}
.btn-ghost{background:transparent;color:#ffffff;box-shadow:inset 0 0 0 1px #d1d1d1}.btn-ghost:hover{background:#ffffff;color:var(--surface)}
.btn-rust{background:var(--rust);color:#ffffff}.btn-rust:hover{background:#ffffff;color:var(--rust-deep)}
.arrow{display:inline-block;transition:transform .3s}.btn:hover .arrow{transform:translateX(4px)}
/* header */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 40px;background:rgba(0,40,34,0);transition:background .4s}
.site-header.solid{background:rgba(0,40,34,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-header.rust{background:rgba(76,31,0,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav{display:flex;gap:28px;align-items:center}
.nav a{position:relative;color:var(--muted);text-decoration:none;font:600 12px/16px var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:16px 2px}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--teal-text);transform:scaleX(0);transform-origin:right;transition:transform .35s}
.nav a:hover,.nav a[aria-current=page]{color:#ffffff}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1);transform-origin:left}
.h-right{display:flex;align-items:center;gap:16px}
.lang{display:inline-flex;padding:4px;border-radius:9999px;box-shadow:inset 0 0 0 1px var(--line)}
.lang-b{min-width:44px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;border-radius:9999px;border:0;background:transparent;color:var(--muted);text-decoration:none;font:600 12px/16px var(--sans);letter-spacing:.08em;cursor:pointer}
.lang-b:hover{color:#ffffff}
.lang-b.on{background:#ffffff;color:var(--surface)}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:9999px;box-shadow:inset 0 0 0 1px var(--line)}
.mnav summary::-webkit-details-marker{display:none}
.mnav nav{position:absolute;right:0;top:60px;display:flex;flex-direction:column;gap:4px;min-width:240px;padding:16px;border-radius:20px;background:var(--raised);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.mnav nav a{color:#ffffff;text-decoration:none;font:500 18px/24px var(--sans);padding:12px}
/* marquee */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0}
.marquee-track{display:flex;width:max-content;animation:marq 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{display:flex;align-items:center;gap:40px;padding-right:40px;font-family:var(--display);font-weight:200;font-size:clamp(32px,4vw,56px);line-height:1;white-space:nowrap}
.marquee-item .o{color:transparent;-webkit-text-stroke:1px #d1d1d1}
@keyframes marq{to{transform:translateX(-50%)}}
/* cards */
.card{position:relative;display:flex;flex-direction:column;gap:22px;min-height:440px;padding:40px;border-radius:32px;background:var(--raised);color:#ffffff;text-decoration:none;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),background .5s}
.card:hover{transform:translateY(-8px);background:#104239;color:#ffffff}
.card .go{margin-top:auto;display:flex;align-items:center;justify-content:space-between}
.card .go .circle{width:52px;height:52px;border-radius:9999px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--line);transition:background .4s}
.card:hover .go .circle{background:var(--teal);color:#000000;box-shadow:none}
.media{display:block;border-radius:20px;overflow:hidden;background:var(--raised)}
.media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
a:hover .media img,.prod:hover .media img{transform:scale(1.05)}
.ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font:600 12px/16px var(--sans);letter-spacing:.1em;color:var(--muted);background:repeating-linear-gradient(135deg,#0c352f 0 14px,#0e3a33 14px 28px)}
.ribbon{position:absolute;top:16px;left:16px;padding:7px 12px;border-radius:8px;font:600 11px/14px var(--sans);letter-spacing:.1em;text-transform:uppercase}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:9999px;box-shadow:inset 0 0 0 1px var(--line);color:#ffffff;font:600 13px/18px var(--sans);cursor:pointer;user-select:none;transition:background .3s,color .3s}
.chip:hover{box-shadow:inset 0 0 0 1px var(--teal-text)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.09;mix-blend-mode:overlay}
/* hero */
.hero{position:relative;height:960px;margin-top:-84px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(0,40,34,0) 0%,rgba(0,40,34,.35) 55%,#002822 100%)}
@keyframes wingIn{from{transform:translate(-110px,50px) rotate(-90deg);opacity:0}to{transform:none;opacity:1}}
@keyframes ringIn{from{transform:translate(110px,-40px) rotate(90deg);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes wordIn{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hl-wing{transform-box:fill-box;transform-origin:50% 50%;animation:wingIn 1.5s cubic-bezier(.2,.8,.2,1) .2s both}
.hl-ring{transform-box:fill-box;transform-origin:50% 50%;animation:ringIn 1.5s cubic-bezier(.2,.8,.2,1) .35s both}
.hl-word{animation:wordIn 1.4s cubic-bezier(.6,0,.2,1) 1.05s both}
.in-1{animation:fadeUp 1.1s cubic-bezier(.2,.8,.2,1) 1.4s both}
.in-2{animation:fadeUp 1.1s cubic-bezier(.2,.8,.2,1) 1.6s both}
.cue-line{animation:cue 2.4s ease-in-out infinite}
/* story */
.story{position:relative;height:2800px}
.story-pin{position:sticky;top:0;height:860px;overflow:hidden;display:flex;align-items:center}
.stage-num{font-family:var(--display);font-weight:200;font-size:20px;color:var(--teal-text)}
/* horizontal work */
.hwork{position:relative;height:2600px}
.hwork-pin{position:sticky;top:0;height:880px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:48px}
.hwork-track{display:flex;gap:28px;padding-left:40px;width:max-content}
.hwork-item{display:block;width:520px;color:#ffffff;text-decoration:none}
.hwork-item .media{height:540px}
.hwork-item:nth-child(even) .media{height:440px;margin-top:100px}
.cap{display:flex;justify-content:space-between;gap:16px;padding-top:16px;font:400 16px/24px var(--sans)}
/* big footer */
.foot{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.foot-word{display:block;width:100%;aspect-ratio:542/186;margin-top:40px;background:#0a4239 url(img/aurora-hero.jpg) center/cover no-repeat;-webkit-mask:url(img/polabia-wordmark.svg) center/contain no-repeat;mask:url(img/polabia-wordmark.svg) center/contain no-repeat}
.foot-grid{display:flex;flex-wrap:wrap;gap:48px;justify-content:space-between;align-items:flex-start;padding-top:72px;padding-bottom:24px}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col a{color:#ffffff;text-decoration:none;font:400 16px/24px var(--sans)}
.foot-col a:hover{color:var(--teal-text)}
/* tabs & filters (pure CSS) */
.tabin,.catin,.chipin{position:absolute;opacity:0;pointer-events:none}
.tablist{display:flex;flex-wrap:wrap;gap:10px}
.tab{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border-radius:9999px;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font:600 14px/20px var(--sans);cursor:pointer;transition:background .3s,color .3s}
.tab:hover{color:#ffffff;box-shadow:inset 0 0 0 1px var(--teal-text)}
.panel{display:none}
#svc-g:checked~.tablist label[for=svc-g],#svc-w:checked~.tablist label[for=svc-w],#svc-p:checked~.tablist label[for=svc-p]{background:var(--teal);color:#000000;box-shadow:none}
#svc-g:checked~.panels .p-g,#svc-w:checked~.panels .p-w,#svc-p:checked~.panels .p-p{display:grid;animation:fadeUp .7s cubic-bezier(.2,.8,.2,1) both}
.tabin:focus-visible~.tablist label,.catin:focus-visible~.filters label{outline:0}
#svc-g:focus-visible~.tablist label[for=svc-g],#svc-w:focus-visible~.tablist label[for=svc-w],#svc-p:focus-visible~.tablist label[for=svc-p]{outline:2px solid var(--teal-text);outline-offset:3px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters .chip{box-shadow:inset 0 0 0 1px #6a3a1a}
.shopgrid:has(#c-all:checked) label[for=c-all]{background:var(--rust);color:#ffffff;box-shadow:none}
.shopgrid:has(#c-wear:checked) label[for=c-wear]{background:var(--rust);color:#ffffff;box-shadow:none}
.shopgrid:has(#c-poster:checked) label[for=c-poster]{background:var(--rust);color:#ffffff;box-shadow:none}
.shopgrid:has(#c-box:checked) label[for=c-box]{background:var(--rust);color:#ffffff;box-shadow:none}
.shopgrid:has(#c-acc:checked) label[for=c-acc]{background:var(--rust);color:#ffffff;box-shadow:none}
.shopgrid:has(#c-all:focus-visible) label[for=c-all]{outline:2px solid #ffffff;outline-offset:3px}
.shopgrid:has(#c-wear:focus-visible) label[for=c-wear]{outline:2px solid #ffffff;outline-offset:3px}
.shopgrid:has(#c-poster:focus-visible) label[for=c-poster]{outline:2px solid #ffffff;outline-offset:3px}
.shopgrid:has(#c-box:focus-visible) label[for=c-box]{outline:2px solid #ffffff;outline-offset:3px}
.shopgrid:has(#c-acc:focus-visible) label[for=c-acc]{outline:2px solid #ffffff;outline-offset:3px}
.shopgrid:has(#c-wear:checked) .prod:not(.k-wear){display:none}
.shopgrid:has(#c-poster:checked) .prod:not(.k-poster){display:none}
.shopgrid:has(#c-box:checked) .prod:not(.k-box){display:none}
.shopgrid:has(#c-acc:checked) .prod:not(.k-acc){display:none}
.chipin:checked+.chip{background:var(--teal);color:#000000;box-shadow:none}
.chipin:focus-visible+.chip{outline:2px solid var(--teal-text);outline-offset:3px}
.field{width:100%;min-height:58px;padding:16px 20px;border-radius:8px;border:1px solid #4c6e68;background:var(--raised);color:#ffffff;font:400 16px/24px var(--sans)}
.field:focus{outline:2px solid var(--teal-text);outline-offset:2px}
.field::placeholder{color:#a9b9b5}
.flabel{display:block;margin-bottom:8px;font:600 12px/16px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* scroll-driven */
@supports (animation-timeline: view()){
@keyframes rise{from{opacity:0;transform:translateY(80px)}to{opacity:1;transform:none}}
@keyframes lightUp{from{opacity:.14}to{opacity:1}}
@keyframes clipIn{from{clip-path:inset(16% 16% 16% 16% round 40px);transform:scale(1.08)}to{clip-path:inset(0 0 0 0 round 20px);transform:none}}
@keyframes heroOut{from{transform:scale(1);filter:brightness(1)}to{transform:scale(1.22);filter:brightness(.35)}}
@keyframes heroText{from{transform:none;opacity:1}to{transform:translateY(-180px);opacity:0}}
@keyframes wingStory{0%{transform:translate(-260px,70px) rotate(-90deg)}45%{transform:translate(-70px,24px) rotate(-30deg)}100%{transform:none}}
@keyframes ringStory{0%{transform:translate(260px,-50px) rotate(90deg)}45%{transform:translate(70px,-12px) rotate(30deg)}100%{transform:none}}
@keyframes st1{0%,6%{opacity:.16}12%,30%{opacity:1}38%,100%{opacity:.16}}
@keyframes st2{0%,34%{opacity:.16}42%,60%{opacity:1}68%,100%{opacity:.16}}
@keyframes st3{0%,64%{opacity:.16}72%,100%{opacity:1}}
@keyframes bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes glow{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes slideX{from{transform:translateX(0)}to{transform:translateX(calc(-100% + 100vw))}}
@keyframes closing{from{opacity:.1;transform:scale(.9);letter-spacing:.06em}to{opacity:1;transform:none;letter-spacing:-.02em}}
@keyframes footUp{from{transform:translateY(40%)}to{transform:none}}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-140px)}}
@keyframes headerTint{from{background:rgba(0,40,34,0)}to{background:rgba(0,40,34,.86)}}
.reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 26%}
.reveal-2{animation:rise linear both;animation-timeline:view();animation-range:entry 12% cover 34%}
.reveal-3{animation:rise linear both;animation-timeline:view();animation-range:entry 24% cover 42%}
.light{animation:lightUp linear both;animation-timeline:view();animation-range:entry 30% cover 48%}
.clip{animation:clipIn linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
.hero-bg{animation:heroOut linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
.hero-copy{animation:heroText linear both;animation-timeline:view();animation-range:exit 0% exit 70%}
.story{view-timeline-name:--story}
.s-wing{transform-box:fill-box;transform-origin:50% 50%;animation:wingStory linear both;animation-timeline:--story;animation-range:contain 0% contain 85%}
.s-ring{transform-box:fill-box;transform-origin:50% 50%;animation:ringStory linear both;animation-timeline:--story;animation-range:contain 0% contain 85%}
.st-1{animation:st1 linear both;animation-timeline:--story;animation-range:contain 0% contain 100%}
.st-2{animation:st2 linear both;animation-timeline:--story;animation-range:contain 0% contain 100%}
.st-3{animation:st3 linear both;animation-timeline:--story;animation-range:contain 0% contain 100%}
.s-bar{transform-origin:left;animation:bar linear both;animation-timeline:--story;animation-range:contain 0% contain 100%}
.s-glow{animation:glow linear both;animation-timeline:--story;animation-range:contain 30% contain 100%}
.hwork{view-timeline-name:--hwork}
.hwork-track{animation:slideX linear both;animation-timeline:--hwork;animation-range:contain 0% contain 100%}
.closing{animation:closing linear both;animation-timeline:view();animation-range:entry 10% cover 50%}
.foot-word{animation:footUp linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
.drift{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.site-header{animation:headerTint linear both;animation-timeline:scroll(root);animation-range:0 240px}
.site-header.solid,.site-header.rust{animation:none}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important}html{scroll-behavior:auto}}
@media (max-width:900px){
.nav{display:none}.mnav{display:block}.h-cta{display:none}
.site-header{padding:14px 20px}.wrap{padding-left:20px;padding-right:20px}
.hero{height:780px}
.story{height:auto}.story-pin{position:relative;height:auto;padding:96px 0}
.story-grid{grid-template-columns:1fr !important}
.hwork{height:auto}.hwork-pin{position:relative;height:auto;padding:96px 0}
.hwork-track{animation:none !important;width:auto;overflow-x:auto;padding-right:20px;padding-left:20px;scroll-snap-type:x mandatory}
.hwork-item{width:78vw;scroll-snap-align:start}.hwork-item .media,.hwork-item:nth-child(even) .media{height:420px;margin-top:0}
.span-7,.span-5,.span-4{grid-column:span 12 !important}
}