/* Scoped additions to the existing static export; preserve the navy/orange identity. */
h1,h2,h3{text-wrap:balance}a,button{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a:focus-visible,button:focus-visible{outline:3px solid #245d5c;outline-offset:4px}section[id]{scroll-margin-top:8px}
.hero h1{font-size:clamp(40px,3.6vw,48px);line-height:1.02;letter-spacing:-.035em}
.workshop{background:#eef1f1}.workshop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.workshop-photo{min-width:0;display:block;background:#fff}.workshop-photo img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}.workshop-caption{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 14px;font-size:14px;font-weight:700;line-height:1.5}.workshop-caption>span{color:#245d5c;font-size:24px}.workshop-dialog{border:0;padding:0;background:#0c1e30;color:#fff;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);width:1000px;overflow:auto}.workshop-dialog::backdrop{background:rgb(3 10 18 / .9)}.workshop-viewer{position:relative;padding:60px 20px 12px}.workshop-viewer>img{display:block;width:100%;height:calc(100dvh - 180px);object-fit:contain}.workshop-dialog button{border:1px solid #8291a0;background:#18354e;color:#fff;min-width:48px;min-height:48px;cursor:pointer;font-size:24px}.workshop-dialog button:focus-visible{outline-color:#ffc928}.workshop-close{position:absolute;right:12px;top:8px}.workshop-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}.workshop-controls p{margin:0;text-align:center;font-size:14px;line-height:1.5}.workshop-dialog[open]{animation:gallery-in .16s ease-out}@keyframes gallery-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:1000px){.workshop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workshop-photo img{aspect-ratio:4/3}}
@media(max-width:650px){.container{width:calc(100% - 32px)}.hero h1{font-size:clamp(34px,9.5vw,45px);letter-spacing:-.035em}.heading h2,.contact-copy h2{font-size:clamp(30px,8.3vw,39px);overflow-wrap:break-word}.hero-copy{padding:38px 0 32px}.hero-visual{margin:0 -16px;min-height:250px}.hero-facts{flex-wrap:wrap;gap:12px}.cta{min-width:0;padding-left:14px;padding-right:14px}.cta span{min-width:0}.cta span:not(small){font-size:clamp(17px,5.5vw,24px)}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-card{padding:18px 10px;min-width:0;min-height:195px}.service-title{overflow-wrap:anywhere;line-height:1.45}.workshop-grid{gap:12px}.workshop-photo img{aspect-ratio:3/4}.workshop-caption{padding:12px 10px;font-size:12px;align-items:flex-start}.workshop-caption>span{font-size:18px;flex-shrink:0}.payment-grid article{grid-template-columns:54px minmax(0,1fr);gap:16px;padding:22px 18px;min-height:180px}.payment-icon{width:54px;height:54px}.payment-grid h3{font-size:16px;overflow-wrap:break-word}.contact-grid{gap:28px}.messengers{flex-wrap:wrap}.messengers a{min-height:44px}.map-card{left:14px;right:14px;bottom:14px;padding:18px}.map-card b{font-size:14px}.map-card span{font-size:10px;line-height:1.5}.mobile-call{bottom:max(12px,env(safe-area-inset-bottom));left:16px;right:16px}.footer-links a{display:inline-flex;align-items:center;min-height:44px}footer{padding-bottom:calc(100px + env(safe-area-inset-bottom))}.modal{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto}.workshop-viewer{padding:62px 10px 12px}.all-reviews{max-width:100%;text-align:center}.header-inner{gap:8px}.call-small{min-height:44px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
.workshop-caption{overflow-wrap:anywhere}.workshop .heading>p{color:#53616a}
.workshop-dialog{margin:auto}

/* Messenger actions: visible at a glance and large enough for touch. */
.header-contact>div{gap:8px}
.header-contact>div a{
  width:44px;
  height:44px;
  border-color:color-mix(in srgb,currentColor 32%,transparent);
  background:color-mix(in srgb,currentColor 7%,#fff);
  transition:background-color .18s ease-out,border-color .18s ease-out,transform .18s ease-out;
}
.header-contact>div a:first-child{color:#12805c}
.header-contact>div a:last-child{color:#168acb}
.header-contact>div a svg{width:25px;height:25px}
.messengers a svg{width:22px;height:22px;flex:0 0 22px}
/* Exact brand glyphs replace the generic phone/chat symbols in the export. */
a[href^="https://wa.me/"]>svg,a[href^="https://t.me/"]>svg{display:none}
a[href^="https://wa.me/"]::before,a[href^="https://t.me/"]::before{content:"";display:inline-block;width:22px;height:22px;flex:0 0 22px;background:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
a[href^="https://wa.me/"]::before{-webkit-mask-image:url('/assets/whatsapp-brand.svg');mask-image:url('/assets/whatsapp-brand.svg')}
a[href^="https://t.me/"]::before{-webkit-mask-image:url('/assets/telegram-brand.svg');mask-image:url('/assets/telegram-brand.svg')}
.header-contact>div a::before{width:25px;height:25px;flex-basis:25px}
.footer-links a::before{width:18px;height:18px;flex-basis:18px;margin-right:6px;vertical-align:-3px}
@media(hover:hover){.header-contact>div a:hover{background:color-mix(in srgb,currentColor 13%,#fff);border-color:currentColor;transform:translateY(-1px)}}
@media(max-width:650px){
  .header-contact{display:flex;margin-left:auto}
  .header-contact .phone{display:none}
  .header-contact>div{display:flex}
  .call-small{display:none}
  .header-contact>div a{width:44px;height:44px}
  .header-contact>div a svg{width:26px;height:26px}
  .header-contact>div a::before{width:26px;height:26px;flex-basis:26px}
}
@media(max-width:360px){
  .cta{gap:10px;padding-inline:12px}
  .cta>svg:last-child{display:none}
  .cta span:not(small){font-size:17px}
}
@media(max-width:650px){.hero h1{font-size:clamp(28px,8vw,38px)}}

/* Master Auto Sever identity — supplied production logo. */
.brand-logo{display:inline-flex;align-items:center;flex:0 0 auto}
.brand-logo>img{display:block;width:145px;height:auto;aspect-ratio:365/144}
.footer-logo>img{width:190px}
@media(max-width:650px){
  .brand-logo>img{width:116px}
  .footer-logo>img{width:176px}
}

/* Navy header: one continuous brand system with the footer. */
.header{
  background:rgb(12 30 48 / .97);
  border-bottom-color:rgb(255 255 255 / .12);
  color:#fff;
}
.header-inner nav a{color:#eef3f7}
.header-inner nav a:hover,.header-inner nav a:focus-visible{color:#ffd013}
.header-contact .phone{color:#fff}
.header-contact>div a{
  background:transparent;
  border-color:rgb(255 255 255 / .24);
}
.header-contact>div a:first-child{color:#45d99a}
.header-contact>div a:last-child{color:#36aeea}
@media(hover:hover){
  .header-contact>div a:hover{
    background:rgb(255 255 255 / .08);
    border-color:currentColor;
  }
}

/* Let the workshop image breathe on narrow screens. */
@media(max-width:650px){.hero-visual .photo-label{display:none}}

/* Restrained corner system: softer, still technical and confident. */
:root{--radius-control:8px;--radius-panel:12px}
.cta,
.call-small,
.mobile-call,
.header-contact>div a,
.messengers a,
.review-controls button,
.workshop-dialog button{border-radius:var(--radius-control)}
.service-card,
.service-icon,
.workshop-photo,
.payment-grid,
.review-card,
.yandex-reviews,
.map,
.map-card,
.modal,
.workshop-dialog{border-radius:var(--radius-panel)}
.workshop-photo,
.payment-grid,
.review-card,
.yandex-reviews,
.map,
.modal,
.workshop-dialog{overflow:hidden}
.photo-label{border-radius:var(--radius-panel) 0 0 0}
.hero-visual .photo-label{display:none!important}

/* Hero service diagram: replaces the photo without changing hero copy or layout. */
.hero-visual{
  background-color:transparent;
  background-image:url('/hero-service-diagram-circles-readable.webp');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
@media(max-width:820px){
  .hero,.hero-grid{min-height:0}
  .hero-grid{display:flex;flex-direction:column}
  .hero-copy{padding:55px 0 44px}
  .hero-visual{
    width:100%;
    min-height:clamp(340px,72vw,520px);
  }
}
@media(max-width:650px){
  .hero-copy{display:contents}
  .hero-copy>.eyebrow{order:1;margin-top:55px}
  .hero-copy>h1{order:2}
  .hero-copy>p{order:3;margin-bottom:20px}
  .hero-visual{
    order:4;
    width:auto;
    align-self:stretch;
    min-height:clamp(300px,88vw,360px);
    margin-inline:-14px;
    background-position:center top;
  }
  .hero-copy>.cta{order:5;margin-top:18px}
  .hero-copy>.hero-facts{order:6;margin:18px 0 44px}
  .mobile-call{
    transition:opacity .18s ease,transform .24s cubic-bezier(.22,1,.36,1);
  }
  .hero-visible .mobile-call{
    opacity:0;
    pointer-events:none;
    transform:translateY(calc(100% + 24px));
  }
}
@media(max-width:650px) and (prefers-reduced-motion:reduce){
  .mobile-call{transition:none}
}

/* Visit details beside the logo: compact on desktop, second header row on phones. */
.header-inner::after{
  content:'Бестужевская ул., 2, корп. 4Ж\A 11:00–22:00 · без выходных';
  order:2;
  min-width:190px;
  margin-left:0;
  display:block;
  color:#bec9d2;
  font-size:12px;
  font-weight:700;
  line-height:1.45;
  white-space:pre-line;
}
.header-inner>.brand-logo{order:1}
.header-inner>nav{order:3}
.header-inner>.header-contact{order:4}
@media(max-width:1180px){
  .header-contact .phone{display:none}
  .header-inner{gap:20px}
}
@media(max-width:520px){
  html{scroll-padding-top:100px}
  .header-inner{
    min-height:96px;
    height:auto;
    padding-block:8px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:'logo contact' 'meta meta';
    column-gap:8px;
    row-gap:6px;
  }
  .header-inner>.brand-logo{grid-area:logo}
  .header-inner>.header-contact{grid-area:contact}
  .header-inner::after{
    content:'Бестужевская, 2 к. 4Ж  ·  11:00–22:00 · без выходных';
    grid-area:meta;
    min-width:0;
    width:100%;
    padding-top:6px;
    border-top:1px solid rgb(255 255 255 / .12);
    font-size:9.5px;
    line-height:1.2;
    white-space:nowrap;
  }
}
.camera{border-radius:var(--radius-panel)}
.camera-status,.camera-caption{border-radius:var(--radius-control)}

/* Payment methods: one geometry, no decorative noise. */
.payment-grid{
  gap:16px;
  border:0;
  border-radius:0;
  overflow:visible;
}
.payment-grid article{
  min-height:172px;
  grid-template-columns:60px minmax(0,1fr);
  gap:22px;
  padding:26px 28px;
  border:0;
  border-radius:var(--radius-panel);
  overflow:hidden;
  align-items:center;
}
.payment-featured:after{display:none}
.payment-icon{
  width:60px;
  height:60px;
  border-radius:var(--radius-control);
  color:#fff;
  background:#2f7473;
}
.payment-icon svg{width:30px;height:30px}
.payment-badge{
  display:block;
  margin:0 0 8px;
  padding:0;
  border:0;
  border-radius:0;
  color:#a9cecd;
  line-height:1.35;
}
.payment-grid h3{margin-bottom:8px}
.payment-grid p{color:#d2dce4;max-width:48ch}
@media(max-width:650px){
  .payment-grid{gap:12px}
  .payment-grid article{
    min-height:0;
    grid-template-columns:52px minmax(0,1fr);
    gap:16px;
    padding:20px 18px;
  }
  .payment-icon{width:52px;height:52px}
  .payment-icon svg{width:27px;height:27px}
  .payment-grid h3{font-size:15px}
  .payment-grid p{font-size:13px;line-height:1.55}
}

/* Mobile nav: the exported header hides <nav> completely below 1000px with
   no replacement, so Услуги/Почему мы/Камеры/Отзывы/Контакты become
   unreachable except by scrolling the whole page. Instead of a hamburger
   (this static export re-renders its own DOM on the client and drops any
   hand-inserted elements after hydration), the existing nav is turned into
   an always-visible horizontal scroll strip — no new elements needed. */
@media(max-width:1000px){
  .header-inner{flex-wrap:wrap;height:auto;padding-block:14px}
  .header-inner nav{
    display:flex;
    order:5;
    flex:1 1 100%;
    width:100%;
    gap:8px;
    margin-top:2px;
    padding-bottom:4px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .header-inner nav::-webkit-scrollbar{display:none}
  .header-inner nav a{
    flex:0 0 auto;
    white-space:nowrap;
    display:flex;align-items:center;
    min-height:38px;
    padding:8px 14px;
    border-radius:999px;
    background:rgb(255 255 255 / .08);
    border:1px solid rgb(255 255 255 / .14);
    font-size:13px;
  }
}
@media(max-width:520px){
  .header-inner{
    grid-template-areas:'logo contact' 'nav nav' 'meta meta';
  }
  .header-inner>nav{grid-area:nav}
}