:root{
  --paper:#f3f1ec;
  --warm:#f7f1e3;
  --surface:#ffffff;
  --ink:#23282b;
  --ink-2:#4e565b;
  --ink-3:#828b90;
  --line:#dcd9d1;
  --line-2:#e9e6de;
  --amber:#a8730d;
  --amber-fill:#d8a01c;
  --on-amber:#1e1708;
  --draft:#8a3b2a;
  --draft-bg:#f7e7e2;
  --shadow:0 1px 0 rgba(35,40,43,.05), 0 18px 40px -28px rgba(35,40,43,.55);
  --shot-shadow:0 6px 18px -14px rgba(35,40,43,.55);
  --btn-bg:#fdfaf3; --btn-bg-hover:#f4efe2;
  --btn-border:#c7c0b0; --btn-border-strong:#8d8778;
  --sh:35,40,43;
  --bar-h:0px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#16191b; --warm:#1c1e1d; --surface:#212527;
    --ink:#ecebe6; --ink-2:#b4babd; --ink-3:#8a9195;
    --line:#343a3d; --line-2:#292e31;
    --amber:#e0ae4f; --amber-fill:#cf9a28; --on-amber:#1e1708;
    --draft:#e7a291; --draft-bg:#33211c;
    --shadow:0 1px 0 rgba(0,0,0,.4), 0 18px 40px -28px rgba(0,0,0,.9);
    --shot-shadow:0 6px 18px -14px rgba(0,0,0,.9);
    --btn-bg:#272c2f; --btn-bg-hover:#2f3538;
    --btn-border:#4a5155; --btn-border-strong:#7d868b;
    --sh:0,0,0;
  }
}
:root[data-theme="dark"]{
  --paper:#16191b; --warm:#1c1e1d; --surface:#212527;
  --ink:#ecebe6; --ink-2:#b4babd; --ink-3:#8a9195;
  --line:#343a3d; --line-2:#292e31;
  --amber:#e0ae4f; --amber-fill:#cf9a28; --on-amber:#1e1708;
  --draft:#e7a291; --draft-bg:#33211c;
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 18px 40px -28px rgba(0,0,0,.9);
  --shot-shadow:0 6px 18px -14px rgba(0,0,0,.9);
  --btn-bg:#272c2f; --btn-bg-hover:#2f3538;
  --btn-border:#4a5155; --btn-border-strong:#7d868b;
  --sh:0,0,0;
}

*{box-sizing:border-box}
body{
  margin:0; padding-bottom:var(--bar-h);
  background:var(--paper); color:var(--ink);
  font-family:"PT Sans","Segoe UI",system-ui,sans-serif;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"Oswald","PT Sans Narrow","Arial Narrow",system-ui,sans-serif;
  font-weight:500; letter-spacing:.01em; text-wrap:balance; margin:0;
}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1060px;margin:0 auto;padding-inline:20px}
.label{font:700 11px/1.3 "PT Sans",sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}

/* draft ribbon */
.draft{background:var(--draft-bg);border-bottom:1px solid color-mix(in srgb,var(--draft) 35%,transparent);color:var(--draft)}
.draft .wrap{padding-block:6px;font-size:12.5px;line-height:1.35}
.draft b{font-weight:700;letter-spacing:.04em}

/* header */
header.bar{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:30;
  background:var(--paper); border-bottom:1px solid var(--line);
}
header.bar .wrap{display:flex;align-items:center;gap:14px;padding-block:10px}
.mark{display:flex;align-items:center;gap:9px;margin-right:auto;min-width:0}
.mark .sq{
  font:700 13px/1 "PT Sans",sans-serif;letter-spacing:.06em;
  background:var(--amber-fill);color:var(--on-amber);
  padding:7px 8px 6px;border-radius:3px;flex:none;
}
.mark .nm{font:700 16px/1.2 "PT Sans",sans-serif;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-tel{font:700 16px/1 "PT Sans",sans-serif;white-space:nowrap}
.lang{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;flex:none}
.lang button{
  appearance:none;border:0;background:transparent;color:var(--ink-2);
  font:700 12px/1 "PT Sans",sans-serif;letter-spacing:.09em;padding:7px 9px;cursor:pointer;
}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.lang button:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.langlink{
  font:700 12px/1 "PT Sans",sans-serif;letter-spacing:.09em;
  border:1px solid var(--line);border-radius:3px;padding:0 12px;
  text-decoration:none;color:var(--ink-2);flex:none;
  display:inline-flex;align-items:center;min-height:38px;
  transition:border-color 140ms ease, color 140ms ease;
}
.langlink:hover{border-color:var(--ink-3);color:var(--ink)}
.langlink:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* hero */
.hero{background:var(--warm);border-bottom:1px solid var(--line)}
.hero .wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,268px);
  gap:30px;align-items:center;padding-block:28px 24px;
}
.hero h1{
  font-size:clamp(33px,4.3vw,48px);line-height:1.04;letter-spacing:-.01em;text-wrap:initial;
}
.hero h1 .city{display:block;color:var(--amber)}
.lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:34px;align-items:start;margin-top:18px}
.hero p{margin:0;max-width:44ch;font-size:17px;color:var(--ink-2)}
.openhours{max-width:300px}
.openhours table{border-collapse:collapse;width:100%;font-size:16px;margin-top:6px}
.openhours td{padding:7px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.openhours tr:first-child td{border-top:0}
.openhours td:last-child{text-align:right;white-space:nowrap}
.openhours td:first-child{color:var(--ink-2)}
.shot{margin:0}
.shot img{width:100%;border-radius:4px;box-shadow:var(--shot-shadow)}
.shot figcaption{margin-top:9px;font-size:14px;color:var(--ink-2);display:grid;gap:1px}
.maplink{font-weight:700;justify-self:start;display:inline-flex;align-items:center;min-height:40px;padding-block:6px;font-size:15px}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font:400 16px/1 "PT Sans",sans-serif;
  padding:14px 22px;min-height:48px;
  border-radius:7px;border:1px solid var(--btn-border);
  background:var(--btn-bg);color:var(--ink);cursor:pointer;text-decoration:none;
  box-shadow:0 1px 2px rgba(var(--sh),.10), 0 4px 10px -6px rgba(var(--sh),.28);
  transition:transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.btn:hover{background:var(--btn-bg-hover)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(var(--sh),.10)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn-main{border-color:var(--btn-border-strong);font-weight:700}

/* links */
.bar-tel,.maplink,.fact dd a{
  color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--amber-fill);
  text-decoration-thickness:2px;text-underline-offset:5px;
  border-radius:3px;
}
.bar-tel:hover,.maplink:hover,.fact dd a:hover{
  color:var(--amber);text-decoration-color:var(--amber);text-decoration-thickness:3px;
}
.bar-tel:focus-visible,.maplink:focus-visible,.fact dd a:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;
}

/* sections */
section{border-bottom:1px solid var(--line)}
section .wrap{padding-block:40px}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.sec-head h2{font-size:27px}
.sec-head .note{color:var(--ink-3);font-size:14px}

/* what we repair */
.repair{display:grid;grid-template-columns:repeat(2,1fr);gap:0 44px;margin:0;padding:0;list-style:none}
.repair li{padding:12px 0;border-bottom:1px solid var(--line-2);font-size:16.5px;display:flex;gap:12px;align-items:baseline}
.repair li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--amber-fill)}
.repair li b{font-weight:400;color:var(--ink-3);font-size:14.5px}

/* cards */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.g3{grid-template-columns:repeat(3,1fr)}
.cell{background:var(--surface);padding:21px 19px;display:flex;flex-direction:column;gap:9px}
.cell h3{font-size:19px}
.cell p{margin:0;color:var(--ink-2);font-size:15px}

.brands{display:flex;flex-wrap:wrap;gap:10px}
.brand{border:1px solid var(--line);background:var(--surface);border-radius:3px;padding:11px 15px;font:700 15px/1.35 "PT Sans",sans-serif}
.brand span{display:block;font-weight:400;font-size:12.5px;color:var(--ink-3)}

.ph{
  border:1px dashed color-mix(in srgb,var(--draft) 55%,transparent);
  background:color-mix(in srgb,var(--draft-bg) 70%,transparent);
  border-radius:3px;padding:10px 12px;font-size:14px;color:var(--draft);
  display:flex;gap:8px;align-items:flex-start;
}
.ph::before{content:"?";font:700 12px/1 "PT Sans",sans-serif;flex:none;
  width:18px;height:18px;border-radius:50%;background:var(--draft);color:var(--draft-bg);
  display:grid;place-items:center;margin-top:2px}

/* contacts + form */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow)}
.fact dl{margin:0}
.fact .row{padding:14px 18px;border-bottom:1px solid var(--line-2)}
.fact .row:last-child{border-bottom:0}
.fact dt{font:700 11px/1.3 "PT Sans",sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.fact dd{margin:5px 0 0;font-size:15.5px}
.fact .tel{font:700 19px/1.4 "PT Sans",sans-serif;display:flex;align-items:center;min-height:44px}

form{display:grid;gap:12px;margin-top:6px}
label{display:grid;gap:5px;font-size:13px;color:var(--ink-2)}
input,textarea,select{
  font:400 15px/1.4 "PT Sans",sans-serif;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:10px 11px;
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--amber);outline-offset:-1px;border-color:var(--amber)}
button.submit{justify-self:start}
.form-note{font-size:13px;color:var(--ink-3);margin:0}

footer{background:var(--surface)}
footer .wrap{padding-block:24px;display:flex;flex-wrap:wrap;gap:8px 28px;font-size:13.5px;color:var(--ink-3)}
footer b{color:var(--ink-2);font-weight:400}

.callbar{display:none}

@media (max-width:860px){
  :root{--bar-h:74px}
  .hero .wrap{grid-template-columns:1fr;gap:22px;padding-block:22px 26px}
  .lead{grid-template-columns:1fr;gap:20px;margin-top:14px}
  .hero p{max-width:none}
  .shot{max-width:320px}
  .repair{grid-template-columns:1fr}
  .g3,.contact-grid{grid-template-columns:1fr}
  .bar-tel{display:none}
  .callbar{
    display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--paper);border-top:1px solid var(--line);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .callbar .btn{flex:1;padding:15px 10px;min-height:52px;font-size:16.5px}
  .callbar .cb-b{flex:0 0 42%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}