@import url("https://static.tildacdn.com/css/fonts-tildasans.css");

:root {
  --bg: #ffffff;
  --paper: #f7f7f5;
  --ink: #141414;
  --muted: #6c6c6c;
  --line: #e5e5e5;
  --accent: #ef2b2d;
  --accent-dark: #c91f21;
  --dark: #111111;
  --radius: 24px;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.09);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: TildaSans, Arial, Helvetica, sans-serif;
  line-height: 1.45;
}

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

img,
iframe {
  display: block;
  max-width: 100%;
}

button,
input {
  font: inherit;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 20;
  padding: 12px 16px;
  background: var(--dark);
  color: #fff;
}

.skip-link:focus {
  top: 16px;
}

.container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.narrow {
  width: min(840px, calc(100% - 40px));
  text-align: center;
}

.section {
  padding: 84px 0;
}

.section.compact {
  padding-top: 42px;
}

.site-header {
  position: relative;
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.topline {
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-top: 18px;
  font-size: 13px;
}

.topline p {
  margin: 0;
  color: #333;
}

.logo img {
  width: 136px;
  height: auto;
}

.header-contacts {
  display: grid;
  justify-items: end;
  font-size: 13px;
}

.socials {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: -12px;
}

.socials a {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #050505;
  color: #fff;
  font-size: 9px;
  text-transform: uppercase;
}

.main-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  min-height: 66px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.main-nav a,
.main-nav button {
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-transform: uppercase;
}

.nav-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  left: 50%;
  top: 100%;
  display: grid;
  min-width: 290px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: 0.2s ease;
}

.dropdown-menu a {
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 12px;
  text-transform: none;
}

.dropdown-menu a:hover {
  background: var(--paper);
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.hero {
  position: relative;
  min-height: 650px;
  display: grid;
  align-items: end;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0 0 var(--radius) var(--radius);
  color: #fff;
}

.hero-media {
  position: absolute;
  inset: 0 24px;
  border-radius: 0 0 var(--radius) var(--radius);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.65)),
    url("../img/source/hero-warehouse.jpg") center / cover no-repeat;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 860px;
  padding: 0 0 72px;
  text-align: center;
}

.hero h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.12;
  font-weight: 800;
}

.hero-line {
  width: 340px;
  max-width: 60%;
  height: 2px;
  margin: 28px auto;
  background: rgba(255, 255, 255, 0.82);
}

.hero p {
  margin: 0 0 26px;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-dark);
}

.btn-dark {
  background: var(--accent);
  color: #fff;
}

.btn-dark:hover {
  background: var(--accent-dark);
}

.btn-light {
  background: #fff;
  border-color: var(--line);
}

.intro-grid,
.lead-grid,
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: center;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h2 {
  margin: 0 0 20px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.14;
}

h3 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.25;
}

p {
  color: var(--muted);
}

.video-card {
  padding: 30px;
  background: var(--dark);
  border-radius: var(--radius);
  color: #fff;
  box-shadow: var(--shadow);
}

.video-card span,
.video-card strong {
  display: block;
}

.video-card strong {
  margin-bottom: 22px;
  font-size: 28px;
}

.video-placeholder {
  min-height: 240px;
  display: grid;
  place-content: center;
  padding: 24px;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  border-radius: 18px;
  text-align: center;
}

.video-placeholder p,
.video-placeholder small {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

/* Live rtsp.ru camera feed — fills the video-card at full width while
   keeping the stream's native 640x480 (4:3) aspect ratio, instead of the
   fixed 640x480px box the client's raw embed snippet used. */
.video-stream {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.045);
}

.video-stream iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Fallback for browsers without aspect-ratio support (padding-bottom hack). */
@supports not (aspect-ratio: 4 / 3) {
  .video-stream {
    height: 0;
    padding-bottom: 75%;
  }
}

.cards {
  display: grid;
  gap: 22px;
}

.cards-3 {
  grid-template-columns: repeat(3, 1fr);
}

.cards-4 {
  grid-template-columns: repeat(4, 1fr);
}

.card {
  min-height: 100%;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.04);
}

.service-card {
  transition: 0.2s ease;
}

.service-card span {
  display: inline-flex;
  margin-bottom: 40px;
  color: var(--accent);
  font-weight: 800;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.why {
  background: var(--paper);
}

.benefits h2 {
  max-width: 880px;
  margin-bottom: 34px;
}

.benefits .card h3 {
  font-size: 19px;
}

.map {
  padding-top: 40px;
}

.map h2 {
  text-align: center;
}

.map-link {
  display: table;
  margin: 0 auto 20px;
  color: var(--accent);
  font-weight: 700;
}

.map-frame {
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.map-frame iframe {
  width: 100%;
  height: 480px;
  border: 0;
}

.reviews {
  background: var(--paper);
}

.review-card p {
  min-height: 72px;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 32px 0;
}

.steps-grid article {
  padding-top: 24px;
  border-top: 2px solid var(--accent);
}

.steps-grid span {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--accent);
  font-weight: 900;
}

.calculator {
  background: #151515;
  color: #fff;
}

.calculator p,
.calculator small {
  color: rgba(255, 255, 255, 0.72);
}

.calc-form {
  margin-top: 30px;
  padding: 34px;
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius);
}

.calc-progress {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
  font-weight: 800;
}

.calc-progress div {
  overflow: hidden;
  height: 6px;
  background: var(--line);
  border-radius: 99px;
}

.calc-progress i {
  display: block;
  width: 16.66%;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 0.2s ease;
}

.calc-step {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 0;
  padding: 0;
  border: 0;
}

.calc-step.is-active {
  display: grid;
}

.calc-step legend {
  grid-column: 1 / -1;
  margin-bottom: 14px;
  font-size: 28px;
  font-weight: 800;
}

.calc-step label,
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--paper);
  border-radius: 12px;
}

.calc-step input:not([type="checkbox"]),
.lead-form input:not([type="checkbox"]) {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.custom-input,
.calc-step p,
.calc-step small {
  grid-column: 1 / -1;
}

.calc-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
}

.is-hidden {
  display: none;
}

.tariffs {
  text-align: center;
}

.tariffs a,
.lead-form a,
.cookie-note a {
  color: var(--accent);
  font-weight: 700;
}

.link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 30px;
}

.link-grid a {
  padding: 18px 20px;
  background: var(--paper);
  border-radius: 14px;
  font-weight: 700;
}

.lead {
  background: var(--paper);
}

.lead-form {
  display: grid;
  gap: 14px;
  padding: 30px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.lead-form small {
  color: var(--muted);
}

.contacts {
  text-align: center;
}

.contact-grid {
  grid-template-columns: repeat(4, 1fr);
}

.contact-grid h2 {
  grid-column: 1 / -1;
}

.contact-grid a,
.contact-grid p {
  margin: 0;
  padding: 20px;
  background: var(--paper);
  border-radius: 18px;
  font-weight: 700;
}

.footer {
  padding: 46px 0;
  background: #090909;
  color: #fff;
}

.footer p {
  color: rgba(255, 255, 255, 0.66);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 28px;
}

.footer nav {
  display: grid;
  gap: 10px;
  align-content: start;
  text-transform: uppercase;
  font-size: 13px;
}

.cookie-note {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 30;
  width: min(560px, calc(100% - 44px));
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.cookie-note p {
  margin: 0;
  font-size: 13px;
}

.cookie-note button {
  min-width: 58px;
  min-height: 36px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.cookie-note.is-hidden {
  display: none;
}

@media (max-width: 980px) {
  .topline,
  .intro-grid,
  .lead-grid,
  .footer-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .header-contacts {
    justify-items: center;
  }

  .main-nav {
    flex-wrap: wrap;
    gap: 10px 20px;
    padding-bottom: 16px;
  }

  .cards-4,
  .cards-3,
  .steps-grid,
  .link-grid,
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid h2 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .container,
  .narrow {
    width: min(100% - 28px, 1180px);
  }

  .section {
    padding: 54px 0;
  }

  .hero {
    min-height: 560px;
  }

  .hero-media {
    inset: 0 14px;
  }

  .cards-4,
  .cards-3,
  .steps-grid,
  .link-grid,
  .contact-grid,
  .calc-step {
    grid-template-columns: 1fr;
  }

  .calc-form {
    padding: 22px;
  }

  .calc-actions,
  .cookie-note {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Source-like social buttons and stronger section rhythm */
.socials {
  gap: 8px;
}

.socials a,
.footer-socials a {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  background: #050505;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  color: #fff;
  line-height: 0;
  transition: opacity 0.16s ease;
}

.socials a:hover,
.footer-socials a:hover {
  transform: none;
  box-shadow: none;
  opacity: 0.78;
}

.socials svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: #fff;
}

.socials .icon-telegram {
  width: 16px;
  height: 16px;
  transform: translateX(-1px);
}

.socials .icon-max {
  width: 17px;
  height: 17px;
}

.socials .icon-dzen {
  width: 15px;
  height: 15px;
}

.socials .icon-vk {
  width: 17px;
  height: 17px;
}

.footer-socials a {
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.footer-logo {
  width: auto;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: #fff;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.footer-logo span span {
  position: relative;
  color: var(--accent);
}

.footer-logo span span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 7px;
  height: 7px;
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 50%;
  transform: translateX(-50%);
}

.intro {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 246, 241, 0.96)),
    url("../img/pattern-grid.svg") right 8% center / 52% auto no-repeat;
}

.service-cards {
  position: relative;
  background:
    linear-gradient(180deg, #11100f 0%, #191714 100%),
    url("../img/pattern-racks.svg") right center / 42% auto no-repeat;
  color: #fff;
}

.service-cards::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("../img/pattern-racks.svg") right 8% center / 460px auto no-repeat,
    radial-gradient(circle at 12% 20%, rgba(227, 31, 39, 0.22), transparent 28rem);
  opacity: 0.9;
  pointer-events: none;
}

.service-cards .container {
  position: relative;
}

.service-cards .card {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
}

.why {
  background:
    linear-gradient(135deg, rgba(244, 240, 233, 0.94), rgba(255, 255, 255, 0.92)),
    url("../img/pattern-route.svg") left 50% top 54% / 58% auto no-repeat;
}

.benefits {
  background:
    radial-gradient(circle at 88% 18%, rgba(227, 31, 39, 0.08), transparent 24rem),
    linear-gradient(180deg, #fff 0%, #f7f4ee 100%);
}

.benefits .card {
  position: relative;
  overflow: hidden;
}

.benefits .card::before {
  content: "";
  position: absolute;
  right: 18px;
  top: 18px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(227, 31, 39, 0.18);
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 48%, rgba(227, 31, 39, 0.18) 49%, rgba(227, 31, 39, 0.18) 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(227, 31, 39, 0.18) 49%, rgba(227, 31, 39, 0.18) 51%, transparent 52%);
}

.map {
  background:
    linear-gradient(135deg, #ebe7de 0%, #fff 58%),
    url("../img/pattern-route.svg") right 4% top 8% / 52% auto no-repeat;
}

.reviews {
  background:
    linear-gradient(180deg, #121110 0%, #1d1a17 100%),
    url("../img/pattern-racks.svg") left bottom / 38% auto no-repeat;
  color: #fff;
}

.reviews h2,
.reviews .eyebrow {
  color: #fff;
}

.reviews .eyebrow {
  opacity: 0.72;
}

.reviews .card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.reviews .card p {
  color: rgba(255, 255, 255, 0.7);
}

.steps {
  background:
    linear-gradient(135deg, #fff 0%, #f5f1e9 100%),
    url("../img/pattern-grid.svg") right -8% bottom -10% / 46% auto no-repeat;
}

.calculator {
  position: relative;
  overflow: hidden;
}

.calculator::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("../img/pattern-racks.svg") right -40px center / 520px auto no-repeat,
    radial-gradient(circle at 15% 0%, rgba(227, 31, 39, 0.26), transparent 24rem);
  opacity: 0.42;
  pointer-events: none;
}

.calculator .container {
  position: relative;
}

.tariffs {
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 168, 106, 0.22), transparent 24rem),
    #fff;
}

.services-list {
  background:
    linear-gradient(180deg, #f6f2eb 0%, #fff 100%),
    url("../img/pattern-grid.svg") left -6% top 20% / 44% auto no-repeat;
}

.lead {
  background:
    linear-gradient(135deg, rgba(18, 17, 16, 0.94), rgba(41, 35, 29, 0.92)),
    url("../img/pattern-route.svg") right center / 52% auto no-repeat;
  color: #fff;
}

.lead p {
  color: rgba(255, 255, 255, 0.7);
}

.lead-form {
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
}

.lead-form p,
.lead-form small {
  color: var(--muted);
}

.contacts {
  background:
    linear-gradient(180deg, #fff 0%, #f6f2eb 100%),
    url("../img/pattern-grid.svg") right 4% top 0 / 40% auto no-repeat;
}

.contact-panel {
  background:
    url("../img/pattern-racks.svg") right -60px center / 460px auto no-repeat,
    radial-gradient(circle at 0% 0%, rgba(227, 31, 39, 0.22), transparent 20rem),
    linear-gradient(135deg, #171514, #050505);
}

.footer {
  background:
    url("../img/pattern-racks.svg") right -80px center / 520px auto no-repeat,
    radial-gradient(circle at 12% 0%, rgba(227, 31, 39, 0.16), transparent 24rem),
    linear-gradient(145deg, #141210, #050505);
}

@media (max-width: 980px) {
  .intro,
  .why,
  .steps,
  .services-list,
  .contacts {
    background-size: 760px auto, auto;
    background-position: center bottom, center;
  }

  .service-cards::before,
  .calculator::before,
  .contact-panel,
  .footer {
    background-size: 520px auto, auto, auto;
  }
}

@media (max-width: 640px) {
  .socials a,
  .footer-socials a {
    width: 28px;
    height: 28px;
  }
}

/* Premium visual pass */
:root {
  --bg: #fbfaf7;
  --paper: #f3f0ea;
  --ink: #101010;
  --muted: #68645d;
  --line: rgba(20, 20, 20, 0.1);
  --accent: #e31f27;
  --accent-dark: #b91218;
  --gold: #c9a86a;
  --dark: #11100f;
  --radius: 28px;
  --shadow: 0 28px 90px rgba(25, 20, 14, 0.12);
}

body {
  background:
    radial-gradient(circle at 8% 4%, rgba(227, 31, 39, 0.055), transparent 28rem),
    radial-gradient(circle at 92% 18%, rgba(201, 168, 106, 0.14), transparent 30rem),
    linear-gradient(180deg, #fff 0%, var(--bg) 38%, #fff 100%);
  letter-spacing: -0.01em;
}

.site-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(18px);
}

.header-shell {
  padding: 18px 0 10px;
}

.header-main {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: center;
  gap: 34px;
}

.logo {
  display: inline-flex;
  align-items: center;
}

.logo img {
  width: 126px;
  height: auto;
  object-fit: contain;
}

.header-slogan {
  position: relative;
  margin: 0;
  padding-left: 22px;
  color: #312f2b;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.header-slogan::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, transparent, rgba(227, 31, 39, 0.75), transparent);
  transform: translateY(-50%);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.header-contacts {
  gap: 2px;
  justify-items: end;
  color: #201f1d;
  font-size: 13px;
  font-weight: 700;
}

.header-contacts a:last-child {
  color: var(--muted);
  font-weight: 600;
}

.socials {
  width: auto;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 0;
}

.socials a {
  width: 30px;
  height: 30px;
  background:
    linear-gradient(145deg, #232323 0%, #050505 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 18px rgba(0, 0, 0, 0.14);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.socials a:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 24px rgba(0, 0, 0, 0.2);
}

.socials svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.socials span {
  display: block;
  transform: translateY(-0.5px);
}

.main-nav {
  min-height: auto;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(20, 20, 20, 0.08);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.main-nav a,
.main-nav button {
  padding: 10px 13px;
  border-radius: 999px;
  color: #2d2b28;
  transition: background 0.18s ease, color 0.18s ease;
}

.main-nav a:hover,
.main-nav button:hover {
  background: #111;
  color: #fff;
}

.dropdown-menu {
  left: 0;
  min-width: 330px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.14);
  transform: translate(0, 8px);
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  transform: translate(0, 0);
}

.hero {
  min-height: 650px;
  padding: 0 22px 22px;
  border-radius: 0;
}

.hero-media {
  inset: 0 22px 22px;
  border-radius: 0 0 34px 34px;
  box-shadow: var(--shadow);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.22) 38%, rgba(0, 0, 0, 0.74)),
    radial-gradient(circle at 50% 72%, rgba(227, 31, 39, 0.22), transparent 30rem),
    url("../img/source/hero-warehouse.jpg") center / cover no-repeat;
}

.hero-content {
  padding-bottom: 86px;
}

.hero h1 {
  max-width: 980px;
  margin: 0 auto;
  text-shadow: 0 16px 45px rgba(0, 0, 0, 0.42);
}

.hero-line {
  height: 1px;
  margin: 30px auto;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.86), transparent);
}

.btn {
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #ff4c4c);
}

.btn-dark {
  background: linear-gradient(135deg, var(--accent), #ff4c4c);
}

.intro,
.benefits,
.services-list {
  position: relative;
}

.intro::before,
.services-list::before {
  content: "";
  position: absolute;
  inset: 32px auto auto 0;
  width: 34%;
  height: 320px;
  background: radial-gradient(circle, rgba(201, 168, 106, 0.18), transparent 70%);
  pointer-events: none;
}

.intro-grid,
.lead-grid {
  position: relative;
}

h2 {
  letter-spacing: -0.045em;
}

h3 {
  letter-spacing: -0.025em;
}

.eyebrow {
  color: var(--accent);
  letter-spacing: 0.16em;
}

.video-card,
.calculator {
  background:
    radial-gradient(circle at 10% 0%, rgba(227, 31, 39, 0.3), transparent 20rem),
    linear-gradient(145deg, #201f1c, #060606);
}

.video-card {
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.video-placeholder {
  background: rgba(255, 255, 255, 0.045);
}

.card {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(20, 20, 20, 0.08);
  box-shadow: 0 18px 55px rgba(40, 33, 24, 0.07);
  backdrop-filter: blur(10px);
}

.service-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82)),
    radial-gradient(circle at 100% 0%, rgba(227, 31, 39, 0.12), transparent 16rem);
}

.why,
.reviews,
.lead {
  background:
    linear-gradient(135deg, rgba(243, 240, 234, 0.92), rgba(255, 255, 255, 0.86)),
    radial-gradient(circle at 80% 20%, rgba(201, 168, 106, 0.16), transparent 26rem);
}

.map {
  padding: 72px 0;
}

.map-card {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 26px;
  align-items: stretch;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(246, 242, 234, 0.9));
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 34px;
  box-shadow: var(--shadow);
}

.map-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px;
}

.map-info h2 {
  text-align: left;
}

.map-info address {
  margin: 12px 0 26px;
  padding: 18px 20px;
  background: #fff;
  border-left: 3px solid var(--accent);
  border-radius: 16px;
  color: var(--ink);
  font-style: normal;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.055);
}

.map-frame {
  min-height: 500px;
  border-radius: 26px;
  box-shadow: none;
  /* Yandex's widget is a heavy third-party app that can take a few seconds
     to boot on mobile connections; without this the frame is fully
     transparent while it loads, which reads as "the map is broken" rather
     than "the map is loading". */
  background: var(--paper);
}

.map-frame iframe {
  height: 100%;
  min-height: 500px;
  filter: saturate(0.92) contrast(1.03);
}

.calc-form,
.lead-form {
  border: 1px solid rgba(20, 20, 20, 0.08);
  box-shadow: var(--shadow);
}

.calc-step label,
.consent,
.link-grid a {
  background: rgba(243, 240, 234, 0.78);
}

.link-grid a {
  border: 1px solid rgba(20, 20, 20, 0.06);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.link-grid a:hover {
  background: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.lead-grid {
  grid-template-columns: minmax(0, 1fr) 460px;
}

.lead-form input:not([type="checkbox"]) {
  background: #fbfaf7;
}

.contacts {
  padding-top: 96px;
  text-align: left;
}

.contact-panel {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 34px;
  align-items: center;
  padding: 42px;
  background:
    linear-gradient(135deg, #171514, #050505),
    radial-gradient(circle at 0% 0%, rgba(227, 31, 39, 0.3), transparent 20rem);
  border-radius: 34px;
  box-shadow: var(--shadow);
  color: #fff;
}

.contact-panel p {
  color: rgba(255, 255, 255, 0.7);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.contact-grid h2 {
  grid-column: auto;
}

.contact-item,
.contact-grid a,
.contact-grid p {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: #fff;
}

.contact-item span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contact-item strong {
  font-size: clamp(18px, 2vw, 24px);
}

.footer {
  position: relative;
  overflow: hidden;
  padding: 64px 0 54px;
  background:
    radial-gradient(circle at 12% 0%, rgba(227, 31, 39, 0.18), transparent 24rem),
    linear-gradient(145deg, #141210, #050505);
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 28%, rgba(201, 168, 106, 0.08));
  pointer-events: none;
}

.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 0.9fr 1fr 0.95fr;
  gap: 42px;
}

.footer-logo {
  display: inline-flex;
  width: 142px;
  padding: 9px 12px;
  background: #fff;
  border-radius: 16px;
}

.footer-logo img {
  width: 100%;
}

.footer-brand p {
  max-width: 320px;
  margin: 18px 0 20px;
}

.footer nav,
.footer-contacts {
  display: grid;
  gap: 10px;
  align-content: start;
}

.footer nav strong,
.footer-contacts strong {
  margin-bottom: 8px;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer nav a,
.footer-contacts a,
.footer-contacts p {
  color: rgba(255, 255, 255, 0.68);
  text-transform: none;
}

.footer nav a:hover,
.footer-contacts a:hover {
  color: #fff;
}

.footer-socials {
  justify-content: flex-start;
}

.footer-socials a {
  background: #fff;
  color: #080808;
}

.cookie-note {
  border-color: rgba(20, 20, 20, 0.08);
  backdrop-filter: blur(14px);
}

@media (max-width: 980px) {
  .header-main,
  .map-card,
  .contact-panel,
  .lead-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .header-main {
    justify-items: center;
    text-align: center;
  }

  .header-slogan {
    padding-left: 0;
  }

  .header-slogan::before {
    display: none;
  }

  .header-actions,
  .main-nav {
    justify-content: center;
  }

  .map-info h2,
  .contacts {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .site-header {
    position: relative;
  }

  .header-actions {
    flex-direction: column;
  }

  .hero {
    padding: 0 12px 12px;
  }

  .hero-media {
    inset: 0 12px 12px;
  }

  .map-card,
  .contact-panel {
    padding: 14px;
  }

  .map-info {
    padding: 20px;
  }
}

/* Final source-aligned corrections */
.logo img {
  width: 180px;
}

.source-socials,
.footer-socials.source-socials {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}

.source-socials a,
.footer-socials.source-socials a {
  display: inline-block;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  line-height: 0;
  transform: none;
}

.source-socials a:hover,
.footer-socials.source-socials a:hover {
  opacity: 0.7;
  transform: none;
  box-shadow: none;
}

.source-socials .t-sociallinks__svg,
.footer-socials.source-socials .t-sociallinks__svg {
  display: block;
  width: 30px;
  height: 30px;
  fill: none;
}

.hero-offer {
  max-width: 720px;
  margin: 0 auto 26px;
  color: #fff;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 800;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}

.why {
  background:
    linear-gradient(135deg, rgba(247, 244, 238, 0.96), rgba(255, 255, 255, 0.96)),
    url("../img/pattern-route.svg") left 4% top 18% / 620px auto no-repeat;
}

.why-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 54px;
  align-items: center;
}

.why-copy {
  max-width: 520px;
}

.why-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.why-gallery figure {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  margin: 0;
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(30, 24, 16, 0.12);
}

.why-gallery figure:nth-child(2),
.why-gallery figure:nth-child(4) {
  transform: translateY(34px);
}

.why-gallery img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

.benefits {
  background: linear-gradient(180deg, #fff 0%, #faf7f1 100%);
}

.benefits h2 {
  max-width: 820px;
}

.benefit-card {
  min-height: auto;
  padding: 24px;
  background: rgba(255, 255, 255, 0.92);
}

.benefit-card::before {
  display: none;
}

.benefit-card span {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  margin-bottom: 18px;
  padding: 0 12px;
  border: 1px solid rgba(227, 31, 39, 0.18);
  border-radius: 999px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
}

.benefit-card h3 {
  font-size: 18px;
}

.benefit-card p {
  margin-bottom: 0;
}

.reviews {
  background:
    radial-gradient(circle at 10% 0%, rgba(227, 31, 39, 0.12), transparent 24rem),
    linear-gradient(135deg, #161412 0%, #050505 100%);
  color: #fff;
}

.reviews h2 {
  max-width: 760px;
  color: #fff;
}

.reviews-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin: 0 0 30px;
}

.reviews-head p {
  max-width: 620px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.reviews-head a,
.review-card a {
  color: #fff;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.reviews .review-card {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink);
}

.reviews .review-card p {
  min-height: 112px;
  color: #383838;
}

.review-rating {
  margin-bottom: 18px;
  color: #e31f27;
  font-size: 18px;
  letter-spacing: 0.12em;
}

.review-card strong {
  display: block;
  margin: 0 0 14px;
}

.review-card a {
  color: var(--accent);
}

.steps {
  background: linear-gradient(180deg, #fff 0%, #f5f1e9 100%);
}

.steps-grid article {
  padding: 28px 24px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-top: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(30, 24, 16, 0.07);
}

.step-icon {
  width: 104px;
  height: 104px;
  margin: 0 auto 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
}

.steps-grid span {
  display: block;
  text-align: center;
}

.steps-grid h3,
.steps-grid p {
  text-align: center;
}

.tariffs {
  text-align: left;
}

.tariffs-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 44px;
  align-items: center;
}

.tariff-notes {
  display: grid;
  gap: 14px;
}

.tariff-notes article {
  display: grid;
  gap: 6px;
  padding: 22px 24px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(30, 24, 16, 0.06);
}

.tariff-notes strong {
  font-size: 18px;
}

.tariff-notes span {
  color: var(--muted);
}

.services-list h2 {
  max-width: 760px;
}

.link-grid a {
  position: relative;
  overflow: hidden;
  min-height: 74px;
  padding: 22px 24px 22px 52px;
  background: #fff;
}

.link-grid a::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  transform: translateY(-50%);
}

.lead {
  background:
    linear-gradient(135deg, rgba(12, 11, 10, 0.94), rgba(31, 27, 23, 0.92)),
    url("../img/source/lead-call.png") left 5% center / 48% auto no-repeat;
}

.lead h2,
.lead .eyebrow {
  color: #fff;
}

.lead p {
  color: rgba(255, 255, 255, 0.84);
}

.footer-logo {
  display: inline-flex;
  width: 180px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.footer-logo img {
  width: 180px;
  height: auto;
}

.footer-socials.source-socials a,
.footer-socials .source-socials a {
  background: transparent;
  border: 0;
}

.footer-socials.source-socials svg path,
.footer-socials .source-socials svg path {
  fill: #ffffff;
}

@media (max-width: 980px) {
  .why-grid,
  .tariffs-grid {
    grid-template-columns: 1fr;
  }

  .why-copy {
    max-width: none;
    text-align: center;
  }

  .reviews-head {
    display: block;
  }
}

@media (max-width: 640px) {
  .logo img,
  .footer-logo,
  .footer-logo img {
    width: 150px;
  }

  .why-gallery {
    grid-template-columns: 1fr;
  }

  .why-gallery figure:nth-child(2),
  .why-gallery figure:nth-child(4) {
    transform: none;
  }
}

/* Corrections after visual review */
.hero-offer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0 auto 28px;
  padding: 15px 28px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(227, 31, 39, 0.86), rgba(145, 15, 20, 0.82)),
    rgba(0, 0, 0, 0.42);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: clamp(17px, 1.75vw, 23px);
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.why-gallery {
  grid-auto-rows: 240px;
  align-items: stretch;
}

.why-gallery figure {
  display: grid;
  min-height: 0;
  height: 240px;
  padding: 10px;
  background: #fff;
}

.why-gallery figure:nth-child(2),
.why-gallery figure:nth-child(4) {
  transform: none;
}

.why-gallery img {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 16px;
  object-fit: contain;
  background: #f5f2ec;
}

.footer-logo {
  overflow: visible;
}

.footer-logo img {
  display: block;
}

@media (max-width: 760px) {
  .hero-offer {
    width: auto;
    white-space: normal;
  }

  .why-gallery {
    grid-auto-rows: auto;
  }

  .why-gallery figure {
    height: auto;
  }

  .why-gallery img {
    height: auto;
  }
}

/* Final homepage polish before cloning internal pages */
.brand-wordmark {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #080808;
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
}

.brand-wordmark > span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.92em;
  height: 0.92em;
  margin: 0 -0.03em;
  border: 0.16em solid var(--accent);
  border-radius: 50%;
  color: transparent;
}

.brand-wordmark > span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.34em;
  width: 0.28em;
  height: 0.28em;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%);
}

.brand-wordmark-inverse {
  color: #fff;
}

.brand-wordmark-inverse > span {
  border-color: #fff;
}

.brand-wordmark-inverse > span::before {
  background: #fff;
}

.hero-offer {
  min-width: min(850px, calc(100% - 32px));
  padding: 17px 34px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)),
    linear-gradient(135deg, rgba(227, 31, 39, 0.94), rgba(142, 13, 18, 0.9));
  border-color: rgba(255, 255, 255, 0.34);
}

.service-card h3 {
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.08;
}

.why-gallery {
  grid-auto-rows: 310px;
  gap: 18px;
}

.why-gallery figure {
  height: 310px;
  padding: 0;
  background: #111;
}

.why-gallery img {
  border-radius: 24px;
  object-fit: cover;
  background: transparent;
}

.why-gallery figure:first-child img {
  object-position: center 56%;
}

.benefit-card span {
  min-height: 54px;
  padding: 0 18px;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.05em;
}

.map-card {
  grid-template-columns: 0.72fr 1.28fr;
  padding: 24px;
}

.map-info h2 {
  max-width: 460px;
}

.map-info p {
  font-size: 18px;
}

.reviews {
  background:
    radial-gradient(circle at 12% 8%, rgba(227, 31, 39, 0.12), transparent 22rem),
    linear-gradient(135deg, #f6f2ea 0%, #ffffff 58%, #efe7da 100%);
  color: var(--ink);
}

.reviews h2,
.reviews .eyebrow {
  color: var(--ink);
}

.reviews .eyebrow {
  color: var(--accent);
  opacity: 1;
}

.reviews-head p {
  color: var(--muted);
}

.reviews-head a {
  color: var(--accent);
}

.steps-grid span {
  display: none;
}

.step-icon {
  width: 142px;
  height: 142px;
  margin-bottom: 22px;
  background-size: 72%;
}

.tariffs .btn-dark {
  background: linear-gradient(135deg, #fff, #fff5f1);
  border-color: rgba(227, 31, 39, 0.28);
  color: var(--accent);
}

.tariffs .btn-dark:hover {
  background: var(--accent);
  color: #fff;
}

.lead {
  background:
    radial-gradient(circle at 12% 12%, rgba(227, 31, 39, 0.12), transparent 24rem),
    radial-gradient(circle at 82% 18%, rgba(201, 168, 106, 0.24), transparent 28rem),
    linear-gradient(135deg, #fff 0%, #f7f1e8 100%);
  color: var(--ink);
}

.lead h2,
.lead .eyebrow {
  color: var(--ink);
}

.lead p {
  color: var(--muted);
}

.footer-logo {
  width: auto;
}

@media (max-width: 980px) {
  .map-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .hero-offer {
    min-width: 0;
    white-space: normal;
  }

  .why-gallery {
    grid-auto-rows: 260px;
  }

  .why-gallery figure {
    height: 260px;
  }
}

/* Internal pages */
.inner-page {
  background: #fff;
}

.inner-hero {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: grid;
  align-items: end;
  margin: 0 22px;
  border-radius: 0 0 34px 34px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.68)),
    var(--inner-hero-image) center / cover no-repeat;
  color: #fff;
  box-shadow: var(--shadow);
}

.inner-hero .container {
  max-width: 980px;
  padding: 120px 0 86px;
  text-align: center;
}

.inner-hero .eyebrow,
.inner-hero p {
  color: rgba(255, 255, 255, 0.88);
}

.inner-hero h1 {
  margin: 0 auto 24px;
  max-width: 960px;
  font-size: clamp(42px, 6vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.055em;
  text-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}

.inner-hero p:not(.eyebrow) {
  max-width: 820px;
  margin: 0 auto 28px;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
}

.inner-content {
  background:
    radial-gradient(circle at 10% 10%, rgba(227, 31, 39, 0.08), transparent 24rem),
    linear-gradient(180deg, #fff, #f8f4ed);
}

.inner-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 54px;
  align-items: start;
}

.inner-copy {
  padding: 42px;
  background: #fff;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 30px;
  box-shadow: var(--shadow);
}

.inner-copy p {
  margin: 0 0 18px;
  font-size: 18px;
}

.inner-aside {
  position: sticky;
  top: 150px;
  display: grid;
  gap: 12px;
  padding: 28px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 10% 0%, rgba(227, 31, 39, 0.18), transparent 18rem),
    linear-gradient(145deg, #1b1815, #050505);
  color: #fff;
  box-shadow: var(--shadow);
}

.inner-aside a,
.inner-aside span {
  color: rgba(255, 255, 255, 0.78);
}

.inner-features {
  background: #fff;
}

.inner-card span {
  display: inline-flex;
  margin-bottom: 30px;
  color: var(--accent);
  font-weight: 900;
}

.inner-card h3 {
  font-size: clamp(22px, 2.1vw, 30px);
}

.inner-facts {
  background:
    linear-gradient(135deg, #f7f1e8, #fff),
    url("../img/pattern-grid.svg") right 4% center / 520px auto no-repeat;
}

.fact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.fact-list li {
  position: relative;
  padding: 18px 20px 18px 50px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  font-weight: 700;
}

.fact-list li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  transform: translateY(-50%);
}

@media (max-width: 980px) {
  .inner-layout {
    grid-template-columns: 1fr;
  }

  .inner-aside {
    position: static;
  }
}

@media (max-width: 640px) {
  .inner-hero {
    min-height: 500px;
    margin: 0 12px;
  }

  .inner-hero .container {
    padding: 90px 0 64px;
  }

  .inner-copy {
    padding: 24px;
  }

  .fact-list {
    grid-template-columns: 1fr;
  }
}

/* Mobile header tightening */
@media (max-width: 640px) {
  .header-shell {
    padding: 10px 0 8px;
  }

  .header-main {
    gap: 10px;
  }

  .brand-wordmark {
    font-size: 22px;
  }

  .header-slogan {
    max-width: 260px;
    font-size: 10px;
  }

  .header-actions {
    gap: 10px;
  }

  .header-contacts {
    font-size: 11px;
  }

  .source-socials,
  .footer-socials.source-socials {
    gap: 9px;
  }

  .main-nav {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: center;
    gap: 5px 12px;
    margin-top: 10px;
    padding-top: 10px;
    font-size: 10px;
    letter-spacing: 0.05em;
  }

  .main-nav a,
  .main-nav button {
    padding: 6px 0;
  }

  .dropdown-menu {
    left: 50%;
    min-width: min(320px, calc(100vw - 28px));
    transform: translate(-50%, 8px);
  }

  .nav-dropdown:hover .dropdown-menu,
  .nav-dropdown:focus-within .dropdown-menu {
    transform: translate(-50%, 0);
  }

  .cookie-note {
    right: 10px;
    bottom: 10px;
    width: calc(100% - 20px);
    padding: 12px;
  }

  .cookie-note p {
    font-size: 11px;
  }
}

/* Final corrections: original logo, static-file navigation polish and hero badge */
.logo img,
.footer-logo img,
.logo-img,
.footer-logo-img {
  display: block;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.logo-img {
  width: 136px;
  height: auto;
}

.footer-logo {
  display: inline-flex;
  width: auto;
  padding: 0;
  overflow: visible;
}

.footer-logo-img {
  width: 170px;
  height: auto;
  filter: brightness(0) invert(1);
  mix-blend-mode: screen;
}

.hero-offer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: min(100%, 980px);
  min-width: 0;
  margin: 0 auto 28px;
  padding: 18px 34px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)),
    linear-gradient(135deg, rgba(227, 31, 39, 0.96), rgba(142, 13, 18, 0.92));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
  white-space: normal;
}

.why-marketing-list {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.why-marketing-list li {
  position: relative;
  padding: 17px 18px 17px 52px;
  border: 1px solid rgba(227, 31, 39, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 36px rgba(30, 24, 16, 0.07);
  color: var(--muted);
}

.why-marketing-list li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 20px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 0 31%, transparent 33%),
    var(--accent);
  box-shadow: 0 8px 18px rgba(227, 31, 39, 0.24);
}

.why-marketing-list strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
}

@media (max-width: 760px) {
  .logo-img,
  .footer-logo-img {
    width: 150px;
  }

  .hero-offer {
    max-width: calc(100% - 24px);
    padding: 15px 20px;
    border-radius: 24px;
    font-size: clamp(16px, 5vw, 20px);
    line-height: 1.18;
  }

  .why-copy {
    text-align: left;
  }

  .why-marketing-list li {
    padding: 15px 16px 15px 48px;
  }
}

/* Main menu final alignment */
.main-nav {
  justify-content: center;
  gap: clamp(8px, 1.1vw, 16px);
  width: 100%;
  font-size: clamp(13px, 0.95vw, 16px);
  font-weight: 900;
  letter-spacing: 0.055em;
  text-align: center;
}

.main-nav > a,
.main-nav > .nav-dropdown > button {
  min-height: 42px;
  padding: 11px 16px;
}

.dropdown-menu {
  text-align: left;
}

.dropdown-menu a {
  font-size: 13px;
  letter-spacing: 0;
}

@media (max-width: 980px) {
  .main-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    font-size: 13px;
  }
}

@media (max-width: 640px) {
  .main-nav {
    grid-template-columns: repeat(2, max-content);
    gap: 6px 10px;
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  .main-nav > a,
  .main-nav > .nav-dropdown > button {
    min-height: 34px;
    padding: 7px 8px;
  }
}

/* Corrections after static-file QA */
h1,
h2,
h3,
.hero h1,
.inner-hero h1,
.service-card h3,
.benefit-card h3,
.steps-grid h3,
.inner-card h3 {
  font-weight: 650;
}

.main-nav {
  font-weight: 700;
}

.main-nav > a,
.main-nav > .nav-dropdown > button {
  font-weight: 700;
}

.footer-logo-img {
  filter: none;
  mix-blend-mode: normal;
}

/* ==========================================================================
   Internal pages v2 — faithful 1:1 content blocks
   ========================================================================== */

.inner-block {
  padding: 56px 0;
}

.inner-block.compact {
  padding: 34px 0;
}

.inner-block-head {
  max-width: 760px;
  margin: 0 auto 36px;
  text-align: center;
}

.inner-block-head.align-left {
  margin: 0 0 32px;
  text-align: left;
}

.inner-block-head h2 {
  margin: 0 0 12px;
}

.inner-block-head p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
}

/* Kicker — small standalone section label (source type 255) */
.inner-kicker {
  padding: 30px 0 6px;
  text-align: center;
}

.inner-kicker span {
  display: inline-flex;
  padding: 9px 20px;
  border: 1px solid rgba(227, 31, 39, 0.22);
  border-radius: 999px;
  background: rgba(227, 31, 39, 0.06);
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* Lede — centered rich text (source types 127, 30, 128, 795) */
.inner-lede {
  max-width: 760px;
  margin: 0 auto;
  padding: 30px 0;
  text-align: center;
}

.inner-lede h2 {
  margin: 0 0 18px;
}

.inner-lede p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.inner-lede p:last-child {
  margin-bottom: 0;
}

/* CTA button standalone (source type 191) */
.inner-cta {
  padding: 8px 0 40px;
  text-align: center;
}

/* Feature media — image + text side by side (source types 492, 195) */
.inner-feature-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.inner-feature-media.media-left {
  direction: rtl;
}

.inner-feature-media.media-left > * {
  direction: ltr;
}

.media-figure {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 28px;
  background: #111;
  box-shadow: var(--shadow);
}

.media-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-copy h2 {
  margin: 0 0 16px;
}

.media-copy p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

/* Feature list — label + description bullets (source types 664, 267, 855, 497, 502, 938) */
.inner-feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.feature-row {
  position: relative;
  padding: 20px 22px 20px 54px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 34px rgba(30, 24, 16, 0.06);
}

.feature-row::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 24px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 0 31%, transparent 33%),
    var(--accent);
  box-shadow: 0 8px 18px rgba(227, 31, 39, 0.22);
}

.feature-row strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 16px;
}

.feature-row p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* Chess grid — title + description cards, optional photo (source types 852, 905, 899, 857) */
.inner-chess-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.inner-chess-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.chess-card {
  padding: 28px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
}

.chess-card.has-photo {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  padding: 26px;
  color: #fff;
  background: #111;
}

.chess-card.has-photo img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chess-card.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.72));
}

.chess-card.has-photo h3,
.chess-card.has-photo p {
  position: relative;
  z-index: 2;
  color: #fff;
}

.chess-card.has-photo {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.chess-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-weight: 900;
}

.chess-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
}

.chess-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.chess-card.has-photo p {
  color: rgba(255, 255, 255, 0.86);
}

/* Icon benefits — icon + title + description grid (source type 499) */
.inner-icon-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.icon-benefit-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
}

.icon-benefit-card img {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
}

.icon-benefit-card h3 {
  margin: 0 0 4px;
  font-size: 17px;
}

.icon-benefit-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Icon steps — icon + title + description row (source type 1108) */
.inner-icon-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  text-align: center;
}

.icon-step img {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
}

.icon-step h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.icon-step p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Quote — centered pull-quote (source types 23, 61, 795) */
.inner-quote {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 0;
  text-align: center;
}

.inner-quote strong {
  display: block;
  margin-bottom: 10px;
  font-size: 22px;
}

.inner-quote p {
  margin: 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.55;
}

/* Logos row — marketplace names strip (source type 1003) */
.inner-logos-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 22px 0;
}

.inner-logos-row span {
  padding: 12px 26px;
  border-radius: 999px;
  background: #101010;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Video embed (source type 4) */
.inner-video {
  max-width: 900px;
  margin: 0 auto;
}

.inner-video .video-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 26px;
  background: #111;
  box-shadow: var(--shadow);
}

.inner-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Standalone image (source type 94) */
.inner-image-block {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.inner-image-block img {
  width: 100%;
  border-radius: 26px;
  box-shadow: var(--shadow);
}

.inner-image-block figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
}

/* Photo gallery (source types 603, 1236, 662) */
.inner-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.gallery-tile {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  background: #111;
  box-shadow: var(--shadow);
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Full-bleed stat section (source type 232) */
.inner-stat-fullbleed {
  position: relative;
  overflow: hidden;
  padding: 90px 0;
  margin: 0 22px;
  border-radius: 34px;
  color: #fff;
  background: var(--stat-bg-image) center / cover no-repeat;
}

.inner-stat-fullbleed::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.72));
}

.inner-stat-fullbleed .container {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.inner-stat-fullbleed h2 {
  margin: 0 0 24px;
  text-align: center;
}

.stat-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stat-list li {
  position: relative;
  padding: 4px 0 4px 28px;
  font-size: 17px;
  line-height: 1.5;
}

.stat-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

/* FAQ accordion (source type 668) */
.inner-faq {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.faq-item {
  padding: 4px 22px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 18px;
  background: #fff;
}

.faq-item summary {
  padding: 18px 30px 18px 0;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary {
  position: relative;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 16px;
  color: var(--accent);
  font-size: 22px;
  font-weight: 900;
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* Legal text (source type 106) */
.inner-legal {
  max-width: 820px;
  margin: 0 auto;
}

.inner-legal p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.inner-legal p.legal-heading {
  margin-top: 26px;
  color: var(--ink);
  font-weight: 800;
  font-size: 17px;
}

/* Contacts detail panel (source type 718) */
.inner-contacts-detail {
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 0 30px;
  text-align: center;
}

.inner-contacts-detail p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 15px;
}

/* Lead form with background photo (source type 722) */
.lead-photo {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--lead-bg-image) center / cover no-repeat;
}

.lead-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.6));
}

.lead-photo .lead-grid {
  position: relative;
  z-index: 1;
}

.lead-photo h2,
.lead-photo .eyebrow {
  color: #fff;
}

.lead-photo p {
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 860px) {
  .inner-feature-media,
  .inner-feature-list,
  .inner-icon-benefits {
    grid-template-columns: 1fr;
  }

  .inner-chess-grid,
  .inner-chess-grid.cols-3 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .inner-feature-media.media-left {
    direction: ltr;
  }
}

@media (max-width: 640px) {
  .inner-block {
    padding: 40px 0;
  }

  .inner-stat-fullbleed {
    margin: 0 12px;
    padding: 56px 0;
  }
}

/* ==========================================================================
   Correction pass — sticky header, mobile burger nav, hero centering,
   footer socials centering, footer logo colour fix.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: none;
  box-shadow: none;
  backdrop-filter: none;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.hero-content {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.footer-socials,
.footer-brand .socials {
  justify-content: center;
  width: 100%;
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}

.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 860px) {
  .header-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    padding-right: 46px;
  }

  .header-main .logo {
    order: 1;
  }

  .header-main .header-slogan {
    order: 2;
    flex: 1 1 auto;
    margin: 0 0 0 12px;
    text-align: left;
  }

  .header-main .header-actions {
    order: 3;
    flex: 1 1 100%;
    justify-content: flex-start;
    margin-top: 12px;
  }

  .nav-burger {
    display: flex;
    position: absolute;
    top: 4px;
    right: 0;
  }

  .main-nav {
    display: none;
    grid-template-columns: 1fr;
    justify-content: stretch;
    text-align: left;
    gap: 0;
    margin-top: 12px;
    padding: 8px 0 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  .main-nav.is-open {
    display: flex;
    flex-direction: column;
  }

  .main-nav > a,
  .main-nav > .nav-dropdown > button {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 13px 4px;
  }

  .nav-dropdown {
    width: 100%;
  }

  .dropdown-menu,
  .nav-dropdown:hover .dropdown-menu,
  .nav-dropdown:focus-within .dropdown-menu {
    position: static !important;
    left: auto !important;
    display: none;
    opacity: 1;
    pointer-events: auto;
    transform: none !important;
    min-width: 0;
    width: 100%;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 6px 14px;
  }

  .nav-dropdown.is-open .dropdown-menu {
    display: grid;
  }
}

/* ==========================================================================
   Mobile floating call button + larger mobile logo
   ========================================================================== */

.mobile-call-btn {
  display: none;
}

@media (max-width: 760px) {
  /* Default/fallback sits right in the bottom-right corner. Whenever the
     cookie banner is showing (first visit, before it's dismissed), main.js
     measures its live height and pushes this button up above it via the
     inline "bottom" custom property below - see the cookie-note handling
     in assets/js/main.js. That way the button always sits as low as
     possible without ever overlapping the banner, instead of guessing one
     fixed offset that's either too high (once the banner is gone) or still
     overlapping (if the banner's real height is taller than guessed). */
  .mobile-call-btn {
    position: fixed;
    right: 16px;
    bottom: var(--call-btn-bottom, 20px);
    z-index: 45;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    min-width: 58px;
    max-width: 58px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 16px 34px rgba(227, 31, 39, 0.4), 0 6px 14px rgba(0, 0, 0, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, bottom 0.25s ease;
  }

  .mobile-call-btn:hover,
  .mobile-call-btn:active {
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(227, 31, 39, 0.46), 0 8px 18px rgba(0, 0, 0, 0.26);
  }

  .mobile-call-btn svg {
    width: 26px;
    height: 26px;
    fill: #fff;
  }

  .logo-img {
    width: 200px;
  }
}

/* ==========================================================================
   Premium mobile header repack
   Phone (left) + socials (right) on one line, bigger logo/slogan/burger.
   Sits after every earlier mobile header rule above so it wins the cascade;
   a few properties are also flagged !important because this file has
   several older same-specificity mobile rules for the same selectors
   (.logo-img, .header-slogan, .header-actions) fighting for priority.
   ========================================================================== */

@media (max-width: 860px) {
  /* No padding-right reserved for the burger any more - it now lives inline
     next to the logo (see .nav-burger rules below) instead of floating
     absolutely over the rest of the header, so the contacts/socials row
     below gets the full width to work with. */
  .header-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-right: 0;
  }

  .header-main .logo {
    order: 1;
    flex: 0 1 auto;
  }

  .header-main .logo-img,
  .header-main .logo img {
    width: clamp(180px, 56vw, 230px) !important;
  }

  /* Burger sits in the same row/line as the logo (order:1, same as .logo)
     and is pushed to the opposite end of that line with margin-left:auto -
     a normal flex sibling, vertically centered by .header-main's own
     align-items:center, instead of being absolutely positioned and having
     to guess the right top offset for whatever the header's total height
     turns out to be. */
  .nav-burger {
    order: 1;
    position: static;
    margin-left: auto;
    width: 50px;
    height: 46px;
    gap: 6px;
    flex: 0 0 auto;
  }

  .nav-burger span {
    width: 27px;
    height: 3px;
  }

  .nav-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .nav-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  /* Slogan is dropped entirely on mobile (desktop is untouched) - it was
     eating a whole row's worth of header height for text that matters far
     less on a small screen than a bigger, easier-to-tap phone number and
     social icons. */
  .header-main .header-slogan {
    display: none !important;
  }

  /* Phone + social icons on one compact row to keep the mobile header
     short; e-mail is dropped on mobile (see the narrower tiers below) so
     the phone number and the now much bigger icons both get room to
     breathe on one line without wrapping or overflowing. */
  .header-main .header-actions {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    margin-top: 14px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
  }

  .header-main .header-contacts {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-items: start;
    text-align: left;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .header-main .header-contacts a:first-child {
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
  }

  .header-main .header-contacts a:last-child {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
  }

  .header-main .socials {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
  }

  .header-main .socials a {
    width: 48px;
    height: 48px;
  }

  .header-main .socials svg {
    width: 24px;
    height: 24px;
  }
}

/* 320-480px: with the slogan gone entirely on mobile, the phone number and
   the social icons are the only two things left on this row, so both get
   pushed as large as they can go. Icon size scales continuously with
   viewport width via clamp()/calc() - a single fixed size would either be
   too small on a 414-480px phone (wasting the extra room) or overflow on a
   320px one, since the real safe maximum grows roughly linearly with
   width. The calc() coefficients were fitted against the actual measured
   max icon size (before overflow) with the current phone number/font at
   320/360/375/390/414px, then given a ~2-3px safety margin - not guessed. */
@media (max-width: 480px) {
  .header-main .header-contacts a:first-child {
    font-size: 16px;
  }

  .header-main .header-contacts a:last-child {
    display: none;
  }

  .header-main .socials {
    gap: clamp(5px, 2vw, 8px);
  }

  .header-main .socials a {
    width: clamp(29px, calc(24.5vw - 48px), 55px);
    height: clamp(29px, calc(24.5vw - 48px), 55px);
  }

  .header-main .socials svg {
    width: clamp(15px, calc(12.25vw - 24px), 27px);
    height: clamp(15px, calc(12.25vw - 24px), 27px);
  }
}