/* Autogrista — built from the Claude Design export, 2026-08-19.
   Mobile-first. ALL desktop overrides live in the single @media block at the END
   (source order beats media queries at equal specificity). */

*,*::before,*::after{box-sizing:border-box}

:root{
  --sans:'Source Sans 3','Segoe UI',system-ui,-apple-system,sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --accent:#5A4691; --accent-hover:#483672; --accent-tint:#ECE7F3;
  --ink:#241F26; --sec:#625A66; --hair:#E6E1DB; --surface:#F3EFE9;
  --ground:#FAF8F5; --star:#C7912E; --line:#BFB8AB; --line-hover:#8F877A;
  --supfilter:saturate(.72) contrast(.95) brightness(1.03);
  --supveil:.16;
  --bar-h:78px;
}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  padding-bottom:var(--bar-h);           /* reserve the sticky bar's space */
}
img{max-width:100%; display:block}
h1,h2,p,figure,blockquote{margin:0}
a{color:var(--accent)}
.num{font-variant-numeric:tabular-nums}

.ico{width:17px;height:17px;flex-shrink:0}
.ico--lg{width:19px;height:19px}
.ico--svc{width:22px;height:22px}
.ico--tick{width:18px;height:18px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:56px; padding:0 28px; border-radius:10px;
  font:600 17px/24px var(--sans); text-decoration:none; cursor:pointer;
  border:1px solid transparent; transition:background-color .15s ease, border-color .15s ease;
}
.btn--accent{background:var(--accent); color:#fff}
.btn--accent:hover{background:var(--accent-hover)}
.btn--ghost{background:#fff; border-color:var(--line); color:var(--ink)}
.btn--ghost:hover{border-color:var(--line-hover)}
.btn--sm{height:48px; padding:0 18px; gap:9px; font:600 16px/22px var(--sans)}

.iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px; border:1px solid transparent;
  background:none; padding:0; cursor:pointer; color:var(--ink); text-decoration:none;
}
.iconbtn--accent{background:var(--accent); color:#fff}
.iconbtn--menu{border-color:var(--line); flex-direction:column; gap:4px}
.iconbtn--menu span{width:18px; height:2px; background:var(--ink); border-radius:1px}

/* ---------- header ---------- */
.hdr{background:#fff; border-bottom:1px solid var(--hair); position:sticky; top:0; z-index:40}
.hdr__in{display:flex; align-items:center; justify-content:space-between; height:64px; padding:0 16px}
.hdr__logo{font:700 18px/26px var(--sans)}
.hdr__logo a{color:var(--ink); text-decoration:none}
.hdr__actions{display:none}
.hdr__mob{display:flex; gap:8px}
.hdr__nav{
  display:none; position:absolute; left:0; right:0; top:100%;
  background:#fff; border-bottom:1px solid var(--hair);
  flex-direction:column; padding:8px 16px 16px;
}
.hdr__nav.is-open{display:flex}
.hdr__nav a{
  color:var(--ink); text-decoration:none; font:600 17px/24px var(--sans);
  padding:14px 0; border-bottom:1px solid var(--hair);
}
.hdr__nav a:last-child{border-bottom:0}

/* ---------- hero ---------- */
.hero{position:relative; display:flex; flex-direction:column; padding:32px 16px 0; overflow:hidden}
.hero__in{order:1; position:relative; z-index:2}
.hero picture{order:2; display:block; margin:24px -16px 0}
.hero__img{width:100%; height:240px; object-fit:cover; object-position:72% center}
.hero__wash,.hero__fade{display:none}
.hero h1{font:600 36px/42px var(--serif); letter-spacing:-.4px; text-wrap:balance; margin:0 0 14px}
.hero__lead{font:400 18px/28px var(--sans); text-wrap:pretty; margin:0 0 8px}
.hero__addr{font:400 16px/24px var(--sans); color:var(--sec); margin:0 0 24px}
.hero__cta{display:grid; grid-template-columns:minmax(0,1fr); gap:10px}

/* ---------- trust ---------- */
.trust{margin:0 16px}
.trust__grid{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.trust__item{display:flex; flex-direction:column; gap:4px; padding:20px 16px 20px 0}
.trust__item:nth-child(2),.trust__item:nth-child(4){padding:20px 0 20px 16px; border-left:1px solid var(--hair)}
.trust__item:nth-child(3),.trust__item:nth-child(4){border-top:1px solid var(--hair)}
.trust__big{font:600 26px/32px var(--serif)}
.trust__mid{font:600 16px/21px var(--sans)}
.trust__sub{margin-top:auto; font:400 14px/20px var(--sans); color:var(--sec)}
.trust__rate{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.stars{position:relative; display:inline-block; font:400 13px/13px var(--sans); letter-spacing:2px; color:#DAD3C6; white-space:nowrap}
.stars__on{position:absolute; left:0; top:0; width:86%; overflow:hidden; white-space:nowrap; color:var(--star)}
.stars--lg{font:400 18px/18px var(--sans); letter-spacing:2px}

/* ---------- headings ---------- */
.h2{font:600 30px/37px var(--serif); letter-spacing:-.2px}
.h2--lg{font:600 32px/40px var(--serif)}
.h2--md{font:600 28px/35px var(--serif)}

/* ---------- services ---------- */
.svc{padding:48px 16px 8px}
.svc .h2{margin:0 0 24px}
.svc__grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.svc__col{display:contents}
.svc__label{display:none}
.svc__row{
  display:flex; flex-direction:column; justify-content:space-between; gap:12px;
  min-height:104px; padding:14px; background:var(--surface); border-radius:12px;
}
.svc__row p{font:600 16px/21px var(--sans); margin:0}

/* ---------- 3D alignment ---------- */
.align{margin:48px 0 0; padding:40px 16px 48px; background:var(--surface)}
.align .h2{margin:0 0 16px}
.ticks{display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin:0 0 20px}
.ticks p{display:flex; align-items:center; gap:10px; font:400 16px/24px var(--sans); margin:0}
.align__media{display:grid; grid-template-columns:minmax(0,1fr); gap:16px}
.shot{position:relative; border-radius:14px; overflow:hidden}
.shot img{width:100%; object-fit:cover}
.shot__veil{position:absolute; inset:0; background:var(--ground); pointer-events:none}
.shot--sup img{filter:var(--supfilter)}
.shot--sup .shot__veil{opacity:var(--supveil)}
.shot--a img{height:210px}
.shot--b{display:none}

/* ---------- inspection ---------- */
.insp{padding:48px 16px 0; display:grid; grid-template-columns:minmax(0,1fr); gap:0}
.insp__media{margin:0 0 18px}
.insp__media img{height:190px}
.insp .h2{margin:0 0 8px}
.insp__lead{font:400 17px/26px var(--sans); text-wrap:pretty; margin:0 0 20px}
.insp .btn{width:100%}

/* ---------- shop ---------- */
.shop{padding:56px 0 0}
.shop__head{padding:0 16px}
.shop__head .h2{margin:0 0 10px}
.shop__quote{font:400 19px/29px var(--serif); text-wrap:balance; margin:0 0 20px}
.shop__strip{display:grid; grid-template-columns:1fr 1fr; gap:2px}
.shop__img{width:100%; height:130px; object-fit:cover}
.shop__img--wide{grid-column:1 / -1; height:250px}
.shop__img--wipers{object-position:center 30%}
.shop__body{padding:24px 16px 0; display:grid; grid-template-columns:minmax(0,1fr); gap:24px}
.shop__cats{display:grid; grid-template-columns:minmax(0,1fr)}
.shop__cats p{margin:0; padding:13px 0; border-bottom:1px solid var(--hair); font:600 16px/23px var(--sans)}
.shop__brandslabel{font:400 14px/20px var(--sans); color:var(--sec); margin:0 0 6px}
.brands__row{padding:0 0 12px}
.brands__k{font:400 14px/20px var(--sans); color:var(--sec); margin:0 0 2px}
.brands__v{font:400 15px/23px var(--sans); margin:0}
.note{display:flex; align-items:flex-start; gap:10px; font:400 16px/24px var(--sans); color:var(--sec); margin:20px 0 0}
.note .ico{margin-top:3px}

/* ---------- reviews ---------- */
.revs{margin:48px 0 0; padding:40px 16px 48px; background:#fff; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.revs .h2{margin:0 0 12px}
.revs__score{display:flex; align-items:baseline; gap:12px; margin:0 0 24px; flex-wrap:wrap}
.revs__score p{font:600 15px/22px var(--sans); margin:0}
.revs__grid{display:grid; grid-template-columns:minmax(0,1fr)}
.rev{margin:0; padding:20px 0 0; border-top:1px solid var(--hair)}
.rev__q{font:400 18px/29px var(--serif); text-wrap:pretty; margin:0 0 14px}
.rev__by{font:600 14px/20px var(--sans)}
.rev__by span{font-weight:400; color:var(--sec)}
.rev--3{display:none}

/* ---------- contacts ---------- */
.cont{padding:48px 0 0}
.cont__in{padding:0 16px}
.cont .h2{margin:0 0 20px}
.cont__grid{display:grid; grid-template-columns:minmax(0,1fr); gap:32px}
.cont__addr{font:600 17px/25px var(--sans); margin:0 0 4px}
.cont__hint{font:400 16px/24px var(--sans); color:var(--sec); margin:0 0 24px}
.cont__phones{display:grid; grid-template-columns:minmax(0,1fr); gap:6px; margin:0 0 16px}
.cont__lab{font:400 14px/20px var(--sans); color:var(--sec); margin:0 0 2px}
.cont__num{font:600 26px/33px var(--serif); font-variant-numeric:tabular-nums; margin:0}
/* inline-block + padding lifts the phone links to a ≥44px touch target
   without moving the number itself; the container gap absorbs the extra height */
.cont__num a{display:inline-block; padding:9px 0; color:var(--ink); text-decoration:none}
.cont__num a:hover{color:var(--accent)}
.cont__dot{display:none}
.cont__num a.cont__num2{display:block; width:fit-content; margin-top:0; font:600 20px/27px var(--serif)}
.cont__mail{font:400 16px/24px var(--sans); margin:0}
.hours{margin:0 0 20px}
.hours__row{display:grid; grid-template-columns:1fr auto; gap:12px; padding:13px 0; border-top:1px solid var(--hair)}
.hours__row p{margin:0; font:400 16px/24px var(--sans)}
.hours__row p:last-child{font-weight:600}
.hours__row:last-child{border-bottom:1px solid var(--hair)}
.hours__row--off p,.hours__row--off p:last-child{color:var(--sec); font-weight:400}
.note--start{margin:0 0 32px}

/* ---------- form ---------- */
.form__title{font:600 20px/28px var(--sans); margin:0 0 6px}
.form__hint{font:400 16px/24px var(--sans); color:var(--sec); text-wrap:pretty; margin:0 0 20px}
.form{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin:0 0 40px}
.form__two{display:grid; grid-template-columns:minmax(0,1fr); gap:16px}
.field{display:grid; grid-template-columns:minmax(0,1fr); gap:8px}
.field>span{font:600 15px/20px var(--sans)}
.field input,.field textarea{
  width:100%; border-radius:10px; background:#fff; border:1px solid var(--line);
  font:400 17px/24px var(--sans); color:var(--ink); outline:none;
}
.field input{height:56px; padding:0 16px}
.field textarea{padding:14px 16px; line-height:26px; resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.form__send{width:100%}
.form__note{font:400 16px/24px var(--sans); color:var(--sec); margin:0}

/* ---------- map ---------- */
.map{position:relative}
.map img{width:100%; height:240px; object-fit:cover}
.map__pin{
  position:absolute; left:44%; top:42%; width:16px; height:16px; border-radius:50%;
  background:var(--accent); border:3px solid #fff; box-shadow:0 2px 10px rgba(36,31,38,.35);
  transform:translate(-50%,-50%);
}

/* ---------- footer ---------- */
.foot{background:var(--ink); color:var(--ground); padding:24px 16px}
.foot__name{font:600 15px/22px var(--sans); margin:0 0 2px}
.foot__reg{font:400 14px/21px var(--sans); color:rgba(250,248,245,.7); margin:0}

/* ---------- sticky call bar ---------- */
.bar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; gap:8px; padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid var(--hair); box-shadow:0 -8px 24px rgba(36,31,38,.08);
}
.bar__btn{flex:1; height:52px; padding:0 8px; gap:8px; font:600 16px/22px var(--sans)}

/* ===================================================================
   DESKTOP — everything below overrides the mobile rules above.
   Kept last on purpose: at equal specificity, source order wins.
   =================================================================== */
@media (min-width:1024px){

  body{padding-bottom:0}
  html{scroll-padding-top:96px}
  .bar{display:none}

  /* header */
  .hdr__in{max-width:1360px; margin:0 auto; padding:0 40px; height:80px; gap:30px; justify-content:flex-start}
  .hdr__logo{font:700 21px/28px var(--sans); letter-spacing:.2px}
  .hdr__mob{display:none}
  .hdr__nav{
    display:flex; position:static; flex-direction:row; gap:22px;
    padding:0; background:none; border:0;
  }
  .hdr__nav a{font:600 16px/24px var(--sans); padding:0; border:0}
  .hdr__nav a:hover{color:var(--accent)}
  .hdr__actions{display:flex; align-items:center; gap:12px; margin-left:auto}

  /* hero */
  .hero{display:block; height:660px; padding:0}
  .hero picture{order:0; margin:0; position:absolute; inset:0}
  .hero__img{position:absolute; inset:0; width:100%; height:100%}
  .hero__wash{
    display:block; position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg,#FAF8F5 0%,#FAF8F5 34%,rgba(250,248,245,.9) 48%,rgba(250,248,245,.3) 70%,rgba(250,248,245,0) 86%);
  }
  .hero__fade{
    display:block; position:absolute; left:0; right:0; bottom:0; height:140px; z-index:1;
    background:linear-gradient(0deg,#FAF8F5 0%,rgba(250,248,245,0) 100%);
  }
  .hero__in{max-width:1160px; margin:0 auto; padding:120px 0 0}
  .hero h1{font:600 60px/68px var(--serif); letter-spacing:-.6px; max-width:640px; margin:0 0 20px}
  .hero__lead{font:400 21px/32px var(--sans); max-width:540px; margin:0 0 10px}
  .hero__addr{margin:0 0 36px}
  .hero__cta{display:flex; gap:12px}

  /* trust */
  .trust{max-width:1160px; margin:0 auto}
  .trust__grid{grid-template-columns:repeat(4,1fr)}
  .trust__item{padding:32px; gap:6px; border-left:1px solid var(--hair); border-top:0}
  .trust__item:first-child{padding:32px 32px 32px 0; border-left:0}
  .trust__item:last-child{padding:32px 0 32px 32px}
  .trust__item:nth-child(2),.trust__item:nth-child(4){padding:32px; border-left:1px solid var(--hair)}
  .trust__item:nth-child(4){padding:32px 0 32px 32px}
  .trust__item:nth-child(3),.trust__item:nth-child(4){border-top:0}
  .trust__big{font:600 34px/42px var(--serif)}
  .trust__mid{font:600 20px/27px var(--sans)}
  .trust__sub{font:400 15px/22px var(--sans)}
  .trust__rate{gap:10px}
  .stars{font:400 16px/16px var(--sans)}
  .stars--lg{font:400 22px/22px var(--sans); letter-spacing:3px}

  /* headings */
  .h2{font:600 48px/56px var(--serif); letter-spacing:-.4px}
  .h2--lg{font:600 56px/64px var(--serif); letter-spacing:-.5px}
  .h2--md{font:600 44px/52px var(--serif); letter-spacing:-.3px}

  /* services */
  .svc{max-width:1160px; margin:0 auto; padding:120px 0}
  .svc .h2{margin:0 0 56px}
  .svc__grid{grid-template-columns:repeat(4,1fr); gap:0 48px; align-items:start}
  .svc__col{display:block}
  .svc__label{display:block; padding:0 0 12px; font:400 15px/22px var(--sans); color:var(--sec)}
  .svc__row{
    flex-direction:row; align-items:center; justify-content:flex-start; gap:12px; min-height:0;
    padding:18px 0; background:none; border-radius:0;
    border-top:1px solid var(--hair); cursor:default;
  }
  .svc__row--last{border-bottom:1px solid var(--hair)}
  .svc__row p{font:600 16px/22px var(--sans)}

  /* 3D alignment */
  .align{margin:0; padding:0}
  .align__in{
    max-width:1160px; margin:0 auto; padding:112px 0;
    display:grid; grid-template-columns:1fr 1.15fr; gap:96px; align-items:center;
  }
  .align .h2{margin:0}
  .ticks{gap:14px; margin:32px 0 0}
  .ticks p{font:400 18px/27px var(--sans); gap:12px}
  .ticks .ico{width:20px; height:20px}
  .align__media{gap:16px}
  .shot--a img{height:280px}
  .shot--b{display:block}
  .shot--b img{height:196px; object-position:center 60%}

  /* inspection */
  .insp{
    max-width:1160px; margin:0 auto; padding:120px 0;
    grid-template-columns:1.3fr 1fr; gap:96px; align-items:center;
  }
  .insp__txt{order:1}
  .insp__media{order:2; margin:0}
  .insp__media img{height:340px}
  .insp .h2{margin:0 0 18px}
  .insp__lead{font:400 19px/30px var(--sans); max-width:480px; margin:0 0 36px}
  .insp .btn{width:auto}

  /* shop */
  .shop{padding:0; border-top:1px solid var(--hair)}
  .shop__head{
    max-width:1160px; margin:0 auto; padding:112px 0 64px;
    display:flex; align-items:flex-end; justify-content:space-between; gap:64px;
  }
  .shop__head .h2{margin:0}
  .shop__quote{font:400 24px/36px var(--serif); max-width:560px; margin:0}
  .shop__strip{grid-template-columns:1.6fr 1fr 1fr}
  .shop__img{height:440px}
  .shop__img--wide{grid-column:auto; height:440px}
  .shop__body{
    max-width:1160px; margin:0 auto; padding:64px 0 120px;
    grid-template-columns:1fr 1fr; gap:96px; align-items:start;
  }
  .shop__cats{grid-template-columns:1fr 1fr; gap:0 40px}
  .shop__cats p{padding:15px 0; font:600 17px/24px var(--sans); display:flex; align-items:center}
  .shop__brandslabel{font:400 15px/22px var(--sans); margin:0 0 4px}
  .brands__row{
    display:grid; grid-template-columns:150px 1fr; gap:24px;
    padding:15px 0; border-bottom:1px solid var(--hair);
  }
  .brands__k{font:600 16px/24px var(--sans); color:var(--ink); margin:0}
  .brands__v{font:400 16px/24px var(--sans); color:var(--sec)}
  .note{font:400 16px/24px var(--sans); margin:24px 0 0}

  /* reviews */
  .revs{margin:0; padding:0; background:#fff; border-bottom:0}
  .revs__in{max-width:1160px; margin:0 auto; padding:112px 0}
  .revs__head{display:flex; align-items:baseline; justify-content:space-between; gap:32px; margin:0 0 56px}
  .revs .h2{margin:0}
  .revs__score{margin:0; gap:14px}
  .revs__score p{font:600 17px/24px var(--sans)}
  .revs__grid{grid-template-columns:repeat(3,1fr); gap:64px}
  .rev{display:flex; flex-direction:column; gap:20px; padding:28px 0 0}
  .rev--3{display:flex}
  .rev__q{font:400 20px/31px var(--serif); margin:0}
  .rev__by{margin-top:auto; font:600 15px/22px var(--sans)}

  /* contacts */
  .cont{padding:0; border-top:1px solid var(--hair)}
  .cont__in{max-width:1160px; margin:0 auto; padding:112px 0 96px}
  .cont .h2{margin:0 0 56px}
  .cont__grid{grid-template-columns:1fr 1.1fr; gap:96px; align-items:start}
  .cont__addr{font:600 20px/28px var(--sans); margin:0 0 6px}
  .cont__hint{font:400 17px/26px var(--sans); text-wrap:pretty; margin:0}
  .cont__phones{gap:24px; margin:40px 0 0}
  .cont__lab{font:400 15px/22px var(--sans)}
  .cont__num{font:600 30px/38px var(--serif)}
  .cont__num a{padding:0}
  .cont__dot{display:inline; font:400 24px/38px var(--serif); color:var(--sec)}
  .cont__num a.cont__num2{display:inline; width:auto; padding:0; margin:0; font:600 30px/38px var(--serif)}
  .cont__mail{font:400 17px/26px var(--sans)}
  .hours{margin:40px 0 0; max-width:400px}
  .hours__row{grid-template-columns:1fr auto; gap:16px; padding:14px 0}
  .hours__row p{font:400 17px/26px var(--sans)}
  .hours__row p:last-child{font-weight:600}
  .hours__row--off p,.hours__row--off p:last-child{font-weight:400}
  .note--start{margin:24px 0 0}

  /* form */
  .form__title{font:600 22px/30px var(--sans)}
  .form__hint{margin:0 0 28px}
  .form{gap:20px; margin:0}
  .form__two{grid-template-columns:1fr 1fr; gap:16px}
  .form__send{width:auto; justify-self:start}

  /* map */
  .map img{height:420px}
  .map__pin{width:18px; height:18px}

  /* footer */
  .foot{padding:0}
  .foot__in{
    max-width:1160px; margin:0 auto; padding:32px 0;
    display:flex; align-items:baseline; justify-content:space-between; gap:32px;
  }
  .foot__name{font:600 16px/24px var(--sans); margin:0}
  .foot__reg{font:400 14px/24px var(--sans)}
}

@media (min-width:1024px) and (max-width:1279px){
  .hdr__in{padding:0 24px; gap:20px}
  .hdr__nav{gap:16px}
  .hero__in,.trust,.svc,.align__in,.insp,.shop__head,.shop__body,.revs__in,.cont__in,.foot__in{
    max-width:100%; padding-left:24px; padding-right:24px;
  }
  .btn--sm .num{font-size:15px}
}