/* Area pages (warehousing-services-in-<area>.html) */

/* Plum hero */
.area-hero { background: var(--plum); color: var(--white); }
.area-hero .page-hero__inner { padding-bottom: 80px; }
.area-hero .lead { color: var(--on-plum); }
.area-hero .split { --min: 460px; gap: 48px; }
.area-hero .display .text-mango { color: var(--mango); }

/* "Your route" card in the hero */
.route { background: var(--white); color: var(--ink); border-radius: var(--r-2xl); padding: 30px; display: flex; flex-direction: column; gap: 22px; box-shadow: 0 40px 70px -40px rgba(0,0,0,.5); }
.route__path { display: flex; align-items: center; }
.route__end { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 130px; flex: none; text-align: center; font-weight: 700; line-height: 1.3; }
.route__pin { width: 64px; height: 64px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--mango); display: flex; align-items: center; justify-content: center; }
.route__pin span { transform: rotate(45deg); font-family: var(--f-display); font-weight: 800; font-size: 18px; }
.route__end svg { width: 64px; height: 64px; }
.route__line { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 40px; }
.route__line::before { content: ''; width: 100%; border-top: 4px dashed var(--plum); }
.route__line span { font-family: var(--f-mono); font-size: 11px; color: var(--muted); text-align: center; }
.route__chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.route__chips span { padding: 12px 8px; border-radius: 12px; font-size: 14px; font-weight: 600; text-align: center; }
.route__chips span:nth-child(1) { background: var(--plum-tint); }
.route__chips span:nth-child(2) { background: var(--teal-tint); }
.route__chips span:nth-child(3) { background: var(--mango-tint); }
@media (max-width: 480px) {
  .route { padding: 22px 18px; }
  .route__end { width: 92px; font-size: 14px; }
  .route__chips span { font-size: 12.5px; }
}

/* Small service tabs ("Storage we offer in ...") */
.service-tabs .card { padding: 26px 18px 18px; font-weight: 700; }
.service-tabs .card::before { left: 18px; width: 34px; height: 12px; }