:root{color-scheme:light;--bg:#f7f3ef;--ink:#22211f;--muted:#68645f;--line:#dcd5cf;--violet:#c6b4f7;--violet-dark:#956be3;--orange:#e47750;--paper:#fffdfa;--field:#fffdf9;--offer:#272520;--offer-ink:#f8f2eb;--offer-muted:#c7c0b8;--offer-line:#696057;--contact:#e6ddf3;--contact-ink:#29242c;--shadow:rgba(41,33,32,.08)}
:root[data-theme="dark"]{color-scheme:dark;--bg:#191918;--ink:#f5f0e9;--muted:#bcb6af;--line:#44413f;--violet:#ab8ce8;--violet-dark:#cdb5ff;--orange:#fa9e7b;--paper:#262521;--field:#292725;--offer:#24211f;--offer-ink:#f8f2eb;--offer-muted:#c7c0b8;--offer-line:#59524a;--contact:#342c3d;--contact-ink:#f7f1fc;--shadow:rgba(0,0,0,.25)}
*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}button,a,input,textarea,select{outline-offset:4px}img{max-width:100%}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Space Grotesk','Arial',sans-serif}em{font-family:Georgia,serif;letter-spacing:-.065em;font-weight:400} .container{max-width:1220px;width:calc(100% - 84px);margin-inline:auto}.skip-link{position:absolute;z-index:100;top:-100px;left:15px;background:#fff;color:#222;padding:12px 16px}.skip-link:focus{top:10px}.site-header{min-height:90px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:28px}.logo{font:700 28px/1 'Space Grotesk',sans-serif;letter-spacing:-.09em;white-space:nowrap}.logo span{color:var(--orange);padding:0 4px;letter-spacing:0}.main-nav{display:flex;gap:37px;align-items:center;font-size:13px;font-weight:700}.main-nav a{transition:color .15s}.main-nav a:hover,.footer-links a:hover{color:var(--orange)}.theme-toggle{display:flex;align-items:center;gap:10px;padding:9px 15px;border:1px solid var(--line);background:transparent;color:var(--ink);font-weight:700;font-size:12px;border-radius:50px;min-height:42px}.theme-toggle:hover{background:var(--paper)}.theme-symbol{font-size:20px;line-height:1}.theme-label{letter-spacing:.06em}.section-kicker{font-size:11px;font-weight:700;letter-spacing:.15em;color:var(--orange)}.period{color:var(--orange)}.hero{padding-top:33px;padding-bottom:54px}.hero-meta,.hero-trace{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--muted)}.hero-meta .small{font-style:normal;font-size:24px;color:var(--orange);vertical-align:middle;display:inline-block;margin-right:8px}.hero-stage{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:10px;align-items:center;padding-top:74px}.hero-overline{font-size:17px;color:var(--muted);margin-bottom:21px}.hero h1{font-size:clamp(64px,8.6vw,124px);line-height:1.03;letter-spacing:-.095em;margin:0 0 32px;font-weight:700}.hero h1 em{display:inline-block;position:relative;white-space:nowrap;font-style:italic;z-index:1}.hero h1 em:after{content:"";position:absolute;z-index:-1;height:24%;background:var(--violet);left:1%;right:0;bottom:10%;transform:rotate(-2deg)}.hero-stamp{position:relative;width:145px;height:145px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;transform:rotate(12deg);margin-top:50px}.hero-stamp .stamp-ring{position:absolute;top:17px;font-size:9px;letter-spacing:.16em;line-height:1.65;text-align:center;opacity:.8}.hero-stamp>span{font-size:61px;transform:translateY(13px)}.hero-bottom{display:flex;align-items:end;justify-content:space-between;gap:40px;padding-bottom:53px}.hero-bottom>p{font-size:18px;line-height:1.8;color:var(--muted);max-width:605px;margin-bottom:0}.btn{display:inline-flex;gap:28px;align-items:center;justify-content:space-between;min-height:59px;padding:17px 24px;border:1px solid transparent;font-size:13px;font-weight:700;white-space:normal;text-align:left;transition:background .2s,transform .2s,color .2s}.btn span:last-child{font-size:19px}.btn-primary{background:var(--ink);color:var(--bg)}.btn-primary:hover{background:var(--orange);color:#241f1d;transform:translateY(-2px)}.btn:disabled{opacity:.55;cursor:wait;transform:none}.hero-trace{border-top:1px solid var(--line);padding-top:19px}.ticker{background:var(--orange);color:#221c1b;padding:14px 0;overflow:hidden}.ticker-track{width:max-content;white-space:nowrap;font-size:12px;letter-spacing:.19em;font-weight:700;animation:marquee 30s linear infinite}.ticker b{padding:0 38px;font-size:20px;vertical-align:middle}@keyframes marquee{to{transform:translateX(-50%)}}.section{padding-block:140px}.about{display:grid;grid-template-columns:22% 1fr;gap:40px}.about-content{display:grid;grid-template-columns:1.25fr 1fr;gap:55px;align-items:start}.about h2{font-size:clamp(48px,5vw,78px);letter-spacing:-.08em;line-height:1.12;margin-bottom:0}.about h2 em{color:var(--violet-dark)}.about-description{padding-top:12px}.about-description p{font-size:16px;line-height:1.88;color:var(--muted);margin-bottom:20px}.signature{display:inline-block;font:italic 39px Georgia,serif;transform:rotate(-8deg);margin-top:19px}.signature span{color:var(--orange);font-style:normal}.offer-block{background:var(--offer);color:var(--offer-ink);padding:108px 0 87px}.section-header{display:flex;align-items:start;justify-content:space-between}.offer-block .section-kicker{color:#f5aa90}.header-doodle{font:80px Georgia,serif;color:var(--violet);transform:rotate(-22deg);line-height:.5}.offer-title{display:flex;align-items:end;justify-content:space-between;gap:35px;margin:30px 0 67px}.offer-title h2{font-size:clamp(58px,6.5vw,92px);line-height:1.05;letter-spacing:-.085em;margin:0}.offer-title h2 em{color:var(--violet)}.offer-title p{max-width:290px;font-size:16px;line-height:1.75;color:var(--offer-muted);margin:0}.offer-list{border-top:1px solid var(--offer-line)}.offer-item{display:grid;grid-template-columns:85px minmax(0,1fr) 62px;align-items:center;gap:20px;padding:36px 8px;border-bottom:1px solid var(--offer-line);transition:padding .2s,background .2s}.offer-item:hover,.offer-item:focus-visible{padding-inline:22px;background:rgba(255,255,255,.045)}.offer-num{font-size:13px;font-weight:700;color:#e7a994}.offer-copy{display:flex;flex-direction:column;gap:7px}.offer-copy strong{font:700 clamp(27px,3.35vw,44px)/1.2 'Space Grotesk',sans-serif;letter-spacing:-.07em}.offer-copy small{font-size:14px;color:var(--offer-muted);line-height:1.7}.offer-more{font-size:11px;letter-spacing:.06em;color:var(--violet);margin-top:4px}.offer-icon{font-size:34px;color:var(--violet);transition:transform .2s}.offer-item:hover .offer-icon{transform:translate(5px,-5px)}.offer-tail{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-top:35px;font-size:11px;font-weight:700;letter-spacing:.11em}.offer-tail a{text-decoration:underline;text-decoration-color:var(--violet);text-underline-offset:6px}.work-note{display:grid;grid-template-columns:1.1fr 1fr;gap:95px;align-items:end}.note-left{position:relative}.note-eye{position:absolute;color:var(--orange);font-size:44px;top:-63px;left:5px}.note-left p{font:700 clamp(42px,5.7vw,78px)/1.13 'Space Grotesk',sans-serif;letter-spacing:-.075em;margin:0}.note-left em{color:var(--violet-dark)}.note-right{border-left:1px solid var(--line);display:grid;grid-template-columns:85px 1fr;gap:19px;padding-left:30px}.number-big{font:700 60px 'Space Grotesk',sans-serif;color:var(--orange);letter-spacing:-.1em;line-height:1}.note-right strong{font:700 20px 'Space Grotesk',sans-serif;letter-spacing:-.03em}.note-right p{font-size:15px;color:var(--muted);line-height:1.85;margin:15px 0 0}.contact-zone{background:var(--contact);color:var(--contact-ink);padding:120px 0}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px}.contact-aside h2{font-size:clamp(55px,6.5vw,87px);letter-spacing:-.09em;line-height:1.07;margin:36px 0 32px}.contact-aside h2 em{color:#7652b5}:root[data-theme="dark"] .contact-aside h2 em{color:var(--violet)}.contact-aside>p:not(.section-kicker){max-width:400px;font-size:17px;line-height:1.85;color:var(--contact-ink);opacity:.8}.contact-social{margin-top:53px;display:flex;flex-direction:column;max-width:380px}.contact-social a{padding:16px 0;border-top:1px solid currentColor;display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:700}.contact-social a:last-child{border-bottom:1px solid currentColor}.contact-social a:hover{color:var(--orange)}.contact-form{background:var(--paper);color:var(--ink);padding:38px 41px;box-shadow:12px 12px 0 rgba(118,82,181,.16)}.form-heading{display:flex;justify-content:space-between;align-items:start;gap:12px}.form-heading h3{font-size:28px;letter-spacing:-.055em;margin-bottom:8px}.form-heading>span{font-size:30px;color:var(--orange)}.form-intro{font-size:13px;line-height:1.6;color:var(--muted);margin-bottom:24px}.contact-form>label:not(.consent){font-size:11px;font-weight:700;letter-spacing:.07em;display:block;margin:17px 0 8px}.contact-form input:not([type="checkbox"]),.contact-form textarea,.contact-form select{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--paper);color:var(--ink);padding:12px 0;font-size:15px;outline:0}.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-bottom:2px solid var(--orange)}.contact-form textarea{resize:vertical;min-height:110px}.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--muted);opacity:.8}.contact-form select{cursor:pointer}.contact-form .honeypot{display:none!important}.consent{display:flex;align-items:start;gap:12px;font-size:12px;line-height:1.65;color:var(--muted);margin:21px 0 0}.consent input{margin:3px 0 0;accent-color:var(--violet-dark);width:16px;height:16px;flex:none}.consent a,.form-footnote a{text-decoration:underline;text-underline-offset:3px}.submit-btn{width:100%;margin-top:24px}.form-status{margin:15px 0 0;font-size:13px;line-height:1.65;min-height:0}.form-status:empty{display:none}.form-status[data-state="success"]{color:#297248}.form-status[data-state="error"]{color:#aa433c}:root[data-theme="dark"] .form-status[data-state="success"]{color:#8dddac}:root[data-theme="dark"] .form-status[data-state="error"]{color:#ffa899}.form-footnote{font-size:11px;line-height:1.75;color:var(--muted);margin:16px 0 0}.site-footer{min-height:170px;display:flex;align-items:center;justify-content:space-between;gap:30px}.site-footer p{font-size:12px;color:var(--muted);margin:10px 0 0}.footer-links{display:flex;gap:25px;font-size:12px;font-weight:700}.copyright{font-size:11px;color:var(--muted)}.breadcrumbs{display:flex;gap:13px;align-items:center;flex-wrap:wrap;padding:31px 0;font-size:12px;color:var(--muted)}.breadcrumbs a:hover{color:var(--orange)}.service-page{padding-bottom:105px}.service-heading{padding:58px 0 90px;display:grid;grid-template-columns:1fr minmax(200px,370px);gap:0 80px}.service-heading .section-kicker{grid-column:1/-1;margin-bottom:34px}.service-heading h1{font-size:clamp(55px,7vw,98px);letter-spacing:-.09em;line-height:1.07;margin-bottom:0}.service-heading h1 em{color:var(--violet-dark)}.service-lead{font-size:18px;color:var(--muted);line-height:1.85;align-self:end;margin:0}.service-panel{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:42px 0 55px;display:grid;grid-template-columns:1fr 1.2fr;gap:50px}.service-panel h2{font-size:38px;letter-spacing:-.065em;margin:0}.feature-list{list-style:none;padding:0;margin:0}.feature-list li{padding:14px 0 14px 27px;border-bottom:1px solid var(--line);position:relative;font-size:15px;line-height:1.6}.feature-list li:before{content:'✳';color:var(--orange);position:absolute;left:0}.feature-list li:last-child{border-bottom:0}.service-section-header{display:flex;gap:25px;justify-content:space-between;align-items:end;margin:115px 0 35px}.service-section-header>span{font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--orange)}.service-section-header h2{font-size:clamp(40px,5vw,67px);letter-spacing:-.075em;margin:0}.service-demo{display:grid;grid-template-columns:1.2fr 1fr;gap:65px;align-items:center}.demo-visual{background:var(--paper);padding:14px;border:1px solid var(--line);box-shadow:14px 14px 0 var(--shadow)}.browser-top{display:flex;align-items:center;gap:5px;padding:4px 4px 15px}.browser-top i{width:7px;height:7px;border:1px solid var(--muted);border-radius:50%}.browser-top span{font-size:8px;color:var(--muted);margin-left:auto;letter-spacing:.1em}.browser-preview{height:340px;padding:40px;display:flex;flex-direction:column;justify-content:center}.browser-preview small{font-size:12px;letter-spacing:.12em}.browser-preview strong{font:600 clamp(35px,4.6vw,62px)/1.03 Georgia,serif;letter-spacing:-.06em;margin:26px 0}.browser-preview span{font-size:11px;letter-spacing:.12em}.preview-olive{background:#e2e8d8;color:#304435}.preview-olive strong em{font:italic 1em Georgia,serif;color:#946855}.preview-noir{background:#17191d;color:#f1f1f3}.preview-noir strong{font-family:'Space Grotesk',sans-serif}.preview-noir span{color:#bf9be5}.demo-detail>span{color:var(--orange);font-size:11px;font-weight:700;letter-spacing:.13em}.demo-detail h3{font-size:clamp(30px,3.4vw,47px);letter-spacing:-.07em;line-height:1.15;margin:19px 0}.demo-detail p{line-height:1.85;color:var(--muted);font-size:15px;margin-bottom:25px}.service-cta{margin-top:128px;background:var(--contact);color:var(--contact-ink);padding:55px 60px;display:flex;justify-content:space-between;gap:22px;align-items:center}.service-cta p{font-size:11px;font-weight:700;letter-spacing:.15em;margin-bottom:12px}.service-cta h2{font-size:clamp(30px,4vw,51px);letter-spacing:-.07em;margin:0}.service-cta h2 em{color:var(--violet-dark)}.back-link{display:inline-block;font-size:13px;font-weight:700;border-bottom:1px solid var(--line);padding:15px 0;margin-top:38px}.back-link:hover{color:var(--orange)}.process-demo{grid-template-columns:repeat(3,1fr);align-items:start;gap:0;border:1px solid var(--line)}.process-demo>div{padding:40px 35px;min-height:230px}.process-demo>div+div{border-left:1px solid var(--line)}.process-number{color:var(--orange);font-weight:700}.process-demo h3{font-size:29px;letter-spacing:-.06em;margin:35px 0 12px}.process-demo p{font-size:14px;color:var(--muted);line-height:1.7}.legal-page{padding-bottom:125px;max-width:1100px}.legal-page h1{font-size:clamp(53px,6.5vw,88px);letter-spacing:-.09em;line-height:1.1;margin:30px 0}.legal-page h1 em{color:var(--violet-dark)}.legal-lead{font-size:18px;line-height:1.75;color:var(--muted);max-width:740px;margin-bottom:65px}.legal-page h2{font-size:28px;letter-spacing:-.04em;margin:35px 0 10px}.legal-page>p:not(.section-kicker),.legal-page>p:not(.legal-lead){max-width:780px;line-height:1.85}.legal-page a:not(.back-link){text-decoration:underline;text-underline-offset:3px}.legal-date{font-size:13px;color:var(--muted);margin-top:50px}.not-found{min-height:65vh;display:flex;flex-direction:column;align-items:start;justify-content:center}.not-found h1{font-size:clamp(64px,8vw,100px);letter-spacing:-.09em;margin:20px 0}.not-found h1 em{color:var(--violet-dark)}.not-found p{font-size:17px;line-height:1.7;color:var(--muted)}
@media(max-width:1000px){.hero-stage{grid-template-columns:1fr 90px}.hero-stamp{width:90px;height:90px}.hero-stamp .stamp-ring{display:none}.hero-stamp>span{font-size:50px;transform:none}.about{grid-template-columns:1fr;gap:20px}.contact-layout{gap:42px}.service-heading{grid-template-columns:1fr;gap:30px}.service-lead{max-width:600px}.service-demo{gap:30px}.site-footer{flex-wrap:wrap;padding-block:35px}.copyright{width:100%}}
@media(max-width:700px){html{scroll-padding-top:72px}.container{width:calc(100% - 36px)}.site-header{min-height:75px;gap:8px}.logo{font-size:23px}.main-nav{gap:15px}.main-nav a{font-size:12px}.main-nav a:first-child{display:none}.theme-toggle{padding:6px 9px;min-height:37px}.theme-label{display:none}.hero{padding-top:17px;padding-bottom:36px}.hero-meta{font-size:9px;line-height:1.7}.hero-meta>span:last-child{display:none}.hero-stage{padding-top:56px;grid-template-columns:1fr}.hero-overline{font-size:14px}.hero h1{font-size:clamp(48px,11vw,77px);margin-bottom:38px;letter-spacing:-.09em}.hero h1 em{white-space:normal}.hero-stamp{display:none}.hero-bottom{flex-direction:column;align-items:stretch;gap:25px;padding-bottom:41px}.hero-bottom>p{font-size:15px}.hero-bottom .btn{width:100%}.hero-trace span:last-child{display:none}.section{padding-block:88px}.about-content{grid-template-columns:1fr;gap:26px}.about h2{font-size:clamp(42px,10vw,67px)}.about-description{padding:0}.about-description p{font-size:15px}.offer-block{padding:81px 0}.offer-title{flex-direction:column;align-items:start;gap:23px;margin:33px 0 40px}.offer-title h2{font-size:clamp(51px,11vw,75px)}.offer-title p{max-width:430px}.header-doodle{font-size:56px}.offer-item{grid-template-columns:31px minmax(0,1fr) 26px;gap:10px;padding:24px 0}.offer-copy strong{font-size:clamp(24px,6vw,32px)}.offer-copy small{font-size:12px}.offer-icon{font-size:23px}.offer-more{font-size:10px}.offer-tail{flex-direction:column;align-items:start;line-height:1.7}.work-note{grid-template-columns:1fr;gap:44px}.note-left p{font-size:clamp(44px,11vw,70px)}.note-right{grid-template-columns:65px 1fr;padding-left:18px}.number-big{font-size:44px}.contact-zone{padding:81px 0}.contact-layout{grid-template-columns:1fr;gap:36px}.contact-aside h2{font-size:clamp(53px,12vw,78px);margin:26px 0}.contact-aside>p:not(.section-kicker){font-size:15px}.contact-social{margin-top:25px}.contact-form{padding:26px 22px;box-shadow:6px 6px 0 rgba(118,82,181,.16)}.form-heading h3{font-size:25px}.site-footer{gap:26px}.site-footer>div:first-child{width:100%}.footer-links{gap:18px;flex-wrap:wrap}.service-page{padding-bottom:75px}.breadcrumbs{padding:20px 0;font-size:11px}.service-heading{padding:38px 0 66px}.service-heading h1{font-size:clamp(46px,10.5vw,70px)}.service-lead{font-size:16px}.service-panel{grid-template-columns:1fr;gap:22px;padding-block:32px}.service-panel h2{font-size:30px}.service-section-header{margin:80px 0 30px;align-items:start;flex-direction:column}.service-section-header h2{font-size:42px}.service-demo{grid-template-columns:1fr;gap:38px}.browser-preview{height:280px;padding:30px}.browser-preview strong{font-size:42px}.service-cta{margin-top:80px;padding:38px 23px;flex-direction:column;align-items:stretch}.service-cta h2{font-size:37px}.process-demo{grid-template-columns:1fr}.process-demo>div{min-height:auto;padding:27px}.process-demo>div+div{border-left:0;border-top:1px solid var(--line)}.process-demo h3{margin:14px 0}.legal-page h1{font-size:clamp(43px,10vw,70px)}}
@media(max-width:390px){.main-nav a:nth-child(2){display:none}.hero h1{font-size:47px}.offer-copy strong{font-size:23px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* === JOLKA STUDIO: LIVE PULSE + INTERACTIVE DESIGN LAB === */
.studio-pulse{margin-top:25px;display:flex;align-items:center;flex-wrap:wrap;gap:14px 27px;font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.studio-pulse>span{display:inline-flex;align-items:center;gap:7px}
.pulse-status{color:var(--ink)}.pulse-dot{width:8px;height:8px;border-radius:50%;background:#55ac7b;box-shadow:0 0 0 4px rgba(85,172,123,.13);animation:pulse-glow 2.7s infinite}
.studio-pulse strong{color:var(--violet-dark);font-size:15px;letter-spacing:0;font-variant-numeric:tabular-nums}
.pulse-end{margin-left:auto;font-size:9px;opacity:.7}
@keyframes pulse-glow{50%{box-shadow:0 0 0 8px rgba(85,172,123,0)}}
.lab-section{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(35px,6vw,85px);align-items:center;padding-block:70px 135px}
.lab-intro h2{font-size:clamp(43px,5vw,71px);line-height:1.1;letter-spacing:-.075em;margin:25px 0}
.lab-intro h2 em{color:var(--violet-dark)}
.lab-intro>p:not(.section-kicker):not(.lab-hint){max-width:430px;color:var(--muted);font-size:15px;line-height:1.9}
.lab-controls{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 18px}
.lab-pick{border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:12px 15px;font-size:12px;font-weight:700;min-height:44px;transition:transform .2s,background .2s,border-color .2s}
.lab-pick span{color:var(--orange);font-size:10px;margin-right:10px}
.lab-pick:hover{transform:translateY(-3px);border-color:var(--violet-dark)}
.lab-pick.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.lab-hint{font-size:11px;line-height:1.8;color:var(--muted);max-width:360px}
.lab-canvas{--lab-bg:#dfd4f5;--lab-ink:#1e1b21;--lab-accent:#fbe17a;position:relative;overflow:hidden;isolation:isolate;aspect-ratio:1.15;min-height:380px;background:var(--lab-bg);color:var(--lab-ink);padding:27px 32px 25px;display:flex;flex-direction:column;justify-content:space-between;border-radius:2px;box-shadow:16px 16px 0 var(--line);transition:background .36s,color .36s,transform .3s;transform:rotate(-1deg)}
.lab-canvas:hover{transform:rotate(0)}
.lab-canvas::before{content:'';position:absolute;width:260px;height:260px;top:-160px;right:-85px;background:var(--lab-accent);border-radius:50%;z-index:-1;transition:background .4s,transform .4s}
.lab-canvas-top,.lab-canvas-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10px;font-weight:800;letter-spacing:.11em;position:relative;z-index:2}
.lab-brand{font-family:'Space Grotesk',sans-serif;font-size:28px;letter-spacing:-.13em;font-weight:700}
.lab-canvas-body{position:relative;z-index:1;padding:5px 0}
.lab-canvas-body>p{font-size:10px;letter-spacing:.17em;font-weight:800;margin-bottom:19px}
.lab-canvas-body>strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:clamp(45px,5.9vw,82px);line-height:.97;letter-spacing:-.095em;position:relative;z-index:2;white-space:normal}
.lab-shape{position:absolute;z-index:0;font-size:clamp(120px,17vw,220px);line-height:1;color:var(--lab-accent);bottom:-.55em;right:-.14em;transform:rotate(-12deg);transition:transform .5s,color .4s}
.lab-canvas:hover .lab-shape{transform:rotate(28deg) scale(1.08)}
.lab-canvas[data-style="pop"]{--lab-bg:#ff8d60;--lab-ink:#28212b;--lab-accent:#b9a4ed;transform:rotate(1deg)}
.lab-canvas[data-style="pop"]:hover{transform:rotate(0)}
.lab-canvas[data-style="pop"] .lab-canvas-body>strong{font-weight:700;font-style:italic;letter-spacing:-.11em}
.lab-canvas[data-style="pop"] .lab-shape{font-size:225px;transform:rotate(14deg)}
.lab-canvas[data-style="pop"]:hover .lab-shape{transform:rotate(-20deg) scale(1.1)}
.lab-canvas[data-style="noir"]{--lab-bg:#242326;--lab-ink:#f9f4ed;--lab-accent:#c9f369;transform:rotate(-.5deg)}
.lab-canvas[data-style="noir"]:hover{transform:rotate(0)}
.lab-canvas[data-style="noir"] .lab-canvas-body>strong{font-weight:500;font-style:normal;letter-spacing:-.07em}
.lab-canvas[data-style="noir"] .lab-shape{transform:rotate(65deg)}
@media(max-width:980px){.lab-section{grid-template-columns:1fr;gap:36px}.lab-canvas{max-width:720px;aspect-ratio:1.4;min-height:350px}.lab-canvas-body>strong{font-size:clamp(46px,8vw,79px)}}
@media(max-width:700px){.studio-pulse{gap:10px 14px;letter-spacing:.07em;font-size:9px}.pulse-end{display:none!important}.lab-section{padding-block:50px 85px}.lab-intro h2{font-size:clamp(39px,10vw,64px)}.lab-canvas{padding:23px 22px;aspect-ratio:1;min-height:290px;box-shadow:8px 8px 0 var(--line)}.lab-canvas-body>strong{font-size:clamp(44px,10vw,68px)}.lab-canvas-top,.lab-canvas-bottom{font-size:8px}.lab-shape{font-size:125px}.lab-canvas[data-style="pop"] .lab-shape{font-size:135px}}
@media(prefers-reduced-motion:reduce){.pulse-dot{animation:none}.lab-canvas,.lab-shape,.lab-pick{transition:none!important}}

/* SEO PRO — accessibility, touch friendliness, FAQ presentation. */
:focus-visible{outline:3px solid var(--violet-dark);outline-offset:4px}
a,button,input,select,textarea{-webkit-tap-highlight-color:transparent}
img,svg{max-width:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.service-faq{margin-top:90px;max-width:920px}
.service-faq>h2{font-size:clamp(37px,5vw,65px);line-height:1.1;letter-spacing:-.07em;margin:18px 0 34px}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{cursor:pointer;display:list-item;list-style-position:outside;margin-left:19px;padding:24px 8px;font-size:clamp(18px,2vw,22px);line-height:1.35;font-weight:700}
.faq-item summary::marker{color:var(--violet-dark)}
.faq-item p{margin:0;padding:0 8px 27px 19px;color:var(--muted);font-size:15px;line-height:1.85;max-width:760px}
.faq-item summary:focus-visible{outline:3px solid var(--violet-dark);outline-offset:3px}
@media(hover:none) and (pointer:coarse){.theme-toggle{min-width:44px;min-height:44px}.lab-pick{min-height:44px}.main-nav a{min-height:44px;display:inline-flex;align-items:center}}
@media(max-width:700px){.service-faq{margin-top:70px}.faq-item summary{padding-block:20px}}
@media(max-width:350px){.container{width:calc(100% - 28px)}.site-header{flex-wrap:wrap;justify-content:space-between;padding-block:13px}.main-nav{order:3;width:100%;justify-content:space-between}.main-nav a:first-child,.main-nav a:nth-child(2){display:inline-flex}.hero{padding-top:11px}.hero h1{font-size:clamp(39px,13vw,47px)}.hero-meta{font-size:8px}}

/* JOLKA STUDIO V5 — quieter palette, compact offer pages, seamless ticker */
:root{--orange:#956be3}
:root[data-theme="dark"]{--orange:#cdb5ff}
.logo span{color:var(--violet-dark)}
.period{color:var(--violet-dark)}
.hero-meta .small,.note-eye,.signature span{color:var(--violet-dark)}
.hero-stage{grid-template-columns:minmax(0,1fr);padding-top:52px}
.hero h1{font-size:clamp(60px,8.4vw,116px)}
.hero-bottom>p{max-width:720px}
.hero-trace{justify-content:flex-start}
/* The duplicated groups have at least viewport width, so movement can't expose a gap. */
.ticker{background:var(--violet);color:#201b27;overflow:hidden;padding:0;border-block:1px solid rgba(35,30,48,.12)}
.ticker-track{display:flex;width:max-content;white-space:nowrap;animation:ticker-slide 36s linear infinite;will-change:transform}
.ticker-repeat{min-width:100vw;width:max-content;display:flex;flex:none;align-items:center;justify-content:space-around;gap:34px;padding:16px 22px;font-size:11px;font-weight:800;letter-spacing:.13em}
.ticker-repeat span{flex:none}
.ticker-repeat span:nth-child(even){font-size:18px;line-height:1}
@keyframes ticker-slide{to{transform:translateX(-50%)}}
@media(hover:hover){.ticker:hover .ticker-track{animation-play-state:paused}}
/* Display attribute must not be overridden by .studio-pulse > span display:flex */
[hidden]{display:none!important}
.studio-pulse{align-items:center;gap:10px 26px}
.studio-pulse .pulse-visits{gap:9px;flex-wrap:wrap}
.studio-pulse .pulse-visits strong{font-size:14px}
.studio-pulse .studio-time time{color:var(--ink);font-size:14px;font-weight:800;letter-spacing:0}
.lab-canvas{transform:none;box-shadow:9px 9px 0 var(--line)}
.lab-canvas:hover{transform:translateY(-2px)}
.lab-canvas[data-style="pop"],.lab-canvas[data-style="noir"]{transform:none}
.lab-canvas[data-style="pop"]:hover,.lab-canvas[data-style="noir"]:hover{transform:translateY(-2px)}
.lab-canvas[data-style="pop"]{--lab-bg:#e7d6fb;--lab-ink:#292333;--lab-accent:#fbdaed}
.lab-canvas[data-style="noir"]{--lab-bg:#242326;--lab-ink:#f9f4ed;--lab-accent:#af9ae3}
.lab-pick span{color:var(--violet-dark)}
/* Smaller, more navigable services and direct access to the live demos */
.service-page{padding-bottom:65px}
.breadcrumbs{padding:22px 0 10px}
.service-switch{display:flex;flex-wrap:wrap;gap:8px;margin:7px 0 13px}
.service-switch a{padding:9px 15px;border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:700;min-height:42px;display:inline-flex;align-items:center;border-radius:40px}
.service-switch a:hover,.service-switch a:focus-visible{border-color:var(--violet-dark);color:var(--ink)}
.service-switch a[aria-current="page"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.service-heading{grid-template-columns:1fr minmax(210px,355px);gap:12px 45px;padding:21px 0 38px}
.service-heading .section-kicker{margin:0 0 10px}
.service-heading h1{font-size:clamp(45px,5.2vw,69px);line-height:1.14;max-width:850px}
.service-heading h1 em{display:inline;font-size:.88em}
.service-lead{font-size:15px;line-height:1.7;align-self:center}
.inline-service-cta{font-size:12px;font-weight:800;letter-spacing:.01em;border-bottom:1px solid var(--violet-dark);width:max-content;padding-bottom:5px;grid-column:1 / -1;color:var(--ink)}
.service-panel{padding:27px 0 29px;gap:30px}
.service-panel h2{font-size:29px}
.feature-list li{padding:10px 0 10px 25px;font-size:14px}
.service-section-header{margin:60px 0 24px}
.service-section-header h2{font-size:clamp(34px,4vw,50px)}
.service-demo{gap:36px}
.browser-preview{height:275px;padding:30px}
.demo-detail h3{font-size:clamp(26px,3vw,36px)}
.service-faq{margin-top:58px;max-width:830px}
.service-faq>h2{font-size:clamp(33px,4vw,45px);margin-bottom:20px}
.service-cta{margin-top:70px;padding:34px 39px}
.service-cta h2{font-size:clamp(28px,3vw,39px)}
.process-demo>div{padding:29px 25px;min-height:180px}
.process-demo h3{margin:22px 0 8px}
.back-link{margin-top:25px}
.email-alternative{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:0;border-bottom:1px solid var(--line);margin-top:10px;width:100%;padding:10px;background:transparent;color:var(--ink);font-weight:700;font-size:12px;text-align:center}
.email-alternative:hover{border-color:var(--violet-dark);color:var(--violet-dark)}
.form-footnote{line-height:1.6}
@media(max-width:1000px){.service-heading{grid-template-columns:1fr;gap:18px}.service-heading .section-kicker{margin-bottom:0}.service-lead{max-width:690px}.inline-service-cta{grid-column:1}}
@media(max-width:700px){.hero-stage{padding-top:37px}.hero h1{font-size:clamp(46px,10.6vw,76px)}.ticker-repeat{gap:28px;padding:14px 18px;font-size:10px}.service-heading{padding:15px 0 30px;gap:14px}.service-heading h1{font-size:clamp(39px,9.2vw,59px)}.service-panel{gap:20px;padding-block:22px}.service-panel h2{font-size:27px}.service-section-header{margin:42px 0 18px}.service-section-header h2{font-size:35px}.service-demo{gap:24px}.service-cta{margin-top:48px;padding:27px 24px}.service-faq{margin-top:49px}.lab-canvas{box-shadow:6px 6px 0 var(--line)}}
@media(max-width:390px){.hero h1{font-size:clamp(40px,11.4vw,52px)}.studio-pulse{line-height:1.8}.service-switch a{padding-inline:11px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none!important}.ticker-repeat:nth-child(2){display:none}}


/* === JOLKA STUDIO / ART DIRECTION V6 ===
   Original logo and typography; new artboard, compact cards and balanced compositions. */
:root { --orange:#9e7ce6; --art-purple:#ae8fe9; --art-lilac:#d7c7f6; --card-paper:#efebeb; }
:root[data-theme="dark"] { --orange:#bfa7fa; --art-purple:#b99aee; --art-lilac:#a385d0; --card-paper:#242325; }
.container{max-width:1280px}
.site-header{min-height:84px}
.logo{letter-spacing:-.095em}
.section-kicker{color:var(--violet-dark)}
.btn-primary:hover{background:var(--violet);color:#201729}
.main-nav a:hover,.footer-links a:hover{color:var(--violet-dark)}
/* Never block actual form elements with floating art. */
.hero{padding-top:31px;padding-bottom:28px}
.hero-meta{font-size:10px}
.hero-duo{display:grid;grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr);gap:clamp(28px,4vw,56px);align-items:center;padding:52px 0 42px}
.hero-left{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.hero-overline{font-size:17px;margin:0 0 18px}
.hero-overline span{color:var(--violet-dark)}
.hero h1{font-size:clamp(55px,5.95vw,88px);line-height:1.02;letter-spacing:-.095em;margin:0 0 27px;max-width:690px}
.hero h1 em{white-space:nowrap}
.hero-description{color:var(--muted);font-size:16px;line-height:1.85;max-width:560px;margin:0 0 27px}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 23px}
.hero-quiet-link{font-size:13px;border-bottom:1px solid var(--violet-dark);font-weight:700;padding:6px 0}
.hero-quiet-link:hover{color:var(--violet-dark)}
.hero-signoff{width:100%;margin-top:51px;display:flex;justify-content:space-between;gap:15px;max-width:565px;border-top:1px solid var(--line);padding-top:15px;font-size:10px;letter-spacing:.1em;font-weight:700;color:var(--muted)}
.hero-right{position:relative;min-width:0;isolation:isolate}
.artboard{background:var(--paper);border:1px solid var(--line);border-radius:3px;box-shadow:16px 16px 0 color-mix(in srgb,var(--violet) 24%,transparent);padding:12px;position:relative;z-index:1;transition:box-shadow .3s ease}
.artboard-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 7px 15px;font-size:10px;font-weight:800;letter-spacing:.11em;color:var(--muted)}
.toolbar-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--violet-dark);vertical-align:middle;margin-right:6px}
.artboard-paper{--poster-bg:#d5c0f7;--poster-ink:#222025;--poster-shape:#f8f0ef;background:var(--poster-bg);color:var(--poster-ink);aspect-ratio:1 / .94;min-height:318px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;padding:24px;position:relative;transition:background .3s,color .3s}
.poster-top,.poster-bottom{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:3;gap:14px;font-size:10px;font-weight:800;letter-spacing:.11em}
.poster-top>span:last-child{font-size:25px}
.poster-center{display:flex;align-items:center;min-height:180px;position:relative;z-index:1}
.poster-center>strong{font:700 clamp(50px,5.2vw,79px)/.92 'Space Grotesk',sans-serif;letter-spacing:-.095em;position:relative;z-index:3}
.poster-center>strong i{font-family:Georgia,serif;font-weight:400;letter-spacing:-.09em}
.poster-circle{position:absolute;z-index:0;border-radius:50%;width:70%;aspect-ratio:1;right:-20%;top:-58%;background:var(--poster-shape);transition:transform .6s,border-radius .5s,background .3s}
.poster-spark{position:absolute;right:5%;bottom:-19%;font-size:145px;line-height:1;color:var(--poster-shape);transform:rotate(-15deg);transition:transform .5s}
.poster-bottom{align-items:flex-end;letter-spacing:0;font-size:13px;line-height:1.3}
.poster-symbol{font-size:36px}
.artboard-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:15px 4px 1px;font-size:10px;font-weight:800;letter-spacing:.1em}
.mood-switch{display:flex;gap:6px}
.mood-btn{background:transparent;color:var(--ink);border:1px solid var(--line);font:800 11px/1 'Space Grotesk',sans-serif;padding:10px 12px;min-width:44px;min-height:42px;transition:background .2s,border-color .2s}
.mood-btn.is-on,.mood-btn:hover{background:var(--violet);color:#211a25;border-color:var(--violet)}
.artboard[data-mood="02"] .artboard-paper{--poster-bg:#272629;--poster-ink:#f8f2ee;--poster-shape:#ad8ade}
.artboard[data-mood="03"] .artboard-paper{--poster-bg:#eee7de;--poster-ink:#28202b;--poster-shape:#bba2f1}
.artboard[data-mood="02"] .poster-circle{border-radius:10%;transform:rotate(35deg) translateY(10px)}
.artboard[data-mood="03"] .poster-circle{border-radius:16%;transform:rotate(-12deg) scale(1.2)}
.artboard[data-mood="02"] .poster-spark{transform:rotate(35deg)}
.artboard[data-mood="03"] .poster-spark{transform:rotate(65deg)}
.hero-mini-row{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:24px 0 0 18px}
.micro-card{height:126px;border:1px solid var(--line);padding:14px;background:var(--paper);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.micro-label,.mini-art-label,.mini-art-caption{font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--muted)}
.micro-card strong{font-size:22px;line-height:1.05;letter-spacing:-.05em}
.micro-card strong em{color:var(--violet-dark)}
.micro-arrow{position:absolute;bottom:12px;right:12px;font-size:21px;color:var(--violet-dark)}
.mini-art{background:var(--ink);color:var(--bg)}
.mini-art-label,.mini-art-caption{color:var(--bg)}
.mini-art-window{width:90%;height:39px;border:1px solid color-mix(in srgb,var(--bg) 40%,transparent);display:flex;gap:6px;padding:8px}
.mini-art-window span{background:var(--violet);width:33%;transform:skew(-8deg)}
.mini-art-window span:nth-child(2){width:24%;background:var(--bg)}
.mini-art-window span:nth-child(3){width:43%;background:#7e65ac}
.hero-trace{justify-content:flex-start;padding-top:14px}
.studio-pulse{display:flex;gap:12px 23px;padding-top:12px}
.studio-ribbon{display:flex;gap:clamp(13px,4vw,55px);justify-content:center;align-items:center;padding:18px 12px;background:var(--violet);color:#29222b;border-block:1px solid rgba(0,0,0,.08);font-size:11px;font-weight:800;letter-spacing:.14em}
.studio-ribbon span:first-child,.studio-ribbon span:last-child{font-size:20px}
/* compact, truly three-dimensional offer gallery */
.offer-block{padding-top:70px;padding-bottom:72px}
.offer-title{margin-bottom:33px}
.offer-title h2{font-size:clamp(42px,5.5vw,72px)}
.offer-title p{max-width:350px}
.offer-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;border:0}
.offer-item{display:flex;min-width:0;min-height:0;flex-direction:column;align-items:stretch;gap:0;position:relative;padding:13px;background:var(--offer);border:1px solid var(--offer-line);color:var(--offer-ink);transition:transform .2s,border-color .2s,box-shadow .2s;overflow:hidden}
.offer-item:hover,.offer-item:focus-visible{transform:translateY(-6px);border-color:var(--violet);box-shadow:9px 9px 0 rgba(166,131,224,.23)}
.offer-num{position:absolute;top:23px;left:25px;z-index:4;background:var(--offer);color:var(--violet);font-size:10px;border-radius:20px;padding:5px 9px;letter-spacing:.08em}
.offer-preview{height:clamp(166px,16vw,210px);width:100%;position:relative;overflow:hidden;margin-bottom:22px;display:flex;flex-direction:column}
.preview-one{background:#e5d7f6;color:#29222d;display:flex;align-items:center;justify-content:center}
.pv-top{position:absolute;top:12px;right:12px;display:flex;gap:4px}.pv-top i{width:5px;height:5px;border-radius:50%;background:#6e527e}
.pv-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:70%;margin-top:14px}
.pv-text b{font:700 clamp(43px,5vw,64px)/1 'Space Grotesk';letter-spacing:-.1em}.pv-text span{font-size:13px;line-height:1.3}.pv-line{position:absolute;bottom:20px;width:70%;height:2px;background:#29222d}
.preview-two{background:#d9d6eb;align-items:center;justify-content:center}
.pv-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:65%;height:80%;transform:rotate(-6deg)}
.pv-grid i{display:grid;place-items:center;background:#32283b;color:#eadffa;font:normal 39px/1 'Space Grotesk';font-style:normal}
.pv-grid i:nth-child(2){background:#a27ccc;color:#2b2133}.pv-grid i:nth-child(3){background:#f2e9f4}.pv-grid i:nth-child(4){background:#5c506f}
.pv-side-label{position:absolute;bottom:10px;right:9px;color:#32283b;font-size:8px;font-weight:800;letter-spacing:.16em}
.preview-three{background:#e4e0e6;align-items:flex-start;justify-content:center;padding:28px}
.pv-code{position:relative;z-index:2;display:flex;flex-direction:column;gap:10px;color:#302a35;font:700 clamp(13px,1.5vw,19px)/1.1 monospace;letter-spacing:-.05em}
.pv-code span{color:#70518d}.pv-code b{font-weight:700}
.pv-ring{position:absolute;width:104px;height:104px;border:13px solid #ad97cc;right:-18px;bottom:-31px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:#6b4d8f}
.offer-copy{width:100%;display:flex;flex-direction:column;gap:10px;padding:0 12px 18px;flex:1}
.offer-copy strong{font-size:clamp(20px,2.1vw,27px);line-height:1.13;letter-spacing:-.06em}
.offer-copy small{font-size:14px;line-height:1.6;color:var(--offer-muted);min-height:67px}
.offer-more{margin-top:auto;color:var(--violet);font-size:11px;font-weight:800;letter-spacing:.02em}
.offer-icon{position:absolute;bottom:27px;right:23px;font-size:23px;transform:translateY(0);transition:transform .2s;color:var(--violet)}
.offer-item:hover .offer-icon{transform:translate(3px,-3px)}
.offer-tail{padding-top:25px}
/* About as editorial text with a controlled art stamp on the side */
.about{padding-top:91px;padding-bottom:91px}
.about-content{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(185px,.7fr);gap:32px;align-items:center}
.about-content>h2{font-size:clamp(44px,5vw,68px);line-height:1.1}
.about-description p{font-size:15px;line-height:1.85}
.about-tile{background:var(--violet);color:#242029;min-height:230px;display:flex;flex-direction:column;justify-content:space-between;padding:19px;position:relative;overflow:hidden;transform:rotate(3deg);transition:transform .25s}
.about-tile:hover{transform:rotate(0deg)}
.about-tile>span,.about-tile small{font-size:9px;font-weight:800;letter-spacing:.1em}
.about-tile-art{position:absolute;right:-13px;top:15px;line-height:1;font-size:190px;color:rgba(255,255,255,.5);transform:rotate(-22deg)}
.about-tile strong{position:relative;z-index:1;font:400 italic 38px/1 Georgia,serif;letter-spacing:-.06em;margin-top:110px}
.about-tile small{position:relative;z-index:1;letter-spacing:0;line-height:1.4}
/* Process: three short geometric squares instead of empty oversize lines. */
.process-section{padding-top:88px;padding-bottom:92px}
.process-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:28px}
.process-heading h2{font-size:clamp(42px,5vw,67px);line-height:1.08;letter-spacing:-.07em;margin-bottom:0}
.process-heading>p{max-width:290px;color:var(--muted);line-height:1.7;font-size:15px;margin:0 0 8px}
.process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.process-card{aspect-ratio:1.16;min-height:215px;border:1px solid var(--line);background:var(--paper);padding:23px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .2s,box-shadow .2s}
.process-card:hover{transform:translateY(-4px);box-shadow:8px 8px 0 color-mix(in srgb,var(--violet) 35%,transparent)}
.process-card-top{position:absolute;top:18px;left:23px;right:23px;display:flex;justify-content:space-between;color:var(--muted);font-size:12px;font-weight:800}
.process-glyph{position:absolute;right:32px;top:22%;font:100px/1 'Space Grotesk',sans-serif;color:var(--violet-dark);opacity:.67;transform:rotate(-15deg)}
.glyph-two{transform:rotate(15deg)}.glyph-three{transform:rotate(-20deg)}
.process-card h3{position:relative;z-index:1;font-size:24px;margin-bottom:8px;letter-spacing:-.05em}
.process-card p{position:relative;z-index:1;color:var(--muted);font-size:14px;line-height:1.55;max-width:245px;margin-bottom:0}
/* Lab with controlled heights */
.lab-section{padding-block:67px 95px;gap:60px}
.lab-intro h2{font-size:clamp(42px,5.2vw,68px)}
.lab-canvas{min-height:310px;aspect-ratio:1.28}
/* A softer, less sprawling contact */
.contact-zone{padding-top:80px;padding-bottom:85px}
.contact-aside h2{font-size:clamp(43px,5.5vw,74px)}
.contact-form{border-radius:3px}
/* Service pages: art preview on right, copy left. */
.service-heading{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(225px,.75fr);column-gap:clamp(30px,6vw,95px);align-items:center;position:relative;padding-block:32px 36px}
.service-heading>.section-kicker{grid-column:1;grid-row:1;align-self:end}
.service-heading>h1{grid-column:1;grid-row:2;font-size:clamp(41px,4.7vw,65px);margin:0;line-height:1.08}
.service-heading>.service-lead{grid-column:1;grid-row:3;max-width:570px;margin:16px 0 0;line-height:1.75}
.service-heading>.inline-service-cta{grid-column:1;grid-row:4;margin-top:20px}
.service-art{grid-column:2;grid-row:1 / 5;align-self:stretch;min-height:284px;padding:23px;background:var(--violet);color:#2b2431;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.service-art-top,.service-art-bottom{font-size:10px;font-weight:800;letter-spacing:.1em;position:relative;z-index:2}
.service-art-symbol{font-size:clamp(100px,14vw,194px);line-height:.8;position:absolute;right:-11px;top:53px;color:rgba(255,255,255,.48);transform:rotate(23deg)}
.service-art strong{font-size:clamp(20px,2.7vw,33px);line-height:1.1;max-width:260px;letter-spacing:-.05em;position:relative;z-index:1}
.service-art-two{background:#d6c9f1}.service-art-three{background:#ccb3ed}
.service-panel{margin-top:12px}
/* Keep working on screens: tablet stacks hero; cards collapse cleanly. */
@media(max-width:1090px){
 .hero-duo{grid-template-columns:minmax(0,1fr) minmax(0,.94fr);gap:25px}
 .hero h1{font-size:clamp(51px,5.6vw,74px)}
 .poster-center>strong{font-size:clamp(45px,5vw,64px)}
 .hero-mini-row{margin-left:0}
 .about-content{grid-template-columns:1fr 1fr}.about-tile{grid-column:2;min-height:175px}.about-tile strong{margin-top:50px}
}
@media(max-width:840px){
 .hero-duo{grid-template-columns:1fr;gap:33px;padding-top:36px}
 .hero h1{font-size:clamp(57px,9.5vw,89px);max-width:760px}
 .hero-right{max-width:670px;width:100%;margin-inline:auto}
 .artboard-paper{aspect-ratio:1.36;min-height:310px}
 .poster-center>strong{font-size:clamp(58px,9vw,90px)}
 .hero-signoff{margin-top:31px}
 .offer-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .offer-item:last-child{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);align-items:center;gap:8px}
 .offer-item:last-child .offer-preview{grid-row:1;grid-column:1;margin:0}
 .offer-item:last-child .offer-copy{grid-row:1;grid-column:2}
 .offer-item:last-child .offer-icon{bottom:20px}
 .process-grid{gap:10px}.process-card{padding:18px;min-height:210px}.process-card h3{font-size:20px}
 .service-heading{grid-template-columns:1fr minmax(180px,.8fr)}
 .service-heading>h1{font-size:clamp(38px,5.3vw,56px)}
 .service-art{min-height:260px}
}
@media(max-width:700px){
 .container{width:calc(100% - 36px)}
 .site-header{min-height:72px;gap:13px}
 .logo{font-size:23px}
 .hero{padding-top:17px}
 .hero-meta{font-size:8px}
 .hero-meta>span:last-child{display:none}
 .hero-duo{padding-top:30px;padding-bottom:29px}
 .hero h1{font-size:clamp(46px,11.3vw,77px);line-height:1.045;margin-bottom:21px}
 .hero h1 em{white-space:normal}
 .hero-overline{font-size:15px}
 .hero-description{font-size:15px;line-height:1.7}
 .hero-actions{gap:13px 19px}
 .hero-signoff{margin-top:33px}
 .artboard{padding:9px;box-shadow:9px 9px 0 color-mix(in srgb,var(--violet) 28%,transparent)}
 .artboard-paper{aspect-ratio:1.05;min-height:275px;padding:19px}
 .poster-center>strong{font-size:clamp(48px,11vw,74px)}
 .hero-mini-row{gap:9px;margin-top:17px}
 .micro-card{height:112px;padding:12px}.micro-card strong{font-size:19px}
 .studio-ribbon{gap:11px;font-size:9px;letter-spacing:.05em;flex-wrap:wrap;padding:14px 10px}
 .studio-ribbon span:first-child,.studio-ribbon span:last-child{font-size:16px}
 .about{padding-block:69px}.about-content{grid-template-columns:1fr;gap:25px}.about-tile{grid-column:1;max-width:325px;min-height:180px}.about-tile-art{right:-10px}.about-tile strong{margin-top:55px}
 .offer-block{padding-top:56px;padding-bottom:60px}
 .offer-title{margin-bottom:24px}.offer-list{grid-template-columns:1fr;gap:12px}
 .offer-item,.offer-item:last-child{display:flex;grid-column:auto;padding:12px;gap:0}
 .offer-item:last-child .offer-preview,.offer-item:last-child .offer-copy{grid-row:auto;grid-column:auto}
 .offer-preview,.offer-item:last-child .offer-preview{height:210px;margin-bottom:20px}
 .offer-copy{padding:0 10px 18px}.offer-copy small{min-height:0}.offer-icon{bottom:18px;right:17px}
 .process-section{padding-block:62px 66px}.process-heading{flex-direction:column;align-items:flex-start;gap:15px}.process-heading>p{max-width:480px}
 .process-grid{grid-template-columns:1fr;gap:11px}.process-card{aspect-ratio:auto;min-height:185px;padding:23px}.process-glyph{top:24%;font-size:95px}
 .lab-section{padding-block:55px 80px}.lab-canvas{aspect-ratio:1.03;min-height:300px}
 .contact-zone{padding-block:65px}
 .service-heading{grid-template-columns:1fr;gap:12px}
 .service-heading>.section-kicker,.service-heading>h1,.service-heading>.service-lead,.service-heading>.inline-service-cta{grid-column:1;grid-row:auto}
 .service-heading>.service-lead{margin-top:0}.service-heading>.inline-service-cta{margin-top:0}
 .service-art{grid-column:1;grid-row:auto;min-height:185px;margin-top:12px}
 .service-art-symbol{font-size:142px;top:25px}.service-art strong{font-size:29px}
}
@media(max-width:390px){.hero h1{font-size:clamp(39px,10.6vw,48px)}.artboard-paper{min-height:245px}.poster-center>strong{font-size:clamp(43px,11vw,53px)}.poster-spark{font-size:115px}.hero-mini-row{grid-template-columns:1fr 1fr}.micro-card{height:111px}.micro-card strong{font-size:17px}.micro-label,.mini-art-label,.mini-art-caption{font-size:8px}.artboard-toolbar,.artboard-footer{font-size:9px}.hero-signoff{font-size:9px}}
@media(prefers-reduced-motion:reduce){.artboard-paper,.poster-circle,.poster-spark,.offer-item,.process-card,.about-tile{transition:none!important;animation:none!important}}
/* V6 final mobile QA: predictable navigation and no 320px horizontal scrolling. */
.lab-canvas{min-width:0;max-width:100%}
@media(max-width:700px){
  .site-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 10px;padding-block:14px;align-items:center}
  .site-header>.logo{grid-column:1;grid-row:1}
  .site-header>.theme-toggle{grid-column:2;grid-row:1;justify-self:end}
  .site-header>.main-nav{grid-column:1 / -1;grid-row:2;display:flex;width:100%;justify-content:space-between;gap:10px;order:initial;padding-top:6px}
  .site-header>.main-nav a{display:inline-flex!important;align-items:center;justify-content:center;min-height:36px}
}
@media(max-width:390px){
  .lab-canvas{padding-inline:16px}
  .lab-canvas-body>strong{font-size:clamp(36px,10vw,50px)}
  .lab-shape{right:-.35em}
}


/* v7 showcase refinements */
.demo-stack{position:relative;min-height:430px;padding-right:48px}.demo-window{border:1px solid var(--line);background:var(--paper);box-shadow:12px 12px 0 rgba(0,0,0,.06)}.demo-window-main{overflow:hidden}.demo-window-float{position:absolute;right:0;bottom:-18px;width:220px}.demo-shot{padding:34px;min-height:340px;display:flex;flex-direction:column;justify-content:space-between}.demo-shot-kicker{font-size:12px;letter-spacing:.15em;text-transform:lowercase}.demo-shot strong{font-size:clamp(42px,4.5vw,66px);line-height:.95;letter-spacing:-.07em}.demo-shot strong em{font-style:italic;font-weight:400}.demo-shot p{margin:0;color:inherit;opacity:.78;line-height:1.7}.olive-main{background:#e6ebde;color:#324336}.olive-main strong{font-family:Georgia,serif;font-weight:700}.olive-main strong em{color:#9e7660}.olive-mini{background:#314538;color:#f6f0e6;min-height:auto;padding:22px}.olive-mini small,.noir-mini small{font-size:11px;letter-spacing:.16em;text-transform:uppercase}.olive-mini ul,.noir-mini ul{margin:12px 0 0;padding-left:18px;line-height:1.85}.noir-main{background:#1a1b21;color:#f5f4f0}.noir-main strong{font-family:'Space Grotesk',sans-serif}.noir-main strong em{color:#c8acec}.noir-mini{background:#242630;color:#f1eff8;min-height:auto;padding:22px}.demo-tags{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 24px}.demo-tags span{border:1px solid var(--line);padding:8px 12px;font-size:11px;font-weight:700;letter-spacing:.08em}.demo-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.text-link{font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:4px}.service-demo-showcase{align-items:center}.service-demo-showcase .demo-detail h3{margin-top:15px}.service-demo-showcase .demo-detail p{margin-bottom:0}
@media(max-width:700px){.demo-stack{min-height:0;padding-right:0;padding-bottom:90px}.demo-window-float{width:170px;right:14px;bottom:0}.demo-shot{min-height:270px;padding:24px}.demo-shot strong{font-size:40px}.demo-tags{gap:8px}.demo-tags span{font-size:10px;padding:7px 10px}}

/* -----------------------------------------------------------
   Jolka Studio v8 | Projects-first art direction and accessibility
   ----------------------------------------------------------- */
.projects-section{padding-top:76px;padding-bottom:94px;scroll-margin-top:90px}
.projects-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:35px}
.projects-heading h2{font-size:clamp(49px,5.8vw,78px);line-height:1.02;letter-spacing:-.09em;margin:18px 0 0}
.projects-heading h2 em{color:var(--violet-dark)}
.projects-heading>p{max-width:355px;font-size:15px;line-height:1.8;color:var(--muted);margin:0 0 5px}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.project-card{min-width:0;display:flex;flex-direction:column}
.project-image{display:block;overflow:hidden;position:relative;aspect-ratio:1.57;background:#e8e6df;border:1px solid var(--line);isolation:isolate}
.project-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .42s cubic-bezier(.2,.7,.25,1);}
.project-image:hover img,.project-image:focus-visible img{transform:scale(1.035)}
.project-image-arrow{position:absolute;right:20px;bottom:20px;z-index:2;width:46px;height:46px;display:grid;place-items:center;color:#fff;background:#252326;font-size:25px;transition:transform .2s}
.project-image:hover .project-image-arrow{transform:translate(3px,-3px)}
.project-card-foot{display:flex;align-items:end;justify-content:space-between;gap:14px;padding:23px 0 0}
.project-type{font-size:10px;letter-spacing:.13em;font-weight:800;color:var(--violet-dark)}
.project-card h3{font-size:clamp(25px,2.5vw,35px);letter-spacing:-.07em;margin:8px 0 7px}
.project-card p{color:var(--muted);font-size:13px;line-height:1.7;max-width:320px;margin:0}
.project-open{font-size:12px;font-weight:800;white-space:nowrap;border-bottom:1px solid var(--line);padding-bottom:6px;transition:color .18s}
.project-open:hover{color:var(--violet-dark)}
.project-disclosure{color:var(--muted);font-size:12px;line-height:1.8;margin:28px 0 0}
/* Height and density: surface projects early, not hidden below redundant badges. */
.hero-duo{padding-top:40px;padding-bottom:19px}
.hero{padding-bottom:22px}
.hero-description{font-size:15px;line-height:1.78}
.hero h1{margin-bottom:23px}
.hero-actions{margin-top:21px}
.hero-trace{margin-top:0}
.about.section{padding-top:90px;padding-bottom:90px}
.process-section.section{padding-top:90px;padding-bottom:100px}
.contact-zone{padding-top:89px;padding-bottom:95px}
/* Ensure strong focus and readable small labels. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--violet-dark);outline-offset:3px}
.hero-meta,.poster-top,.poster-bottom,.artboard-toolbar,.artboard-footer,.micro-label,.studio-pulse,.process-card-top,.project-type{font-size:max(11px, .69rem)}
.contact-form .form-intro{font-size:13px;line-height:1.75}
/* Compact but more demonstrative service example section */
.service-demo-showcase .demo-window-main{position:relative}
.service-demo-showcase .demo-stack{max-width:700px}
.service-demo-showcase .demo-window-float{box-shadow:6px 6px 0 rgba(0,0,0,.1)}
.service-demo-showcase .demo-detail h3{font-size:clamp(28px,3.2vw,43px)}
.service-demo-showcase .demo-tags span{white-space:normal}
@media(max-width:1000px){.projects-section{padding-top:65px;padding-bottom:76px}.project-card-foot{flex-direction:column;align-items:start;gap:16px}.hero-duo{padding-top:32px}.projects-heading>p{max-width:290px}}
@media(max-width:700px){.projects-section{padding-top:55px;padding-bottom:64px}.projects-heading{display:block;margin-bottom:26px}.projects-heading h2{font-size:clamp(43px,11vw,67px)}.projects-heading>p{margin:18px 0 0;max-width:100%;font-size:14px}.project-grid{grid-template-columns:1fr;gap:40px}.project-image{aspect-ratio:1.52}.project-card-foot{flex-direction:row;align-items:start;gap:12px;padding-top:15px}.project-card h3{font-size:27px}.project-card p{font-size:12px}.project-open{font-size:11px}.project-disclosure{font-size:12px;margin-top:25px}.hero-duo{padding-top:26px;padding-bottom:20px;gap:26px}.hero-overline{margin-bottom:12px}.hero h1{font-size:clamp(43px,10.8vw,69px);margin-bottom:17px}.hero-description{font-size:14px;line-height:1.7}.hero-actions{margin-top:17px;gap:14px}.hero-meta{font-size:11px}.hero-right{max-width:520px}.artboard-paper{min-height:340px}.hero-trace{padding-top:14px}.about.section,.process-section.section{padding-top:69px;padding-bottom:70px}.contact-zone{padding-top:70px;padding-bottom:75px}.service-demo-showcase .demo-stack{padding-bottom:74px}.service-demo-showcase .demo-detail{padding-top:4px}}
@media(max-width:390px){.project-card-foot{flex-direction:column;gap:10px}.hero h1{font-size:clamp(41px,11.25vw,53px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.project-image img,.project-image-arrow,.project-card,.btn{transition:none!important;transform:none!important}}

/* v8 service preview cards, using true screenshots of working showcase pages */
.live-demo-visual{background:var(--paper);border:1px solid var(--line);padding:0;overflow:hidden}
.live-demo-visual .browser-top{padding:13px 15px;margin:0;background:var(--paper)}
.live-demo-image{display:block;position:relative;aspect-ratio:1.5;overflow:hidden;background:#e7e4e0}
.live-demo-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .35s ease}
.live-demo-image:hover img,.live-demo-image:focus-visible img{transform:scale(1.04)}
.live-demo-image-action{position:absolute;bottom:16px;right:16px;display:grid;place-items:center;width:46px;height:46px;background:#28232b;color:#fff;font-size:23px}
@media(max-width:700px){.live-demo-image{aspect-ratio:1.4}}
/* On very small phones, do not let grid children force the whole layout wider. */
@media(max-width:390px){
.hero-duo{grid-template-columns:minmax(0,1fr)}
.hero-left,.hero-right,.artboard,.artboard-paper,.poster-center{min-width:0;max-width:100%}
.artboard-paper{aspect-ratio:auto;min-height:292px;padding:16px}
.poster-center>strong{font-size:clamp(36px,11vw,44px)}
.poster-spark{font-size:95px}
.poster-top,.poster-bottom{min-width:0}
.about-tile{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){.live-demo-image img{transition:none!important;transform:none!important}}


/* v9 compact refinements */
.container{max-width:1180px}
.projects-section{padding-top:54px;padding-bottom:76px}
.projects-heading{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,360px);align-items:end;gap:24px;margin-bottom:28px}
.projects-heading>div,.projects-heading>p{min-width:0}
.projects-heading h2{font-size:clamp(44px,5vw,70px);margin-top:14px}
.projects-heading>p{max-width:32ch;font-size:14px;line-height:1.7;margin:0 0 4px auto}
.project-grid{gap:18px;align-items:stretch}
.project-card{border:1px solid var(--line);background:rgba(255,255,255,.02);padding:12px;min-width:0}
.project-image{aspect-ratio:1.68;border:0}
.project-card-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end;padding:18px 2px 4px}
.project-card h3{font-size:clamp(24px,2.1vw,31px);margin:7px 0 6px}
.project-card p{max-width:35ch;font-size:13px;line-height:1.65}
.project-open{align-self:end}
.project-disclosure{margin-top:18px;font-size:11px;max-width:72ch}
.offer-block{padding:86px 0 72px}
.offer-title{align-items:end;gap:22px;margin:24px 0 30px}
.offer-title h2{font-size:clamp(48px,5vw,72px)}
.offer-title p{max-width:31ch;font-size:15px;line-height:1.7}
.offer-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;border-top:0}
.offer-item{grid-template-columns:1fr;align-items:start;gap:0;padding:14px 14px 16px;border:1px solid var(--offer-line);background:rgba(255,255,255,.03);min-width:0}
.offer-item:hover,.offer-item:focus-visible{padding:14px 14px 16px;transform:translateY(-2px);background:rgba(255,255,255,.05)}
.offer-num{display:inline-flex;margin-bottom:12px}
.offer-preview{height:180px;margin-bottom:16px;border:1px solid rgba(0,0,0,.08)}
.offer-copy{gap:8px;min-width:0}
.offer-copy strong{font-size:clamp(24px,2.5vw,34px);line-height:1.15}
.offer-copy small{font-size:13px;line-height:1.65}
.offer-more{margin-top:8px}
.offer-icon{justify-self:end;font-size:24px;margin-top:10px}
.offer-tail{padding-top:22px;font-size:10px;gap:14px}
.about.section{padding-top:82px}
.about-content{gap:36px}
.about h2{font-size:clamp(44px,4.7vw,72px)}
.about-description p{font-size:15px;line-height:1.8}
@media(max-width:980px){
  .projects-heading{grid-template-columns:1fr;gap:14px}
  .projects-heading>p{max-width:44ch;margin:0}
  .project-card-foot{grid-template-columns:1fr;align-items:start}
  .offer-list{grid-template-columns:1fr;gap:14px}
  .offer-item{grid-template-columns:36px minmax(0,1fr) 22px;gap:12px;padding:18px 0;border-width:0 0 1px 0;background:transparent}
  .offer-item:hover,.offer-item:focus-visible{padding:18px 0;background:transparent;transform:none}
  .offer-preview{grid-column:2;order:1;height:160px;margin:8px 0 12px}
  .offer-copy{grid-column:2;order:2}
  .offer-icon{grid-column:3;grid-row:1 / span 3;align-self:start;justify-self:end;margin-top:0;font-size:22px}
  .offer-num{margin:0;grid-row:1 / span 3}
}
@media(max-width:700px){
  .projects-section{padding-top:34px;padding-bottom:56px}
  .projects-heading h2{font-size:clamp(40px,10.4vw,58px)}
  .project-grid{grid-template-columns:1fr;gap:14px}
  .project-card{padding:10px}
  .project-image{aspect-ratio:1.45}
  .project-card-foot{padding-top:14px;gap:10px}
  .offer-block{padding:68px 0 56px}
  .offer-title p{font-size:14px}
  .about.section{padding-top:64px}
}
@media(max-width:350px){
  .project-image-arrow{right:12px;bottom:12px;width:40px;height:40px;font-size:20px}
  .offer-preview{height:145px}
}