/* Section titles: one size everywhere (the block about the agency on service pages and «other cases» came out far bigger) */
.huge,.s6c .huge{font-size:clamp(34px,4.1vw,60px)}
/* «Наші сенсеї»: the whole team as a slider, three at a time beside the agency's figures (src/lib/site/team.ts) */
.about>*,.tp-sl{min-width:0}
.tp-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px}
.tp-bar .cnt{font:500 13px/1 var(--mono);letter-spacing:.08em;color:var(--muted)}
.tp-arr{display:flex;gap:8px}
.tp-arr button{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.tp-arr button:hover{background:var(--ink);color:#fff}
.tp-arr button:disabled{opacity:.3;pointer-events:none}
.tp-arr svg{width:18px;height:18px;fill:currentColor}
.tp-arr .pv svg{transform:scaleX(-1)}
@media(min-width:641px){
.tp-sl .tp-grid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.tp-sl .tp-grid::-webkit-scrollbar{display:none}
.tp-sl .tp-grid>.tp{flex:0 0 calc((100% - 32px)/3);min-width:0;scroll-snap-align:start}
}
/* The first screen: its gradient is there from the first paint, the living one fades in over it; the text comes in from
   the first paint too, so nothing shows and hides again while the page loads */
.hgrain{background:linear-gradient(180deg,#a84a36 0,#7a3425 38%,#3a2522 72%,#1e2023 100%)!important}
.hgrain__bg::before{background:radial-gradient(circle,rgba(239,188,174,.34),rgba(168,74,54,.3) 40%,transparent 70%)}
.hgrain__bg::after{background:radial-gradient(circle,rgba(168,74,54,.5),rgba(58,37,34,.3) 45%,transparent 70%)}
.grainient-canvas,.hgrain__bg canvas{opacity:0;transition:opacity 1s ease}
.hgrain__bg.has-gl canvas{opacity:1}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hgrain__badge,.hgrain__title .hgrain__line,.hgrain__lead,.hgrain__facts,.hgrain__cta,.hgrain__clients{animation:heroIn .7s cubic-bezier(.2,.7,.2,1) both}
.hgrain__title .hgrain__line{animation-delay:.06s}.hgrain__title .hgrain__line+.hgrain__line{animation-delay:.12s}
.hgrain__lead{animation-delay:.18s}.hgrain__facts{animation-delay:.22s}.hgrain__cta{animation-delay:.26s}.hgrain__clients{animation-delay:.32s}
/* the contact form goes straight to its fields */
.ct-ft{display:none}
/* an open question: the mark on the accent circle is white */
.sv-faq details[open] summary i::before,.sv-faq details[open] summary i::after,.s6c .sv-faq details[open] summary i::before,.s6c .sv-faq details[open] summary i::after{background:#fff}
/* the footer's gift is light; a glint runs over it on its own (public/site/track.js) */
.ftr__gift,.s6c .ftr__gift{fill:#efbcae}
/* the dark button on the terracotta card: on hover it turns white, never the colour of the card */
.path--launch .btn--ink:hover,.path--launch .btn:hover{background:#fff!important;color:var(--ink)!important;border-color:#fff!important}
/* the menu button answers the hover like «Зв'язатися» next to it */
.burger{cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.burger:hover,.s6c .burger:hover{background:#fff!important;color:rgb(30,32,35)!important;border-color:#fff!important}
/* the hidden floating bar stays out of the way of the header under it */
.fbar:not(.is-on),.fbar:not(.is-on) *{pointer-events:none!important}
/* on the white header of the blog the same hover goes dark */
.kbx .kbx-top .burger:hover{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}