/* Header, menu panel, footer postcard, mobile action bar — shared by every page. */
.site-hdr{position:sticky;top:0;z-index:50;background:var(--field);color:var(--field-ink);padding-top:env(safe-area-inset-top,0px)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--hdr-h)}
.logo{font:800 18px/1 var(--sans);text-decoration:none;color:var(--field-ink);flex:none}
.logo span{color:var(--brand)}
.nav-d{display:none;gap:16px;font:500 13px var(--ui)}
.nav-d a{text-decoration:none;color:var(--field-ink);white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent;transition:border-color var(--t-hover) ease}
.nav-d a:hover{border-color:var(--field-muted)}
.nav-d a.on{border-color:var(--brand)}
.hdr-actions{display:flex;align-items:center;gap:10px;flex:none}
.cta-full{display:none}
.hdr-actions .btn{font-size:13px;padding:0 14px}
@media (max-width:399px){.hdr-in{gap:10px}.hdr-actions{gap:6px}.hdr-actions .btn,.menu-t{padding:0 10px}}
.menu-t{min-height:44px;padding:0 14px;border:0;border-radius:var(--radius);background:var(--field-hl);color:var(--field-ink);font:var(--ui-weight) var(--s-small) var(--ui);cursor:pointer;
  transition:background-color var(--t-hover) ease}
.menu-t:hover{background:var(--field-hl-2)}
.menu{background:var(--field-2);padding:28px var(--m) 40px}
.menu[hidden]{display:none}
.menu ul{display:grid;gap:4px}
.menu a{display:block;text-decoration:none;color:var(--field-ink);font-family:var(--serif);font-weight:600;font-size:clamp(26px,1.2rem + 1.4vw,40px);line-height:1.2;padding:6px 0}
.menu a:hover,.menu a.on{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.menu .menu-contact{margin-top:26px;color:var(--field-muted);font-size:var(--s-small)}
.menu .menu-contact a{display:inline;font:700 var(--s-small) var(--sans);padding:0}
@media (prefers-reduced-motion:no-preference){
  .js .menu:not([hidden]) li{animation:rise 420ms var(--ease-out) both;animation-delay:calc(var(--i) * 40ms)}
  .js .menu:not([hidden]) li{opacity:0;transform:translateY(10px)}
}
@media (min-width:420px){.cta-short{display:none}.cta-full{display:inline}}
@media (min-width:1360px){.nav-d{display:flex}.menu-t{display:none}.menu{display:none!important}}
/* 10 labels („Тунинг и подобрения“, „Казуси и проекти“) need a compact bar and the short CTA until the screen is wide */
@media (min-width:1360px) and (max-width:1679px){
  .hdr-in{gap:14px}
  .nav-d{gap:10px;font-size:12px}
  .cta-full{display:none}.cta-short{display:inline}
}

/* footer: one dark field — the closing line on the left, contacts and links on the right, a thin rule above the imprint */
.foot{background:var(--field);color:var(--field-ink);padding:clamp(36px,4.5vw,72px) var(--m) calc(28px + env(safe-area-inset-bottom,0px))}
.postcard{max-width:1180px;margin:0 auto}
/* the driver's view towards „Ал. Невски“ behind „Ти караш автомобила си.“ */
.foot.has-bg{padding-top:clamp(120px,18vw,240px)}
.foot .bg-ph::after{background:linear-gradient(0deg,rgba(12,12,14,.95) 0%,rgba(12,12,14,.82) 55%,rgba(12,12,14,.4) 100%)}
.postcard-in{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,80px);align-items:start}
.postcard h2{font-size:var(--s-head);line-height:1}
.postcard .msg{margin-top:12px;max-width:34ch;color:var(--field-muted);font-size:var(--s-small)}
.postcard .msg .link{margin-top:12px;color:var(--field-ink)}
.addr{position:relative;padding-top:4px;font-size:var(--s-small)}
.stamp{float:right;width:clamp(76px,8vw,112px);margin:0 0 10px 18px}
.stamp img{width:100%;aspect-ratio:3/4;object-fit:cover}
.addr li{margin-bottom:8px;color:var(--field-muted)}
.addr a{color:var(--field-ink);text-decoration:none;font-weight:700}
.addr a:hover{text-decoration:underline;text-underline-offset:4px}
.imprint{clear:both;margin-top:clamp(24px,3vw,44px);padding-top:14px;border-top:1px solid var(--field-hl);font-size:var(--s-small);color:var(--field-muted)}

/* mobile action bar */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:var(--field)}
.mbar .btn{flex:1;min-height:44px;padding:0 8px;font-size:13px}
.mbar .btn-red{flex:1.25}
.mbar-chat{background:var(--surface-2)}
.mbar{transition:transform var(--t-ui) var(--ease-out)}
.at-foot .mbar,.is-typing .mbar{transform:translateY(110%)} /* footer has its own links; while typing the bar must not cover fields */
@media (max-width:879px){html{scroll-padding-bottom:96px}}
.mbar[hidden]{display:none}
@media (min-width:880px){.mbar{display:none!important}}
/* the action bar slides away while the footer is on screen, so the footer needs little room below it */
@media (max-width:879px){.foot{padding-bottom:calc(36px + env(safe-area-inset-bottom,0px))}}
@media (max-width:759px){
  .postcard-in{grid-template-columns:1fr}
}