/* Everything the inner pages add to site.css + v2.css: the phone menu, the page heading, and the blocks of the
   Услуги / Автопарк / Склады / О компании / Контакты / Вакансии pages. Loaded on every page, the main one included. */

/* ---------- Header: current page, call button, menu on phones ---------- */
.nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px var(--amber); }
.nav__contact { display: none; }
.phone { display: inline-flex; align-items: center; gap: .5em; }
.phone svg { display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.burger { display: none; }

@media (max-width: 860px) {
  .site-head { gap: 10px; }
  .phone { margin-left: auto; }
  .burger {
    display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0;
    background: none; color: #fff; cursor: pointer;
  }
  .burger i,
  .burger i::before,
  .burger i::after { display: block; width: 22px; height: 2px; background: currentColor; transition: transform .25s, background-color .25s; }
  .burger i { position: relative; }
  .burger i::before,
  .burger i::after { content: ""; position: absolute; left: 0; }
  .burger i::before { top: -7px; }
  .burger i::after { top: 7px; }
  .menu-open .burger i { background: transparent; }
  .menu-open .burger i::before { transform: translateY(7px) rotate(45deg); }
  .menu-open .burger i::after { transform: translateY(-7px) rotate(-45deg); }

  .nav {
    position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; gap: 0; margin: 0;
    padding: 84px var(--gutter) 32px; background: var(--ink); overflow-y: auto;
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
  }
  .menu-open .nav { opacity: 1; visibility: visible; }
  .menu-open { overflow: hidden; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line-dark); font: 600 1.75rem/1.1 var(--display); text-transform: uppercase; color: #fff; }
  .nav a[aria-current="page"] { box-shadow: none; color: var(--amber); }
  .nav .nav__contact { display: block; margin-top: auto; padding: 6px 0 0; border: 0; font: 500 1.125rem/1.6 Onest, sans-serif; text-transform: none; color: rgb(255 255 255 / .8); }
  .nav .nav__contact:first-of-type { padding-top: 28px; }
  .nav .nav__contact + .nav__contact { margin-top: 0; }
}
@media (max-width: 480px) {
  .phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .phone svg { display: block; }
  .phone { justify-content: center; width: 44px; height: 44px; }
}

/* ---------- Page heading: a photo under a dark veil, or plain ---------- */
.page-hero {
  position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(76svh, 720px);
  padding: 140px 0 clamp(44px, 6vw, 88px); background: var(--ink); overflow: hidden;
}
.store__photo video { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 890; object-fit: cover; }
.page-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgb(12 16 22 / .94) 0, rgb(12 16 22 / .6) 48%, rgb(12 16 22 / .25) 78%, rgb(12 16 22 / .55) 100%);
}
.page-hero--plain { min-height: 0; padding-top: clamp(128px, 14vw, 190px); }
.page-hero--plain::before { display: none; }
.page-hero h1 { margin-top: .45em; max-width: 15em; font-size: clamp(2.2rem, 5vw, 4.4rem); font-weight: 600; line-height: 1.03; }
.page-hero .lead { max-width: 40rem; color: rgb(255 255 255 / .86); opacity: 1; }
.page-hero .btn { margin-top: 2rem; }

/* ---------- Blocks ---------- */
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 48px; }

/* Что возим: a calm grid of product groups. */
.goods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(24px, 4vw, 72px); margin-top: clamp(28px, 4vw, 56px); }
.goods li { padding: 1.1rem 0 1.3rem; border-top: 1px solid var(--line-light); font-size: .9375rem; color: rgb(23 28 36 / .72); }
.goods b { display: block; margin-bottom: .2rem; font: 600 1.375rem/1.15 var(--display); text-transform: uppercase; color: var(--ink); }
.note { margin-top: 1.6rem; padding-left: 1rem; border-left: 2px solid var(--amber); max-width: 44rem; }

/* Directions of work: three cards. */
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(28px, 4vw, 56px); }
.offer { display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 36px); border: 1px solid var(--line-dark); background: rgb(255 255 255 / .03); }
.offer h3 { font: 600 1.5rem/1.1 var(--display); text-transform: uppercase; }
.offer p { margin-top: .8rem; color: rgb(255 255 255 / .74); }
.offer .kicker { margin-bottom: 1.1rem; }

/* Автопарк: three classes of truck drawn in the same line as the rest of the site. */
.lineup { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); margin-top: clamp(32px, 4vw, 64px); }
.lineup li { display: flex; flex-direction: column; }
.lineup svg { width: 100%; height: auto; margin-bottom: 1.4rem; overflow: visible; fill: none; stroke: #e4e9f0; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lineup svg .ground { stroke: rgb(255 255 255 / .22); }
.lineup svg .unit { stroke: var(--amber); }
.lineup h3 { padding-top: 1rem; border-top: 1px solid var(--line-dark); font: 600 1.5rem/1.1 var(--display); text-transform: uppercase; }
.lineup p { margin-top: .5rem; color: rgb(255 255 255 / .74); }
.lineup small { display: block; margin-top: .9rem; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }

/* Two columns of points with an amber rule (the same look as «С нами удобно»). */
.points { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 44px) clamp(24px, 5vw, 96px); margin-top: clamp(28px, 4vw, 56px); }
.points li { padding-left: 1.2rem; border-left: 2px solid var(--amber); color: rgb(23 28 36 / .74); }
.points b { display: block; margin-bottom: .25rem; font-size: 1.1875rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.band--sheet .points li,
.band--ink .points li { color: rgb(255 255 255 / .74); }
.band--sheet .points b,
.band--ink .points b { color: #fff; }

/* Text beside a photo. */
.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
.split--flip .split__media { order: -1; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split .ticks { margin-top: 1.6rem; }

/* Photos: one large and two small. */
.gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: clamp(8px, 1vw, 16px); margin-top: clamp(28px, 4vw, 56px); }
.gallery figure { position: relative; overflow: hidden; }
.gallery figure:first-child { grid-row: span 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption { position: absolute; left: 0; bottom: 0; padding: 8px 12px; background: rgb(12 16 22 / .72); font-size: .8125rem; color: #fff; }

/* Склады: the path of the goods from the chamber to the truck. */
.coldchain { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 40px); margin-top: clamp(32px, 4vw, 64px); counter-reset: n; }
.coldchain li { position: relative; counter-increment: n; }
.coldchain img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.coldchain h3 { display: flex; align-items: baseline; gap: .6em; margin-top: 1.1rem; font: 600 1.375rem/1.15 var(--display); text-transform: uppercase; }
.coldchain h3::before { content: counter(n, decimal-leading-zero); font-size: .8125rem; letter-spacing: .08em; color: var(--amber); }
.coldchain p { margin-top: .45rem; color: rgb(255 255 255 / .74); }
.coldchain li + li::before {
  content: ""; position: absolute; top: calc((100% - 6rem) / 2); right: calc(100% + 2px); width: clamp(12px, 2.4vw, 38px);
  border-top: 1px dashed var(--amber);
}
.why { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 96px); margin-top: clamp(40px, 5vw, 80px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line-dark); }
.why h3 { font: 600 1.625rem/1.1 var(--display); text-transform: uppercase; }
.why p { color: rgb(255 255 255 / .78); }
.why p + p { margin-top: .8em; }

/* О компании: figures and the director's word. */
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 48px); }
.numbers li { padding-top: 1rem; border-top: 1px solid var(--line-dark); color: rgb(255 255 255 / .72); }
.numbers b { display: block; margin-bottom: .3rem; font: 600 clamp(2rem, 3.6vw, 3.2rem)/1 var(--display); color: #fff; }
.director { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
.director img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.director blockquote { margin: 1.2rem 0 0; font-size: clamp(1.125rem, 1.6vw, 1.45rem); line-height: 1.5; color: var(--ink); }
.director blockquote p + p { margin-top: .8em; }
.director cite { display: block; margin-top: 1.6rem; font-style: normal; color: rgb(23 28 36 / .7); }
.director cite b { display: block; color: var(--ink); }

/* Контакты */
.contacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 48px); }
.contacts div { padding-top: 1rem; border-top: 1px solid var(--line-dark); }
.contacts h2 { font: 500 .8125rem/1.4 Onest, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .6); }
.contacts p { margin-top: .6rem; font-size: 1.125rem; line-height: 1.5; }
.contacts a { border-bottom: 1px solid rgb(255 255 255 / .3); }
.contacts a:hover { border-color: var(--amber); }
.map { margin-top: clamp(32px, 4vw, 56px); aspect-ratio: 21 / 8; background: var(--sheet); }
.map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.4); }

/* Вакансии */
.jobs { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(28px, 4vw, 56px); }
.job { padding: clamp(22px, 2.4vw, 36px); background: #fff; }
.job h3 { font: 600 1.5rem/1.1 var(--display); text-transform: uppercase; color: var(--ink); }
.job p { margin-top: .7rem; color: rgb(23 28 36 / .74); }
.job .ticks { margin-top: 1rem; }

/* Policy text. */
.prose { max-width: 46rem; color: rgb(23 28 36 / .82); }
.prose h2 { margin: 2.2em 0 .6em; font: 600 1.375rem/1.2 var(--display); text-transform: uppercase; color: var(--ink); }
.prose p,
.prose li { margin-top: .7em; }
.prose ul { padding-left: 1.2em; list-style: disc; }
.prose a { border-bottom: 1px solid currentColor; }

/* A closing call to action at the end of each inner page. */
.cta { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; }
.cta h2 { max-width: 16em; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.cta__actions .tel { font-size: 1.25rem; font-weight: 600; border-bottom: 1px solid var(--amber); }

/* Form: agreement line and an invalid field. */
.form__agree { grid-column: 1 / -1; font-size: .8125rem; color: rgb(255 255 255 / .55); }
.form__agree a { border-bottom: 1px solid currentColor; }
.form [aria-invalid="true"] { border-color: var(--amber); }

/* ---------- Narrow windows ---------- */
@media (max-width: 1080px) {
  .contacts { grid-template-columns: repeat(2, 1fr); }
  .numbers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .page-hero { min-height: 72svh; padding: 112px 0 40px; }
  .page-hero--plain { min-height: 0; padding-top: 112px; }
  .page-hero h1 { font-size: clamp(2rem, 9.4vw, 3rem); }
  .goods { grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .goods b { font-size: 1.125rem; }
  .goods li { font-size: .875rem; }
  .offers,
  .lineup,
  .points,
  .split,
  .coldchain,
  .why,
  .director,
  .jobs { grid-template-columns: 1fr; }
  .lineup { gap: 36px; }
  .lineup svg { max-width: 420px; }
  .split--flip .split__media { order: 0; }
  .coldchain li + li::before { display: none; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .gallery figure:first-child { grid-column: span 2; grid-row: auto; }
  .gallery figure { aspect-ratio: 4 / 3; }
  .gallery figure:first-child { aspect-ratio: 16 / 10; }
  .director img { max-width: 360px; }
  .map { aspect-ratio: 4 / 3; }
  .cta__actions { width: 100%; }
  .cta__actions .btn { flex: 1 1 100%; text-align: center; }
}
@media (max-width: 560px) {
  .contacts { grid-template-columns: 1fr; }
}

/* An open menu: the header must not keep backdrop-filter, or the fixed menu panel would be sized to the header. */
.menu-open .site-head { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form { position: relative; }
.lineup svg * { vector-effect: non-scaling-stroke; }
.page-hero .contacts { margin-top: clamp(32px, 4vw, 56px); }