/* Versions built on A (1, A4-A7). Everything else (header, sections, footer, motion tokens) comes from
   styles.css. */

/* the band of four facts that opens version 1's sheet */
.facts-band{background:var(--surf);box-shadow:var(--e2)}
.facts-band .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-block:26px}
.facts-band p{margin:0}
.facts-band b{display:block;font:700 24px/1.2 var(--ff);letter-spacing:-.02em}
.facts-band span{display:block;margin-top:4px;font-size:15px;line-height:21px;color:var(--ink2)}

/* the agreed fixes (recipe.ts): one-sentence «where», one-line WhatsApp, the company page */
.areas-line{padding-block:0 var(--sec)}
.areas-line p{max-width:900px;margin:0;font:600 clamp(24px,2.4vw,34px)/1.3 var(--ff);letter-spacing:-.02em}
.wa-line{padding-block:0 var(--sec)}
.wa-line p{margin:0;font-size:clamp(18px,1.6vw,22px);line-height:1.5}
.wa-line a,.co-part a{font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--acc);text-decoration-thickness:3px}
.pricing .note:not(.muted){margin-top:24px;font-size:clamp(17px,1.4vw,20px);line-height:1.5}
.co-contacts{display:grid;margin-top:24px}
.co-line{display:flex;align-items:center;gap:10px;min-height:52px;margin:0;padding:0;font:600 clamp(19px,1.6vw,22px)/1.3 var(--ff);letter-spacing:-.01em;color:var(--ink)}
a.co-line{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--ring);text-decoration-thickness:2px}
.co-hours{font-weight:500;color:var(--ink2)}
.co-stack .co-contacts{margin-bottom:28px}
.co-stack .lead,.co-cols .lead{max-width:680px;margin-top:16px}
.co-part{max-width:680px;margin-top:40px}
.co-part p{margin:10px 0 0}
.co-cols{display:grid;grid-template-columns:minmax(0,680px) minmax(0,420px);justify-content:space-between;gap:48px;align-items:start}
.co-side{position:sticky;top:calc(var(--sw) + 104px)}
.co-side .co-contacts{margin-top:8px}
/* the footer's contacts: a column of their own, like «Разделы» and «Документы»; full width on phones, where
   the address and the e-mail need the room */
.foot-4{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
.foot-contacts li{overflow-wrap:anywhere}
@media (max-width:1259px){.foot-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:959px){.foot-4{grid-template-columns:1fr 1fr}.foot-4 .foot-contacts{grid-column:1/-1}}
@media (max-width:374px){.top .logo{font-size:17px}.top .brand{gap:8px}}
@media (min-width:960px){.app-panel:not(:has(.qr)){grid-template-columns:auto minmax(0,1fr)}}

/* the curtain: the photo is pinned under the header, the page slides up over it as one sheet */
.lk-curtain{position:sticky;top:calc(var(--sw) + 80px);z-index:0;display:flex;align-items:center;min-height:calc(100vh - var(--sw) - 80px);min-height:calc(100svh - var(--sw) - 80px);padding-block:48px;overflow:hidden;background:#2B290C}
.lk-curtain-bg{position:absolute;inset:0;margin:0}
.lk-curtain-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.lk-curtain-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,27,10,.82) 0%,rgba(28,27,10,.62) 42%,rgba(28,27,10,.18) 75%,rgba(28,27,10,.05) 100%)}
.lk-curtain-bg figcaption{position:absolute;right:16px;bottom:12px;z-index:1;font:500 12px/1.3 var(--ff);color:rgba(255,255,255,.8)}
.lk-curtain-bg figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.lk-curtain-in{position:relative;z-index:1}
.lk-photo-text{max-width:540px}
.lk-curtain .label,.lk-curtain .lead{color:rgba(254,254,251,.86)}
.lk-curtain .display{color:var(--surf);font-size:clamp(40px,4.6vw,68px)}
.lk-curtain .field{box-shadow:0 10px 30px rgba(0,0,0,.25)}
.lk-curtain .facts{margin-top:18px;color:rgba(254,254,251,.82)}
.lk-sheet{position:relative;z-index:1;background:var(--bg);border-radius:28px 28px 0 0}
.lk-sheet::before{content:"";position:absolute;inset:0 0 auto;height:120px;border-radius:inherit;box-shadow:0 -14px 36px rgba(20,19,6,.22);clip-path:inset(-80px -80px 0 -80px);z-index:-1;pointer-events:none}
.lk-sheet>.facts-band{border-radius:28px 28px 0 0;box-shadow:none}
.lk-1 .services{padding-top:56px}
.lk-sheet>.services:first-child{padding-top:56px}

/* A10-A12: while typing on a touch screen the field docks right above the keyboard (position and width
   come from main.ts). Its holder skips the rise-in animation - a transform there would pin the docked field to
   the photo instead of the screen - and the photo is raised above the sheet while the field is out. */
.lk-dock .hero-in>.dock-wrap{animation:none}
.typing-dock .lk-dock .lk-curtain{position:relative;top:auto;z-index:46}
.typing-dock .lk-dock .dock-wrap>.field{position:fixed;z-index:2;margin:0}
.docked .lk-dock .dock-wrap>.field{transition:box-shadow 240ms ease}
.docked .lk-dock .dock-wrap>.field.glide{transition:top 380ms var(--ease-drawer),left 380ms var(--ease-drawer),box-shadow 240ms ease}
.lk-dock .hero-in>:not(.dock-wrap){transition:opacity 300ms var(--ease-out)}
.dim .lk-dock .hero-in>:not(.dock-wrap){opacity:0}
.lk-dock .lk-curtain-bg::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(20,19,6,.5);opacity:0;pointer-events:none;transition:opacity 340ms var(--ease-out)}
.dim .lk-dock .lk-curtain-bg::before{opacity:1}
.dim .lk-dock .dock-wrap>.field{box-shadow:0 14px 34px rgba(0,0,0,.34)}
.lk-curtain-bg figcaption{z-index:2}

/* A12: the photos take turns - the next one fades in over the current one, which stays whole underneath until
   it is covered (main.ts, turns(); the 1400 ms is TURN_FADE there). The figure keeps its layers to itself, so
   the shade, the typing dim and the credit stay above every photo and below the text. */
.lk-turns{isolation:isolate}
.lk-turns img{position:absolute;inset:0;object-position:var(--pos,60% 50%);opacity:0;transition:opacity 1400ms cubic-bezier(.45,.05,.2,1)}
.lk-turns img.on{z-index:1;opacity:1}
.lk-turns img.was{opacity:1;transition:none}
.lk-turns img:not(.on):not(.was){visibility:hidden}
.lk-turns::after{z-index:2}
.lk-dock .lk-turns::before{z-index:3}
.lk-turns figcaption{z-index:4}

/* A10-A12: the steps' marker is the worker from the logo on the logo's red, centred in its circle - the master
   on his way - and it moves on a gentler curve, arriving with a quiet ring */
.lk-soft .rider b{background:#C71B17 url(img/roundel.png) center/100% no-repeat;box-shadow:0 0 0 3px var(--surf),0 6px 16px rgba(26,31,41,.2)}
.lk-soft .rider b svg{display:none}
.lk-soft .rider i{border-color:rgba(197,39,30,.4)}
.lk-soft .rider,.lk-soft .track i{transition-duration:900ms;transition-timing-function:cubic-bezier(.45,.05,.2,1)}
.lk-soft .rider.ping i{animation:soft-arrive 1100ms var(--ease-out)}
@keyframes soft-arrive{from{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}
.lk-soft .how li>*{transition-duration:800ms}

/* A12: four trades with photos - one row on wide screens, two by two below that */
.tiles4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles4 .tile{aspect-ratio:4/5}
.tiles4 .tile figcaption{left:20px;right:20px;bottom:18px}
.tiles4 .tile b{font-size:clamp(20px,1.7vw,26px)}
.tiles4 .tile small{display:block;margin-top:2px;font-size:15px;line-height:21px}
@media (max-width:1259px){.tiles4{grid-template-columns:repeat(2,minmax(0,1fr))}.tiles4 .tile{aspect-ratio:592/400}}
/* A12: one quiet line for masters under the store badges */
.masters-line{margin:18px 0 0;font:500 15px/22px var(--ff);color:var(--ink2)}
/* the site: the other language, one globe chip in the header - the same white chip as WhatsApp */
.lang-btn{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 16px 0 13px;border-radius:999px;background:var(--surf);box-shadow:var(--e2);color:var(--ink);font:600 15px/1 var(--ff);transition:transform 160ms var(--ease-out),background-color 150ms ease}
.lang-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lang-btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.lang-btn:hover{background:var(--raised)}}

/* A12: one radius per role - controls are pills (the request field too), photos 22 (18 on phones), large
   surfaces 28 (22 on phones) like the sheet */
.lk-a12{--r-field:40px}
.lk-a12 .app-panel{border-radius:28px;padding:clamp(28px,4vw,48px)}

/* A12: a phone that looks like one - a thin light edge, a black bezel, the screen's own corners, the Dynamic
   Island over the status bar, the side buttons; every size follows the phone's width (--pw) */
.phone-ios{--pw:248px;position:relative;width:var(--pw);max-width:none;padding:calc(var(--pw)*.034);border-radius:calc(var(--pw)*.165);background:#0d0d0f;box-shadow:inset 0 0 0 calc(var(--pw)*.008) #8d8d93,inset 0 0 0 calc(var(--pw)*.016) #232327,0 2px 6px rgba(26,31,41,.16),0 22px 48px rgba(26,31,41,.2)}
.phone-ios .screen{position:relative;overflow:hidden;border-radius:calc(var(--pw)*.132);background:var(--bg)}
.app .phone-ios .screen img{display:block;width:100%;height:auto;aspect-ratio:390/844;border-radius:0}
.phone-ios .island{position:absolute;top:calc(var(--pw)*.026);left:50%;width:calc(var(--pw)*.3);height:calc(var(--pw)*.088);border-radius:999px;background:#000;transform:translateX(-50%)}
.phone-ios::before,.phone-ios::after{content:"";position:absolute;width:calc(var(--pw)*.012);border-radius:2px}
.phone-ios::before{left:calc(var(--pw)*-.010);top:19%;height:28%;background:linear-gradient(#3a3a3e 0 14%,transparent 14% 27%,#3a3a3e 27% 60%,transparent 60% 67%,#3a3a3e 67% 100%)}
.phone-ios::after{right:calc(var(--pw)*-.010);top:27%;height:16%;background:#3a3a3e}

/* A12: the stores' own badges, drawn to one height; a slight press like the site's buttons */
.store-art{display:inline-flex;border-radius:9px;transition:transform 160ms var(--ease-out)}
.store-art img{display:block;width:auto;height:52px}
.store-art:active{transform:scale(.97)}

@media (hover:hover) and (pointer:fine){
  a.co-line:hover,.wa-line a:hover,.co-part a:hover{text-decoration-color:var(--ink)}
}
@media (max-width:959px){
  .facts-band .wrap{grid-template-columns:1fr 1fr;gap:16px 20px;padding-block:18px}
  .facts-band b{font-size:19px}.facts-band span{font-size:13px;line-height:18px}
  .app-panel:not(:has(.qr)){grid-template-columns:minmax(0,1fr) 104px;grid-template-areas:"head phone" "lead phone" "row row";column-gap:16px;row-gap:10px;align-items:start;padding:22px 18px}
  .app-panel:not(:has(.qr)) .txt{display:contents}
  .app-panel:not(:has(.qr)) .title{grid-area:head;font-size:24px;line-height:1.15}
  .app-panel:not(:has(.qr)) .lead{grid-area:lead;margin:0;font-size:15px}
  .app-panel:not(:has(.qr)) .row{grid-area:row;margin-top:6px}
  .app-panel:not(:has(.qr)) .phone{grid-area:phone;width:104px;margin:0;padding:4px;border-radius:17px}
  .app-panel:not(:has(.qr)) .phone img{border-radius:13px}
  .lk-curtain{top:calc(var(--sw) + 60px);min-height:calc(100vh - var(--sw) - 60px);min-height:calc(100svh - var(--sw) - 60px);padding-block:28px 40px;align-items:flex-end}
  .lk-curtain-bg img{object-position:70% 50%}
  .lk-turns img{object-position:var(--pos-phone,var(--pos,70% 50%))}
  .tiles4 .tile{aspect-ratio:175/150}.tiles4 .tile small{display:none}
  .app-panel:not(:has(.qr)):has(.masters-line){grid-template-areas:"head phone" "lead phone" "row row" "masters masters"}
  .masters-line{grid-area:masters;margin-top:4px;font-size:14px;line-height:20px}
  .lang-btn{width:40px;height:40px;padding:0;justify-content:center}.lang-btn span{display:none}
  .lk-a12 .app-panel{border-radius:22px;padding:18px}
  .lk-a12 .shot{border-radius:18px}
  .app-panel:not(:has(.qr)) .phone.phone-ios{--pw:116px;width:var(--pw);padding:calc(var(--pw)*.034);border-radius:calc(var(--pw)*.165)}
  .lk-a12 .app-panel:not(:has(.qr)){grid-template-columns:minmax(0,1fr) 116px}
  .store-art img{height:44px}
  .lk-curtain-bg::after{background:linear-gradient(0deg,rgba(28,27,10,.88) 0%,rgba(28,27,10,.7) 45%,rgba(28,27,10,.25) 100%)}
  .lk-curtain .display{font-size:40px}
  .lk-sheet,.lk-sheet>.facts-band{border-radius:22px 22px 0 0}
  .co-cols{display:flex;flex-direction:column;gap:0}.co-cols .co-main{display:contents}.co-cols h1{order:-2}.co-side{position:static;order:-1;margin-bottom:12px}
  .areas-line p{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .docked .lk-dock .dock-wrap>.field,.docked .lk-dock .dock-wrap>.field.glide,.lk-dock .lk-curtain-bg::before,.lk-dock .hero-in>:not(.dock-wrap){transition-duration:0ms}
  .lk-soft .rider.ping i{animation:none}
}