/* klikalna.pl | Wszystkie style lokalne. Breakpointy: 1100 / 800 / 520 px. */
:root{--paper:#f7f3ea;--white:#fff;--ink:#25282f;--muted:#62656c;--line:#dedbd2;--purple:#2f5bff;--purple-dark:#2448cf;--lavender:#eaf0ff;--lime:#ffe791;--yellow:#fff0b9;--radius:20px;--max:1320px;--ease:cubic-bezier(.22,1,.36,1)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:112px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body.modal-open{overflow:hidden}
::selection{background:var(--lime);color:var(--ink)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.6}
img,svg{max-width:100%}
img{display:block;height:auto}
svg{vertical-align:middle}
button{border:0}
[hidden]{display:none!important}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{font-weight:600;line-height:1.08;letter-spacing:-.055em}
h1{font-size:clamp(3.3rem,6.4vw,6rem)}
h2{font-size:clamp(2.3rem,4.3vw,4.15rem)}
h3{font-size:1.75rem}
p{color:var(--muted)}
:focus-visible{outline:3px solid var(--purple);outline-offset:5px}
.container{width:min(var(--max),calc(100% - 112px));margin-inline:auto}
.section{padding-block:110px}
.section-top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:48px}
.section-top p{max-width:370px}
.eyebrow,.mono{font-family:"Courier New",monospace;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--muted);margin-bottom:24px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--purple)}
.eyebrow.light{color:#d5d3e0}
.eyebrow.light::before{background:var(--lime)}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:100px;padding:7px 13px;font-size:12px}
.button{display:inline-flex;justify-content:center;align-items:center;gap:26px;background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:9px;padding:17px 24px;min-height:56px;font-size:14px;font-weight:600;line-height:1.2;transition:background .2s,transform .2s,box-shadow .2s}
.button svg,.icon{width:22px;height:22px;flex:none}
.button:hover{background:var(--purple);border-color:var(--purple);transform:translateY(-2px);box-shadow:0 5px 0 #2f5bff18}
.button.purple{background:var(--purple);border-color:var(--purple)}
.button.purple:hover{background:var(--purple-dark)}
.button.lime{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.button.lime:hover{background:#c4ee7f}
.button.outline{background:transparent;color:var(--ink);border-color:#bdbfb5}
.button.outline:hover{border-color:var(--ink);box-shadow:none}
.button.small{min-height:44px;padding:12px 17px;gap:24px;font-size:12px}
.button.text{background:transparent;color:var(--ink);border:0;padding-inline:0;box-shadow:none}
.button.text:hover{color:var(--purple);transform:none}
.button-row{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.hand{font-family:Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.025em}
.skip-link{position:fixed;top:-100px;left:16px;z-index:200;padding:12px 20px;background:var(--ink);color:white;border-radius:8px}
.skip-link:focus{top:10px}
.site-header{position:sticky;top:0;z-index:50;background:#f7f3eaf2;backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-shell{height:88px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.logo{font-size:30px;font-weight:800;line-height:1;letter-spacing:-1.8px;display:inline-flex;align-items:center;gap:3px}
.logo i{font-style:normal;color:var(--purple)}
.logo-mark{width:22px;height:28px;margin-left:3px;transform:rotate(-12deg)}
.nav-links{display:flex;align-items:center;gap:32px;margin-left:auto}
.nav-links a{font-size:13px;position:relative;padding-block:14px}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--purple)}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;bottom:3px;width:5px;height:5px;background:var(--purple);border-radius:50%;left:calc(50% - 2px)}
.menu-toggle{display:none;background:transparent;min-width:46px;min-height:46px;border:1px solid var(--line);border-radius:8px}
.header-cta{margin-left:16px}
.hero{padding-top:68px;padding-bottom:58px;display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:12px;min-height:695px}
.hero h1{font-size:clamp(3.3rem,6.1vw,5.85rem);line-height:1.02;letter-spacing:-.065em}
.hero h1 em{font-style:normal;color:var(--purple);position:relative;display:inline-block}
.hero h1 em::after{content:"";position:absolute;left:-2%;bottom:-6%;width:104%;height:15%;border:3px solid var(--purple);border-radius:50%;transform:rotate(-3deg);border-top-color:transparent;border-left-color:transparent;border-right-color:transparent}
.hero-copy>p{max-width:420px;font-size:16px;line-height:1.75;margin-top:30px}
.hero-copy .button-row{margin-top:32px}
.hero-sub{margin-top:24px;display:flex;gap:8px;align-items:center;color:var(--muted);font-size:11px}
.hero-sub svg{width:16px;height:16px}
.hero-art{position:relative;min-width:0;height:550px}
.art-grid{position:absolute;inset:8% -1% 2% 0;background-image:radial-gradient(#c8c9c1 .9px,transparent .9px);background-size:18px 18px;border-radius:46%}
.sketch-label{position:absolute;top:18px;left:32px;font-size:20px;transform:rotate(-8deg);color:var(--muted)}
.sketch-arrow{position:absolute;top:28px;left:138px;width:160px;height:68px;transform:rotate(5deg)}
.browser-card{position:absolute;border:1px solid #282a2660;border-radius:13px;overflow:hidden;background:white;box-shadow:0 18px 35px #2425220c}
.browser-bar{height:34px;border-bottom:1px solid #282a2630;display:flex;align-items:center;gap:5px;padding:0 12px;background:#ffffff80}
.browser-bar b{height:5px;width:5px;border:1px solid #8b8d87;border-radius:50%}
.browser-bar span{font-size:8px;color:#72736e;margin:auto;font-family:"Courier New",monospace}
.wire-browser{width:73%;top:105px;left:0;transform:rotate(-9deg);border:1.5px solid #5c5e55;border-radius:12px 16px 10px 14px;background:#f7f3ea}
.wire-content{height:235px;padding:22px}
.wire-head{display:flex;justify-content:space-between;font-family:"Courier New",monospace;font-size:12px;border-bottom:1px dashed #a4a79c;padding-bottom:12px}
.wire-body{display:flex;gap:16px;margin-top:23px;align-items:center}
.wire-lines{width:56%;display:grid;gap:12px}
.wire-lines i{display:block;background:#d4d6ca;height:6px;border-radius:2px}
.wire-lines i:first-child{height:12px;width:90%}
.wire-lines i:nth-child(3){width:76%}
.wire-lines i:last-child{height:25px;width:55%;background:transparent;border:1px dashed #8b8d83}
.wire-image{width:120px;height:105px;position:relative;border:1px solid #8b8d83;border-radius:50% 50% 0 0}
.wire-image::before,.wire-image::after{content:"";position:absolute;left:50%;top:0;height:100%;width:1px;background:#a2a59a;transform:rotate(45deg)}
.wire-image::after{transform:rotate(-45deg)}
.final-browser{width:84%;top:183px;right:-1%;transform:rotate(5deg);background:#eaf0ff;border-color:#abbffa;box-shadow:10px 23px 60px #3d315c1b;transition:transform .6s var(--ease),background .5s}
.final-content{height:268px;padding:22px 25px;background:#eaf0ff}
.mini-nav{display:flex;justify-content:space-between;font-size:8px;align-items:center}
.mini-brand{font-size:20px;font-weight:700;letter-spacing:-1.5px}
.mini-nav>span:last-child{padding:5px 9px;background:#fff9;border-radius:20px}
.mini-layout{display:flex;align-items:center;gap:12px;margin-top:28px}
.mini-copy{width:57%}
.mini-copy strong{font-size:38px;line-height:1.03;letter-spacing:-2px;display:block;font-weight:500}
.mini-copy p{font-size:8px;max-width:145px;margin-top:12px;line-height:1.5}
.mini-cta{display:inline-flex;gap:18px;align-items:center;background:#29262f;color:white;padding:7px 12px;font-size:8px;border-radius:4px;margin-top:14px}
.mini-arch{width:40%;height:158px;border-radius:90px 90px 0 0;background:#c2b4f1;position:relative;overflow:hidden}
.mini-arch::before{content:"";position:absolute;left:12%;top:20%;width:78%;aspect-ratio:1;border-radius:50%;background:#ffd23f;box-shadow:0 8px 30px #3a413c20}
.mini-arch::after{content:"";position:absolute;width:90%;height:45%;left:20%;bottom:-5%;background:#5e4c92;transform:rotate(-24deg);border-radius:45% 40% 0 0}
.art-chip{position:absolute;z-index:2;background:var(--lime);border:1px solid #b3ce7d;padding:10px 14px;font-size:11px;font-weight:600;border-radius:7px;bottom:35px;left:30px;transform:rotate(-6deg)}
.art-chip svg{width:16px;height:16px;margin-right:4px}
.art-cursor{position:absolute;right:0;bottom:66px;color:var(--purple);z-index:3;transform:rotate(-8deg)}
.art-cursor svg{width:40px;height:40px;display:block}
.art-cursor span{font-size:10px;background:var(--purple);color:white;padding:5px 9px;border-radius:4px;margin-left:24px;display:block;transform:rotate(8deg)}
.art-switch{display:flex;position:absolute;top:62px;right:10px;border:1px solid #c8c7be;background:var(--paper);border-radius:30px;padding:4px;z-index:3;transform:rotate(5deg)}
.art-switch button{background:transparent;border-radius:30px;font-size:10px;padding:8px 12px;color:var(--muted)}
.art-switch button[aria-pressed="true"]{background:var(--ink);color:white}
.hero-art.is-sketch .final-browser{transform:rotate(0deg) translateY(10px);background:#f7f3ea;border-style:dashed;box-shadow:0 8px 20px #24252208}
.hero-art.is-sketch .final-content{background:#f7f3ea}
.hero-art.is-sketch .mini-arch{background:transparent;border:1px dashed var(--ink)}
.hero-art.is-sketch .mini-arch::before,.hero-art.is-sketch .mini-arch::after{background:#e4e4de;box-shadow:none;border:1px dashed var(--ink)}
.hero-art.is-sketch .mini-cta{background:#e6e6df;color:var(--ink);border:1px dashed var(--ink)}
.hero-art.is-sketch .mini-copy strong{font-family:Georgia,serif;font-style:italic;font-size:34px}
.art-caption{position:absolute;bottom:0;right:12px;font-size:8px;color:#73756d;letter-spacing:.08em}
.custom-hero{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:5}
.expertise-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;border-block:1px solid var(--line);padding:27px 0;font-size:13px}
.expertise-strip span:not(.mono){display:flex;align-items:center;gap:28px}
.expertise-strip span:not(.mono)::before{content:"✳";font-size:18px;color:var(--purple)}
.expertise-strip .mono{color:var(--muted);font-size:9px}
.intro-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:70px}
.intro-grid>div>p{font-size:19px;max-width:600px;line-height:1.7}
.intro-grid>div>p strong{font-weight:500;color:var(--ink)}
.service-list{border-top:1px solid var(--line);margin-top:48px}
.service-row{display:grid;grid-template-columns:45px 1fr 1fr 46px;align-items:center;gap:25px;border-bottom:1px solid var(--line);padding:30px 0;transition:padding .25s,background .25s}
.service-row:hover{padding-inline:12px;background:#eaf0ff50}
.service-row .mono{font-size:10px;color:var(--muted)}
.service-row h3{font-size:25px;letter-spacing:-.04em}
.service-row p{font-size:13px;max-width:320px}
.round-arrow{width:44px;height:44px;border:1px solid var(--line);display:grid;place-items:center;border-radius:50%;transition:background .2s}
.round-arrow svg{width:19px;height:19px}
.service-row:hover .round-arrow{background:var(--purple);color:white;border-color:var(--purple)}
.work-section{background:#eeeee7;border-block:1px solid var(--line)}
.empty-work{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:38px 0 10px}
.portfolio-art{height:350px;position:relative;display:grid;place-items:center}
.portfolio-frame{border:1px solid #a4a69c;border-radius:12px;position:absolute;width:77%;height:240px;background:#f7f6f0;transform:rotate(-6deg)}
.portfolio-frame::before{content:"";height:30px;border-bottom:1px solid #b8baaf;display:block}
.portfolio-frame.front{transform:rotate(5deg);background:var(--paper);width:75%;height:250px;left:16%;top:60px;display:grid;place-items:center;border-style:dashed}
.portfolio-frame.front::before{position:absolute;top:0;width:100%}
.big-plus{font-size:86px;line-height:1;font-weight:300;color:var(--purple)}
.portfolio-sticky{position:absolute;left:0;top:15px;z-index:2;width:125px;background:var(--yellow);padding:20px 18px;font-size:19px;line-height:1.1;transform:rotate(-13deg);box-shadow:0 6px 14px #00000008}
.portfolio-art>.mono{position:absolute;bottom:5px;font-size:9px;color:var(--muted)}
.empty-work-copy{max-width:415px}
.empty-work-copy .pill{font-family:"Courier New",monospace;font-size:10px;margin-bottom:20px}
.empty-work-copy h3{font-size:36px;margin-bottom:20px}
.empty-work-copy p{font-size:14px;margin-bottom:24px}
.section-note{display:flex;gap:10px;align-items:center;font-size:11px;color:var(--muted);margin-top:25px}
.process-preview{display:grid;grid-template-columns:.9fr 1.2fr;gap:70px;align-items:center}
.process-preview p{margin-top:26px;max-width:390px}
.process-preview .button{margin-top:30px}
.mini-process{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:45px 60px;padding:30px}
.mini-process::before{content:"";position:absolute;inset:60px 70px;border:1.5px dashed #aaa9ba;border-left:0;border-radius:0 55px 55px 0}
.mini-node{position:relative;background:var(--paper);border:1px solid #c0c2b8;border-radius:11px;padding:20px;min-height:126px;transform:rotate(-3deg);text-align:left;transition:transform .2s,background .2s}
.mini-node:nth-child(2){transform:rotate(4deg);background:var(--lavender)}
.mini-node:nth-child(3){transform:rotate(2deg);background:var(--lime);grid-column:2}
.mini-node:nth-child(4){transform:rotate(-4deg);grid-column:1;grid-row:2}
.mini-node:hover{transform:rotate(0deg) translateY(-3px);background:var(--white)}
.mini-node span{font-family:"Courier New",monospace;font-size:10px;display:block;margin-bottom:16px;color:var(--muted)}
.mini-node strong{font-size:19px;letter-spacing:-.04em;font-weight:500}
.mini-node svg{width:20px;height:20px;position:absolute;right:15px;top:18px}
.values-section{background:#242423;color:var(--paper)}
.values-section p{color:#bfc1b7}
.values-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:48px;margin-top:64px}
.value{border-top:1px solid #51534c;padding-top:24px}
.value>span{font-family:"Courier New",monospace;color:var(--lime);font-size:12px}
.value h3{font-size:25px;margin-top:32px;margin-bottom:16px}
.value p{font-size:14px}
.faq-grid{display:grid;grid-template-columns:.85fr 1.3fr;gap:90px}
.faq-grid>div>p{margin-top:24px;max-width:320px}
.faq-list{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:24px 45px 24px 0;list-style:none;font-size:17px;position:relative;line-height:1.45;letter-spacing:-.02em}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:19px;font-size:26px;font-weight:300;color:var(--purple)}
details[open] summary::after{content:"−"}
details>p{font-size:14px;padding:0 40px 24px 0;line-height:1.8}
.cta-section{padding-bottom:80px}
.cta-box{position:relative;background:var(--lavender);border:1px solid #d3ddfa;padding:64px 68px;border-radius:20px;display:flex;justify-content:space-between;align-items:center;gap:40px;overflow:hidden}
.cta-box h2{font-size:clamp(2.5rem,4.6vw,4.2rem);max-width:650px}
.cta-box h2 span{color:var(--purple)}
.cta-box p{margin-top:18px;max-width:440px;font-size:14px}
.cta-box .button{white-space:nowrap}
.site-footer{border-top:1px solid var(--line);padding:45px 0 25px}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;padding-bottom:50px}
.footer-top p{margin-top:16px;font-size:12px}
.footer-links{display:flex;gap:30px;flex-wrap:wrap;font-size:12px}
.footer-links a:hover{color:var(--purple)}
.footer-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted)}
.footer-bottom a{text-decoration:underline;text-underline-offset:3px}
.footer-sign{font-size:15px;transform:rotate(-3deg);color:var(--purple)}
.page-hero{padding-top:65px;padding-bottom:65px}
.page-hero .lead{max-width:570px;font-size:17px;margin-top:26px}
.page-hero h1 em{font-style:normal;color:var(--purple)}
.split-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:end}
.split-hero>p{font-size:15px;max-width:360px;padding-bottom:5px}
.breadcrumb{display:flex;gap:9px;margin-bottom:34px;font-size:10px;color:var(--muted)}
.breadcrumb a:hover{color:var(--purple)}
.process-toolbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:18px;gap:20px}
.process-toolbar p{font-size:12px}
.process-toolbar .mono{font-size:10px;color:var(--muted)}
.process-board{position:relative;margin-top:22px;background-image:radial-gradient(#d4d5cc .8px,transparent .8px);background-size:18px 18px;border:1px solid var(--line);border-radius:16px;padding:50px 44px 60px}
.process-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:75px 40px;z-index:2}
.process-node{position:relative;background:var(--paper);border:1px solid #b6b9ad;border-radius:12px;padding:24px 20px;min-height:190px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;box-shadow:2px 3px 0 #e5e6dc;transition:transform .25s,background .25s,border-color .25s}
.process-node:hover{transform:translateY(-6px);border-color:var(--purple);background:var(--lavender)}
.process-node .node-top{display:flex;width:100%;align-items:center;justify-content:space-between}
.process-node .node-top>.mono{font-size:10px;color:var(--muted)}
.process-node .node-icon{width:32px;height:32px;color:var(--purple)}
.process-node strong{font-size:20px;line-height:1.2;font-weight:500;letter-spacing:-.04em;margin-top:25px}
.process-node .node-bottom{font-size:10px;color:var(--muted);display:flex;justify-content:space-between;width:100%;align-items:center;margin-top:12px}
.process-node .node-bottom svg{width:15px;height:15px}
.process-node:nth-child(4){background:var(--lavender);transform:rotate(2deg)}
.process-node:nth-child(4):hover{transform:rotate(0) translateY(-6px)}
.process-node:nth-child(5){grid-column:4;grid-row:2;background:var(--lavender)}
.process-node:nth-child(6){grid-column:3;grid-row:2}
.process-node:nth-child(7){grid-column:2;grid-row:2}
.process-node:nth-child(8){grid-column:1;grid-row:2;background:var(--lime);transform:rotate(-2deg)}
.process-node:nth-child(8):hover{transform:rotate(0) translateY(-6px)}
.process-connectors{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.process-connectors .connector{fill:none;stroke:var(--purple);stroke-width:1.5;stroke-dasharray:5 5;animation:dash-flow 20s linear infinite}
@keyframes dash-flow{to{stroke-dashoffset:-200}}
.board-foot{display:flex;justify-content:space-between;gap:16px;margin-top:24px;font-size:11px;color:var(--muted)}
.board-foot .hand{color:var(--purple);font-size:19px;transform:rotate(-3deg)}
.process-promise{display:grid;grid-template-columns:1fr 1fr 1fr;gap:44px;padding-top:55px}
.process-promise h3{font-size:21px;margin-bottom:13px}
.process-promise p{font-size:13px}
.process-fallback{padding-top:30px}
.drawer{position:fixed;inset:0 0 0 auto;margin:0;border:0;border-left:1px solid var(--line);width:min(580px,100%);height:100dvh;max-height:100dvh;max-width:100%;background:var(--paper);padding:0;color:var(--ink);box-shadow:-20px 0 80px #00000010}
.drawer[open]{animation:drawer-in .35s var(--ease)}
.drawer::backdrop{background:#25252855;backdrop-filter:blur(3px)}
@keyframes drawer-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
.drawer-inner{padding:35px 42px 40px}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:45px}
.drawer-top .mono{color:var(--muted);font-size:10px}
.close-dialog{width:44px;height:44px;display:grid;place-items:center;background:transparent;border:1px solid var(--line);border-radius:50%;font-size:24px}
.close-dialog:hover{background:var(--lavender)}
.drawer-icon{width:55px;height:55px;background:var(--lavender);color:var(--purple);padding:13px;border-radius:14px;margin-bottom:24px}
.drawer h2{font-size:43px;margin-bottom:24px}
.drawer-description{font-size:15px;line-height:1.8}
.drawer h3{font-size:11px;font-family:"Courier New",monospace;letter-spacing:.08em;margin-top:35px;margin-bottom:18px;text-transform:uppercase}
.drawer ul{padding:0;list-style:none;margin:0}
.drawer li{position:relative;padding:0 0 14px 24px;font-size:14px;color:var(--muted)}
.drawer li::before{content:"↗";position:absolute;left:0;color:var(--purple)}
.drawer-output{margin-top:25px;padding:22px;background:var(--lime);border-radius:10px}
.drawer-output .mono{font-size:10px;display:block;margin-bottom:8px}
.drawer-output p{color:var(--ink);font-size:14px}
.drawer-input{font-size:13px}
.drawer-note{margin-top:30px;font-size:20px;color:var(--purple)}
.drawer-controls{display:flex;gap:12px;margin-top:32px}
.drawer-controls .button{flex:1;padding:14px 12px;font-size:12px;gap:8px}
.drawer-position{display:block;margin-top:18px;color:var(--muted);text-align:center;font-family:"Courier New",monospace;font-size:10px}
.service-detail{padding-block:65px;border-top:1px solid var(--line);display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;scroll-margin-top:8px}
.service-detail h2{font-size:43px;margin-bottom:22px}
.service-detail p{max-width:470px;font-size:15px}
.service-detail .button{margin-top:25px}
.service-art{min-height:280px;border:1px solid var(--line);border-radius:14px;background:var(--lavender);padding:32px;position:relative;overflow:hidden}
.service-art.green{background:#e9eddf}
.service-art.sand{background:#eee9df}
.service-art .mono{font-size:10px}
.service-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.simple-window{position:relative;background:var(--paper);border:1px solid #c2c1c8;border-radius:8px;height:180px;margin:22px 15px 0;transform:rotate(-4deg);padding:20px}
.simple-window .sw-top{height:6px;width:40%;background:var(--ink);border-radius:4px;margin-bottom:16px}
.simple-window .sw-heading{font-size:27px;line-height:1.05;letter-spacing:-1.3px;max-width:160px}
.simple-window .sw-button{width:70px;height:22px;background:var(--purple);border-radius:4px;margin-top:17px}
.simple-window .sw-shape{position:absolute;right:25px;top:35px;width:85px;height:120px;background:#c7bbed;border-radius:60px 60px 6px 6px}
.simple-window.shop{display:flex;gap:10px;align-items:end}
.shop-item{background:#e1e7d4;flex:1;height:130px;border-radius:5px;position:relative}
.shop-item::before{content:"";position:absolute;top:20px;left:calc(50% - 20px);width:40px;height:60px;background:#8e9a79;border-radius:15px 15px 5px 5px;transform:rotate(10deg)}
.shop-item:nth-child(2){background:#e5dfeb}
.shop-item:nth-child(2)::before{background:#aa98b5;transform:rotate(-10deg)}
.shop-item:nth-child(3){background:#e5dfd2}
.shop-item:nth-child(3)::before{background:#baa888;transform:rotate(4deg)}
.scope-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}
.scope-tags span{border:1px solid var(--line);padding:6px 12px;font-size:11px;border-radius:25px}
.service-content{padding-top:15px}
.service-content h3{font-size:23px;margin-top:25px;margin-bottom:12px}
.check-list{padding:0;margin:20px 0;list-style:none;display:grid;gap:12px}
.check-list li{font-size:14px;display:flex;gap:12px;align-items:flex-start;color:var(--muted)}
.check-list li::before{content:"✓";color:var(--purple);font-weight:bold}
.studio-section{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.studio-board{min-height:340px;position:relative;background:#efede6;border-radius:15px;display:grid;place-items:center;overflow:hidden}
.studio-board .note{background:var(--yellow);font-size:30px;line-height:1.1;padding:38px;transform:rotate(-7deg);max-width:245px;box-shadow:5px 12px 15px #00000007}
.studio-board .note::before{content:"";background:#ffffff80;position:absolute;width:90px;height:25px;top:-8px;left:70px;transform:rotate(5deg)}
.studio-board>.mono{position:absolute;bottom:20px;right:20px;font-size:9px}
.studio-board img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.studio-section p{margin-top:25px;font-size:15px}
.portfolio-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line);padding-bottom:25px}
.filter-buttons{display:flex;gap:8px;flex-wrap:wrap}
.filter-buttons button{background:transparent;padding:10px 15px;border:1px solid var(--line);border-radius:100px;font-size:12px}
.filter-buttons button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.filter-buttons button:hover{border-color:var(--purple)}
.portfolio-count{font-size:10px;color:var(--muted);white-space:nowrap}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:45px 30px;margin-top:40px}
.project-card{min-width:0}
.project-image{height:auto;aspect-ratio:8/5;border-radius:14px;border:1px solid var(--line);background:var(--lavender);overflow:hidden;display:grid;place-items:center}
.project-image img{height:100%;width:100%;object-fit:cover;transition:transform .5s var(--ease)}
.project-image,.case-cover{position:relative}
.project-image>img,.case-cover>img{position:absolute;inset:0}
.project-card:hover img{transform:scale(1.035)}
.project-image .placeholder-name{font-size:36px;font-weight:600;letter-spacing:-.04em;padding:25px;text-align:center;color:var(--purple)}
.project-meta{display:flex;justify-content:space-between;gap:20px;margin-top:18px;align-items:start}
.project-meta h3{font-size:24px}
.project-meta p{font-size:12px;margin-top:5px}
.project-meta svg{width:24px;height:24px}
.no-results{padding-block:70px;text-align:center}
.case-body{max-width:900px;margin:auto}
.case-cover{margin-bottom:50px;aspect-ratio:16/10;overflow:hidden;border-radius:15px;display:grid;place-items:center;background:var(--lavender);border:1px solid var(--line)}
.case-cover img{width:100%;height:100%;object-fit:cover}
.case-sections{display:grid;gap:40px}
.case-sections h2{font-size:33px;margin-bottom:16px}
.case-sections p{font-size:16px}
.case-gallery{display:grid;gap:30px;margin-top:45px}
.case-gallery img{border:1px solid var(--line);border-radius:12px;width:100%}
.case-facts{display:flex;gap:45px;flex-wrap:wrap;margin:30px 0 50px;border-block:1px solid var(--line);padding-block:22px}
.case-facts dt{font-size:10px;color:var(--muted);text-transform:uppercase;font-family:"Courier New",monospace}
.case-facts dd{margin:8px 0 0;font-size:14px}
.contact-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:95px;padding-bottom:100px}
.contact-info h1{font-size:clamp(3rem,5.3vw,5.2rem)}
.contact-info h1 em{color:var(--purple);font-style:normal}
.contact-info>p{margin-top:24px;max-width:350px;font-size:15px}
.email-link{font-size:24px;letter-spacing:-.04em;border-bottom:1px solid var(--ink);display:inline-block;margin-top:35px;padding-bottom:3px}
.email-link:hover{color:var(--purple);border-color:var(--purple)}
.contact-note{background:var(--yellow);padding:25px;max-width:265px;transform:rotate(-4deg);margin-top:60px;position:relative}
.contact-note::before{content:"";position:absolute;top:-12px;left:90px;width:75px;height:25px;background:#eeeeeaad;transform:rotate(8deg)}
.contact-note .hand{font-size:23px;line-height:1.2;color:var(--ink)}
.contact-note p{font-size:12px;margin-top:13px}
.contact-form{background:var(--white);border:1px solid var(--line);border-radius:17px;padding:36px}
.form-intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.form-intro .mono{font-size:10px;color:var(--muted)}
.form-intro h2{font-size:24px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field.full{grid-column:1/-1}
.field>label,.contact-form legend{font-size:12px;font-weight:600}
.field label span{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{border:1px solid #d6d8cf;background:var(--paper);border-radius:7px;padding:13px 14px;font-size:14px;width:100%;min-height:48px;transition:border-color .2s}
.field textarea{resize:vertical;min-height:120px;max-height:420px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--purple);outline:2px solid #2f5bff20;outline-offset:2px}
.field input::placeholder,.field textarea::placeholder{color:#8c8e85;font-size:12px}
.contact-form fieldset{margin:0;border:0;padding:0;grid-column:1/-1}
.contact-form legend{margin-bottom:12px}
.choice-chips{display:flex;gap:8px;flex-wrap:wrap}
.choice-chips label{position:relative;cursor:pointer}
.choice-chips input{position:absolute;opacity:0;width:1px;height:1px}
.choice-chips span{display:block;padding:9px 12px;border:1px solid var(--line);border-radius:6px;font-size:11px;transition:background .2s}
.choice-chips input:checked+span{background:var(--lavender);border-color:var(--purple);color:var(--purple)}
.choice-chips input:focus-visible+span{outline:2px solid var(--purple);outline-offset:3px}
.field-hint{font-size:10px;color:var(--muted);line-height:1.5}
.checkbox-label{display:flex;align-items:flex-start;gap:10px;font-size:11px;color:var(--muted);line-height:1.6;margin-top:22px}
.checkbox-label input{accent-color:var(--purple);width:16px;height:16px;flex:none;margin-top:2px}
.checkbox-label a{text-decoration:underline;text-underline-offset:3px}
.form-submit{margin-top:22px;width:100%;justify-content:space-between}
.form-note{font-size:10px;margin-top:12px;line-height:1.6}
.form-status{padding:15px;border:1px solid #b5cb95;background:#f2f8e9;border-radius:7px;font-size:13px;margin-top:18px;color:var(--ink)}
.form-status.error{background:#fff3ef;border-color:#e4b2a8}
.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.brief-modal{width:min(640px,calc(100% - 32px));max-height:90dvh;background:var(--paper);border:1px solid var(--line);border-radius:17px;padding:30px;color:var(--ink)}
.brief-modal::backdrop{background:#25252866;backdrop-filter:blur(3px)}
.brief-modal .drawer-top{margin-bottom:20px}
.brief-modal h2{font-size:32px}
.brief-modal>p{font-size:13px;margin-top:18px}
.brief-modal textarea{width:100%;height:240px;resize:vertical;background:#fff;border:1px solid var(--line);border-radius:8px;font-size:12px;padding:16px;margin-block:20px;line-height:1.6}
.brief-actions{display:flex;gap:12px;flex-wrap:wrap}
.brief-actions .button{font-size:12px;min-height:45px;padding:12px 15px}
.legal{max-width:800px;padding-bottom:90px}
.legal h2{font-size:27px;margin:35px 0 15px}
.legal p,.legal li{font-size:14px;line-height:1.8}
.legal ul{color:var(--muted);padding-left:20px}
.legal .notice{padding:20px;background:var(--yellow);border-radius:10px;color:var(--ink)}
.not-found{text-align:center;padding-block:95px 120px;max-width:620px;margin:auto}
.not-found .giant{font-size:140px;letter-spacing:-.08em;color:var(--purple);line-height:1}
.not-found h1{font-size:45px;margin-top:25px}
.not-found p{margin-block:20px 30px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.reveal{animation:soft-enter .65s var(--ease) both}
@keyframes soft-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.hero{min-height:750px}.hero-art{height:580px}.final-browser{top:205px}.wire-browser{top:115px}}
@media(max-width:1100px){
 .container{width:calc(100% - 64px)}.nav-links{gap:24px}.hero{min-height:600px}.hero-art{height:470px}.hero h1{font-size:6.2vw}.final-browser{top:170px;width:89%}.final-content{height:230px;padding:19px}.mini-copy strong{font-size:30px}.mini-arch{height:130px}.wire-browser{top:100px}.wire-content{height:195px;padding:18px}.wire-image{height:80px}.art-chip{bottom:17px;left:0}.art-cursor{bottom:40px}.art-caption{bottom:-14px}.section{padding-block:80px}.intro-grid,.process-preview,.faq-grid{gap:45px}.mini-process{gap:30px;padding:15px}.process-board{padding:40px 25px}.process-grid{gap:65px 25px}.process-node{padding:20px 14px;min-height:180px}.process-node strong{font-size:18px}.contact-layout{gap:45px}.contact-form{padding:25px}.cta-box{padding:48px}.expertise-strip{font-size:11px}.expertise-strip span:not(.mono){gap:14px}.empty-work{gap:40px}
}
@media(max-width:800px){
 html{scroll-padding-top:90px}.container{width:calc(100% - 40px)}.nav-shell{height:74px;gap:14px}.logo{font-size:27px}.logo-mark{width:19px}.menu-toggle{display:block;order:3}.header-cta{margin-left:auto;min-height:42px;font-size:11px;padding:12px 14px;gap:12px}.nav-links{display:flex;position:absolute;top:74px;left:0;right:0;padding:20px;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;box-shadow:0 12px 15px #00000007}.js .nav-links{display:none}.js .nav-links.is-open{display:flex}.nav-links a{padding:14px 8px;font-size:17px}.nav-links a[aria-current="page"]::after{left:auto;right:10px;bottom:21px}html:not(.js) .site-header{position:relative}html:not(.js) .nav-links{position:static;padding:0;flex-direction:row;flex-wrap:wrap;box-shadow:none}html:not(.js) .nav-shell{height:auto;flex-wrap:wrap;padding-block:20px}.hero{grid-template-columns:1fr;gap:15px;padding-top:48px;min-height:auto}.hero-copy{max-width:650px}.hero h1{font-size:clamp(3.5rem,9.5vw,5.4rem)}.hero-copy>p{max-width:430px}.hero-art{width:min(550px,100%);height:510px;margin:10px auto 0}.art-chip{bottom:45px;left:25px}.art-cursor{bottom:60px}.final-content{height:255px}.mini-copy strong{font-size:36px}.mini-arch{height:150px}.final-browser{top:170px;width:84%;right:1%}.wire-browser{width:73%;left:2%}.wire-content{height:230px}.art-caption{bottom:12px}.art-switch{right:30px}.art-grid{inset:6% 0 4%}.expertise-strip{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:25px 0}.expertise-strip .mono{grid-column:1/-1}.expertise-strip span:not(.mono){font-size:11px;gap:12px}.section{padding-block:65px}.section-top{align-items:flex-start;gap:25px;flex-direction:column;margin-bottom:35px}.section-top p{font-size:14px}.intro-grid{grid-template-columns:1fr;gap:25px}.intro-grid>div>p{font-size:17px}.service-row{grid-template-columns:25px 1fr 40px;gap:15px;padding-block:25px}.service-row p{grid-column:2;grid-row:2;max-width:400px}.service-row .round-arrow{grid-column:3;grid-row:1/3}.service-row h3{font-size:25px}.service-row .mono{align-self:start;padding-top:7px}.empty-work{grid-template-columns:1fr;gap:30px;padding-top:0}.portfolio-art{max-width:450px;width:100%;margin:auto;height:300px}.portfolio-frame{height:220px}.portfolio-frame.front{height:215px;top:45px}.portfolio-sticky{left:6px;top:6px}.portfolio-art>.mono{bottom:-2px}.empty-work-copy{max-width:460px}.process-preview{grid-template-columns:1fr;gap:30px}.process-preview p{max-width:480px}.mini-process{max-width:550px;width:100%;margin:auto;gap:35px 50px;padding:20px}.values-grid{gap:30px;grid-template-columns:1fr;margin-top:35px}.value{display:grid;grid-template-columns:40px 1fr;gap:10px 20px}.value h3{margin:0;font-size:25px}.value p{grid-column:2}.value>span{padding-top:4px}.faq-grid{grid-template-columns:1fr;gap:35px}.faq-grid>div>p{max-width:420px}.cta-box{flex-direction:column;align-items:flex-start;padding:35px;gap:28px}.cta-section{padding-bottom:50px}.footer-top{padding-bottom:35px;flex-wrap:wrap}.footer-links{gap:22px}.footer-bottom{flex-wrap:wrap;font-size:10px}.page-hero{padding-block:45px}.split-hero{grid-template-columns:1fr;gap:25px}.split-hero>p{max-width:490px}.page-hero h1{font-size:clamp(3.2rem,8vw,5rem)}.process-grid{grid-template-columns:repeat(2,1fr);gap:45px 35px}.process-node{min-height:175px;padding:22px}.process-node:nth-child(n){grid-column:auto;grid-row:auto;transform:none}.process-node:nth-child(3){grid-column:2;grid-row:2}.process-node:nth-child(4){grid-column:1;grid-row:2}.process-node:nth-child(7){grid-column:2;grid-row:4}.process-node:nth-child(8){grid-column:1;grid-row:4}.process-board{padding:35px}.process-promise{grid-template-columns:1fr;gap:28px}.process-toolbar{align-items:flex-start}.process-toolbar .mono{white-space:nowrap}.board-foot{flex-wrap:wrap}.service-detail{grid-template-columns:1fr;gap:32px;padding-block:45px}.service-art{min-height:270px;max-width:530px;width:100%}.service-content{padding-top:0}.studio-section{grid-template-columns:1fr;gap:35px}.studio-board{min-height:300px}.contact-layout{grid-template-columns:1fr;gap:45px;padding-bottom:65px}.contact-info h1{font-size:clamp(3.4rem,8vw,5rem)}.contact-info>p{max-width:420px}.contact-note{display:none}.email-link{margin-top:25px}.contact-form{max-width:650px;width:100%}.portfolio-controls{flex-wrap:wrap;gap:20px}.project-grid{gap:35px 20px}.project-meta h3{font-size:21px}.empty-work-copy h3{font-size:32px}
}
@media(max-width:520px){
 .container{width:calc(100% - 36px)}.nav-shell{gap:10px}.header-cta{padding:10px 12px;font-size:10px;gap:10px}.header-cta svg{width:16px;height:16px}.logo{font-size:25px}.logo-mark{width:16px}.menu-toggle{width:40px;min-width:40px;min-height:40px}.hero{padding-top:38px;padding-bottom:36px}.hero h1{font-size:clamp(2.85rem,11vw,3.8rem)}.eyebrow{font-size:9px;letter-spacing:.07em;margin-bottom:20px}.hero-copy>p{font-size:14px;margin-top:25px}.hero .button-row{gap:12px;align-items:stretch}.hero .button{padding:15px 16px;font-size:12px;gap:15px;min-height:51px}.hero .button.text{padding-inline:8px;font-size:11px}.hero-sub{font-size:9px;gap:6px;margin-top:18px}.hero-art{height:390px;margin-top:20px}.sketch-label{left:20px;top:0;font-size:18px}.sketch-arrow{top:8px;left:110px;width:105px}.art-switch{top:40px;right:16px}.art-switch button{font-size:9px;padding:6px 10px}.wire-browser{top:85px;width:76%;left:0}.wire-content{height:178px;padding:17px}.wire-head{font-size:9px}.wire-body{gap:10px;margin-top:20px}.wire-image{height:75px;width:80px}.wire-lines{gap:9px}.wire-lines i{height:4px}.wire-lines i:first-child{height:8px}.wire-lines i:last-child{height:20px}.browser-bar{height:25px;padding:0 10px}.browser-bar span{font-size:6px}.browser-bar b{width:4px;height:4px}.final-browser{top:145px;width:84%;right:2%}.final-content{height:199px;padding:15px 18px}.mini-brand{font-size:16px}.mini-nav{font-size:6px}.mini-layout{margin-top:18px;gap:8px}.mini-copy strong{font-size:27px;letter-spacing:-1.4px}.mini-copy p{font-size:6px;margin-top:8px;max-width:105px}.mini-cta{font-size:6px;padding:6px 8px;gap:10px;margin-top:10px}.mini-arch{height:115px}.art-chip{bottom:13px;font-size:9px;padding:8px 10px;left:10px}.art-chip svg{width:13px;height:13px}.art-cursor{bottom:24px;right:0}.art-cursor svg{width:29px;height:29px}.art-cursor span{font-size:8px;padding:4px 7px}.art-caption{bottom:-14px;font-size:7px;right:0}.hero-art.is-sketch .mini-copy strong{font-size:26px}.expertise-strip{margin-top:10px;gap:12px}.expertise-strip span:not(.mono){font-size:10px;gap:8px}.expertise-strip span:not(.mono)::before{font-size:15px}.section{padding-block:52px}h2{font-size:34px}.intro-grid>div>p{font-size:15px}.service-list{margin-top:30px}.service-row{gap:10px;grid-template-columns:22px 1fr 36px}.service-row h3{font-size:22px}.service-row p{font-size:12px}.round-arrow{width:36px;height:36px}.section-top{margin-bottom:30px}.portfolio-art{height:270px}.portfolio-frame{height:190px}.portfolio-frame.front{height:190px;top:40px}.portfolio-sticky{width:105px;font-size:17px;padding:18px 14px}.empty-work-copy h3{font-size:29px}.empty-work-copy p{font-size:13px}.mini-process{padding:15px 5px;gap:35px 30px}.mini-node{padding:18px 14px;min-height:115px}.mini-node strong{font-size:17px}.mini-node span{font-size:8px}.mini-node svg{width:17px;height:17px;right:12px}.values-grid{gap:25px}.value{grid-template-columns:25px 1fr;gap:10px 15px}.value h3{font-size:23px}.value p{font-size:13px}summary{font-size:15px;padding-block:21px}details>p{font-size:13px}.cta-box{padding:28px 24px;border-radius:13px}.cta-box h2{font-size:35px}.cta-box p{font-size:13px}.cta-box .button{font-size:12px;min-height:50px;padding:15px 20px}.footer-links{gap:17px;font-size:11px}.footer-bottom{gap:15px;line-height:1.7}.footer-sign{font-size:13px}.page-hero{padding-block:35px}.breadcrumb{margin-bottom:26px;font-size:9px}.page-hero h1{font-size:45px}.page-hero .lead{font-size:14px;margin-top:22px}.split-hero>p{font-size:14px}.process-toolbar{flex-direction:column;gap:10px}.process-board{padding:30px 26px}.process-grid{grid-template-columns:1fr;gap:45px}.process-node:nth-child(n){grid-column:1;grid-row:auto;min-height:150px;padding:20px 23px;transform:none}.process-node strong{font-size:22px;margin-top:15px}.process-node .node-bottom{margin-top:8px}.process-node .node-icon{width:28px;height:28px}.board-foot{font-size:10px}.board-foot .hand{font-size:17px}.drawer-inner{padding:24px}.drawer-top{margin-bottom:30px}.drawer h2{font-size:36px}.drawer-description{font-size:14px}.drawer li{font-size:13px}.drawer-input{font-size:12px}.drawer-controls .button{font-size:11px}.service-detail h2{font-size:36px}.service-art{padding:25px}.simple-window{margin-inline:0}.service-detail p{font-size:14px}.service-content h3{font-size:21px}.service-content .check-list li{font-size:13px}.studio-board{min-height:280px}.studio-board .note{font-size:27px;padding:30px}.filter-buttons{gap:6px}.filter-buttons button{font-size:10px;padding:9px 12px}.portfolio-controls{gap:14px}.project-grid{grid-template-columns:1fr}.case-facts{gap:25px}.case-sections h2{font-size:29px}.case-sections p{font-size:14px}.contact-info h1{font-size:49px}.contact-info>p{font-size:14px}.email-link{font-size:23px}.contact-form{padding:23px 19px;border-radius:13px}.form-intro h2{font-size:22px}.form-intro .mono{font-size:8px}.form-grid{grid-template-columns:1fr;gap:20px}.choice-chips{gap:7px}.choice-chips span{font-size:10px;padding:9px 10px}.field input,.field select,.field textarea{font-size:16px}.field>label,.contact-form legend{font-size:11px}.checkbox-label{font-size:10px}.form-submit{font-size:12px;padding-inline:17px}.brief-modal{padding:23px}.brief-modal h2{font-size:27px}.brief-actions{gap:10px}.brief-actions .button{font-size:11px}.not-found .giant{font-size:120px}.not-found h1{font-size:37px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
}
@media(max-width:800px){.button.header-cta{font-size:11px;padding:12px 14px;gap:12px;min-height:42px}}
@media(max-width:520px){.button.header-cta{font-size:10px;padding:10px 12px;gap:10px;min-height:40px}}
@media(max-width:380px){.button.header-cta svg{display:none}.hero h1{font-size:clamp(2.6rem,10.7vw,3rem)}.hero .button-row{gap:5px}.hero-sub{font-size:8px}}
@media print{
 .site-header,.site-footer,.cta-section,.process-toolbar,.art-switch,.menu-toggle,.button,.drawer-controls{display:none!important}.container{width:100%}.section{padding-block:25px}body{background:white;color:black}.process-connectors{display:none}.process-node{break-inside:avoid}.process-grid{grid-template-columns:repeat(2,1fr)}.process-node:nth-child(n){grid-column:auto;grid-row:auto}.drawer{position:static;width:100%;height:auto}h1{font-size:45px}h2{font-size:30px}
}