* {
    box-sizing: border-box
}

:root {
    --navy: #0b1d35;
    --blue: #246fe5;
    --blue-dark: #4053a7;
    --ink: #19283d;
    --muted: #697587;
    --line: #e5eaf1;
    --corp-ink: #303b35;
    --corp-muted: #6d746e;
    --corp-cream: #f3f1e6;
    --corp-sage: #b7c2aa;
    --corp-green: #234b3b;
    --corp-line: #dfdfd2;
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    color: var(--ink);
    background: #f3f6fa;
    line-height: 1.65
}

button,
a {
    font: inherit
}

.page-shell {
    width: min(1180px, calc(100% - 40px));
    margin: 48px auto 70px
}

.approach-section {
    background: #fff;
    border-radius: 0px;
    box-shadow: 0 22px 55px #14284617;
    overflow: hidden;
    margin-top: 5rem;
}

.section-heading {
    text-align: center;
    padding: 30px 24px 24px;
    border-bottom: 1px solid var(--line)
}

.eyebrow,
.panel-kicker {
    display: inline-block;
    color: var(--blue);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .15em
}

.section-heading h1 {
    margin: 3px 0 4px;
    font-size: clamp(1.65rem, 3vw, 2.1rem);
    line-height: 1.25;
    color: var(--navy);
    letter-spacing: -.04em
}

.section-heading p {
    color: var(--muted);
    margin: 8px 0 0;
    font-size: .96rem
}

.approach-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 590px
}

.tab-list {
    display: flex;
    flex-direction: column;
    width: 250px;
    flex: 0 0 250px;
    background: #f8f9fc;
    border-right: 1px solid var(--line)
}

.approach-tab {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 76px;
    padding: 15px 17px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-left: 4px solid transparent;
    background: transparent;
    color: #748094;
    text-align: left;
    cursor: pointer;
    transition: color .2s, background .2s, border-color .2s
}

.approach-tab:hover {
    color: var(--blue);
    background: #f0f5ff
}

.approach-tab.is-active {
    color: #ffffff;
    background: #29104f;
    border-left-color: #2cc9b5;
}

.tab-icon {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    flex: 0 0 37px;
    /* border-radius: 11px; */
    background: #2cc9b5;
    color: #000;
    font-size: 1.55rem;
    font-weight: 700
}

.tab-label {
    flex: 1;
    font-size: .8rem;
    font-weight: 300;
    line-height: 1.4;
    text-transform: uppercase;
}

.tab-arrow {
    color: #2cc9b5;
    font-size: 1.45rem;
    line-height: 1;
    transition: transform .2s, color .2s
}

.approach-tab.is-active .tab-arrow {
    color: var(#29104f);
    transform: translateX(3px)
}

.tab-panels {
    flex: 1;
    min-width: 0;
    padding: clamp(15px, 5vw, 18px);
    display: flex;
    align-items: center;
}

.tab-panel {
    width: 100%;
    display: grid;
    /* grid-template-columns: minmax(180px, .78fr) minmax(0, 1.25fr);
    gap: clamp(25px, 4vw, 54px); */
    gap: clamp(8px, 0vw, 54px);
    align-items: center;
    animation: panelIn .32s ease both
}

.tab-panel[hidden] {
    display: none
}

@keyframes panelIn {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.panel-copy h2 {
    margin: 8px 0 16px;
    color: #29104f;
    letter-spacing: -.035em;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-size: 1.9rem;
    line-height: 42px;
}

.panel-copy p {
    margin: 0 0 13px;
    color: #000000;
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 300;
}

.panel-copy strong {
    color: #33445c
}

.panel-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-top: 10px;
    padding: 8px 21px;
    min-height: 40px;
    color: #fff;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 300;
    text-transform: uppercase;
    background: #29104f;
    /* box-shadow: 0 7px 16px #414ca133; */
    transition: transform .2s, box-shadow .2s;
}

.panel-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px #414ca147
}

.panel-cta span {
    font-size: 1.05rem
}

.feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 15px;
    list-style: none;
    padding: 0;
    margin: 17px 0
}

.feature-list li {
    position: relative;
    padding-left: 22px;
    color: #000;
    font-size: .83rem;
    line-height: 1.55
}

.feature-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(#29104f);
    background: #eaf1ff;
    font-size: .68rem;
    font-weight: 800
}

.response-note {
    margin: 14px 4px 0;
    color: #8792a1;
    font-size: .76rem;
    text-align: right
}

.contact-strip {
    margin-top: 24px;
    padding: 30px clamp(24px, 5vw, 48px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: #fff;
    background: var(--navy);
    border-radius: 14px
}

.contact-strip .eyebrow {
    color: #8db8ff
}

.contact-strip h2 {
    margin: 5px 0 0;
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    line-height: 1.35
}

.light-cta {
    margin: 0;
    flex-shrink: 0;
    color: var(--navy);
    background: #fff;
    box-shadow: none
}

.panel-art {
    position: relative;
    /* max-height: 270px; */
    width: 100%;
    max-width: 100%;
    justify-self: center;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 0px;
    /* background: radial-gradient(circle at 50% 44%, #eef0ff 0 35%, transparent 36%), linear-gradient(145deg, #f8f9ff, #edf3ff) */
}

.art-orbit {
    position: absolute;
    width: 230px;
    height: 230px;
    border: 1px solid #d6dcff;
    border-radius: 50%;
    box-shadow: 0 0 0 22px #f0f2ff80, 0 0 0 43px #f5f6ff
}

.art-symbol {
    position: relative;
    z-index: 1;
    color: #246fe5;
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: -.09em
}

.art-symbol span {
    color: #6554c0
}

.art-caption {
    position: absolute;
    bottom: 35px;
    color: #7886bd;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .14em
}

.art-network {
    /* background: linear-gradient(145deg, #eff5ff, #e8eaff) */
}

.map-grid {
    position: absolute;
    inset: 0;
    /* background-image: linear-gradient(#d5e0f5 1px, transparent 1px), linear-gradient(90deg, #d5e0f5 1px, transparent 1px); */
    background-size: 28px 28px;
    opacity: .7
}

.map-pin {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 6px solid #dce6ff;
    border-radius: 50% 50% 50% 0;
    background: var(#29104f);
    color: #fff;
    transform: rotate(-45deg);
    box-shadow: 0 7px 16px #6b8de64d
}

.pin-a {
    top: 45px;
    left: 52px
}

.pin-b {
    right: 50px;
    top: 105px
}

.pin-c {
    left: 90px;
    bottom: 34px
}

.map-label {
    position: absolute;
    color: #cad5f6;
    font-size: 2.4rem;
    letter-spacing: .12em
}

.art-services {
    /* background: linear-gradient(145deg, #f4f7ff, #e7edff) */
}

.service-van {
    position: relative;
    z-index: 2;
    color: #6e85dc;
    font-size: 6rem;
    text-shadow: 0 12px 0 #c8d5fa
}

.service-van span {
    position: absolute;
    top: 14px;
    left: 43%;
    color: white;
    font-size: 2.3rem
}

.service-road {
    position: absolute;
    bottom: 55px;
    width: 85%;
    height: 4px;
    border-radius: 5px;
    background: #b9c8ef
}

.art-support {
    /* background: radial-gradient(circle, #e7eaff 0 40%, transparent 41%), #f4f6ff */
}

.support-head {
    position: absolute;
    top: 48px;
    width: 86px;
    height: 91px;
    display: grid;
    place-items: center;
    border: 8px solid #4c5db2;
    border-radius: 48%;
    background: #edb6ca;
    color: #283a68;
    font-size: 3rem
}

.support-body {
    position: absolute;
    bottom: 24px;
    width: 145px;
    height: 82px;
    border: 8px solid #e0e7ff;
    border-radius: 75px 75px 15px 15px;
    background: #8295ed
}

.support-bubble {
    position: absolute;
    top: 35px;
    right: 28px;
    z-index: 2;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(#29104f);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 8px 18px #4677dc40
}

.art-technology {
    /* background: linear-gradient(145deg, #f5f7ff, #e9edff) */
}

.tech-phone {
    position: relative;
    z-index: 2;
    width: 100px;
    height: 170px;
    padding: 20px 10px;
    border: 8px solid #293963;
    border-radius: 22px;
    background: #e7eeff;
    color: #455ab0;
    font-weight: 800;
    box-shadow: 0 20px 28px #273b7628;
    transform: rotate(-7deg)
}

.tech-phone i,
.tech-phone b,
.tech-phone em {
    position: absolute;
    width: 13px;
    height: 13px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #246fe5;
    box-shadow: 0 0 0 4px #a8c2ff
}

.tech-phone i {
    top: 60px;
    left: 18px
}

.tech-phone b {
    top: 93px;
    right: 16px
}

.tech-phone em {
    bottom: 20px;
    left: 25px
}

.tech-badge {
    position: absolute;
    right: 35px;
    top: 45px;
    z-index: 3;
    padding: 8px 12px;
    border: 5px solid #e2e7ff;
    border-radius: 13px;
    background: #2d91cb;
    color: white;
    font-weight: 800
}

.art-app {
    /* background: linear-gradient(145deg, #f4f7ff, #e7edff) */
}

.phone {
    position: relative;
    z-index: 2;
    width: 125px;
    height: 225px;
    padding: 14px 11px;
    border: 7px solid #26375d;
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 17px 28px #233a7424;
    transform: rotate(5deg)
}

.phone-speaker {
    width: 38px;
    height: 5px;
    margin: -5px auto 13px;
    border-radius: 8px;
    background: #26375d
}

.phone strong {
    color: #246fe5;
    font-size: 1rem
}

.phone strong span {
    color: #34456b
}

.phone-map {
    position: relative;
    height: 80px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 10px;
    background: repeating-linear-gradient(45deg, #edf2ff 0 13px, #dce7fb 13px 16px)
}

.phone-map i,
.phone-map b {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #276ee5;
    box-shadow: 0 0 0 4px #a8c2ff
}

.phone-map i {
    top: 17px;
    left: 17px
}

.phone-map b {
    right: 17px;
    bottom: 15px;
    background: #6a5bd0
}

.phone-line {
    height: 7px;
    margin-top: 10px;
    border-radius: 5px;
    background: #e6ebf5
}

.phone-line.short {
    width: 65%;
    margin-top: 6px
}

.phone-button {
    margin-top: 10px;
    padding: 7px 3px;
    border-radius: 7px;
    background: #246fe5;
    color: white;
    text-align: center;
    font-size: .48rem;
    font-weight: 800
}

.art-tracking {
    /* background: linear-gradient(145deg, #f3f7ff, #e8edff) */
}

.tracking-map {
    position: absolute;
    inset: 15px;
    overflow: hidden;
    border-radius: 16px;
    background-color: #e4ebfc;
    background-image: linear-gradient(35deg, transparent 45%, #fff 46% 52%, transparent 53%), linear-gradient(120deg, transparent 40%, #fff 41% 48%, transparent 49%), linear-gradient(80deg, transparent 63%, #fff 64% 70%, transparent 71%)
}

.track-pin {
    position: absolute;
    z-index: 2;
    width: 17px;
    height: 17px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #286fe3;
    box-shadow: 0 0 0 3px #9cbaff
}

.track-pin.one {
    top: 35px;
    left: 29px
}

.track-pin.two {
    right: 33px;
    top: 78px;
    background: #6a5bd0
}

.track-pin.three {
    left: 90px;
    bottom: 31px;
    background: #27a1b6
}

.track-car {
    position: absolute;
    z-index: 3;
    top: 65px;
    left: 72px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: #1d3154;
    color: white;
    transform: rotate(25deg)
}

.eta-card {
    position: absolute;
    z-index: 4;
    right: 14px;
    bottom: 22px;
    display: grid;
    gap: 2px;
    padding: 11px 13px;
    border: 1px solid #edf0f8;
    border-radius: 12px;
    background: white;
    box-shadow: 0 10px 25px #273b7615
}

.eta-card span {
    color: #7a8595;
    font-size: .63rem
}

.eta-card strong {
    color: #243652;
    font-size: .82rem
}

.eta-card small {
    color: #238f76;
    font-size: .6rem
}


/* About Panel - Two Image Layout */
.panel-art.img_layout {
    display: grid;
    grid-template-columns: 1fr 2.3fr;
    gap: 8px;
    width: 100%;
    /* height: 350px; */
    overflow: hidden;
    align-items: stretch;
}

.panel-art.img_layoutimg {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: cover;
    margin: 0;
}

/* Left small image */
.panel-art.img_layout img:first-child {
    object-position: center;
}

/* Right large image */
.panel-art.img_layout img:last-child {
    object-position: center;
}



/* Tablet */
@media (max-width: 768px) {
    .panel-art.img_layout {
        grid-template-columns: 1fr 2.3fr;
        /* height: 220px; */
        gap: 6px;
    }
}




@media(max-width:1000px) {
    .page-shell {
        width: min(100% - 28px, 850px);
        margin-top: 28px
    }

    .tab-list {
        width: 220px;
        flex-basis: 220px
    }

    .approach-tab {
        padding: 13px 12px;
        gap: 10px
    }

    .tab-label {
        font-size: .76rem
    }

    .tab-panels {
        padding: 28px 24px
    }

    .tab-panel {
        grid-template-columns: minmax(140px, .7fr) minmax(0, 1.3fr);
        gap: 22px
    }

    .panel-art {
        min-height: 230px
    }

    .feature-list {
        grid-template-columns: 1fr
    }
}

@media(max-width:700px) {
    .page-shell {
        width: calc(100% - 20px);
        margin: 12px auto 30px
    }

    .approach-card {
        flex-direction: column;
        min-height: 0
    }

    .tab-list {
        width: 100%;
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-right: 0;
        border-bottom: 1px solid var(--line)
    }

    .approach-tab {
        min-height: 61px;
        padding: 10px 12px;
        gap: 9px;
        border-left: 0;
        border-bottom: 2px solid var(--line)
    }

    .approach-tab.is-active {
        border-left: 0;
        border-bottom: 3px solid var(#29104f)
    }

    .tab-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        font-size: 1.25rem
    }

    .tab-label {
        font-size: .72rem
    }

    .tab-arrow {
        font-size: 1.15rem
    }

    .tab-panels {
        padding: 23px 17px 29px
    }

    .tab-panel {
        grid-template-columns: 1fr;
        gap: 22px
    }

    .panel-art {
        min-height: 220px;
        /* max-width: 300px */
    }

    .panel-copy h2 {
        font-size: 1.48rem;
        margin-bottom: 12px
    }

    .panel-copy p {
        font-size: .9rem;
        line-height: 1.75
    }

    .feature-list {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .response-note {
        font-size: .68rem;
        text-align: left
    }

    .contact-strip {
        align-items: flex-start;
        flex-direction: column;
        padding: 24px;
        gap: 16px
    }
}
/* Mobile */
@media (max-width: 480px) {
    .panel-art.img_layout {
        grid-template-columns: 1fr 2.3fr;
        /* height: 125px; */
        gap: 4px;
    }
     .panel-art.img_layout  img{
         /* height: 125px; */
     }
    .panel-art {
      min-height: 140px;
    }
    .tab-panel{
        gap: 0px;
    }
}
@media(prefers-reduced-motion:reduce) {

    *,
    *:before,
    *:after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important
    }
}



.corporate-solutions {
    padding: 70px 22px;
    background: #fff;
    overflow: hidden;
}

.corporate-solutions .corp-wrap {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.corporate-solutions .corp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    margin: 0 0 90px;
    position: relative;
}

.corporate-solutions .corp-row:last-child {
    margin-bottom: 0;
}

.corporate-solutions .corp-photo {
    position: relative;
    min-width: 0;
    /* height: 410px; */
        height: 100%;
    overflow: hidden;
    background: #e8ebe4;
}

.corporate-solutions .corp-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.corporate-solutions .corp-photo:hover img {
    transform: scale(1.035);
}

.corporate-solutions .corp-card {
    position: relative;
    z-index: 2;
    min-width: 0;
    margin-left: -62px;
    padding: 42px 42px 40px;
    background: var(--corp-cream);
}

.corporate-solutions .corp-row.is-reversed .corp-photo {
    grid-column: 2;
    grid-row: 1;
}

.corporate-solutions .corp-row.is-reversed .corp-card {
    grid-column: 1;
    grid-row: 1;
    margin-left: 0;
    margin-right: -62px;
}

.corporate-solutions .corp-eyebrow {
    display: block;
    margin: 0 0 12px;
    color: #2cc9b5;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Italiana', serif;
    letter-spacing: 2px;
}

.corporate-solutions .corp-card h2 {
    margin: 0 0 17px;
    padding: 0 0 17px;
    border-bottom: 1px solid var(--corp-line);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(25px, 2.4vw, 34px);
    font-weight: 300;
    line-height: 1.22;
    color: #29104f;
    font-family: 'Roboto';
}

.corporate-solutions .corp-card h3 {
    margin: 18px 0 10px;
    color: #29104f;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
}

.corporate-solutions .corp-card h4 {
    margin: 21px 0 10px;
    color: #29104f;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
}

.corporate-solutions .corp-card p {
       margin: 0 0 13px;
    color: #000000;
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 300;
}

.corporate-solutions .corp-card .corp-emphasis {
    color: #59674f;
    font-weight: 700;
    font-style: italic;
}

.corporate-solutions .corp-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 17px;
    padding: 0;
    margin: 14px 0 21px;
    list-style: none;
}

.corporate-solutions .corp-list li {
    position: relative;
    padding-left: 16px;
    color: #000000;
       font-size: .8rem;
    line-height: 1.8;
    font-weight: 300;
}

.corporate-solutions .corp-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #29104f;
}

.corporate-solutions .corp-button {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 7px;
    padding: 13px 20px;
    background: #29104f;
    color: #fff !important;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 9px;
    font-weight: 700;
    transition: background .25s ease;
}

.corporate-solutions .corp-button:hover {
    background: #29104f;
}

.corporate-solutions .corp-button span {
    font-size: 14px;
    line-height: 1;
}

.corporate-solutions .corp-bottom-cta {
    margin-top: 15px;
    padding: 42px 28px;
    text-align: center;
    background: #f3f1e6;
}

.corporate-solutions .corp-bottom-cta h2 {
   font-family: 'Italiana', serif;
    font-size: clamp(55px, 2.4vw, 112px);
    font-weight: 400;
    line-height: .94;
    letter-spacing: 2px;
    margin: 0;
    text-transform: capitalize;
    margin-top: 1rem;
    color: #000;
    margin-bottom: 2rem;
}

.corporate-solutions .corp-bottom-cta p {
    max-width: 670px;
    margin: 0 auto 18px;
    color: var(--corp-muted);
    font-size: 13px;
    line-height: 1.8;
}

/* Tablet */
@media (max-width: 900px) {
    .corporate-solutions {
        padding: 45px 18px;
    }

    .corporate-solutions .corp-row {
        margin-bottom: 62px;
    }

    .corporate-solutions .corp-photo {
        height: 350px;
    }

    .corporate-solutions .corp-card {
        margin-left: -38px;
        padding: 30px 28px;
    }

    .corporate-solutions .corp-row.is-reversed .corp-card {
        margin-right: -38px;
    }

    .corporate-solutions .corp-list {
        gap: 8px 12px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .corporate-solutions {
        padding: 32px 15px;
    }

    .corporate-solutions .corp-row,
    .corporate-solutions .corp-row.is-reversed {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 43px;
    }

    .corporate-solutions .corp-photo {
        width: 100%;
        height: 255px;
    }

    .corporate-solutions .corp-card,
    .corporate-solutions .corp-row.is-reversed .corp-card {
        width: calc(100% - 22px);
        margin: -28px 0 0 auto;
        padding: 25px 22px;
    }

    .corporate-solutions .corp-row.is-reversed .corp-card {
        margin-left: 0;
        margin-right: auto;
    }

    .corporate-solutions .corp-card h2 {
        font-size: 27px;
    }

    .corporate-solutions .corp-card h3 {
        font-size: 15px;
    }

    .corporate-solutions .corp-card p {
        font-size: 12px;
    }

    .corporate-solutions .corp-list {
        grid-template-columns: 1fr 1fr;
        gap: 9px 12px;
    }

    .corporate-solutions .corp-list li {
        font-size: 11px;
    }

    .corporate-solutions .corp-bottom-cta {
        padding: 30px 20px;
    }
}

@media (max-width: 390px) {
    .corporate-solutions .corp-photo {
        height: 220px;
    }

    .corporate-solutions .corp-card,
    .corporate-solutions .corp-row.is-reversed .corp-card {
        padding: 22px 18px;
    }

    .corporate-solutions .corp-card h2 {
        font-size: 24px;
    }

    .corporate-solutions .corp-list {
        grid-template-columns: 1fr;
    }
}