/* ============================================================
   VIANNA COMMERCIAL SERVICES
   INDEX PAGE
   FIXED HEADER + HERO IMAGE CAROUSEL + QUOTE FORM
============================================================ */


/* ============================================================
   1. GLOBAL DESIGN TOKENS
============================================================ */

:root {
    --color-navy-1000: #010912;
    --color-navy-975: #020d19;
    --color-navy-950: #03101f;
    --color-navy-925: #051629;
    --color-navy-900: #071a2f;
    --color-navy-850: #0a213b;
    --color-navy-800: #0d2948;
    --color-navy-700: #163c63;

    --color-red-700: #a90d27;
    --color-red-600: #c8102e;
    --color-red-500: #df1738;
    --color-red-400: #f02a49;

    --color-white: #ffffff;
    --color-white-soft: #f5f7fa;

    --color-gray-100: #eef1f5;
    --color-gray-200: #d8dee7;
    --color-gray-300: #b7c0cc;
    --color-gray-400: #98a4b2;
    --color-gray-500: #7b8796;

    /* Light surfaces used below the dark hero */
    --color-surface-page-top: #dfe7ef;
    --color-surface-page: #edf2f6;
    --color-surface-page-bottom: #f5f7f9;
    --color-surface-panel: #ffffff;
    --color-surface-field: #f8fafc;
    --color-surface-border: #cfd8e3;

    --color-ink-strong: #061426;
    --color-ink: #24364a;
    --color-ink-soft: #657487;

    --font-primary:
        "Manrope",
        Arial,
        Helvetica,
        sans-serif;

    --header-height: 94px;
    --header-height-scrolled: 76px;

    --container-width: 1340px;
    --container-padding: 32px;

    --hero-carousel-duration: 6500ms;
    --hero-slide-transition: 1200ms;

    --transition-fast: 180ms ease;
    --transition-medium: 320ms ease;
    --transition-slow: 520ms ease;

    --ease-premium:
        cubic-bezier(0.22, 1, 0.36, 1);

    --ease-carousel:
        cubic-bezier(0.65, 0, 0.35, 1);

    --shadow-header:
        0 10px 40px rgba(0, 0, 0, 0.18);

    --shadow-button:
        0 16px 35px rgba(200, 16, 46, 0.24);
}


/* ============================================================
   2. RESET AND DOCUMENT FOUNDATION
============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;

    min-width: 320px;
    min-height: 100%;

    overflow-x: hidden;

    color: var(--color-white);
    background-color: var(--color-navy-950);

    font-family: var(--font-primary);

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.menu-open {
    overflow: hidden;
    overscroll-behavior: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    padding: 0;

    color: inherit;
    background: none;

    border: 0;
}

img,
picture,
svg {
    display: block;

    max-width: 100%;
}

figure,
h1,
p {
    margin: 0;
}


/* ============================================================
   3. ACCESSIBILITY
============================================================ */

.screen-reader-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 4px;
}


/* ============================================================
   4. FIXED HEADER
============================================================ */

.site-header {
    position: fixed;

    z-index: 1000;

    top: 0;
    left: 0;

    width: 100%;

    background-color: transparent;

    border-bottom: 1px solid transparent;

    transition:
        background-color var(--transition-medium),
        border-color var(--transition-medium),
        box-shadow var(--transition-medium),
        -webkit-backdrop-filter var(--transition-medium),
        backdrop-filter var(--transition-medium);
}

.site-header::before {
    content: "";

    position: absolute;

    z-index: -1;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(2, 13, 25, 0.5) 0%,
            rgba(2, 13, 25, 0) 100%
        );

    opacity: 1;

    transition:
        opacity var(--transition-medium);
}

.site-header.is-scrolled,
.site-header.menu-active {
    background-color:
        rgba(3, 16, 31, 0.8);

    border-bottom-color:
        rgba(255, 255, 255, 0.09);

    box-shadow:
        var(--shadow-header);

    -webkit-backdrop-filter:
        blur(16px) saturate(125%);

    backdrop-filter:
        blur(16px) saturate(125%);
}

.site-header.is-scrolled::before,
.site-header.menu-active::before {
    opacity: 0;
}

.header-container {
    position: relative;

    z-index: 1002;

    display: grid;

    grid-template-columns:
        minmax(230px, 1fr)
        auto
        minmax(230px, 1fr);

    align-items: center;

    width:
        min(
            calc(
                100% -
                (var(--container-padding) * 2)
            ),
            var(--container-width)
        );

    min-height:
        var(--header-height);

    margin:
        0 auto;

    transition:
        min-height var(--transition-medium);
}

.site-header.is-scrolled .header-container {
    min-height:
        var(--header-height-scrolled);
}


/* ============================================================
   5. BRAND
============================================================ */

.brand {
    display: inline-flex;

    align-items: center;

    justify-self: start;

    gap: 12px;

    width: fit-content;
}

.brand-mark {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--color-red-500) 0%,
            var(--color-red-600) 100%
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    box-shadow:
        0 10px 30px
        rgba(200, 16, 46, 0.16);
}

.brand-mark::before {
    content: "";

    position: absolute;

    top: -22px;
    right: -22px;

    width: 42px;
    height: 42px;

    background-color:
        rgba(255, 255, 255, 0.12);

    transform:
        rotate(45deg);
}

.brand-mark::after {
    content: "";

    position: absolute;

    right: 5px;
    bottom: 5px;

    width: 5px;
    height: 5px;

    background-color:
        rgba(255, 255, 255, 0.55);
}

.brand-mark-letter {
    position: relative;

    z-index: 1;

    color:
        var(--color-white);

    font-size: 22px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: -0.08em;
}

.brand-text {
    display: flex;

    flex-direction: column;
    justify-content: center;
}

.brand-name {
    color:
        var(--color-white);

    font-size: 18px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.14em;
}

.brand-description {
    margin-top: 5px;

    color:
        rgba(255, 255, 255, 0.64);

    font-size: 9px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


/* ============================================================
   6. DESKTOP NAVIGATION
============================================================ */

.desktop-navigation {
    display: flex;

    align-items: center;
    justify-content: center;
}

.navigation-link {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding:
        0 17px;

    overflow: visible;

    color:
        rgba(255, 255, 255, 0.74);

    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.065em;

    text-transform: uppercase;

    transition:
        color var(--transition-fast);
}


/* Delicate vertical separators between navigation items */

.navigation-link + .navigation-link::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 1px;
    height: 15px;

    background-color:
        rgba(255, 255, 255, 0.18);

    transform:
        translateY(-50%);
}


/* Animated red loading line below each navigation link */

.navigation-link::after {
    content: "";

    position: absolute;

    right: 17px;
    bottom: 1px;
    left: 17px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--color-red-600) 0%,
            var(--color-red-400) 100%
        );

    box-shadow:
        0 0 10px
        rgba(223, 23, 56, 0.32);

    opacity: 0;

    transform:
        scaleX(0);

    transform-origin:
        left center;

    will-change:
        transform,
        opacity;

    transition:
        transform
        420ms
        var(--ease-premium),

        opacity
        160ms
        ease;
}

.navigation-link:hover,
.navigation-link:focus-visible,
.navigation-link.active {
    color:
        var(--color-white);
}


/* Load from left to right on hover or keyboard focus */

.navigation-link:hover::after,
.navigation-link:focus-visible::after {
    opacity: 1;

    transform:
        scaleX(1);

    transform-origin:
        left center;
}


/* Retract toward the right after the pointer leaves */

.navigation-link:not(:hover):not(:focus-visible)::after {
    transform-origin:
        right center;
}


/* ============================================================
   7. HEADER CTA
============================================================ */

.header-cta {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    justify-self: end;

    gap: 13px;

    min-height: 46px;

    padding:
        0 21px;

    overflow: hidden;

    color:
        var(--color-white);

    background-color:
        var(--color-red-600);

    border:
        1px solid
        var(--color-red-600);

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.075em;

    text-transform: uppercase;

    transition:
        color var(--transition-medium),
        background-color var(--transition-medium),
        border-color var(--transition-medium),
        transform var(--transition-fast),
        box-shadow var(--transition-medium);
}

.header-cta::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255, 255, 255, 0.22) 50%,
            transparent 80%
        );

    transform:
        translateX(-140%);

    transition:
        transform
        650ms
        var(--ease-premium);
}

.header-cta > * {
    position: relative;

    z-index: 1;
}

.header-cta svg {
    width: 17px;
    height: 17px;

    transition:
        transform var(--transition-medium);
}

.header-cta:hover {
    color:
        var(--color-navy-950);

    background-color:
        var(--color-white);

    border-color:
        var(--color-white);

    box-shadow:
        0 14px 30px
        rgba(0, 0, 0, 0.18);

    transform:
        translateY(-2px);
}

.header-cta:hover::before {
    transform:
        translateX(140%);
}

.header-cta:hover svg {
    transform:
        translateX(3px);
}


/* ============================================================
   8. MOBILE MENU BUTTON
============================================================ */

.menu-toggle {
    position: relative;

    display: none;

    align-items: center;
    justify-content: center;

    justify-self: end;

    width: 48px;
    height: 48px;

    cursor: pointer;

    border:
        1px solid
        rgba(255, 255, 255, 0.2);

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

.menu-toggle:hover {
    background-color:
        rgba(255, 255, 255, 0.06);

    border-color:
        rgba(255, 255, 255, 0.4);
}

.menu-toggle-box {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 6px;

    width: 24px;
    height: 24px;
}

.menu-toggle-line {
    display: block;

    width: 21px;
    height: 1.5px;

    background-color:
        var(--color-white);

    transform-origin:
        center;

    transition:
        transform var(--transition-medium),
        opacity var(--transition-fast),
        width var(--transition-medium);
}

.menu-toggle.is-active .menu-toggle-line:nth-child(1) {
    transform:
        translateY(7.5px)
        rotate(45deg);
}

.menu-toggle.is-active .menu-toggle-line:nth-child(2) {
    width: 0;

    opacity: 0;
}

.menu-toggle.is-active .menu-toggle-line:nth-child(3) {
    transform:
        translateY(-7.5px)
        rotate(-45deg);
}


/* ============================================================
   9. MOBILE MENU
============================================================ */

.mobile-menu {
    position: fixed;

    z-index: 1001;

    inset: 0;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        visibility var(--transition-medium),
        opacity var(--transition-medium);
}

.mobile-menu.is-open {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}

.mobile-menu-backdrop {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    cursor: pointer;

    background-color:
        rgba(0, 8, 18, 0.66);

    -webkit-backdrop-filter:
        blur(6px);

    backdrop-filter:
        blur(6px);
}

.mobile-menu-panel {
    position: absolute;

    top: 0;
    right: 0;

    display: flex;

    flex-direction: column;

    width:
        min(88%, 430px);

    height: 100%;
    min-height: 100dvh;

    padding:
        calc(var(--header-height) + 28px)
        30px
        28px;

    overflow-y: auto;

    overscroll-behavior:
        contain;

    background:
        linear-gradient(
            180deg,
            rgba(10, 33, 59, 0.96) 0%,
            rgba(3, 16, 31, 1) 100%
        );

    border-left:
        1px solid
        rgba(255, 255, 255, 0.1);

    box-shadow:
        -30px 0 70px
        rgba(0, 0, 0, 0.3);

    transform:
        translateX(100%);

    transition:
        transform
        440ms
        var(--ease-premium);
}

.mobile-menu.is-open .mobile-menu-panel {
    transform:
        translateX(0);
}

.mobile-menu-heading {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 24px;

    color:
        rgba(255, 255, 255, 0.48);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.17em;

    text-transform: uppercase;
}

.mobile-menu-heading-line {
    width: 100%;
    height: 1px;

    background-color:
        rgba(255, 255, 255, 0.12);
}

.mobile-navigation {
    display: flex;

    flex-direction: column;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.11);
}

.mobile-navigation-link {
    display: flex;

    align-items: center;
    justify-content: space-between;

    min-height: 63px;

    color:
        rgba(255, 255, 255, 0.8);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.11);

    font-size: 17px;
    font-weight: 600;

    letter-spacing: -0.01em;

    transition:
        color var(--transition-fast),
        padding-left var(--transition-medium),
        background-color var(--transition-fast);
}

.mobile-navigation-link:hover,
.mobile-navigation-link:focus-visible,
.mobile-navigation-link.active {
    padding-left: 8px;

    color:
        var(--color-white);

    background-color:
        rgba(255, 255, 255, 0.025);
}

.mobile-navigation-link.active::before {
    content: "";

    width: 3px;
    height: 22px;

    margin-right: 12px;

    background-color:
        var(--color-red-500);
}

.mobile-navigation-link.active > span:first-child {
    margin-right: auto;
}

.mobile-navigation-number {
    color:
        rgba(255, 255, 255, 0.3);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.12em;
}

.mobile-menu-cta-wrapper {
    margin-top: 30px;
}

.mobile-menu-cta {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    min-height: 56px;

    padding:
        0 20px;

    color:
        var(--color-white);

    background-color:
        var(--color-red-600);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.075em;

    text-transform: uppercase;

    transition:
        color var(--transition-medium),
        background-color var(--transition-medium);
}

.mobile-menu-cta:hover {
    color:
        var(--color-navy-950);

    background-color:
        var(--color-white);
}

.mobile-menu-cta svg {
    width: 18px;
    height: 18px;
}

.mobile-menu-contact {
    display: flex;

    flex-direction: column;

    gap: 5px;

    margin-top: auto;
    padding-top: 30px;

    color:
        rgba(255, 255, 255, 0.43);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* ============================================================
   10. HERO STRUCTURE
============================================================ */

.hero {
    position: relative;

    isolation: isolate;

    width: 100%;

    min-height: 100vh;
    min-height: 100svh;

    overflow: hidden;

    color:
        var(--color-white);

    background-color:
        var(--color-navy-950);
}

.hero-container {
    position: relative;

    z-index: 10;

    display: grid;

    grid-template-rows:
        minmax(0, 1fr)
        auto;

    width:
        min(
            calc(
                100% -
                (var(--container-padding) * 2)
            ),
            var(--container-width)
        );

    min-height: 100vh;
    min-height: 100svh;

    margin:
        0 auto;

    padding-top:
        calc(
            var(--header-height) + 48px
        );

    padding-bottom: 28px;
}

.hero-content {
    align-self: center;

    width: 100%;

    padding-top: 36px;
    padding-bottom: 40px;
}

.hero-lower-area {
    align-self: end;

    width: 100%;
}


/* ============================================================
   11. HERO BACKGROUND CAROUSEL
============================================================ */

.hero-carousel {
    position: absolute;

    z-index: 0;

    inset: 0;

    overflow: hidden;

    background-color:
        var(--color-navy-950);
}

.hero-slide {
    position: absolute;

    inset: -1.5%;

    width: 103%;
    height: 103%;

    visibility: hidden;

    opacity: 0;

    transform:
        scale(1.045);

    transition:
        opacity
        var(--hero-slide-transition)
        var(--ease-carousel),

        visibility
        var(--hero-slide-transition)
        var(--ease-carousel),

        transform
        8500ms
        linear;
}

.hero-slide.is-active {
    visibility: visible;

    opacity: 1;

    transform:
        scale(1);
}

.hero-slide img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    filter:
        saturate(0.78)
        contrast(1.04)
        brightness(0.72);
}


/* ============================================================
   12. HERO GRADIENTS AND TEXTURE
============================================================ */

.hero-edge-gradient {
    position: absolute;

    z-index: 2;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse 68% 78%
            at 58% 48%,

            rgba(3, 16, 31, 0.02) 0%,
            rgba(3, 16, 31, 0.08) 30%,
            rgba(3, 16, 31, 0.42) 66%,
            rgba(3, 16, 31, 0.96) 100%
        ),

        linear-gradient(
            90deg,

            rgba(3, 16, 31, 0.98) 0%,
            rgba(3, 16, 31, 0.84) 17%,
            rgba(3, 16, 31, 0.2) 45%,
            rgba(3, 16, 31, 0.1) 58%,
            rgba(3, 16, 31, 0.55) 82%,
            rgba(3, 16, 31, 0.96) 100%
        );
}

.hero-reading-gradient {
    position: absolute;

    z-index: 3;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,

            rgba(3, 16, 31, 0.98) 0%,
            rgba(3, 16, 31, 0.91) 27%,
            rgba(3, 16, 31, 0.56) 49%,
            rgba(3, 16, 31, 0.08) 72%,
            rgba(3, 16, 31, 0) 100%
        );
}

.hero-vertical-gradient {
    position: absolute;

    z-index: 4;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,

            rgba(3, 16, 31, 0.34) 0%,
            rgba(3, 16, 31, 0.02) 32%,
            rgba(3, 16, 31, 0.03) 58%,
            rgba(3, 16, 31, 0.78) 100%
        );
}

.hero-pattern {
    position: absolute;

    z-index: 5;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.023) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.023) 1px,
            transparent 1px
        );

    background-size:
        74px 74px;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.78),
            rgba(0, 0, 0, 0.34) 60%,
            transparent 92%
        );

    mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.78),
            rgba(0, 0, 0, 0.34) 60%,
            transparent 92%
        );
}

.hero-noise {
    position: absolute;

    z-index: 6;

    inset: 0;

    pointer-events: none;

    opacity: 0.045;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"
        );
}


/* ============================================================
   13. HERO TYPOGRAPHY
============================================================ */

.hero-eyebrow {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;
}

.hero-eyebrow-line {
    display: block;

    width: 43px;
    height: 2px;

    background-color:
        var(--color-red-500);
}

.hero-eyebrow-text {
    color:
        rgba(255, 255, 255, 0.75);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;

    letter-spacing: 0.17em;

    text-transform: uppercase;
}

.hero-title {
    max-width: 820px;

    color:
        var(--color-white);

    font-size:
        clamp(
            3.25rem,
            5.8vw,
            5.95rem
        );

    font-weight: 700;
    line-height: 0.98;

    letter-spacing: -0.055em;

    text-wrap: balance;
}

.hero-title span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1px
        rgba(255, 255, 255, 0.78);

    text-stroke:
        1px
        rgba(255, 255, 255, 0.78);
}

.hero-description {
    max-width: 690px;

    margin-top: 30px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.12rem
        );

    font-weight: 400;
    line-height: 1.8;

    letter-spacing: -0.01em;
}


/* ============================================================
   14. HERO CALL-TO-ACTION BUTTONS
============================================================ */

.hero-actions {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 14px;

    margin-top: 38px;
}

.hero-button {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 16px;

    min-height: 57px;

    padding:
        0 25px;

    overflow: hidden;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.075em;

    text-transform: uppercase;

    transition:
        color var(--transition-medium),
        background-color var(--transition-medium),
        border-color var(--transition-medium),
        transform var(--transition-fast),
        box-shadow var(--transition-medium);
}

.hero-button > * {
    position: relative;

    z-index: 2;
}

.hero-button svg {
    width: 18px;
    height: 18px;

    transition:
        transform var(--transition-medium);
}

.hero-button-primary {
    color:
        var(--color-white);

    background-color:
        var(--color-red-600);

    border:
        1px solid
        var(--color-red-600);

    box-shadow:
        var(--shadow-button);
}

.hero-button-primary::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,

            transparent 18%,
            rgba(255, 255, 255, 0.18) 50%,
            transparent 82%
        );

    transform:
        translateX(-140%);

    transition:
        transform
        680ms
        var(--ease-premium);
}

.hero-button-primary:hover {
    color:
        var(--color-navy-950);

    background-color:
        var(--color-white);

    border-color:
        var(--color-white);

    box-shadow:
        0 20px 42px
        rgba(0, 0, 0, 0.25);

    transform:
        translateY(-3px);
}

.hero-button-primary:hover::before {
    transform:
        translateX(140%);
}

.hero-button-primary:hover svg {
    transform:
        translateX(4px);
}

.hero-button-secondary {
    color:
        var(--color-white);

    background-color:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid
        rgba(255, 255, 255, 0.32);

    -webkit-backdrop-filter:
        blur(7px);

    backdrop-filter:
        blur(7px);
}

.hero-button-secondary:hover {
    color:
        var(--color-navy-950);

    background-color:
        var(--color-white);

    border-color:
        var(--color-white);

    transform:
        translateY(-3px);
}


/* ============================================================
   15. CENTERED CIRCULAR CAROUSEL INDICATORS
============================================================ */

.hero-carousel-ui {
    position: relative;

    z-index: 20;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    margin-bottom: 17px;
}

.hero-carousel-dots {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding:
        3px 8px;

    border-radius: 999px;
}

.hero-carousel-dot {
    /*
        JavaScript updates this custom property
        between 0deg and 360deg.
    */
    --carousel-progress: 0deg;

    --carousel-fill-color:
        var(--color-red-500);

    --carousel-track-color:
        rgba(255, 255, 255, 0.27);

    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    cursor: pointer;

    border-radius: 50%;

    touch-action: manipulation;
}

.hero-carousel-dot-visual {
    display: block;

    width: 15px;
    height: 15px;

    border-radius: 50%;

    background:
        conic-gradient(
            from -90deg,

            var(--carousel-fill-color)
            0deg,

            var(--carousel-fill-color)
            var(--carousel-progress),

            var(--carousel-track-color)
            var(--carousel-progress),

            var(--carousel-track-color)
            360deg
        );

    box-shadow:
        0 0 0 1px
        rgba(255, 255, 255, 0.08);

    transform:
        scale(1);

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast);
}

.hero-carousel-dot:hover,
.hero-carousel-dot:focus-visible {
    --carousel-fill-color:
        var(--color-red-500);

    --carousel-track-color:
        var(--color-red-500);
}

.hero-carousel-dot:hover .hero-carousel-dot-visual,
.hero-carousel-dot:focus-visible .hero-carousel-dot-visual {
    transform:
        scale(1.18);

    box-shadow:
        0 0 18px
        rgba(223, 23, 56, 0.32);
}

.hero-carousel-dot.is-active .hero-carousel-dot-visual {
    transform:
        scale(1.12);

    box-shadow:
        0 0 16px
        rgba(223, 23, 56, 0.22);
}

.hero-carousel-dot:disabled {
    cursor: not-allowed;

    opacity: 0.25;
}


/* ============================================================
   16. CLICKABLE SERVICE HIGHLIGHTS
============================================================ */

.hero-service-highlights {
    position: relative;

    z-index: 20;

    display: flex;

    align-items: stretch;

    width:
        min(100%, 1040px);

    margin-right: auto;
    margin-left: auto;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.2);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.2);

    -webkit-backdrop-filter:
        blur(3px);

    backdrop-filter:
        blur(3px);
}

.hero-service-highlight {
    position: relative;

    display: flex;

    flex: 1;

    align-items: center;
    justify-content: center;

    gap: 14px;

    min-width: 0;
    min-height: 80px;

    padding:
        0 34px;

    cursor: pointer;

    pointer-events: auto;

    transition:
        color var(--transition-medium),
        background-color var(--transition-medium),
        transform var(--transition-medium);
}

.hero-service-highlight + .hero-service-highlight::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 1px;
    height: 34px;

    background-color:
        rgba(255, 255, 255, 0.18);

    transform:
        translateY(-50%);
}

.hero-service-highlight::after {
    content: "";

    position: absolute;

    right: 24px;
    bottom: -1px;
    left: 24px;

    height: 1px;

    background-color:
        var(--color-red-500);

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform
        var(--transition-medium)
        var(--ease-premium);
}

.hero-service-highlight:hover,
.hero-service-highlight:focus-visible {
    color:
        var(--color-white);

    background-color:
        rgba(255, 255, 255, 0.04);
}

.hero-service-highlight:hover::after,
.hero-service-highlight:focus-visible::after {
    transform:
        scaleX(1);
}

.highlight-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    flex:
        0 0 30px;

    color:
        var(--color-red-400);

    transition:
        color var(--transition-medium),
        transform var(--transition-medium);
}

.hero-service-highlight:hover .highlight-icon,
.hero-service-highlight:focus-visible .highlight-icon {
    color:
        var(--color-red-500);

    transform:
        translateY(-2px);
}

.highlight-icon svg {
    width: 100%;
    height: 100%;
}

.highlight-text {
    color:
        rgba(255, 255, 255, 0.84);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;

    letter-spacing: 0.075em;

    text-align: center;
    text-transform: uppercase;

    white-space: nowrap;

    transition:
        color var(--transition-medium);
}

.hero-service-highlight:hover .highlight-text,
.hero-service-highlight:focus-visible .highlight-text {
    color:
        var(--color-white);
}


/* ============================================================
   17. HERO DECORATIVE DETAILS
============================================================ */

.hero-location {
    position: absolute;

    z-index: 12;

    right: 28px;
    bottom: 30px;

    display: flex;

    align-items: center;

    gap: 11px;

    color:
        rgba(255, 255, 255, 0.48);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    writing-mode: vertical-rl;

    transform:
        rotate(180deg);
}

.hero-location-dot {
    width: 5px;
    height: 5px;

    background-color:
        var(--color-red-500);

    border-radius: 50%;
}

.hero-side-accent {
    position: absolute;

    z-index: 12;

    top: 50%;
    right: 0;

    width: 3px;
    height: 150px;

    background:
        linear-gradient(
            180deg,

            transparent 0%,
            var(--color-red-600) 22%,
            var(--color-red-500) 78%,
            transparent 100%
        );

    transform:
        translateY(-50%);
}


/* ============================================================
   18. INITIAL CONTENT REVEAL
============================================================ */

.hero-reveal {
    opacity: 0;

    transform:
        translateY(20px);

    animation:
        hero-content-reveal
        760ms
        var(--ease-premium)
        forwards;
}

.hero-reveal-1 {
    animation-delay: 120ms;
}

.hero-reveal-2 {
    animation-delay: 220ms;
}

.hero-reveal-3 {
    animation-delay: 330ms;
}

.hero-reveal-4 {
    animation-delay: 430ms;
}

.hero-reveal-5 {
    animation-delay: 570ms;
}


/* ============================================================
   19. ANIMATION KEYFRAMES
============================================================ */

@keyframes hero-content-reveal {
    from {
        opacity: 0;

        transform:
            translateY(20px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ============================================================
   20. HERO TO LIGHT CONTENT TRANSITION
============================================================ */

.hero-main-divider {
    position: relative;

    z-index: 30;

    width: 100%;
    height: 5px;

    margin-top: -1px;

    background:
        linear-gradient(
            90deg,
            var(--color-red-700) 0%,
            var(--color-red-500) 44%,
            var(--color-red-400) 50%,
            var(--color-red-500) 56%,
            var(--color-red-700) 100%
        );

    box-shadow:
        0 7px 24px
        rgba(200, 16, 46, 0.2);
}


/* ============================================================
   21. CUSTOM QUOTE SECTION
============================================================ */

.quote-section {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding:
        112px 0
        124px;

    color:
        var(--color-ink-strong);

    color-scheme: light;

    background:
        linear-gradient(
            180deg,
            var(--color-surface-page-top) 0%,
            var(--color-surface-page) 15%,
            var(--color-surface-page-bottom) 56%,
            var(--color-surface-page) 100%
        );
}

.quote-section::before {
    content: "";

    position: absolute;

    z-index: -2;

    top: 0;
    right: 0;
    left: 0;

    height: 210px;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(3, 16, 31, 0.09) 0%,
            rgba(3, 16, 31, 0.035) 40%,
            rgba(3, 16, 31, 0) 100%
        );
}

.quote-section::after {
    content: "";

    position: absolute;

    z-index: -2;

    right: -180px;
    bottom: -250px;

    width: 620px;
    height: 620px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(7, 26, 47, 0.08) 0%,
            rgba(7, 26, 47, 0.035) 36%,
            transparent 72%
        );

    border-radius: 50%;
}

.quote-section-pattern {
    position: absolute;

    z-index: -1;

    inset: 0;

    pointer-events: none;

    opacity: 0.36;

    background-image:
        linear-gradient(
            rgba(7, 26, 47, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(7, 26, 47, 0.035) 1px,
            transparent 1px
        );

    background-size:
        74px 74px;

    -webkit-mask-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.38) 0%,
            transparent 46%
        );

    mask-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.38) 0%,
            transparent 46%
        );
}

.quote-container {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(0, 1.12fr);

    align-items: stretch;

    gap: 72px;

    width:
        min(
            calc(
                100% -
                (var(--container-padding) * 2)
            ),
            var(--container-width)
        );

    margin:
        0 auto;
}


/* ============================================================
   22. QUOTE INTRODUCTION
============================================================ */

.quote-intro {
    width: 100%;
    max-width: 560px;
}

.quote-eyebrow {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 27px;
}

.quote-eyebrow-line {
    display: block;

    width: 43px;
    height: 2px;

    flex: 0 0 43px;

    background-color:
        var(--color-red-500);
}

.quote-eyebrow-text {
    color:
        var(--color-red-600);

    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}

.quote-title {
    max-width: 570px;

    margin: 0;

    color:
        var(--color-ink-strong);

    font-size:
        clamp(
            3rem,
            4.25vw,
            4.35rem
        );

    font-weight: 700;
    line-height: 0.99;

    letter-spacing: -0.055em;

    text-wrap: balance;
}


/* ============================================================
   22.1 QUOTE DESCRIPTION
============================================================ */

.quote-description {
    max-width: 590px;

    margin-top: 30px;

    color:
        var(--color-ink-soft);

    font-size:
        clamp(
            1.05rem,
            1.2vw,
            1.12rem
        );

    font-weight: 400;

    line-height: 1.82;

    letter-spacing: -0.014em;
}


/* ============================================================
   22.2 QUOTE SERVICE BENEFITS
============================================================ */

.quote-service-points {
    display: grid;

    gap: 14px;

    margin-top: 36px;

    /*
        Mantém exatamente a mesma altura vertical do bloco:
        antes = 30px top + 0px bottom
        agora = 28px top + 2px bottom
    */
    padding-top: 28px;
    padding-bottom: 2px;

    border-top:
        1px solid
        rgba(7, 26, 47, 0.12);
}

.quote-service-point {
    display: flex;

    align-items: center;

    gap: 13px;

    color:
        var(--color-ink);

    font-size: 12px;
    font-weight: 650;
    line-height: 1.45;
}

.quote-service-point-mark {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    border:
        1px solid
        rgba(223, 23, 56, 0.4);

    border-radius: 50%;
}

.quote-service-point-mark::after {
    content: "";

    width: 5px;
    height: 5px;

    background-color:
        var(--color-red-500);

    border-radius: 50%;
}


/* ============================================================
   22.3 QUOTE PROCESS / WHAT HAPPENS NEXT
============================================================ */

.quote-process {
    position: relative;

    margin-top: 38px;

    padding:
        27px 29px
        25px;

    background:
        rgba(255, 255, 255, 0.38);

    border:
        1px solid
        rgba(7, 26, 47, 0.1);

    border-left:
        3px solid
        var(--color-red-500);
}

.quote-process::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 72px;
    height: 72px;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            transparent 49%,
            rgba(7, 26, 47, 0.035) 50%
        );
}

.quote-process-header {
    position: relative;

    z-index: 1;

    margin-bottom: 20px;
}

.quote-process-kicker {
    display: block;

    margin-bottom: 7px;

    color:
        var(--color-red-600);

    font-size: 9px;
    font-weight: 800;
    line-height: 1.4;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}

.quote-process-intro {
    max-width: 430px;

    margin: 0;

    color:
        var(--color-ink-soft);

    font-size: 11px;
    font-weight: 500;
    line-height: 1.65;
}

.quote-process-steps {
    display: grid;

    border-top:
        1px solid
        rgba(7, 26, 47, 0.09);
}

.quote-process-step {
    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr);

    gap: 14px;

    align-items: start;

    padding:
        16px 0;

    border-bottom:
        1px solid
        rgba(7, 26, 47, 0.09);
}

.quote-process-step:last-child {
    padding-bottom: 2px;

    border-bottom: 0;
}

.quote-process-number {
    color:
        var(--color-red-500);

    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;

    letter-spacing: 0.1em;
}

.quote-process-content {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.quote-process-content strong {
    color:
        var(--color-ink-strong);

    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
}

.quote-process-content span {
    max-width: 410px;

    color:
        var(--color-ink-soft);

    font-size: 10px;
    font-weight: 450;
    line-height: 1.6;
}


/* ============================================================
   22.4 QUOTE SERVICE LOCATION
============================================================ */

.quote-location-note {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-top: 28px;

    color:
        #365875;

    font-size: 10px;
    font-weight: 800;
    line-height: 1.45;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.quote-location-note svg {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    color:
        var(--color-red-500);
}


/* ============================================================
   22.5 DESKTOP QUOTE INTRODUCTION VERTICAL LAYOUT
============================================================ */

@media (min-width: 1021px) {

    .quote-intro {
        display: flex;

        flex-direction: column;

        align-self: stretch;

        height: 100%;
    }

    /*
        Benefits stay grouped directly below the description.
        They keep their natural spacing instead of being pushed
        to the bottom of the column.
    */
    .quote-service-points {
        margin-top: 36px;

        padding-top: 30px;
    }

    /*
        The larger process card uses the flexible vertical space.
        This keeps the composition filled without stretching the
        individual benefit items apart.
    */
    .quote-process {
        margin-top: auto;
    }

    .quote-location-note {
        margin-top: 28px;
    }
}

/* ============================================================
   23. QUOTE FORM CARD
============================================================ */

.quote-form-shell {
    position: relative;

    width: 100%;

    overflow: hidden;

    background-color:
        var(--color-surface-panel);

    border:
        1px solid
        rgba(7, 26, 47, 0.08);

    box-shadow:
        0 34px 75px
        rgba(3, 16, 31, 0.13),
        0 10px 26px
        rgba(3, 16, 31, 0.055);
}

.quote-form-accent {
    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--color-red-700) 0%,
            var(--color-red-500) 48%,
            var(--color-red-400) 100%
        );
}

.quote-form-heading {
    padding:
        38px 42px
        31px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfd 100%
        );

    border-bottom:
        1px solid
        rgba(7, 26, 47, 0.09);
}

.quote-form-kicker {
    display: block;

    margin-bottom: 13px;

    color:
        var(--color-red-600);

    font-size: 9px;
    font-weight: 800;
    line-height: 1.4;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}

.quote-form-title {
    margin: 0;

    color:
        var(--color-ink-strong);

    font-size:
        clamp(
            1.75rem,
            2.3vw,
            2.25rem
        );

    font-weight: 750;
    line-height: 1.08;

    letter-spacing: -0.045em;
}

.quote-form-description {
    max-width: 680px;

    margin-top: 13px;

    color:
        var(--color-ink-soft);

    font-size: 12px;
    line-height: 1.65;
}

.quote-form {
    position: relative;

    padding:
        35px 42px
        36px;
}

.quote-form-honeypot {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0 0 0 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}

.quote-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        21px 20px;
}

.quote-field {
    display: flex;

    flex-direction: column;

    min-width: 0;
}

.quote-field-full {
    grid-column: 1 / -1;
}

.quote-label {
    display: inline-flex;

    align-items: center;

    gap: 3px;

    margin-bottom: 9px;

    color:
        var(--color-ink);

    font-size: 9px;
    font-weight: 800;
    line-height: 1.3;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}

.quote-label span {
    color:
        var(--color-red-500);
}

.quote-input,
.quote-select,
.quote-textarea {
    width: 100%;

    color:
        var(--color-ink-strong);

    background-color:
        var(--color-surface-field);

    border:
        1px solid
        var(--color-surface-border);

    border-radius: 0;

    outline: none;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.quote-input,
.quote-select {
    min-height: 53px;

    padding:
        0 16px;
}

.quote-select {
    padding-right: 46px;

    cursor: pointer;

    -webkit-appearance: none;
    appearance: none;
}

.quote-textarea {
    min-height: 154px;

    padding:
        15px 16px;

    line-height: 1.65;

    resize: vertical;
}

.quote-input::placeholder,
.quote-textarea::placeholder {
    color:
        #9aa7b6;

    opacity: 1;
}

.quote-input:hover,
.quote-select:hover,
.quote-textarea:hover {
    border-color:
        #b6c2cf;
}

.quote-input:focus,
.quote-select:focus,
.quote-textarea:focus {
    background-color:
        var(--color-white);

    border-color:
        var(--color-red-500);

    box-shadow:
        0 0 0 3px
        rgba(223, 23, 56, 0.1),
        0 8px 24px
        rgba(3, 16, 31, 0.05);
}

.quote-input:-webkit-autofill,
.quote-input:-webkit-autofill:hover,
.quote-input:-webkit-autofill:focus {
    -webkit-text-fill-color:
        var(--color-ink-strong);

    -webkit-box-shadow:
        0 0 0 1000px
        var(--color-surface-field)
        inset;

    transition:
        background-color 9999s ease-out 0s;
}

.quote-select-wrapper {
    position: relative;
}

.quote-select-wrapper svg {
    position: absolute;

    top: 50%;
    right: 15px;

    width: 17px;
    height: 17px;

    color:
        #476480;

    pointer-events: none;

    transform:
        translateY(-50%);
}

.quote-form-status {
    display: none;

    margin-top: 18px;
    padding: 12px 14px;

    font-size: 11px;
    font-weight: 650;
    line-height: 1.5;
}

.quote-form-status:not(:empty) {
    display: block;

    color:
        var(--color-ink);

    background-color:
        #f2f5f8;

    border-left:
        3px solid
        #7e91a5;
}

.quote-form-status.is-success {
    color:
        #17492d;

    background-color:
        #eef8f2;

    border-left-color:
        #2e8b57;
}

.quote-form-status.is-error {
    color:
        #74162a;

    background-color:
        #fff1f4;

    border-left-color:
        var(--color-red-500);
}

.quote-submit {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    width: 100%;
    min-height: 58px;

    margin-top: 25px;
    padding:
        0 20px;

    overflow: hidden;

    cursor: pointer;

    color:
        var(--color-white);

    background-color:
        var(--color-red-600);

    border:
        1px solid
        var(--color-red-600);

    font-size: 10px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.065em;

    text-align: left;
    text-transform: uppercase;

    box-shadow:
        0 14px 28px
        rgba(200, 16, 46, 0.18);

    transition:
        color var(--transition-medium),
        background-color var(--transition-medium),
        border-color var(--transition-medium),
        transform var(--transition-fast),
        box-shadow var(--transition-medium);
}

.quote-submit::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255, 255, 255, 0.2) 50%,
            transparent 80%
        );

    transform:
        translateX(-145%);

    transition:
        transform
        680ms
        var(--ease-premium);
}

.quote-submit > * {
    position: relative;

    z-index: 1;
}

.quote-submit svg {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    transition:
        transform var(--transition-medium);
}

.quote-submit:hover,
.quote-submit:focus-visible {
    color:
        var(--color-white);

    background-color:
        var(--color-navy-900);

    border-color:
        var(--color-navy-900);

    box-shadow:
        0 18px 34px
        rgba(3, 16, 31, 0.2);

    transform:
        translateY(-2px);
}

.quote-submit:hover::before,
.quote-submit:focus-visible::before {
    transform:
        translateX(145%);
}

.quote-submit:hover svg,
.quote-submit:focus-visible svg {
    transform:
        translateX(4px);
}

.quote-submit:disabled {
    cursor: wait;

    opacity: 0.65;

    transform: none;
}

.quote-form-privacy {
    max-width: 680px;

    margin:
        14px auto 0;

    color:
        #8a97a7;

    font-size: 9px;
    line-height: 1.5;

    text-align: center;
}

.quote-form-privacy a {
    color:
        #375a7b;

    font-weight: 750;

    text-decoration: underline;
    text-underline-offset: 2px;

    transition:
        color var(--transition-fast);
}

.quote-form-privacy a:hover,
.quote-form-privacy a:focus-visible {
    color:
        var(--color-red-600);
}


/* ============================================================
   24. LARGE DESKTOP ADJUSTMENTS
============================================================ */

@media (max-width: 1240px) {
    .header-container {
        grid-template-columns:
            minmax(205px, 1fr)
            auto
            minmax(205px, 1fr);
    }

    .navigation-link {
        padding-right: 12px;
        padding-left: 12px;

        font-size: 11px;
    }

    .navigation-link::after {
        right: 12px;
        left: 12px;
    }

    .header-cta {
        padding-right: 17px;
        padding-left: 17px;
    }

    .hero-location {
        right: 18px;
    }

    .quote-container {
        gap: 50px;
    }

    .quote-form-heading {
        padding-right: 34px;
        padding-left: 34px;
    }

    .quote-form {
        padding-right: 34px;
        padding-left: 34px;
    }
}


/* ============================================================
   25. TABLET AND MOBILE NAVIGATION
============================================================ */

@media (max-width: 1020px) {
    :root {
        --header-height: 84px;
        --header-height-scrolled: 72px;
        --container-padding: 26px;
    }

    .header-container {
        grid-template-columns:
            1fr auto;
    }

    .desktop-navigation,
    .header-cta {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .hero-container {
        padding-top:
            calc(
                var(--header-height) + 44px
            );

        padding-bottom: 25px;
    }

    .hero-content {
        padding-top: 30px;
        padding-bottom: 34px;
    }

    .hero-slide img {
        object-position:
            62% center;
    }

    .hero-edge-gradient {
        background:
            radial-gradient(
                ellipse 74% 76%
                at 62% 46%,

                rgba(3, 16, 31, 0.04) 0%,
                rgba(3, 16, 31, 0.14) 36%,
                rgba(3, 16, 31, 0.66) 75%,
                rgba(3, 16, 31, 0.98) 100%
            ),

            linear-gradient(
                90deg,

                rgba(3, 16, 31, 0.98) 0%,
                rgba(3, 16, 31, 0.85) 30%,
                rgba(3, 16, 31, 0.28) 66%,
                rgba(3, 16, 31, 0.8) 100%
            );
    }

    .hero-reading-gradient {
        background:
            linear-gradient(
                90deg,

                rgba(3, 16, 31, 0.98) 0%,
                rgba(3, 16, 31, 0.89) 42%,
                rgba(3, 16, 31, 0.36) 80%,
                rgba(3, 16, 31, 0.08) 100%
            );
    }

    .hero-title {
        max-width: 760px;

        font-size:
            clamp(
                3.15rem,
                8.4vw,
                5.3rem
            );
    }

    .hero-location {
        display: none;
    }

    .hero-service-highlight {
        gap: 11px;

        padding-right: 18px;
        padding-left: 18px;
    }

    .highlight-text {
        font-size: 10px;
    }

    .quote-section {
        padding-top: 94px;
        padding-bottom: 104px;
    }

    .quote-container {
        grid-template-columns: 1fr;

        gap: 58px;

        max-width: 850px;
    }

    .quote-intro {
        max-width: 710px;
    }

    .quote-title {
        max-width: 690px;
    }

    .quote-description {
        max-width: 690px;
    }

    .quote-form-shell {
        max-width: 850px;
    }
}


/* ============================================================
   26. TABLET PORTRAIT
============================================================ */

@media (max-width: 820px) {
    .hero-container {
        padding-top:
            calc(
                var(--header-height) + 46px
            );

        padding-bottom: 22px;
    }

    .hero-content {
        padding-top: 28px;
        padding-bottom: 32px;
    }

    .hero-title {
        max-width: 650px;

        font-size:
            clamp(
                3rem,
                9vw,
                4.75rem
            );
    }

    .hero-description {
        max-width: 610px;
    }

    .hero-service-highlights {
        width: 100%;
    }

    .hero-service-highlight {
        gap: 9px;

        min-height: 76px;

        padding-right: 10px;
        padding-left: 10px;
    }

    .highlight-icon {
        width: 27px;
        height: 27px;

        flex-basis: 27px;
    }

    .highlight-text {
        font-size: 9px;
    }

    .quote-section {
        padding-top: 82px;
        padding-bottom: 92px;
    }

    .quote-container {
        gap: 50px;
    }

    .quote-title {
        font-size:
            clamp(
                2.8rem,
                8.2vw,
                3.8rem
            );
    }

    .quote-form-heading {
        padding:
            34px 30px
            28px;
    }

    .quote-form {
        padding:
            31px 30px
            32px;
    }
}


/* ============================================================
   27. MOBILE
============================================================ */

@media (max-width: 640px) {
    :root {
        --header-height: 78px;
        --header-height-scrolled: 68px;
        --container-padding: 20px;
    }

    .site-header.is-scrolled,
    .site-header.menu-active {
        background-color:
            rgba(3, 16, 31, 0.9);
    }

    .brand {
        gap: 10px;
    }

    .brand-mark {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

    .brand-name {
        font-size: 16px;
    }

    .brand-description {
        margin-top: 4px;

        font-size: 8px;

        letter-spacing: 0.15em;
    }

    .menu-toggle {
        width: 44px;
        height: 44px;
    }

    .mobile-menu-panel {
        width:
            min(92%, 390px);

        padding:
            calc(var(--header-height) + 24px)
            23px
            24px;
    }

    .mobile-navigation-link {
        min-height: 58px;

        font-size: 16px;
    }

    .hero {
        min-height: 100svh;
    }

    .hero-container {
        min-height: 100svh;

        padding-top:
            calc(
                var(--header-height) + 38px
            );

        padding-bottom: 18px;
    }

    .hero-content {
        align-self: start;

        padding-top: 24px;
        padding-bottom: 34px;
    }

    .hero-slide {
        inset: -1%;

        width: 102%;
        height: 102%;
    }

    .hero-slide img {
        object-position:
            67% center;

        filter:
            saturate(0.72)
            contrast(1.03)
            brightness(0.64);
    }

    .hero-edge-gradient {
        background:
            radial-gradient(
                ellipse 86% 64%
                at 63% 28%,

                rgba(3, 16, 31, 0.12) 0%,
                rgba(3, 16, 31, 0.28) 42%,
                rgba(3, 16, 31, 0.82) 78%,
                rgba(3, 16, 31, 0.99) 100%
            );
    }

    .hero-reading-gradient {
        background:
            linear-gradient(
                90deg,

                rgba(3, 16, 31, 0.95) 0%,
                rgba(3, 16, 31, 0.82) 58%,
                rgba(3, 16, 31, 0.48) 100%
            );
    }

    .hero-vertical-gradient {
        background:
            linear-gradient(
                180deg,

                rgba(3, 16, 31, 0.3) 0%,
                rgba(3, 16, 31, 0.08) 25%,
                rgba(3, 16, 31, 0.42) 62%,
                rgba(3, 16, 31, 0.96) 100%
            );
    }

    .hero-pattern {
        background-size:
            52px 52px;

        opacity: 0.7;
    }

    .hero-eyebrow {
        gap: 11px;

        margin-bottom: 20px;
    }

    .hero-eyebrow-line {
        width: 30px;
    }

    .hero-eyebrow-text {
        font-size: 9px;

        letter-spacing: 0.14em;
    }

    .hero-title {
        max-width: 100%;

        font-size:
            clamp(
                2.65rem,
                13vw,
                4rem
            );

        line-height: 1.01;

        letter-spacing: -0.05em;

        text-wrap: wrap;
    }

    .hero-title span {
        margin-top: 5px;
    }

    .hero-description {
        margin-top: 23px;

        font-size: 0.97rem;
        line-height: 1.7;
    }

    .hero-actions {
        flex-direction: column;

        align-items: stretch;

        gap: 11px;

        width: 100%;

        margin-top: 30px;
    }

    .hero-button {
        width: 100%;

        min-height: 55px;
    }

    .hero-carousel-ui {
        margin-bottom: 13px;
    }

    .hero-carousel-dots {
        gap: 8px;
    }

    .hero-carousel-dot {
        width: 27px;
        height: 27px;

        flex-basis: 27px;
    }

    .hero-carousel-dot-visual {
        width: 14px;
        height: 14px;
    }

    .hero-service-highlights {
        display: grid;

        grid-template-columns:
            1fr;

        width: 100%;

        border-bottom: 0;
    }

    .hero-service-highlight {
        justify-content: center;

        gap: 12px;

        min-height: 56px;

        padding:
            0 12px;

        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.14);
    }

    .hero-service-highlight + .hero-service-highlight::before {
        display: none;
    }

    .hero-service-highlight::after {
        right: 20px;
        left: 20px;
    }

    .highlight-icon {
        width: 24px;
        height: 24px;

        flex-basis: 24px;
    }

    .highlight-text {
        font-size: 9px;
    }

    .hero-side-accent {
        width: 3px;
        height: 100px;
    }

    .hero-main-divider {
        height: 4px;
    }

    .quote-section {
        padding-top: 66px;
        padding-bottom: 76px;
    }

    .quote-section::before {
        height: 150px;
    }

    .quote-section-pattern {
        background-size: 54px 54px;
    }

    .quote-container {
        gap: 42px;
    }

    .quote-eyebrow {
        gap: 11px;

        margin-bottom: 20px;
    }

    .quote-eyebrow-line {
        width: 30px;

        flex-basis: 30px;
    }

    .quote-eyebrow-text {
        font-size: 9px;

        letter-spacing: 0.14em;
    }

    .quote-title {
        font-size:
            clamp(
                2.35rem,
                11vw,
                3.15rem
            );

        line-height: 1.02;
    }

    .quote-description {
        margin-top: 22px;

        font-size: 0.95rem;
        line-height: 1.72;
    }

    .quote-service-points {
        margin-top: 30px;
        padding-top: 25px;
    }

    .quote-location-note {
        margin-top: 27px;
    }

    .quote-form-shell {
        box-shadow:
            0 24px 50px
            rgba(3, 16, 31, 0.12);
    }

    .quote-form-heading {
        padding:
            29px 22px
            25px;
    }

    .quote-form-title {
        font-size: 1.75rem;
    }

    .quote-form-description {
        font-size: 11px;
    }

    .quote-form {
        padding:
            27px 22px
            28px;
    }

    .quote-form-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .quote-field-full {
        grid-column: auto;
    }

    .quote-input,
    .quote-select {
        min-height: 52px;
    }

    .quote-textarea {
        min-height: 160px;
    }

    .quote-submit {
        min-height: 56px;

        margin-top: 22px;
    }
}


/* ============================================================
   28. SMALL MOBILE
============================================================ */

@media (max-width: 390px) {
    :root {
        --container-padding: 17px;
    }

    .brand-description {
        max-width: 118px;

        white-space: nowrap;
        overflow: hidden;

        text-overflow: ellipsis;
    }

    .hero-container {
        padding-top:
            calc(
                var(--header-height) + 34px
            );
    }

    .hero-title {
        font-size:
            clamp(
                2.4rem,
                12.5vw,
                3.1rem
            );
    }

    .hero-description {
        font-size: 0.92rem;
    }

    .hero-button {
        padding-right: 17px;
        padding-left: 17px;

        font-size: 10px;
    }

    .quote-section {
        padding-top: 58px;
        padding-bottom: 68px;
    }

    .quote-title {
        font-size:
            clamp(
                2.05rem,
                10.5vw,
                2.55rem
            );
    }

    .quote-service-point {
        align-items: flex-start;

        font-size: 11px;
    }

    .quote-service-point-mark {
        margin-top: 1px;
    }

    .quote-location-note {
        align-items: flex-start;

        font-size: 9px;
    }

    .quote-form-heading {
        padding-right: 18px;
        padding-left: 18px;
    }

    .quote-form {
        padding-right: 18px;
        padding-left: 18px;
    }

    .quote-submit {
        padding-right: 16px;
        padding-left: 16px;

        font-size: 9px;
    }
}


/* ============================================================
   29. SHORT DESKTOP AND TABLET VIEWPORTS
============================================================ */

@media
(max-height: 800px)
and
(min-width: 641px) {
    .hero-container {
        min-height: 760px;

        padding-top:
            calc(
                var(--header-height) + 36px
            );

        padding-bottom: 22px;
    }

    .hero-content {
        padding-top: 22px;
        padding-bottom: 28px;
    }

    .hero-eyebrow {
        margin-bottom: 18px;
    }

    .hero-title {
        font-size:
            clamp(
                3rem,
                5vw,
                4.8rem
            );
    }

    .hero-description {
        margin-top: 20px;

        line-height: 1.65;
    }

    .hero-actions {
        margin-top: 25px;
    }

    .hero-service-highlight {
        min-height: 68px;
    }
}


/* ============================================================
   30. TOUCH DEVICES
============================================================ */

@media (hover: none) {
    .header-cta:hover,
    .hero-button-primary:hover,
    .hero-button-secondary:hover {
        transform: none;
    }

    .hero-service-highlight:hover {
        background-color: transparent;
    }
}


/* ============================================================
   31. REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

    .hero-slide {
        transform:
            none !important;
    }

    .hero-reveal {
        opacity: 1;

        transform: none;
    }
}

/* ============================================================
   32. HERO TITLE LINE ALIGNMENT ENHANCEMENT
   Added without removing or replacing any existing rules.

   Expected HTML structure:

   <h1 class="hero-title ...">
       <span class="hero-title-line">Elevated cleaning</span>
       <span class="hero-title-line">for spaces that</span>
       <span class="hero-title-line hero-title-outline">demand more.</span>
   </h1>
============================================================ */

.hero-title {
    width: 100%;
    max-width: 900px;

    text-align: left;
    text-wrap: initial;
}

.hero-title-line {
    display: block;

    width: fit-content;
    max-width: 100%;

    color:
        var(--color-white);

    white-space: nowrap;
}

.hero-title-line + .hero-title-line {
    margin-top: 4px;
}

.hero-title-outline {
    margin-top: 8px;

    color: transparent;

    -webkit-text-stroke:
        1px
        rgba(255, 255, 255, 0.8);

    text-stroke:
        1px
        rgba(255, 255, 255, 0.8);
}


/* ============================================================
   33. TABLET TITLE LINE ALIGNMENT
============================================================ */

@media (max-width: 820px) {
    .hero-title {
        width: 100%;
        max-width: 100%;

        text-align: left;
        text-wrap: initial;
    }

    .hero-title-line {
        width: fit-content;
        max-width: 100%;

        white-space: nowrap;
    }
}


/* ============================================================
   34. MOBILE TITLE LINE ALIGNMENT
============================================================ */

@media (max-width: 640px) {
    .hero-title {
        width: 100%;
        max-width: 100%;

        font-size:
            clamp(
                1.9rem,
                9.3vw,
                3.85rem
            );

        line-height: 1.03;

        letter-spacing: -0.045em;

        text-align: left;
        text-wrap: initial;
    }

    .hero-title-line {
        display: block;

        width: fit-content;
        max-width: 100%;

        color:
            var(--color-white);

        white-space: nowrap;
    }

    .hero-title-line + .hero-title-line {
        margin-top: 4px;
    }

    .hero-title-outline {
        margin-top: 8px;

        color: transparent;

        -webkit-text-stroke:
            1px
            rgba(255, 255, 255, 0.8);

        text-stroke:
            1px
            rgba(255, 255, 255, 0.8);
    }

    .hero-description {
        width: 100%;
        max-width: 100%;

        margin-top: 25px;

        text-align: left;
        text-wrap: pretty;
    }
}


/* ============================================================
   35. SMALL MOBILE TITLE SAFETY
============================================================ */

@media (max-width: 390px) {
    .hero-title {
        font-size:
            clamp(
                1.82rem,
                9.15vw,
                2.25rem
            );

        letter-spacing: -0.04em;
    }

    .hero-title-line + .hero-title-line {
        margin-top: 3px;
    }

    .hero-title-outline {
        margin-top: 7px;
    }
}
/* ============================================================
   36. CUSTOM PREMIUM SCROLLBAR
============================================================ */

/*
   Keeps the page width visually stable when the vertical
   scrollbar appears or disappears.
*/
html {
    scrollbar-gutter: stable;

    /*
       Firefox
    */
    scrollbar-width: thin;

    scrollbar-color:
        var(--color-red-500)
        var(--color-navy-1000);
}


/* ============================================================
   WEBKIT / CHROMIUM SCROLLBAR
   Chrome, Edge, Safari, Opera
============================================================ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}


/* Scrollbar background track */

::-webkit-scrollbar-track {
    background:
        linear-gradient(
            180deg,
            var(--color-navy-1000) 0%,
            var(--color-navy-950) 100%
        );
}


/* Main scrollbar thumb */

::-webkit-scrollbar-thumb {
    min-height: 50px;

    background:
        linear-gradient(
            180deg,
            var(--color-red-400) 0%,
            var(--color-red-500) 45%,
            var(--color-red-600) 100%
        );

    border:
        2px solid
        var(--color-navy-1000);

    border-radius: 999px;

    box-shadow:
        0 0 8px
        rgba(223, 23, 56, 0.18);

    transition:
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}


/* Hover state */

::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            var(--color-red-400) 0%,
            var(--color-red-500) 35%,
            var(--color-red-500) 100%
        );

    box-shadow:
        0 0 12px
        rgba(223, 23, 56, 0.34);
}


/* Active / dragging state */

::-webkit-scrollbar-thumb:active {
    background:
        var(--color-red-600);

    box-shadow:
        0 0 14px
        rgba(200, 16, 46, 0.42);
}


/* Corner where horizontal and vertical scrollbars meet */

::-webkit-scrollbar-corner {
    background:
        var(--color-navy-1000);
}
/* ============================================================
   WHY VIANNA
   Premium company positioning section
============================================================ */

.why-section {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding:
        118px 0
        124px;

    color:
        var(--color-white);

    background:
        linear-gradient(
            135deg,
            var(--color-navy-1000) 0%,
            var(--color-navy-950) 48%,
            var(--color-navy-900) 100%
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.05);
}


/* ============================================================
   SECTION TOP LIGHT
============================================================ */

.why-section::before {
    content: "";

    position: absolute;

    z-index: -3;

    top: 0;
    right: 0;
    left: 0;

    height: 1px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.06) 24%,
            rgba(223, 23, 56, 0.42) 50%,
            rgba(255, 255, 255, 0.06) 76%,
            transparent 100%
        );
}


/* ============================================================
   LARGE BACKGROUND GLOW
============================================================ */

.why-section::after {
    content: "";

    position: absolute;

    z-index: -3;

    top: -310px;
    right: -240px;

    width: 850px;
    height: 850px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(22, 60, 99, 0.28) 0%,
            rgba(10, 33, 59, 0.13) 36%,
            rgba(3, 16, 31, 0) 72%
        );

    border-radius: 50%;
}


/* ============================================================
   BACKGROUND GRID
============================================================ */

.why-pattern {
    position: absolute;

    z-index: -2;

    inset: 0;

    pointer-events: none;

    opacity: 0.52;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size:
        74px 74px;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.48) 45%,
            rgba(0, 0, 0, 0.18) 75%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.48) 45%,
            rgba(0, 0, 0, 0.18) 75%,
            transparent 100%
        );
}


/* ============================================================
   SECONDARY RED GLOW
============================================================ */

.why-glow {
    position: absolute;

    z-index: -2;

    bottom: -330px;
    left: -270px;

    width: 680px;
    height: 680px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(200, 16, 46, 0.09) 0%,
            rgba(200, 16, 46, 0.035) 35%,
            transparent 70%
        );

    border-radius: 50%;
}


/* ============================================================
   RIGHT SIDE RED ACCENT
============================================================ */

.why-side-accent {
    position: absolute;

    z-index: 3;

    top: 50%;
    right: 0;

    width: 3px;
    height: 150px;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            var(--color-red-600) 22%,
            var(--color-red-500) 78%,
            transparent 100%
        );

    transform:
        translateY(-50%);
}


/* ============================================================
   WHY VIANNA CONTAINER
============================================================ */

.why-container {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    gap:
        72px 86px;

    width:
        min(
            calc(
                100% -
                (var(--container-padding) * 2)
            ),
            var(--container-width)
        );

    margin:
        0 auto;
}


/* ============================================================
   INTRODUCTION
============================================================ */

.why-intro {
    width: 100%;
    max-width: 555px;
}


/* ============================================================
   EYEBROW
============================================================ */

.why-eyebrow {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 27px;
}

.why-eyebrow-line {
    display: block;

    width: 43px;
    height: 2px;

    flex:
        0 0 43px;

    background-color:
        var(--color-red-500);
}

.why-eyebrow-text {
    color:
        rgba(255, 255, 255, 0.72);

    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


/* ============================================================
   TITLE
============================================================ */

.why-title {
    max-width: 590px;

    margin: 0;

    color:
        var(--color-white);

    font-size:
        clamp(
            3rem,
            4.25vw,
            4.45rem
        );

    font-weight: 700;
    line-height: 1;

    letter-spacing:
        -0.055em;

    text-wrap: balance;
}


/* ============================================================
   DESCRIPTION
============================================================ */

.why-description {
    max-width: 555px;

    margin-top: 30px;

    color:
        rgba(255, 255, 255, 0.64);

    font-size:
        clamp(
            1rem,
            1.2vw,
            1.08rem
        );

    font-weight: 400;
    line-height: 1.82;

    letter-spacing:
        -0.012em;
}


/* ============================================================
   POSITIONING POINTS
============================================================ */

.why-positioning {
    display: grid;

    gap: 14px;

    margin-top: 38px;

    padding:
        29px 0
        2px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.12);
}

.why-positioning-item {
    display: flex;

    align-items: center;

    gap: 13px;

    color:
        rgba(255, 255, 255, 0.78);

    font-size: 11px;
    font-weight: 650;
    line-height: 1.45;

    letter-spacing:
        0.025em;
}

.why-positioning-mark {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    flex:
        0 0 18px;

    border:
        1px solid
        rgba(223, 23, 56, 0.46);

    border-radius: 50%;
}

.why-positioning-mark::after {
    content: "";

    width: 5px;
    height: 5px;

    background-color:
        var(--color-red-500);

    border-radius: 50%;
}


/* ============================================================
   ABOUT LINK
============================================================ */

.why-link {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 15px;

    min-height: 53px;

    margin-top: 39px;

    padding:
        0 22px;

    overflow: hidden;

    color:
        var(--color-white);

    background-color:
        transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.28);

    font-size: 10px;
    font-weight: 750;
    line-height: 1;

    letter-spacing:
        0.08em;

    text-transform: uppercase;

    transition:
        color var(--transition-medium),
        background-color var(--transition-medium),
        border-color var(--transition-medium),
        transform var(--transition-fast),
        box-shadow var(--transition-medium);
}

.why-link::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 18%,
            rgba(255, 255, 255, 0.14) 50%,
            transparent 82%
        );

    transform:
        translateX(-140%);

    transition:
        transform
        680ms
        var(--ease-premium);
}

.why-link > * {
    position: relative;

    z-index: 2;
}

.why-link svg {
    width: 17px;
    height: 17px;

    transition:
        transform var(--transition-medium);
}

.why-link:hover {
    color:
        var(--color-navy-950);

    background-color:
        var(--color-white);

    border-color:
        var(--color-white);

    box-shadow:
        0 16px 34px
        rgba(0, 0, 0, 0.2);

    transform:
        translateY(-2px);
}

.why-link:hover::before {
    transform:
        translateX(140%);
}

.why-link:hover svg {
    transform:
        translateX(4px);
}


/* ============================================================
   PILLAR GRID
============================================================ */

.why-pillars {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 18px;

    align-self: start;
}


/* ============================================================
   PILLAR CARD
============================================================ */

.why-pillar {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;
    min-height: 270px;

    padding:
        31px 30px
        30px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055) 0%,
            rgba(255, 255, 255, 0.024) 100%
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.105);

    transition:
        background-color var(--transition-medium),
        border-color var(--transition-medium),
        transform var(--transition-medium),
        box-shadow var(--transition-medium);
}

.why-pillar::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--color-red-700) 0%,
            var(--color-red-500) 100%
        );

    transition:
        width
        520ms
        var(--ease-premium);
}


/* ============================================================
   PILLAR TOP
============================================================ */

.why-pillar-top {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 40px;
}

.why-pillar-number {
    color:
        var(--color-red-400);

    font-size: 9px;
    font-weight: 800;
    line-height: 1;

    letter-spacing:
        0.14em;
}

.why-pillar-line {
    display: block;

    width: 31px;
    height: 1px;

    background-color:
        rgba(255, 255, 255, 0.19);

    transition:
        width var(--transition-medium),
        background-color var(--transition-medium);
}


/* ============================================================
   PILLAR TYPOGRAPHY
============================================================ */

.why-pillar-title {
    max-width: 300px;

    margin:
        auto 0 0;

    color:
        var(--color-white);

    font-size:
        clamp(
            1.25rem,
            1.6vw,
            1.55rem
        );

    font-weight: 700;
    line-height: 1.15;

    letter-spacing:
        -0.035em;
}

.why-pillar-description {
    max-width: 390px;

    margin-top: 17px;

    color:
        rgba(255, 255, 255, 0.56);

    font-size: 11px;
    font-weight: 450;
    line-height: 1.75;

    letter-spacing:
        -0.005em;
}


/* ============================================================
   DECORATIVE CARD CORNER
============================================================ */

.why-pillar-corner {
    position: absolute;

    right: -1px;
    bottom: -1px;

    width: 25px;
    height: 25px;

    pointer-events: none;

    border-right:
        1px solid
        rgba(223, 23, 56, 0.4);

    border-bottom:
        1px solid
        rgba(223, 23, 56, 0.4);

    opacity: 0.6;

    transition:
        width var(--transition-medium),
        height var(--transition-medium),
        opacity var(--transition-medium);
}


/* ============================================================
   PILLAR HOVER
============================================================ */

@media (hover: hover) {

    .why-pillar:hover {
        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.075) 0%,
                rgba(255, 255, 255, 0.035) 100%
            );

        border-color:
            rgba(255, 255, 255, 0.18);

        box-shadow:
            0 24px 46px
            rgba(0, 0, 0, 0.16);

        transform:
            translateY(-4px);
    }

    .why-pillar:hover::before {
        width: 100%;
    }

    .why-pillar:hover .why-pillar-line {
        width: 43px;

        background-color:
            rgba(223, 23, 56, 0.7);
    }

    .why-pillar:hover .why-pillar-corner {
        width: 38px;
        height: 38px;

        opacity: 1;
    }
}


/* ============================================================
   THE VIANNA STANDARD
============================================================ */

.why-standard {
    grid-column:
        1 / -1;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    align-items: center;

    gap: 34px;

    margin-top: 2px;

    padding:
        26px 30px;

    background:
        rgba(255, 255, 255, 0.028);

    border-top:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);
}

.why-standard-label {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    white-space: nowrap;

    color:
        rgba(255, 255, 255, 0.75);

    font-size: 9px;
    font-weight: 800;
    line-height: 1.4;

    letter-spacing:
        0.16em;

    text-transform: uppercase;
}

.why-standard-dot {
    width: 6px;
    height: 6px;

    flex:
        0 0 6px;

    background-color:
        var(--color-red-500);

    border-radius: 50%;

    box-shadow:
        0 0 12px
        rgba(223, 23, 56, 0.5);
}

.why-standard-text {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.55);

    font-size: 11px;
    font-weight: 500;
    line-height: 1.65;

    text-align: right;
}


/* ============================================================
   WHY VIANNA - MEDIUM DESKTOP / TABLET LANDSCAPE
============================================================ */

@media (max-width: 1100px) {

    .why-section {
        padding-top: 104px;
        padding-bottom: 110px;
    }

    .why-container {
        grid-template-columns:
            1fr;

        gap: 58px;
    }

    .why-intro {
        max-width: 760px;
    }

    .why-title {
        max-width: 750px;
    }

    .why-description {
        max-width: 690px;
    }

    .why-positioning {
        max-width: 620px;
    }

    .why-pillars {
        width: 100%;
    }

    .why-pillar {
        min-height: 250px;
    }
}


/* ============================================================
   WHY VIANNA - TABLET PORTRAIT
============================================================ */

@media (max-width: 820px) {

    .why-section {
        padding-top: 88px;
        padding-bottom: 96px;
    }

    .why-container {
        gap: 49px;
    }

    .why-title {
        max-width: 670px;

        font-size:
            clamp(
                2.75rem,
                8vw,
                3.8rem
            );
    }

    .why-description {
        max-width: 650px;
    }

    .why-pillars {
        gap: 15px;
    }

    .why-pillar {
        min-height: 240px;

        padding:
            28px 26px
            27px;
    }

    .why-pillar-top {
        margin-bottom: 34px;
    }

    .why-standard {
        grid-template-columns:
            1fr;

        gap: 13px;
    }

    .why-standard-text {
        max-width: 650px;

        text-align: left;
    }
}


/* ============================================================
   WHY VIANNA - MOBILE
============================================================ */

@media (max-width: 640px) {

    .why-section {
        padding-top: 70px;
        padding-bottom: 76px;
    }

    .why-section::after {
        top: -220px;
        right: -360px;

        width: 650px;
        height: 650px;
    }

    .why-pattern {
        background-size:
            52px 52px;

        opacity: 0.44;
    }

    .why-side-accent {
        height: 100px;
    }

    .why-container {
        gap: 42px;
    }

    .why-eyebrow {
        gap: 11px;

        margin-bottom: 20px;
    }

    .why-eyebrow-line {
        width: 30px;

        flex-basis: 30px;
    }

    .why-eyebrow-text {
        font-size: 9px;

        letter-spacing: 0.14em;
    }

    .why-title {
        max-width: 100%;

        font-size:
            clamp(
                2.35rem,
                11vw,
                3.15rem
            );

        line-height: 1.02;
    }

    .why-description {
        max-width: 100%;

        margin-top: 22px;

        font-size: 0.95rem;
        line-height: 1.72;
    }

    .why-positioning {
        gap: 13px;

        margin-top: 30px;

        padding-top: 25px;
    }

    .why-positioning-item {
        align-items: flex-start;

        font-size: 11px;
    }

    .why-positioning-mark {
        margin-top: 1px;
    }

    .why-link {
        width: 100%;

        min-height: 55px;

        margin-top: 32px;
    }

    .why-pillars {
        grid-template-columns:
            1fr;

        gap: 13px;
    }

    .why-pillar {
        min-height: auto;

        padding:
            27px 24px
            28px;
    }

    .why-pillar-top {
        margin-bottom: 32px;
    }

    .why-pillar-title {
        max-width: 100%;

        margin-top: 0;

        font-size: 1.4rem;
    }

    .why-pillar-description {
        max-width: 100%;

        margin-top: 14px;

        font-size: 11px;
        line-height: 1.7;
    }

    .why-standard {
        gap: 14px;

        padding:
            23px 21px;
    }

    .why-standard-label {
        white-space: normal;
    }

    .why-standard-text {
        font-size: 10px;
    }
}


/* ============================================================
   WHY VIANNA - SMALL MOBILE
============================================================ */

@media (max-width: 390px) {

    .why-section {
        padding-top: 61px;
        padding-bottom: 68px;
    }

    .why-title {
        font-size:
            clamp(
                2.05rem,
                10.5vw,
                2.55rem
            );
    }

    .why-description {
        font-size: 0.92rem;
    }

    .why-pillar {
        padding:
            25px 21px
            26px;
    }

    .why-pillar-top {
        margin-bottom: 28px;
    }

    .why-standard {
        padding:
            21px 18px;
    }
}


/* ============================================================
   WHY VIANNA - TOUCH DEVICES
============================================================ */

@media (hover: none) {

    .why-link:hover {
        color:
            var(--color-white);

        background-color:
            transparent;

        border-color:
            rgba(255, 255, 255, 0.28);

        box-shadow:
            none;

        transform:
            none;
    }
}


/* ============================================================
   WHY VIANNA - REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .why-link,
    .why-link::before,
    .why-link svg,
    .why-pillar,
    .why-pillar::before,
    .why-pillar-line,
    .why-pillar-corner {
        transition:
            none !important;
    }
}
/* ============================================================
   SERVICES OVERVIEW
============================================================ */

.services-overview {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding:
        118px 0
        126px;

    color:
        var(--color-ink-strong);

    color-scheme: light;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            var(--color-surface-page-bottom) 45%,
            var(--color-surface-page) 100%
        );
}


/* ============================================================
   SERVICES DECORATIVE BACKGROUND
============================================================ */

.services-overview::before {
    content: "";

    position: absolute;

    z-index: -2;

    top: -290px;
    left: -260px;

    width: 720px;
    height: 720px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(22, 60, 99, 0.09) 0%,
            rgba(22, 60, 99, 0.035) 38%,
            transparent 72%
        );

    border-radius: 50%;
}

.services-overview-pattern {
    position: absolute;

    z-index: -1;

    inset: 0;

    pointer-events: none;

    opacity: 0.32;

    background-image:
        linear-gradient(
            rgba(7, 26, 47, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(7, 26, 47, 0.035) 1px,
            transparent 1px
        );

    background-size:
        74px 74px;

    -webkit-mask-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.1) 62%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.1) 62%,
            transparent 100%
        );
}


/* ============================================================
   SERVICES CONTAINER
============================================================ */

.services-overview-container {
    position: relative;

    z-index: 2;

    width:
        min(
            calc(
                100% -
                (var(--container-padding) * 2)
            ),
            var(--container-width)
        );

    margin:
        0 auto;
}


/* ============================================================
   SERVICES HEADER
============================================================ */

.services-overview-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.22fr)
        minmax(300px, 0.78fr);

    align-items: end;

    gap: 76px;

    margin-bottom: 64px;

    padding-bottom: 44px;

    border-bottom:
        1px solid
        rgba(7, 26, 47, 0.13);
}

.services-overview-heading {
    max-width: 760px;
}


/* ============================================================
   SERVICES EYEBROW
============================================================ */

.services-overview-eyebrow {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 27px;
}

.services-overview-eyebrow-line {
    display: block;

    width: 43px;
    height: 2px;

    flex:
        0 0 43px;

    background-color:
        var(--color-red-500);
}

.services-overview-eyebrow-text {
    color:
        var(--color-red-600);

    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;

    letter-spacing:
        0.18em;

    text-transform: uppercase;
}


/* ============================================================
   SERVICES TITLE
============================================================ */

.services-overview-title {
    max-width: 760px;

    margin: 0;

    color:
        var(--color-ink-strong);

    font-size:
        clamp(
            3rem,
            4.3vw,
            4.5rem
        );

    font-weight: 700;
    line-height: 1;

    letter-spacing:
        -0.055em;

    text-wrap: balance;
}


/* ============================================================
   SERVICES INTRODUCTION
============================================================ */

.services-overview-intro {
    align-self: end;
}

.services-overview-intro p {
    max-width: 470px;

    margin: 0;

    color:
        var(--color-ink-soft);

    font-size:
        0.98rem;

    font-weight: 400;
    line-height: 1.75;
}


/* ============================================================
   SERVICES MAIN LINK
============================================================ */

.services-overview-link {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    margin-top: 27px;

    padding-bottom: 8px;

    color:
        var(--color-ink-strong);

    border-bottom:
        1px solid
        rgba(7, 26, 47, 0.25);

    font-size: 10px;
    font-weight: 800;
    line-height: 1;

    letter-spacing:
        0.09em;

    text-transform: uppercase;

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.services-overview-link svg {
    width: 17px;
    height: 17px;

    color:
        var(--color-red-500);

    transition:
        transform var(--transition-medium);
}

.services-overview-link:hover,
.services-overview-link:focus-visible {
    color:
        var(--color-red-600);

    border-color:
        var(--color-red-500);
}

.services-overview-link:hover svg,
.services-overview-link:focus-visible svg {
    transform:
        translateX(4px);
}


/* ============================================================
   SERVICES GRID
============================================================ */

.services-overview-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        rgba(7, 26, 47, 0.13);

    border-left:
        1px solid
        rgba(7, 26, 47, 0.13);
}


/* ============================================================
   SERVICE CARD
============================================================ */

.service-overview-card {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;
    min-height: 365px;

    padding:
        29px 27px
        27px;

    overflow: hidden;

    color:
        var(--color-ink-strong);

    background:
        rgba(255, 255, 255, 0.48);

    border-right:
        1px solid
        rgba(7, 26, 47, 0.13);

    border-bottom:
        1px solid
        rgba(7, 26, 47, 0.13);

    transition:
        color var(--transition-medium),
        background-color var(--transition-medium),
        box-shadow var(--transition-medium),
        transform var(--transition-medium);
}

.service-overview-card::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--color-red-700),
            var(--color-red-500)
        );

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform
        480ms
        var(--ease-premium);
}


/* ============================================================
   CARD TOP
============================================================ */

.service-overview-card-top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.service-overview-number {
    color:
        #8190a0;

    font-size: 9px;
    font-weight: 800;

    letter-spacing:
        0.14em;
}

.service-overview-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    flex:
        0 0 44px;

    color:
        var(--color-red-500);

    background:
        rgba(223, 23, 56, 0.055);

    border:
        1px solid
        rgba(223, 23, 56, 0.18);

    transition:
        color var(--transition-medium),
        background-color var(--transition-medium),
        border-color var(--transition-medium),
        transform var(--transition-medium);
}

.service-overview-icon svg {
    width: 23px;
    height: 23px;
}


/* ============================================================
   SERVICE CARD CONTENT
============================================================ */

.service-overview-card-content {
    margin-top: auto;
}

.service-overview-card-content h3 {
    max-width: 260px;

    margin: 0;

    color:
        var(--color-ink-strong);

    font-size:
        1.25rem;

    font-weight: 750;
    line-height: 1.17;

    letter-spacing:
        -0.035em;

    transition:
        color var(--transition-medium);
}

.service-overview-card-content p {
    margin-top: 14px;

    color:
        var(--color-ink-soft);

    font-size: 10px;
    font-weight: 450;
    line-height: 1.7;

    transition:
        color var(--transition-medium);
}


/* ============================================================
   SERVICE CARD FOOTER
============================================================ */

.service-overview-card-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 27px;

    padding-top: 18px;

    color:
        #536578;

    border-top:
        1px solid
        rgba(7, 26, 47, 0.1);

    font-size: 8px;
    font-weight: 800;
    line-height: 1;

    letter-spacing:
        0.11em;

    text-transform: uppercase;

    transition:
        color var(--transition-medium),
        border-color var(--transition-medium);
}

.service-overview-card-footer svg {
    width: 16px;
    height: 16px;

    color:
        var(--color-red-500);

    transition:
        color var(--transition-medium),
        transform var(--transition-medium);
}


/* ============================================================
   FEATURED CUSTOM PLAN CARD
============================================================ */

.service-overview-card-featured {
    background:
        linear-gradient(
            145deg,
            var(--color-navy-900) 0%,
            var(--color-navy-950) 100%
        );
}

.service-overview-card-featured .service-overview-number {
    color:
        rgba(255, 255, 255, 0.42);
}

.service-overview-card-featured .service-overview-icon {
    color:
        var(--color-red-400);

    background:
        rgba(223, 23, 56, 0.09);

    border-color:
        rgba(223, 23, 56, 0.26);
}

.service-overview-card-featured
.service-overview-card-content h3 {
    color:
        var(--color-white);
}

.service-overview-card-featured
.service-overview-card-content p {
    color:
        rgba(255, 255, 255, 0.57);
}

.service-overview-card-featured
.service-overview-card-footer {
    color:
        rgba(255, 255, 255, 0.59);

    border-top-color:
        rgba(255, 255, 255, 0.11);
}


/* ============================================================
   SERVICE CARD HOVER
============================================================ */

@media (hover: hover) {

    .service-overview-card:hover {
        z-index: 2;

        background-color:
            var(--color-white);

        box-shadow:
            0 24px 55px
            rgba(3, 16, 31, 0.11);

        transform:
            translateY(-4px);
    }

    .service-overview-card:hover::before {
        transform:
            scaleX(1);
    }

    .service-overview-card:hover
    .service-overview-icon {
        color:
            var(--color-white);

        background-color:
            var(--color-red-500);

        border-color:
            var(--color-red-500);

        transform:
            translateY(-3px);
    }

    .service-overview-card:hover
    .service-overview-card-footer {
        color:
            var(--color-red-600);

        border-top-color:
            rgba(223, 23, 56, 0.18);
    }

    .service-overview-card:hover
    .service-overview-card-footer svg {
        transform:
            translateX(4px);
    }


    .service-overview-card-featured:hover {
        background:
            linear-gradient(
                145deg,
                var(--color-navy-850) 0%,
                var(--color-navy-950) 100%
            );
    }

    .service-overview-card-featured:hover
    .service-overview-card-content h3 {
        color:
            var(--color-white);
    }

    .service-overview-card-featured:hover
    .service-overview-card-content p {
        color:
            rgba(255, 255, 255, 0.68);
    }

    .service-overview-card-featured:hover
    .service-overview-card-footer {
        color:
            var(--color-white);

        border-top-color:
            rgba(255, 255, 255, 0.17);
    }
}
/* ============================================================
   INDUSTRIES WE SERVE
============================================================ */

.industries-section {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding:
        116px 0
        118px;

    color:
        var(--color-white);

    background:
        linear-gradient(
            135deg,
            var(--color-navy-1000) 0%,
            var(--color-navy-950) 54%,
            #06182b 100%
        );
}


/* ============================================================
   INDUSTRIES BACKGROUND
============================================================ */

.industries-section::before {
    content: "";

    position: absolute;

    z-index: -3;

    top: 0;
    right: 0;
    left: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(223, 23, 56, 0.5),
            transparent
        );
}

.industries-pattern {
    position: absolute;

    z-index: -2;

    inset: 0;

    pointer-events: none;

    opacity: 0.45;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px
        );

    background-size:
        74px 74px;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 0, 0, 0.5) 35%,
            rgba(0, 0, 0, 0.78) 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 0, 0, 0.5) 35%,
            rgba(0, 0, 0, 0.78) 100%
        );
}

.industries-glow {
    position: absolute;

    z-index: -2;

    top: -320px;
    right: -240px;

    width: 760px;
    height: 760px;

    background:
        radial-gradient(
            circle,
            rgba(22, 60, 99, 0.32) 0%,
            rgba(22, 60, 99, 0.1) 42%,
            transparent 70%
        );

    border-radius: 50%;

    pointer-events: none;
}


/* ============================================================
   INDUSTRIES CONTAINER
============================================================ */

.industries-container {
    position: relative;

    z-index: 2;

    width:
        min(
            calc(
                100% -
                (var(--container-padding) * 2)
            ),
            var(--container-width)
        );

    margin:
        0 auto;
}


/* ============================================================
   INDUSTRIES HEADER
============================================================ */

.industries-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(300px, 0.75fr);

    align-items: end;

    gap: 75px;

    margin-bottom: 61px;
}

.industries-heading {
    max-width: 790px;
}


/* ============================================================
   INDUSTRIES EYEBROW
============================================================ */

.industries-eyebrow {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 27px;
}

.industries-eyebrow-line {
    display: block;

    width: 43px;
    height: 2px;

    flex:
        0 0 43px;

    background-color:
        var(--color-red-500);
}

.industries-eyebrow-text {
    color:
        rgba(255, 255, 255, 0.68);

    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;

    letter-spacing:
        0.18em;

    text-transform: uppercase;
}


/* ============================================================
   INDUSTRIES TITLE
============================================================ */

.industries-title {
    max-width: 790px;

    margin: 0;

    color:
        var(--color-white);

    font-size:
        clamp(
            3rem,
            4.25vw,
            4.45rem
        );

    font-weight: 700;
    line-height: 1;

    letter-spacing:
        -0.055em;

    text-wrap: balance;
}

.industries-description {
    max-width: 470px;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.59);

    font-size:
        0.98rem;

    line-height: 1.75;
}


/* ============================================================
   INDUSTRIES GRID
============================================================ */

.industries-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-left:
        1px solid
        rgba(255, 255, 255, 0.12);
}


/* ============================================================
   INDUSTRY CARD
============================================================ */

.industry-card {
    position: relative;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    grid-template-rows:
        auto
        1fr;

    gap:
        33px 22px;

    min-width: 0;
    min-height: 270px;

    padding:
        29px 28px
        31px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.022);

    border-right:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.12);

    transition:
        background-color var(--transition-medium),
        transform var(--transition-medium);
}

.industry-card::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background:
        var(--color-red-500);

    transition:
        width
        480ms
        var(--ease-premium);
}


/* ============================================================
   INDUSTRY NUMBER
============================================================ */

.industry-card-number {
    align-self: start;

    color:
        rgba(255, 255, 255, 0.29);

    font-size: 9px;
    font-weight: 800;

    letter-spacing:
        0.14em;
}


/* ============================================================
   INDUSTRY ICON
============================================================ */

.industry-card-icon {
    justify-self: end;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    color:
        var(--color-red-400);

    border:
        1px solid
        rgba(223, 23, 56, 0.28);

    transition:
        color var(--transition-medium),
        background-color var(--transition-medium),
        border-color var(--transition-medium),
        transform var(--transition-medium);
}

.industry-card-icon svg {
    width: 23px;
    height: 23px;
}


/* ============================================================
   INDUSTRY CONTENT
============================================================ */

.industry-card-content {
    grid-column:
        1 / -1;

    align-self: end;
}

.industry-card-content h3 {
    margin: 0;

    color:
        var(--color-white);

    font-size:
        1.3rem;

    font-weight: 700;
    line-height: 1.16;

    letter-spacing:
        -0.035em;
}

.industry-card-content p {
    max-width: 335px;

    margin-top: 13px;

    color:
        rgba(255, 255, 255, 0.53);

    font-size: 10px;
    font-weight: 450;
    line-height: 1.7;
}


/* ============================================================
   INDUSTRY HOVER
============================================================ */

@media (hover: hover) {

    .industry-card:hover {
        background-color:
            rgba(255, 255, 255, 0.052);

        transform:
            translateY(-3px);
    }

    .industry-card:hover::after {
        width: 100%;
    }

    .industry-card:hover
    .industry-card-icon {
        color:
            var(--color-white);

        background-color:
            var(--color-red-500);

        border-color:
            var(--color-red-500);

        transform:
            translateY(-3px);
    }
}


/* ============================================================
   INDUSTRIES FOOTER
============================================================ */

.industries-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 42px;

    margin-top: 47px;

    padding-top: 35px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.11);
}

.industries-footer-copy {
    max-width: 650px;
}

.industries-footer-label {
    display: block;

    margin-bottom: 8px;

    color:
        var(--color-white);

    font-size: 11px;
    font-weight: 750;

    letter-spacing:
        -0.01em;
}

.industries-footer-copy p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.5);

    font-size: 11px;
    line-height: 1.65;
}


/* ============================================================
   INDUSTRIES CTA
============================================================ */

.industries-cta {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 15px;

    min-height: 54px;

    padding:
        0 23px;

    flex:
        0 0 auto;

    overflow: hidden;

    color:
        var(--color-white);

    background-color:
        var(--color-red-600);

    border:
        1px solid
        var(--color-red-600);

    font-size: 10px;
    font-weight: 750;
    line-height: 1;

    letter-spacing:
        0.08em;

    text-transform: uppercase;

    transition:
        color var(--transition-medium),
        background-color var(--transition-medium),
        border-color var(--transition-medium),
        transform var(--transition-fast);
}

.industries-cta span,
.industries-cta svg {
    position: relative;

    z-index: 2;
}

.industries-cta svg {
    width: 17px;
    height: 17px;

    transition:
        transform var(--transition-medium);
}

.industries-cta:hover {
    color:
        var(--color-navy-950);

    background-color:
        var(--color-white);

    border-color:
        var(--color-white);

    transform:
        translateY(-2px);
}

.industries-cta:hover svg {
    transform:
        translateX(4px);
}


/* ============================================================
   SERVICES + INDUSTRIES
   TABLET / SMALL DESKTOP
============================================================ */

@media (max-width: 1020px) {

    .services-overview {
        padding-top: 100px;
        padding-bottom: 108px;
    }

    .services-overview-header {
        grid-template-columns:
            1fr;

        gap: 28px;

        margin-bottom: 51px;
    }

    .services-overview-intro p {
        max-width: 690px;
    }

    .services-overview-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .service-overview-card {
        min-height: 330px;
    }


    .industries-section {
        padding-top: 100px;
        padding-bottom: 105px;
    }

    .industries-header {
        grid-template-columns:
            1fr;

        gap: 28px;

        margin-bottom: 51px;
    }

    .industries-description {
        max-width: 680px;
    }

    .industries-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/* ============================================================
   SERVICES + INDUSTRIES
   TABLET PORTRAIT
============================================================ */

@media (max-width: 820px) {

    .services-overview {
        padding-top: 86px;
        padding-bottom: 94px;
    }

    .services-overview-title,
    .industries-title {
        font-size:
            clamp(
                2.75rem,
                8vw,
                3.8rem
            );
    }

    .industries-section {
        padding-top: 86px;
        padding-bottom: 92px;
    }

    .industries-footer {
        align-items: flex-start;

        flex-direction: column;
    }
}


/* ============================================================
   SERVICES + INDUSTRIES
   MOBILE
============================================================ */

@media (max-width: 640px) {

    .services-overview {
        padding-top: 69px;
        padding-bottom: 76px;
    }

    .services-overview-pattern {
        background-size:
            52px 52px;
    }

    .services-overview-header {
        gap: 24px;

        margin-bottom: 37px;

        padding-bottom: 32px;
    }

    .services-overview-eyebrow,
    .industries-eyebrow {
        gap: 11px;

        margin-bottom: 20px;
    }

    .services-overview-eyebrow-line,
    .industries-eyebrow-line {
        width: 30px;

        flex-basis: 30px;
    }

    .services-overview-eyebrow-text,
    .industries-eyebrow-text {
        font-size: 9px;

        letter-spacing:
            0.14em;
    }

    .services-overview-title,
    .industries-title {
        font-size:
            clamp(
                2.35rem,
                11vw,
                3.15rem
            );

        line-height: 1.02;
    }

    .services-overview-intro p,
    .industries-description {
        font-size:
            0.95rem;

        line-height:
            1.72;
    }

    .services-overview-link {
        margin-top: 22px;
    }


    /* ========================================================
       SERVICES MOBILE GRID
    ======================================================== */

    .services-overview-grid {
        grid-template-columns:
            1fr;
    }

    .service-overview-card {
        min-height: 300px;

        padding:
            25px 23px
            24px;
    }

    .service-overview-icon {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }

    .service-overview-card-content h3 {
        max-width: 100%;

        font-size:
            1.3rem;
    }

    .service-overview-card-content p {
        max-width:
            430px;

        font-size:
            10px;
    }


    /* ========================================================
       INDUSTRIES MOBILE
    ======================================================== */

    .industries-section {
        padding-top: 69px;
        padding-bottom: 75px;
    }

    .industries-pattern {
        background-size:
            52px 52px;
    }

    .industries-header {
        gap: 23px;

        margin-bottom: 38px;
    }

    .industries-grid {
        grid-template-columns:
            1fr;
    }

    .industry-card {
        min-height: 230px;

        padding:
            25px 23px
            26px;
    }

    .industry-card-content h3 {
        font-size:
            1.3rem;
    }

    .industries-footer {
        gap: 25px;

        margin-top: 36px;

        padding-top: 30px;
    }

    .industries-cta {
        width: 100%;

        min-height: 55px;
    }
}


/* ============================================================
   SERVICES + INDUSTRIES
   SMALL MOBILE
============================================================ */

@media (max-width: 390px) {

    .services-overview {
        padding-top: 61px;
        padding-bottom: 68px;
    }

    .industries-section {
        padding-top: 61px;
        padding-bottom: 68px;
    }

    .services-overview-title,
    .industries-title {
        font-size:
            clamp(
                2.05rem,
                10.5vw,
                2.55rem
            );
    }

    .service-overview-card {
        min-height: 285px;

        padding:
            23px 20px;
    }

    .industry-card {
        min-height: 215px;

        padding:
            23px 20px
            24px;
    }

    .industries-cta {
        padding-right: 17px;
        padding-left: 17px;

        font-size: 9px;
    }
}


/* ============================================================
   TOUCH DEVICES
============================================================ */

@media (hover: none) {

    .services-overview-link:hover svg,
    .service-overview-card:hover,
    .service-overview-icon,
    .service-overview-card-footer svg,
    .industry-card:hover,
    .industry-card-icon,
    .industries-cta:hover {
        transform: none;
    }
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .services-overview-link,
    .services-overview-link svg,
    .service-overview-card,
    .service-overview-card::before,
    .service-overview-icon,
    .service-overview-card-footer,
    .service-overview-card-footer svg,
    .industry-card,
    .industry-card::after,
    .industry-card-icon,
    .industries-cta,
    .industries-cta svg {
        transition:
            none !important;
    }
}
/* ============================================================
   HOW WE WORK
============================================================ */

.process-section {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding:
        120px 0
        122px;

    color:
        var(--color-ink-strong);

    color-scheme: light;

    background:
        linear-gradient(
            180deg,
            #f4f7fa 0%,
            #ffffff 48%,
            var(--color-surface-page) 100%
        );
}


/* ============================================================
   PROCESS TOP ACCENT
============================================================ */

.process-section::before {
    content: "";

    position: absolute;

    z-index: -3;

    top: 0;
    right: 0;
    left: 0;

    height: 1px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(7, 26, 47, 0.11) 22%,
            rgba(223, 23, 56, 0.32) 50%,
            rgba(7, 26, 47, 0.11) 78%,
            transparent 100%
        );
}


/* ============================================================
   PROCESS LARGE BACKGROUND LIGHT
============================================================ */

.process-section::after {
    content: "";

    position: absolute;

    z-index: -3;

    top: -290px;
    right: -250px;

    width: 760px;
    height: 760px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(22, 60, 99, 0.085) 0%,
            rgba(22, 60, 99, 0.028) 40%,
            transparent 72%
        );

    border-radius: 50%;
}


/* ============================================================
   PROCESS BACKGROUND PATTERN
============================================================ */

.process-pattern {
    position: absolute;

    z-index: -2;

    inset: 0;

    pointer-events: none;

    opacity: 0.33;

    background-image:
        linear-gradient(
            rgba(7, 26, 47, 0.03) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(7, 26, 47, 0.03) 1px,
            transparent 1px
        );

    background-size:
        74px 74px;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.45) 0%,
            rgba(0, 0, 0, 0.15) 56%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.45) 0%,
            rgba(0, 0, 0, 0.15) 56%,
            transparent 100%
        );
}


/* ============================================================
   PROCESS SECONDARY GLOW
============================================================ */

.process-glow {
    position: absolute;

    z-index: -2;

    bottom: -360px;
    left: -300px;

    width: 700px;
    height: 700px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(223, 23, 56, 0.055) 0%,
            rgba(223, 23, 56, 0.018) 38%,
            transparent 70%
        );

    border-radius: 50%;
}


/* ============================================================
   PROCESS CONTAINER
============================================================ */

.process-container {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.78fr)
        minmax(0, 1.22fr);

    gap:
        70px 88px;

    width:
        min(
            calc(
                100% -
                (var(--container-padding) * 2)
            ),
            var(--container-width)
        );

    margin:
        0 auto;
}


/* ============================================================
   PROCESS INTRO
============================================================ */

.process-intro {
    width: 100%;
    max-width: 540px;
}


/* ============================================================
   PROCESS EYEBROW
============================================================ */

.process-eyebrow {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 27px;
}

.process-eyebrow-line {
    display: block;

    width: 43px;
    height: 2px;

    flex:
        0 0 43px;

    background-color:
        var(--color-red-500);
}

.process-eyebrow-text {
    color:
        var(--color-red-600);

    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;

    letter-spacing:
        0.18em;

    text-transform: uppercase;
}


/* ============================================================
   PROCESS TITLE
============================================================ */

.process-title {
    max-width: 570px;

    margin: 0;

    color:
        var(--color-ink-strong);

    font-size:
        clamp(
            3rem,
            4.2vw,
            4.35rem
        );

    font-weight: 700;
    line-height: 1;

    letter-spacing:
        -0.055em;

    text-wrap: balance;
}


/* ============================================================
   PROCESS DESCRIPTION
============================================================ */

.process-description {
    max-width: 555px;

    margin-top: 30px;

    color:
        var(--color-ink-soft);

    font-size:
        clamp(
            1rem,
            1.15vw,
            1.07rem
        );

    font-weight: 400;
    line-height: 1.82;

    letter-spacing:
        -0.012em;
}


/* ============================================================
   PROCESS NOTE
============================================================ */

.process-note {
    position: relative;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    gap: 15px;

    margin-top: 37px;

    padding:
        25px 26px;

    background:
        rgba(255, 255, 255, 0.55);

    border:
        1px solid
        rgba(7, 26, 47, 0.1);

    border-left:
        3px solid
        var(--color-red-500);
}

.process-note-mark {
    width: 7px;
    height: 7px;

    margin-top: 7px;

    flex:
        0 0 7px;

    background-color:
        var(--color-red-500);

    border-radius: 50%;

    box-shadow:
        0 0 0 5px
        rgba(223, 23, 56, 0.07);
}

.process-note p {
    margin: 0;

    color:
        var(--color-ink);

    font-size: 11px;
    font-weight: 550;
    line-height: 1.7;
}


/* ============================================================
   PROCESS CTA
============================================================ */

.process-cta {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 15px;

    min-height: 54px;

    margin-top: 34px;

    padding:
        0 23px;

    overflow: hidden;

    color:
        var(--color-white);

    background-color:
        var(--color-red-600);

    border:
        1px solid
        var(--color-red-600);

    font-size: 10px;
    font-weight: 750;
    line-height: 1;

    letter-spacing:
        0.08em;

    text-transform: uppercase;

    box-shadow:
        0 14px 30px
        rgba(200, 16, 46, 0.14);

    transition:
        color var(--transition-medium),
        background-color var(--transition-medium),
        border-color var(--transition-medium),
        transform var(--transition-fast),
        box-shadow var(--transition-medium);
}

.process-cta::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255, 255, 255, 0.2) 50%,
            transparent 80%
        );

    transform:
        translateX(-140%);

    transition:
        transform
        650ms
        var(--ease-premium);
}

.process-cta > * {
    position: relative;

    z-index: 2;
}

.process-cta svg {
    width: 17px;
    height: 17px;

    transition:
        transform var(--transition-medium);
}

.process-cta:hover,
.process-cta:focus-visible {
    color:
        var(--color-navy-950);

    background-color:
        var(--color-white);

    border-color:
        rgba(7, 26, 47, 0.12);

    box-shadow:
        0 16px 36px
        rgba(3, 16, 31, 0.13);

    transform:
        translateY(-2px);
}

.process-cta:hover::before,
.process-cta:focus-visible::before {
    transform:
        translateX(140%);
}

.process-cta:hover svg,
.process-cta:focus-visible svg {
    transform:
        translateX(4px);
}


/* ============================================================
   PROCESS STEPS
============================================================ */

.process-steps {
    position: relative;

    align-self: start;

    border-top:
        1px solid
        rgba(7, 26, 47, 0.13);
}


/* ============================================================
   VERTICAL PROCESS LINE
============================================================ */

.process-steps::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 66px;

    width: 1px;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(223, 23, 56, 0.48) 0%,
            rgba(7, 26, 47, 0.13) 32%,
            rgba(7, 26, 47, 0.13) 68%,
            rgba(223, 23, 56, 0.48) 100%
        );
}


/* ============================================================
   INDIVIDUAL PROCESS STEP
============================================================ */

.process-step {
    position: relative;

    display: grid;

    grid-template-columns:
        88px
        minmax(0, 1fr)
        52px;

    gap: 27px;

    align-items: center;

    min-height: 192px;

    padding:
        32px 25px
        32px 0;

    background:
        rgba(255, 255, 255, 0);

    border-bottom:
        1px solid
        rgba(7, 26, 47, 0.13);

    transition:
        background-color var(--transition-medium),
        padding-left var(--transition-medium),
        box-shadow var(--transition-medium);
}

.process-step::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: -1px;

    width: 0;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--color-red-700),
            var(--color-red-500)
        );

    transition:
        width
        480ms
        var(--ease-premium);
}


/* ============================================================
   STEP MARKER
============================================================ */

.process-step-marker {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 15px;
}

.process-step-number {
    color:
        var(--color-red-600);

    font-size: 10px;
    font-weight: 800;
    line-height: 1;

    letter-spacing:
        0.12em;
}

.process-step-dot {
    display: block;

    width: 11px;
    height: 11px;

    background-color:
        var(--color-surface-panel);

    border:
        2px solid
        var(--color-red-500);

    border-radius: 50%;

    box-shadow:
        0 0 0 6px
        rgba(223, 23, 56, 0.06);

    transition:
        background-color var(--transition-medium),
        box-shadow var(--transition-medium),
        transform var(--transition-medium);
}


/* ============================================================
   STEP CONTENT
============================================================ */

.process-step-content {
    min-width: 0;

    max-width: 520px;
}

.process-step-kicker {
    display: block;

    margin-bottom: 8px;

    color:
        #718196;

    font-size: 8px;
    font-weight: 800;
    line-height: 1.3;

    letter-spacing:
        0.15em;

    text-transform: uppercase;
}

.process-step-content h3 {
    margin: 0;

    color:
        var(--color-ink-strong);

    font-size:
        clamp(
            1.35rem,
            1.75vw,
            1.65rem
        );

    font-weight: 750;
    line-height: 1.15;

    letter-spacing:
        -0.038em;
}

.process-step-content p {
    max-width: 500px;

    margin-top: 12px;

    color:
        var(--color-ink-soft);

    font-size: 11px;
    font-weight: 450;
    line-height: 1.72;
}


/* ============================================================
   STEP ICON
============================================================ */

.process-step-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    color:
        var(--color-red-500);

    background-color:
        rgba(223, 23, 56, 0.045);

    border:
        1px solid
        rgba(223, 23, 56, 0.17);

    transition:
        color var(--transition-medium),
        background-color var(--transition-medium),
        border-color var(--transition-medium),
        transform var(--transition-medium);
}

.process-step-icon svg {
    width: 24px;
    height: 24px;
}


/* ============================================================
   PROCESS STEP HOVER
============================================================ */

@media (hover: hover) {

    .process-step:hover {
        padding-left: 8px;

        background-color:
            rgba(255, 255, 255, 0.55);

        box-shadow:
            0 18px 38px
            rgba(3, 16, 31, 0.045);
    }

    .process-step:hover::after {
        width: 100%;
    }

    .process-step:hover
    .process-step-dot {
        background-color:
            var(--color-red-500);

        box-shadow:
            0 0 0 7px
            rgba(223, 23, 56, 0.1);

        transform:
            scale(1.1);
    }

    .process-step:hover
    .process-step-icon {
        color:
            var(--color-white);

        background-color:
            var(--color-red-500);

        border-color:
            var(--color-red-500);

        transform:
            translateY(-3px);
    }
}


/* ============================================================
   PROCESS BOTTOM STATEMENT
============================================================ */

.process-bottom {
    grid-column:
        1 / -1;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    align-items: center;

    gap: 34px;

    margin-top: 2px;

    padding:
        27px 30px;

    background-color:
        rgba(255, 255, 255, 0.48);

    border-top:
        1px solid
        rgba(7, 26, 47, 0.12);

    border-bottom:
        1px solid
        rgba(7, 26, 47, 0.1);
}

.process-bottom-label {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    color:
        #3f5369;

    font-size: 9px;
    font-weight: 800;
    line-height: 1.4;

    letter-spacing:
        0.15em;

    text-transform: uppercase;

    white-space: nowrap;
}

.process-bottom-dot {
    width: 6px;
    height: 6px;

    flex:
        0 0 6px;

    background-color:
        var(--color-red-500);

    border-radius: 50%;

    box-shadow:
        0 0 10px
        rgba(223, 23, 56, 0.26);
}

.process-bottom p {
    margin: 0;

    color:
        var(--color-ink-soft);

    font-size: 11px;
    font-weight: 500;
    line-height: 1.65;

    text-align: right;
}


/* ============================================================
   HOW WE WORK
   SMALL DESKTOP / TABLET LANDSCAPE
============================================================ */

@media (max-width: 1100px) {

    .process-section {
        padding-top: 102px;
        padding-bottom: 108px;
    }

    .process-container {
        grid-template-columns:
            1fr;

        gap: 58px;
    }

    .process-intro {
        max-width: 750px;
    }

    .process-title {
        max-width: 720px;
    }

    .process-description {
        max-width: 680px;
    }

    .process-note {
        max-width: 680px;
    }

    .process-steps {
        width: 100%;
    }

    .process-step-content {
        max-width: 650px;
    }
}


/* ============================================================
   HOW WE WORK
   TABLET PORTRAIT
============================================================ */

@media (max-width: 820px) {

    .process-section {
        padding-top: 86px;
        padding-bottom: 94px;
    }

    .process-container {
        gap: 49px;
    }

    .process-title {
        font-size:
            clamp(
                2.75rem,
                8vw,
                3.8rem
            );
    }

    .process-step {
        grid-template-columns:
            77px
            minmax(0, 1fr)
            48px;

        gap: 21px;

        min-height: 180px;
    }

    .process-steps::before {
        left: 57px;
    }

    .process-step-icon {
        width: 45px;
        height: 45px;
    }

    .process-bottom {
        grid-template-columns:
            1fr;

        gap: 13px;
    }

    .process-bottom p {
        max-width: 680px;

        text-align: left;
    }
}


/* ============================================================
   HOW WE WORK
   MOBILE
============================================================ */

@media (max-width: 640px) {

    .process-section {
        padding-top: 69px;
        padding-bottom: 76px;
    }

    .process-pattern {
        background-size:
            52px 52px;

        opacity: 0.27;
    }

    .process-section::after {
        top: -240px;
        right: -340px;

        width: 620px;
        height: 620px;
    }

    .process-container {
        gap: 41px;
    }

    .process-eyebrow {
        gap: 11px;

        margin-bottom: 20px;
    }

    .process-eyebrow-line {
        width: 30px;

        flex-basis: 30px;
    }

    .process-eyebrow-text {
        font-size: 9px;

        letter-spacing:
            0.14em;
    }

    .process-title {
        max-width: 100%;

        font-size:
            clamp(
                2.35rem,
                11vw,
                3.15rem
            );

        line-height: 1.02;
    }

    .process-description {
        max-width: 100%;

        margin-top: 22px;

        font-size: 0.95rem;
        line-height: 1.72;
    }

    .process-note {
        gap: 13px;

        margin-top: 29px;

        padding:
            21px 20px;
    }

    .process-cta {
        width: 100%;

        min-height: 55px;

        margin-top: 28px;
    }


    /* ========================================================
       MOBILE VERTICAL TIMELINE
    ======================================================== */

    .process-steps::before {
        left: 19px;
    }

    .process-step {
        grid-template-columns:
            39px
            minmax(0, 1fr);

        grid-template-rows:
            auto
            auto;

        gap:
            0 17px;

        min-height: auto;

        padding:
            27px 0;
    }

    .process-step-marker {
        grid-row:
            1 / span 2;

        justify-content: flex-start;

        gap: 14px;

        padding-top: 3px;
    }

    .process-step-number {
        font-size: 8px;
    }

    .process-step-dot {
        width: 10px;
        height: 10px;
    }

    .process-step-content {
        grid-column: 2;

        max-width: 100%;
    }

    .process-step-content h3 {
        font-size:
            1.35rem;
    }

    .process-step-content p {
        max-width: 100%;

        font-size: 10px;
    }

    .process-step-icon {
        grid-column: 2;

        justify-self: start;

        width: 39px;
        height: 39px;

        margin-top: 19px;
    }

    .process-step-icon svg {
        width: 20px;
        height: 20px;
    }

    .process-bottom {
        gap: 14px;

        padding:
            23px 21px;
    }

    .process-bottom-label {
        white-space: normal;
    }

    .process-bottom p {
        font-size: 10px;
    }
}


/* ============================================================
   HOW WE WORK
   SMALL MOBILE
============================================================ */

@media (max-width: 390px) {

    .process-section {
        padding-top: 61px;
        padding-bottom: 68px;
    }

    .process-title {
        font-size:
            clamp(
                2.05rem,
                10.5vw,
                2.55rem
            );
    }

    .process-description {
        font-size: 0.92rem;
    }

    .process-note {
        padding:
            19px 17px;
    }

    .process-note p {
        font-size: 10px;
    }

    .process-step {
        gap:
            0 14px;
    }

    .process-step-content h3 {
        font-size: 1.25rem;
    }

    .process-bottom {
        padding:
            21px 18px;
    }

    .process-cta {
        padding-right: 16px;
        padding-left: 16px;

        font-size: 9px;
    }
}


/* ============================================================
   HOW WE WORK
   TOUCH DEVICES
============================================================ */

@media (hover: none) {

    .process-cta:hover,
    .process-step:hover,
    .process-step-icon {
        transform: none;
    }

    .process-step:hover {
        padding-left: 0;

        background-color:
            transparent;

        box-shadow:
            none;
    }
}


/* ============================================================
   HOW WE WORK
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .process-cta,
    .process-cta::before,
    .process-cta svg,
    .process-step,
    .process-step::after,
    .process-step-dot,
    .process-step-icon {
        transition:
            none !important;
    }
}
/* ============================================================
   FINAL CALL TO ACTION
============================================================ */

.final-cta {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    color:
        var(--color-white);

    background:
        linear-gradient(
            118deg,
            var(--color-red-700) 0%,
            var(--color-red-600) 48%,
            var(--color-red-500) 100%
        );
}


/* ============================================================
   FINAL CTA DARK BACKGROUND DETAIL
============================================================ */

.final-cta::before {
    content: "";

    position: absolute;

    z-index: -3;

    top: -300px;
    right: -210px;

    width: 750px;
    height: 750px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(3, 16, 31, 0.26) 0%,
            rgba(3, 16, 31, 0.1) 42%,
            transparent 72%
        );

    border-radius: 50%;
}


/* ============================================================
   CTA DIAGONAL DETAIL
============================================================ */

.final-cta::after {
    content: "";

    position: absolute;

    z-index: -2;

    top: -30%;
    right: 14%;

    width: 1px;
    height: 165%;

    pointer-events: none;

    background:
        rgba(255, 255, 255, 0.11);

    transform:
        rotate(19deg);
}


/* ============================================================
   CTA PATTERN
============================================================ */

.final-cta-pattern {
    position: absolute;

    z-index: -2;

    inset: 0;

    pointer-events: none;

    opacity: 0.28;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.06) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.06) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.75),
            transparent 90%
        );

    mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.75),
            transparent 90%
        );
}


/* ============================================================
   CTA GLOW
============================================================ */

.final-cta-glow {
    position: absolute;

    z-index: -2;

    bottom: -270px;
    left: -210px;

    width: 580px;
    height: 580px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.13) 0%,
            rgba(255, 255, 255, 0.035) 42%,
            transparent 72%
        );

    border-radius: 50%;
}


/* ============================================================
   FINAL CTA CONTAINER
============================================================ */

.final-cta-container {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(310px, 0.75fr);

    align-items: center;

    gap: 80px;

    width:
        min(
            calc(
                100% -
                (var(--container-padding) * 2)
            ),
            var(--container-width)
        );

    margin:
        0 auto;

    padding:
        92px 0
        88px;
}


/* ============================================================
   FINAL CTA CONTENT
============================================================ */

.final-cta-content {
    max-width: 850px;
}

.final-cta-eyebrow {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 24px;
}

.final-cta-eyebrow-line {
    width: 43px;
    height: 2px;

    flex:
        0 0 43px;

    background:
        var(--color-white);
}

.final-cta-eyebrow-text {
    color:
        rgba(255, 255, 255, 0.8);

    font-size: 9px;
    font-weight: 800;

    letter-spacing:
        0.18em;

    text-transform: uppercase;
}

.final-cta-title {
    max-width: 850px;

    margin: 0;

    color:
        var(--color-white);

    font-size:
        clamp(
            3rem,
            4.6vw,
            4.85rem
        );

    font-weight: 700;
    line-height: 0.99;

    letter-spacing:
        -0.057em;

    text-wrap: balance;
}

.final-cta-description {
    max-width: 670px;

    margin-top: 25px;

    color:
        rgba(255, 255, 255, 0.74);

    font-size:
        0.98rem;

    line-height: 1.76;
}


/* ============================================================
   FINAL CTA ACTIONS
============================================================ */

.final-cta-actions {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 12px;

    width: 100%;
    max-width: 350px;

    justify-self: end;
}

.final-cta-button {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 15px;

    width: 100%;
    min-height: 58px;

    padding:
        0 24px;

    overflow: hidden;

    font-size: 10px;
    font-weight: 800;

    letter-spacing:
        0.08em;

    text-align: center;

    text-transform: uppercase;

    transition:
        color var(--transition-medium),
        background-color var(--transition-medium),
        border-color var(--transition-medium),
        transform var(--transition-fast),
        box-shadow var(--transition-medium);
}

.final-cta-button svg {
    width: 18px;
    height: 18px;

    flex:
        0 0 18px;

    transition:
        transform var(--transition-medium);
}


/* ============================================================
   PRIMARY CTA
============================================================ */

.final-cta-button-primary {
    color:
        var(--color-navy-950);

    background:
        var(--color-white);

    border:
        1px solid
        var(--color-white);

    box-shadow:
        0 18px 36px
        rgba(3, 16, 31, 0.14);
}

.final-cta-button-primary:hover,
.final-cta-button-primary:focus-visible {
    color:
        var(--color-white);

    background:
        var(--color-navy-950);

    border-color:
        var(--color-navy-950);

    transform:
        translateY(-2px);

    box-shadow:
        0 20px 42px
        rgba(3, 16, 31, 0.22);
}

.final-cta-button-primary:hover svg,
.final-cta-button-primary:focus-visible svg {
    transform:
        translateX(4px);
}


/* ============================================================
   SECONDARY CTA
============================================================ */

.final-cta-button-secondary {
    color:
        var(--color-white);

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid
        rgba(255, 255, 255, 0.38);
}

.final-cta-button-secondary:hover,
.final-cta-button-secondary:focus-visible {
    color:
        var(--color-navy-950);

    background:
        var(--color-white);

    border-color:
        var(--color-white);

    transform:
        translateY(-2px);
}


/* ============================================================
   FINAL CTA BOTTOM
============================================================ */

.final-cta-bottom {
    position: relative;

    z-index: 2;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.17);
}

.final-cta-bottom-inner {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 17px;

    width:
        min(
            calc(
                100% -
                (var(--container-padding) * 2)
            ),
            var(--container-width)
        );

    min-height: 58px;

    margin:
        0 auto;
}

.final-cta-bottom-item {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 8px;
    font-weight: 800;

    letter-spacing:
        0.13em;

    text-transform: uppercase;
}

.final-cta-bottom-dot {
    width: 5px;
    height: 5px;

    background:
        var(--color-white);

    border-radius: 50%;
}

.final-cta-bottom-divider {
    width: 1px;
    height: 13px;

    background:
        rgba(255, 255, 255, 0.23);
}
/* ============================================================
   FINAL CTA
   RESPONSIVE
============================================================ */


/* ============================================================
   FINAL CTA - SMALL DESKTOP / TABLET
============================================================ */

@media (max-width: 1120px) {

    .final-cta-container {
        grid-template-columns:
            1fr;

        gap: 41px;

        padding-top: 80px;
        padding-bottom: 76px;
    }

    .final-cta-content {
        max-width: 800px;
    }

    .final-cta-actions {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        max-width: 660px;

        justify-self: start;
    }

    .final-cta-button {
        max-width: none;
    }
}


/* ============================================================
   FINAL CTA - TABLET PORTRAIT
============================================================ */

@media (max-width: 820px) {

    .final-cta-container {
        gap: 37px;

        padding-top: 72px;
        padding-bottom: 69px;
    }

    .final-cta-title {
        max-width: 720px;

        font-size:
            clamp(
                2.75rem,
                8vw,
                3.8rem
            );
    }

    .final-cta-description {
        max-width: 640px;
    }

    .final-cta-actions {
        width: 100%;
        max-width: 620px;
    }
}


/* ============================================================
   FINAL CTA - MOBILE
============================================================ */

@media (max-width: 640px) {

    .final-cta-pattern {
        background-size:
            52px 52px;
    }

    .final-cta::after {
        right: -8%;
    }

    .final-cta-container {
        gap: 33px;

        padding-top: 63px;
        padding-bottom: 59px;
    }

    .final-cta-eyebrow {
        gap: 11px;

        margin-bottom: 20px;
    }

    .final-cta-eyebrow-line {
        width: 30px;

        flex-basis: 30px;
    }

    .final-cta-eyebrow-text {
        font-size: 8px;

        letter-spacing:
            0.14em;
    }

    .final-cta-title {
        max-width: 100%;

        font-size:
            clamp(
                2.35rem,
                11vw,
                3.15rem
            );

        line-height: 1.02;
    }

    .final-cta-description {
        margin-top: 21px;

        font-size: 0.94rem;

        line-height: 1.7;
    }

    .final-cta-actions {
        grid-template-columns:
            1fr;

        gap: 11px;

        max-width: 100%;
    }

    .final-cta-button {
        width: 100%;

        min-height: 56px;
    }

    .final-cta-bottom-inner {
        gap:
            10px 12px;

        min-height: 68px;

        padding:
            14px 0;
    }

    .final-cta-bottom-item {
        font-size: 7px;

        line-height: 1.5;
    }

    .final-cta-bottom-divider {
        height: 10px;
    }
}


/* ============================================================
   FINAL CTA - SMALL MOBILE
============================================================ */

@media (max-width: 390px) {

    .final-cta-container {
        padding-top: 56px;
        padding-bottom: 54px;
    }

    .final-cta-title {
        font-size:
            clamp(
                2.05rem,
                10.5vw,
                2.55rem
            );
    }

    .final-cta-description {
        font-size: 0.9rem;
    }

    .final-cta-button {
        padding-right: 16px;
        padding-left: 16px;

        font-size: 9px;
    }

    .final-cta-bottom-divider {
        display: none;
    }

    .final-cta-bottom-inner {
        column-gap: 15px;
    }
}


/* ============================================================
   FINAL CTA - TOUCH
============================================================ */

@media (hover: none) {

    .final-cta-button:hover {
        transform:
            none;
    }
}


/* ============================================================
   FINAL CTA - REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .final-cta-button,
    .final-cta-button svg {
        transition:
            none !important;
    }
}

/* ============================================================
   MOBILE SECTION CAROUSELS
   Why Vianna + Our Services + Industries We Serve
   Horizontal on mobile

   How We Work
   Vertical on mobile
============================================================ */

.mobile-section-carousel-controls {
    display: none;
}

@media (max-width: 640px) {

    /* ========================================================
       SHARED HORIZONTAL CAROUSEL TRACKS
    ======================================================== */

    [data-mobile-carousel="horizontal"] {
        display: flex !important;

        grid-template-columns: none !important;

        gap: 14px !important;

        width: 100%;

        padding:
            2px 10% 12px
            0;

        overflow-x: auto;
        overflow-y: visible;

        border-top: 0 !important;
        border-left: 0 !important;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
        -ms-overflow-style: none;

        touch-action: pan-x;
    }

    [data-mobile-carousel="horizontal"]::-webkit-scrollbar,
    [data-mobile-carousel="vertical"]::-webkit-scrollbar {
        display: none;

        width: 0;
        height: 0;
    }

    [data-mobile-carousel="horizontal"] > * {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }


    /* ========================================================
       WHY VIANNA HORIZONTAL CAROUSEL
    ======================================================== */

    .why-pillars[data-mobile-carousel="horizontal"] {
        align-self: auto;
    }

    .why-pillars[data-mobile-carousel="horizontal"]
    .why-pillar {
        width: auto;

        min-width: 0;
        min-height: 292px;

        flex:
            0 0 88%;

        max-width: 420px;
    }


    /* ========================================================
       OUR SERVICES HORIZONTAL CAROUSEL
    ======================================================== */

    .services-overview-grid[data-mobile-carousel="horizontal"]
    .service-overview-card {
        width: auto;

        min-width: 0;
        min-height: 312px;

        flex:
            0 0 88%;

        max-width: 420px;

        border:
            1px solid
            rgba(7, 26, 47, 0.13);
    }


    /* ========================================================
       INDUSTRIES HORIZONTAL CAROUSEL
    ======================================================== */

    .industries-grid[data-mobile-carousel="horizontal"]
    .industry-card {
        width: auto;

        min-width: 0;
        min-height: 245px;

        flex:
            0 0 88%;

        max-width: 410px;

        border:
            1px solid
            rgba(255, 255, 255, 0.12);
    }


    /* ========================================================
       SHARED CAROUSEL CONTROLS
    ======================================================== */

    .mobile-section-carousel-controls {
        display: flex;

        align-items: center;
        justify-content: space-between;

        gap: 12px;

        width: 100%;

        margin-top: 18px;
    }

    .mobile-section-carousel-button {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        width: 50px;
        height: 50px;

        flex:
            0 0 50px;

        cursor: pointer;

        border:
            1px solid
            rgba(7, 26, 47, 0.16);

        background-color:
            rgba(255, 255, 255, 0.58);

        transition:
            color var(--transition-fast),
            background-color var(--transition-fast),
            border-color var(--transition-fast),
            transform var(--transition-fast);
    }

    .mobile-section-carousel-button svg {
        width: 19px;
        height: 19px;
    }

    .mobile-section-carousel-button:active {
        transform:
            scale(0.96);
    }

    .mobile-section-carousel-button:focus-visible {
        outline:
            2px solid
            var(--color-red-500);

        outline-offset: 3px;
    }

    .mobile-section-carousel-counter {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        gap: 8px;

        min-width: 104px;

        color:
            #536578;

        font-size: 9px;
        font-weight: 800;
        line-height: 1;

        letter-spacing:
            0.14em;

        text-transform: uppercase;
    }

    .mobile-section-carousel-counter::before {
        content: "";

        width: 30px;
        height: 1px;

        margin-right: 2px;

        background-color:
            var(--color-red-500);
    }

    .mobile-section-carousel-current {
        color:
            var(--color-red-600);
    }

    .mobile-section-carousel-separator {
        opacity: 0.42;
    }


    /* ========================================================
       DARK SECTION CONTROL THEME
    ======================================================== */

    .why-section
    .mobile-section-carousel-button,
    .industries-section
    .mobile-section-carousel-button {
        color:
            var(--color-white);

        background-color:
            rgba(255, 255, 255, 0.035);

        border-color:
            rgba(255, 255, 255, 0.18);
    }

    .why-section
    .mobile-section-carousel-counter,
    .industries-section
    .mobile-section-carousel-counter {
        color:
            rgba(255, 255, 255, 0.47);
    }

    .why-section
    .mobile-section-carousel-current,
    .industries-section
    .mobile-section-carousel-current {
        color:
            var(--color-red-400);
    }


    /* ========================================================
       HOW WE WORK VERTICAL CAROUSEL
    ======================================================== */

    .process-steps[data-mobile-carousel="vertical"] {
        position: relative;

        width: 100%;
        height:
            clamp(
                350px,
                67vw,
                400px
            );

        overflow-x: hidden;
        overflow-y: auto;

        background-color:
            rgba(255, 255, 255, 0.4);

        border:
            1px solid
            rgba(7, 26, 47, 0.12);

        scroll-snap-type: y mandatory;
        scroll-padding-block: 0;
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
        -ms-overflow-style: none;

        touch-action: pan-y;
    }

    .process-steps[data-mobile-carousel="vertical"]::before {
        display: none;
    }

    .process-steps[data-mobile-carousel="vertical"]
    .process-step {
        display: grid;

        grid-template-columns:
            1fr
            auto;

        grid-template-rows:
            auto
            minmax(0, 1fr)
            auto;

        gap:
            0 20px;

        align-items: start;

        width: 100%;
        height: 100%;
        min-height: 100%;

        padding:
            27px 24px
            25px;

        background-color:
            rgba(255, 255, 255, 0.78);

        border: 0;
        border-bottom:
            1px solid
            rgba(7, 26, 47, 0.12);

        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .process-steps[data-mobile-carousel="vertical"]
    .process-step:last-child {
        border-bottom: 0;
    }

    .process-steps[data-mobile-carousel="vertical"]
    .process-step::after {
        right: auto;
        bottom: 0;
        left: 0;

        width: 3px;
        height: 100%;

        background:
            linear-gradient(
                180deg,
                var(--color-red-700),
                var(--color-red-500)
            );

        transform:
            scaleY(0);

        transform-origin:
            top center;
    }

    .process-steps[data-mobile-carousel="vertical"]
    .process-step.is-carousel-active::after {
        transform:
            scaleY(1);
    }

    .process-steps[data-mobile-carousel="vertical"]
    .process-step-marker {
        grid-column: 1;
        grid-row: 1;

        flex-direction: row;

        align-items: center;
        justify-content: flex-start;

        gap: 12px;

        padding-top: 0;
    }

    .process-steps[data-mobile-carousel="vertical"]
    .process-step-number {
        font-size: 9px;
    }

    .process-steps[data-mobile-carousel="vertical"]
    .process-step-dot {
        width: 10px;
        height: 10px;
    }

    .process-steps[data-mobile-carousel="vertical"]
    .process-step-content {
        grid-column:
            1 / -1;

        grid-row: 2;

        align-self: center;

        max-width: 100%;

        margin-top: 26px;
    }

    .process-steps[data-mobile-carousel="vertical"]
    .process-step-content h3 {
        max-width: 310px;

        font-size:
            clamp(
                1.45rem,
                7vw,
                1.85rem
            );
    }

    .process-steps[data-mobile-carousel="vertical"]
    .process-step-content p {
        max-width: 100%;

        margin-top: 14px;

        font-size: 10px;
        line-height: 1.72;
    }

    .process-steps[data-mobile-carousel="vertical"]
    .process-step-icon {
        grid-column: 2;
        grid-row: 1;

        justify-self: end;

        width: 42px;
        height: 42px;

        margin-top: 0;
    }

    .process-section
    .mobile-section-carousel-controls.is-vertical {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            52px;

        grid-template-rows:
            52px
            52px;

        gap: 8px 14px;

        align-items: stretch;

        margin-top: 16px;
    }

    .process-section
    .mobile-section-carousel-controls.is-vertical
    .mobile-section-carousel-counter {
        grid-column: 1;
        grid-row:
            1 / 3;

        align-self: center;
        justify-self: start;

        justify-content: flex-start;
    }

    .process-section
    .mobile-section-carousel-controls.is-vertical
    .mobile-section-carousel-button {
        width: 52px;
        height: 52px;

        flex-basis: 52px;
    }

    .process-section
    .mobile-section-carousel-controls.is-vertical
    [data-carousel-prev] {
        grid-column: 2;
        grid-row: 1;
    }

    .process-section
    .mobile-section-carousel-controls.is-vertical
    [data-carousel-next] {
        grid-column: 2;
        grid-row: 2;
    }
}


/* ============================================================
   MOBILE CAROUSELS - SMALL MOBILE
============================================================ */

@media (max-width: 390px) {

    [data-mobile-carousel="horizontal"] {
        gap: 12px !important;

        padding-right: 8%;
    }

    .why-pillars[data-mobile-carousel="horizontal"]
    .why-pillar,
    .services-overview-grid[data-mobile-carousel="horizontal"]
    .service-overview-card,
    .industries-grid[data-mobile-carousel="horizontal"]
    .industry-card {
        flex-basis: 92%;
    }

    .process-steps[data-mobile-carousel="vertical"] {
        height: 375px;
    }

    .process-steps[data-mobile-carousel="vertical"]
    .process-step {
        padding:
            25px 20px
            23px;
    }

    .mobile-section-carousel-button {
        width: 48px;
        height: 48px;

        flex-basis: 48px;
    }
}


/* ============================================================
   MOBILE CAROUSELS - REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    [data-mobile-carousel] {
        scroll-behavior: auto !important;
    }

    .mobile-section-carousel-button,
    .process-steps[data-mobile-carousel="vertical"]
    .process-step::after {
        transition:
            none !important;
    }
}