/* Explain: Layout structure, padding, and decorative map-inspired dividers. */
.section-pad {
    padding-bottom: clamp(4.5rem, 8vw, 7rem);
    padding-top: clamp(4.5rem, 8vw, 7rem);
}

.hero-panel::after {
    background: var(--sand-color);
    bottom: -1px;
    clip-path: polygon(0 42%, 16% 58%, 35% 32%, 52% 55%, 70% 35%, 100% 60%, 100% 100%, 0 100%);
    content: "";
    height: 70px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1;
}

.map-lines {
    background-image:
        linear-gradient(35deg, transparent 0 44%, rgba(96, 165, 250, 0.15) 45% 47%, transparent 48% 100%),
        linear-gradient(145deg, transparent 0 48%, rgba(245, 158, 11, 0.1) 49% 51%, transparent 52% 100%);
    background-size: 180px 180px, 220px 220px;
}

.route-ribbon {
    background: linear-gradient(90deg, var(--sky-color), var(--accent-color), var(--pine-color));
    clip-path: polygon(0 22%, 12% 54%, 26% 36%, 40% 70%, 58% 28%, 74% 62%, 100% 34%, 100% 48%, 74% 76%, 58% 42%, 40% 84%, 26% 50%, 12% 68%, 0 36%);
    height: 110px;
    left: 0;
    opacity: 0.28;
    position: absolute;
    top: -20px;
    width: 100%;
}

@media (max-width: 767px) {
    .site-header .btn {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }
}