@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap');

/* Дизайн по референсу BMW.com (новый сайт/DESIGN.md):
   две поверхности (белый + #262626), заголовки Inter 300,
   нет акцентных цветов, теней и скруглений — цвет даёт только фото. */
:root{
  --carbon:#262626;
  --white:#ffffff;
  --concrete:#bbbbbb;
  --fog:#f1f1f1;
  --rail:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--carbon);font-family:'Inter',system-ui,sans-serif;font-size:18px;line-height:1.63}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.rail{width:min(var(--rail),calc(100% - 48px));margin:0 auto}

/* header */
.site-header{background:var(--white);padding:14px 0}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-size:16px;font-weight:700;letter-spacing:.02em}
.brand span{font-weight:400;color:var(--carbon);margin-left:12px;letter-spacing:0}
.site-header nav{display:flex;gap:24px;font-size:16px;font-weight:400}
.site-header nav a:hover{text-decoration:underline;text-underline-offset:4px}

/* full-bleed imagery */
.bleed{margin:0}
.bleed img{width:100%;height:min(78vh,760px);object-fit:cover}
.bleed figcaption{font-size:16px;color:var(--carbon);padding:12px 0 0}

/* display sections */
.display-section{max-width:var(--rail);margin:0 auto;padding:100px 24px;text-align:center}
.display{font-size:clamp(32px,5vw,60px);font-weight:300;line-height:1.3;margin:0;letter-spacing:0}
.display-sm{font-size:clamp(28px,3.5vw,44px);text-align:center;margin-bottom:56px}
.lede{font-size:18px;line-height:1.63;margin:24px auto 0;max-width:640px}
.arrow-link{display:inline-block;font-size:16px;font-weight:400;margin-top:40px}
.arrow-link:hover{text-decoration:underline;text-underline-offset:4px}

/* fog band */
.band{background:var(--fog);padding:56px 0 64px}

/* services */
.service-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.service-row h3{font-size:18px;font-weight:700;margin:0 0 12px;line-height:1.3}
.service-row p{font-size:16px;line-height:1.6;margin:0 0 16px}
.service-row b{font-size:16px;font-weight:700}

/* master facts */
.fact-row{display:flex;justify-content:center;gap:56px;margin-top:40px;flex-wrap:wrap}
.fact-row b{display:block;font-size:28px;font-weight:300;line-height:1.3}
.fact-row span{font-size:16px;color:#6f6f6f}

/* gallery */
.gallery-pair{display:grid;grid-template-columns:1fr 1fr}
.gallery-pair figure{margin:0}
.gallery-pair img{width:100%;height:min(56vh,540px);object-fit:cover}
.gallery-pair figcaption{font-size:16px;padding:12px 24px 32px}
#works .bleed figcaption{padding:12px 0 32px}

/* process */
.steps{list-style:none;margin:0;padding:0;max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:32px}
.steps li{display:grid;grid-template-columns:48px 1fr;gap:16px}
.steps li>b{font-weight:300;font-size:28px;line-height:1.2}
.steps h3{font-size:18px;font-weight:700;margin:0 0 6px}
.steps p{font-size:16px;line-height:1.6;margin:0}

/* form */
.lead-form{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:720px;margin:56px auto 0;text-align:left}
.lead-form label{font-size:16px;font-weight:400;display:flex;flex-direction:column;gap:8px}
.lead-form input,.lead-form select,.lead-form textarea{border:1px solid var(--concrete);border-radius:0;background:var(--white);padding:14px 16px;font:16px 'Inter',sans-serif;color:var(--carbon);outline:0;resize:vertical}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{border-color:var(--carbon)}
.submit{border:0;border-radius:0;background:var(--carbon);color:var(--white);font:400 16px 'Inter',sans-serif;padding:16px;cursor:pointer}
.submit:hover{text-decoration:underline;text-underline-offset:4px}
.full-width{grid-column:1/-1}
.lead-form small{font-size:13px;color:#6f6f6f}
.form-success{text-align:center}
.form-success h3{font-size:28px;font-weight:300;margin:0 0 10px}

/* footer */
.site-footer{background:var(--carbon);color:var(--white);padding:56px 0;margin-top:100px}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;font-size:16px}
.footer-cols p{margin:0 0 10px;font-weight:400;color:var(--concrete)}
.footer-cols a,.footer-cols span{display:block;margin-bottom:10px;color:var(--white)}
.footer-cols a:hover{text-decoration:underline;text-underline-offset:4px}

/* mobile */
@media(max-width:800px){
  .header-row{flex-direction:column;align-items:flex-start;gap:10px}
  .brand span{display:block;margin:4px 0 0}
  .site-header nav{flex-wrap:wrap;gap:16px}
  .bleed img{height:min(52vh,420px)}
  .display-section{padding:64px 24px}
  .service-rows{grid-template-columns:1fr}
  .fact-row{gap:28px}
  .gallery-pair{grid-template-columns:1fr}
  .gallery-pair img{height:min(44vh,380px)}
  .lead-form{grid-template-columns:1fr}
  .full-width{grid-column:auto}
  .footer-cols{grid-template-columns:1fr 1fr}
  .site-footer{margin-top:64px}
}