/* ==========================================================================
   Custom overrides for Risk Map Action Group
   All fixes here override base styles without touching style.css / style.min.css
   ========================================================================== */

/* ==========================================================================
   Mobile Menu styling & gap fix (matches designer reference)
   ========================================================================== */
@media (max-width: 1359.98px) {
    /* Keep header fixed at top with opaque background and divider when menu is open */
    html.menu-open .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 150;
        background-color: var(--color-bg-primary);
        border-bottom: 0.0625rem solid rgba(17, 17, 17, 0.08);
    }

    /* Ensure header row vertically centers logo and close icon */
    html.menu-open .header__row {
        height: 100%;
        align-items: center;
    }

    /* Hide sticky header while menu is open to prevent duplicate header layers */
    html.menu-open .header-sticky {
        display: none !important;
    }

    /* Remove redundant border-top from menu container since header has border-bottom */
    .header__col--menu {
        border-top: none;
        background-color: var(--color-bg-primary);
        z-index: 140;
    }

    /* Menu links typography and spacing */
    .header__menu-list {
        gap: 1.75rem;
    }

    .header__menu-list a {
        font-size: 1rem;
        font-weight: 500;
        color: var(--color-primary);
    }

    /* Primary red pill button inside mobile menu */
    .header__btn-mob .button {
        width: 100%;
        height: 3.375rem;
        background-color: var(--color-bg-secondary);
        border: none;
        border-radius: 2rem;
        color: var(--color-whte);
        font-size: 1rem;
        font-weight: 500;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .header__btn-mob .button:hover {
        background-color: #d82b14;
        color: var(--color-whte);
    }
}

/* Breakpoint-specific heights for header and menu to eliminate gap */
@media (max-width: 36em) {
    html.menu-open .header {
        height: 3.75rem;
    }

    .header__col--menu {
        top: 3.75rem;
        padding: 1.75rem 1.25rem 1.5rem;
    }
}

@media (min-width: 36.01em) and (max-width: 48em) {
    html.menu-open .header {
        height: 4.375rem;
    }

    .header__col--menu {
        top: 4.375rem;
        padding: 2rem 1.25rem 1.5rem;
    }
}

@media (min-width: 48.01em) and (max-width: 1359.98px) {
    html.menu-open .header {
        height: 5rem;
    }

    .header__col--menu {
        top: 5rem;
        padding: 2rem 1.75rem 1.5rem;
    }
}

/* ==========================================================================
   Task 05: Align hero section start at y≈70 on 768px
   Between 576px and 768px, set header padding to 15px (0.9375rem)
   so total header height becomes 15px + 40px (menu icon) + 15px = 70px.
   ========================================================================== */
@media (min-width: 36.01em) and (max-width: 48em) {
    .header {
        padding-top: 0.9375rem;
        padding-bottom: 0.9375rem;
    }
}

/* ==========================================================================
   Task 02: Hero map framing and proper sizing across breakpoints
   ========================================================================== */
/* Tablet portrait (768px): Card height 416px, all 3 risk labels fully visible */
@media (min-width: 36.01em) and (max-width: 48em) {
    .hero__card--map {
        height: 26rem;
    }

    .hero__card--map picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .hero__card--map img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center bottom;
    }
}

/* Tablet landscape (1024px): Clean framing of map-tablet image inside 688px card */
@media (min-width: 48.01em) and (max-width: 64em) {
    .hero__card--map {
        height: 43rem;
    }

    .hero__card--map picture,
    .hero__card--map img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center center;
    }
}

/* Desktop (1440px, 1920px): Center object position */
@media (min-width: 64.01em) {
    .hero__card--map img {
        object-position: center center;
    }
}

/* ==========================================================================
   Task 09: Analysis technology illustration scale, circle arc and clipping
   ========================================================================== */
/* Desktop 1920px: Enlarge Russia silhouette and clip it at the section bottom */
@media (min-width: 90.01em) {
    .analysis-tech {
        min-height: 52rem;
        overflow: clip;
    }

    .analysis-tech__circle {
        top: 10.9375rem;
        width: 82rem;
        height: 82rem;
    }

    .analysis-tech__russia {
        width: 82rem;
        height: 45rem;
        top: 1.5rem;
    }

    .analysis-tech__russia img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

/* Desktop 1440px: Scale Russia illustration and arc */
@media (min-width: 64.01em) and (max-width: 90em) {
    .analysis-tech__circle {
        width: 72rem;
        height: 72rem;
    }

    .analysis-tech__russia {
        width: 68rem;
        height: 36rem;
        top: 1rem;
    }
}

/* Tablet landscape 1024px: Align arc and Russia SVG */
@media (min-width: 48.01em) and (max-width: 64em) {
    .analysis-tech__circle {
        top: 9.5rem;
        width: 58.75rem;
        height: 58.75rem;
    }

    .analysis-tech__russia {
        width: 50rem;
        height: 26.5625rem;
        top: 1.5rem;
    }
}

/* Tablet portrait 768px: Align arc and Russia SVG */
@media (min-width: 36.01em) and (max-width: 48em) {
    .analysis-tech__circle {
        top: 8.5rem;
        width: 45.75rem;
        height: 45.75rem;
    }

    .analysis-tech__russia {
        width: 25rem;
        height: 15.5rem;
        top: 1rem;
    }
}

/* ==========================================================================
   Task 10: 1024 px — Why-Trust-Us block layout, margins, and card metrics
   Mockup: outer padding = 80px, row width = 864px, card width = 426px,
   Row 1 height = 291px, Row 2 height = 315px.
   ========================================================================== */
@media (min-width: 48.01em) and (max-width: 64em) {
    .why-trust-us__container {
        gap: 2rem;
    }

    .why-trust-us__grid {
        gap: 0.75rem;
    }

    .why-trust-us__card {
        padding: 1.75rem 1.5rem;
        gap: 0.875rem;
    }

    .why-trust-us__card-icon {
        width: 4.25rem;
        height: 4.25rem;
    }

    .why-trust-us__card-title {
        font-size: 1.25rem;
        line-height: 1.2;
    }

    .why-trust-us__card-text {
        font-size: 0.9375rem;
        line-height: 1.25;
        max-width: 100%;
    }
}

/* ==========================================================================
   Task 11: 1920 px — Why-Trust-Us card height and 3-line text wrapping (≈286px)
   ========================================================================== */
@media (min-width: 90.01em) {
    .why-trust-us__card-text {
        max-width: 30.5rem;
    }
}

/* ==========================================================================
   1. Breakpoint Container System
   1920–1700 px: Primary container 1600 px (side margins 160 -> 50 px)
   1699–1360 px: Primary container 1280 px (side margins ~210 -> 40 px)
   1359–984 px:  Primary container 944 px  (side margins ~208 -> 20 px)
   983–768 px:   Primary container 728 px  (side margins ~128 -> 20 px)
   767–360 px:   Fill (side margins 20 px fixed)
   ========================================================================== */
.header__container,
.header-sticky__container,
.hero__container,
.map-legend__container,
.risk-map__container,
.analysis-tech__container,
.why-trust-us__container,
.form-section__container,
.faq__container,
.footer__container {
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   Comprehensive 5-Breakpoint Container & Responsive Layout System
   Source: Figma designs in "Карта рисков, Актион 2026 (Copy)"
   ========================================================================== */

/* --------------------------------------------------------------------------
   Range 1: 1920–1700 px (Design: 1920.png, 1700.png)
   Container: 1600px fixed, centered
   -------------------------------------------------------------------------- */
@media (min-width: 1700px) {
    .header__container,
    .header-sticky__container,
    .hero__container,
    .map-legend__container,
    .risk-map__container,
    .analysis-tech__container,
    .why-trust-us__container,
    .form-section__container,
    .faq__container,
    .footer__container {
        width: 1600px !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   Range 2: 1699–1360 px (Design: 1699.png, 1440.png, 1360.png)
   Container: 1280px fixed, centered
   -------------------------------------------------------------------------- */
@media (min-width: 1360px) and (max-width: 1699.98px) {
    .header__container,
    .header-sticky__container,
    .hero__container,
    .map-legend__container,
    .risk-map__container,
    .analysis-tech__container,
    .why-trust-us__container,
    .form-section__container,
    .faq__container,
    .footer__container {
        width: 1280px !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Common rules for Full Desktop: Ranges 1 & 2 (>= 1360px) */
@media (min-width: 1360px) {
    /* Full desktop header with horizontal menu and CTA button */
    .header__menu,
    .header-sticky__menu {
        display: block !important;
    }

    .header__col--ui,
    .header-sticky__ui {
        display: flex !important;
    }

    .icon-menu {
        display: none !important;
    }

    /* Hero section: 2 equal cards side by side */
    .hero__inner {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
    }

    .hero__card {
        flex: 0 0 calc(50% - 0.375rem) !important;
    }

    .hero__buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
        width: auto !important;
    }

    .hero__buttons .button {
        width: auto !important;
        min-width: 14rem !important;
        height: 3.375rem !important;
    }

    /* "Как читать эту карту?" - 2 columns side by side per 1920.png, 1440.png */
    .map-legend__inner {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
    }

    .map-legend__left {
        flex: 0 0 42.625% !important;
        width: auto !important;
        gap: clamp(2rem, 3.5vw, 3.4375rem) !important;
    }

    .map-legend__title {
        font-size: clamp(4.5rem, 6.5vw, 7.5rem) !important;
        line-height: 0.85 !important;
        margin-top: 20px !important;
    }

    .map-legend__desc {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
        max-width: none !important;
    }

    .map-legend__cards {
        flex: 0 0 49.5625% !important;
        width: auto !important;
        height: 28.75rem !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
    }

    .map-legend__card {
        flex: 1 0 0 !important;
        min-width: 0 !important;
    }

    /* Map actions in desktop header */
    .risk-map__actions--pc {
        display: flex !important;
    }

    .risk-map__actions--mobile {
        display: none !important;
    }

    /* Footer in full desktop: 4 columns in 1 row */
    .footer__body {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
    }

    .footer__nav {
        display: flex !important;
        flex-direction: row !important;
        gap: 4rem !important;
        max-width: 48rem !important;
    }

    .footer__subscribe {
        order: initial !important;
        width: auto !important;
        max-width: 28rem !important;
    }
}

/* --------------------------------------------------------------------------
   Ranges 3, 4, 5 (<= 1359.98px): Burger menu replaces horizontal menu
   Applies across 1359.png, 1200.png, 1024.png, 984.png, 768.png, 360.png
   -------------------------------------------------------------------------- */
@media (max-width: 1359.98px) {
    .header__menu,
    .header-sticky__menu,
    .header__col--ui,
    .header-sticky__ui {
        display: none !important;
    }

    .icon-menu {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }

    .header__col--menu {
        position: fixed !important;
        top: 5rem;
        bottom: 0;
        left: -100%;
        width: 100% !important;
        z-index: 140;
        margin-left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        gap: 2rem;
        padding: 1.75rem 1.25rem 1.5rem;
        background-color: var(--color-bg-primary) !important;
        border-top: 0.0625rem solid rgba(17, 17, 17, 0.08);
        overflow-y: auto;
        visibility: hidden;
        transition: left 0.3s ease-out, visibility 0.3s ease-out;
    }

    html.menu-open .header__col--menu {
        left: 0 !important;
        visibility: visible !important;
    }
}

/* --------------------------------------------------------------------------
   Range 3: 1359–984 px (Design: 1359.png, 1200.png, 1024.png, 984.png)
   Container: 944px fixed, centered
   -------------------------------------------------------------------------- */
@media (min-width: 984px) and (max-width: 1359.98px) {
    .header__container,
    .header-sticky__container,
    .hero__container,
    .map-legend__container,
    .risk-map__container,
    .analysis-tech__container,
    .why-trust-us__container,
    .form-section__container,
    .faq__container,
    .footer__container {
        width: 944px !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Hero section: 2 cards side by side, buttons stacked vertically inside left card */
    .hero__inner {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
        min-height: auto !important;
    }

    .hero__card {
        flex: 0 0 calc(50% - 0.375rem) !important;
        min-width: 0 !important;
    }

    .hero__card--content {
        padding: 3rem 2rem !important;
        justify-content: center !important;
    }

    .hero__brand {
        margin-top: 0 !important;
        font-size: 1.125rem !important;
    }

    .hero__title {
        font-size: 2.75rem !important;
        line-height: 1.05 !important;
        margin-top: 0.75rem !important;
        margin-bottom: 1.25rem !important;
    }

    .hero__title-icon {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }

    .hero__desc {
        font-size: 1rem !important;
        line-height: 1.25 !important;
        margin-bottom: 2rem !important;
    }

    .hero__buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.625rem !important;
        width: 100% !important;
    }

    .hero__buttons .button {
        width: 100% !important;
        min-width: 0 !important;
        height: 3.375rem !important;
    }

    .hero__card--map {
        height: auto !important;
        min-height: 36rem !important;
    }

    /* "Как читать эту карту?" - 1 column (title on top, 3 cards in row below) per 1359.png, 1200.png */
    .map-legend__inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2rem !important;
    }

    .map-legend__left {
        width: 100% !important;
        flex: none !important;
        gap: 1.25rem !important;
    }

    .map-legend__title {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
        margin-top: 0 !important;
    }

    .map-legend__desc {
        font-size: 1.125rem !important;
        line-height: 1.3 !important;
        max-width: 44rem !important;
    }

    .map-legend__cards {
        width: 100% !important;
        flex: none !important;
        height: 25rem !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
    }

    .map-legend__card {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    /* Map section actions: side-by-side row below map card */
    .risk-map__actions--pc {
        display: none !important;
    }

    .risk-map__actions--mobile {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
        width: 100% !important;
        margin-top: 0.75rem !important;
    }

    .risk-map__actions--mobile .risk-map__btn-refresh {
        flex: 1 1 0 !important;
        width: auto !important;
        height: 3.375rem !important;
    }

    .risk-map__actions--mobile .risk-map__btn-check {
        flex: 1 1 0 !important;
        width: auto !important;
        height: 3.375rem !important;
        background-color: var(--color-bg-secondary) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 2rem !important;
    }

    /* Footer in Range 3: 3 columns on top, subscribe below */
    .footer__body {
        display: flex !important;
        flex-direction: column !important;
        gap: 3.5rem !important;
    }

    .footer__nav {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .footer__subscribe {
        order: initial !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   Range 4: 983–768 px (Design: 983.png, 768.png)
   Container: 728px fixed, centered
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 983.98px) {
    .header__container,
    .header-sticky__container,
    .hero__container,
    .map-legend__container,
    .risk-map__container,
    .analysis-tech__container,
    .why-trust-us__container,
    .form-section__container,
    .faq__container,
    .footer__container {
        width: 728px !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Hero section: stacked vertically per 768.png */
    .hero__inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        min-height: auto !important;
    }

    .hero__card {
        flex: none !important;
        width: 100% !important;
    }

    .hero__card--content {
        padding: 3.5rem 2rem !important;
        min-height: 28rem !important;
    }

    .hero__card--map {
        height: 26rem !important;
    }

    .hero__brand {
        margin-top: 0 !important;
        font-size: 1.125rem !important;
    }

    .hero__title {
        font-size: 3rem !important;
        line-height: 1.1 !important;
    }

    .hero__buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
        width: auto !important;
    }

    .hero__buttons .button {
        min-width: 14rem !important;
        height: 3.375rem !important;
    }

    /* "Как читать эту карту?" - title on top, 3 cards in row per 768.png */
    .map-legend__inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.75rem !important;
    }

    .map-legend__left {
        width: 100% !important;
        flex: none !important;
        gap: 1rem !important;
    }

    .map-legend__title {
        font-size: 2.25rem !important;
        line-height: 1.1 !important;
        margin-top: 0 !important;
    }

    .map-legend__desc {
        font-size: 1rem !important;
        line-height: 1.3 !important;
    }

    .map-legend__cards {
        width: 100% !important;
        flex: none !important;
        height: 24rem !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
    }

    .map-legend__card {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    /* Map section actions: stacked vertically below map card per 768.png */
    .risk-map__actions--pc {
        display: none !important;
    }

    .risk-map__actions--mobile {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
        margin-top: 0.75rem !important;
    }

    .risk-map__actions--mobile .risk-map__btn-refresh {
        width: 100% !important;
        height: 3.375rem !important;
    }

    .risk-map__actions--mobile .risk-map__btn-check {
        width: 100% !important;
        height: 3.375rem !important;
        background-color: var(--color-bg-secondary) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 2rem !important;
    }

    /* Analysis technology pyramid layout */
    .analysis-tech__cards {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 1rem !important;
        position: relative !important;
    }

    .analysis-tech__card:nth-child(1) {
        order: 2 !important;
        flex: 0 0 calc(50% - 0.5rem) !important;
    }

    .analysis-tech__card:nth-child(2) {
        order: 1 !important;
        flex: 0 0 100% !important;
        max-width: 22rem !important;
        margin: 0 auto !important;
    }

    .analysis-tech__card:nth-child(3) {
        order: 3 !important;
        flex: 0 0 calc(50% - 0.5rem) !important;
    }

    /* Footer in Range 4: 3 columns on top, subscribe below */
    .footer__body {
        display: flex !important;
        flex-direction: column !important;
        gap: 3rem !important;
    }

    .footer__nav {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .footer__subscribe {
        order: initial !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   Range 5: 767–360 px (Design: 767.png, 360.png)
   Container: Fill (100% with 20px padding)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .header__container,
    .header-sticky__container,
    .hero__container,
    .map-legend__container,
    .risk-map__container,
    .analysis-tech__container,
    .why-trust-us__container,
    .form-section__container,
    .faq__container,
    .footer__container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Hero section: vertical stack per 767.png, 360.png */
    .hero__inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        min-height: auto !important;
    }

    .hero__card {
        width: 100% !important;
        flex: none !important;
    }

    .hero__card--content {
        padding: 3rem 1.25rem !important;
        min-height: 25rem !important;
    }

    .hero__card--map {
        height: 20rem !important;
    }

    .hero__brand {
        margin-top: 0 !important;
        font-size: 1rem !important;
    }

    .hero__title {
        font-size: 2rem !important;
        line-height: 1.15 !important;
    }

    .hero__title-icon {
        width: 3rem !important;
        height: 3rem !important;
    }

    .hero__desc {
        font-size: 0.9375rem !important;
        line-height: 1.3 !important;
        margin-bottom: 2rem !important;
    }

    .hero__buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .hero__buttons .button {
        width: 100% !important;
        min-width: 0 !important;
        height: 3.125rem !important;
    }

    /* "Как читать эту карту?" - 3 cards stacked vertically */
    .map-legend__inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .map-legend__left {
        width: 100% !important;
        flex: none !important;
        gap: 1rem !important;
    }

    .map-legend__title {
        font-size: 1.75rem !important;
        line-height: 1.15 !important;
        margin-top: 0 !important;
    }

    .map-legend__desc {
        font-size: 0.875rem !important;
        line-height: 1.3 !important;
    }

    .map-legend__cards {
        width: 100% !important;
        flex: none !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .map-legend__card {
        width: 100% !important;
        flex: none !important;
        min-height: 14rem !important;
    }

    .map-legend__card-color {
        height: 7rem !important;
    }

    /* Map section actions: Check button first, refresh button second */
    .risk-map__actions--pc {
        display: none !important;
    }

    .risk-map__actions--mobile {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
        margin-top: 0.75rem !important;
    }

    .risk-map__actions--mobile .risk-map__btn-check {
        order: 1 !important;
        width: 100% !important;
        height: 3.125rem !important;
        background-color: var(--color-bg-secondary) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 2rem !important;
    }

    .risk-map__actions--mobile .risk-map__btn-refresh {
        order: 2 !important;
        width: 100% !important;
        height: 3.125rem !important;
    }

    /* Analysis technology 1 column stack (20+ top, 500,000+ middle, 24/7 bottom) */
    .analysis-tech__cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
        align-items: center !important;
    }

    .analysis-tech__card {
        width: 100% !important;
        max-width: 24rem !important;
        position: static !important;
        transform: none !important;
    }

    .analysis-tech__card:nth-child(2) {
        order: 1 !important;
    }

    .analysis-tech__card:nth-child(1) {
        order: 2 !important;
    }

    .analysis-tech__card:nth-child(3) {
        order: 3 !important;
    }

    /* Why trust us 1 column stack */
    .why-trust-us__grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .why-trust-us__title {
        font-size: 2rem !important;
        line-height: 1.15 !important;
    }

    /* Form section 1 column stack */
    .form-section__inner {
        flex-direction: column !important;
        gap: 2rem !important;
    }

    .form-section__info {
        width: 100% !important;
    }

    .form-section__card {
        width: 100% !important;
    }

    .form-section__title {
        font-size: 2rem !important;
        line-height: 1.15 !important;
    }

    /* FAQ section 1 column stack */
    .faq__container {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .faq__head {
        width: 100% !important;
    }

    .faq__list {
        width: 100% !important;
    }

    .faq__title {
        font-size: 2rem !important;
        line-height: 1.15 !important;
    }

    /* Footer 1 column stack */
    .footer__body {
        flex-direction: column !important;
        gap: 2.5rem !important;
    }

    .footer__subscribe {
        order: -1 !important;
        width: 100% !important;
    }

    .footer__nav {
        flex-direction: column !important;
        gap: 2rem !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   2. Filter active state & icon 20px edge alignment (Desktop & Mobile)
   ========================================================================== */
/* Active state font color #0A0A0A */
.risk-map__filters .select._select-active .select__value,
.risk-map__filters .select.is-active .select__value,
.risk-map__filters .select[data-active="true"] .select__value,
.risk-map__select.is-active .select__value,
.risk-map__select._select-active .select__value {
    color: #0A0A0A !important;
    font-weight: 500 !important;
}

/* Filter trigger padding: exactly 20px on left and right */
.risk-map__filters .select__title {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Chevron icon inside filter trigger: 20px from right edge */
.risk-map__filters .select__arrow {
    width: 20px !important;
    height: 20px !important;
    margin-left: auto !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
}

.risk-map__filters .select__arrow svg {
    width: 20px !important;
    height: 20px !important;
}

/* Search input wrapper: search icon at left 20px, clear icon at right 20px */
.risk-map__search-wrap {
    position: relative !important;
}

.risk-map__search-icon {
    left: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

.risk-map__search-clear {
    right: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

.risk-map__search-input {
    padding-left: 52px !important;
    padding-right: 52px !important;
    color: #0A0A0A !important;
}

.risk-map__search-input::placeholder {
    color: var(--color-text-grey) !important;
}

/* ==========================================================================
   4. Gap between filter trigger and dropdown list (12px gap)
   ========================================================================== */
.risk-map__filters .select .select__options {
    top: calc(100% + 12px) !important;
    margin-top: 0 !important;
}

.risk-map__search .risk-map__suggestions {
    top: calc(100% + 12px) !important;
    margin-top: 0 !important;
}

/* ==========================================================================
   5. Crisp black outline on region hover/active (no gray darkening filter)
   ========================================================================== */
.risk-map__region:hover {
    -webkit-filter: none !important;
    filter: none !important;
}

.risk-map__region[data-highlighted="true"] {
    -webkit-filter: none !important;
    filter: none !important;
}

.risk-map__region-outline {
    fill: none !important;
    stroke: #0A0A0A !important;
    stroke-width: 1.5 !important;
    vector-effect: non-scaling-stroke !important;
    pointer-events: none !important;
}

/* ==========================================================================
   Mobile map filters & bottom sheet tooltip for <= 767.98px
   ========================================================================== */
@media (max-width: 767.98px) {
    .risk-map__filters {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
                flex-direction: column !important;
        gap: 0.5rem !important;
        top: 0.5rem !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
    }

    .risk-map__filters .select,
    .risk-map__filters .risk-map__search {
        width: 100% !important;
        -webkit-box-flex: 0 !important;
            -ms-flex: none !important;
                flex: none !important;
    }

    .risk-map__filters .select__title,
    .risk-map__filters .risk-map__search-input {
        height: 3.125rem !important;
    }

    .risk-map__filters .select__arrow svg {
        -webkit-transform: rotate(-90deg) !important;
            -ms-transform: rotate(-90deg) !important;
                transform: rotate(-90deg) !important;
    }

    .risk-map__tooltip {
        position: absolute !important;
        bottom: 3.5rem !important;
        top: auto !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        min-width: 0 !important;
        -webkit-transform: none !important;
            -ms-transform: none !important;
                transform: none !important;
        border-radius: 1.5rem !important;
        pointer-events: all !important;
        z-index: 70 !important;
    }
}

/* ==========================================================================
   Item 7: Lead Form Success State Card & Reset Button
   ========================================================================== */
.form-section__card--success {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    min-height: 25.5rem;
    padding: 2.5rem;
    background-color: var(--color-whte, #ffffff);
    border-radius: 1.5rem;
}

.form-section__success-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    padding: 2rem 0;
}

.form-section__success-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.form-section__success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.form-section__success-title {
    font-family: var(--font-primary, sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0A0A0A;
    margin: 0;
}

.form-section__success-desc {
    font-family: var(--font-primary, sans-serif);
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #737373;
    margin: 0;
}

.form-section__reset-btn {
    width: 100%;
    height: 3.375rem;
    background-color: var(--color-bg-secondary, #E52E2E) !important;
    color: #ffffff !important;
    border-radius: 2rem !important;
    border: none !important;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.form-section__reset-btn:hover {
    background-color: #d82b14 !important;
}

/* ==========================================================================
   Items 8 & 11: Input States & Removal of Red Border on Region Search Focus
   ========================================================================== */
/* Region search input: remove red stroke on focus, use dark border per UI kit */
.risk-map__search-input:focus,
.risk-map__search-input:active,
.risk-map__search.is-active .risk-map__search-input {
    border-color: #0A0A0A !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Form section inputs focus styling */
.form-section__input:focus {
    border-color: #0A0A0A !important;
    outline: none !important;
}

/* Footer form input wrap focus styling */
.footer__form-wrap {
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: border-color 0.2s ease;
}

.footer__form-wrap:focus-within {
    border-color: #0A0A0A !important;
}

.footer__form-input {
    color: #0A0A0A !important;
}

.footer__form-input::placeholder {
    color: #8C8C8C !important;
}

.footer__form-wrap._form-error {
    border-color: #E52E2E !important;
}

.footer__form-legal._form-error .checkbox__label::before {
    border-color: #E52E2E !important;
}

/* ==========================================================================
   Item 10: Footer Subscription Success State Card
   ========================================================================== */
.footer__subscribe-success {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.25rem 1.5rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    margin-top: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.footer__subscribe-success-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.footer__subscribe-success-text {
    font-family: var(--font-primary, sans-serif);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.35;
    color: #0A0A0A;
    margin: 0;
}