/* Классик Логистика — главная. Graphite studio, white type, one amber accent taken from the truck's marker lights. */
:root {
  --ink: #17181a;
  --sheet: #1e1f22;
  --paper: #ecedee;
  --text: #1c1d20;
  --amber: #ff9a2e;
  --line-dark: rgb(255 255 255 / .16);
  --line-light: rgb(23 24 26 / .16);
  --display: Oswald, "Arial Narrow", sans-serif;
  --gutter: clamp(20px, 4.2vw, 80px);
}

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

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: #fff; font: 400 1rem/1.5 Onest, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.display { font-family: var(--display); text-transform: uppercase; }
.wrap { width: min(100% - 2 * var(--gutter), 1480px); margin-inline: auto; }
.kicker { display: flex; align-items: center; gap: .8em; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.kicker::before { content: ""; width: 2.4em; height: 2px; background: var(--amber); }

.btn { display: inline-block; padding: .95em 1.7em; border: 0; border-radius: 3px; font-size: 1.0625rem; font-weight: 600; letter-spacing: .04em; cursor: pointer; white-space: nowrap; }
.btn--amber { background: var(--amber); color: var(--ink); }
.btn--amber:hover { background: #ffad52; }
.more { display: inline-block; margin-top: 2.5rem; padding-bottom: .2em; border-bottom: 1px solid currentColor; font-weight: 600; }
.more::after { content: " →"; }

/* Line drawings: one weight on every screen, whatever the drawing's size. */
.lines { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.lines path,
.lines ellipse,
.sprite path { vector-effect: non-scaling-stroke; }
.lines .thin,
.sprite .inner { stroke-width: .8; }
.sprite { position: absolute; width: 0; height: 0; }

/* Header */
.site-head {
  position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: clamp(16px, 3vw, 56px);
  padding: 18px var(--gutter); font-size: .9375rem; transition: background-color .3s, padding .3s;
}
.site-head.is-solid { padding-block: 12px; background: rgb(23 24 26 / .92); backdrop-filter: blur(10px); }
.brand { font-size: 1.1875rem; font-weight: 600; }
.brand span { font-weight: 400; opacity: .7; }
.nav { display: flex; gap: clamp(16px, 2.2vw, 40px); margin-left: auto; color: rgb(255 255 255 / .82); }
.nav a:hover { color: #fff; }
.phone { font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- First screen ----------
   The 16:9 composition is laid out in --u, so it scales to the smaller of the two viewport sides and stays centred.
   --tw / --tt: width and top of the truck layer (1887 x 1195 px with a 120 px margin around the truck). */
.hero {
  --u: min(1vw, 1.778svh);
  --tw: calc(64 * var(--u));
  --tt: calc(50svh - 18.5 * var(--u));
  --floor: calc(var(--tt) + var(--tw) * .4346);
  position: relative;
}
.hero__stage {
  position: relative; height: 100svh; min-height: 520px; overflow: hidden;
  background: radial-gradient(ellipse calc(60 * var(--u)) calc(36 * var(--u)) at 50% calc(var(--floor) - 13 * var(--u)), #55565a 0, #37383c 46%, #1c1d20 100%);
}
/* Grain and vignette over the photo layers. */
.hero__stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 85% at 50% 50%, transparent 55%, rgb(0 0 0 / .36) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

.temp {
  position: absolute; inset: calc(50svh - 24.7 * var(--u)) 0 auto; text-align: center; font-size: calc(27 * var(--u)); font-weight: 600;
  line-height: 1; letter-spacing: -.02em; white-space: nowrap;
  background: linear-gradient(180deg, rgb(255 255 255 / .2) 12%, rgb(255 255 255 / .05) 78%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.floor {
  position: absolute; inset: calc(var(--floor) - 5 * var(--u)) 0 0;
  background:
    radial-gradient(ellipse calc(46 * var(--u)) calc(11 * var(--u)) at 50% calc(12 * var(--u)), rgb(255 255 255 / .13), transparent 70%),
    linear-gradient(180deg, rgb(88 89 93 / 0) 0, #595a5e calc(10 * var(--u)), #7d7e82 100%);
}
/* The «drawing sheet» that replaces the studio as the photo turns into lines. */
.sheet,
.band--sheet {
  background-color: var(--sheet);
  background-image: linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px);
  background-size: 64px 64px;
}
.sheet { position: absolute; inset: 0; opacity: 0; }

.truck { --scan: 0; position: absolute; left: calc(50% - var(--tw) / 2); top: var(--tt); width: var(--tw); aspect-ratio: 1887 / 1195; color: #e4e9f0; }
.truck__photo,
.truck__shadow,
.truck__body,
.truck__lines { position: absolute; inset: 0; }
.truck__shadow,
.truck__body { background: center / 100% 100% no-repeat; }
.truck__shadow { background-image: url("../assets/shadow.637f445a99c6.webp"); }
.truck__body { background-image: url("../assets/truck.234ec630a0be.webp"); }
/* The scan runs from the cab to the tail: the photo survives to the left of it, the drawing appears to the right. */
.truck__photo { clip-path: inset(0 calc(var(--scan) * 100%) 0 0); }
.truck__lines { height: 100%; clip-path: inset(0 0 0 calc((1 - var(--scan)) * 100%)); }
.scan {
  position: absolute; top: 8%; bottom: 6%; left: calc((1 - var(--scan)) * 100%); width: 2px; margin-left: -1px;
  background: var(--amber); box-shadow: 0 0 18px 2px rgb(255 154 46 / .55);
  opacity: clamp(0, calc(min(var(--scan), 1 - var(--scan)) * 25), 1);
}
.truck__photo i { position: absolute; aspect-ratio: 1; translate: -50% -50%; mix-blend-mode: screen; border-radius: 50%; }
.lamp {
  left: 83.8%; top: 51.8%; width: 13%;
  background: radial-gradient(closest-side, rgb(255 252 240 / .95) 0 4%, rgb(240 246 255 / .4) 11%, rgb(225 238 255 / .09) 40%, transparent 70%);
}
.marker { top: 60.9%; width: 3.4%; background: radial-gradient(closest-side, rgb(255 190 110 / .95) 0 12%, rgb(255 140 40 / .5) 30%, transparent 72%); }
.marker--rear { left: 12.4%; }
.marker--front { left: 47.5%; }

.hero__ui { position: absolute; inset: 0; z-index: 2; }
.temp-label {
  position: absolute; left: calc(50% - 32.4 * var(--u)); top: calc(50svh - 20.5 * var(--u));
  font-size: max(11px, calc(.86 * var(--u))); letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .7);
}
.temp-label::after { content: ""; display: block; width: 2.6em; height: 2px; margin-top: .8em; background: var(--amber); }
.facts li { position: absolute; top: calc(50svh + .4 * var(--u)); width: calc(13 * var(--u)); font-size: max(12px, calc(.9 * var(--u))); line-height: 1.4; color: rgb(255 255 255 / .74); }
.facts b { display: block; font-size: calc(2 * var(--u)); font-weight: 600; line-height: 1.15; color: #fff; }
.facts li:nth-child(1) { left: calc(4.2 * var(--u)); }
.facts li:nth-child(n + 2) { right: calc(4.2 * var(--u)); text-align: right; }
.facts li:nth-child(3) { top: calc(50svh + 5.4 * var(--u)); }
.hero__bottom { position: absolute; inset: auto calc(4.2 * var(--u)) calc(2.4 * var(--u)); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hero h1 { font-size: calc(2.9 * var(--u)); font-weight: 600; line-height: 1.05; }
.hero__bottom p { margin-top: .7em; font-size: max(14px, calc(1.02 * var(--u))); color: rgb(255 255 255 / .84); }
.hero__bottom .btn { font-size: max(15px, calc(1.15 * var(--u))); }

/* Cold-chain diagram. Animated: it sits over the pinned stage and the hero truck flies into .slot.
   Without animation it is an ordinary section below the first screen with its own copy of the drawing. */
.chain { position: relative; padding: clamp(56px, 9vw, 130px) var(--gutter); background: var(--sheet); color: #e4e9f0; }
.chain__head { max-width: 46rem; }
.chain h2,
.band h2 { margin-top: .5em; font-size: clamp(1.9rem, 3.5vw, 3.5rem); font-weight: 600; line-height: 1.06; color: #fff; }
.chain__head p:last-child { margin-top: 1.2em; max-width: 40rem; color: rgb(255 255 255 / .78); }
.chain__row { display: grid; grid-template-columns: 30fr 17fr 46fr; gap: clamp(12px, 4vw, 72px); align-items: end; margin-top: clamp(32px, 5vw, 72px); }
.node { position: relative; }
.node + .node::before { content: ""; position: absolute; right: calc(100% + 6px); bottom: 5.2em; width: clamp(0px, 4vw - 12px, 60px); border-top: 1px dashed var(--amber); }
.slot { aspect-ratio: 1887 / 1195; margin-bottom: -6.9%; }   /* drops the truck's wheels onto the diagram's ground line */
.cap { margin-top: 1em; padding-top: .8em; border-top: 1px solid var(--line-dark); font-size: clamp(.72rem, 1vw, .95rem); line-height: 1.35; color: rgb(255 255 255 / .7); }
.cap b { display: block; font-size: 1.15em; font-weight: 600; color: #fff; }
.cap span { font-variant-numeric: tabular-nums; }

.anim .hero { height: 100svh; min-height: 520px; overflow: hidden; }
.anim .chain { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; padding: calc(7.6 * var(--u)) calc(4.2 * var(--u)) calc(3.4 * var(--u)); background: none; pointer-events: none; }
.anim .chain__head { max-width: calc(50 * var(--u)); }
.anim .chain h2 { font-size: max(1.5rem, calc(3.3 * var(--u))); }
.anim .chain__head p:last-child { max-width: calc(40 * var(--u)); font-size: max(13px, calc(1.02 * var(--u))); }
.anim .chain__row { margin-top: 0; gap: calc(5 * var(--u)); }
.anim .node + .node::before { width: calc(3.6 * var(--u)); right: calc(100% + .7 * var(--u)); }
.anim .slot svg { visibility: hidden; }
.anim .chain__head,
.anim .cap { opacity: 0; }
.anim .chain__row { --arrow: 0; }
.anim .node + .node::before { opacity: var(--arrow); }
/* Warehouse and ramp are wiped in from the left, the same way the scan reveals the truck. */
.anim .node > svg { --draw: 0; clip-path: inset(0 calc((1 - var(--draw)) * 100%) 0 0); }

/* ---------- Sections ---------- */
.band { padding: clamp(64px, 9vw, 150px) 0; }
.band--paper { background: var(--paper); color: var(--text); }
.band--paper h2 { color: var(--ink); }
.band--ruled { padding-top: 0; }
.band--ruled .wrap { padding-top: clamp(56px, 7vw, 110px); border-top: 1px solid var(--line-light); }
.band--ink { background: var(--ink); }
.head { max-width: 52rem; }
.lead { margin-top: 1.2em; max-width: 38rem; font-size: 1.125rem; opacity: .8; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(24px, 4vw, 72px); margin-top: clamp(32px, 5vw, 72px); counter-reset: n; }
.steps li { padding: 1.3rem 0 1.5rem; border-top: 1px solid var(--line-light); counter-increment: n; font-size: .9375rem; color: rgb(28 29 32 / .72); }
.steps li::before { content: counter(n, decimal-leading-zero); display: block; margin-bottom: .5rem; font: 500 .8125rem var(--display); letter-spacing: .08em; color: #c26a05; }
.steps b,
.terms b,
.legend b { display: block; margin-bottom: .25rem; font-size: 1.1875rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.who { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(24px, 4vw, 72px); margin-top: clamp(40px, 5vw, 80px); padding: clamp(24px, 3vw, 44px); background: #fff; }
.who h3 { font: 600 1.375rem/1.2 var(--display); text-transform: uppercase; }
.who p { margin-top: .6rem; font-size: .9375rem; color: rgb(28 29 32 / .74); }

.terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px) clamp(24px, 4vw, 72px); margin-top: clamp(32px, 5vw, 72px); }
.terms li { padding-left: 1.4rem; border-left: 2px solid var(--amber); color: rgb(28 29 32 / .74); }

.fleet { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 96px); align-items: center; }
.legend { margin-top: 2.2rem; counter-reset: n; }
.legend li { position: relative; padding: 1rem 0 1rem 3.2rem; border-top: 1px solid var(--line-dark); counter-increment: n; color: rgb(255 255 255 / .72); }
.legend li::before { content: counter(n); position: absolute; left: 0; top: 1.05rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--amber); color: var(--ink); font-weight: 600; }
.legend b { color: #fff; }
.fleet__figure { color: #e4e9f0; }
.pins circle { fill: var(--amber); stroke: none; }
.pins text { fill: var(--ink); stroke: none; font: 600 28px Onest, sans-serif; text-anchor: middle; }
/* The drawing is wiped in from the cab when the section comes into view. */
.anim .fleet__figure { clip-path: inset(0 0 0 100%); transition: clip-path 1.6s cubic-bezier(.3, .7, .2, 1); }
.anim .fleet__figure.is-in { clip-path: inset(0); }

.store { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 96px); align-items: center; }
.store__photo img { width: 100%; }
.ticks { margin-top: 2rem; }
.ticks li { padding: .85rem 0 .85rem 1.8rem; border-top: 1px solid var(--line-light); background: linear-gradient(var(--amber), var(--amber)) 0 1.45rem / .8rem 2px no-repeat; }

.names { display: flex; flex-wrap: wrap; gap: .15em 1.2em; margin-top: 1.6rem; font-size: clamp(2rem, 5.2vw, 5rem); font-weight: 600; line-height: 1.1; }
.names li:not(:last-child)::after { content: "/"; margin-left: 1.2em; color: var(--amber); font-weight: 500; }
.geo { margin-top: clamp(32px, 4vw, 64px); padding-top: 1.4rem; border-top: 1px solid var(--line-dark); max-width: 60rem; color: rgb(255 255 255 / .74); }
.geo b { color: #fff; }

.calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 96px); align-items: start; }
.calc .lead a { color: #fff; border-bottom: 1px solid var(--amber); white-space: nowrap; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form label { display: grid; gap: .45rem; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .7); }
.form input,
.form select { width: 100%; padding: .85rem .9rem; border: 1px solid rgb(255 255 255 / .28); border-radius: 3px; background: rgb(255 255 255 / .05); color: #fff; font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none; }
.form option { color: var(--ink); }
.form input::placeholder { color: rgb(255 255 255 / .38); }
.form .btn { justify-self: start; }
.form__note { grid-column: 1 / -1; padding: 1rem 1.2rem; border-left: 2px solid var(--amber); background: rgb(255 255 255 / .06); }

.foot { padding: clamp(48px, 6vw, 90px) 0 28px; background: #111214; color: rgb(255 255 255 / .7); font-size: .9375rem; }
.foot__grid { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: clamp(24px, 4vw, 72px); }
.foot__grid p { margin-top: 1rem; max-width: 26rem; }
.foot address { font-style: normal; line-height: 1.8; }
.foot address b { display: block; color: #fff; }
.foot nav { display: grid; gap: .5rem; align-content: start; }
.foot a:hover { color: #fff; }
.foot__legal { margin-top: clamp(32px, 4vw, 56px); padding-top: 20px; border-top: 1px solid var(--line-dark); font-size: .8125rem; }
.foot__legal a { text-decoration: underline; }

/* Scroll reveals: only when the script has taken over. */
.anim .reveal { opacity: 0; visibility: hidden; transform: translateY(22px); }

/* ---------- Phones and narrow windows ---------- */
@media (max-width: 860px) {
  .nav { display: none; }
  .phone { margin-left: auto; }
  .fleet,
  .store,
  .calc,
  .foot__grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .names li::after { display: none; }
  .steps,
  .terms { grid-template-columns: 1fr; }
}
@media (min-width: 600px) and (max-width: 860px) {
  .steps,
  .terms { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) and (orientation: portrait) {
  .hero { --u: 1vw; --tw: 118vw; --tt: 22svh; }
  .temp { top: 12.5svh; font-size: 44vw; }
  .temp-label { left: var(--gutter); top: 10.5svh; }
  .facts { position: absolute; inset: calc(var(--tt) + 76vw) var(--gutter) auto; display: flex; justify-content: space-between; gap: 12px; }
  .facts li { position: static; width: auto; font-size: 11px; text-align: left !important; }
  .facts b { font-size: 5.2vw; }
  .hero__bottom { inset: auto var(--gutter) max(20px, 3svh); flex-direction: column; align-items: stretch; gap: 16px; }
  .hero h1 { font-size: 8.4vw; }
  .hero__bottom .btn { text-align: center; }
  .anim .chain { padding: 13svh var(--gutter) 9svh; }
  .anim .chain__row { gap: 3vw; }
  .anim .chain__head p:last-child { font-size: 14px; }
  .cap { font-size: 10px; }
}
@media (max-width: 860px) and (orientation: portrait) and (max-height: 720px) {
  .facts,
  .hero__bottom p { display: none; }
}