/* Master.kg landing preview: a few pages, four hero layouts (A-D), round corners. */
:root{
  --bg:#F7F6EE;--surf:#FEFEFB;--line:#DEDDCF;--ink:#2B290C;--ink2:#75735B;--ink3:#9B9986;
  --acc:#FEEC00;--on:#282400;--raised:#EAE9DE;--ring:#C9CEC4;--tint:#F4F0BA;--wa:#25D366;
  /* shape «soft» (default): large round corners everywhere. No shape is outlined in either version:
     surfaces are told apart by their fill and a soft shadow, never by a line around them. */
  --r-btn:999px;--r-field:24px;--r-send:50%;--r-icon:50%;--r-card:22px;--r-panel:44px;--r-mark:12px;--r-dot:50%;--r-line:4px;--r-row:12px;
  --e2:0 3px 10px rgba(26,31,41,.06);--e3:0 6px 18px rgba(26,31,41,.09);--e4:0 10px 28px rgba(26,31,41,.12);--dev:0 18px 44px rgba(26,31,41,.16);
  /* motion tokens (Emil Kowalski): entering = ease-out, moving on screen = ease-in-out, sheets = drawer */
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1);
  --gut:clamp(16px,8.3vw,120px);--sec:80px;--ff:'Rubik',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--sw:48px;
  color-scheme:light;
}
*{box-sizing:border-box}
@supports not (overflow:clip){body{overflow-x:hidden}}
html{scroll-behavior:smooth}
body{margin:0;padding-top:var(--sw);background:var(--bg);color:var(--ink);font:400 17px/26px var(--ff);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}
[id]{scroll-margin-top:calc(var(--sw) + 96px)}
/* header, the page's content, footer: on a short page the footer still sits at the bottom of the screen */
.page{overflow-x:clip;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;min-height:calc(100vh - var(--sw))}
.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gut)}
main.inner{padding-top:56px}
.page-head{padding-bottom:36px}.page-head .lead{margin-top:12px}
.display{font:700 clamp(40px,6.1vw,88px)/1.02 var(--ff);letter-spacing:-.04em}
.title{font:700 clamp(32px,3.9vw,56px)/1.08 var(--ff);letter-spacing:-.03em;text-wrap:balance}
.heading{font:600 clamp(20px,1.7vw,24px)/1.25 var(--ff);letter-spacing:-.015em}
.lead{font-size:clamp(17px,1.46vw,21px);line-height:1.5;color:var(--ink2)}
.label{font:500 14px/20px var(--ff);color:var(--ink2);letter-spacing:.01em}
.muted{color:var(--ink2)}
svg.ic{width:24px;height:24px;flex:none}

/* preview switcher */
.switch{position:fixed;inset:0 0 auto 0;z-index:30;height:var(--sw);display:flex;align-items:center;gap:6px;padding:0 var(--gut);background:var(--ink);color:var(--surf);font:500 14px/1 var(--ff);overflow-x:auto;scrollbar-width:none}
.switch::-webkit-scrollbar{display:none}
.switch span{opacity:.7;margin-right:4px;white-space:nowrap}
.switch hr{flex:none;width:1px;height:20px;border:0;background:rgba(255,255,255,.25);margin:0 10px}
.switch button{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;min-width:32px;padding:0 11px;border:0;border-radius:8px;background:transparent;color:inherit;font:600 14px/1 var(--ff);cursor:pointer;white-space:nowrap;transition:background-color 150ms ease,transform 160ms var(--ease-out)}
.switch button:active{transform:scale(.96)}
.switch button[aria-pressed="true"]{background:var(--acc);color:var(--on)}
.switch button:focus-visible{outline:2px solid var(--surf);outline-offset:2px}
.switch button b{font-weight:500;opacity:.85}
.switch em{flex:none;margin-left:auto;padding-left:12px;font:500 12px/1 var(--ff);opacity:.55;white-space:nowrap}

/* controls: hover lifts, press sinks, focus draws a ring */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 22px;border:1px solid transparent;border-radius:var(--r-btn);font:600 16px/1 var(--ff);color:var(--ink);cursor:pointer;white-space:nowrap;transition:transform 160ms var(--ease-out),box-shadow 200ms ease,background-color 150ms ease;-webkit-tap-highlight-color:transparent}
.btn svg{transition:transform 220ms var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn:focus-visible,.burger:focus-visible,.q button:focus-visible,.drawer a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn-wa,.btn-ghost{background:var(--surf);box-shadow:var(--e2)}
.btn-wa svg{fill:var(--wa)}
.btn-wa.flat{background:var(--bg);box-shadow:none}
.btn-acc{background:var(--acc);color:var(--on)}
.btn-ink{background:var(--ink);color:var(--surf)}
.badge{background:var(--ink);color:var(--surf);gap:11px;text-align:left;padding:0 20px 0 16px}
.badge svg{fill:var(--surf);width:25px;height:25px}
.badge small{display:block;font:500 11px/14px var(--ff);opacity:.72}
.badge b{display:block;font:600 17px/22px var(--ff);letter-spacing:-.01em}
.tel{display:inline-flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap}
.tel svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* the request: type what happened, the arrow sends it to WhatsApp */
.field{position:relative;display:flex;align-items:center;gap:12px;width:min(600px,100%);height:72px;padding:0 10px 0 24px;background:var(--surf);border-radius:var(--r-field);box-shadow:var(--e3);transition:box-shadow 200ms ease}
.field:focus-within{box-shadow:var(--e3),0 0 0 3px var(--ink)}
.field input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--ink);font:400 clamp(16px,1.46vw,20px)/1.2 var(--ff)}
.hint{position:absolute;left:24px;right:84px;top:0;bottom:0;display:flex;align-items:center;gap:.32em;color:var(--ink3);font:400 clamp(16px,1.46vw,20px)/1.3 var(--ff);white-space:nowrap;overflow:hidden;pointer-events:none;transition:opacity 150ms ease}
.hint .w{position:relative;flex:1;height:1.3em}
.hint .w b{position:absolute;left:0;top:0;font-weight:400;opacity:0;transform:translateY(9px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.hint .w b.on{opacity:1;transform:none}
.hint .w b.out{opacity:0;transform:translateY(-9px)}
.field input:not(:placeholder-shown)~.hint{opacity:0}
.field button{position:relative;flex:none;width:52px;height:52px;border:0;border-radius:var(--r-send);background:var(--acc);color:var(--on);display:grid;place-items:center;cursor:pointer;transition:transform 160ms var(--ease-out),box-shadow 220ms var(--ease-out)}
.field button svg{grid-area:1/1;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:opacity 180ms ease,transform 220ms var(--ease-out)}
.field button .ok{opacity:0;transform:scale(.6)}
.field button:active{transform:scale(.94)}
.field.has-text button{box-shadow:0 0 0 5px var(--tint)}
.field.has-text button .go{transform:translateX(2px)}
.field.sent button .go{opacity:0;transform:scale(.6)}.field.sent button .ok{opacity:1;transform:none}
.hero-c .field.has-text button{box-shadow:0 0 0 5px rgba(43,41,12,.16)}
@media (hover:hover) and (pointer:fine){
  .switch button[aria-pressed="false"]:hover{background:rgba(255,255,255,.14)}
  .field:hover{box-shadow:var(--e4)}
  .btn:hover{box-shadow:var(--e3);transform:translateY(-1px)}.btn:hover:active{transform:scale(.97)}
  .btn-acc:hover{background:#F6E400}.btn-ink:hover{background:#3B3916}.btn-wa.flat:hover{background:var(--raised);box-shadow:none}
  .btn-wa:hover svg{transform:scale(1.12) rotate(-8deg)}.badge:hover svg{transform:scale(1.08)}
  .field button:hover{transform:scale(1.05)}.field button:hover:active{transform:scale(.94)}
  .tel:hover span{text-decoration:underline;text-underline-offset:4px}
  .tile:hover img{transform:scale(1.04)}
  .foot a:hover,.q button:hover{color:var(--ink2)}.q button:hover svg{transform:translateY(2px)}.q.open button:hover svg{transform:rotate(180deg) translateY(2px)}
  .top nav a:hover{color:var(--ink)}.top nav a:hover::after{transform:scaleX(1)}
  .drawer nav a:hover{background:var(--bg)}.drawer nav a:hover svg{transform:translateX(3px)}
  .burger:hover{background:var(--raised)}.top .menu-btn:hover{background:var(--raised)}
}

/* header */
.top-wrap{position:sticky;top:var(--sw);z-index:15;background:var(--bg)}
.top-wrap::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--line);opacity:0;transition:opacity 200ms ease}
.stuck .top-wrap::after{opacity:1}
.top{position:relative;display:flex;align-items:center;gap:22px;height:80px;white-space:nowrap}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand i{flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden}
.brand img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.085)}
.logo{font:800 23px/1 var(--ff);letter-spacing:-.02em}
.top nav{display:flex;gap:26px;font:500 15px/20px var(--ff);color:var(--ink2);margin-right:auto}
.top nav a{position:relative;padding:8px 0;transition:color 150ms ease}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform 260ms var(--ease-out)}
.top nav a[aria-current="page"]{color:var(--ink)}.top nav a[aria-current="page"]::after{transform:scaleX(1)}
.top .btn{height:44px;font-size:15px;padding:0 18px}
.top .btn svg{width:20px;height:20px}
.burger{display:none;flex:none;width:44px;height:44px;border:0;border-radius:var(--r-icon);background:var(--surf);box-shadow:var(--e2);color:var(--ink);cursor:pointer;place-items:center;transition:transform 160ms var(--ease-out),background-color 150ms ease}
.burger:active{transform:scale(.94)}
.burger svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
/* menu as a side panel: it slides in from the right, the page behind blurs and dims so the eye goes to the panel.
   The layer is exactly the screen and clips the parked panel, so it can never widen the page. */
.menu-layer{position:fixed;inset:0;z-index:40;overflow:hidden;visibility:hidden;pointer-events:none;transition:visibility 0s linear 380ms}
.menu-open .menu-layer{visibility:visible;pointer-events:auto;transition-delay:0s}
.scrim{position:absolute;inset:0;background:rgba(43,41,12,.32);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity 300ms var(--ease-out)}
.drawer{position:absolute;top:0;right:0;bottom:0;width:min(340px,80vw);overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:20px 20px calc(24px + env(safe-area-inset-bottom,0px));background:var(--surf);box-shadow:-16px 0 40px rgba(26,31,41,.16);transform:translateX(104%);transition:transform 380ms var(--ease-drawer)}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.drawer .burger{display:grid}
.drawer nav{display:grid}
.drawer nav a{display:flex;align-items:center;gap:12px;padding:18px 4px;border-bottom:1px solid var(--line);font:600 20px/26px var(--ff);letter-spacing:-.01em;opacity:0;transform:translateX(18px);transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out),background-color 150ms ease}
.drawer nav a svg{margin-left:auto;width:20px;height:20px;fill:none;stroke:var(--ink3);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform 200ms var(--ease-out)}
.drawer nav a[aria-current="page"]::before{content:"";flex:none;width:8px;height:8px;border-radius:var(--r-dot);background:var(--ink)}
.drawer nav a:active{background:var(--bg)}
.drawer>p{margin-top:auto;font-size:14px}
.menu-open .scrim{opacity:1}
.menu-open .drawer{transform:none}
.menu-open .drawer nav a{opacity:1;transform:none;transition-delay:calc(120ms + var(--i,0)*45ms)}
/* the header's menu button says what it is: a dark pill with «Меню», set apart from the light phone and
   WhatsApp circles next to it (the panel's close button stays a round one) */
.top .menu-btn{width:auto;gap:8px;padding:0 18px 0 14px;border-radius:999px;background:var(--surf);color:var(--ink);box-shadow:var(--e2);font:600 15px/1 var(--ff)}
.top .menu-btn svg{width:20px;height:20px}
@media (max-width:1259px){.burger{display:grid}.top .menu-btn{display:inline-flex;align-items:center}.top nav{display:none}}

/* hero */
.hero{position:relative;padding-block:40px 56px}
.hero-in{position:relative;z-index:2}
.hero-in>*{animation:rise 700ms var(--ease-out) backwards}
.hero-in>:nth-child(2){animation-delay:120ms}.hero-in>:nth-child(3){animation-delay:240ms}.hero-in>:nth-child(n+4){animation-delay:360ms}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.hero h1{margin-top:12px}
.hero .lead{max-width:560px;margin-top:20px}
.hero .field{margin-top:32px}
.hero .facts{margin-top:20px;font:500 15px/22px var(--ff);color:var(--ink2)}
.mmap{display:none}
/* city map: one static layer that fades in whole, the route on its own layer, marker and door as plain elements */
.map,.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.map.city{opacity:0;transition:opacity 1200ms var(--ease-out)}
.map.city.on{opacity:1}
.map.city.now{transition:none}
.map rect{fill:var(--surf)}
.map text{font:500 11px/1 var(--ff);fill:var(--ink3);letter-spacing:.04em}
.route{fill:none;stroke:var(--acc);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.route.draw{animation:draw 3000ms var(--ease-in-out) 900ms forwards}
.route.drawn{stroke-dashoffset:0}
@keyframes draw{to{stroke-dashoffset:0}}
.fx{z-index:1}
.pin,.mk{position:absolute;left:0;top:0;will-change:transform}
.pin i{position:absolute;left:-12px;top:-12px;width:24px;height:24px;border-radius:50%;background:var(--bg);border:4px solid var(--ring);transition:border-color 220ms ease,transform 220ms var(--ease-out)}
.pin i::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--ink)}
.hero:has(.field:focus-within) .pin i{border-color:var(--acc);transform:scale(1.15)}
.hero-c:has(.field:focus-within) .pin i{border-color:var(--ink)}
.pin::before{content:"";position:absolute;left:-12px;top:-12px;width:24px;height:24px;border-radius:50%;border:3px solid var(--acc);opacity:0}
.pin.arrived::before{animation:arrive 1100ms var(--ease-out) 2}
@keyframes arrive{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.6)}}
.pin,.mk{opacity:0;transition:opacity 600ms var(--ease-out)}
.pin.on,.mk.on{opacity:1}
.mk{--d:44px}
.mk-core,.mk-halo{position:absolute;left:calc(var(--d)/-2);top:calc(var(--d)/-2);width:var(--d);height:var(--d);border-radius:50%}
.mk-halo{background:var(--tint);animation:halo 3000ms var(--ease-out) infinite}
.mk-core{background:var(--acc);box-shadow:0 0 0 5px var(--tint);display:grid;place-items:center}
.mk-core svg{width:20px;height:20px;fill:var(--on)}
@keyframes halo{from{transform:scale(1);opacity:.6}to{transform:scale(1.9);opacity:0}}
.hero-a,.hero-b,.hero-d{overflow:hidden}
/* B: full map, text on a sheet */
.hero-b{padding-block:40px 56px}
.sheet{width:min(720px,100%);background:var(--surf);border-radius:var(--r-panel);box-shadow:var(--e4);padding:40px 44px 36px}
.hero-b .display{font-size:clamp(40px,5.3vw,76px)}
.hero-b .field{width:100%;background:var(--bg);box-shadow:none}
/* C: yellow panel, ink route */
.hero-c{padding:4px clamp(8px,2.8vw,40px) 24px}
.ypanel{position:relative;overflow:hidden;background:var(--acc);color:var(--on);border-radius:var(--r-panel);padding:44px clamp(8px,5.55vw,80px) 52px}
.hero-c .label,.hero-c .lead{color:var(--on);opacity:.85}
.hero-c .route{stroke:var(--ink)}
.hero-c .map text{fill:var(--on);opacity:.55}
.hero-c .mk-halo{background:var(--surf)}
.hero-c .mk-core{background:var(--ink);box-shadow:0 0 0 5px rgba(254,254,251,.5)}
.hero-c .mk-core svg{fill:var(--acc)}
.hero-c .pin i{background:var(--surf);border-color:var(--ink)}
.hero-c .pin::before{border-color:var(--ink)}
/* D: centred, map strip below */
.hero-d{text-align:center;padding-bottom:0}
.hero-d .lead{max-width:680px;margin-inline:auto}
.hero-d .field{margin-inline:auto;text-align:left}
.strip-space{height:300px}

/* services: photos for the two main trades, the rest as a plain list - nothing here is a button */
.services{padding-block:var(--sec)}
.svc-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:32px;align-items:end}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.tile{position:relative;aspect-ratio:592/360;border-radius:var(--r-card);overflow:hidden;background:var(--ink);color:var(--surf)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1400ms var(--ease-out)}
.js .tile.rv:not(.in) img{transform:scale(1.08)}
.tile::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(rgba(23,23,8,0),rgba(23,23,8,.86))}
.tile figcaption{position:absolute;left:28px;right:28px;bottom:24px;z-index:1}
.tile b{display:block;font:600 clamp(22px,2.2vw,32px)/1.2 var(--ff);letter-spacing:-.015em}
.tile small{font:400 17px/26px var(--ff);opacity:.85}
.svc-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;margin-top:28px;border-bottom:1px solid var(--line)}
.svc-grid li{padding:16px 0;border-top:1px solid var(--line)}
.svc-grid b{display:block;font:600 clamp(18px,1.55vw,22px)/1.25 var(--ff);letter-spacing:-.015em}
.svc-grid small{font:400 15px/22px var(--ff);color:var(--ink2)}
.ask{margin-top:24px}

/* how it works: a route; the master's marker moves to the next stop when the reader scrolls on */
.how{padding-block:0 var(--sec)}
.how .lead{margin-top:12px}
.how ol{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:44px;padding-top:68px;position:relative}
.track{position:absolute;left:20px;right:calc(25% - 38px);top:17px;height:6px;border-radius:var(--r-line);background:var(--raised);overflow:hidden}
.track i{position:absolute;inset:0;border-radius:var(--r-line);background:var(--acc);transform:scaleX(0);transform-origin:left center;transition:transform 700ms var(--ease-in-out)}
.rider{position:absolute;left:0;top:0;z-index:2;width:40px;height:40px;transition:transform 700ms var(--ease-in-out);will-change:transform}
.rider i{position:absolute;inset:0;border-radius:50%;border:3px solid var(--acc);opacity:0}
.rider.ping i{animation:arrive 800ms var(--ease-out)}
.rider b{position:absolute;inset:0;border-radius:50%;background:var(--acc);box-shadow:0 0 0 5px var(--tint);display:grid;place-items:center}
.rider svg{width:20px;height:20px;fill:var(--on);transform:rotate(45deg)}
.how ol.still .rider,.how ol.still .track i,.how ol.still li>*{transition:none}
.how li{position:relative}
.how li>*{opacity:.4;transform:translateY(8px);transition:opacity 450ms var(--ease-out),transform 450ms var(--ease-out)}
.how li.on>*{opacity:1;transform:none}
/* the step circles: centred on the track and under the marker (its centre is 20px into the list); the check
   shares the circle's box, so it sits in the middle of it. Pseudo-elements are not covered by *{box-sizing}. */
.how li::before,.how li::after{content:"";position:absolute;left:6px;top:-62px;width:28px;height:28px;box-sizing:border-box;border-radius:var(--r-dot)}
.how li::before{background:var(--surf);border:3px solid var(--ring);transition:background-color 300ms ease,border-color 300ms ease}
.how li::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4 4 9-9' fill='none' stroke='%23282400' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;opacity:0;transform:scale(.6);transition:opacity 260ms ease,transform 300ms var(--ease-out)}
.how li.done::before{background:var(--acc);border-color:var(--acc)}
.how li.done::after{opacity:1;transform:none}
.how li .n{display:block;font:500 14px/20px var(--ff);color:var(--ink3);margin-bottom:4px}
.how li p{margin-top:6px;max-width:270px}

/* price */
.pricing{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:clamp(28px,4.5vw,64px);align-items:center;padding-block:0 var(--sec)}
.shot{display:block;width:100%;height:auto;aspect-ratio:520/500;object-fit:cover;object-position:60% 40%;border-radius:var(--r-card)}
.poster{display:grid;gap:24px}
.poster p{font-size:clamp(18px,1.95vw,28px);line-height:1.3;letter-spacing:-.015em;margin-top:10px}
.mark{display:inline-block;position:relative;isolation:isolate;font-weight:800;font-size:clamp(30px,3.6vw,52px);line-height:1.1;letter-spacing:-.03em;padding:.04em .28em}
.mark::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--acc);border-radius:var(--r-mark);transform:scaleX(0);transform-origin:left center;transition:transform 900ms var(--ease-out)}
.poster.in .mark::before{transform:scaleX(1)}
.poster.in div:nth-child(2) .mark::before{transition-delay:450ms}.poster.in div:nth-child(3) .mark::before{transition-delay:900ms}
.pricing .note{max-width:600px;margin-top:24px}

/* whatsapp */
.wa-sec{padding-block:0 var(--sec)}
.panel{background:var(--surf);border-radius:var(--r-panel);padding:clamp(24px,4vw,56px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px}
.panel .lead{max-width:480px;margin-top:16px}
.panel .row{margin-top:28px}
.send{list-style:none;display:grid;gap:28px;margin-top:28px;position:relative;font-size:clamp(16px,1.46vw,21px);line-height:1.4}
.send::before{content:"";position:absolute;left:6px;top:14px;bottom:14px;width:2px;background:var(--ring)}
.send li{position:relative;padding-left:34px;transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
.send li::before{content:"";position:absolute;left:0;top:.4em;width:14px;height:14px;border-radius:var(--r-dot);background:var(--ink);transition:transform 500ms var(--ease-out),opacity 500ms var(--ease-out)}
.js .send:not(.in) li{opacity:0;transform:translateX(10px)}.js .send:not(.in) li::before{transform:scale(.4);opacity:0}
.send li:nth-child(2),.send li:nth-child(2)::before{transition-delay:350ms}.send li:nth-child(3),.send li:nth-child(3)::before{transition-delay:700ms}

/* questions, business, app, about, final, footer */
.faq{padding-block:0 var(--sec)}
.faq .wrap{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:64px}
.qa{border-bottom:1px solid var(--line)}
.q{border-top:1px solid var(--line)}
.q button{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:20px 0;border:0;border-radius:var(--r-row);background:none;color:var(--ink);font:600 clamp(19px,1.7vw,24px)/1.25 var(--ff);letter-spacing:-.015em;text-align:left;cursor:pointer;transition:color 150ms ease;-webkit-tap-highlight-color:transparent}
.q button svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform 300ms var(--ease-out)}
.q.open button svg{transform:rotate(180deg)}
.q button:active span{opacity:.7}
.a{display:grid;grid-template-rows:0fr;transition:grid-template-rows 300ms var(--ease-out)}
.q.open .a{grid-template-rows:1fr}
.a>div{overflow:hidden}
.a p{color:var(--ink2);max-width:660px;padding-bottom:22px;opacity:0;transform:translateY(-6px);transition:opacity 220ms ease,transform 300ms var(--ease-out)}
.q.open .a p{opacity:1;transform:none}
/* the phone sits fully inside its panel */
.app{padding-block:0 var(--sec)}
.app-panel{background:var(--surf);border-radius:var(--r-panel);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(24px,4.5vw,64px);align-items:center;padding:44px clamp(24px,4vw,56px) 44px clamp(24px,5.5vw,80px)}
.phone{width:224px;max-width:100%;border-radius:34px;background:var(--ink);padding:7px;box-shadow:var(--dev)}
.phone img{display:block;width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;border-radius:27px}
.app .lead{max-width:440px;margin-top:14px}
.app .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.app .badge{height:60px;min-width:190px;justify-content:flex-start}
.qr{text-align:center;font:500 14px/20px var(--ff);color:var(--ink3)}
.qr svg{display:block;width:128px;height:128px;background:var(--bg);border-radius:var(--r-card);margin-bottom:10px}
.qr rect{fill:var(--ink)}
/* the company page: an intro, then contacts, business and masters as three equal blocks */
.company{padding-block:0 var(--sec)}
.co-intro{max-width:760px}.co-intro .lead{margin-top:16px}
.co-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:56px}
.co-block{display:flex;flex-direction:column;align-items:flex-start}
.co-block p{margin:10px 0 22px;flex:1}
.co-block p a{font-weight:600}
/* prices on the main page, and where / when */
.sec-head{padding-bottom:28px}.sec-head .lead{margin-top:12px}
.price-short{padding-block:0 var(--sec)}.price-short .lead{margin-top:12px}
.price-short .poster{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:32px 0 32px}
.price-short .mark{font-size:clamp(26px,2.7vw,40px);white-space:nowrap}
.areas{padding-block:0 var(--sec)}.areas .lead{margin-top:12px;max-width:640px}
.areas-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:28px;max-width:1040px}
.areas-cols p{margin-top:8px}
/* a document: one readable column */
.doc{padding-block:0 var(--sec)}
.doc>*{max-width:680px}
.doc .title{margin:8px 0 12px}
.doc .heading{margin:32px 0 8px}
.doc p{margin:0}
.doc-note{margin-top:40px!important}
/* cookies: a small card at the bottom, once */
.cookie{position:fixed;left:24px;bottom:24px;z-index:35;display:flex;align-items:center;gap:16px;width:min(520px,calc(100vw - 48px));padding:16px 16px 16px 20px;background:var(--surf);border-radius:var(--r-card);box-shadow:var(--e4);font-size:15px;line-height:21px;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out)}
.cookie.show{opacity:1;transform:none;pointer-events:auto}
.cookie p{margin:0}
.cookie a{text-decoration:underline;text-underline-offset:3px;color:var(--ink2)}
.cookie .btn{flex:none;height:44px;padding:0 20px;font-size:15px}
.final{padding-block:0 var(--sec);text-align:center}
.final .lead{margin-top:12px}
.final .field{margin:28px auto 0;text-align:left}
.foot{border-top:1px solid var(--line);padding-block:44px 32px;display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:28px;font-size:15px;line-height:22px}
.foot .brand{margin-bottom:14px}
.foot .badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.foot .badge{height:52px}
.foot h3{font:500 14px/20px var(--ff);color:var(--ink3);margin-bottom:12px}
.foot li{list-style:none;margin-bottom:8px}.foot a{transition:color 150ms ease}
.legal{padding-block:0 32px;font:500 14px/20px var(--ff);color:var(--ink3)}
.narrow{display:none}

/* blocks rise into view once, a group one after another; without scripts everything is simply there.
   Paced for reading: unhurried, and the staged ones start only when they are well on screen. */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity 900ms var(--ease-out),transform 900ms var(--ease-out);transition-delay:calc(var(--i,0)*140ms)}
.js .rv.in{opacity:1;transform:none}

/* tablet and small laptop */
@media (max-width:1259px){
  :root{--gut:clamp(16px,5vw,64px);--sec:64px}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq .wrap{gap:40px}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}.foot>:first-child{grid-column:1/-1}
  .app-panel{grid-template-columns:auto minmax(0,1fr)}.qr{display:none}
}
@media (max-width:959px){
  :root{--gut:16px;--sw:44px;--sec:44px;--r-panel:32px}
  body{font-size:15px;line-height:23px}
  [id]{scroll-margin-top:calc(var(--sw) + 76px)}
  main.inner{padding-top:20px}
  .page-head{padding-bottom:20px}.page-head .lead{margin-top:8px}
  .switch span{display:none}.switch hr{margin:0 6px}.switch button b{display:none}
  .top{height:60px;gap:8px}.top .tel span{display:none}
  .logo{font-size:19px}.brand i{width:36px;height:36px}
  .top .tel,.top .btn,.burger{width:40px;height:40px;padding:0;border:0;border-radius:var(--r-icon);background:var(--surf);box-shadow:var(--e2);justify-content:center}
  .top .btn span{display:none}.top .btn svg{width:22px;height:22px}
  .top .menu-btn{padding:0 14px 0 11px;gap:6px}
  .hero{padding-block:4px 24px}
  .hero h1{margin-top:6px}.hero .lead{margin-top:10px}
  .mmap{display:block;height:208px;margin-top:14px}
  .field{height:64px;padding:0 8px 0 18px}.field input{font-size:16px}.hint{left:18px;right:72px;font-size:16px}
  .hero .field{margin-top:8px}
  .field button{width:48px;height:48px}
  .hero .facts{margin-top:12px}.hero .facts span{display:block}.wide{display:none}.narrow{display:inline}
  .mk{--d:36px}.mk-core svg{width:17px;height:17px}
  .hero-b{padding-block:0 24px}.hero-b .mmap{height:220px;margin-top:0}
  .sheet{margin-top:-6px;padding:22px 16px 20px}
  .hero-b .display{font-size:40px}
  .hero-c{padding:0 8px 16px}.ypanel{padding:20px 8px 22px}.ypanel .label,.ypanel h1,.ypanel .lead{padding-inline:6px}
  .strip-space{display:none}.hero-d{padding-bottom:24px}
  .svc-head{grid-template-columns:1fr;gap:10px}
  .tiles{gap:8px;margin-top:20px}.tile{aspect-ratio:175/150;border-radius:min(var(--r-card),18px)}
  .tile figcaption{left:12px;right:12px;bottom:10px}.tile b{font-size:18px}.tile small{display:none}
  .svc-grid{column-gap:12px;margin-top:16px}.svc-grid li{padding:10px 0}.svc-grid b{font-size:16px}.svc-grid small{font-size:13px;line-height:18px}
  .ask{margin-top:16px}
  .how ol{grid-template-columns:1fr;gap:22px;margin-top:24px;padding:0 0 0 56px}
  .track{left:17px;right:auto;top:20px;width:6px;height:0}
  .track i{transform:scaleY(0);transform-origin:center top}
  .rider svg{transform:rotate(135deg)}
  .how li{min-height:40px}.how li>*{transform:translateX(8px)}
  .how li::before,.how li::after{left:-50px;top:6px}
  .how li p{max-width:none}
  .pricing{grid-template-columns:1fr;gap:20px}.shot{aspect-ratio:358/230;object-position:50% 20%}.poster{gap:18px}.poster p{margin-top:6px}
  .panel{grid-template-columns:1fr;gap:28px}.panel .btn{width:100%}.panel .row{margin-top:20px}
  .send{gap:18px;margin-top:16px}
  .faq .wrap{grid-template-columns:1fr;gap:16px}.q button{padding:16px 0}.a p{padding-bottom:18px}
  .app-panel{grid-template-columns:1fr;gap:22px;padding:24px 20px 28px}
  .app .txt{order:-1}.app .row{gap:8px;margin-top:20px}.app .badge{flex:1 1 0;min-width:0;height:52px;padding:0 10px;gap:8px}
  .phone{width:208px;margin-inline:auto}
  .co-grid{grid-template-columns:1fr;gap:36px;margin-top:36px}
  .co-block .btn{width:100%}.co-block p{margin-bottom:18px}
  .sec-head{padding-bottom:20px}
  .price-short .poster{grid-template-columns:1fr;gap:18px;margin:20px 0 24px}.price-short .btn{width:100%}
  .areas-cols{grid-template-columns:1fr;gap:20px;margin-top:20px}
  .cookie{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;flex-direction:column;align-items:stretch;gap:12px;padding:16px}
  .cookie .btn{width:100%}
  .final{text-align:left}.final .field{margin-top:18px}
  .foot{grid-template-columns:1fr 1fr;padding-block:28px 20px}
  .foot .badge{flex:1 1 0;min-width:0;padding:0 10px;gap:8px}
  .legal{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}
/* reduced motion: nothing travels; states simply are */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-in>*,.mk-halo,.pin.arrived::before,.rider.ping i{animation:none}
  .route.draw{animation:none;stroke-dashoffset:0}
  .mark::before,.rider,.track i,.tile img{transition:none}
  .js .rv,.js .send:not(.in) li,.how li>*,.drawer nav a,.cookie{transform:none}
  .map.city,.pin,.mk,.how li>*,.drawer,.scrim,.rv,.a,.a p,.send li,.cookie{transition-duration:200ms;transition-delay:0ms}
}