:root {
  --ink: #14181f;
  --mut: #626c7a;
  --line: #e4e4e0;
  --acc: #1e3a5f;
  --bg: #ffffff;
  --soft: #f7f7f4;

  /* Текст на акцентной заливке: --ink и --mut на синем нечитаемы */
  --on-acc: #ffffff;
  --on-acc-mut: #c6d4e4;

  --wrap: 1180px;
  --gap: clamp(1.25rem, 4vw, 2.5rem);

  /* Системный стек: ноль сетевых запросов, полная кириллица на всех платформах.
     Именно им отрисованы согласованные макеты. */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  border-top: 4px solid var(--acc);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--acc);
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding-left: 1.1em;
}

/* Секции с заливкой (.hero, .services) тянутся во всю ширину и несут фон,
   а ширину контента внутри них держит .wrap. Шапка, контакты и футер
   ограничены напрямую: их разделительные линии должны быть шириной с
   контент, а не с экран. */
.site-header,
.contacts,
.site-footer,
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gap);
}

/* Надзаголовок секции — используется в услугах и контактах */

.section-label {
  padding-bottom: 0.75rem;
  color: var(--mut);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Шапка */

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line);
}

.site-header__logo {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.site-header__logo span {
  color: var(--acc);
}

.site-header__contacts {
  display: flex;
  gap: 1.25rem;
  color: var(--mut);
  font-size: 0.9rem;
}

.site-header__contacts a,
.hero__mail a {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.25em;
}

/* Футер */

.site-footer {
  padding-block: 1.75rem;
  border-top: 1px solid var(--line);
  color: var(--mut);
  font-size: 0.8rem;
}

/* Hero */

.hero {
  background: var(--acc);
  color: var(--on-acc);
  padding-block: clamp(3.5rem, 8vw, 5.5rem) clamp(3rem, 6vw, 4.5rem);
}

.hero .wrap {
  display: grid;
  gap: 2.5rem;
}

/* Глобальный a:hover красит в --acc — на акцентной заливке это невидимка */
.hero a:hover {
  color: var(--on-acc);
}

.hero__eyebrow {
  color: var(--on-acc-mut);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__title {
  margin-top: 0.9rem;
  font-size: clamp(2.1rem, 6.5vw, 3.9rem);
  text-wrap: balance;
}

.hero__aside {
  padding-left: 1.15rem;
  border-left: 2px solid var(--on-acc);
}

.hero__lead {
  margin-bottom: 1.1rem;
  color: var(--on-acc-mut);
  font-size: 0.95rem;
}

.hero__phone a {
  display: inline-block;
  padding: 0.7em 1.35em;
  border-radius: 2px;
  background: var(--on-acc);
  color: var(--acc);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hero__phone a:hover {
  background: var(--soft);
  color: var(--acc);
}

.hero__mail {
  margin-top: 0.6rem;
  color: var(--on-acc-mut);
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .hero .wrap {
    grid-template-columns: 1.35fr 1fr;
    align-items: end;
    gap: 3rem;
  }
}

/* Услуги */

.services {
  background: var(--soft);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.services__grid {
  display: grid;
  border-top: 1px solid var(--ink);
}

.service {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.service:last-child {
  border-bottom: none;
}

.service__title {
  font-size: 1.05rem;
}

.service__body {
  margin-top: 0.5rem;
  color: var(--mut);
  font-size: 0.9rem;
}

.service__body li + li {
  margin-top: 0.3rem;
}

@media (min-width: 768px) {
  .services__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .service {
    padding: 1.5rem;
    border-right: 1px solid var(--line);
  }

  /* Крайние колонки прижимаются к краям контейнера, а не к внутреннему отступу */
  .service:nth-child(3n + 1) {
    padding-left: 0;
  }

  .service:nth-child(3n) {
    padding-right: 0;
    border-right: none;
  }

  .service:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    padding-inline: 0;
    border-right: none;
  }

  .service:last-child {
    border-right: none;
  }

  .service:last-child:nth-child(3n + 1) .service__body {
    max-width: 62ch;
  }
}

/* Контакты и карта */

/* Верхний отступ намеренно крупнее внутреннего отступа серой панели услуг
   (clamp(2.5rem, 6vw, 4rem)). Когда они равны, заголовок «Как нас найти»
   отстоит от края панели ровно на столько же, на сколько её содержимое
   отстоит от края изнутри, и читается как продолжение услуг, а не как
   начало новой секции. */
.contacts {
  padding-block: clamp(4rem, 9vw, 6.5rem) clamp(3rem, 7vw, 4.5rem);
}

/* Отличается от .section-label только линией снизу: у сетки услуг
   она своя, на .services__grid. */
.contacts__title {
  border-bottom: 1px solid var(--ink);
}

.contacts__address {
  margin-block: 1.25rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.map {
  display: block;
  width: 100%;
  height: clamp(260px, 42vw, 420px);
  border: 1px solid var(--line);
}

/* Печать */

@media print {
  body {
    border-top: none;
  }

  .hero,
  .services {
    background: none;
  }

  .hero {
    color: var(--ink);
  }

  .hero__eyebrow,
  .hero__lead,
  .hero__mail {
    color: var(--mut);
  }

  .hero__aside {
    border-left-color: var(--acc);
  }

  .hero__phone a {
    padding: 0;
    background: none;
    color: var(--ink);
  }

  .map {
    display: none;
  }

  .contacts__address::after {
    content: " (карта — на сайте)";
  }
}