/* ==========================================================
   ARGENESIA 2.0
   Design System + Homepage
   ========================================================== */


/* ==========================================================
   01. DESIGN TOKENS
   ========================================================== */

:root {
    /* Brand */
    --arg-blue: #152BFF;
    --arg-blue-dark: #101DA8;
    --arg-blue-soft: #EEF1FF;

    --arg-red: #FF1010;
    --arg-red-soft: #FFF0EF;

    /* Neutral */
    --arg-ink: #171719;
    --arg-text: #3F4045;
    --arg-muted: #74767E;
    --arg-line: #E3E2DE;

    --arg-canvas: #F8F7F3;
    --arg-white: #FFFFFF;

    /* Semantic */
    --arg-success: #198754;
    --arg-warning: #D97706;
    --arg-danger: #DC3545;
    --arg-info: #0DCAF0;

    /* Typography */
    --arg-font:
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    /* Layout */
    --arg-container: 1320px;

    /* Radius */
    --arg-radius-sm: 6px;
    --arg-radius: 10px;
    --arg-radius-lg: 16px;

    /* Spacing */
    --arg-space-1: 4px;
    --arg-space-2: 8px;
    --arg-space-3: 12px;
    --arg-space-4: 16px;
    --arg-space-5: 24px;
    --arg-space-6: 32px;
    --arg-space-7: 48px;
    --arg-space-8: 64px;
    --arg-space-9: 96px;
    --arg-space-10: 128px;
    --arg-space-11: 160px;

    /* Motion */
    --arg-duration-fast: 160ms;
    --arg-duration-normal: 280ms;
    --arg-duration-reveal: 600ms;
    --arg-ease: cubic-bezier(.2, .8, .2, 1);

    /* Navbar */
    --arg-navbar-height: 88px;
}


/* ==========================================================
   02. BASE
   ========================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--arg-navbar-height) + 24px);
}

body {
    margin: 0;

    font-family: var(--arg-font);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;

    color: var(--arg-text);
    background: var(--arg-canvas);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
    font-family: var(--arg-font);
}

img {
    display: block;
    max-width: 100%;
}

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

::selection {
    color: var(--arg-white);
    background: var(--arg-blue);
}


/* ==========================================================
   03. ACCESSIBILITY
   ========================================================== */

a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(21, 43, 255, .30);
    outline-offset: 4px;
}


/* ==========================================================
   04. LAYOUT
   ========================================================== */

.arg-container {
    width: 100%;
    max-width: var(--arg-container);

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


/* ==========================================================
   05. TYPOGRAPHY
   ========================================================== */

.arg-eyebrow {
    margin: 0 0 24px;

    color: var(--arg-blue);

    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;

    letter-spacing: .10em;
    text-transform: uppercase;
}


/* ==========================================================
   06. BUTTONS
   ========================================================== */

.arg-btn {
    min-height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    padding: 0 22px;

    border: 0;
    border-radius: var(--arg-radius);

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

    transition:
        background-color var(--arg-duration-normal) var(--arg-ease),
        color var(--arg-duration-normal) var(--arg-ease),
        transform var(--arg-duration-normal) var(--arg-ease);
}

.arg-btn--primary {
    color: var(--arg-white);
    background: var(--arg-blue);
}

.arg-btn--primary:hover {
    color: var(--arg-white);
    background: var(--arg-blue-dark);
}

.arg-btn__arrow {
    display: inline-block;

    transition:
        transform var(--arg-duration-normal) var(--arg-ease);
}

.arg-btn:hover .arg-btn__arrow {
    transform: translateX(4px);
}


/* ==========================================================
   07. TEXT ACTION
   ========================================================== */

.arg-text-action {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: var(--arg-ink);

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

    transition:
        color var(--arg-duration-fast) var(--arg-ease);
}

.arg-text-action span {
    display: inline-block;

    transition:
        transform var(--arg-duration-normal) var(--arg-ease);
}

.arg-text-action:hover {
    color: var(--arg-blue);
}

.arg-text-action:hover span {
    transform: translateX(4px);
}


/* ==========================================================
   08. HEADER / STICKY NAVIGATION
   ========================================================== */

.arg-header {
    position: sticky;
    top: 0;

    z-index: 1030;

    background: var(--arg-canvas);
}

.arg-navbar {
    min-height: var(--arg-navbar-height);

    padding: 0;

    background: var(--arg-canvas);
    border-bottom: 1px solid transparent;

    transition:
        background-color var(--arg-duration-normal) var(--arg-ease),
        border-color var(--arg-duration-normal) var(--arg-ease),
        box-shadow var(--arg-duration-normal) var(--arg-ease);
}

.arg-header.is-scrolled .arg-navbar {
    background: rgba(248, 247, 243, .96);

    border-bottom-color: var(--arg-line);

    box-shadow:
        0 4px 20px rgba(23, 23, 25, .025);
}

@supports (backdrop-filter: blur(12px)) {

    .arg-header.is-scrolled .arg-navbar {
        background: rgba(248, 247, 243, .92);

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

}


/* ==========================================================
   09. NAVBAR BRAND
   ========================================================== */

.arg-navbar__brand {
    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;
}

.arg-navbar__logo {
    width: auto;
    height: 36px;
}

.arg-navbar__menu {
    align-items: center;

    gap: 28px;
}

.arg-navbar__cta {
    min-height: 48px;
}


/* ==========================================================
   10. DESKTOP NAVIGATION
   ========================================================== */

@media (min-width: 992px) {

    .arg-navbar__menu .nav-link,
    .arg-navbar__menu .arg-nav-link {
        position: relative;

        display: inline-flex;
        align-items: center;

        padding: 8px 0 !important;

        color: var(--arg-text);

        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;

        text-decoration: none;

        transition:
            color var(--arg-duration-fast) var(--arg-ease);
    }


    /* ------------------------------------------------------
       Shared underline
       ------------------------------------------------------ */

    .arg-navbar__menu .nav-link::before,
    .arg-navbar__menu .arg-nav-link::before {
        content: "";

        position: absolute;

        right: 0;
        bottom: 0;
        left: 0;

        height: 1px;

        background: var(--arg-ink);

        transform: scaleX(0);
        transform-origin: right center;

        transition:
            transform var(--arg-duration-normal) var(--arg-ease);
    }


    /* Disable Bootstrap / legacy pseudo element */

    .arg-navbar__menu .nav-link::after,
    .arg-navbar__menu .arg-nav-link::after {
        display: none;
    }


    /* ------------------------------------------------------
       Hover
       ------------------------------------------------------ */

    .arg-navbar__menu .nav-link:hover,
    .arg-navbar__menu .arg-nav-link:hover {
        color: var(--arg-ink);
    }

    .arg-navbar__menu .nav-link:hover::before,
    .arg-navbar__menu .arg-nav-link:hover::before {
        transform: scaleX(1);
        transform-origin: left center;
    }


    /* ------------------------------------------------------
       Active page
       ------------------------------------------------------ */

    .arg-navbar__menu .nav-link.active,
    .arg-navbar__menu .arg-nav-link.active,
    .arg-navbar__menu .arg-nav-link.is-active {
        color: var(--arg-ink);
    }

    .arg-navbar__menu .nav-link.active::before,
    .arg-navbar__menu .arg-nav-link.active::before,
    .arg-navbar__menu .arg-nav-link.is-active::before {
        transform: scaleX(1);
        transform-origin: left center;
    }


    /* ------------------------------------------------------
       Solutions dropdown open state
       ------------------------------------------------------ */

    .arg-nav-solutions > .arg-nav-link.show,
    .arg-nav-solutions > .arg-nav-link[aria-expanded="true"] {
        color: var(--arg-ink);
    }

    .arg-nav-solutions > .arg-nav-link.show::before,
    .arg-nav-solutions > .arg-nav-link[aria-expanded="true"]::before {
        transform: scaleX(1);
        transform-origin: left center;
    }

}


/* ==========================================================
   11. SOLUTIONS DROPDOWN — DESKTOP
   ========================================================== */

.arg-nav-solutions {
    position: relative;
}

.arg-nav-solutions .dropdown-toggle::after {
    display: none;
}

.arg-solutions-menu {
    top: calc(100% + 18px) !important;
    left: -24px !important;

    width: 520px;

    margin: 0 !important;
    padding: 12px;

    overflow: hidden;

    border: 1px solid var(--arg-line);
    border-radius: var(--arg-radius);

    background: var(--arg-white);

    box-shadow:
        0 16px 40px rgba(23, 23, 25, .07);

    transform: none !important;
}

.arg-solutions-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 32px;

    padding: 18px 20px;

    color: var(--arg-ink);

    border-radius: var(--arg-radius-sm);

    text-decoration: none;

    transition:
        background-color var(--arg-duration-fast) var(--arg-ease),
        color var(--arg-duration-fast) var(--arg-ease);
}

.arg-solutions-menu__item:hover,
.arg-solutions-menu__item:focus-visible {
    color: var(--arg-ink);
    background: var(--arg-blue-soft);
}

.arg-solutions-menu__item > div {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.arg-solutions-menu__item strong {
    color: var(--arg-ink);

    font-size: 15px;
    font-weight: 600;
}

.arg-solutions-menu__item span:not(.arg-arrow) {
    max-width: 340px;

    color: var(--arg-muted);

    font-size: 13px;
    line-height: 1.5;
}

.arg-solutions-menu__item .arg-arrow {
    flex: 0 0 auto;

    font-size: 18px;

    transition:
        transform var(--arg-duration-fast) var(--arg-ease);
}

.arg-solutions-menu__item:hover .arg-arrow {
    transform: translateX(4px);
}

.arg-solutions-menu__footer {
    margin-top: 8px;

    padding: 16px 20px 10px;

    border-top: 1px solid var(--arg-line);
}

.arg-solutions-menu__footer a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--arg-blue);

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

    text-decoration: none;
}

.arg-solutions-menu__footer a span {
    transition:
        transform var(--arg-duration-fast) var(--arg-ease);
}

.arg-solutions-menu__footer a:hover span {
    transform: translateX(4px);
}


/* ==========================================================
   12. MOBILE NAV TRIGGER
   ========================================================== */

.arg-menu-toggle,
.arg-mobile-nav__close {
    position: relative;

    width: 46px;
    height: 46px;

    padding: 0;

    border: 0;
    background: transparent;
}

.arg-menu-toggle span {
    position: absolute;
    left: 10px;

    width: 26px;
    height: 1.5px;

    background: var(--arg-ink);
}

.arg-menu-toggle span:first-child {
    top: 18px;
}

.arg-menu-toggle span:last-child {
    top: 27px;
}


/* ==========================================================
   13. MOBILE OFFCANVAS
   ========================================================== */

.arg-mobile-nav {
    --bs-offcanvas-width: min(100%, 480px);

    width: var(--bs-offcanvas-width) !important;

    border-left: 0 !important;

    background: var(--arg-canvas);
}

.arg-mobile-nav__header {
    min-height: var(--arg-navbar-height);

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

    padding: 0 24px;

    border-bottom: 1px solid var(--arg-line);
}

.arg-mobile-nav__brand {
    display: inline-flex;
    align-items: center;
}

.arg-mobile-nav__logo {
    display: block;

    width: auto;
    height: 38px;
}


/* Close */

.arg-mobile-nav__close {
    width: 44px;
    height: 44px;
}

.arg-mobile-nav__close span {
    position: absolute;

    top: 21px;
    left: 10px;

    width: 24px;
    height: 1.5px;

    background: var(--arg-ink);

    transform-origin: center;
}

.arg-mobile-nav__close span:first-child {
    transform: rotate(45deg);
}

.arg-mobile-nav__close span:last-child {
    transform: rotate(-45deg);
}


/* Body */

.arg-mobile-nav__body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 28px 24px 32px;

    overflow-y: auto;
}


/* Menu */

.arg-mobile-nav__menu {
    margin: 0;
    padding: 0;

    list-style: none;
}

.arg-mobile-nav__menu > li {
    border-bottom: 1px solid var(--arg-line);
}

.arg-mobile-nav__link {
    width: 100%;
    min-height: 64px;

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

    padding: 0;

    border: 0;

    color: var(--arg-ink);
    background: transparent;

    font-family: inherit;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;

    text-align: left;
    text-decoration: none;
}

.arg-mobile-nav__link:hover,
.arg-mobile-nav__link.active,
.arg-mobile-nav__link.is-active {
    color: var(--arg-blue);
}


/* ==========================================================
   14. MOBILE SOLUTIONS TOGGLE
   ========================================================== */

.arg-mobile-nav__toggle-icon {
    position: relative;

    display: block;

    width: 18px;
    height: 18px;

    flex: 0 0 18px;
}

.arg-mobile-nav__toggle-icon::before,
.arg-mobile-nav__toggle-icon::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 16px;
    height: 1.5px;

    background: currentColor;

    transform: translate(-50%, -50%);

    transition:
        transform 200ms var(--arg-ease);
}

.arg-mobile-nav__toggle-icon::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}

.arg-mobile-nav__solution-trigger:not(.collapsed)
.arg-mobile-nav__toggle-icon::after {
    transform:
        translate(-50%, -50%)
        rotate(0deg);
}


/* ==========================================================
   15. MOBILE SOLUTIONS
   ========================================================== */

.arg-mobile-solutions__inner {
    padding: 0 0 20px 16px;
}

.arg-mobile-solutions__inner > a {
    min-height: 50px;

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

    gap: 20px;

    padding: 8px 0;

    color: var(--arg-text);

    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;

    text-decoration: none;
}

.arg-mobile-solutions__inner > a:hover {
    color: var(--arg-blue);
}

.arg-mobile-solutions__inner > a > span:last-child {
    transition:
        transform var(--arg-duration-fast) var(--arg-ease);
}

.arg-mobile-solutions__inner > a:hover > span:last-child {
    transform: translateX(4px);
}

.arg-mobile-solutions__all {
    margin-top: 8px;

    padding-top: 18px !important;

    border-top: 1px solid var(--arg-line);

    color: var(--arg-blue) !important;

    font-weight: 600 !important;
}


/* ==========================================================
   16. MOBILE LET'S TALK
   ========================================================== */

.arg-mobile-nav__cta {
    margin-top: 32px;
}

.arg-mobile-nav__talk {
    min-height: 60px;

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

    padding: 0 20px;

    border-radius: var(--arg-radius);

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

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

    text-decoration: none;
}

.arg-mobile-nav__talk:hover {
    color: var(--arg-white);
    background: var(--arg-blue-dark);
}

.arg-mobile-nav__talk span:last-child {
    transition:
        transform var(--arg-duration-fast) var(--arg-ease);
}

.arg-mobile-nav__talk:hover span:last-child {
    transform: translateX(4px);
}


/* ==========================================================
   17. MOBILE NAV FOOTER
   ========================================================== */

.arg-mobile-nav__footer {
    display: flex;
    align-items: center;

    gap: 24px;

    padding: 20px 24px 28px;

    border-top: 1px solid var(--arg-line);
}

.arg-mobile-nav__footer a {
    color: var(--arg-muted);

    font-size: 13px;
    font-weight: 500;

    text-decoration: none;
}

.arg-mobile-nav__footer a:hover {
    color: var(--arg-ink);
}

.offcanvas-backdrop.show {
    opacity: .35;
}


/* ==========================================================
   18. HERO
   ========================================================== */

.arg-hero {
    position: relative;

    display: flex;
    align-items: center;

    min-height: min(780px, 100svh);

    overflow: hidden;

    background: var(--arg-canvas);
}

.arg-hero__row {
    min-height: min(780px, 100svh);
}

.arg-hero__content {
    position: relative;

    z-index: 2;

    max-width: 760px;

    padding-top: 48px;
    padding-bottom: 48px;
}

.arg-hero__title {
    margin: 0;

    color: var(--arg-ink);

    font-size: clamp(54px, 4.9vw, 80px);
    font-weight: 600;
    line-height: 1.02;

    letter-spacing: -.045em;
}

.arg-hero__title-fixed,
.arg-hero__rotator {
    display: block;
}

.arg-hero__rotator {
    min-height: 2.08em;

    color: var(--arg-blue);

    transition:
        opacity 220ms var(--arg-ease),
        transform 220ms var(--arg-ease);
}

.arg-hero__rotator.is-changing {
    opacity: 0;

    transform: translateY(10px);
}

.arg-hero__lead {
    max-width: 610px;

    margin: 32px 0 0;

    color: var(--arg-text);

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

.arg-hero__actions {
    display: flex;
    align-items: center;

    gap: 30px;

    margin-top: 38px;
}


/* ==========================================================
   19. HERO VISUAL
   ========================================================== */

.arg-hero__visual {
    position: relative;

    margin-left: 18px;

    padding: 46px 0 34px;
}

.arg-hero__image-wrap {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    border-radius: var(--arg-radius-lg);

    background: var(--arg-blue-soft);
}

.arg-hero__image {
    width: 100%;
    height: 100%;

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

    filter: saturate(.92);
}

.arg-hero__visual-note {
    margin: 14px 0 0;

    color: var(--arg-muted);

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

    letter-spacing: .08em;
    text-transform: uppercase;
}


/* ==========================================================
   20. TABLET
   ========================================================== */

@media (max-width: 1199.98px) {

    :root {
        --arg-navbar-height: 82px;
    }

    .arg-container {
        padding-left: 32px;
        padding-right: 32px;
    }

    .arg-navbar__menu {
        gap: 20px;
    }

    .arg-navbar__menu .nav-link,
    .arg-navbar__menu .arg-nav-link {
        font-size: 13px;
    }

    .arg-hero {
        min-height: 720px;
    }

    .arg-hero__row {
        min-height: 720px;
    }

    .arg-hero__title {
        font-size: clamp(50px, 5.4vw, 70px);
    }

}


/* ==========================================================
   21. MOBILE / TABLET STACK
   ========================================================== */

@media (max-width: 991.98px) {

    :root {
        --arg-navbar-height: 82px;
    }

    .arg-navbar {
        min-height: var(--arg-navbar-height);
    }

    .arg-navbar__logo {
        height: 38px;
    }

    .arg-hero {
        display: block;

        min-height: 0;
    }

    .arg-hero__row {
        min-height: 0;
    }

    .arg-hero__content {
        max-width: 720px;

        padding-top: 80px;
        padding-bottom: 56px;
    }

    .arg-hero__title {
        max-width: 760px;

        font-size: clamp(50px, 8.5vw, 72px);
    }

    .arg-hero__lead {
        max-width: 620px;
    }

    .arg-hero__visual {
        margin-left: 0;

        padding: 0 0 80px;
    }

    .arg-hero__image-wrap {
        aspect-ratio: 4 / 3;
    }

}


/* ==========================================================
   22. MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    .arg-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .arg-eyebrow {
        margin-bottom: 18px;

        font-size: 12px;
    }

    .arg-hero__content {
        padding-top: 62px;
        padding-bottom: 46px;
    }

    .arg-hero__title {
        font-size: clamp(44px, 12vw, 56px);

        line-height: 1.03;

        letter-spacing: -.04em;
    }

    .arg-hero__lead {
        margin-top: 26px;

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

    .arg-hero__actions {
        align-items: flex-start;
        flex-direction: column;

        gap: 24px;

        margin-top: 32px;
    }

    .arg-btn {
        min-height: 54px;
    }

    .arg-hero__visual {
        padding-bottom: 64px;
    }

    .arg-hero__image-wrap {
        aspect-ratio: 4 / 3;

        border-radius: var(--arg-radius);
    }

    .arg-hero__rotator {
        min-height: 2.05em;
    }

}


/* ==========================================================
   23. SMALL MOBILE
   ========================================================== */

@media (max-width: 420px) {

    .arg-hero__title {
        font-size: clamp(38px, 11.5vw, 48px);
    }

}


/* ==========================================================
   24. DESKTOP PROTECTION
   ========================================================== */

@media (min-width: 992px) {

    #mobileNavigation {
        display: none !important;
    }

}


/* ==========================================================
   25. REDUCED MOTION
   ========================================================== */

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

    html {
        scroll-behavior: auto;
    }

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

        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

}
/* ==========================================================
   WHAT WE DO
   ========================================================== */

.arg-solutions {
    padding: 150px 0 140px;
    background: var(--arg-white);
}

.arg-solutions__header {
    max-width: 880px;
    margin-bottom: 104px;
}

.arg-section-title {
    margin: 0;
    color: var(--arg-ink);
    font-size: clamp(44px, 4.2vw, 58px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.arg-section-lead {
    max-width: 700px;
    margin: 28px 0 0;
    color: var(--arg-text);
    font-size: 19px;
    line-height: 1.7;
}


/* Solution */

.arg-solution {
    padding: 0 0 128px;
    margin-bottom: 128px;
    border-bottom: 1px solid var(--arg-line);
}

.arg-solution__row {
    --bs-gutter-x: 72px;
}

.arg-solution__content {
    max-width: 500px;
}

.arg-solution__content--right {
    margin-left: auto;
}

.arg-solution__number {
    display: block;
    margin-bottom: 24px;
    color: var(--arg-red);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .10em;
}

.arg-solution__title {
    margin: 0;
    color: var(--arg-ink);
    font-size: clamp(38px, 3.3vw, 52px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.arg-solution__description {
    margin: 30px 0 0;
    color: var(--arg-text);
    font-size: 17px;
    line-height: 1.7;
}

.arg-capability-list {
    display: flex;
    flex-wrap: wrap;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.arg-solution__action {
    margin-top: 34px;
}


/* Visual */

.arg-solution__visual {
    width: 100%;
}

.arg-solution__visual--right {
    padding-left: 34px;
}

.arg-solution__visual--left {
    padding-right: 34px;
}

.arg-solution-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--arg-radius-lg);
    background: transparent;
}

.arg-solution-visual__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.arg-asset-label {
    position: absolute;
    right: 16px;
    bottom: 16px;
    padding: 7px 9px;
    border-radius: var(--arg-radius-sm);
    color: var(--arg-muted);
    background: rgba(255, 255, 255, .9);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}


/* ==========================================================
   SOFTWARE UI PLACEHOLDER
   ========================================================== */

.arg-solution-visual--software {
    padding: 0;
    background: transparent;
}

.arg-solution-visual--software > img.arg-ui-placeholder {
    display: block;
    border: 0;
    border-radius: inherit;
    background: transparent;
    box-shadow: none;
}

.arg-ui-placeholder {
    position: relative;
    display: grid;
    grid-template-columns: 20% 1fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(21, 43, 255, .10);
    border-radius: var(--arg-radius);
    background: var(--arg-white);
    box-shadow: 0 24px 60px rgba(23, 23, 25, .08);
}

.arg-ui-placeholder__sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 20px;
    background: var(--arg-ink);
}

.arg-ui-placeholder__sidebar span {
    display: block;
    width: 75%;
    height: 7px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .18);
}

.arg-ui-placeholder__sidebar span:first-child {
    width: 45%;
    margin-bottom: 18px;
    background: var(--arg-blue);
}

.arg-ui-placeholder__main {
    padding: 28px;
}

.arg-ui-placeholder__top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 28px;
}

.arg-ui-placeholder__top span {
    width: 32%;
    height: 9px;
    border-radius: 20px;
    background: var(--arg-line);
}

.arg-ui-placeholder__top span:last-child {
    width: 10%;
}

.arg-ui-placeholder__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.arg-ui-placeholder__stats span {
    height: 62px;
    border-radius: var(--arg-radius-sm);
    background: var(--arg-canvas);
}

.arg-ui-placeholder__chart {
    position: relative;
    height: 46%;
    margin-top: 24px;
    overflow: hidden;
    border-radius: var(--arg-radius-sm);
    background: var(--arg-canvas);
}

.arg-ui-placeholder__chart span {
    position: absolute;
    right: 12%;
    bottom: -10%;
    left: 12%;
    height: 65%;
    border-top: 3px solid var(--arg-blue);
    transform: skewY(-9deg);
}


/* ==========================================================
   INTEGRATION DIAGRAM
   ========================================================== */

.arg-solution-visual--integration {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
}

.arg-integration-diagram {
    position: relative;
    width: 100%;
    height: 100%;
}

.arg-integration-node {
    position: absolute;
    z-index: 2;
    min-width: 150px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--arg-radius);
    background: #202023;
}

.arg-integration-node small {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .48);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .10em;
}

.arg-integration-node strong {
    display: block;
    color: var(--arg-white);
    font-size: 13px;
    font-weight: 500;
}

.arg-integration-node--app {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.arg-integration-node--center {
    top: 50%;
    left: 50%;
    border-color: var(--arg-blue);
    background: var(--arg-blue);
    transform: translate(-50%, -50%);
}

.arg-integration-node--device {
    bottom: 0;
    left: 8%;
}

.arg-integration-node--data {
    right: 8%;
    bottom: 0;
}

.arg-integration-line {
    position: absolute;
    z-index: 1;
    display: block;
    width: 1px;
    background: rgba(255, 255, 255, .25);
    transform-origin: top center;
}

.arg-integration-line--one {
    top: 20%;
    left: 50%;
    height: 28%;
}

.arg-integration-line--two {
    top: 55%;
    left: 49%;
    height: 36%;
    transform: rotate(38deg);
}

.arg-integration-line--three {
    top: 55%;
    left: 51%;
    height: 36%;
    transform: rotate(-38deg);
}


/* ==========================================================
   SOLUTIONS CLOSING
   ========================================================== */

.arg-solutions__closing {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
}

.arg-solutions__closing h3 {
    margin: 0;
    color: var(--arg-ink);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.arg-solutions__closing p {
    max-width: 600px;
    margin: 12px 0 0;
    color: var(--arg-muted);
    font-size: 16px;
    line-height: 1.65;
}


/* ==========================================================
   SOLUTIONS RESPONSIVE
   ========================================================== */

@media (max-width: 1199.98px) {

    .arg-solution__row {
        --bs-gutter-x: 48px;
    }

    .arg-solution__visual--right {
        padding-left: 10px;
    }

    .arg-solution__visual--left {
        padding-right: 10px;
    }

}


@media (max-width: 991.98px) {

    .arg-solutions {
        padding: 110px 0;
    }

    .arg-solutions__header {
        margin-bottom: 96px;
    }

    .arg-solution {
        padding-bottom: 96px;
        margin-bottom: 96px;
    }

    .arg-solution__content,
    .arg-solution__content--right {
        max-width: 100%;
        margin-left: 0;
    }

    .arg-solution__mobile-visual {
        margin-top: 36px;
    }

    .arg-solution__description {
        max-width: 650px;
    }

}


@media (max-width: 767.98px) {

    .arg-solutions {
        padding: 88px 0 80px;
    }

    .arg-solutions__header {
        margin-bottom: 80px;
    }

    .arg-section-title {
        font-size: clamp(38px, 10.5vw, 48px);
        line-height: 1.08;
    }

    .arg-section-lead {
        margin-top: 22px;
        font-size: 17px;
    }

    .arg-solution {
        padding-bottom: 72px;
        margin-bottom: 72px;
    }

    .arg-solution__number {
        margin-bottom: 16px;
    }

    .arg-solution__title {
        font-size: clamp(34px, 9.5vw, 44px);
    }

    .arg-solution__mobile-visual {
        margin-top: 28px;
    }

    .arg-solution-visual {
        aspect-ratio: 4 / 3;
        border-radius: var(--arg-radius);
    }

    .arg-solution__description {
        margin-top: 26px;
        font-size: 16px;
    }

    .arg-capability-list {
        margin-top: 24px;
    }

    .arg-solution__action {
        margin-top: 28px;
    }

    .arg-solution-visual--software {
        padding: 0;
    }

    .arg-ui-placeholder__sidebar {
        padding: 16px 10px;
    }

    .arg-ui-placeholder__main {
        padding: 16px;
    }

    .arg-ui-placeholder__stats span {
        height: 38px;
    }

    .arg-solution-visual--integration {
        padding: 0;
    }

    .arg-integration-node {
        min-width: 105px;
        padding: 10px 11px;
    }

    .arg-integration-node strong {
        font-size: 10px;
    }

    .arg-integration-node small {
        font-size: 7px;
    }

    .arg-solutions__closing {
        align-items: flex-start;
        flex-direction: column;
        gap: 24px;
    }

    .arg-solutions__closing h3 {
        font-size: 24px;
    }

}
/* ==========================================================
   SCROLL REVEAL
   ========================================================== */

.arg-reveal {
    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity var(--arg-duration-reveal) var(--arg-ease),
        transform var(--arg-duration-reveal) var(--arg-ease);
}

.arg-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* ==========================================================
   OUR WORK
   ========================================================== */

.arg-work {
    padding: 150px 0 120px;
    color: var(--arg-white);
    background: var(--arg-ink);
}

.arg-eyebrow--dark {
    color: #8290ff;
}

.arg-section-title--dark {
    color: var(--arg-white);
}

.arg-work__header {
    margin-bottom: 104px;
}

.arg-work__intro {
    max-width: 430px;
    margin: 12px 0 0 auto;

    color: rgba(255, 255, 255, .62);

    font-size: 16px;
    line-height: 1.75;
}


/* ==========================================================
   COMMON WORK
   ========================================================== */

.arg-work__meta {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 22px;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.arg-work__meta span:first-child {
    color: var(--arg-red);
}

.arg-work__meta span:last-child {
    color: rgba(255, 255, 255, .45);
}

.arg-work__description {
    max-width: 520px;
    margin: 26px 0 0;

    color: rgba(255, 255, 255, .65);

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

.arg-work__capabilities {
    display: flex;
    flex-wrap: wrap;

    margin: 26px 0 32px;
    padding: 0;

    list-style: none;
}

.arg-text-action--dark {
    color: var(--arg-white);
}

.arg-text-action--dark:hover {
    color: #aab2ff;
}

.arg-work__placeholder-label {
    position: absolute;
    right: 16px;
    bottom: 16px;

    padding: 7px 9px;

    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--arg-radius-sm);

    color: rgba(255, 255, 255, .48);
    background: rgba(23, 23, 25, .84);

    font-size: 9px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}


/* ==========================================================
   FEATURED WORK
   ========================================================== */

.arg-work-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, .75fr);
    gap: 72px;

    align-items: center;

    padding-bottom: 128px;

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

.arg-work-featured__visual {
    position: relative;

    min-width: 0;
    aspect-ratio: 16 / 10;

    padding: 52px;

    overflow: hidden;

    border-radius: var(--arg-radius-lg);

    background: #222226;
}

.arg-work-featured__title {
    margin: 0;

    color: var(--arg-white);

    font-size: clamp(38px, 3.6vw, 54px);
    font-weight: 600;
    line-height: 1.08;

    letter-spacing: -.035em;
}


/* ==========================================================
   FEATURED UI PLACEHOLDER
   ========================================================== */

.arg-work-ui {
    position: relative;

    display: grid;
    grid-template-columns: 18% 1fr;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: var(--arg-radius);

    background: #f6f6f4;

    box-shadow: 0 30px 70px rgba(0, 0, 0, .22);
}

.arg-work-ui__sidebar {
    padding: 26px 18px;
    background: #111113;
}

.arg-work-ui__brand span {
    display: block;

    width: 36%;
    height: 7px;

    margin-bottom: 34px;

    border-radius: 10px;

    background: var(--arg-blue);
}

.arg-work-ui__nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.arg-work-ui__nav span {
    display: block;

    width: 70%;
    height: 6px;

    border-radius: 10px;

    background: rgba(255, 255, 255, .15);
}

.arg-work-ui__nav span.is-active {
    background: rgba(255, 255, 255, .45);
}

.arg-work-ui__main {
    padding: 26px;
}

.arg-work-ui__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.arg-work-ui__toolbar > span {
    width: 20%;
    height: 7px;

    border-radius: 10px;
    background: #d8d8d4;
}

.arg-work-ui__toolbar div {
    display: flex;
    gap: 8px;
}

.arg-work-ui__toolbar i {
    width: 20px;
    height: 20px;

    border-radius: 50%;
    background: #e4e4df;
}

.arg-work-ui__heading {
    margin-top: 32px;
}

.arg-work-ui__heading span {
    display: block;

    height: 8px;

    border-radius: 10px;
    background: #d7d7d2;
}

.arg-work-ui__heading span:first-child {
    width: 28%;
}

.arg-work-ui__heading span:last-child {
    width: 45%;
    height: 6px;

    margin-top: 10px;

    background: #e4e4df;
}

.arg-work-ui__summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;

    margin-top: 26px;
}

.arg-work-ui__summary span {
    height: 52px;

    border-radius: 6px;
    background: #eaeae6;
}

.arg-work-ui__body {
    display: grid;
    grid-template-columns: 1.5fr .8fr;
    gap: 12px;

    height: 38%;

    margin-top: 18px;
}

.arg-work-ui__chart,
.arg-work-ui__table {
    position: relative;

    overflow: hidden;

    border-radius: 6px;
    background: #eaeae6;
}

.arg-work-ui__chart span {
    position: absolute;
    right: 12%;
    bottom: 20%;
    left: 12%;

    height: 45%;

    border-top: 3px solid var(--arg-blue);

    transform: skewY(-8deg);
}

.arg-work-ui__table {
    display: flex;
    flex-direction: column;
    gap: 10px;

    padding: 16px;
}

.arg-work-ui__table span {
    height: 6px;

    border-radius: 10px;
    background: #d3d3ce;
}


/* ==========================================================
   SUPPORTING WORK GRID
   ========================================================== */

.arg-work-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;

    padding: 104px 0 112px;

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

.arg-work-card__visual {
    position: relative;

    aspect-ratio: 4 / 3;

    margin-bottom: 42px;

    overflow: hidden;

    border-radius: var(--arg-radius-lg);

    background: #222226;
}

.arg-work-card__title {
    margin: 0;

    color: var(--arg-white);

    font-size: clamp(32px, 2.7vw, 42px);
    font-weight: 600;
    line-height: 1.1;

    letter-spacing: -.03em;
}


/* ==========================================================
   DOCUMENT / DEVICE FLOW
   ========================================================== */

.arg-work-flow {
    position: absolute;
    inset: 0;
}

.arg-work-flow__node {
    position: absolute;
    z-index: 2;

    min-width: 116px;

    padding: 13px 15px;

    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--arg-radius);

    background: #29292d;
}

.arg-work-flow__node small {
    display: block;

    margin-bottom: 4px;

    color: rgba(255, 255, 255, .4);

    font-size: 8px;
    font-weight: 600;
    letter-spacing: .09em;
}

.arg-work-flow__node strong {
    color: var(--arg-white);

    font-size: 11px;
    font-weight: 500;
}

.arg-work-flow__node--document {
    top: 16%;
    left: 10%;
}

.arg-work-flow__node--application {
    top: 39%;
    left: 34%;

    border-color: var(--arg-blue);
    background: var(--arg-blue);
}

.arg-work-flow__node--device {
    top: 18%;
    right: 10%;
}

.arg-work-flow__node--output {
    right: 17%;
    bottom: 13%;
}

.arg-work-flow__line {
    position: absolute;
    z-index: 1;

    display: block;

    height: 1px;

    background: rgba(255, 255, 255, .20);

    transform-origin: left center;
}

.arg-work-flow__line--one {
    top: 31%;
    left: 25%;

    width: 24%;

    transform: rotate(24deg);
}

.arg-work-flow__line--two {
    top: 46%;
    left: 52%;

    width: 27%;

    transform: rotate(-27deg);
}

.arg-work-flow__line--three {
    top: 56%;
    left: 53%;

    width: 27%;

    transform: rotate(31deg);
}


/* ==========================================================
   AFFILIATE UI
   ========================================================== */

.arg-work-card__visual--affiliate {
    padding: 38px;

    background: #202024;
}

.arg-affiliate-ui {
    width: 100%;
    height: 100%;

    padding: 24px;

    border-radius: var(--arg-radius);

    background: #f6f6f4;
}

.arg-affiliate-ui__top {
    display: flex;
    justify-content: space-between;
}

.arg-affiliate-ui__top span {
    width: 25%;
    height: 7px;

    border-radius: 10px;
    background: #d8d8d4;
}

.arg-affiliate-ui__top span:last-child {
    width: 8%;
}

.arg-affiliate-ui__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    margin-top: 24px;
}

.arg-affiliate-ui__metrics span {
    height: 54px;

    border-radius: 6px;
    background: #e9e9e5;
}

.arg-affiliate-ui__content {
    display: grid;
    grid-template-columns: 1.4fr .8fr;
    gap: 10px;

    height: 48%;

    margin-top: 18px;
}

.arg-affiliate-ui__graph,
.arg-affiliate-ui__list {
    position: relative;

    overflow: hidden;

    border-radius: 6px;
    background: #e9e9e5;
}

.arg-affiliate-ui__graph span {
    position: absolute;
    right: 12%;
    bottom: 24%;
    left: 12%;

    height: 38%;

    border-top: 3px solid var(--arg-blue);

    transform: skewY(-7deg);
}

.arg-affiliate-ui__list {
    display: flex;
    flex-direction: column;
    gap: 9px;

    padding: 14px;
}

.arg-affiliate-ui__list span {
    height: 6px;

    border-radius: 10px;
    background: #d0d0cb;
}


/* ==========================================================
   MORE WORK
   ========================================================== */

.arg-work-more {
    padding-top: 96px;
}

.arg-work-more__eyebrow {
    margin: 0 0 28px;

    color: var(--arg-white);

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

    letter-spacing: .1em;
    text-transform: uppercase;
}

.arg-work-more__services {
    display: flex;
    flex-wrap: wrap;

    max-width: 1050px;

    margin-bottom: 42px;
}

.arg-work-more__services span {
    position: relative;

    color: rgba(255, 255, 255, .72);

    font-size: clamp(21px, 2.1vw, 30px);
    font-weight: 500;
    line-height: 1.55;

    letter-spacing: -.02em;
}

.arg-work-more__services span:not(:last-child)::after {
    content: "·";

    margin: 0 13px;

    color: rgba(255, 255, 255, .24);
}


/* ==========================================================
   OUR WORK RESPONSIVE
   ========================================================== */

@media (max-width: 1199.98px) {

    .arg-work-featured {
        grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr);
        gap: 48px;
    }

    .arg-work-featured__visual {
        padding: 38px;
    }

    .arg-work-grid {
        gap: 44px;
    }

}


@media (max-width: 991.98px) {

    .arg-work {
        padding: 110px 0;
    }

    .arg-work__header {
        margin-bottom: 80px;
    }

    .arg-work__intro {
        max-width: 620px;
        margin: 28px 0 0;
    }

    .arg-work-featured {
        grid-template-columns: 1fr;
        gap: 48px;

        padding-bottom: 96px;
    }

    .arg-work-featured__visual {
        aspect-ratio: 16 / 10;
    }

    .arg-work-featured__content {
        max-width: 620px;
    }

    .arg-work-grid {
        grid-template-columns: 1fr;
        gap: 96px;

        padding: 96px 0;
    }

    .arg-work-card {
        max-width: 760px;
    }

    .arg-work-card:nth-child(even) {
        margin-left: auto;
    }

}


@media (max-width: 767.98px) {

    .arg-work {
        padding: 88px 0;
    }

    .arg-work__header {
        margin-bottom: 64px;
    }

    .arg-work__intro {
        font-size: 16px;
    }

    .arg-work-featured {
        gap: 34px;
        padding-bottom: 72px;
    }

    .arg-work-featured__visual {
        aspect-ratio: 4 / 3;
        padding: 18px;

        border-radius: var(--arg-radius);
    }

    .arg-work-featured__title {
        font-size: clamp(34px, 9.5vw, 44px);
    }

    .arg-work__description {
        margin-top: 22px;
        font-size: 15px;
    }

    .arg-work__capabilities {
        margin: 22px 0 28px;
    }

    .arg-work-grid {
        gap: 72px;

        padding: 72px 0;
    }

    .arg-work-card__visual {
        margin-bottom: 30px;

        border-radius: var(--arg-radius);
    }

    .arg-work-card__title {
        font-size: clamp(31px, 8.5vw, 39px);
    }

    .arg-work-card__visual--affiliate {
        padding: 18px;
    }

    .arg-affiliate-ui {
        padding: 15px;
    }

    .arg-work-flow__node {
        min-width: 90px;
        padding: 9px 10px;
    }

    .arg-work-flow__node small {
        font-size: 6px;
    }

    .arg-work-flow__node strong {
        font-size: 9px;
    }

    .arg-work-more {
        padding-top: 72px;
    }

    .arg-work-more__services {
        margin-bottom: 34px;
    }

    .arg-work-more__services span {
        font-size: 21px;
        line-height: 1.65;
    }

    .arg-work-more__services span:not(:last-child)::after {
        margin: 0 8px;
    }

}

/* ==========================================================
   ECOSYSTEM
   ========================================================== */

.arg-ecosystem {
    padding: 150px 0 104px;
    background: var(--arg-canvas);
}

.arg-ecosystem__header {
    margin-bottom: 96px;
}

.arg-ecosystem__intro {
    max-width: 430px;
    margin: 12px 0 0 auto;

    color: var(--arg-text);

    font-size: 16px;
    line-height: 1.75;
}


/* ==========================================================
   BUSINESS SHOWCASE
   ========================================================== */

.arg-business {
    padding-bottom: 120px;
    margin-bottom: 120px;

    border-bottom: 1px solid var(--arg-line);
}

.arg-business__row {
    --bs-gutter-x: 80px;
}

.arg-business__content {
    max-width: 500px;
}

.arg-business__content--right {
    margin-left: auto;
}

.arg-business__brand {
    display: flex;
    align-items: center;

    min-height: 52px;
    margin-bottom: 28px;
}

.arg-business__logo {
    display: block;

    width: auto;
    max-width: 220px;
    max-height: 52px;

    object-fit: contain;
    object-position: left center;
}

.arg-business__category {
    margin: 0 0 18px;

    color: var(--arg-muted);

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

    letter-spacing: .1em;
    text-transform: uppercase;
}

.arg-business__title {
    max-width: 520px;
    margin: 0;

    color: var(--arg-ink);

    font-size: clamp(38px, 3.2vw, 50px);
    font-weight: 600;
    line-height: 1.1;

    letter-spacing: -.035em;
}

.arg-business__description {
    max-width: 490px;

    margin: 28px 0 32px;

    color: var(--arg-text);

    font-size: 16px;
    line-height: 1.72;
}


/* ==========================================================
   BUSINESS VISUAL
   ========================================================== */

.arg-business__visual {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 10;

    padding: 46px;

    overflow: hidden;

    border-radius: var(--arg-radius-lg);
}

.arg-business__visual--cloutela {
    background: #eef2f7;
}

.arg-business__visual--casys {
    background: #f1eee8;
}


/* ==========================================================
   PRODUCT UI PLACEHOLDER
   ========================================================== */

.arg-product-ui {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border: 1px solid rgba(23, 23, 25, .08);
    border-radius: var(--arg-radius);

    background: var(--arg-white);

    box-shadow: 0 28px 70px rgba(23, 23, 25, .10);
}

.arg-product-ui__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 15%;

    padding: 0 22px;

    border-bottom: 1px solid #ecece8;
}

.arg-product-ui__logo-mark {
    display: block;

    width: 28px;
    height: 7px;

    border-radius: 20px;

    background: #77869a;
}

.arg-product-ui--casys .arg-product-ui__logo-mark {
    background: #3c4855;
}

.arg-product-ui__topbar > div {
    display: flex;
    gap: 7px;
}

.arg-product-ui__topbar > div span {
    display: block;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background: #eeeeea;
}

.arg-product-ui__body {
    display: grid;
    grid-template-columns: 18% 1fr;

    height: 85%;
}

.arg-product-ui__sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;

    padding: 22px 16px;

    border-right: 1px solid #ecece8;

    background: #fafaf8;
}

.arg-product-ui__sidebar span {
    display: block;

    width: 72%;
    height: 6px;

    border-radius: 20px;

    background: #deded9;
}

.arg-product-ui__sidebar span:first-child {
    width: 46%;
}

.arg-product-ui__main {
    padding: 24px;
}

.arg-product-ui__heading span {
    display: block;

    height: 7px;

    border-radius: 20px;

    background: #dadad5;
}

.arg-product-ui__heading span:first-child {
    width: 26%;
}

.arg-product-ui__heading span:last-child {
    width: 42%;
    height: 5px;

    margin-top: 9px;

    background: #e8e8e4;
}

.arg-product-ui__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    margin-top: 22px;
}

.arg-product-ui__metrics span {
    height: 50px;

    border-radius: 6px;

    background: #f0f0ed;
}

.arg-product-ui__workspace {
    display: grid;
    grid-template-columns: 1.5fr .75fr;
    gap: 10px;

    height: 43%;

    margin-top: 16px;
}

.arg-product-ui__workspace div {
    position: relative;

    overflow: hidden;

    border-radius: 6px;

    background: #f0f0ed;
}

.arg-product-ui__workspace div:first-child::after {
    content: "";

    position: absolute;

    right: 12%;
    bottom: 25%;
    left: 12%;

    height: 38%;

    border-top: 3px solid #77869a;

    transform: skewY(-7deg);
}

.arg-product-ui--casys
.arg-product-ui__workspace div:first-child::after {
    border-color: #3c4855;
}

.arg-product-ui__label {
    position: absolute;

    right: 14px;
    bottom: 14px;

    padding: 7px 9px;

    border-radius: var(--arg-radius-sm);

    color: var(--arg-muted);
    background: rgba(255, 255, 255, .92);

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

    letter-spacing: .06em;
    text-transform: uppercase;
}


/* ==========================================================
   ECOSYSTEM CLOSING
   ========================================================== */

.arg-ecosystem__closing {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 48px;
}

.arg-ecosystem__closing p {
    max-width: 570px;
    margin: 0;

    color: var(--arg-muted);

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


/* ==========================================================
   GROW WITH US
   ========================================================== */

.arg-grow {
    padding: 0 0 128px;

    background: var(--arg-canvas);
}

.arg-grow__inner {
    position: relative;

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

    align-items: end;
    gap: 80px;

    padding: 88px 92px;

    overflow: hidden;

    border-radius: var(--arg-radius-lg);

    background: var(--arg-blue);
}

.arg-grow__inner::after {
    content: "";

    position: absolute;

    right: -60px;
    bottom: 36px;

    width: 210px;
    height: 12px;

    background: rgba(255, 255, 255, .14);

    transform: rotate(-42deg);

    pointer-events: none;
}

.arg-grow__content {
    position: relative;
    z-index: 1;

    max-width: 720px;
}

.arg-grow__eyebrow {
    margin: 0 0 24px;

    color: rgba(255, 255, 255, .70);

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

    letter-spacing: .11em;
    text-transform: uppercase;
}

.arg-grow__title {
    margin: 0;

    color: var(--arg-white);

    font-size: clamp(46px, 4.4vw, 64px);
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -.04em;
}

.arg-grow__description {
    max-width: 620px;

    margin: 28px 0 0;

    color: rgba(255, 255, 255, .74);

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

.arg-grow__action {
    position: relative;
    z-index: 1;

    padding-bottom: 6px;
}

.arg-grow__link {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: var(--arg-white);

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

    text-decoration: none;
}

.arg-grow__link span {
    transition: transform var(--arg-duration-fast) var(--arg-ease);
}

.arg-grow__link:hover {
    color: var(--arg-white);
}

.arg-grow__link:hover span {
    transform: translate(2px, -2px);
}


/* ==========================================================
   ECOSYSTEM RESPONSIVE
   ========================================================== */

@media (max-width: 1199.98px) {

    .arg-business__row {
        --bs-gutter-x: 54px;
    }

    .arg-business__visual {
        padding: 34px;
    }

    .arg-grow__inner {
        padding: 72px;
    }

}


@media (max-width: 991.98px) {

    .arg-ecosystem {
        padding: 110px 0;
    }

    .arg-ecosystem__header {
        margin-bottom: 88px;
    }

    .arg-ecosystem__intro {
        max-width: 620px;
        margin: 28px 0 0;
    }

    .arg-business {
        padding-bottom: 96px;
        margin-bottom: 96px;
    }

    .arg-business__content,
    .arg-business__content--right {
        max-width: 650px;
        margin-left: 0;
    }

    .arg-business__visual {
        margin-top: 48px;
    }

    /*
       CASYS uses order utilities in HTML:
       content first on mobile/tablet,
       visual first on desktop.
    */

    .arg-grow {
        padding-bottom: 104px;
    }

    .arg-grow__inner {
        grid-template-columns: 1fr;

        align-items: start;
        gap: 40px;

        padding: 64px;
    }

}


@media (max-width: 767.98px) {

    .arg-ecosystem {
        padding: 88px 0 80px;
    }

    .arg-ecosystem__header {
        margin-bottom: 72px;
    }

    .arg-business {
        padding-bottom: 72px;
        margin-bottom: 72px;
    }

    .arg-business__brand {
        min-height: 42px;
        margin-bottom: 22px;
    }

    .arg-business__logo {
        max-width: 170px;
        max-height: 42px;
    }

    .arg-business__category {
        margin-bottom: 14px;
    }

    .arg-business__title {
        font-size: clamp(34px, 9.5vw, 43px);
    }

    .arg-business__description {
        margin: 22px 0 28px;

        font-size: 16px;
    }

    .arg-business__visual {
        aspect-ratio: 4 / 3;

        margin-top: 34px;
        padding: 18px;

        border-radius: var(--arg-radius);
    }

    .arg-product-ui__topbar {
        padding: 0 12px;
    }

    .arg-product-ui__sidebar {
        gap: 10px;
        padding: 14px 8px;
    }

    .arg-product-ui__main {
        padding: 14px;
    }

    .arg-product-ui__metrics {
        gap: 6px;
        margin-top: 16px;
    }

    .arg-product-ui__metrics span {
        height: 34px;
    }

    .arg-product-ui__workspace {
        gap: 6px;
        margin-top: 10px;
    }

    .arg-ecosystem__closing {
        align-items: flex-start;
        flex-direction: column;

        gap: 24px;
    }

    .arg-grow {
        padding-bottom: 80px;
    }

    .arg-grow__inner {
        gap: 34px;

        padding: 52px 28px;

        border-radius: var(--arg-radius);
    }

    .arg-grow__title {
        font-size: clamp(40px, 11vw, 50px);
    }

    .arg-grow__description {
        margin-top: 22px;

        font-size: 16px;
    }

    .arg-grow__inner::after {
        right: -80px;
        bottom: 28px;

        width: 180px;
        height: 10px;
    }

}

/* ==========================================================
   INSIGHTS
   ========================================================== */

.arg-insights {
    padding: 150px 0 140px;

    background: var(--arg-canvas);
}


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

.arg-insights__header {
    margin-bottom: 72px;
}

.arg-insights__intro {
    max-width: 430px;
    margin-left: auto;
}

.arg-insights__intro p {
    margin: 0 0 28px;

    color: var(--arg-text);

    font-size: 16px;
    line-height: 1.75;
}


/* ==========================================================
   FEATURED INSIGHT
   ========================================================== */

.arg-insight-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(360px, .75fr);

    gap: 80px;

    align-items: center;

    padding-bottom: 112px;

    border-bottom: 1px solid var(--arg-line);
}

.arg-insight-featured__visual {
    display: block;

    color: inherit;

    text-decoration: none;
}

.arg-insight-featured__content {
    max-width: 500px;
}


/* ==========================================================
   META
   ========================================================== */

.arg-insight-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 22px;

    color: var(--arg-muted);

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

    letter-spacing: .09em;
    text-transform: uppercase;
}

.arg-insight-meta span:first-child {
    color: var(--arg-blue);
}


/* ==========================================================
   FEATURED TYPOGRAPHY
   ========================================================== */

.arg-insight-featured__title {
    margin: 0;

    font-size: clamp(38px, 3.3vw, 52px);
    font-weight: 600;
    line-height: 1.08;

    letter-spacing: -.04em;
}

.arg-insight-featured__title a {
    color: var(--arg-ink);

    text-decoration: none;

    transition:
        color var(--arg-duration-fast) var(--arg-ease);
}

.arg-insight-featured__title a:hover {
    color: var(--arg-blue);
}

.arg-insight-featured__excerpt {
    margin: 28px 0 32px;

    color: var(--arg-text);

    font-size: 16px;
    line-height: 1.72;
}


/* ==========================================================
   FEATURED TEMPORARY VISUAL
   ========================================================== */

.arg-insight-visual {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 10;

    overflow: hidden;

    border-radius: var(--arg-radius-lg);

    background: var(--arg-ink);
}

.arg-insight-visual__grid {
    position: absolute;
    inset: 0;

    opacity: .25;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .08) 1px,
            transparent 1px
        );

    background-size: 52px 52px;
}

.arg-insight-visual__diagram {
    position: absolute;

    inset: 0;

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

.arg-insight-node {
    position: absolute;
    z-index: 2;

    display: flex;
    flex-direction: column;

    min-width: 145px;

    padding: 18px 20px;

    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--arg-radius);

    background: rgba(255, 255, 255, .05);
}

.arg-insight-node span {
    margin-bottom: 8px;

    color: rgba(255, 255, 255, .45);

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

    letter-spacing: .08em;
}

.arg-insight-node strong {
    color: var(--arg-white);

    font-size: 13px;
    font-weight: 500;
}

.arg-insight-node--left {
    left: 10%;
    top: 34%;
}

.arg-insight-node--center {
    left: 50%;
    top: 50%;

    border-color: transparent;

    background: var(--arg-blue);

    transform: translate(-50%, -50%);
}

.arg-insight-node--center span {
    color: rgba(255, 255, 255, .58);
}

.arg-insight-node--right {
    right: 10%;
    bottom: 25%;
}


/* ==========================================================
   DIAGRAM LINES
   ========================================================== */

.arg-insight-line {
    position: absolute;
    z-index: 1;

    height: 1px;

    background: rgba(255, 255, 255, .22);

    transform-origin: left center;
}

.arg-insight-line--left {
    left: 27%;
    top: 45%;

    width: 24%;

    transform: rotate(8deg);
}

.arg-insight-line--right {
    left: 56%;
    top: 55%;

    width: 24%;

    transform: rotate(12deg);
}

.arg-insight-visual__caption {
    position: absolute;

    right: 18px;
    bottom: 18px;

    color: rgba(255, 255, 255, .38);

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

    letter-spacing: .08em;
    text-transform: uppercase;
}


/* ==========================================================
   ACTUAL FEATURED IMAGE — READY FOR LATER
   ========================================================== */

.arg-insight-featured__visual > img {
    display: block;

    width: 100%;
    aspect-ratio: 16 / 10;

    object-fit: cover;

    border-radius: var(--arg-radius-lg);

    transition:
        transform var(--arg-duration-normal) var(--arg-ease);
}

.arg-insight-featured__visual:hover > img {
    transform: scale(1.015);
}


/* ==========================================================
   SUPPORTING INSIGHTS
   ========================================================== */

.arg-insights-supporting {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 80px;

    padding-top: 88px;
}

.arg-insight-item {
    position: relative;
}

.arg-insight-item:first-child {
    padding-right: 80px;

    border-right: 1px solid var(--arg-line);
}

.arg-insight-item__title {
    max-width: 540px;

    margin: 0;

    font-size: clamp(28px, 2.4vw, 36px);
    font-weight: 600;
    line-height: 1.18;

    letter-spacing: -.03em;
}

.arg-insight-item__title a {
    color: var(--arg-ink);

    text-decoration: none;

    transition:
        color var(--arg-duration-fast) var(--arg-ease);
}

.arg-insight-item__title a:hover {
    color: var(--arg-blue);
}

.arg-insight-item__excerpt {
    max-width: 540px;

    margin: 24px 0 28px;

    color: var(--arg-text);

    font-size: 15px;
    line-height: 1.72;
}


/* ==========================================================
   INSIGHTS RESPONSIVE
   ========================================================== */

@media (max-width: 1199.98px) {

    .arg-insight-featured {
        grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);

        gap: 56px;
    }

    .arg-insights-supporting {
        gap: 56px;
    }

    .arg-insight-item:first-child {
        padding-right: 56px;
    }

}


@media (max-width: 991.98px) {

    .arg-insights {
        padding: 110px 0;
    }

    .arg-insights__header {
        margin-bottom: 64px;
    }

    .arg-insights__intro {
        max-width: 620px;

        margin: 28px 0 0;
    }

    .arg-insight-featured {
        grid-template-columns: 1fr;

        gap: 48px;

        padding-bottom: 88px;
    }

    .arg-insight-featured__content {
        max-width: 680px;
    }

    .arg-insights-supporting {
        gap: 48px;

        padding-top: 72px;
    }

    .arg-insight-item:first-child {
        padding-right: 48px;
    }

}


@media (max-width: 767.98px) {

    .arg-insights {
        padding: 88px 0 84px;
    }

    .arg-insights__header {
        margin-bottom: 56px;
    }

    .arg-insights__intro {
        margin-top: 24px;
    }

    .arg-insights__intro p {
        margin-bottom: 24px;
    }


    /* Featured */

    .arg-insight-featured {
        gap: 34px;

        padding-bottom: 64px;
    }

    .arg-insight-visual {
        aspect-ratio: 4 / 3;

        border-radius: var(--arg-radius);
    }

    .arg-insight-featured__title {
        font-size: clamp(32px, 9vw, 40px);
    }

    .arg-insight-featured__excerpt {
        margin: 22px 0 26px;
    }


    /* Placeholder diagram */

    .arg-insight-node {
        min-width: 94px;

        padding: 12px;
    }

    .arg-insight-node span {
        margin-bottom: 5px;

        font-size: 7px;
    }

    .arg-insight-node strong {
        font-size: 10px;
    }

    .arg-insight-node--left {
        left: 6%;
    }

    .arg-insight-node--right {
        right: 6%;
    }

    .arg-insight-visual__caption {
        right: 12px;
        bottom: 12px;

        font-size: 7px;
    }


    /* Supporting */

    .arg-insights-supporting {
        grid-template-columns: 1fr;

        gap: 0;

        padding-top: 0;
    }

    .arg-insight-item {
        padding: 56px 0;
    }

    .arg-insight-item:first-child {
        padding-right: 0;

        border-right: 0;
        border-bottom: 1px solid var(--arg-line);
    }

    .arg-insight-item:last-child {
        padding-bottom: 0;
    }

    .arg-insight-item__title {
        font-size: clamp(28px, 8vw, 34px);
    }

    .arg-insight-item__excerpt {
        margin: 20px 0 26px;
    }

}
/* =========================================================
   PEOPLE / ABOUT ARGENESIA
========================================================= */

.arg-people {
    position: relative;
    padding: 144px 0 160px;
    background: var(--arg-white);
    overflow: hidden;
}

.arg-people__intro {
    margin-bottom: 72px;
}

.arg-people__title {
    max-width: 760px;
    margin: 26px 0 0;

    font-size: clamp(48px, 4.5vw, 72px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.045em;

    color: var(--arg-ink);
}

.arg-people__content {
    padding-bottom: 7px;
}

.arg-people__content p {
    max-width: 460px;
    margin: 0 0 30px;

    font-size: 17px;
    line-height: 1.7;

    color: var(--arg-text);
}


/* ---------------------------------------------------------
   TEAM VISUAL
--------------------------------------------------------- */

.arg-people__visual {
    position: relative;
    width: 100%;
}

.arg-people__placeholder {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 7.5;

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

    overflow: hidden;

    background:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        #171719;

    background-size: 72px 72px;

    border-radius: 16px;
}


/* temporary label */

.arg-people__placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    text-align: center;
}

.arg-people__placeholder-content span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    color: rgba(255,255,255,.45);
}

.arg-people__placeholder-content strong {
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 500;
    letter-spacing: -.025em;
    color: #fff;
}


/* ---------------------------------------------------------
   A-GEOMETRY SIGNATURE
--------------------------------------------------------- */

.arg-people__signature {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 110px;
    height: 12px;

    background: var(--arg-red);

    transform:
        translate(20px, -25px)
        rotate(-45deg);

    transform-origin: center;

    pointer-events: none;
}


/* =========================================================
   ACTUAL TEAM IMAGE — USE LATER
========================================================= */

/*

HTML replacement:

<div class="arg-people__image">
    <img
        src="/assets/images/team/argenesia-team.webp"
        alt="Tim Argenesia"
        loading="lazy"
    >
</div>

*/

.arg-people__image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7.5;

    overflow: hidden;
    border-radius: 16px;
}

.arg-people__image img {
    width: 100%;
    height: 100%;

    display: block;

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


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .arg-people {
        padding: 104px 0 112px;
    }

    .arg-people__intro {
        margin-bottom: 56px;
    }

    .arg-people__content {
        margin-top: 32px;
        padding-bottom: 0;
    }

}


@media (max-width: 767.98px) {

    .arg-people {
        padding: 80px 0 88px;
    }

    .arg-people__intro {
        margin-bottom: 48px;
    }

    .arg-people__title {
        margin-top: 22px;

        font-size: clamp(40px, 11vw, 52px);
        line-height: 1.04;
        letter-spacing: -0.04em;
    }

    .arg-people__content {
        margin-top: 28px;
    }

    .arg-people__content p {
        margin-bottom: 26px;

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

    .arg-people__placeholder,
    .arg-people__image {
        aspect-ratio: 4 / 3;
        border-radius: 12px;
    }

    .arg-people__placeholder {
        background-size: 48px 48px;
    }

    .arg-people__placeholder-content {
        padding: 32px;
    }

    .arg-people__placeholder-content strong {
        font-size: 25px;
    }

    .arg-people__signature {
        width: 76px;
        height: 9px;

        transform:
            translate(16px, -20px)
            rotate(-45deg);
    }

}

/* =========================================================
   FINAL CTA / LET'S TALK
========================================================= */

.arg-final-cta {
    position: relative;

    padding: 96px 0 112px;

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

.arg-final-cta__inner {
    position: relative;

    padding: 88px 80px;

    overflow: hidden;

    background: var(--arg-blue);
    border-radius: 16px;

    color: #fff;
}


/* eyebrow */

.arg-final-cta__eyebrow {
    display: block;

    margin-bottom: 30px;

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

    letter-spacing: .12em;

    color: rgba(255, 255, 255, .68);
}


/* title */

.arg-final-cta__title {
    max-width: 780px;

    margin: 0 0 30px;

    font-size: clamp(56px, 5vw, 80px);
    font-weight: 600;
    line-height: .98;

    letter-spacing: -.05em;

    color: #fff;
}


/* description */

.arg-final-cta__description {
    max-width: 640px;

    margin: 0 0 40px;

    font-size: 18px;
    line-height: 1.7;

    color: rgba(255, 255, 255, .76);
}


/* primary conversion */

.arg-final-cta__button {
    min-height: 56px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 28px;

    padding: 0 24px;

    border-radius: 10px;

    background: #fff;
    color: var(--arg-blue);

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

    text-decoration: none;

    transition:
        background-color 160ms ease,
        transform 160ms ease;
}

.arg-final-cta__button:hover {
    background: var(--arg-blue-soft);
    color: var(--arg-blue);
}

.arg-final-cta__button span:last-child {
    transition: transform 160ms ease;
}

.arg-final-cta__button:hover span:last-child {
    transform: translateX(4px);
}


/* email */

.arg-final-cta__email {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    padding-bottom: 5px;
}

.arg-final-cta__email > span {
    margin-bottom: 12px;

    font-size: 13px;
    font-weight: 500;

    color: rgba(255,255,255,.58);
}

.arg-final-cta__email a {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: #fff;

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

    text-decoration: none;
}

.arg-final-cta__email a span {
    transition: transform 160ms ease;
}

.arg-final-cta__email a:hover span {
    transform: translateX(4px);
}


/* signature */

.arg-final-cta__signature {
    position: absolute;

    right: -24px;
    bottom: 42px;

    width: 150px;
    height: 16px;

    background: rgba(255,255,255,.12);

    transform: rotate(-45deg);

    pointer-events: none;
}

/* =========================================================
   FOOTER
========================================================= */

.arg-footer {
    padding: 96px 0 32px;

    background: var(--arg-ink);
    color: #fff;
}


/* ---------------------------------------------------------
   MAIN
--------------------------------------------------------- */

.arg-footer__main {
    padding-bottom: 88px;
}


/* brand */

.arg-footer__brand {
    max-width: 300px;
}

.arg-footer__logo {
    display: inline-block;

    margin-bottom: 34px;
}

.arg-footer__logo img {
    display: block;

    width: 190px;
    height: auto;
}

.arg-footer__wordmark {
    display: inline-block;

    margin-bottom: 34px;

    color: #fff;

    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.04em;

    text-decoration: none;
}

.arg-footer__tagline {
    margin: 0 0 12px;

    font-size: 19px;
    font-weight: 500;

    color: #fff;
}

.arg-footer__corporate {
    margin: 0;

    font-size: 14px;
    line-height: 1.65;

    color: rgba(255,255,255,.48);
}


/* ---------------------------------------------------------
   NAV
--------------------------------------------------------- */

.arg-footer__label {
    display: block;

    margin-bottom: 24px;

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

    letter-spacing: .12em;

    color: rgba(255,255,255,.42);
}

.arg-footer__nav {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 15px;
}

.arg-footer__nav a {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: rgba(255,255,255,.72);

    font-size: 14px;
    line-height: 1.45;

    text-decoration: none;

    transition: color 160ms ease;
}

.arg-footer__nav a:hover {
    color: #fff;
}


/* external arrow */

.arg-footer__nav a span {
    transition: transform 160ms ease;
}

.arg-footer__nav a:hover span {
    transform: translate(2px, -2px);
}


/* ---------------------------------------------------------
   CONTACT
--------------------------------------------------------- */

.arg-footer__contact {
    padding: 48px 0;

    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.arg-footer__company-name {
    margin: 0;

    font-size: 18px;
    font-weight: 500;

    color: #fff;
}

.arg-footer__address {
    max-width: 650px;

    margin: 0;

    font-style: normal;
}

.arg-footer__address a {
    display: inline-block;

    margin-right: 28px;
    margin-bottom: 18px;

    color: #fff;

    font-size: 15px;
    font-weight: 500;

    text-decoration: none;
}

.arg-footer__address a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.arg-footer__address p {
    max-width: 620px;

    margin: 0;

    color: rgba(255,255,255,.52);

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


/* ---------------------------------------------------------
   BOTTOM
--------------------------------------------------------- */

.arg-footer__bottom {
    display: flex;

    align-items: center;

    padding-top: 28px;

    font-size: 13px;
}

.arg-footer__copyright {
    color: rgba(255,255,255,.42);
}

.arg-footer__social {
    display: flex;

    gap: 22px;

    margin-left: auto;
}

.arg-footer__legal {
    display: flex;

    gap: 22px;

    margin-left: 52px;
}

.arg-footer__social a,
.arg-footer__legal a {
    color: rgba(255,255,255,.58);

    text-decoration: none;

    transition: color 160ms ease;
}

.arg-footer__social a:hover,
.arg-footer__legal a:hover {
    color: #fff;
}

/* =========================================================
   FINAL CTA + FOOTER RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .arg-final-cta {
        padding: 104px 0;
    }

    .arg-final-cta__inner {
        padding: 72px 56px;
    }

    .arg-final-cta__email {
        margin-top: 56px;
    }


    /* footer */

    .arg-footer {
        padding-top: 80px;
    }

    .arg-footer__brand {
        margin-bottom: 64px;
    }

    .arg-footer__nav {
        margin-bottom: 48px;
    }

    .arg-footer__main {
        padding-bottom: 40px;
    }

    .arg-footer__address {
        margin-top: 32px;
    }

}


@media (max-width: 767.98px) {

    /* ---------------------------------------------
       FINAL CTA
    --------------------------------------------- */

    .arg-final-cta {
        padding: 72px 0;
    }

    .arg-final-cta__inner {
        padding: 56px 28px 52px;

        border-radius: 12px;
    }

    .arg-final-cta__eyebrow {
        margin-bottom: 24px;
    }

    .arg-final-cta__title {
        margin-bottom: 26px;

        font-size: clamp(46px, 13vw, 58px);
        line-height: .99;
    }

    .arg-final-cta__description {
        margin-bottom: 34px;

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

    .arg-final-cta__button {
        min-height: 56px;

        gap: 24px;

        padding: 0 22px;
    }

    .arg-final-cta__email {
        margin-top: 52px;
    }

    .arg-final-cta__email a {
        font-size: 16px;
    }

    .arg-final-cta__signature {
        width: 100px;
        height: 11px;

        right: -28px;
        bottom: 34px;
    }


    /* ---------------------------------------------
       FOOTER
    --------------------------------------------- */

    .arg-footer {
        padding: 72px 0 28px;
    }

    .arg-footer__main {
        padding-bottom: 16px;
    }

    .arg-footer__brand {
        margin-bottom: 56px;
    }

    .arg-footer__logo {
        margin-bottom: 28px;
    }

    .arg-footer__logo img {
        width: 170px;
    }

    .arg-footer__tagline {
        font-size: 18px;
    }

    .arg-footer__nav {
        gap: 14px;

        margin-bottom: 48px;
    }

    .arg-footer__label {
        margin-bottom: 20px;
    }

    .arg-footer__contact {
        padding: 40px 0;
    }

    .arg-footer__address {
        margin-top: 30px;
    }

    .arg-footer__address a {
        display: block;

        margin-right: 0;
        margin-bottom: 14px;
    }

    .arg-footer__bottom {
        flex-direction: column;
        align-items: flex-start;

        gap: 24px;

        padding-top: 28px;
    }

    .arg-footer__social,
    .arg-footer__legal {
        margin-left: 0;
    }

}
/* ==========================================================
   MOBILE NAVIGATION — STRUCTURE FIX
   ========================================================== */

@media (max-width: 991.98px) {

    /* ------------------------------------------------------
       Offcanvas
       ------------------------------------------------------ */

    .arg-mobile-nav {
        --bs-offcanvas-width: min(100%, 430px);

        width: var(--bs-offcanvas-width) !important;

        background: var(--arg-canvas);
        border-left: 0 !important;
    }


    /* ------------------------------------------------------
       Header
       ------------------------------------------------------ */

    .arg-mobile-nav .offcanvas-header,
    .arg-mobile-nav__header {
        min-height: var(--arg-navbar-height);

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

        padding: 0 20px;

        border-bottom: 1px solid var(--arg-line);
    }

    .arg-mobile-nav__brand {
        display: inline-flex;
        align-items: center;
    }

    .arg-mobile-nav__brand img,
    .arg-mobile-nav__logo {
        display: block;

        width: auto;
        height: 38px;
    }


    /* ------------------------------------------------------
       Body
       ------------------------------------------------------ */

    .arg-mobile-nav .offcanvas-body,
    .arg-mobile-nav__body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;

        padding: 28px 20px 24px;

        overflow-y: auto;
    }


    /* ------------------------------------------------------
       Main Navigation
       Supports NAV and UL structures
       ------------------------------------------------------ */

    .arg-mobile-nav__menu {
        width: 100%;

        display: flex;
        flex-direction: column;

        margin: 0;
        padding: 0;

        list-style: none;
    }

    .arg-mobile-nav__menu > li {
        width: 100%;

        display: block;

        border-bottom: 1px solid var(--arg-line);
    }

    .arg-mobile-nav__menu > a,
    .arg-mobile-nav__menu > li > a,
    .arg-mobile-nav__menu > li > button,
    .arg-mobile-nav__link {
        width: 100%;
        min-height: 64px;

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

        padding: 0;

        border: 0;
        border-bottom: 1px solid var(--arg-line);

        color: var(--arg-ink);
        background: transparent;

        font-family: var(--arg-font);
        font-size: 22px;
        font-weight: 500;
        line-height: 1.2;

        text-align: left;
        text-decoration: none;
    }

    /* UL structure already has border on LI */

    .arg-mobile-nav__menu > li > a,
    .arg-mobile-nav__menu > li > button {
        border-bottom: 0;
    }


    /* ------------------------------------------------------
       States
       ------------------------------------------------------ */

    .arg-mobile-nav__menu > a:hover,
    .arg-mobile-nav__menu > li > a:hover,
    .arg-mobile-nav__menu > li > button:hover,
    .arg-mobile-nav__link:hover {
        color: var(--arg-blue);
    }

    .arg-mobile-nav__menu > a.active,
    .arg-mobile-nav__menu > li > a.active,
    .arg-mobile-nav__link.active,
    .arg-mobile-nav__link.is-active,
    .arg-mobile-nav__solution-trigger.active {
        color: var(--arg-blue);
    }


    /* ------------------------------------------------------
       Solutions Trigger
       ------------------------------------------------------ */

    .arg-mobile-nav__solution-trigger {
        cursor: pointer;
    }

    .arg-mobile-nav__toggle-icon {
        position: relative;

        display: block;

        width: 18px;
        height: 18px;

        flex: 0 0 18px;
    }

    .arg-mobile-nav__toggle-icon::before,
    .arg-mobile-nav__toggle-icon::after {
        content: "";

        position: absolute;

        top: 50%;
        left: 50%;

        width: 16px;
        height: 1.5px;

        background: currentColor;

        transform: translate(-50%, -50%);

        transition:
            transform 200ms var(--arg-ease);
    }

    .arg-mobile-nav__toggle-icon::after {
        transform:
            translate(-50%, -50%)
            rotate(90deg);
    }

    .arg-mobile-nav__solution-trigger:not(.collapsed)
    .arg-mobile-nav__toggle-icon::after {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }


    /* ------------------------------------------------------
       Solutions Children
       ------------------------------------------------------ */

    .arg-mobile-solutions__inner {
        padding: 0 0 20px 16px;
    }

    .arg-mobile-solutions__inner > a {
        width: 100%;
        min-height: 50px;

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

        gap: 20px;

        padding: 8px 0;

        color: var(--arg-text);

        font-size: 15px;
        font-weight: 500;
        line-height: 1.4;

        text-decoration: none;
    }

    .arg-mobile-solutions__inner > a:hover {
        color: var(--arg-blue);
    }

    .arg-mobile-solutions__all {
        margin-top: 8px;

        padding-top: 18px !important;

        border-top: 1px solid var(--arg-line);

        color: var(--arg-blue) !important;

        font-weight: 600 !important;
    }


    /* ------------------------------------------------------
       CTA
       ------------------------------------------------------ */

    .arg-mobile-nav__cta,
    .arg-mobile-nav__footer {
        margin-top: auto;

        padding-top: 32px;
    }

    .arg-mobile-nav__talk,
    .arg-mobile-nav__cta .arg-btn {
        width: 100%;
        min-height: 60px;

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

        padding: 0 20px;

        border-radius: var(--arg-radius);

        color: var(--arg-white) !important;
        background: var(--arg-blue);

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

        text-decoration: none;
    }

    .arg-mobile-nav__talk:hover,
    .arg-mobile-nav__cta .arg-btn:hover {
        color: var(--arg-white) !important;
        background: var(--arg-blue-dark);
    }

}

/* ==========================================================
   MOBILE NAVIGATION — FINAL OVERRIDES
   ========================================================== */
@media (max-width: 991.98px) {
  .arg-mobile-nav { --bs-offcanvas-width: min(430px, 100vw); background: var(--arg-canvas); border-left: 0 !important; }
  .arg-mobile-nav .offcanvas-body { display:flex; flex-direction:column; padding:30px 20px 24px; overflow-y:auto; }
  .arg-mobile-nav__menu { display:flex; flex-direction:column; width:100%; }
  .arg-mobile-nav__menu > a, .arg-mobile-nav__solution-trigger { width:100%; min-height:62px; display:flex; align-items:center; justify-content:space-between; padding:0; border:0; border-bottom:1px solid var(--arg-line); background:transparent; color:var(--arg-ink); font:500 22px/1.2 var(--arg-font); text-align:left; text-decoration:none; }
  .arg-mobile-nav__menu > a:hover, .arg-mobile-nav__solution-trigger:hover, .arg-mobile-nav__menu > a.active, .arg-mobile-nav__solution-trigger.active { color:var(--arg-blue); }
  .arg-mobile-nav__solutions { width:100%; border-bottom:1px solid var(--arg-line); }
  .arg-mobile-nav__solutions .arg-mobile-nav__solution-trigger { border-bottom:0; }
  .arg-mobile-nav__toggle-icon { position:relative; display:block; width:18px; height:18px; flex:0 0 18px; }
  .arg-mobile-nav__toggle-icon::before, .arg-mobile-nav__toggle-icon::after { content:""; position:absolute; top:50%; left:50%; width:16px; height:1.5px; background:currentColor; transform:translate(-50%,-50%); transition:transform 200ms var(--arg-ease); }
  .arg-mobile-nav__toggle-icon::after { transform:translate(-50%,-50%) rotate(90deg); }
  .arg-mobile-nav__solution-trigger:not(.collapsed) .arg-mobile-nav__toggle-icon::after { transform:translate(-50%,-50%) rotate(0deg); }
  .arg-mobile-solutions__inner { padding:0 0 20px 16px; }
  .arg-mobile-solutions__inner > a { min-height:50px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:8px 0; color:var(--arg-text); font-size:15px; font-weight:500; line-height:1.4; text-decoration:none; }
  .arg-mobile-solutions__inner > a:hover { color:var(--arg-blue); }
  .arg-mobile-solutions__all { margin-top:8px; padding-top:18px !important; border-top:1px solid var(--arg-line); color:var(--arg-blue) !important; font-weight:600 !important; }
  .arg-mobile-nav__footer { margin-top:auto; padding-top:32px; }
}
@media (min-width: 992px) { #mobileNavigation { display:none !important; } }


/* Hero photography composition */
.arg-hero {
    isolation: isolate;
}

.arg-hero__row {
    position: relative;
    z-index: 1;
}

.arg-hero__visual {
    position: absolute;
    inset: 0 0 0 auto;
    width: 68%;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.arg-hero__image-wrap {
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    background: var(--arg-canvas);
}

.arg-hero__image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--arg-canvas) 0%,
        var(--arg-canvas) 30%,
        color-mix(in srgb, var(--arg-canvas) 92%, transparent) 38%,
        color-mix(in srgb, var(--arg-canvas) 72%, transparent) 46%,
        color-mix(in srgb, var(--arg-canvas) 45%, transparent) 54%,
        color-mix(in srgb, var(--arg-canvas) 18%, transparent) 61%,
        transparent 67%,
        transparent 100%
    );
}

.arg-hero__image {
    object-fit: cover;
    object-position: 72% center;
}

@media (max-width: 991.98px) {
    .arg-hero__visual {
        position: relative;
        inset: auto;
        width: 100%;
    }

    .arg-hero__image-wrap {
        height: auto;
        aspect-ratio: 3 / 2;
    }

    .arg-hero__image {
        position: absolute;
        inset: 0;
        object-position: center;
    }

    .arg-hero__image-wrap::after {
        background: linear-gradient(
            to bottom,
            var(--arg-canvas) 0%,
            color-mix(in srgb, var(--arg-canvas) 85%, transparent) 8%,
            color-mix(in srgb, var(--arg-canvas) 35%, transparent) 20%,
            transparent 38%
        );
    }
}

@media (max-width: 767.98px) {
    .arg-hero__image-wrap {
        aspect-ratio: 4 / 3;
    }
}

/* Shared taxonomy pills, extracted from the existing Insights topic treatment. */
.arg-capability-list,
.arg-work__capabilities,
.arg-work-project__meta,
.arg-work-product__tags,
.arg-ecosystem-product__meta,
.arg-consulting-tags,
.arg-insights-hero__topics,
.case-tags {
    gap: 8px;
}

.arg-tag,
.arg-capability-list li,
.arg-work__capabilities li,
.arg-work-project__meta span,
.arg-work-product__tags li,
.arg-ecosystem-product__meta span,
.arg-consulting-tags span,
.arg-insights-hero__topics span,
.case-tags li {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    max-width: 100%;
    padding: 8px 14px;
    border: 1px solid var(--arg-tag-line, var(--arg-line));
    border-radius: 999px;
    background: transparent;
    color: var(--arg-tag-text, var(--arg-text));
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    overflow-wrap: anywhere;
}

.arg-work__capabilities {
    --arg-tag-line: rgba(255, 255, 255, .25);
    --arg-tag-text: rgba(255, 255, 255, .85);
}