/* ===========================================================================
   Block: agency-hero — green divider line between the heading and the
   subtitle text (matches the reference site's main_before_line.svg: a
   4px-tall bar that fades from green to transparent, forcing the subtitle
   onto its own line below it).
   =========================================================================== */
.ahero-divider {
    width: 100%;
    max-width: 525px;
    height: 4px;
    margin-bottom: 12px;
    border-radius: 2px;
    background: linear-gradient(90deg, #A1CB3A 0%, rgba(161, 203, 58, 0) 24.04%);
}

/* ===========================================================================
   Block: agency-hero — service tabs row
   Desktop (>=1024px) keeps the original lg:grid lg:grid-cols-6 layout
   untouched. Mobile / tablet (<1024px) only: single swipeable row sized — each card ~40% of the
   viewport so ~2 cards + a peek of the next are visible at once, not one
   cropped full-width card at a time.
   =========================================================================== */
@media (max-width: 1023px) {
    .ahero-services {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 4px;
        /* the folder-tab notch (top-right corner) is translated -100% above
           each card's own box — without top room the scroll container's
           forced overflow-y clips it off. */
        padding: 14px 4px 4px;
        scrollbar-width: none;
    }
    .ahero-services::-webkit-scrollbar { display: none; }
    .ahero-service-item {
        flex: 0 0 auto !important;
        width: 140px;
        scroll-snap-align: start;
    }
	#stages {
        padding: 0 20px;
    }
	#rad-mob {
		border-radius: 20px;
	}
}