.hero-art {
  background-image: url('/static/tral-preview3-map.webp');
  background-size: contain;
  background-position: center 45px;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
}

#cargo, #clients, #request, .hero { position:relative; isolation:isolate; overflow:hidden; }
#cargo > .wrap, #clients > .wrap, #request > .wrap, .hero > .wrap { position:relative; z-index:1; }
#cargo::before, #clients::before, #request::before, .hero::before {
  content:"";
  position:absolute;
  inset:0;
  background:url('/static/tral-ikat-pattern-seamless.webp') left top/1080px auto repeat;
  background-attachment:fixed;
  opacity:.42;
  pointer-events:none;
  z-index:0;
}
.hero::before { opacity:.16; }

.logo { color:#6aa9d0; }
.logo span { color:#1673ce; }

.cards-four { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.cards-four .card summary, .cards-two .card summary { padding:26px; gap:12px; align-items:flex-start; }
.cards-four .card p, .cards-two .card p { padding:0 26px 26px; }
.cargo-card-copy, .client-card-copy { display:grid; flex:1; grid-template-columns:92px minmax(0,1fr); column-gap:18px; row-gap:14px; align-items:center; min-width:0; }
.cargo-card-copy strong, .client-card-copy strong { grid-column:2; grid-row:1; margin:0; }
.cargo-card-copy em, .client-card-copy em { grid-column:1/-1; grid-row:2; margin:0; }
.cargo-icon, .client-icon { display:block; width:92px; height:92px; grid-column:1; grid-row:1; background:center/contain no-repeat; }
.cargo-icon-excavator { background-image:url('/static/tral-cargo-excavator-new.webp'); }
.cargo-icon-transformer { background-image:url('/static/tral-cargo-transformer-new.webp'); }
.cargo-icon-steel { background-image:url('/static/tral-cargo-steel-new.webp'); }
.cargo-icon-tank { background-image:url('/static/tral-cargo-tank-new.webp'); }
.client-icon-importer { background-image:url('/static/tral-client-importer.webp'); }
.client-icon-seller { background-image:url('/static/tral-client-seller.webp'); }
.client-icon-manufacturer { background-image:url('/static/tral-client-manufacturer.webp'); }
.client-icon-owner { background-image:url('/static/tral-client-owner.webp'); }


.footer-wrap > div:first-child { display:flex; align-items:center; gap:16px; }
.footer-socials { display:flex; gap:10px; }
.footer-socials a { width:42px; height:42px; display:grid; place-items:center; border:1px solid #bcd8ed; border-radius:50%; color:var(--blue); }
.footer-socials svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.board-preview { margin-top: clamp(48px, 7vw, 96px); }
.board-preview-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.board-preview-heading h2 { margin-bottom:0; }
.board-preview-heading > p { color:#607487; margin:0 0 5px; }
.board-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.board-card { background:#fff; border:1px solid #d9e6f0; border-radius:20px; padding:28px; min-width:0; }
.board-route { color:#112c43; font-weight:800; font-size:clamp(18px,2vw,24px); line-height:1.3; overflow-wrap:anywhere; }
.board-cargo { color:#566b7d; margin-top:14px; line-height:1.5; overflow-wrap:anywhere; }
.board-cards > p { color:#566b7d; grid-column:1/-1; }
.board-link { display:inline-flex; align-items:center; gap:12px; color:#1671b9; font-weight:800; text-decoration:none; margin-top:24px; }
.board-link:hover { text-decoration:underline; }

.request-section { padding:72px 0 64px; }
.request-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:stretch; }
.request-panel { display:flex; flex-direction:column; background:#fff; border:1px solid #d5e5f2; border-radius:20px; padding:32px; min-width:0; }
.request-panel h2 { font-size:clamp(1.8rem,2.5vw,2.5rem); letter-spacing:-.045em; }
.request-panel .section-intro { margin:12px 0 24px; font-size:.96rem; }
.request-panel .form { border:0; border-radius:0; padding:0; margin-top:auto; }
.request-panel .form .button { justify-content:center; margin-top:4px; }
.request-panel .form p { min-height:1.5em; }
.request-panel .form .telegram-field { grid-column:1/-1; }
.form-honeypot { position:absolute!important; left:-10000px; width:1px; height:1px; overflow:hidden; }
.request-panel .form .button:disabled { opacity:.65; cursor:wait; }
.request-panel.board-preview { margin-top:0; }
.request-panel .board-cards { grid-template-columns:1fr; gap:14px; margin-top:auto; }
.request-panel .board-card { border-radius:12px; background:#f7fafc; padding:18px 20px; }
.request-panel .board-route { font-size:1rem; }
.request-panel .board-cargo { font-size:.87rem; margin-top:7px; }
.request-panel .board-link { margin-top:21px; padding:13px 0 0; }
footer { padding:19px 0; }

/* Контакт остаётся доступным в первой строке шапки и на телефоне. */
.header-phone {
  margin-left:auto;
  color:var(--navy);
  font-size:.92rem;
  font-weight:800;
  letter-spacing:-.02em;
  text-decoration:none;
  white-space:nowrap;
}
.header-phone:hover { color:var(--blue); }
.nav { margin-left:28px; }

@media (max-width: 800px) {
  .cards-four { grid-template-columns:1fr; }
  .cards-four .card summary, .cards-two .card summary { padding:20px; }
  .cards-four .card p, .cards-two .card p { padding:0 20px 20px; }
  .cargo-card-copy, .client-card-copy { grid-template-columns:76px minmax(0,1fr); column-gap:14px; row-gap:12px; }
  .cargo-icon, .client-icon { width:76px; height:76px; }
  .request-section { padding:48px 0; }
  .request-layout { grid-template-columns:1fr; gap:16px; }
  .request-panel { padding:23px 20px; }
  .request-panel h2 { font-size:2rem; }
  .request-panel .section-intro { margin-bottom:20px; }
  .request-panel .form { gap:12px; }
  .request-panel .board-cards { margin-top:0; }
  #cargo::before, #clients::before, #request::before, .hero::before { background-size:700px auto; opacity:.32; }
  .hero::before { opacity:.13; }
  .header { gap:4px; }
  .header-phone { font-size:clamp(.72rem,3.4vw,.88rem); margin-left:auto; }
  .menu-button { margin-left:0; flex:0 0 auto; }
  .board-preview-heading { display:block; }
  .board-preview-heading > p { margin-top:14px; }
  .board-cards { grid-template-columns:1fr; gap:14px; }
  .board-card { padding:22px; }
  .hero-art {
    background-size: contain;
    background-position: center top;
    min-height: 250px;
    height: 250px;
  }
  .footer-wrap > div:first-child { align-items:flex-start; flex-direction:column; gap:8px; }
}