@font-face{font-family:Fraunces;src:url(/ukazky-webu/fonts/fraunces.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/ukazky-webu/fonts/dmsans.woff2) format("woff2");font-weight:300 800;font-display:swap}
:root{--paper:#F4EEE3;--paper2:#EBE2D2;--oak:#B9773E;--walnut:#4A2E1D;--ink:#231A14;--moss:#5D6B4A}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 "DM Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}.w{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:500;letter-spacing:-.02em;line-height:1.02;margin:0;font-variation-settings:"SOFT" 60,"opsz" 120}
.hd{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.logo{display:flex;gap:12px;align-items:center;text-decoration:none;font-family:Fraunces,serif;font-size:21px;font-weight:600}
.logo i{width:38px;height:38px;border-radius:50%;background:var(--walnut);display:grid;place-items:center;color:var(--paper);font-style:normal;font-size:17px}
.nav{display:flex;gap:30px;font-size:15px}.nav a{text-decoration:none;position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.mb{display:none;background:none;border:1px solid var(--ink);border-radius:99px;padding:8px 16px;font:inherit;font-size:14px;color:inherit}
.hero{padding:clamp(40px,8vw,110px) 0 clamp(50px,7vw,90px);position:relative}
.hero h1{font-size:clamp(50px,9.6vw,148px);max-width:12ch}
.hero h1 em{font-style:normal;color:var(--oak)}
.hero-row{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-top:clamp(28px,4vw,56px)}
.lead{font-size:clamp(18px,1.6vw,21px);max-width:34ch;margin:0}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--walnut);color:var(--paper);text-decoration:none;padding:16px 26px;border-radius:99px;font-weight:600;transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s}
.btn:hover{background:var(--ink)}.btn .ar{transition:transform .35s}.btn:hover .ar{transform:translateX(5px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.plank{margin-top:clamp(40px,6vw,80px);height:clamp(200px,34vw,460px);border-radius:28px;overflow:hidden;position:relative;background:var(--oak)}
.plank svg{position:absolute;inset:-10% 0;width:100%;height:120%}
.plank .tag{position:absolute;left:24px;bottom:22px;background:var(--paper);padding:8px 14px;border-radius:99px;font-size:13px}
.sec{padding:clamp(70px,10vw,140px) 0}.sec.dark{background:var(--walnut);color:var(--paper)}
.kick{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--oak);display:block;margin-bottom:18px}
.sec h2{font-size:clamp(36px,5.4vw,76px);max-width:16ch}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.card{background:var(--paper2);border-radius:22px;padding:30px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .5s cubic-bezier(.2,.7,.2,1),background .4s}
.card:hover{transform:translateY(-6px) rotate(-.4deg);background:#E4D8C3}
.card svg{width:76px;height:76px}.card h3{font-size:30px;margin:18px 0 10px}.card p{margin:0;font-size:16px;opacity:.85}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:60px;border-top:1px solid rgba(244,238,227,.25)}
.steps li{list-style:none;padding:28px 24px 0 0;position:relative}
.steps li::before{counter-increment:s;content:"0" counter(s);font-family:Fraunces,serif;font-size:54px;color:var(--oak);display:block;line-height:1;margin-bottom:16px}
.steps li::after{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--oak);transition:width 1.2s cubic-bezier(.7,0,.2,1) calc(var(--d,0s) + .3s)}
.steps li.in::after{width:100%}
.steps h3{font-size:24px;margin-bottom:8px}.steps p{margin:0;opacity:.8;font-size:15.5px}
.marq{overflow:hidden;white-space:nowrap;border-block:1px solid rgba(35,26,20,.2);padding:22px 0;font-family:Fraunces,serif;font-size:clamp(28px,4vw,52px)}
.marq div{display:inline-block;animation:mq 38s linear infinite}.marq span{margin:0 28px;color:var(--oak)}
@keyframes mq{to{transform:translateX(-50%)}}
.proj{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;margin-top:56px}
.pj{grid-column:span 6;text-decoration:none}.pj:nth-child(3n){grid-column:span 12}
.pj .im{border-radius:22px;overflow:hidden;aspect-ratio:16/11;background:var(--paper2);position:relative}
.pj:nth-child(3n) .im{aspect-ratio:21/9}
.pj .im svg{width:100%;height:100%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}.pj:hover .im svg{transform:scale(1.05)}
.pj h3{font-size:28px;margin:16px 0 4px}.pj p{margin:0;opacity:.75;font-size:15px}
.cta{text-align:center}.cta h2{margin:0 auto 26px}.cta p{max-width:44ch;margin:0 auto 32px}
.ft{padding:44px 0;border-top:1px solid rgba(35,26,20,.15);font-size:14px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.faq details{border-top:1px solid rgba(35,26,20,.2);padding:22px 0}.faq summary{cursor:pointer;font-family:Fraunces,serif;font-size:24px;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::after{content:"+";transition:transform .35s}.faq details[open] summary::after{transform:rotate(45deg)}.faq p{margin:12px 0 0;max-width:60ch}
.ph{padding:clamp(40px,7vw,90px) 0 20px}.ph h1{font-size:clamp(46px,8vw,120px)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.contact-box{background:var(--paper2);border-radius:22px;padding:34px}.contact-box dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 22px}.contact-box dt{opacity:.6}.contact-box dd{margin:0}
@media(max-width:900px){.svc,.steps{grid-template-columns:1fr 1fr}.hero-row,.two{grid-template-columns:1fr}.btns{justify-content:flex-start}}
@media(max-width:640px){.nav{position:fixed;inset:0;z-index:90;background:var(--walnut);color:var(--paper);flex-direction:column;justify-content:center;align-items:flex-start;padding:40px;gap:16px;font-family:Fraunces,serif;font-size:42px;clip-path:circle(0 at 92% 6%);transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
.nav.open{clip-path:circle(150% at 92% 6%)}.mb{display:block;position:relative;z-index:95}body.menu-open .mb{color:var(--paper);border-color:var(--paper)}
.svc,.steps{grid-template-columns:1fr}.pj{grid-column:span 12}.card{min-height:0}.steps li{padding-right:0;padding-bottom:22px}}