:root{
  --black:#11110f;
  --ink:#191813;
  --yellow:#f2cf28;
  --yellow2:#ffd928;
  --blue:#173d84;
  --red:#c51f24;
  --paper:#e9e2d3;
  --cream:#f4efe3;
  --muted:#aaa28e;
  --line:#343126;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Roboto Condensed",Arial,sans-serif;font-size:18px;line-height:1.45}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:min(1120px,calc(100% - 40px));margin-inline:auto}

.topbar{position:sticky;top:0;z-index:20;background:var(--black);border-bottom:5px solid var(--yellow);box-shadow:0 3px 0 rgba(0,0,0,.25)}
.nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.logo{font-family:Anton,Impact,sans-serif;letter-spacing:.8px;color:#fff;font-size:22px}.logo b{color:var(--yellow)}
nav{display:flex;gap:24px}nav a{font-weight:900;text-transform:uppercase;font-size:14px;letter-spacing:.8px;color:#ddd}nav a:hover{color:var(--yellow)}

.hero{overflow:hidden;background:#23221d;color:#fff;border-bottom:10px solid var(--black)}
.keys{white-space:nowrap;overflow:hidden;height:62px;padding:10px 0 0;font-size:36px;letter-spacing:16px;text-align:center;filter:grayscale(1) sepia(.5);opacity:.55;background:#504f45;border-bottom:4px solid #777262}
.sign{padding:34px 0 0;text-align:center;background:linear-gradient(180deg,#191915 0%,#11110f 100%)}
.integral{margin:0 0 4px;font-weight:900;letter-spacing:4px;font-size:clamp(18px,2.5vw,28px)}
h1{margin:0;font-family:Anton,Impact,sans-serif;font-size:clamp(58px,10vw,118px);line-height:.96;letter-spacing:3px;color:var(--yellow);text-shadow:4px 4px 0 #000}h1 span{color:#fff}
.services-line{margin:28px auto 26px;max-width:920px;padding:15px 16px;border-block:2px solid #5c594c;font-family:Anton,Impact,sans-serif;font-size:clamp(24px,4vw,46px);line-height:1.15;letter-spacing:.8px;color:var(--yellow)}
.blue-band,.red-band{margin-inline:calc(50% - 50vw);padding:10px 20px;font-family:Anton,Impact,sans-serif;letter-spacing:2px;line-height:1.1}.blue-band{background:var(--blue);font-size:clamp(26px,4vw,48px)}.red-band{background:var(--red);font-size:clamp(29px,4.8vw,58px)}

.section{padding:72px 0 82px;background:var(--cream);background-image:linear-gradient(rgba(65,57,43,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(65,57,43,.05) 1px,transparent 1px);background-size:30px 30px}
.section-title{display:flex;align-items:center;gap:18px;margin-bottom:34px}.section-title>span{font-family:Anton,Impact,sans-serif;font-size:58px;color:var(--red);line-height:1}.section-title small,.about small,.contact small{font-weight:900;letter-spacing:3px;color:#726a59}.section-title h2,.about h2,.contact h2{font-family:Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.5px;font-size:clamp(34px,5vw,58px);line-height:1;margin:3px 0 0}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);border:3px solid var(--black);background:var(--black);gap:3px}.service-grid article{background:#f7f1e4;padding:28px 24px 30px;min-height:220px}.service-grid .icon{font-size:38px;margin-bottom:18px}.service-grid h3{margin:0 0 8px;font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-size:28px}.service-grid p{margin:0;color:#615b4e}

.workshop{padding:80px 0;background:#201f1a;color:#eee;border-block:8px solid var(--yellow)}
.workshop-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}.photo{padding:10px;background:#0f0f0d;border:2px solid #5a5547;box-shadow:13px 13px 0 #090908}.photo img{width:100%;height:590px;object-fit:cover;object-position:center}.about small{color:var(--yellow)}.about h2{color:#fff;margin:10px 0 18px}.about p{max-width:520px;color:#c9c3b6;font-size:21px}.brands{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}.brands b{display:inline-block;padding:8px 12px;background:var(--yellow);color:#161511;border:2px solid #000;font-family:Anton,Impact,sans-serif;font-size:18px;letter-spacing:.4px;box-shadow:3px 3px 0 #000}

.contact{padding:68px 0;background:#d5cec0}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end}.contact h2{margin:7px 0 18px}.contact p{margin:0;font-size:22px;font-weight:700}.contact-data{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.contact-data a{font-weight:900;border-bottom:2px solid var(--ink)}.contact-data .phone{font-family:Anton,Impact,sans-serif;font-size:clamp(38px,6vw,72px);line-height:1;color:var(--red);border:0}
footer{background:var(--black);color:#ddd;padding:22px 0;border-top:4px solid var(--yellow);font-family:Anton,Impact,sans-serif;letter-spacing:1px}footer span{color:var(--yellow)}

@media (max-width:860px){
  .nav{min-height:64px}.logo{font-size:20px}nav{display:none}
  .wrap{width:min(100% - 28px,1120px)}
  .keys{height:50px;font-size:28px}
  .sign{padding-top:27px}
  .service-grid{grid-template-columns:1fr 1fr}
  .workshop-grid{grid-template-columns:1fr;gap:36px}.photo img{height:min(72vh,650px)}
  .contact-grid{grid-template-columns:1fr;gap:28px}.contact-data .phone{font-size:52px}
}
@media (max-width:520px){
  body{font-size:17px}
  h1{font-size:56px}.services-line{font-size:25px;margin-top:23px}.blue-band{font-size:25px}.red-band{font-size:34px}
  .section{padding:56px 0 62px}.service-grid{grid-template-columns:1fr}.service-grid article{min-height:auto;padding:24px 22px}.section-title>span{font-size:48px}
  .workshop{padding:58px 0}.photo{box-shadow:8px 8px 0 #090908}.photo img{height:480px}.about p{font-size:19px}.brands b{font-size:16px}
  .contact{padding:52px 0}.contact-data .phone{font-size:44px}
}