/* Maintenance 2 - Service Template (Bold Outline / Neo-Brutalist). Edit colours/fonts in :root. */
:root{--bg:#f6f1e7;--ink:#111214;--blue:#2d5bff;--blue2:#dfe6ff;--lime:#d4ff3f;--white:#fff;--mut:#4d5258;
--head:"Space Grotesk",system-ui,sans-serif;--body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--ease:cubic-bezier(.2,.8,.2,1);--bd:2.5px solid var(--ink);--r:18px;--o:6px}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:1.05rem;color:var(--ink);background:var(--bg);line-height:1.65;overflow-x:hidden}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.05;margin:0 0 .5em;letter-spacing:-.03em}
h1{font-size:clamp(2.8rem,7vw,6rem)}h2{font-size:clamp(2.1rem,4.4vw,3.6rem)}h3{font-size:1.4rem;letter-spacing:-.02em}p{margin:0 0 1em;color:var(--mut)}
.container{width:min(1220px,92%);margin-inline:auto}.section{padding:clamp(60px,8vw,110px) 0}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.mk{background:linear-gradient(transparent 58%,var(--lime) 58% 92%,transparent 92%);padding:0 .08em}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border:var(--bd);border-radius:99px;background:var(--white);font:600 .9rem var(--head);margin-bottom:20px}.pill svg{width:16px;height:16px}
.lead{font-size:1.2rem;max-width:56ch}.head{max-width:700px;margin-bottom:54px}.head.c{text-align:center;margin-inline:auto}.head.c .lead{margin-inline:auto}
/* outline surface with hard offset shadow (transform only) */
.nb{position:relative;background:var(--white);border:var(--bd);border-radius:var(--r);box-shadow:var(--o) var(--o) 0 var(--ink);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.nb:hover{transform:translate(-4px,-4px);box-shadow:calc(var(--o) + 4px) calc(var(--o) + 4px) 0 var(--ink)}
.c-blue{background:var(--blue);color:#fff}.c-blue p{color:#e4eaff}.c-lime{background:var(--lime)}.c-lime p{color:#2e3320}.c-soft{background:var(--blue2)}
/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 30px;border:var(--bd);border-radius:14px;background:var(--lime);color:var(--ink);font:700 1rem var(--head);cursor:pointer;box-shadow:5px 5px 0 var(--ink);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}.btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--ink)}
.btn.bl{background:var(--blue);color:#fff}.btn.wh{background:var(--white)}.btn.block{width:100%}.btn svg{width:20px;height:20px;transition:transform .35s var(--ease)}.btn:hover svg{transform:translateX(4px) rotate(-45deg)}
.link{position:relative;display:inline-flex;gap:8px;align-items:center;font:700 1rem var(--head);padding-bottom:4px}.link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--blue);transform:scaleX(.2);transform-origin:left;transition:transform .45s var(--ease)}.link:hover::after{transform:scaleX(1)}.link svg{width:18px;height:18px;transition:transform .35s var(--ease)}.link:hover svg{transform:translate(3px,-3px)}
/* header */
.site-header{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:var(--bd)}
.bar{display:flex;align-items:center;justify-content:space-between;height:82px;gap:20px}
.logo{display:flex;align-items:center;gap:10px;font:700 1.6rem var(--head);letter-spacing:-.04em}.logo i{width:42px;height:42px;border:var(--bd);border-radius:12px;background:var(--lime);display:grid;place-items:center;transition:transform .5s var(--ease)}.logo:hover i{transform:rotate(-14deg)}
.nav{display:flex;align-items:center;gap:22px}.nav>ul{display:flex;gap:4px;list-style:none;margin:0;padding:5px;background:var(--white);border:var(--bd);border-radius:99px}
.nav a.nl{display:block;padding:9px 20px;border-radius:99px;font:600 .98rem var(--head);transition:background .3s,color .3s}.nav a.nl:hover{background:var(--blue2)}.nav a[aria-current]{background:var(--ink);color:#fff}
.menu-btn,.menu-close{display:none;width:48px;height:48px;border:var(--bd);border-radius:14px;background:var(--lime);color:var(--ink);cursor:pointer;place-items:center}
/* hero */
.hero{padding:70px 0 60px;text-align:center;position:relative;overflow:hidden}.hero h1{max-width:15ch;margin-inline:auto}.hero .lead{margin:0 auto 34px;color:var(--mut)}.cta-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.shots{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:28px;margin-top:70px;align-items:center}.shot{overflow:visible}.shot .im{overflow:hidden;border-radius:calc(var(--r) - 3px)}.shot img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1s var(--ease)}.shot:hover img{transform:scale(1.08)}.shot:nth-child(1){transform:rotate(-3deg)}.shot:nth-child(3){transform:rotate(3deg)}.shot:nth-child(2) img{aspect-ratio:1}
.shot:nth-child(1):hover{transform:rotate(-3deg) translate(-4px,-4px)}.shot:nth-child(3):hover{transform:rotate(3deg) translate(-4px,-4px)}
.sticker{position:absolute;display:grid;place-items:center;text-align:center;width:128px;height:128px;border:var(--bd);border-radius:50%;background:var(--lime);font:700 .95rem/1.1 var(--head);z-index:3;animation:spin 18s linear infinite}.sticker b{display:block;font-size:2rem}
.sticker.s1{right:3%;top:30px}@keyframes spin{to{transform:rotate(360deg)}}
.float-note{position:absolute;left:-14px;bottom:24px;padding:12px 18px;display:flex;gap:10px;align-items:center;font:700 .95rem var(--head);z-index:4}.float-note svg{color:var(--blue)}
/* ticker */
.ticker{overflow:hidden;background:var(--blue);color:#fff;border-block:var(--bd);padding:16px 0;white-space:nowrap}.track{display:inline-flex;gap:0;animation:tick 28s linear infinite}.ticker span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;font:700 1.5rem var(--head);letter-spacing:-.02em}.ticker svg{color:var(--lime);fill:var(--lime);width:22px;height:22px}
@keyframes tick{to{transform:translateX(-50%)}}.ticker.rev .track{animation-direction:reverse}
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:70px}.feat .nb{padding:28px}.feat svg{width:34px;height:34px;margin-bottom:14px}.feat h3{margin-bottom:6px}.feat p{margin:0;font-size:.96rem}
/* about */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.photo{position:relative}.photo .im{overflow:hidden;border-radius:calc(var(--r) - 3px)}.photo img{width:100%;aspect-ratio:4/4.4;object-fit:cover;transition:transform 1.1s var(--ease)}.photo:hover img{transform:scale(1.06)}.photo .sticker{left:-34px;top:-34px;right:auto;animation-duration:22s}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px}.stats .nb{padding:22px}.stats b{display:block;font:700 2.8rem/1 var(--head)}.stats span{font-weight:600;font-size:.95rem}
.ticks{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:12px}.ticks li{display:flex;gap:12px;align-items:flex-start;font-weight:600}.ticks svg{width:22px;height:22px;background:var(--lime);border:2px solid var(--ink);border-radius:7px;padding:2px;margin-top:2px}
/* services bento */
.grid{display:grid;gap:30px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.svc{padding:34px 30px;display:flex;flex-direction:column}.svc .ic{color:var(--ink);width:62px;height:62px;border:var(--bd);border-radius:18px;background:var(--white);display:grid;place-items:center;margin-bottom:24px;transition:transform .5s var(--ease)}.svc:hover .ic{transform:rotate(-10deg) scale(1.08)}.svc .ic svg{width:30px;height:30px}.svc p{flex:1}.svc.w2{grid-column:span 2}
.svc .n{position:absolute;right:24px;top:18px;font:700 1.1rem var(--head)}
/* clients */
.clients{overflow:hidden;border-block:var(--bd);padding:26px 0;background:var(--white);white-space:nowrap}.clients .track{animation-duration:34s}.cl{display:inline-flex;align-items:center;gap:12px;margin-right:56px;font:700 1.6rem var(--head);letter-spacing:-.02em;color:#7b828a}.cl svg{width:30px;height:30px}
/* reviews */
.rev{display:grid;grid-template-columns:1.1fr 1fr;gap:34px}.rev .stack{display:grid;gap:34px}.quote{margin:0;padding:34px}.quote.big{padding:clamp(30px,4vw,54px);display:flex;flex-direction:column;justify-content:space-between}.quote.big blockquote{margin:0;font:600 clamp(1.5rem,2.6vw,2.2rem)/1.25 var(--head);letter-spacing:-.02em}.quote p{color:var(--ink);font-size:1.05rem}.quote.big p{color:#fff}
.who{display:flex;gap:14px;align-items:center;margin-top:24px}.who img{width:54px;height:54px;border-radius:50%;object-fit:cover;border:var(--bd)}.who b{display:block;font-family:var(--head)}.who span{font-size:.88rem;opacity:.8}
.stars{display:flex;margin-bottom:14px}.stars svg{width:20px;height:20px;fill:var(--lime);stroke:var(--ink);stroke-width:1.5}
/* contact */
.cbox{padding:clamp(30px,5vw,64px);background:var(--blue);color:#fff;border:var(--bd);border-radius:32px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;position:relative;box-shadow:8px 8px 0 var(--ink)}
.cbox h2{color:#fff}.cbox p{color:#e4eaff}
label{display:block;font:600 .9rem var(--head);margin-bottom:8px}
input,select,textarea{width:100%;font:500 1rem var(--body);padding:14px 16px;border:var(--bd);border-radius:14px;background:var(--white);color:var(--ink);transition:box-shadow .3s}input:focus,select:focus,textarea:focus{outline:0;box-shadow:0 0 0 4px var(--lime)}
.panel{padding:clamp(24px,3.5vw,40px);color:var(--ink)}.panel h3{color:var(--ink)}.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.fields .full{grid-column:1/-1}
.info{display:grid;gap:20px;margin-top:28px}.info div{display:flex;gap:16px;align-items:center}.info .ic{width:54px;height:54px;border:var(--bd);border-radius:16px;background:var(--lime);color:var(--ink);display:grid;place-items:center}.info b{display:block;font-family:var(--head)}.info p{margin:0}
.plain .info b{color:var(--ink)}.plain .info p{color:var(--mut)}
/* faq */
.faqg{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
details{background:var(--white);border:var(--bd);border-radius:var(--r);transition:background .3s}details[open]{background:var(--lime)}summary{cursor:pointer;padding:20px 24px;font:700 1.15rem var(--head);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;letter-spacing:-.01em}summary::-webkit-details-marker{display:none}
summary::after{content:"+";width:34px;height:34px;border:var(--bd);border-radius:50%;background:var(--white);display:grid;place-items:center;font-size:1.3rem;transition:transform .4s var(--ease);flex:none}details[open] summary::after{transform:rotate(45deg)}details p{padding:0 24px 22px;margin:0;color:var(--ink)}
/* inner hero */
.phero{background:var(--lime);border-bottom:var(--bd);padding:80px 0;position:relative;overflow:hidden}.phero .container{position:relative;z-index:2}.phero .lead{color:#2e3320}
.phero::before{content:"";position:absolute;right:-60px;top:-60px;width:300px;height:300px;border:var(--bd);border-radius:50%;background:var(--blue)}.phero::after{content:"";position:absolute;right:140px;bottom:-70px;width:150px;height:150px;border:var(--bd);border-radius:30px;background:var(--white);transform:rotate(18deg)}
.crumbs{display:inline-flex;gap:8px;padding:8px 18px;border:var(--bd);border-radius:99px;background:var(--white);font:600 .9rem var(--head);margin-top:12px}.crumbs a:hover{color:var(--blue)}
/* services page */
.rowx{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:90px}.rowx:nth-child(even) .photo{order:2}
.step{padding:30px}.step b{display:grid;place-items:center;width:58px;height:58px;border:var(--bd);border-radius:50%;background:var(--lime);font:700 1.5rem var(--head);margin-bottom:18px}
.plan{padding:36px 32px}.plan .pr{font:700 3.6rem/1 var(--head);letter-spacing:-.04em}.plan ul{list-style:none;padding:0;margin:22px 0 28px;display:grid;gap:11px}.plan li{display:flex;gap:10px;align-items:center;font-weight:600}.plan li svg{width:20px;height:20px;background:var(--lime);border:2px solid var(--ink);border-radius:6px;padding:2px;color:var(--ink)}.plan.c-blue li{color:#fff}.plan.c-blue h3,.plan.c-blue .pr{color:#fff}
/* blog */
.post{overflow:visible}.post .m{margin:14px;overflow:hidden;border:var(--bd);border-radius:calc(var(--r) - 5px);aspect-ratio:16/10}.post .m img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}.post:hover .m img{transform:scale(1.08)}
.post .body{padding:6px 26px 26px}.meta{display:inline-block;padding:4px 12px;border:2px solid var(--ink);border-radius:99px;background:var(--lime);font:700 .8rem var(--head);margin-bottom:12px}.post details{border:0;background:none;border-radius:0}.post details[open]{background:none}.post summary{padding:0;font:700 1rem var(--head);color:var(--blue)}.post summary::after{display:none}.post details p{padding:12px 0 0}
.pager{display:flex;justify-content:center;gap:12px;margin-top:56px}.pager a{width:52px;height:52px;border:var(--bd);border-radius:14px;display:grid;place-items:center;background:var(--white);font:700 1.1rem var(--head);transition:transform .3s var(--ease),background .3s}.pager a:hover{transform:translateY(-4px)}.pager a[aria-current]{background:var(--ink);color:#fff}
.team .ph{margin:14px;overflow:hidden;border:var(--bd);border-radius:calc(var(--r) - 5px)}.team img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform 1s var(--ease)}.team:hover img{transform:scale(1.08)}.team .tb{padding:6px 26px 26px}.team span{font:600 .95rem var(--head);color:var(--blue)}
.iframe{width:100%;height:100%;min-height:340px;border:var(--bd);border-radius:var(--r);background:var(--white)}
/* footer */
.site-footer{background:var(--ink);color:#c5cad0;padding:80px 0 26px;border-top:var(--bd);margin-top:40px}.site-footer h4{color:var(--lime);font-size:1.15rem;margin-bottom:18px}.site-footer p{color:#c5cad0}.site-footer .logo{color:#fff}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:44px;border-bottom:2px solid #33363b}.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}.site-footer ul a{transition:padding .3s,color .3s}.site-footer ul a:hover{padding-left:8px;color:var(--lime)}
.news{display:flex;gap:10px}.news input{background:#1d1f23;color:#fff;border-color:#4a4e55}.news .btn{padding:0 18px}.news .btn{box-shadow:4px 4px 0 var(--lime)}.copy{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:24px;font-size:.92rem}
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}.js .reveal.in{opacity:1;transform:none}
@media(max-width:1024px){.split,.rowx,.rev,.cbox,.faqg{grid-template-columns:1fr}.rowx:nth-child(even) .photo{order:0}.feat,.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.svc.w2{grid-column:span 2}.fgrid{grid-template-columns:1fr 1fr}.photo{margin-left:20px}.cbox{gap:40px}}
@media(max-width:900px){.menu-btn{display:grid}
.js .nav{position:fixed;inset:0;z-index:80;background:var(--blue);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:24px;padding:100px 28px 30px;overflow:auto;opacity:0;visibility:hidden;transform:translateY(-16px);transition:all .45s var(--ease)}
.js .nav.open{opacity:1;visibility:visible;transform:none}.js .menu-close{display:grid;position:absolute;top:18px;right:18px}.nav>ul{flex-direction:column;border-radius:26px;padding:10px}.nav a.nl{font-size:1.25rem;padding:14px 22px}
.no-js .bar{flex-wrap:wrap;height:auto;padding:14px 0}.no-js .nav{width:100%;flex-direction:column;align-items:stretch}.no-js .nav>ul{flex-wrap:wrap;border-radius:24px}.no-js .menu-btn{display:none}}
@media(max-width:640px){.g2,.g3,.g4,.feat,.fields,.stats{grid-template-columns:1fr}.svc.w2{grid-column:auto}.shots{grid-template-columns:1fr 1fr}.shot:nth-child(2){grid-column:span 2;order:-1}.sticker{width:96px;height:96px;font-size:.8rem}.sticker b{font-size:1.5rem}.fgrid{grid-template-columns:1fr}.hero{padding-top:50px}.news{flex-direction:column}.news .btn{padding:14px}.photo .sticker{left:-14px;top:-24px}.float-note{display:none}.phero::before{width:200px;height:200px}.phero::after{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.js .reveal{opacity:1;transform:none}.ticker,.clients{overflow-x:auto}}