/* Дари Строй, дизайн 09 „Цвят“: игрив. Светлосива стена, мостри от боя, Dela Gothic One + Manrope. --paint е избраният цвят и оцветява целия сайт. */
:root{
  --paint:#3E8E6A; --paint-ink:#fff;
  --bg:#F4F4F2; --ink:#1D1A17; --ink-2:#5E5A55;
  --acc:var(--paint); --acc-ink:var(--paint-ink);
  --c1:#1D1A17; --c1-ink:#fff;
  --n1:#E9B730; --n2:#8FB9A4; --n3:#E0A783; --n4:#9DB4D6; --n-ink:#1D1A17; --pin-d:none; --note-r:6px;
  --band:#1D1A17; --band-ink:#F4F4F2; --band-star:var(--paint);
  --r:14px; --r-sm:10px; --r-btn:12px; --mk-r:4px; --mk-rot:-2deg; --mk-ink:var(--paint-ink);
  --tape:rgba(70,130,220,.55); --cta:var(--paint); --cta-ink:var(--paint-ink); --foot-mark:var(--paint);
  --f-head:"Dela Gothic One",system-ui,sans-serif; --f-body:"Manrope",system-ui,sans-serif;
  --accent:#1D1A17; --accent-ink:#fff; --cbar-bg:#1D1A17;
}
.ff h1,.ff h2,.ff h3{font-weight:400;letter-spacing:-.02em;line-height:1.02}
.mk::before{transition:background-color .6s ease}
.mk--w{--mk-bg:#fff;--mk-ink:#1D1A17}
.btn{font-weight:800;transition:background-color .6s ease,color .6s ease,transform .2s var(--ease)}
.btn--paint{background:var(--paint);color:var(--paint-ink)}
.btn--paint .btn__i{background:var(--ink);color:#fff}
.btn--sm{height:46px;padding:0 18px;font-size:.95rem}
.btn__i{border-radius:9px}
.tag{border-radius:8px}

.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px;padding:0 var(--m);background:#F4F4F2;transition:transform .35s var(--ease);will-change:transform;backface-visibility:hidden}
.nav.is-up{transform:translateY(-100%)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,#3E8E6A 0 25%,#7A5A45 25% 50%,#E9B730 50% 75%,#A8632F 75%)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 1.15rem/1 var(--f-head)}
.logo__c{display:flex;gap:2px}
.logo__c i{width:9px;height:26px;border-radius:3px;background:#A8632F}
.logo__c i:nth-child(2){background:#3E8E6A;height:20px;align-self:flex-end}.logo__c i:nth-child(3){background:#E9B730}
.nav__links{display:flex;gap:4px}
.nav__links a{padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:700}
@media (hover:hover){.nav__links a:hover{background:#E6E6E2}}

.hero{display:grid;grid-template-columns:1fr minmax(0,.95fr);gap:clamp(24px,4vw,70px);align-items:center;max-width:var(--max);margin:0 auto;padding:clamp(40px,7vh,80px) var(--m) clamp(50px,8vh,100px);min-height:calc(100svh - 70px)}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.hero h1{font-size:clamp(2.2rem,1rem + 2.4vw,3.3rem)}
.hero__lead{font-size:1.15rem;color:var(--ink-2);max-width:40ch;font-weight:500}
.wall{position:relative;padding:10px 0 0}
.wall__box{position:relative;aspect-ratio:4/4.1;border-radius:10px;overflow:hidden;background:#DCDCD7;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 40px 80px -40px rgba(0,0,0,.4);background-image:radial-gradient(rgba(0,0,0,.06) 1px,transparent 1px),radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px);background-size:7px 7px,11px 11px}
.wall__box canvas{position:absolute;inset:0;width:100%;height:100%}

.wall__roller{position:absolute;left:0;top:0;width:clamp(90px,10vw,150px);translate:-50% -50%;rotate:-90deg;pointer-events:none;filter:drop-shadow(0 12px 14px rgba(0,0,0,.35));opacity:0;z-index:2}
.wall__name{position:absolute;left:16px;top:16px;padding:8px 14px;border-radius:8px;background:#fff;font:400 1rem/1 var(--f-head);z-index:2}
.chips-paint{display:flex;gap:8px;margin-top:16px}
.chips-paint button{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:96px;padding:0;border:0;border-radius:8px;background:#fff;box-shadow:0 10px 24px -16px rgba(0,0,0,.4);cursor:pointer;overflow:hidden;transition:transform .3s var(--ease)}
.chips-paint button::before{content:"";flex:1;background:var(--im) center/cover,var(--c);box-shadow:inset 0 -6px 0 var(--c)}
.chips-paint span{padding:8px 10px;font:700 .8rem/1 var(--f-body);text-align:left}
.chips-paint button[aria-checked="true"]{transform:translateY(-8px);box-shadow:0 0 0 3px var(--ink),0 16px 30px -16px rgba(0,0,0,.5)}
@media (hover:hover){.chips-paint button:hover{transform:translateY(-5px)}}
.wall__can{--ow:150px;top:-30px;right:-34px;rotate:10deg}
.wall__st{left:-40px;top:36%;--st:118px;--st-bg:var(--ink);--st-ink:#fff}
.wall__st img{width:50px;height:50px;object-fit:contain}

.band{--band-rot:-1deg}
.band__in{font-weight:400}
/* услуги като мостри от боя */
.swatches{max-width:var(--max);margin:0 auto;padding:0 var(--m);display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sw{background:#fff;border-radius:12px;box-shadow:0 20px 40px -26px rgba(0,0,0,.4);display:flex;flex-direction:column;overflow:visible}
.sw__c{position:relative;height:200px;background:var(--c);border-radius:12px 12px 0 0}
.sw__c img{position:absolute;right:-16px;bottom:-34px;width:150px;filter:drop-shadow(0 18px 18px rgba(0,0,0,.3))}
.sw__t{padding:22px 20px 24px;display:flex;flex-direction:column;gap:8px}
.sw__t small{font-weight:800;color:var(--ink-2);letter-spacing:.06em}
.sw__t h3{font-size:1.45rem}
.sw__t p{color:var(--ink-2)}
.pol{--tape:rgba(72,132,224,.6)}
.pol span{font-weight:800}
.notes .note{padding-top:96px;color:#1D1A17}
.notes .note::before{content:"";position:absolute;left:0;right:0;top:0;height:66px;background:rgba(255,255,255,.35)}
.note__n{position:absolute;top:16px;left:24px;font-weight:400}
.faq summary::after{border-radius:8px}
.foot__mark{transition:color .6s ease}
.cta__box{transition:background-color .6s ease}

@media (max-width:1000px){
  .nav__links{display:none}
  .hero{grid-template-columns:1fr;min-height:0}
  .wall{max-width:600px;width:100%;margin:0 auto}
  .swatches{grid-template-columns:1fr 1fr;row-gap:44px}
}
@media (max-width:620px){
  .chips-paint{gap:5px}
  .chips-paint button{height:78px}
  .chips-paint span{font-size:.68rem;padding:6px}
  .wall__can{--ow:96px;right:-6px;top:-18px}
  .wall__st{--st:88px;left:-6px}
  .wall__st img{width:38px;height:38px}
  .swatches{grid-template-columns:1fr}
}

/* от 20-те референции (kit/motion.js hscroll, kit/parts.js roll): полароидите се плъзгат настрани, надписите на бутоните се търкулват */
.ts-hs .ap-hs__track{padding-top:16px;padding-bottom:50px;align-items:flex-start}
.ts-hs .ap-hs__track>*{width:min(34vw,500px)}
.ts-hs .pol span{display:flex;align-items:center;justify-content:center;gap:9px}
.ts-chip{flex:none;width:18px;height:18px;border-radius:5px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.ts-hs__swipe{display:none}
.ts-hs__end{align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:14px;padding:30px 28px;border-radius:12px;background:var(--paint);color:var(--paint-ink);box-shadow:0 22px 40px -24px rgba(0,0,0,.5);transition:background-color .6s ease,color .6s ease;rotate:1deg}
.ts-hs__end h3{font-size:clamp(1.8rem,1rem + 1.6vw,2.6rem)}
.ts-hs__end p{max-width:30ch;font-weight:600;opacity:.85}

.ts-say{max-width:var(--max);margin:0 auto;padding-left:var(--m);padding-right:var(--m)}
.ts-say__t{font:400 clamp(1.8rem,1rem + 2.6vw,3.6rem)/1.12 var(--f-head);letter-spacing:-.02em;max-width:22ch}
.ts-say::after{content:"";display:block;width:min(220px,40vw);height:16px;margin-top:26px;border-radius:9px;background:var(--paint);transition:background-color .6s ease;rotate:-1deg}

@media (max-width:1000px){
  .ts-hs__swipe{display:inline}
  .ts-hs .ap-hs__track>*{width:min(72vw,440px)}
  .ts-hs__end{rotate:0deg}
}

/* Дари Строй: снимка на цял екран в hero само на телефон и таблет; услуги като ред от pill-ове; 6 мостри; преди и след; билет; съобщение */
.ds-hero__ph{display:none}
.ds-chips{display:none;list-style:none;margin:0;padding:0;gap:8px}
.ds-chips li{flex:none;padding:9px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.34);background:rgba(20,18,16,.32);color:#fff;font-weight:700;font-size:.92rem;white-space:nowrap}
.ds-sw{grid-template-columns:repeat(3,1fr);row-gap:44px}
.ds-ba__wrap{position:relative;max-width:560px;margin:0 auto;padding:0 var(--m)}
.ds-ba .ap-ba{--ba-ar:3/4}
.ds-ba__obj{--ow:150px;right:-60px;bottom:-30px;rotate:-12deg}
.ds-ticket{display:flex;justify-content:center;max-width:var(--max);margin:clamp(40px,7vh,70px) auto 0;padding:0 var(--m)}
.ds-ticket .c-ticket{text-decoration:none;width:min(100%,640px)}
.ds-ticket .c-ticket__card{--t-bg:var(--paint);--t-ink:var(--paint-ink);transition:background-color .6s ease,color .6s ease}
.ds-pick{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 14px}
.ds-pick button{font:700 .9rem/1 var(--f-body);padding:11px 15px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--cta-ink) 40%,transparent);background:transparent;color:var(--cta-ink);cursor:pointer;transition:background-color .3s,color .3s}
.ds-pick button[aria-pressed="true"]{background:var(--cta-ink);color:var(--cta)}
.ds-pick button:focus-visible,.ds-city input:focus-visible{outline:2px solid var(--cta-ink);outline-offset:3px}
.ds-city{display:flex;flex-direction:column;gap:6px;max-width:360px;margin-bottom:18px;font-weight:700;font-size:.85rem;color:var(--cta-ink)}
.ds-city input{font:600 1rem var(--f-body);padding:13px 16px;border-radius:12px;border:0;background:rgba(255,255,255,.92);color:#1D1A17;min-width:0}
.cta__r{display:flex;flex-direction:column;gap:10px}
@media (max-width:1000px){
  .ds-sw{grid-template-columns:1fr 1fr}
  .ds-ba__obj{--ow:96px;right:-6px;bottom:-24px}
  /* телефон и таблет: снимката е първа, на цял екран, текстът върху нея долу */
  .hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;max-width:none;padding:0;gap:0;min-height:max(560px,calc(100svh - 110px));overflow:hidden;border-radius:0 0 28px 28px;background:#1D1A17}
  .ds-hero__ph{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
  .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(20,18,16,.42) 0%,rgba(20,18,16,0) 20%,rgba(20,18,16,0) 32%,rgba(20,18,16,.6) 55%,rgba(20,18,16,.94) 100%)}
  .wall{display:none}
  .hero__copy{position:relative;z-index:2;flex:1;width:100%;justify-content:flex-end;gap:16px;padding:18px var(--m) calc(96px + env(safe-area-inset-bottom));color:#fff}
  .hero__copy .tag{margin-bottom:auto;background:rgba(255,255,255,.92);color:#1D1A17}
  .hero h1{color:#fff;font-size:clamp(2.1rem,1rem + 5vw,3.2rem);text-shadow:0 2px 24px rgba(0,0,0,.35)}
  .hero__lead{color:rgba(255,255,255,.86)}
  .ds-chips{display:flex;width:calc(100% + 2 * var(--m));margin:0 calc(-1 * var(--m));padding:0 var(--m);overflow-x:auto}
  .hero .acts{width:100%}
}
@media (max-width:620px){
  .hero__lead{display:none}
  .hero .acts .btn--w{display:none}
  .hero .acts .btn--paint{width:100%;justify-content:space-between}
  .ds-sw{grid-template-columns:1fr}
  .ds-pick button{font-size:.85rem;padding:10px 13px}
}
.cta__l,.cta__r{min-width:0}
.ds-pick{max-width:100%}
.foot__mark{font-size:clamp(2.6rem,.6rem + 10vw,12rem)}
.wall__box{aspect-ratio:1/1}
.wall__st{left:-46px;top:40%}
@media (max-width:1000px){.cta__box h2{font-size:clamp(2rem,1rem + 4.4vw,3rem)}}
.wall__st{top:auto;bottom:130px;left:-50px}
.wall__st{bottom:190px;left:-58px}

/* по-леко при скрол (бележка 02.11: „малко лагва“): сенките на движещите се 3D обекти се рисуват веднъж в свой слой */
.sw__c img,.obj,.cta__obj,.ds-ba__obj,.wall__roller{will-change:transform}
.ap-hs__track{will-change:transform}
.sec,.cta,.foot{scroll-margin-top:80px}