/*
Theme Name: 3310 Studio
Theme URI: https://3310studio.pl
Author: 3310 Studio
Description: Motyw agencji reklamy 3310 Studio (retro, lata 2000). Treści: Wygląd > Dostosuj > 3310 Studio. Realizacje: menu Realizacje.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: s3310
*/
:root{--lcd:#9BBB0E;--lime:#C2E03A;--frame:#1F2D16;--ink:#0E140A;--cream:#F3F1E4;--paper:#E9EBCF;--or:#FF6016;--mut:#3E4C2C;--px:'VT323',monospace;--sans:'Space Grotesk',system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--cream);color:var(--ink);font:400 18px/1.6 var(--sans);
background-image:radial-gradient(rgba(31,45,22,.09) 1px,transparent 1.2px);background-size:6px 6px}
a{color:inherit}img{max-width:100%;display:block}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--lime);padding:8px 14px;z-index:99}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--or);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.px{font-family:var(--px);letter-spacing:.02em}
/* status bar */
.bar{position:sticky;top:0;z-index:50;background:var(--frame);color:var(--lime);border-bottom:4px solid var(--ink)}
.bar .wrap{display:flex;align-items:center;gap:18px;height:68px}
.sig{display:flex;align-items:flex-end;gap:3px;height:22px}.sig i{width:5px;background:var(--lime)}.sig i:nth-child(1){height:6px}.sig i:nth-child(2){height:11px}.sig i:nth-child(3){height:16px}.sig i:nth-child(4){height:22px}
.brand{font:400 30px/1 var(--px);text-decoration:none;color:var(--cream);display:flex;align-items:center;gap:12px}
.brand img{height:44px;width:auto}
.nav{margin-left:auto;display:flex;gap:4px;list-style:none;padding:0;margin-top:0;margin-bottom:0}
.nav a{display:block;padding:6px 12px;font:400 23px/1 var(--px);text-decoration:none;color:var(--cream)}
.nav a b{color:var(--lime);font-weight:400;margin-right:4px}
.nav a:hover,.nav a[aria-current]{background:var(--lime);color:var(--ink)}.nav a:hover b,.nav a[aria-current] b{color:var(--ink)}
.bat{display:flex;align-items:center;gap:2px;border:2px solid var(--lime);padding:2px;height:22px}.bat i{width:6px;height:100%;background:var(--lime)}.bat:after{content:"";width:3px;height:8px;background:var(--lime);margin-left:3px;margin-right:-8px}
.menubtn{display:none;margin-left:auto;background:var(--lime);color:var(--ink);border:0;font:400 24px/1 var(--px);padding:8px 14px;cursor:pointer}
/* hero */
.hero{padding:64px 0 72px;border-bottom:4px solid var(--ink)}
.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.screen{position:relative}
.screen img{width:100%;height:auto}
.screen .load{margin-top:14px;font:400 24px/1 var(--px);color:var(--frame);display:flex;gap:12px;align-items:center;padding:0 6% 0 4%}
.screen .load span{flex:1;height:20px;border:3px solid var(--frame);padding:2px;display:flex;gap:2px}
.screen .load span i{flex:1;background:var(--frame);opacity:0;animation:seg .01s forwards}
@keyframes seg{0%{opacity:0}100%{opacity:1}}
.chat{display:flex;flex-direction:column;gap:14px}
.kicker{font:400 26px/1 var(--px);color:var(--mut);margin:0 0 4px}
.sms{max-width:92%;padding:16px 20px;border:3px solid var(--ink);background:#fff;position:relative;box-shadow:5px 5px 0 var(--ink);opacity:0;transform:translateY(12px);animation:pop .45s ease forwards}
.sms.in-l{align-self:flex-start;border-radius:4px 18px 18px 18px}
.sms.out{align-self:flex-end;background:var(--lime);border-radius:18px 4px 18px 18px}
.sms small{display:block;font:400 18px/1 var(--px);color:var(--mut);margin-bottom:4px}
.sms:nth-child(2){animation-delay:.2s}.sms:nth-child(3){animation-delay:.9s}.sms:nth-child(4){animation-delay:1.6s}.sms:nth-child(5){animation-delay:2.3s}
@keyframes pop{to{opacity:1;transform:none}}
h1{font:700 clamp(34px,4.2vw,56px)/1.05 var(--sans);margin:0;letter-spacing:-.02em}
h1 em{font-style:normal;background:var(--ink);color:var(--lime);padding:0 .15em}
.sms p{margin:0}
.keys{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;animation:pop .45s 2.8s ease forwards;opacity:0}
.key{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:3px solid var(--ink);background:var(--or);color:var(--ink);font:700 18px/1 var(--sans);text-decoration:none;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.key.alt{background:var(--cream)}
.key:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.key kbd{font:400 22px/1 var(--px);background:var(--ink);color:var(--lime);padding:2px 7px}
/* ticker */
.tick{background:var(--lcd);border-bottom:4px solid var(--ink);overflow:hidden;white-space:nowrap;font:400 30px/1 var(--px);padding:14px 0}
.tick div{display:inline-block;animation:tk 40s linear infinite}
@keyframes tk{to{transform:translateX(-50%)}}
/* sections */
section{padding:96px 0}
.head{display:flex;align-items:flex-end;gap:24px;margin-bottom:44px;flex-wrap:wrap}
.num{font:400 170px/.72 var(--px);color:var(--or);-webkit-text-stroke:0}
h2{font:700 clamp(32px,3.6vw,48px)/1.08 var(--sans);margin:0;letter-spacing:-.02em}
.lead{font-size:20px;color:var(--mut);margin:8px 0 0;max-width:620px}
.crumb{font:400 22px/1 var(--px);color:var(--mut);margin:0 0 6px}
/* services menu grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);border:4px solid var(--ink);background:var(--ink);gap:4px}
.svc{background:var(--cream);padding:26px 24px 24px;display:flex;flex-direction:column;gap:10px;position:relative;transition:background .15s,color .15s}
.svc .n{position:absolute;top:14px;right:18px;font:400 28px/1 var(--px);color:var(--mut)}
.svc svg{width:56px;height:56px;shape-rendering:crispEdges;fill:var(--ink)}
.svc h3{font:700 22px/1.2 var(--sans);margin:6px 0 0}
.svc p{margin:0;font-size:17px;color:var(--mut);flex:1}
.svc .pr{font:400 22px/1 var(--px);border-top:2px dashed currentColor;padding-top:10px;color:var(--ink)}
.svc:hover,.svc:focus-within{background:var(--frame);color:var(--cream)}
.svc:hover p,.svc:hover .n,.svc:hover .pr{color:var(--lime)}.svc:hover svg{fill:var(--lime)}
.svc.hl{background:var(--lcd)}
.sel{margin-top:18px;font:400 24px/1 var(--px);display:flex;justify-content:space-between;color:var(--mut)}
/* how - battery */
.how{background:var(--frame);color:var(--cream);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.how .lead,.how .crumb{color:#C9CFB0}
.battery{display:flex;align-items:stretch;border:5px solid var(--lime);padding:8px;gap:8px;position:relative;margin-right:20px}
.battery:after{content:"";position:absolute;right:-21px;top:50%;width:14px;height:44%;transform:translateY(-50%);background:var(--lime)}
.cell{flex:1;background:rgba(194,224,58,.08);border:2px dashed rgba(194,224,58,.35);padding:26px 24px;color:var(--cream);position:relative;overflow:hidden}
.cell:before{content:"";position:absolute;inset:0;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .7s steps(8)}
.cell>*{position:relative}
.battery.in .cell:before{transform:none}.battery.in .cell{color:var(--ink);border-color:var(--lime)}
.battery.in .cell:nth-child(2):before{transition-delay:.7s}.battery.in .cell:nth-child(3):before{transition-delay:1.4s}
.cell{transition:color .2s}.battery.in .cell:nth-child(2){transition-delay:.9s}.battery.in .cell:nth-child(3){transition-delay:1.6s}.battery.in .cell:nth-child(1){transition-delay:.3s}
.cell b{font:400 64px/1 var(--px);display:block}
.cell h3{font:700 24px/1.2 var(--sans);margin:4px 0 8px}
.cell p{margin:0;font-size:17px}
.pct{display:flex;justify-content:space-between;margin-top:22px;font:400 26px/1 var(--px);color:var(--lime)}
.promise{margin-top:40px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border:3px solid var(--lime);padding:22px 26px}
.promise strong{font-size:22px}
/* why: contacts list */
.split{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start}
.list{list-style:none;margin:0;padding:0;border:4px solid var(--ink);background:#fff;box-shadow:8px 8px 0 var(--ink)}
.list li{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:18px 22px;border-bottom:2px solid var(--ink)}
.list li:last-child{border:0}
.list li span.k{font:400 34px/1 var(--px);background:var(--lcd);display:grid;place-items:center;height:48px;border:2px solid var(--ink)}
.list b{display:block;font-size:19px}.list p{margin:2px 0 0;color:var(--mut);font-size:17px}
/* realizacje: wallpapers */
.walls{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.wall{margin:0;border:4px solid var(--ink);background:var(--frame);padding:10px;box-shadow:6px 6px 0 var(--ink)}
.wall svg{width:100%;height:auto;display:block}
.wall figcaption{font:400 24px/1 var(--px);color:var(--lime);padding:10px 4px 2px;display:flex;justify-content:space-between}
/* faq: inbox */
.inbox{border:4px solid var(--ink);background:#fff;max-width:900px}
.inbox .top{background:var(--ink);color:var(--lime);font:400 24px/1 var(--px);padding:12px 20px;display:flex;justify-content:space-between}
.inbox details{border-top:2px solid var(--ink)}
.inbox summary{cursor:pointer;list-style:none;padding:18px 20px;display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;font-weight:700;font-size:19px}
.inbox summary::-webkit-details-marker{display:none}
.inbox summary:before{content:"✉";font-size:24px;color:var(--or)}
.inbox summary:after{content:"+";font:400 30px/1 var(--px)}
.inbox details[open] summary{background:var(--lcd)}.inbox details[open] summary:after{content:"−"}
.inbox details[open] summary:before{content:"✓";color:var(--ink)}
.inbox details p{margin:0;padding:16px 20px 20px 68px;font-size:18px}
/* contact */
.contact{background:var(--lcd);border-top:4px solid var(--ink)}
.contact .lead,.contact .crumb{color:var(--frame)}
.mail{display:inline-block;margin-top:22px;font:700 clamp(20px,2.4vw,30px)/1.2 var(--sans);background:var(--ink);color:var(--lime);padding:12px 18px;text-decoration:none;word-break:break-all;box-shadow:5px 5px 0 var(--cream)}
.mail:hover{background:var(--or);color:var(--ink)}
.bub{width:min(320px,80%);margin-top:40px}
.compose{border:4px solid var(--ink);background:var(--cream);box-shadow:8px 8px 0 var(--ink)}
.compose .top{background:var(--ink);color:var(--lime);font:400 24px/1 var(--px);padding:12px 18px;display:flex;justify-content:space-between}
.compose form{padding:22px;display:grid;gap:14px}
label{font:400 22px/1 var(--px);display:block;margin-bottom:6px}
input,select,textarea{width:100%;font:400 18px/1.4 var(--sans);padding:12px 14px;border:3px solid var(--ink);background:#fff;color:var(--ink);border-radius:0}
textarea{min-height:130px;resize:vertical}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:16px}.chk input{width:22px;height:22px;flex:none;margin-top:2px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cnt{font:400 22px/1 var(--px);color:var(--mut)}
button.key{cursor:pointer}
.fmsg{font:400 22px/1.2 var(--px);min-height:1em;margin:0}
footer{background:var(--ink);color:var(--cream);padding:40px 0;font-size:16px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer img{height:70px;width:auto}
footer nav{display:flex;gap:18px;font:400 22px/1 var(--px)}footer nav a{text-decoration:none;color:var(--lime)}
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}.rv.in{opacity:1;transform:none}
.legal{padding:70px 0;max-width:820px}.legal h2{font-size:26px;margin-top:34px}
@media (max-width:1060px){.nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;background:var(--frame);padding:10px 20px 20px;border-bottom:4px solid var(--ink)}.nav.open{display:flex}.menubtn{display:block}.bar .bat{display:none}.nav a{font-size:28px;padding:10px 12px}
.grid{grid-template-columns:repeat(2,1fr)}.hero .wrap,.split{grid-template-columns:1fr;gap:40px}.walls{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.pct,.wall figcaption span+span{display:none}body{font-size:17px}.wrap{padding:0 18px}.hero{padding:32px 0 48px}.screen{}section{padding:64px 0}.num{font-size:110px}
.battery{flex-direction:column;margin-right:0;margin-bottom:20px}.battery:after{right:auto;left:50%;top:auto;bottom:-21px;width:44%;height:14px;transform:translateX(-50%)}.cell:before{transform:scaleY(0);transform-origin:top}
.walls{grid-template-columns:1fr 1fr;gap:12px}.wall{padding:6px;box-shadow:4px 4px 0 var(--ink)}.wall figcaption{font-size:19px}.sms{max-width:100%}.brand span{display:none}.inbox details p{padding-left:20px}}
@media (max-width:420px){.grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.sms,.keys,.rv,.screen .load span i{opacity:1!important;transform:none!important}}
/* ===== C: merge A (dark Y2K) + B (cream LCD) ===== */
:root{--chrome:linear-gradient(180deg,#FFFFFF 0%,#F3F1E4 38%,#A9AD92 50%,#FBFAF2 62%,#D6D9C2 100%)}
.bar .wrap{height:84px}.brand img{height:62px}.nav{top:84px}
html{scroll-padding-top:96px}
.dark{background:var(--ink);color:var(--cream);background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),radial-gradient(900px 500px at 85% 0,rgba(155,187,14,.16),transparent 60%);background-size:44px 44px,44px 44px,auto}
.dark .lead,.dark .crumb{color:#C9CDB4}
.dark h2{background:var(--chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.hero{border-bottom:0;padding:72px 0 88px}
.hero .screen{position:relative}
.hero .glow{width:100%;max-width:560px;margin:0 auto;filter:drop-shadow(0 0 34px rgba(182,216,44,.35)) drop-shadow(0 24px 40px rgba(0,0,0,.6))}
.hero .screen .load{color:var(--lime);max-width:560px;margin:14px auto 0}.hero .screen .load span{border-color:var(--lime)}.hero .screen .load span i{background:var(--lime)}
.hero .kicker{color:var(--lime)}
.hero .sms{border-color:var(--lime);box-shadow:5px 5px 0 rgba(194,224,58,.35);color:var(--ink)}
.hero .sms.in-l{background:var(--cream)}
.hero .sms.out{border-color:var(--ink);box-shadow:0 0 24px -4px rgba(194,224,58,.55)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;font:700 17px/1 var(--sans);cursor:pointer;border:0;text-decoration:none;transition:transform .2s}
.btn-aqua{color:#16210E;background:linear-gradient(180deg,#E6F7A0 0%,#B6D82C 48%,#93B30C 52%,#BFE03E 100%);box-shadow:inset 0 1px 0 #fff,0 10px 30px -8px rgba(155,187,14,.55),0 0 0 1px rgba(14,20,10,.35)}
.btn-ghost{color:var(--cream);border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06)}
.btn:hover{transform:translateY(-2px)}
.burst{position:absolute;z-index:3;width:140px;height:140px;display:grid;place-items:center;text-align:center;font:700 15px/1.1 var(--sans);color:#2A1604;animation:spin 18s linear infinite}
.burst svg{position:absolute;inset:0;width:100%;height:100%}.burst span{position:relative;animation:spin 18s linear infinite reverse}
.burst.b1{top:-70px;right:-20px}.burst.b2{top:-56px;right:-30px;width:120px;height:120px;color:#13270A;font-size:14px}
@keyframes spin{to{transform:rotate(360deg)}}
.tick{background:var(--lcd);border-block:4px solid var(--ink)}
.how{background-color:var(--frame)}
.win{border-radius:12px;background:#1A2613;border:1px solid rgba(255,255,255,.14);box-shadow:8px 8px 0 var(--ink);overflow:visible;position:relative;margin-top:36px}
.win-t{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:linear-gradient(180deg,#5E7A22,#3F5716 50%,#334812);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);font:700 15px/1.2 var(--sans);color:#fff;border-radius:12px 12px 0 0}
.win-t .dots{display:flex;gap:5px}.win-t .dots i{width:18px;height:18px;border-radius:4px;background:linear-gradient(180deg,#fff,#DCE0C6);border:1px solid rgba(0,0,0,.25)}.win-t .dots i:last-child{background:linear-gradient(180deg,#FF9A62,#E04A0A)}
.win-b{padding:24px;border-radius:0 0 12px 12px}
.term{font:400 23px/1.35 var(--px);color:var(--lime);background:#0A0F07}.term p{margin:0}.term .d{color:#C9CDB4}
.cur{animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.wall{border-color:rgba(194,224,58,.5);box-shadow:0 20px 40px -20px #000}
.contact{border-top:0}
.contact .num{color:var(--or)}
.mail{box-shadow:none;background:var(--lime);color:var(--ink);border-radius:999px}
.compose{background:var(--cream);color:var(--ink);margin-top:0;box-shadow:0 30px 60px -20px #000}
.compose form{padding:24px}
.contact .bub{width:min(300px,75%)}
footer{border-top:4px solid var(--lcd)}footer img{height:96px}
@media (max-width:1060px){.nav{top:84px}}
@media (max-width:640px){.bar .wrap{height:72px}.brand img{height:52px}.nav{top:72px}.burst.b1{width:104px;height:104px;font-size:12px;right:-8px;top:-56px}.burst.b2{width:96px;height:96px;font-size:12px;right:-6px;top:-48px}.hero{padding:40px 0 60px}}
@media (prefers-reduced-motion:reduce){.burst,.burst span,.cur{animation:none!important}}
/* services polish + prices */
.svc .ic{width:68px;height:68px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(160deg,#C9E64A,#93B20D);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(0,0,0,.12),0 6px 14px -6px rgba(31,45,22,.5);border:2px solid var(--ink)}
.svc .ic svg{width:40px;height:40px;fill:var(--frame)}
.svc:hover .ic svg{fill:var(--frame)}
.svc .pr{font:400 20px/1.1 var(--px);color:var(--mut);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.svc .pr b{font:700 22px/1.1 var(--sans);color:var(--ink)}
.svc:hover .pr b{color:var(--lime)}
.svc h3{min-height:2.4em}
.pnote{margin:18px 0 0;font-size:16px;color:var(--mut)}
.wall svg{width:100%;height:auto;display:block;border-radius:6px}
.wall{padding:8px;border-radius:10px;border:2px solid rgba(194,224,58,.35);background:#1A2613}
@media (max-width:640px){.svc h3{min-height:0}}
/* carousel */
.car{position:relative;outline:none}.car:focus-visible{outline:3px solid var(--or);outline-offset:6px}
.car-view{overflow:hidden;padding:6px 0 14px}
.car-track{list-style:none;margin:0;padding:0;display:flex;gap:22px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.car-slide{flex:0 0 calc((100% - 44px)/3)}
.car-card{display:block;text-decoration:none;color:var(--cream);background:#1A2613;border:2px solid rgba(194,224,58,.35);border-radius:12px;padding:8px;transition:transform .2s,border-color .2s}
.car-card:hover{transform:translateY(-4px);border-color:var(--lime)}
.car-card img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;border-radius:6px}
.car-cap{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:12px 6px 4px}.car-cap b{font-size:18px}.car-cap small{font:400 20px/1 var(--px);color:var(--lime);white-space:nowrap}
.car-ctl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px}
.pxbtn{width:52px;height:52px;display:grid;place-items:center;background:var(--lime);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 #000;font:400 22px/1 var(--px);cursor:pointer;border-radius:0}
.pxbtn:hover{background:var(--or)}.pxbtn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}.pxbtn:disabled{opacity:.35;cursor:default}
.car-dots{display:flex;gap:10px}.car-dots button{width:16px;height:16px;border:2px solid var(--lime);background:transparent;padding:0;cursor:pointer}
.car-dots button[aria-current=true]{background:var(--lime)}
.car-status{font:400 22px/1 var(--px);color:var(--lime);min-width:52px;text-align:center}
.car-more{text-align:center;margin:34px 0 0}.car-more .btn{font-size:19px;padding:18px 34px}
/* gallery page */
.rhead{padding:70px 0 40px}.chromeh{font:700 clamp(40px,5vw,64px)/1 var(--sans);margin:0;background:var(--chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gsec{padding:56px 0 96px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.chip{font:700 17px/1 var(--sans);padding:12px 18px;border:3px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.chip span{font:400 19px/1 var(--px);color:var(--mut);margin-left:4px}
.chip[aria-pressed=true]{background:var(--ink);color:var(--lime)}.chip[aria-pressed=true] span{color:var(--lime)}
.gal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.gcard{display:block;width:100%;padding:0;text-align:left;cursor:pointer;border:3px solid var(--ink);background:#fff;box-shadow:6px 6px 0 var(--ink);transition:transform .15s,box-shadow .15s;font:inherit;color:var(--ink)}
.gcard:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.gcard img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;display:block;border-bottom:3px solid var(--ink)}
.gcap{display:block;padding:14px 16px}.gcap small{display:block;font:400 19px/1 var(--px);color:var(--mut);margin-bottom:4px}.gcap b{font-size:19px}
.empty{grid-column:1/-1;font:400 26px/1.3 var(--px)}
.gcta{margin-top:56px;border-color:var(--ink)}
.lb{position:fixed;inset:0;z-index:100;background:rgba(14,20,10,.92);display:grid;place-items:center;padding:20px}
.lb[hidden]{display:none}
.lb-box{position:relative;width:min(1100px,100%);max-height:100%;overflow:auto;background:var(--cream);border:4px solid var(--lime);box-shadow:10px 10px 0 #000}
.lb-x{position:absolute;top:10px;right:10px;z-index:2}
.lb-media{position:relative;background:var(--ink)}.lb-img{width:100%;max-height:68vh;object-fit:contain;display:block}
.lb-p,.lb-n{position:absolute;top:50%;transform:translateY(-50%)}.lb-p{left:10px}.lb-n{right:10px}
.lb-th{display:flex;gap:8px;padding:0 20px}.lb-th:not(:empty){padding-top:12px}.lb-th button{padding:0;border:2px solid var(--ink);width:80px;cursor:pointer}.lb-th img{width:100%;display:block}
.lb-info{padding:18px 24px 24px}.lb-c{font:400 20px/1 var(--px);color:var(--mut)}.lb-t{font:700 28px/1.2 var(--sans);margin:4px 0 8px}.lb-d{margin:0 0 16px}
@media (max-width:1060px){.car-slide{flex-basis:calc((100% - 22px)/2)}.gal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.car-slide{flex-basis:100%}.gal{grid-template-columns:1fr}.lb{padding:8px}.pxbtn{width:46px;height:46px}.rhead{padding:44px 0 24px}}
@media (prefers-reduced-motion:reduce){.car-track{transition:none!important}}
.car-card img,.gcard img{height:auto}
.lb-img{height:auto;max-height:60vh}
.lb-th button{width:72px;height:54px;overflow:hidden;background:var(--ink)}.lb-th img{width:100%;height:100%;object-fit:cover;object-position:top}
/* featured project */
.feat{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:center;background:var(--frame);color:var(--cream);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:36px;margin-bottom:64px;border-radius:4px}
.feat-k{font:400 22px/1 var(--px);color:var(--lime);margin:0 0 8px}.feat h2{font:700 clamp(34px,4vw,52px)/1 var(--sans);margin:0;color:#E9CF8E}.feat-s{margin:6px 0 14px;color:#C9CDB4}
.feat-list{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-wrap:wrap;gap:8px}.feat-list li{font:400 20px/1 var(--px);border:2px solid var(--lime);color:var(--lime);padding:6px 10px}
.feat-tiles{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;gap:12px}
.ftile{position:relative;padding:0;border:2px solid #C9A85C;background:#F4EFE9;cursor:pointer;border-radius:6px;overflow:hidden;transition:transform .15s}
.ftile:hover{transform:translateY(-3px)}.ftile img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ftile.big{grid-column:1/-1}.ftile.big img{aspect-ratio:16/9;object-position:top}
.ftile span{position:absolute;left:8px;bottom:8px;font:400 18px/1 var(--px);background:rgba(14,20,10,.85);color:var(--lime);padding:4px 8px}
.gh{font:700 32px/1.1 var(--sans);margin:0 0 20px}
.car-card.is-proj{border-color:#C9A85C}.car-card.is-proj .car-cap small{color:#E9CF8E}
.lb-th{flex-wrap:wrap}.lb-th button[aria-current=true]{outline:3px solid var(--or);outline-offset:1px}
@media (max-width:1060px){.feat{grid-template-columns:1fr;padding:24px}}
@media (max-width:640px){.feat{padding:18px;gap:24px}.feat-tiles{grid-template-columns:1fr 1fr}.ftile.big{grid-column:1/-1}}
@media (max-width:640px){.ftile:last-child:nth-child(even){grid-column:1/-1}.ftile:last-child:nth-child(even) img{aspect-ratio:16/9}.lb-th{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.lb-th button{flex:0 0 64px;height:48px}}