/* ═══════════════════════════════════════════════════════════════════
   Original editorial illustrations
   Hand-drawn SVG artwork in assets/images/illustrations/.
   These are illustrations, never presented as company photography.
   ═══════════════════════════════════════════════════════════════════ */

.illus-figure { margin: 0; min-width: 0; }
.illus-frame {
  margin: 0;
  background: #eef3f1;
  border: 1px solid #d2e0dd;
  border-radius: 24px;
  padding: clamp(12px, 1.8vw, 22px);
}
.illus-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: #f7f9f5;
}
.illus-caption {
  margin: 14px 2px 0;
  padding-top: 12px;
  border-top: 1px solid #cfddda;
  font-size: 13px;
  line-height: 1.6;
  color: #3f585f;
}
.illus-caption a {
  color: #0a5f74;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.illus-caption a:focus-visible { outline: 3px solid #0071e3; outline-offset: 3px; }

/* Home — service area map */
.areas-map { margin: 0 0 clamp(30px, 4vw, 46px); }
.areas-map .illus-frame { background: #edf4f1; border-color: #d3e3df; }
.areas-map picture { display: block; }
.areas-map img { display: block; width: 100%; height: auto; }
.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 12px 2px 0; font-size: 13px; line-height: 1.45; color: #2b4f59; }
.map-legend-chip { display: inline-flex; align-items: center; padding: 5px 12px; border: 1px solid #bcd3ce; border-radius: 999px; background: #f7fbf9; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #1d434e; }
.map-legend-route { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #2f525d; }
.map-legend-route svg { flex: none; }

/* Moving FAQs — questions band */
.faq-illus { padding: 0 0 clamp(70px, 8vw, 110px); background: #fff; }
.faq-illus .illus-frame { max-width: 1020px; margin: 0 auto; background: #f6f4ea; border-color: #e0dccb; }

/* Trucks — quote breakdown */
.breakdown-art { grid-column: 1 / -1; width: 100%; max-width: 820px; margin: 6px auto 0; }
.breakdown-art .illus-frame { background: #f7f6ee; border-color: #cbdfe3; }

/* Services — access planning */
.planning-art { max-width: 1080px; margin: 0 0 clamp(26px, 3.5vw, 40px); }
.planning-art .illus-frame { background: #eef3f4; border-color: #d4e1e2; }

@media (max-width: 767px) {
  .illus-frame { padding: 12px; border-radius: 18px; }
  .illus-caption { font-size: 12.5px; margin-top: 12px; padding-top: 10px; }
  .breakdown-art { margin-top: 4px; }
}