/* Variant 2 — «night scene». Loaded after site.css by index-2.html: the same page in a deep blue-graphite palette,
   with the owner's picture as the first screen: the JPEG (with the logo baked onto the body) is shown as is, smoke and mist are drawn over it by js/scene.js. */
:root {
  --ink: #0c1016;
  --sheet: #121821;
  --paper: #e8ebee;
  --text: #171c24;
  --amber: #e98a35;
}
.btn--amber:hover { background: #f29d50; }
.site-head.is-solid { background: rgb(12 16 22 / .92); }
.foot { background: #080b10; }

/* The picture covers the screen; --fx is the horizontal point of the picture that stays in view. */
.hero {
  --sw: max(100vw, 177.78svh);
  --sh: calc(var(--sw) * .5625);
  --fx: .42;
}
.hero__stage { background: var(--ink); }
.scene { position: absolute; left: calc((100vw - var(--sw)) * var(--fx)); top: calc((100% - var(--sh)) / 2); width: var(--sw); height: var(--sh); }
.scene img,
.scene__air,
.scene__truck { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
/* The same JPEG again, cut by the truck's silhouette: pixel for pixel over the picture below. */
.scene__truck { background: url("../assets/scene.5313cc1336d9.jpg") 0 0 / 100% 100%; }
.scene__truck { -webkit-mask: url("../assets/scene-mask.b2afd2ff5a84.png") 0 0 / 100% 100% no-repeat; mask: url("../assets/scene-mask.b2afd2ff5a84.png") 0 0 / 100% 100% no-repeat; }
.glow { position: absolute; translate: -50% -50%; border-radius: 50%; mix-blend-mode: screen; pointer-events: none; }
.glow--lamp { left: 45.7%; top: 58.2%; width: 8%; aspect-ratio: 1; background: radial-gradient(closest-side, rgb(226 238 255 / .5) 0, rgb(190 214 255 / .14) 34%, transparent 72%); }
.glow--flare { left: 32.2%; top: 59.5%; width: 13%; aspect-ratio: 1; background: radial-gradient(closest-side, rgb(190 216 255 / .55) 0, rgb(120 165 255 / .13) 36%, transparent 72%); }
.glow--streak { left: 32.2%; top: 59.5%; width: 30%; aspect-ratio: 16; background: radial-gradient(closest-side, rgb(150 190 255 / .42), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .glow { animation: breathe 5.5s ease-in-out infinite alternate; }
  .glow--flare { animation-duration: 7s; }
  .glow--streak { animation-duration: 3.8s; }
}
@keyframes breathe { from { opacity: .35; } to { opacity: 1; } }
.temp {
  inset: 9.5% auto auto 3.2%; font-size: calc(var(--sw) * .235); text-align: left;
  background-image: linear-gradient(180deg, rgb(205 222 245 / .2) 10%, rgb(205 222 245 / .04) 82%);
}
/* Nothing over the picture except a little darkness under the bottom line of text. */
.hero__stage::after { background: linear-gradient(0deg, rgb(8 11 16 / .62) 0, rgb(8 11 16 / 0) 24%); }

/* Tied to the picture, not to the window, so that it always sits just above the big figure. */
.temp-label { left: calc(4.2 * var(--u)); top: max(88px, calc((100svh - var(--sh)) / 2 + var(--sh) * .121)); }
.facts { position: absolute; left: calc(4.2 * var(--u)); top: calc(50svh + 3.4 * var(--u)); width: calc(23 * var(--u)); }
.facts li,
.facts li:nth-child(n) {
  position: static; display: flex; align-items: baseline; gap: calc(1.2 * var(--u)); width: auto; padding: calc(.75 * var(--u)) 0;
  border-top: 1px solid var(--line-dark); text-align: left;
}
.facts b { flex: none; width: calc(10.5 * var(--u)); font-size: calc(1.55 * var(--u)); }

/* Автопарк: the company's GAZelle with the logo (the studio layer and floor shadow of variant 1, tools/hero/build.py). */
.fleet__figure {
  aspect-ratio: 1887 / 1195;
  background: url("../assets/truck.234ec630a0be.webp") center / 100% 100% no-repeat, url("../assets/shadow.637f445a99c6.webp") center / 100% 100% no-repeat;
}

/* ---------- Phones (portrait) ----------
   The first screen becomes one column in the normal flow: label, the picture with the big figure, three facts,
   the headline and a full-width button — no empty middle, whatever the phone's height. */
@media (max-width: 860px) and (orientation: portrait) {
  .hero { --sw: 152vw; }
  .hero__stage { display: flex; flex-direction: column; height: auto; min-height: 0; padding: 76px 0 28px; }
  .hero__ui { display: contents; }
  .temp-label { position: static; order: 1; margin: 0 var(--gutter); }
  .scene { position: relative; order: 2; left: auto; top: auto; flex: none; margin: -2vw 0 0 -43.2vw; }
  .scene img,
  .scene__air { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%); }
  .temp { left: 30%; top: 9%; }
  .facts { position: static; order: 3; display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 14px; width: auto; margin: 0 var(--gutter); }
  .facts li,
  .facts li:nth-child(n) { display: block; padding: 10px 0 0; border-top: 1px solid var(--line-dark); font-size: 12px; line-height: 1.3; }
  .facts b { width: auto; margin-bottom: 3px; font-size: clamp(16px, 4.7vw, 24px); white-space: nowrap; }
  .hero__bottom { position: static; order: 4; margin: 36px var(--gutter) 0; }
  .hero h1 { font-size: clamp(30px, 9vw, 44px); }
  .hero__bottom p { margin-top: .6em; font-size: 15px; }
  .hero__bottom .btn { width: 100%; padding-block: 1.05em; }
  .hero__stage::after { background: none; }
}
/* site.css hides these on short phones; in the flowing layout they fit. */
@media (max-width: 860px) and (orientation: portrait) and (max-height: 720px) {
  .facts { display: grid; }
  .hero__bottom p { display: block; }
}

/* ---------- Phones: the sections, tighter and in reading order ---------- */
@media (max-width: 860px) {
  .band { padding: 56px 0; }
  .band--ruled { padding-top: 0; }
  .band--ruled .wrap { padding-top: 48px; }
  .band h2 { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  .lead { margin-top: .9em; font-size: 1rem; }

  /* Услуги: the number sits beside the title instead of above it. */
  .steps { margin-top: 28px; }
  .steps li { position: relative; padding: .85rem 0 .9rem 2.6rem; font-size: .875rem; }
  .steps li::before { position: absolute; left: 0; top: 1.05rem; margin: 0; }
  .steps b,
  .terms b,
  .legend b { margin-bottom: .15rem; font-size: 1.0625rem; }
  .who { gap: 20px; margin-top: 32px; padding: 22px 20px; }
  .who h3 { font-size: 1.125rem; }
  .who p { margin-top: .35rem; font-size: .875rem; }
  .more { margin-top: 1.75rem; }

  .terms { gap: 20px; margin-top: 28px; }
  .terms li { padding-left: 1rem; font-size: .9375rem; }

  /* Автопарк: the truck right under the heading, then the four points. */
  .fleet { gap: 0; }
  .fleet__text { display: contents; }
  .fleet .head { order: 1; }
  .fleet__figure { order: 2; margin: 12px -4% -4%; }
  .fleet .legend { order: 3; margin-top: 0; }
  .fleet .more { order: 4; justify-self: start; }
  .legend li { padding: .8rem 0 .8rem 2.8rem; font-size: .9375rem; }
  .legend li::before { top: .85rem; width: 1.75rem; height: 1.75rem; font-size: .875rem; }

  .store { gap: 28px; }
  .ticks { margin-top: 1.4rem; }
  .ticks li { padding-block: .7rem; font-size: .9375rem; background-position: 0 1.3rem; }

  .names { margin-top: 1.2rem; font-size: clamp(1.75rem, 8.6vw, 2.6rem); }
  .geo { margin-top: 28px; font-size: .9375rem; }

  .calc { gap: 28px; }
  .form { gap: 1rem; }
  .form .btn { justify-self: stretch; text-align: center; }

  .foot__grid { gap: 28px; }
  .foot nav { grid-template-columns: 1fr 1fr; gap: .6rem 1.5rem; }
}
/* Small phones: the header keeps the name and the number on one line each. */
@media (max-width: 400px) {
  .site-head { gap: 12px; }
  .brand,
  .phone { white-space: nowrap; }
  .brand { font-size: 1rem; }
  .phone { font-size: .8125rem; }
}