/* Homepage layout; the original palette, type and artwork remain in main.min.css. */
html{scroll-behavior:smooth;scroll-padding-top:100px}
body[data-onepage]{overflow-x:clip}
[data-onepage] section{scroll-margin-top:100px}
#wypas{padding-top:50px;padding-bottom:70px}
#wypas>div.flex.w-full{padding-top:30px;margin-bottom:64px}
.service-detail{font-size:16px;line-height:1.6;color:#fff;margin-top:18px;padding-left:16px;border-left:4px solid #FD3583;font-weight:500}
#carousel-arrow-left,#carousel-arrow-right{display:none}
#testimonial-carousel{overscroll-behavior-x:contain;scroll-snap-type:x mandatory}
#testimonial-carousel>div{flex:0 0 calc(50% - 16px);min-width:0!important;scroll-snap-align:start}
#obora{padding-bottom:110px}
.xray-section{max-width:1152px;margin:0 auto;padding:64px 32px 100px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.xray-copy h2{font-weight:900;font-size:clamp(36px,5vw,64px);line-height:1.05;color:#FFCC00;margin:24px 0;transform:rotate(-2deg)}
.xray-copy p{line-height:1.6;font-weight:700}
.xray-eyebrow{font-size:28px;font-style:italic;background:#000;width:max-content;padding:4px 12px;transform:rotate(-6deg)}
.xray-eyebrow span{background:#c6f135;color:#000;padding:0 4px}
#xray-help{font-size:14px;max-width:400px}
#xray-stage{position:relative;aspect-ratio:1;background:#000;border:5px solid #000;box-shadow:10px 10px #fe00fe;overflow:hidden;touch-action:pan-y;--x:50%;--y:50%;--radius:85px}
#xray-stage.is-active{cursor:none}
#xray-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none}
#xray-reveal{clip-path:circle(0 at var(--x) var(--y))}
#xray-stage.is-active #xray-reveal{clip-path:circle(var(--radius) at var(--x) var(--y))}
#xray-lens{display:none;position:absolute;left:var(--x);top:var(--y);width:calc(var(--radius)*2);height:calc(var(--radius)*2);transform:translate(-50%,-50%);border:4px solid #fe00fe;border-radius:50%;pointer-events:none;box-shadow:0 0 0 3px #000}
#xray-stage.is-active #xray-lens{display:block}
[data-onepage] #kontakt{padding-top:64px;padding-bottom:64px}
[data-onepage] footer{margin-top:32px}
.footer-game{position:relative;transform:skewY(2deg);padding:0 24px 32px;font-weight:800;color:#c6f135;text-align:center}
:focus-visible{outline:3px solid #FD3583!important;outline-offset:5px}
#mobile-menu{z-index:1000!important;transform:none!important;overflow-y:auto;max-height:100dvh;gap:24px}
#mobile-menu a{font-size:clamp(26px,5vw,44px);line-height:1.15}
#mobile-menu>div:nth-child(2){gap:24px}
#mobile-menu button{flex-shrink:0}
#unleash-overlay,#modal-overlay,#casestudies-overlay,#faq-modal{z-index:1100!important;overflow-y:auto;padding:28px 18px!important;overscroll-behavior:contain}
#unleash-box{max-height:calc(100dvh - 56px);overflow-y:auto;overflow-x:hidden;transform:none!important}
#unleash-close-btn{position:sticky!important;top:8px!important;float:right;right:8px!important;margin:8px;z-index:40}
@media(min-width:1200px){#mobile-menu-btn{display:none!important}}
@media(max-width:1199px){
 #mooo-nav{position:fixed!important;top:0;left:0;right:0;margin:0!important;max-width:none!important;transform:none!important;border-radius:0;z-index:900!important;min-height:76px;padding:8px 16px!important;background:rgba(255,255,255,.95)!important}
 #mooo-nav>div.hidden.md\:flex{display:none!important}
 #mooo-nav [data-unleash]{display:none!important}
 #mobile-menu-btn{display:flex!important;width:44px;height:44px}
 #mooo-nav>a>div:first-child{font-size:28px}
}
@media(max-width:767px){
 [data-onepage] section{scroll-margin-top:92px}
 #wypas{padding:32px 26px 56px}
 #wypas>div.flex.w-full{padding-top:24px;margin-bottom:48px}
 #wypas h2{font-size:clamp(32px,9vw,44px);line-height:1.05;padding:20px 12px}
 #wypas-carousel{display:flex!important;flex-direction:column;gap:36px;overflow:visible}
 #wypas-carousel>div:not(.absolute){margin-top:0!important;gap:36px}
 #wypas-carousel>div.absolute{pointer-events:none}
 #wypas-carousel>div:not(.absolute)>div{transform:none}
 #wypas-carousel h3{font-size:30px}
 #wypas-carousel p{font-size:16px}
 #obora{padding-top:64px;padding-bottom:110px}
 #obora h2{font-size:36px;line-height:1.15;padding:0 12px}
 #obora h2 span{padding:8px 12px;margin-top:8px}
 #testimonial-carousel{padding:24px 12px 32px;gap:24px;scroll-padding:12px}
 #testimonial-carousel>div{flex-basis:100%;padding-top:0}
 #testimonial-carousel>div>div:first-child{padding:24px 24px 32px;margin-bottom:32px;transform:none}
 #testimonial-carousel p.font-headline-md{font-size:22px;line-height:1.2;overflow-wrap:anywhere}
 #testimonial-carousel p.text-label-bold{font-size:13px}
 .xray-section{grid-template-columns:1fr;gap:28px;padding:32px 24px 64px}
 #xray-stage{--radius:58px}
 #kontakt h2{font-size:clamp(32px,9vw,44px);margin-bottom:28px;overflow-wrap:anywhere}
 #kontakt p{margin-bottom:32px}
 #kontakt button{font-size:30px;line-height:1.2}
 [data-onepage] footer .col-span-2{grid-column:span 1}
 #mobile-menu{padding:20px!important}
 #mobile-menu>div:nth-child(2){gap:20px;padding:16px 0}
 #mobile-menu [data-unleash]{font-size:24px;padding:16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* Figma hero: shared composition for copy, cow and animated backdrop. */
[data-onepage] #start{position:relative;isolation:isolate;overflow:clip;padding:clamp(90px,10vw,192px) 0 clamp(24px,3vw,58px)!important}
#hero-udders{position:absolute;z-index:-1;pointer-events:none;width:135%;left:-6%;top:-25vw}
#hero-udders>div{width:100%}
#hero-udders dotlottie-player{display:block;width:100%;aspect-ratio:2206.92/1881.5}
.hero-composition{position:relative;width:100%;max-width:1920px;margin:auto;min-height:39vw}
.hero-copy{position:relative;z-index:2;width:44%;margin-left:8%;padding-top:1vw}
#start #hero-heading{margin:0;transform:none;line-height:normal;letter-spacing:0}
#start .hero-chewy-text{display:block;font-family:'Chewy',cursive;color:#fff;font-size:6.2vw;line-height:1;letter-spacing:0;margin:0;text-align:left;white-space:nowrap}
.hero-cow{position:absolute;z-index:3;left:45%;top:-5vw;width:56%}
#start .hero-cow-image{position:relative;z-index:2;display:block;width:100%;max-width:none;height:auto}
.hero-cow-shadow{position:absolute;left:65%;bottom:-2%;width:64%;height:auto;z-index:1}
.hero-actions{position:relative;z-index:4;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:4vw;width:84%;max-width:1612px;margin:13vw auto 0;color:#fff}
.hero-actions button,.hero-tagline{font-family:'Mango Grotesque','Oswald',sans-serif;text-transform:uppercase;text-align:center;text-decoration:underline;text-underline-offset:7px;line-height:1.2}
.hero-actions button{background:transparent;border:0;padding:12px 0;font-size:clamp(24px,2.7vw,52px);font-weight:300;cursor:pointer;transition:transform .2s}
.hero-actions button:first-child,.hero-actions b{font-weight:900}
.hero-actions button:hover{transform:translateY(-3px)}
.hero-tagline{font-size:clamp(14px,1.55vw,30px);font-weight:900;margin:0;white-space:nowrap}
html[lang="en"] #start #hero-heading{font-size:5.7vw;line-height:.98;letter-spacing:0}
html[lang="en"] #start .hero-chewy-text{font-size:4.4vw;margin-top:12px}
@media(min-width:1921px){.hero-composition{min-height:749px}.hero-copy{padding-top:19px}#start .hero-chewy-text{font-size:119px}.hero-cow{top:-96px}.hero-actions{margin-top:250px}html[lang="en"] #start #hero-heading{font-size:109px}html[lang="en"] #start .hero-chewy-text{font-size:84px}}
@media(max-width:1199px) and (min-width:768px){[data-onepage] #start{padding-top:160px!important}#hero-udders{top:-12vw}}
@media(max-width:767px){
 [data-onepage] #start{padding:125px 0 65px!important}
 #hero-udders{width:270%;left:-85%;top:-70px}
 .hero-composition{min-height:0}
 .hero-copy{width:78%;margin-left:8%;padding-top:0}
 #start .hero-chewy-text{font-size:10vw;margin-top:4px}
 .hero-cow{position:relative;left:auto;top:auto;width:88%;margin:22px 0 0 12%}
 .hero-cow-shadow{bottom:-1%}
 .hero-actions{grid-template-columns:1fr;gap:12px;width:90%;margin:46px auto 0}
 .hero-actions button{font-size:34px;min-height:48px}
 .hero-tagline{font-size:22px}
 html[lang="en"] #start #hero-heading{font-size:10.5vw;line-height:1}
 html[lang="en"] #start .hero-chewy-text{font-size:7.8vw}
}

/* Extend only the decorative backdrop behind the unchanged desktop navigation. */
@media(min-width:1200px){
 [data-onepage] #start{overflow:visible}
 #start::before{content:"";position:absolute;z-index:-2;left:0;right:0;top:-130px;height:180px;background:#edb5b5;pointer-events:none}
}

/* Side rails reserve room for arrows; controls never cover the review cards. */
.testimonial-gallery{position:relative;padding-inline:80px!important}
.testimonial-controls{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 12px;pointer-events:none}
#testimonial-arrow-left,#testimonial-arrow-right{position:relative;display:flex;align-items:center;justify-content:center;transform:none;width:56px;height:56px;flex:0 0 56px;padding:12px;background:#c6f135;color:#131313;border:3px solid #131313;box-shadow:4px 4px #131313;border-radius:50%;pointer-events:auto;transition:background .2s,transform .2s}
#testimonial-arrow-left:hover,#testimonial-arrow-right:hover{background:#fd3583;transform:translateY(-2px)}
@media(max-width:767px){
 .testimonial-gallery{padding-inline:48px!important}
 .testimonial-controls{padding:0 3px}
 #testimonial-arrow-left,#testimonial-arrow-right{width:40px;height:48px;flex-basis:40px;padding:6px}
 #testimonial-carousel{padding-inline:8px;scroll-padding-inline:8px}
 #testimonial-carousel>div>div:first-child{padding:22px 18px 28px}
 #testimonial-carousel>div>div:nth-child(2){padding-inline:4px;gap:10px;flex-wrap:wrap}
}
/* Preserve established organic shapes; soften the remaining hard corners. */
[data-onepage] :is(button,.xray-eyebrow){border-radius:18px}
[data-onepage] #xray-stage{border-radius:32px}
[data-onepage] #mobile-menu-btn{border-radius:14px}
[data-onepage] #mooo-nav{border-radius:22px!important}
@media(max-width:1199px){[data-onepage] #mooo-nav{border-radius:0 0 22px 22px!important}}