/* GLOBAL TYPOGRAPHY: DIGITALEX SOLUTIONS STARTS HERE */

/* Use the same font as the website navigation everywhere */
html,
body {
    font-family: "DM Sans", Arial, sans-serif;
}

/* Inherit the global font throughout all sections and components */
body *,
body *::before,
body *::after {
    font-family: inherit;
}

/* Keep headings consistent with the navigation font */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "DM Sans", Arial, sans-serif;
}

/* Form fields and interactive elements */
button,
input,
select,
textarea,
option {
    font-family: "DM Sans", Arial, sans-serif;
}

/* GLOBAL TYPOGRAPHY: DIGITALEX SOLUTIONS ENDS HERE */


/* =========================================
   DIGITALEX SOLUTIONS — SHARED HEADER
   Add this block at the END of style.css
========================================= */

:root {
    --ds-orange: #e85b00;
    --ds-gold: #e9a72e;
    --ds-cream: #fff9ef;
    --ds-ink: #20170f;
    --ds-muted: #74695d;
    --ds-border: #eadfce;
}

.ds-skip-link {
    position: fixed;
    z-index: 1000;
    top: 10px;
    left: 10px;
    padding: 12px 16px;
    background: var(--ds-ink);
    color: white;
    border-radius: 8px;
    transform: translateY(-160%);
}

.ds-skip-link:focus {
    transform: translateY(0);
}

.ds-topbar {
    min-height: 36px;
    background: var(--ds-gold);
    color: var(--ds-ink);
    display: flex;
    align-items: center;
    padding: 0 4.5%;
}

.ds-topbar-inner {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.ds-location,
.ds-topbar-link {
    margin: 0;
    font-family: var(--mono, monospace);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.ds-location {
    display: flex;
    align-items: center;
    gap: 11px;
}

.ds-location-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--ds-ink);
    box-shadow: 0 0 0 5px #20170f14;
}

.ds-topbar-separator {
    opacity: .55;
}

.ds-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.ds-topbar-link span {
    font-size: 18px;
    transition: transform .2s ease;
}

.ds-topbar-link:hover span {
    transform: translate(3px, -3px);
}

.ds-header {
    position: sticky;
    top: 0;
    z-index: 200;
    width: 100%;
    background: rgba(255, 249, 239, .97);
    border-bottom: 1px solid var(--ds-border);
    box-shadow: 0 5px 22px rgba(44, 28, 10, .035);
    isolation: isolate;
}

.ds-header-inner {
    width: 100%;
    max-width: 1600px;
    min-height: 100px;
    padding: 15px 4.5%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(22px, 3vw, 48px);
}

.ds-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: clamp(160px, 14vw, 220px);
    max-width: 28%;
}

.ds-logo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 56px;
    object-fit: contain;
    object-position: left center;
}

/* Smaller logo on mobile */
@media (max-width: 767px) {
    .ds-logo {
        width: 150px;
        max-width: 45%;
    }

    .ds-logo img {
        max-height: 44px;
    }
}




/* TOPBAR STYLES START HERE */

.ds-topbar {
    position: relative;
    z-index: 20;
    width: 100%;
    background: #25221f;
    color: #f7f3ed;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    font-family: 'DM Sans', sans-serif;
}

.ds-topbar-inner {
    width: min(100% - 64px, 1440px);
    min-height: 40px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Hide status indicator on mobile */
@media (max-width: 767px) {
    .ds-topbar-status {
        display: none !important;
    }
}
.ds-topbar-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ds-topbar-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border: 1px solid rgba(201, 151, 91, 0.45);
    border-radius: 50%;
}

.ds-topbar-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d7a66c;
    box-shadow: 0 0 8px rgba(215, 166, 108, 0.35);
}

.ds-topbar-label,
.ds-topbar-location {
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 0.055em;
}

.ds-topbar-label {
    color: #f7f3ed;
    font-weight: 600;
}

.ds-topbar-divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.2);
}

.ds-topbar-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #c9c0b5;
}

.ds-topbar-location svg {
    display: block;
    width: 13px;
    height: 13px;
    fill: none;
    stroke: #d7a66c;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ds-topbar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    align-self: stretch;
    flex: 0 0 auto;
    padding: 0 2px 0 16px;
    color: #e6c39b;
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.035em;
    transition: color 0.2s ease;
}

.ds-topbar-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border: 1px solid rgba(230, 195, 155, 0.4);
    border-radius: 50%;
    font-size: 12px;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.ds-topbar-link:hover {
    color: #ffffff;
}

.ds-topbar-link:hover .ds-topbar-link-icon {
    background: #d7a66c;
    color: #25221f;
    transform: translate(2px, -2px);
}

.ds-topbar-link:focus-visible {
    outline: 2px solid #d7a66c;
    outline-offset: 3px;
}

/* Responsive */
@media (max-width: 767px) {
    .ds-topbar-inner {
        width: calc(100% - 32px);
        min-height: 38px;
        gap: 12px;
    }

    .ds-topbar-info {
        gap: 8px;
    }

    .ds-topbar-label,
    .ds-topbar-location {
        font-size: 9px;
        letter-spacing: 0;
    }

    .ds-topbar-status {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }

    .ds-topbar-divider {
        height: 12px;
    }

    .ds-topbar-link {
        gap: 6px;
        padding-left: 4px;
        font-size: 9px;
        letter-spacing: 0;
    }

    .ds-topbar-link-icon {
        width: 18px;
        height: 18px;
        font-size: 11px;
    }
}

@media (max-width: 420px) {
    .ds-topbar-inner {
        width: calc(100% - 24px);
        gap: 8px;
    }

    .ds-topbar-label {
        display: none;
    }

    .ds-topbar-info {
        gap: 7px;
    }

    .ds-topbar-link {
        gap: 5px;
    }
}

/* TOPBAR STYLES END HERE */

/* TOPBAR STYLES START HERE */

.ds-topbar {
    position: relative;
    z-index: 20;
    width: 100%;
    background: #25221f;
    color: #f7f3ed;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    font-family: 'DM Sans', sans-serif;
}

.ds-topbar-inner {
    width: min(100% - 64px, 1440px);
    min-height: 40px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.ds-topbar-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ds-topbar-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border: 1px solid rgba(201, 151, 91, 0.45);
    border-radius: 50%;
}

.ds-topbar-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d7a66c;
    box-shadow: 0 0 8px rgba(215, 166, 108, 0.35);
}

.ds-topbar-label,
.ds-topbar-location {
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 0.055em;
}

.ds-topbar-label {
    color: #f7f3ed;
    font-weight: 600;
}

.ds-topbar-divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.2);
}

.ds-topbar-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #c9c0b5;
}

.ds-topbar-location svg {
    display: block;
    width: 13px;
    height: 13px;
    fill: none;
    stroke: #d7a66c;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ds-topbar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    align-self: stretch;
    flex: 0 0 auto;
    padding: 0 2px 0 16px;
    color: #e6c39b;
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.035em;
    transition: color 0.2s ease;
}

.ds-topbar-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border: 1px solid rgba(230, 195, 155, 0.4);
    border-radius: 50%;
    font-size: 12px;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.ds-topbar-link:hover {
    color: #ffffff;
}

.ds-topbar-link:hover .ds-topbar-link-icon {
    background: #d7a66c;
    color: #25221f;
    transform: translate(2px, -2px);
}

.ds-topbar-link:focus-visible {
    outline: 2px solid #d7a66c;
    outline-offset: 3px;
}

/* Responsive */
@media (max-width: 767px) {
    .ds-topbar-inner {
        width: calc(100% - 32px);
        min-height: 38px;
        gap: 12px;
    }

    .ds-topbar-info {
        gap: 8px;
    }

    .ds-topbar-label,
    .ds-topbar-location {
        font-size: 9px;
        letter-spacing: 0;
    }

    .ds-topbar-status {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }

    .ds-topbar-divider {
        height: 12px;
    }

    .ds-topbar-link {
        gap: 6px;
        padding-left: 4px;
        font-size: 9px;
        letter-spacing: 0;
    }

    .ds-topbar-link-icon {
        width: 18px;
        height: 18px;
        font-size: 11px;
    }
}

@media (max-width: 420px) {
    .ds-topbar-inner {
        width: calc(100% - 24px);
        gap: 8px;
    }

    .ds-topbar-label {
        display: none;
    }

    .ds-topbar-info {
        gap: 7px;
    }

    .ds-topbar-link {
        gap: 5px;
    }
}


/* TOPBAR CONTACT DETAILS START HERE */

.ds-topbar-contacts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    min-width: 0;
}

.ds-topbar-contact {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #d8d0c5;
    text-decoration: none;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.ds-topbar-contact svg {
    display: block;
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    fill: none;
    stroke: #d7a66c;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ds-topbar-contact:hover {
    color: #ffffff;
}

.ds-topbar-contacts .ds-topbar-link {
    align-self: center;
    min-height: 40px;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

/* Tablet */
@media (max-width: 1050px) {
    .ds-topbar-contacts {
        gap: 10px;
    }

    .ds-topbar-contact {
        font-size: 12px;
    }

    .ds-topbar-contacts .ds-topbar-link {
        padding-left: 10px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .ds-topbar-inner {
        flex-wrap: wrap;
        padding: 8px 0;
        gap: 8px;
    }

    .ds-topbar-info {
        flex: 1 1 100%;
    }

    .ds-topbar-contacts {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    .ds-topbar-contact {
        font-size: 12px;
        gap: 5px;
    }

    .ds-topbar-contact svg {
        width: 12px;
        height: 12px;
        flex-basis: 12px;
    }

    .ds-topbar-contacts .ds-topbar-link {
        min-height: 28px;
        padding-left: 10px;
        gap: 5px;
        font-size: 11px;
    }

    .ds-topbar-contacts .ds-topbar-link-icon {
        width: 18px;
        height: 18px;
    }
}

/* Narrow phones */
@media (max-width: 420px) {
    .ds-topbar-location,
    .ds-topbar-label,
    .ds-topbar-info > .ds-topbar-divider {
        display: none;
    }

    .ds-topbar-contacts {
        gap: 8px;
    }

    .ds-topbar-contact {
        font-size: 11px;
    }

    .ds-topbar-contact[href^="mailto:"] span {
        font-size: 11px;
        letter-spacing: -0.02em;
    }

    .ds-topbar-contacts .ds-topbar-link {
        padding-left: 7px;
    }
}

/* TOPBAR CONTACT DETAILS END HERE */

/* TOPBAR STYLES END HERE */


.ds-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(16px, 1.8vw, 30px);
    margin-left: auto;
    min-width: 0;
}

.ds-nav-link,
.ds-nav-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ds-ink);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}

.ds-nav-link::after,
.ds-nav-trigger::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 5px;
    height: 2px;
    background: var(--ds-orange);
    transition: right .22s ease;
}

.ds-nav-link:hover::after,
.ds-nav-link:focus-visible::after,
.ds-nav-trigger:hover::after,
.ds-nav-trigger:focus-visible::after {
    right: 0;
}

/* Small CSS-drawn chevron instead of an up/down text arrow */
.ds-chevron {
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 1.7px solid var(--ds-orange);
    border-bottom: 1.7px solid var(--ds-orange);
    transform: rotate(45deg);
    transition: transform .2s ease, margin .2s ease;
}

.ds-nav-item {
    position: static;
    display: flex;
    align-items: center;
    min-height: 48px;
}

.ds-nav-item:hover > .ds-nav-trigger .ds-chevron,
.ds-nav-item:focus-within > .ds-nav-trigger .ds-chevron,
.ds-nav-item.is-open > .ds-nav-trigger .ds-chevron {
    transform: rotate(225deg);
    margin-top: 4px;
}

/* Dropdown mega panels */
.ds-mega-menu {
    position: absolute;
    top: 100%;
    left: 4.5%;
    right: 4.5%;
    display: grid;
    grid-template-columns: minmax(230px, .72fr) minmax(0, 1.65fr);
    gap: clamp(24px, 4vw, 64px);
    padding: clamp(24px, 3vw, 42px);
    background: #fffdf8;
    border: 1px solid var(--ds-border);
    border-top: 3px solid var(--ds-orange);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 24px 55px rgba(44, 28, 10, .16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.ds-nav-item:hover > .ds-mega-menu,
.ds-nav-item:focus-within > .ds-mega-menu,
.ds-nav-item.is-open > .ds-mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.ds-menu-intro {
    padding-right: clamp(12px, 2vw, 32px);
    border-right: 1px solid var(--ds-border);
}

.ds-menu-eyebrow {
    display: block;
    margin-bottom: 15px;
    color: var(--ds-orange);
    font: 500 14px/1.5 var(--mono, monospace);
    letter-spacing: 1px;
}

.ds-menu-intro h2 {
    max-width: 360px;
    margin: 0 0 14px;
    font: 800 clamp(24px, 2.3vw, 34px)/1.15 'Manrope', sans-serif;
    letter-spacing: -1.2px;
}

.ds-menu-intro p {
    max-width: 390px;
    margin: 0 0 22px;
    color: var(--ds-muted);
    font-size: 15px;
    line-height: 1.75;
}

.ds-menu-feature-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--ds-orange);
    color: var(--ds-orange);
    font-size: 15px;
    font-weight: 700;
}

.ds-menu-feature-link span {
    font-size: 18px;
    transition: transform .2s ease;
}

.ds-menu-feature-link:hover span {
    transform: translate(3px, -3px);
}

.ds-menu-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: 8px 24px;
}

.ds-menu-links > a,
.ds-service-menu-grid > a {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 15px 12px;
    border-radius: 10px;
    transition: background .2s ease, transform .2s ease;
}

.ds-menu-links > a:hover,
.ds-service-menu-grid > a:hover {
    background: #fff1dc;
    transform: translateY(-2px);
}

.ds-menu-link-title,
.ds-menu-link-desc {
    display: block;
}

.ds-menu-link-title {
    margin-bottom: 5px;
    color: var(--ds-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
}

.ds-menu-link-desc {
    color: var(--ds-muted);
    font-size: 14px;
    line-height: 1.6;
}

.ds-service-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 14px;
}

.ds-menu-icon {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 1px solid #f0d6b3;
    border-radius: 10px;
    background: #fff7e9;
    color: var(--ds-orange);
    font: 500 14px/1 var(--mono, monospace);
}

.ds-quote-button,
.ds-mobile-quote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    min-height: 50px;
    padding: 0 21px;
    border: 1.5px solid var(--ds-ink);
    border-radius: 999px;
    background: var(--ds-orange);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 3px 0 var(--ds-ink);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.ds-quote-button:hover,
.ds-mobile-quote:hover {
    background: #c94f00;
    transform: translateY(-2px);
    box-shadow: 0 5px 0 var(--ds-ink);
}

.ds-quote-button span,
.ds-mobile-quote span {
    font-size: 18px;
}

.ds-mobile-quote {
    display: none;
}

.ds-menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    border: 1px solid #e6d4bd;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.ds-menu-toggle span {
    display: block;
    width: 19px;
    height: 2px;
    background: var(--ds-ink);
    transition: transform .2s ease;
}

.ds-menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(4px) rotate(45deg);
}

.ds-menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-4px) rotate(-45deg);
}

/* Medium desktops and laptops */
@media (max-width: 1150px) {
    .ds-header-inner {
        gap: 20px;
    }

    .ds-logo {
        width: 220px;
    }

    .ds-navigation {
        gap: 16px;
    }

    .ds-nav-link,
    .ds-nav-trigger {
        font-size: 14px;
    }

    .ds-quote-button {
        padding: 0 16px;
    }
}

/* Tablet and mobile navigation */
@media (max-width: 900px) {
    .ds-topbar {
        padding: 8px 20px;
    }

    .ds-topbar-inner {
        gap: 10px;
    }

    .ds-topbar-link {
        display: none;
    }

    .ds-header-inner {
        min-height: 82px;
        padding: 12px 20px;
        gap: 12px;
    }

    .ds-logo {
        width: clamp(190px, 45vw, 250px);
        max-width: calc(100% - 112px);
    }

    .ds-logo img {
        max-height: 60px;
    }

    .ds-menu-toggle {
        display: flex;
        margin-left: auto;
    }

    .ds-quote-button {
        display: none;
    }

    .ds-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
        overscroll-behavior: contain;
        margin: 0;
        padding: 12px 20px 24px;
        background: var(--ds-cream);
        border-top: 1px solid var(--ds-border);
        border-bottom: 1px solid var(--ds-border);
        box-shadow: 0 18px 32px rgba(44, 28, 10, .12);
    }

    .ds-navigation.is-open {
        display: flex;
        flex-direction: column;
    }

    .ds-nav-link,
    .ds-nav-trigger {
        width: 100%;
        min-height: 52px;
        justify-content: space-between;
        padding: 12px 2px;
        border-bottom: 1px solid var(--ds-border);
        font-size: 15px;
        text-align: left;
    }

    .ds-nav-link::after,
    .ds-nav-trigger::after {
        display: none;
    }

    .ds-nav-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        width: 100%;
    }

    .ds-nav-item > .ds-nav-trigger {
        flex: 0 0 auto;
    }

    .ds-nav-item .ds-chevron {
        margin-right: 5px;
    }

    /* On mobile, mega menus become in-flow accordion panels */
    .ds-mega-menu {
        position: static;
        display: none;
        grid-template-columns: 1fr;
        gap: 14px;
        width: 100%;
        max-height: none;
        padding: 16px 0 20px;
        border: 0;
        border-bottom: 1px solid var(--ds-border);
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: none;
    }

    .ds-nav-item.is-open > .ds-mega-menu {
        display: grid;
    }

    .ds-menu-intro {
        padding: 0 0 14px;
        border-right: 0;
        border-bottom: 1px solid var(--ds-border);
    }

    .ds-menu-intro h2 {
        max-width: 500px;
        font-size: 25px;
    }

    .ds-menu-intro p {
        font-size: 14px;
        margin-bottom: 14px;
    }

    .ds-menu-links,
    .ds-service-menu-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .ds-menu-links > a,
    .ds-service-menu-grid > a {
        padding: 12px 8px;
    }

    .ds-mobile-quote {
        display: inline-flex;
        align-self: flex-start;
        margin-top: 18px;
    }
}

@media (max-width: 480px) {
    .ds-topbar {
        padding: 8px 16px;
    }

    .ds-location {
        flex-wrap: wrap;
        gap: 7px;
        font-size: 14px;
        letter-spacing: .2px;
    }

    .ds-topbar-separator {
        display: none;
    }

    .ds-header-inner {
        min-height: 76px;
        padding: 10px 16px;
    }

    .ds-logo {
        width: 205px;
        max-width: calc(100% - 60px);
    }

    .ds-logo img {
        max-height: 55px;
    }

    .ds-menu-toggle {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .ds-navigation {
        padding: 8px 16px 22px;
        max-height: calc(100dvh - 105px);
    }

    .ds-menu-intro h2 {
        font-size: 23px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-header *,
    .ds-topbar * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}



/* =====================================================
   DIGITALEx HEADER — VISUAL FIX
   Add at the VERY END of assets/css/style.css
===================================================== */

html {
    box-sizing: border-box;
    overflow-x: clip;
}

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

body {
    margin: 0;
    min-width: 320px;
    overflow-x: clip;
}

#site-header,
#site-header * {
    font-family: "DM Sans", Arial, sans-serif;
}

#site-header a,
#site-header a:visited {
    color: var(--ds-ink, #20170f);
    text-decoration: none;
}

#site-header a:hover {
    color: var(--ds-orange, #e85b00);
}

#site-header button {
    font-family: "DM Sans", Arial, sans-serif;
}

#site-header .ds-header-inner {
    width: 100%;
    max-width: 1600px;
    min-width: 0;
    margin-inline: auto;
    padding: 16px clamp(20px, 4vw, 64px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(18px, 2vw, 36px);
}

#site-header .ds-logo {
    flex: 0 1 270px;
    width: 270px;
    min-width: 0;
    max-width: 28%;
}

#site-header .ds-logo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 72px;
    object-fit: contain;
}

#site-header .ds-navigation {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(12px, 1.45vw, 24px);
    margin-left: auto;
}

#site-header .ds-nav-item {
    flex: 0 0 auto;
    min-width: 0;
}

#site-header .ds-nav-link,
#site-header .ds-nav-trigger {
    color: #20170f;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

#site-header .ds-nav-trigger {
    border: 0;
    background: transparent;
}

#site-header .ds-quote-button {
    flex: 0 0 auto;
    min-height: 50px;
    padding-inline: 20px;
    text-decoration: none;
}

#site-header .ds-mega-menu {
    left: clamp(16px, 4vw, 64px);
    right: clamp(16px, 4vw, 64px);
    width: auto;
    max-width: 1472px;
    margin-inline: auto;
    min-width: 0;
    z-index: 300;
    overflow-wrap: anywhere;
}

#site-header .ds-menu-intro,
#site-header .ds-menu-links,
#site-header .ds-service-menu-grid {
    min-width: 0;
}

#site-header .ds-menu-links > a,
#site-header .ds-service-menu-grid > a {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    text-decoration: none;
    color: #20170f;
}

#site-header .ds-menu-link-title {
    color: #20170f;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
}

#site-header .ds-menu-link-desc {
    color: #74695d;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    text-decoration: none;
}

#site-header .ds-menu-feature-link {
    color: #d94f00;
    text-decoration: none;
}

#site-header .ds-menu-eyebrow {
    font-family: "DM Mono", monospace;
    font-size: 14px;
}

#site-header .ds-quote-button,
#site-header .ds-mobile-quote {
    color: #fff;
}

#site-header .ds-quote-button:hover,
#site-header .ds-mobile-quote:hover {
    color: #fff;
}

#site-header .ds-nav-link:focus-visible,
#site-header .ds-nav-trigger:focus-visible,
#site-header .ds-menu-links a:focus-visible,
#site-header .ds-service-menu-grid a:focus-visible,
#site-header .ds-quote-button:focus-visible {
    outline: 3px solid #e9a72e;
    outline-offset: 4px;
    border-radius: 4px;
}

/* Avoid the desktop navigation becoming wider than its container. */
@media (max-width: 1150px) and (min-width: 901px) {
    #site-header .ds-header-inner {
        padding-inline: 22px;
        gap: 16px;
    }

    #site-header .ds-logo {
        flex-basis: 205px;
        width: 205px;
        max-width: 23%;
    }

    #site-header .ds-navigation {
        gap: 12px;
    }

    #site-header .ds-nav-link,
    #site-header .ds-nav-trigger {
        font-size: 14px;
    }

    #site-header .ds-quote-button {
        padding-inline: 14px;
        gap: 8px;
    }
}

/* Mobile layout */
@media (max-width: 900px) {
    #site-header .ds-header-inner {
        min-height: 82px;
        padding: 12px 20px;
        gap: 12px;
    }

    #site-header .ds-logo {
        flex: 0 1 245px;
        width: 245px;
        max-width: calc(100% - 60px);
    }

    #site-header .ds-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 12px 20px 24px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        background: #fff9ef;
        border-top: 1px solid #eadfce;
        box-shadow: 0 18px 32px rgba(44, 28, 10, .12);
        max-height: calc(100dvh - 110px);
        overflow-y: auto;
    }

    #site-header .ds-navigation.is-open {
        display: flex;
    }

    #site-header .ds-nav-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    #site-header .ds-mega-menu {
        position: static;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 16px 0;
        border: 0;
        border-bottom: 1px solid #eadfce;
        border-radius: 0;
        box-shadow: none;
        transform: none;
        overflow: visible;
    }

    #site-header .ds-menu-links,
    #site-header .ds-service-menu-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #site-header .ds-menu-links > a,
    #site-header .ds-service-menu-grid > a {
        padding: 12px 8px;
    }
}

@media (max-width: 480px) {
    #site-header .ds-header-inner {
        padding-inline: 16px;
    }

    #site-header .ds-navigation {
        padding-inline: 16px;
    }
}


/* hero section */
 


/* HERO SECTION: DIGITALEX SOLUTIONS STARTS HERE */

.ds-hero-lab {
    --ds-hero-bg: #15120f;
    --ds-hero-panel: #201b16;
    --ds-hero-cream: #f6f0e5;
    --ds-hero-muted: #a8a096;
    --ds-hero-orange: #ed7625;
    --ds-hero-gold: #eeb64a;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--ds-hero-cream);
    background: var(--ds-hero-bg);
    font-family: inherit;
    min-height: 690px;
}

.ds-hero-lab *,
.ds-hero-lab *::before,
.ds-hero-lab *::after {
    box-sizing: border-box;
}

.ds-hero-lab a {
    color: inherit;
    text-decoration: none;
}

.ds-hero-lab__grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .20;
    background-image:
        linear-gradient(rgba(246, 240, 229, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(246, 240, 229, .055) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: linear-gradient(to right, transparent, #000 20%, #000 90%, transparent);
}

.ds-hero-lab__glow {
    position: absolute;
    z-index: -1;
    width: 540px;
    height: 540px;
    top: 5%;
    right: -8%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(237, 118, 37, .13) 0%,
        rgba(238, 182, 74, .055) 35%,
        transparent 72%
    );
    filter: blur(22px);
    pointer-events: none;
    transform: translate3d(0, 0, 0);
}

.ds-hero-lab__inner {
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 84px 6.2% 64px;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(38px, 5.5vw, 88px);
}

/* LEFT CONTENT */

.ds-hero-lab__content {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.ds-hero-lab__eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
    color: #d0c5b5;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: 1.6px;
}

.ds-hero-lab__eyebrow > span:not(.ds-hero-lab__eyebrow-dot) {
    color: var(--ds-hero-orange);
}

.ds-hero-lab__eyebrow-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--ds-hero-gold);
    box-shadow: 0 0 14px rgba(238, 182, 74, .6);
    animation: dsHeroDot 2.2s ease-in-out infinite;
}

.ds-hero-lab__title {
    margin: 0;
    color: var(--ds-hero-cream);
    font-size: clamp(48px, 5.35vw, 79px);
    font-weight: 650;
    line-height: .99;
    letter-spacing: -4.8px;
}

.ds-hero-lab__title-line {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 9px;
}

.ds-hero-lab__outline {
    color: transparent;
    -webkit-text-stroke: 1.4px var(--ds-hero-cream);
    transition: color .35s ease, -webkit-text-stroke-color .35s ease;
}

.ds-hero-lab__title-line:nth-child(2):hover .ds-hero-lab__outline {
    color: var(--ds-hero-gold);
    -webkit-text-stroke-color: var(--ds-hero-gold);
}

.ds-hero-lab__period,
.ds-hero-lab__highlight {
    color: var(--ds-hero-orange);
}

.ds-hero-lab__title-line--last {
    margin-top: 18px;
    font-size: .66em;
    line-height: 1.15;
    letter-spacing: -2.2px;
}

.ds-hero-lab__highlight {
    display: inline-block;
    position: relative;
    white-space: nowrap;
}

.ds-hero-lab__highlight::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 3px;
    background: linear-gradient(90deg, var(--ds-hero-orange), var(--ds-hero-gold));
    transform-origin: left;
    animation: dsHeroUnderline 1.1s .7s both;
}

.ds-hero-lab__description {
    max-width: 475px;
    margin: 29px 0 0;
    color: #b9b0a5;
    font-size: 17px;
    line-height: 1.85;
}

.ds-hero-lab__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 32px;
}

.ds-hero-lab__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 19px;
    min-height: 54px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 700;
    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        color .25s ease;
}

.ds-hero-lab__button:hover {
    transform: translateY(-3px);
}

.ds-hero-lab__button--primary {
    color: #1b140e !important;
    background: linear-gradient(110deg, var(--ds-hero-orange), var(--ds-hero-gold));
    box-shadow: 0 9px 30px rgba(237, 118, 37, .12);
}

.ds-hero-lab__button--primary:hover {
    background: var(--ds-hero-cream);
}

.ds-hero-lab__button-arrow {
    font-size: 19px;
    transition: transform .25s ease;
}

.ds-hero-lab__button--primary:hover .ds-hero-lab__button-arrow {
    transform: translate(3px, -3px);
}

.ds-hero-lab__button--secondary {
    border-color: rgba(246, 240, 229, .22);
    color: var(--ds-hero-cream);
}

.ds-hero-lab__button--secondary:hover {
    border-color: var(--ds-hero-gold);
    color: var(--ds-hero-gold);
}

.ds-hero-lab__proof {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 47px;
    padding-top: 22px;
    border-top: 1px solid rgba(246, 240, 229, .13);
}

.ds-hero-lab__proof-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border: 1px solid rgba(238, 182, 74, .5);
    color: var(--ds-hero-cream);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -1px;
}

.ds-hero-lab__proof-mark span:last-child {
    color: var(--ds-hero-orange);
}

.ds-hero-lab__proof-copy {
    display: grid;
    gap: 5px;
}

.ds-hero-lab__proof-copy strong {
    color: #eee5d8;
    font-size: 14px;
    font-weight: 650;
}

.ds-hero-lab__proof-copy > span {
    color: var(--ds-hero-muted);
    font-size: 14px;
    line-height: 1.5;
}

/* RIGHT VISUAL FRAME */

.ds-hero-lab__visual {
    position: relative;
    min-width: 0;
    perspective: 1200px;
}

.ds-hero-lab__visual-top,
.ds-hero-lab__visual-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #9f9588;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: 1.5px;
}

.ds-hero-lab__visual-top {
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(246, 240, 229, .17);
}

.ds-hero-lab__live {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c7bcae;
    font-size: 14px;
    letter-spacing: .8px;
}

.ds-hero-lab__live i,
.ds-lab-build__copy span i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #a8c88d;
    box-shadow: 0 0 11px rgba(168, 200, 141, .55);
}

.ds-hero-lab__stage {
    position: relative;
    min-height: 475px;
    margin-top: 15px;
    overflow: visible;
    transform-style: preserve-3d;
}

.ds-hero-lab__index {
    position: absolute;
    z-index: 3;
    top: 14%;
    left: -17px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    color: #8f8375;
    font-size: 14px;
    letter-spacing: 1px;
}

.ds-hero-lab__index span:nth-child(2) {
    width: 1px;
    height: 66px;
    background: linear-gradient(transparent, var(--ds-hero-orange), transparent);
}

/* MAIN BROWSER WINDOW */

.ds-lab-window {
    position: absolute;
    overflow: hidden;
    border: 1px solid rgba(246, 240, 229, .17);
    background: #191613;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.ds-lab-window--website {
    z-index: 1;
    top: 24px;
    left: 7%;
    width: 76%;
    animation: dsHeroFloatMain 7s ease-in-out infinite;
}

.ds-lab-window__bar {
    height: 34px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #27221d;
    border-bottom: 1px solid rgba(246, 240, 229, .09);
}

.ds-lab-window__bar > span:nth-child(2) {
    flex: 1;
    text-align: center;
    color: #a59a8d;
    font-size: 14px;
}

.ds-lab-window__dots {
    display: flex;
    gap: 4px;
}

.ds-lab-window__dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8e7862;
}

.ds-lab-window__dots i:first-child {
    background: #e57c55;
}

.ds-lab-window__dots i:nth-child(2) {
    background: #d8b36a;
}

.ds-lab-window__menu {
    color: #c3b7a8;
    letter-spacing: 1px;
    font-size: 14px;
}

.ds-lab-website {
    position: relative;
    min-height: 335px;
    overflow: hidden;
    padding: 0 19px;
    color: #1e1a16;
    background: #f1e9dc;
}

.ds-lab-website__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 41px;
    border-bottom: 1px solid rgba(30, 26, 22, .16);
}

.ds-lab-website__logo {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -1px;
}

.ds-lab-website__logo span {
    color: var(--ds-hero-orange);
}

.ds-lab-website__nav-lines {
    width: 43px;
    height: 2px;
    background: #2a241d;
    box-shadow: 0 5px 0 #2a241d, 0 -5px 0 #2a241d;
}

.ds-lab-website__body {
    position: relative;
    z-index: 2;
    padding-top: 29px;
    width: 70%;
}

.ds-lab-website__label {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.ds-lab-website__heading {
    margin-top: 14px;
    font-size: clamp(31px, 3.2vw, 45px);
    line-height: .95;
    font-weight: 850;
    letter-spacing: -2.4px;
}

.ds-lab-website__heading span {
    color: var(--ds-hero-orange);
}

.ds-lab-website__text-lines {
    display: grid;
    gap: 6px;
    margin-top: 13px;
}

.ds-lab-website__text-lines i {
    display: block;
    width: 90%;
    height: 3px;
    background: rgba(30, 26, 22, .18);
}

.ds-lab-website__text-lines i:last-child {
    width: 62%;
}

.ds-lab-website__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding: 10px 11px;
    color: #f5ede0;
    background: #211c16;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2px;
}

.ds-lab-website__cta span {
    color: var(--ds-hero-gold);
}

.ds-lab-website__art {
    position: absolute;
    right: -6%;
    bottom: 0;
    width: 45%;
    height: 69%;
    overflow: hidden;
    background: #d9a05b;
}

.ds-lab-website__art-block {
    position: absolute;
    inset: 13% 13% 0 13%;
    background: linear-gradient(150deg, #eac18a, #9c4c20);
    transform: skewY(-12deg);
}

.ds-lab-website__art-stripe {
    position: absolute;
    top: -18%;
    left: 50%;
    width: 27%;
    height: 140%;
    background: rgba(255, 231, 189, .55);
    transform: rotate(27deg);
}

.ds-lab-website__art-letter {
    position: absolute;
    right: 7%;
    bottom: -27%;
    color: rgba(35, 25, 17, .75);
    font-size: clamp(120px, 15vw, 210px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -15px;
}

.ds-lab-website__art-small {
    position: absolute;
    top: 12%;
    left: 10%;
    color: #2b1e13;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 850;
    letter-spacing: 1px;
}

.ds-lab-website__footer {
    position: absolute;
    bottom: 0;
    left: 19px;
    right: 19px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    min-height: 28px;
    align-items: center;
    border-top: 1px solid rgba(30, 26, 22, .17);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: .5px;
}

/* FLOATING ANALYTICS PANEL */

.ds-lab-window--analytics {
    z-index: 3;
    top: 218px;
    right: -1%;
    width: 47%;
    padding: 14px;
    background: rgba(34, 29, 24, .97);
    animation: dsHeroFloatAnalytics 6s 1s ease-in-out infinite;
}

.ds-lab-analytics__top {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #bdb2a4;
    font-size: 14px;
    letter-spacing: .3px;
}

.ds-lab-analytics__icon {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    color: #1b160f;
    background: var(--ds-hero-gold);
    font-size: 16px;
}

.ds-lab-analytics__status {
    margin-left: auto;
    padding: 3px 5px;
    color: #b8d99c;
    border: 1px solid rgba(184, 217, 156, .28);
    font-size: 14px;
}

.ds-lab-analytics__metric {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    margin-top: 18px;
}

.ds-lab-analytics__metric > span {
    align-self: center;
    color: #c4b9aa;
    font-size: 14px;
}

.ds-lab-analytics__metric strong {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    color: var(--ds-hero-gold);
    font-size: 32px;
    font-weight: 650;
    letter-spacing: -1px;
}

.ds-lab-analytics__metric small {
    color: #8e8478;
    font-size: 14px;
    line-height: 1.5;
}

.ds-lab-chart {
    position: relative;
    height: 90px;
    margin-top: 10px;
    overflow: hidden;
}

.ds-lab-chart__grid {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(246, 240, 229, .08) 0,
        rgba(246, 240, 229, .08) 1px,
        transparent 1px,
        transparent 23px
    );
}

.ds-lab-chart svg {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ds-lab-chart__area {
    fill: url(#dsLabChartFill);
}

.ds-lab-chart__line {
    fill: none;
    stroke: var(--ds-hero-orange);
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 480;
    stroke-dashoffset: 480;
    animation: dsHeroDrawChart 2.4s .5s ease forwards;
}

.ds-lab-analytics__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 11px;
    border-top: 1px solid rgba(246, 240, 229, .1);
    color: #a79b8c;
    font-size: 14px;
    letter-spacing: .8px;
}

.ds-lab-analytics__bottom span:last-child {
    color: var(--ds-hero-orange);
    font-size: 17px;
}

/* BUILD STATUS FLOATING STRIP */

.ds-lab-build {
    position: absolute;
    z-index: 4;
    left: 1%;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 11px;
    width: min(310px, 72%);
    padding: 13px;
    border: 1px solid rgba(246, 240, 229, .17);
    background: rgba(29, 25, 21, .97);
    box-shadow: 0 16px 45px rgba(0, 0, 0, .28);
    animation: dsHeroFloatBuild 5.5s .4s ease-in-out infinite;
}

.ds-lab-build__icon {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 3px;
    width: 37px;
    height: 37px;
    padding: 8px;
    border: 1px solid rgba(237, 118, 37, .4);
}

.ds-lab-build__icon span {
    width: 4px;
    background: var(--ds-hero-orange);
    animation: dsHeroEqualizer .9s ease-in-out infinite alternate;
}

.ds-lab-build__icon span:nth-child(1) {
    height: 45%;
}

.ds-lab-build__icon span:nth-child(2) {
    height: 90%;
    animation-delay: .2s;
}

.ds-lab-build__icon span:nth-child(3) {
    height: 65%;
    animation-delay: .4s;
}

.ds-lab-build__copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.ds-lab-build__copy strong {
    color: #f0e7da;
    font-size: 14px;
}

.ds-lab-build__copy > span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #a99e91;
    font-size: 14px;
}

.ds-lab-build__arrow {
    margin-left: auto;
    color: var(--ds-hero-gold);
    font-size: 18px;
}

.ds-lab-coordinate {
    position: absolute;
    right: 1%;
    bottom: 1px;
    display: grid;
    gap: 5px;
    color: #8c8072;
    font-size: 14px;
    letter-spacing: 1px;
    text-align: right;
}

.ds-lab-coordinate strong {
    color: #e9dfd1;
    font-size: 14px;
    letter-spacing: 1.5px;
}

.ds-lab-coordinate strong span {
    color: var(--ds-hero-orange);
}

.ds-hero-lab__visual-bottom {
    justify-content: flex-start;
    padding-top: 16px;
    border-top: 1px solid rgba(246, 240, 229, .17);
    font-size: 14px;
}

.ds-hero-lab__visual-line {
    width: 24px;
    height: 1px;
    background: var(--ds-hero-orange);
}

/* BOTTOM RAIL */

.ds-hero-lab__rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 19px 6.2%;
    border-top: 1px solid rgba(246, 240, 229, .13);
    color: #a69a8b;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: 1px;
}

.ds-hero-lab__rail-center {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #c3b7a8;
}

.ds-hero-lab__rail-center i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ds-hero-orange);
}

.ds-hero-lab__rail > a {
    color: var(--ds-hero-cream);
    transition: color .2s ease;
}

.ds-hero-lab__rail > a span {
    margin-left: 6px;
    color: var(--ds-hero-orange);
}

.ds-hero-lab__rail > a:hover {
    color: var(--ds-hero-gold);
}

/* ENTRANCE ANIMATIONS */

.ds-hero-lab [data-hero-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .75s ease, transform .75s cubic-bezier(.2, .7, .2, 1);
}

.ds-hero-lab.ds-hero-lab--ready [data-hero-reveal] {
    opacity: 1;
    transform: translateY(0);
}

.ds-hero-lab.ds-hero-lab--ready [data-hero-reveal]:nth-child(1) {
    transition-delay: .08s;
}

.ds-hero-lab.ds-hero-lab--ready [data-hero-reveal]:nth-child(2) {
    transition-delay: .19s;
}

.ds-hero-lab.ds-hero-lab--ready [data-hero-reveal]:nth-child(3) {
    transition-delay: .30s;
}

.ds-hero-lab.ds-hero-lab--ready [data-hero-reveal]:nth-child(4) {
    transition-delay: .41s;
}

.ds-hero-lab.ds-hero-lab--ready [data-hero-reveal]:nth-child(5) {
    transition-delay: .52s;
}

@keyframes dsHeroDot {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}

@keyframes dsHeroUnderline {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes dsHeroFloatMain {
    0%, 100% { transform: translateY(0) rotateY(-2deg); }
    50% { transform: translateY(-7px) rotateY(0deg); }
}

@keyframes dsHeroFloatAnalytics {
    0%, 100% { transform: translateY(0) rotateY(-1deg); }
    50% { transform: translateY(-11px) rotateY(1deg); }
}

@keyframes dsHeroFloatBuild {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes dsHeroEqualizer {
    from { transform: scaleY(.45); }
    to { transform: scaleY(1); }
}

@keyframes dsHeroDrawChart {
    to { stroke-dashoffset: 0; }
}

/* RESPONSIVE */

@media (min-width: 1500px) {
    .ds-hero-lab__inner {
        padding-top: 100px;
        padding-bottom: 78px;
    }

    .ds-hero-lab__stage {
        min-height: 510px;
    }

    .ds-lab-website {
        min-height: 360px;
    }
}

@media (max-width: 1100px) {
    .ds-hero-lab__inner {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        gap: 35px;
        padding-left: 4%;
        padding-right: 4%;
    }

    .ds-hero-lab__title {
        font-size: clamp(45px, 6vw, 66px);
        letter-spacing: -3.5px;
    }

    .ds-hero-lab__stage {
        min-height: 425px;
    }

    .ds-lab-website {
        min-height: 305px;
    }

    .ds-lab-window--analytics {
        top: 205px;
    }

    .ds-lab-website__heading {
        font-size: clamp(29px, 3.4vw, 39px);
    }

    .ds-hero-lab__rail {
        padding-left: 4%;
        padding-right: 4%;
    }
}

@media (max-width: 800px) {
    .ds-hero-lab__inner {
        grid-template-columns: 1fr;
        gap: 54px;
        padding: 65px 6% 48px;
    }

    .ds-hero-lab__content {
        max-width: 650px;
    }

    .ds-hero-lab__title {
        font-size: clamp(52px, 9vw, 76px);
        letter-spacing: -3.5px;
    }

    .ds-hero-lab__description {
        max-width: 570px;
    }

    .ds-hero-lab__proof {
        margin-top: 35px;
    }

    .ds-hero-lab__visual {
        width: 100%;
        max-width: 610px;
        margin: 0 auto;
    }

    .ds-hero-lab__stage {
        min-height: clamp(400px, 72vw, 485px);
    }

    .ds-lab-window--website {
        left: 7%;
        width: 79%;
    }

    .ds-lab-window--analytics {
        right: 0;
        width: 44%;
    }

    .ds-lab-website__heading {
        font-size: clamp(32px, 6.5vw, 46px);
    }

    .ds-hero-lab__rail {
        flex-wrap: wrap;
        padding: 18px 6%;
    }

    .ds-hero-lab__rail-center {
        order: 3;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .ds-hero-lab {
        min-height: 0;
    }

    .ds-hero-lab__inner {
        padding: 48px 20px 38px;
        gap: 43px;
    }

    .ds-hero-lab__eyebrow {
        gap: 7px;
        margin-bottom: 25px;
        font-size: 14px;
        letter-spacing: .8px;
    }

    .ds-hero-lab__title {
        font-size: clamp(43px, 11.4vw, 55px);
        letter-spacing: -2.8px;
    }

    .ds-hero-lab__title-line {
        margin-bottom: 8px;
    }

    .ds-hero-lab__title-line--last {
        margin-top: 13px;
        font-size: .69em;
        letter-spacing: -1.7px;
    }

    .ds-hero-lab__description {
        margin-top: 23px;
        font-size: 16px;
        line-height: 1.75;
    }

    .ds-hero-lab__actions {
        align-items: stretch;
        flex-direction: column;
        margin-top: 26px;
    }

    .ds-hero-lab__button {
        width: 100%;
        justify-content: space-between;
    }

    .ds-hero-lab__proof {
        margin-top: 28px;
    }

    .ds-hero-lab__visual-top,
    .ds-hero-lab__visual-bottom {
        font-size: 14px;
        letter-spacing: .5px;
    }

    .ds-hero-lab__live {
        font-size: 14px;
        letter-spacing: 0;
    }

    .ds-hero-lab__stage {
        min-height: 350px;
        margin-top: 11px;
    }

    .ds-hero-lab__index {
        left: -9px;
        font-size: 14px;
    }

    .ds-lab-window--website {
        top: 19px;
        left: 5%;
        width: 88%;
    }

    .ds-lab-window__bar {
        height: 29px;
        padding: 0 7px;
        gap: 5px;
    }

    .ds-lab-window__bar > span:nth-child(2) {
        font-size: 14px;
    }

    .ds-lab-website {
        min-height: 260px;
        padding: 0 12px;
    }

    .ds-lab-website__nav {
        min-height: 34px;
    }

    .ds-lab-website__body {
        width: 76%;
        padding-top: 22px;
    }

    .ds-lab-website__label {
        font-size: 14px;
        letter-spacing: .5px;
    }

    .ds-lab-website__heading {
        font-size: clamp(29px, 8vw, 36px);
        letter-spacing: -1.8px;
    }

    .ds-lab-website__cta {
        gap: 5px;
        margin-top: 14px;
        padding: 8px;
        font-size: 14px;
    }

    .ds-lab-website__art {
        width: 44%;
        height: 64%;
    }

    .ds-lab-website__art-letter {
        font-size: 130px;
        letter-spacing: -10px;
    }

    .ds-lab-website__art-small {
        font-size: 14px;
    }

    .ds-lab-website__footer {
        left: 12px;
        right: 12px;
        min-height: 24px;
        font-size: 14px;
        letter-spacing: 0;
    }

    .ds-lab-window--analytics {
        top: 193px;
        right: -1%;
        width: 49%;
        padding: 9px;
    }

    .ds-lab-analytics__top {
        gap: 5px;
        font-size: 14px;
    }

    .ds-lab-analytics__icon {
        width: 21px;
        height: 21px;
        font-size: 14px;
    }

    .ds-lab-analytics__metric {
        margin-top: 12px;
    }

    .ds-lab-analytics__metric > span,
    .ds-lab-analytics__metric small,
    .ds-lab-analytics__bottom {
        font-size: 14px;
    }

    .ds-lab-analytics__metric strong {
        font-size: 25px;
    }

    .ds-lab-chart {
        height: 60px;
    }

    .ds-lab-build {
        left: 0;
        bottom: 15px;
        gap: 8px;
        width: 75%;
        padding: 9px;
    }

    .ds-lab-build__icon {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        padding: 6px;
    }

    .ds-lab-build__copy strong,
    .ds-lab-build__copy > span {
        font-size: 14px;
    }

    .ds-lab-coordinate {
        right: 0;
        bottom: -4px;
        font-size: 14px;
        letter-spacing: .4px;
    }

    .ds-lab-coordinate strong {
        font-size: 14px;
        letter-spacing: .5px;
    }

    .ds-hero-lab__visual-bottom {
        gap: 8px;
        padding-top: 12px;
    }

    .ds-hero-lab__visual-line {
        width: 12px;
    }

    .ds-hero-lab__rail {
        padding: 17px 20px;
        gap: 13px;
        font-size: 14px;
        letter-spacing: .4px;
    }

    .ds-hero-lab__rail-center {
        font-size: 14px;
        line-height: 1.7;
    }
}

/* REDUCED MOTION ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .ds-hero-lab *,
    .ds-hero-lab *::before,
    .ds-hero-lab *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .ds-hero-lab [data-hero-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* HERO SECTION: DIGITALEX SOLUTIONS ENDS HERE */

/* HERO ALIGNMENT FIX: DIGITALEX SOLUTIONS STARTS HERE */

.ds-hero-lab {
    overflow: clip;
}

.ds-hero-lab__inner {
    align-items: center;
    gap: clamp(35px, 4vw, 65px);
    padding-top: clamp(55px, 5vw, 78px);
    padding-bottom: 48px;
}

.ds-hero-lab__title {
    font-size: clamp(48px, 4.7vw, 74px);
    line-height: 1.04;
    letter-spacing: -3.4px;
}

.ds-hero-lab__title-line { margin-bottom: 8px; }

.ds-hero-lab__title-line--last {
    margin-top: 17px;
    font-size: .68em;
    line-height: 1.2;
    letter-spacing: -1.8px;
}

.ds-hero-lab__description {
    max-width: 490px;
    margin-top: 24px;
    line-height: 1.8;
}

.ds-hero-lab__proof { margin-top: 36px; }
.ds-hero-lab__visual { width: 100%; min-width: 0; }

.ds-hero-lab__stage {
    min-height: 500px;
    overflow: hidden;
    isolation: isolate;
}

.ds-lab-window--website {
    top: 28px;
    left: 7%;
    width: 77%;
    max-width: 560px;
}

.ds-lab-website { min-height: 330px; }
.ds-lab-website__heading { font-size: clamp(32px, 3vw, 43px); }

.ds-lab-window--analytics {
    top: 245px;
    right: 0;
    width: 41%;
    max-width: 280px;
    padding: 13px;
}

.ds-lab-coordinate { display: none; }

.ds-lab-build {
    left: 1%;
    bottom: 18px;
    width: min(300px, 68%);
}

.ds-hero-lab__visual-bottom {
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
    margin-top: 0;
}

@media (max-width: 1100px) {
    .ds-hero-lab__inner {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
        gap: 28px;
        padding-left: 4%;
        padding-right: 4%;
    }

    .ds-hero-lab__title {
        font-size: clamp(45px, 5.2vw, 60px);
        letter-spacing: -2.7px;
    }

    .ds-hero-lab__title-line--last {
        font-size: .7em;
        letter-spacing: -1.4px;
    }

    .ds-hero-lab__stage { min-height: 440px; }
    .ds-lab-window--website { left: 5%; width: 82%; }
    .ds-lab-website { min-height: 290px; }
    .ds-lab-website__body { width: 75%; }
    .ds-lab-website__heading { font-size: clamp(29px, 3.3vw, 36px); }

    .ds-lab-window--analytics {
        top: 220px;
        width: 43%;
        padding: 10px;
    }

    .ds-lab-build { width: 74%; bottom: 14px; }

    .ds-hero-lab__rail {
        padding-left: 4%;
        padding-right: 4%;
    }
}

@media (max-width: 800px) {
    .ds-hero-lab { overflow: hidden; }

    .ds-hero-lab__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 42px;
        padding: 48px 6% 38px;
    }

    .ds-hero-lab__content {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
    }

    .ds-hero-lab__title {
        font-size: clamp(46px, 8.5vw, 68px);
        letter-spacing: -2.8px;
    }

    .ds-hero-lab__title-line--last {
        font-size: .7em;
        letter-spacing: -1.4px;
    }

    .ds-hero-lab__description { max-width: 560px; font-size: 16px; }
    .ds-hero-lab__proof { margin-top: 28px; }

    .ds-hero-lab__visual {
        width: 100%;
        max-width: 610px;
        margin: 0 auto;
        perspective: none;
    }

    .ds-hero-lab__stage {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        min-height: 0;
        margin-top: 18px;
        padding: 0;
        overflow: hidden;
        isolation: auto;
    }

    .ds-hero-lab__index { display: none; }

    .ds-hero-lab .ds-lab-window--website,
    .ds-hero-lab .ds-lab-window--analytics,
    .ds-hero-lab .ds-lab-build {
        position: relative;
        inset: auto;
        width: 100%;
        max-width: none;
        margin: 0;
        transform: none;
        animation: none;
    }

    .ds-hero-lab .ds-lab-window--website { order: 1; }
    .ds-hero-lab .ds-lab-window--analytics { order: 2; padding: 15px; }
    .ds-hero-lab .ds-lab-build { order: 3; }
    .ds-hero-lab .ds-lab-website { min-height: 310px; }
    .ds-hero-lab .ds-lab-website__body { width: 70%; }
    .ds-hero-lab .ds-lab-website__heading { font-size: clamp(34px, 7vw, 46px); }
    .ds-hero-lab .ds-lab-website__art { width: 43%; }
    .ds-hero-lab .ds-lab-website__art-letter { font-size: clamp(125px, 23vw, 190px); }
    .ds-hero-lab .ds-lab-chart { height: 100px; }
    .ds-hero-lab .ds-lab-analytics__metric strong { font-size: 30px; }
    .ds-hero-lab .ds-lab-build { min-height: 66px; }
    .ds-hero-lab__visual-bottom { margin-top: 16px; }

    .ds-hero-lab__rail {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        padding: 17px 6%;
    }

    .ds-hero-lab__rail-center {
        order: 3;
        width: 100%;
        line-height: 1.7;
    }
}

@media (max-width: 480px) {
    .ds-hero-lab__inner {
        gap: 34px;
        padding: 38px 20px 32px;
    }

    .ds-hero-lab__eyebrow {
        gap: 7px;
        margin-bottom: 22px;
        font-size: 14px;
        letter-spacing: .5px;
    }

    .ds-hero-lab__title {
        font-size: clamp(40px, 10.7vw, 51px);
        line-height: 1.07;
        letter-spacing: -2.2px;
    }

    .ds-hero-lab__title-line { margin-bottom: 7px; }

    .ds-hero-lab__title-line--last {
        margin-top: 12px;
        font-size: .72em;
        letter-spacing: -1px;
    }

    .ds-hero-lab__highlight::after { bottom: -3px; height: 2px; }

    .ds-hero-lab__description {
        margin-top: 20px;
        font-size: 16px;
        line-height: 1.75;
    }

    .ds-hero-lab__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 11px;
        margin-top: 23px;
    }

    .ds-hero-lab__button { width: 100%; min-height: 52px; }
    .ds-hero-lab__proof { gap: 11px; margin-top: 25px; padding-top: 18px; }

    .ds-hero-lab__proof-copy strong,
    .ds-hero-lab__proof-copy > span { font-size: 14px; }

    .ds-hero-lab__visual-top {
        align-items: flex-start;
        flex-wrap: wrap;
        font-size: 14px;
        letter-spacing: .5px;
    }

    .ds-hero-lab__live { font-size: 14px; }
    .ds-hero-lab__stage { gap: 12px; margin-top: 13px; }
    .ds-hero-lab .ds-lab-window__bar { height: 32px; }
    .ds-hero-lab .ds-lab-website { min-height: 270px; padding: 0 13px; }
    .ds-hero-lab .ds-lab-website__nav { min-height: 38px; }
    .ds-hero-lab .ds-lab-website__body { width: 76%; padding-top: 23px; }
    .ds-hero-lab .ds-lab-website__label { font-size: 14px; letter-spacing: .3px; }
    .ds-hero-lab .ds-lab-website__heading { font-size: clamp(29px, 8vw, 36px); letter-spacing: -1.7px; }

    .ds-hero-lab .ds-lab-website__cta {
        max-width: 100%;
        gap: 5px;
        padding: 9px;
        font-size: 14px;
    }

    .ds-hero-lab .ds-lab-website__art { width: 41%; height: 62%; }
    .ds-hero-lab .ds-lab-website__art-letter { font-size: 120px; letter-spacing: -8px; }

    .ds-hero-lab .ds-lab-website__footer {
        left: 13px;
        right: 13px;
        min-height: 28px;
        font-size: 14px;
        letter-spacing: 0;
    }

    .ds-hero-lab .ds-lab-window--analytics { padding: 13px; }
    .ds-hero-lab .ds-lab-analytics__top { flex-wrap: wrap; font-size: 14px; }
    .ds-hero-lab .ds-lab-analytics__metric { margin-top: 13px; }

    .ds-hero-lab .ds-lab-analytics__metric > span,
    .ds-hero-lab .ds-lab-analytics__metric small { font-size: 14px; }

    .ds-hero-lab .ds-lab-chart { height: 78px; }
    .ds-hero-lab .ds-lab-build { gap: 10px; padding: 12px; }
    .ds-hero-lab .ds-lab-build__copy { flex: 1; }

    .ds-hero-lab .ds-lab-build__copy strong,
    .ds-hero-lab .ds-lab-build__copy > span { font-size: 14px; line-height: 1.5; }

    .ds-hero-lab__visual-bottom {
        justify-content: space-between;
        gap: 7px;
        font-size: 14px;
        letter-spacing: 0;
    }

    .ds-hero-lab__visual-line { width: 10px; flex: 0 0 10px; }

    .ds-hero-lab__rail {
        padding: 16px 20px;
        font-size: 14px;
        letter-spacing: .3px;
    }
}

/* HERO ALIGNMENT FIX: DIGITALEX SOLUTIONS ENDS HERE */



/* =====================================================
   SERVICES SHOWCASE SECTION STARTS HERE
===================================================== */

.ds-services {
    --dss-bg: #fff8ed;
    --dss-ink: #20170f;
    --dss-orange: #e85b00;
    --dss-gold: #e9a72e;
    --dss-muted: #776b5c;

    position: relative;
    overflow: hidden;
    padding: clamp(60px, 8vw, 112px) 0 30px;
    background:
        radial-gradient(ellipse at 5% 25%, #e9a72e12, transparent 32%),
        var(--dss-bg);
    color: var(--dss-ink);
}

.ds-services-inner {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: clamp(22px, 4.5vw, 70px);
}

.ds-services-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .48fr);
    align-items: end;
    gap: 35px;
    margin-bottom: 42px;
}

.ds-services-heading-left,
.ds-services-heading-right {
    min-width: 0;
}

.ds-services-eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 23px;
    color: var(--dss-muted);
    font: 500 14px/1.6 "DM Mono", monospace;
    letter-spacing: 1px;
}

.ds-services-index {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #e7c99e;
    border-radius: 50%;
    color: var(--dss-orange);
}

.ds-services-heading h2 {
    margin: 0;
    font-family: "Manrope", "DM Sans", sans-serif;
    font-size: clamp(38px, 5vw, 70px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.065em;
}

.ds-services-heading h2 span {
    color: var(--dss-orange);
}

.ds-services-heading-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 23px;
}

.ds-services-heading-right > p {
    max-width: 410px;
    margin: 0;
    color: var(--dss-muted);
    font-size: 16px;
    line-height: 1.8;
}

.ds-services-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ds-services-counter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: 12px;
    font: 500 14px/1.5 "DM Mono", monospace;
    color: var(--dss-ink);
}

.ds-services-counter-divider {
    color: #c1ae94;
}

.ds-services-arrow {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid #ddcdb6;
    border-radius: 50%;
    background: transparent;
    color: var(--dss-ink);
    font-size: 21px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.ds-services-arrow:hover:not(:disabled) {
    background: var(--dss-orange);
    color: white;
    border-color: var(--dss-orange);
    transform: translateY(-2px);
}

.ds-services-arrow:disabled {
    opacity: .35;
    cursor: default;
}

.ds-services-rail-wrap {
    position: relative;
}

.ds-services-rail {
    display: grid;
    grid-auto-columns: minmax(280px, 31.5%);
    grid-auto-flow: column;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 3px 2px 22px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ds-services-rail::-webkit-scrollbar {
    display: none;
}

.ds-service-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 510px;
    flex-direction: column;
    padding: 23px;
    overflow: hidden;
    border: 1px solid #20170f0d;
    border-radius: 18px;
    scroll-snap-align: start;
    isolation: isolate;
    transition: transform .35s ease, box-shadow .35s ease;
}

.ds-service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 48px #20170f16;
}

.ds-service-card-top {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ds-service-number,
.ds-service-category {
    font: 500 14px/1.6 "DM Mono", monospace;
    letter-spacing: .7px;
}

.ds-service-symbol {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 18px;
    transition: transform .3s ease;
}

.ds-service-card:hover .ds-service-symbol {
    transform: rotate(45deg);
}

.ds-service-web {
    background: #f0b33d;
    color: #21180e;
}

.ds-service-software {
    background: #f6e4bd;
    color: #21180e;
}

.ds-service-mobile {
    background: #e85b00;
    color: white;
}

.ds-service-growth {
    background: #21180e;
    color: #fff8ed;
}

.ds-service-ux {
    background: #f3d37a;
    color: #21180e;
}

.ds-service-brand {
    background: #f8eee0;
    color: #21180e;
}

.ds-service-art {
    position: relative;
    display: grid;
    place-items: center;
    height: 180px;
    flex: 0 0 180px;
    margin: 14px -4px 12px;
    overflow: hidden;
    border-radius: 12px;
}

.ds-service-art-web {
    background: #e7a12a;
}

.ds-browser-window {
    position: relative;
    z-index: 2;
    width: 75%;
    height: 112px;
    border: 1px solid #20170f50;
    border-radius: 9px;
    background: #fff8ed;
    box-shadow: 13px 14px 0 #20170f12;
    transform: rotate(-5deg);
    transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

.ds-service-card:hover .ds-browser-window {
    transform: rotate(0) translateY(-6px);
}

.ds-browser-bar {
    display: flex;
    gap: 5px;
    height: 21px;
    padding: 7px 8px;
    border-bottom: 1px solid #20170f17;
}

.ds-browser-bar i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #e85b00;
}

.ds-browser-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 11px;
}

.ds-browser-content span {
    height: 5px;
    border-radius: 5px;
    background: #e8cba0;
}

.ds-browser-content span:nth-child(2) {
    width: 60%;
}

.ds-browser-content div {
    grid-column: 1 / -1;
    height: 33px;
    border-radius: 5px;
    background: linear-gradient(100deg, #e85b00, #efad32);
}

.ds-art-orbit {
    position: absolute;
    width: 210px;
    height: 210px;
    border: 1px solid #fff7e77a;
    border-radius: 50%;
    transform: translate(65px, -8px);
}

.ds-service-art-software {
    background: #f1d7a3;
}

.ds-code-panel {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 25px 1fr 1.4fr;
    align-items: center;
    gap: 12px;
    width: 73%;
    padding: 17px;
    border: 1px solid #20170f1f;
    border-radius: 10px;
    background: #21180f;
    box-shadow: 12px 13px 0 #20170f0d;
    transform: rotate(4deg);
    transition: transform .45s ease;
}

.ds-service-card:hover .ds-code-panel {
    transform: rotate(0) translateY(-5px);
}

.ds-code-panel span {
    color: #efad32;
    font: 14px "DM Mono", monospace;
}

.ds-code-panel i,
.ds-code-panel b {
    height: 5px;
    border-radius: 6px;
    background: #e85b00;
}

.ds-code-panel b {
    background: #f3d37a;
}

.ds-service-art-mobile {
    background: #d74f00;
}

.ds-phone {
    position: relative;
    z-index: 2;
    width: 80px;
    height: 142px;
    padding: 8px;
    border: 2px solid #fff2d3;
    border-radius: 16px;
    background: #21180f;
    box-shadow: 12px 14px 0 #7c2900;
    transform: rotate(-9deg);
    transition: transform .45s ease;
}

.ds-service-card:hover .ds-phone {
    transform: rotate(0) translateY(-5px);
}

.ds-phone-camera {
    width: 23px;
    height: 4px;
    margin: 0 auto 8px;
    border-radius: 5px;
    background: #efad32;
}

.ds-phone-screen {
    display: flex;
    flex-direction: column;
    gap: 7px;
    height: 105px;
    padding: 8px 5px;
    border-radius: 7px;
    background: #fff8ed;
}

.ds-phone-screen span {
    height: 5px;
    border-radius: 4px;
    background: #efad32;
}

.ds-phone-screen span:nth-child(2) {
    width: 65%;
}

.ds-phone-screen div {
    height: 36px;
    border-radius: 5px;
    background: #e85b00;
}

.ds-phone-screen i {
    height: 7px;
    border-radius: 5px;
    background: #eddbb8;
}

.ds-phone-glow {
    position: absolute;
    width: 150px;
    height: 150px;
    border: 1px solid #fff5d654;
    border-radius: 50%;
}

.ds-service-art-growth {
    background: #312317;
}

.ds-growth-bars {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    width: 75%;
    height: 110px;
    border-bottom: 1px solid #efad3266;
}

.ds-growth-bars i {
    width: 13%;
    height: 30%;
    border-radius: 5px 5px 0 0;
    background: #e85b00;
    transform-origin: bottom;
    animation: ds-growth-bar 2.8s ease-in-out infinite alternate;
}

.ds-growth-bars i:nth-child(2) {
    height: 45%;
    background: #efad32;
    animation-delay: -.4s;
}

.ds-growth-bars i:nth-child(3) {
    height: 60%;
    animation-delay: -.8s;
}

.ds-growth-bars i:nth-child(4) {
    height: 75%;
    background: #efad32;
    animation-delay: -1.2s;
}

.ds-growth-bars i:nth-child(5) {
    height: 100%;
    animation-delay: -1.6s;
}

.ds-growth-line {
    position: absolute;
    width: 60%;
    height: 75px;
    border-top: 2px solid #fff2d3;
    border-radius: 50%;
    transform: rotate(-28deg) translateY(-15px);
}

.ds-service-art-ux {
    background: #e9c35e;
}

.ds-ux-shape {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid #21180f6b;
    border-radius: 50%;
    transition: transform .5s ease;
}

.ds-ux-shape-one {
    background: #e85b00;
    transform: translate(-42px, -12px);
}

.ds-ux-shape-two {
    background: #f8e8c5;
    transform: translate(30px, 20px);
    mix-blend-mode: multiply;
}

.ds-ux-shape-three {
    width: 48px;
    height: 48px;
    background: #21180f;
    transform: translate(1px, -30px);
}

.ds-service-card:hover .ds-ux-shape-one {
    transform: translate(-53px, -17px);
}

.ds-service-card:hover .ds-ux-shape-two {
    transform: translate(40px, 27px);
}

.ds-service-art-brand {
    background: #f0e0c9;
}

.ds-brand-ring {
    position: absolute;
    width: 145px;
    height: 145px;
    border: 1px solid #e85b0077;
    border-radius: 50%;
    transition: transform .6s ease;
}

.ds-brand-ring-one {
    transform: rotate(30deg) scaleX(.65);
}

.ds-brand-ring-two {
    transform: rotate(-30deg) scaleX(.65);
}

.ds-brand-monogram {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: #21180f;
    color: #efad32;
    font: 800 30px/1 "Manrope", sans-serif;
    letter-spacing: -3px;
    transition: transform .4s ease;
}

.ds-service-card:hover .ds-brand-ring-one {
    transform: rotate(75deg) scaleX(.65);
}

.ds-service-card:hover .ds-brand-ring-two {
    transform: rotate(-75deg) scaleX(.65);
}

.ds-service-card:hover .ds-brand-monogram {
    transform: rotate(-8deg) scale(1.07);
}

.ds-service-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
}

.ds-service-category {
    margin-bottom: 12px;
    color: #65523c;
    font-size: 14px;
}

.ds-service-mobile .ds-service-category {
    color: #fff0db;
}

.ds-service-growth .ds-service-category {
    color: #efad32;
}

.ds-service-card-content h3 {
    margin: 0 0 12px;
    font: 800 clamp(24px, 2vw, 30px)/1.14 "Manrope", sans-serif;
    letter-spacing: -.055em;
}

.ds-service-card-content p {
    margin: 0 0 22px;
    color: #574632;
    font-size: 15px;
    line-height: 1.75;
}

.ds-service-mobile .ds-service-card-content p,
.ds-service-growth .ds-service-card-content p {
    color: #f8e7d5;
}

.ds-service-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    margin-top: auto;
    border-bottom: 1px solid currentColor;
    color: #21180f !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
}

.ds-service-mobile .ds-service-link,
.ds-service-growth .ds-service-link {
    color: #fff8ed !important;
}

.ds-service-link span {
    font-size: 18px;
    transition: transform .2s ease;
}

.ds-service-link:hover span {
    transform: translate(3px, -3px);
}

.ds-services-rail-progress {
    height: 3px;
    overflow: hidden;
    background: #20170f15;
}

.ds-services-rail-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--dss-orange);
    transition: width .12s linear;
}

.ds-services-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 23px;
    font: 500 14px/1.6 "DM Mono", monospace;
    letter-spacing: .6px;
    color: var(--dss-muted);
}

.ds-services-bottom a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--dss-orange) !important;
    font: 700 15px/1.5 "DM Sans", sans-serif;
    text-decoration: none !important;
}

.ds-services-bottom a span {
    font-size: 18px;
}

/* Services card animation */

@keyframes ds-growth-bar {
    from { transform: scaleY(.72); }
    to { transform: scaleY(1); }
}

/* Services tablet layout */

@media (max-width: 1000px) {
    .ds-services-heading {
        grid-template-columns: minmax(0, 1fr) minmax(230px, .55fr);
        gap: 25px;
    }

    .ds-services-rail {
        grid-auto-columns: minmax(270px, 44%);
    }

    .ds-service-card {
        min-height: 500px;
    }
}

/* Services mobile layout */

@media (max-width: 700px) {
    .ds-services {
        padding-top: 64px;
    }

    .ds-services-inner {
        padding-inline: 20px;
    }

    .ds-services-heading {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        margin-bottom: 28px;
    }

    .ds-services-heading h2 {
        font-size: clamp(36px, 9vw, 55px);
    }

    .ds-services-heading-right {
        gap: 16px;
    }

    .ds-services-controls {
        align-self: flex-end;
    }

    .ds-services-rail {
        grid-auto-columns: minmax(270px, 86%);
        gap: 14px;
        padding-bottom: 17px;
    }

    .ds-service-card {
        min-height: 485px;
        padding: 19px;
    }

    .ds-service-art {
        height: 165px;
        flex-basis: 165px;
    }

    .ds-services-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 380px) {
    .ds-services-inner {
        padding-inline: 16px;
    }

    .ds-services-rail {
        grid-auto-columns: 92%;
    }

    .ds-service-card {
        min-height: 490px;
        padding: 17px;
    }
}

/* =====================================================
   SERVICES SHOWCASE SECTION ENDS HERE
===================================================== */

/* SECTION 03: WHY DIGITALEX STARTS HERE */

.ds-why-work {
    --dww-bg: #15110e;
    --dww-cream: #f7f0e5;
    --dww-muted: #aaa094;
    --dww-dim: #8b8175;
    --dww-orange: #ed7625;
    --dww-gold: #efb344;
    --dww-border: rgba(247, 240, 229, .14);

    position: relative;
    overflow: hidden;
    color: var(--dww-cream);
    background:
        radial-gradient(ellipse at 88% 0%, rgba(110, 55, 18, .12), transparent 38%),
        var(--dww-bg);
    font-family: inherit;
}

.ds-why-work *,
.ds-why-work *::before,
.ds-why-work *::after {
    box-sizing: border-box;
}

.ds-why-work a {
    color: inherit;
    text-decoration: none;
}

.ds-why-work__inner {
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 88px 6.2% 65px;
}

/* TOPLINE */

.ds-why-work__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--dww-border);
    color: var(--dww-muted);
    font-size: 14px;
    font-weight: 650;
    letter-spacing: 1.2px;
}

.ds-why-work__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ds-why-work__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dww-orange);
    box-shadow: 0 0 12px rgba(237, 118, 37, .45);
}

.ds-why-work__topline-right {
    text-align: right;
}

/* INTRO */

.ds-why-work__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
    align-items: end;
    gap: 55px;
    padding: 39px 0 43px;
}

.ds-why-work__intro h2 {
    margin: 0;
    color: var(--dww-cream);
    font-size: clamp(46px, 5.4vw, 76px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -3.8px;
}

.ds-why-work__intro h2 > span {
    color: var(--dww-orange);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-style: italic;
}

.ds-why-work__intro-copy {
    padding: 0 0 5px 24px;
    border-left: 1px solid rgba(239, 179, 68, .27);
}

.ds-why-work__intro-mark {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--dww-gold);
    font-size: 25px;
}

.ds-why-work__intro-copy p {
    margin: 0;
    color: var(--dww-cream);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.65;
}

.ds-why-work__intro-copy a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    color: var(--dww-gold);
    font-size: 14px;
    font-weight: 700;
    transition: color .2s ease;
}

.ds-why-work__intro-copy a span {
    font-size: 18px;
    transition: transform .2s ease;
}

.ds-why-work__intro-copy a:hover {
    color: var(--dww-cream);
}

.ds-why-work__intro-copy a:hover span {
    transform: translate(3px, -3px);
}

/* CARD GRID */

.ds-why-work__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    align-items: stretch;
}

/* BASE CARD */

.ds-why-card {
    --card-bg: #1e1914;
    --card-fg: #f7f0e5;
    --card-muted: #b7ab9c;
    --card-accent: #efb344;
    --card-art-bg: #292017;

    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 17px;
    overflow: hidden;
    border: 1px solid rgba(247, 240, 229, .14);
    background: var(--card-bg);
    color: var(--card-fg);
    transition: transform .3s ease, border-color .3s ease;
}

.ds-why-card:hover {
    transform: translateY(-5px);
    border-color: rgba(239, 179, 68, .5);
}

.ds-why-card--cream {
    --card-bg: #f1e8d9;
    --card-fg: #201811;
    --card-muted: #625649;
    --card-accent: #c05b1d;
    --card-art-bg: #e1d2bb;
    border-color: transparent;
}

.ds-why-card--orange {
    --card-bg: #df712a;
    --card-fg: #20140c;
    --card-muted: #472819;
    --card-accent: #fff0d5;
    --card-art-bg: #ef9850;
    border-color: transparent;
}

.ds-why-card--dark {
    --card-bg: #201912;
    --card-fg: #f7f0e5;
    --card-muted: #b5a999;
    --card-accent: #efb344;
    --card-art-bg: #17120e;
}

.ds-why-card--gold {
    --card-bg: #e7b956;
    --card-fg: #21180d;
    --card-muted: #584221;
    --card-accent: #a74e1c;
    --card-art-bg: #f0cc7e;
    border-color: transparent;
}

/* CARD HEADER */

.ds-why-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 28px;
    color: var(--card-muted);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: .7px;
}

.ds-why-card__arrow {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: var(--card-accent);
    font-size: 16px;
    transition: transform .25s ease, background .25s ease;
}

.ds-why-card:hover .ds-why-card__arrow {
    transform: translate(2px, -2px);
}

/* ARTWORK AREA */

.ds-why-card__art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 205px;
    margin: 17px 0 20px;
    overflow: hidden;
    background: var(--card-art-bg);
}

.ds-why-card__art::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .35;
    background-image:
        linear-gradient(rgba(30, 24, 17, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 24, 17, .09) 1px, transparent 1px);
    background-size: 25px 25px;
}

.ds-why-card__content {
    flex: 1;
    padding-bottom: 23px;
}

.ds-why-card__content h3 {
    margin: 0 0 11px;
    color: var(--card-fg);
    font-size: clamp(19px, 1.65vw, 24px);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -.7px;
}

.ds-why-card__content p {
    margin: 0;
    color: var(--card-muted);
    font-size: 14px;
    line-height: 1.8;
}

/* CARD FOOTER */

.ds-why-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid currentColor;
    border-color: color-mix(in srgb, var(--card-fg) 18%, transparent);
    color: var(--card-muted);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: .5px;
}

.ds-why-card__bottom span:last-child {
    color: var(--card-accent);
}

/* ART 01: THINK */

.ds-why-card__think-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    aspect-ratio: 1;
    border: 1px solid rgba(32, 24, 17, .38);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: transform .4s ease;
}

.ds-why-card__think-ring--outer {
    width: 155px;
}

.ds-why-card__think-ring--inner {
    width: 102px;
    border-color: var(--card-accent);
}

.ds-why-card__think-core {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 67px;
    height: 67px;
    border-radius: 50%;
    background: var(--card-bg);
    color: var(--card-fg);
    font-size: 23px;
    font-weight: 850;
}

.ds-why-card__think-core span {
    display: inline;
    color: var(--card-accent);
}

.ds-why-card__think-label {
    position: absolute;
    z-index: 2;
    padding: 6px 8px;
    border: 1px solid rgba(32, 24, 17, .23);
    background: var(--card-bg);
    color: var(--card-fg);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: .5px;
}

.ds-why-card__think-label--one {
    top: 23%;
    left: 8%;
}

.ds-why-card__think-label--two {
    right: 6%;
    bottom: 22%;
}

/* ART 02: DESIGN */

.ds-why-card__art--design {
    background: var(--card-art-bg);
}

.ds-why-card__design-block {
    position: absolute;
    width: 47%;
    height: 42%;
    border: 1px solid rgba(32, 20, 12, .25);
    transform: rotate(-12deg) skewY(-7deg);
    transition: transform .35s ease;
}

.ds-why-card__design-block--one {
    top: 17%;
    left: 9%;
    background: rgba(255, 240, 213, .8);
}

.ds-why-card__design-block--two {
    right: 8%;
    bottom: 16%;
    background: rgba(117, 52, 20, .55);
}

.ds-why-card__design-block--three {
    top: 30%;
    left: 27%;
    background: rgba(238, 182, 74, .8);
}

.ds-why-card__design-circle {
    position: absolute;
    right: -23px;
    bottom: -48px;
    width: 135px;
    height: 135px;
    border: 1px solid rgba(32, 20, 12, .55);
    border-radius: 50%;
}

.ds-why-card__design-word {
    position: absolute;
    z-index: 2;
    left: 12px;
    bottom: 12px;
    color: #25170f;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: .6px;
}

/* ART 03: BUILD */

.ds-why-card__build-window {
    width: 87%;
    border: 1px solid rgba(239, 179, 68, .34);
    background: #201912;
}

.ds-why-card__build-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    border-bottom: 1px solid rgba(247, 240, 229, .12);
}

.ds-why-card__build-bar i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ed7625;
}

.ds-why-card__build-bar i:nth-child(2) {
    background: #efb344;
}

.ds-why-card__build-bar i:nth-child(3) {
    background: #a4bd83;
}

.ds-why-card__build-bar span {
    overflow: hidden;
    margin-left: 5px;
    color: #b5a999;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ds-why-card__build-code {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 10px 8px;
    padding: 16px 12px;
}

.ds-why-card__build-code span {
    color: #817466;
    font-size: 14px;
}

.ds-why-card__build-code i {
    display: block;
    height: 4px;
    border-radius: 3px;
    background: rgba(239, 179, 68, .65);
}

.ds-why-card__code-long {
    width: 85%;
}

.ds-why-card__code-medium {
    width: 61%;
    background: rgba(237, 118, 37, .8) !important;
}

.ds-why-card__code-short {
    width: 43%;
}

.ds-why-card__build-status {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 12px;
    border-top: 1px solid rgba(247, 240, 229, .12);
    color: #b5a999;
    font-size: 14px;
    letter-spacing: .3px;
}

.ds-why-card__build-status span {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #a8c88d;
}

/* ART 04: EVOLVE */

.ds-why-card__evolve-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    width: 63%;
    max-width: 180px;
    transform: rotate(-8deg);
}

.ds-why-card__evolve-grid i {
    display: block;
    aspect-ratio: 1;
    border: 1px solid rgba(33, 24, 13, .25);
    background: rgba(255, 244, 215, .35);
    transition: transform .3s ease, background .3s ease;
}

.ds-why-card__evolve-grid i:nth-child(2),
.ds-why-card__evolve-grid i:nth-child(4),
.ds-why-card__evolve-grid i:nth-child(6) {
    background: rgba(237, 118, 37, .5);
}

.ds-why-card__evolve-grid i:nth-child(8),
.ds-why-card__evolve-grid i:nth-child(9) {
    background: #b65a21;
}

.ds-why-card__evolve-arrow {
    position: absolute;
    top: 13%;
    right: 12%;
    color: #783d1c;
    font-size: 43px;
}

.ds-why-card__evolve-caption {
    position: absolute;
    bottom: 13px;
    left: 12px;
    color: #50371a;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: .7px;
}

/* ART HOVER DETAILS */

.ds-why-card:hover .ds-why-card__think-ring--outer {
    transform: translate(-50%, -50%) scale(1.06);
}

.ds-why-card:hover .ds-why-card__design-block--one {
    transform: rotate(-8deg) skewY(-7deg) translateY(-4px);
}

.ds-why-card:hover .ds-why-card__design-block--two {
    transform: rotate(-16deg) skewY(-7deg) translateY(3px);
}

.ds-why-card:hover .ds-why-card__evolve-grid i:nth-child(3n) {
    transform: translateY(-3px);
}

/* CLOSING STRIP */

.ds-why-work__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--dww-border);
}

.ds-why-work__footer-statement {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.ds-why-work__footer-symbol {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid rgba(239, 179, 68, .4);
    color: var(--dww-gold);
    font-size: 14px;
    font-weight: 850;
    letter-spacing: -1px;
}

.ds-why-work__footer-statement p {
    margin: 0;
    color: var(--dww-muted);
    font-size: 15px;
    line-height: 1.6;
}

.ds-why-work__footer-statement strong {
    color: var(--dww-cream);
    font-weight: 700;
}

.ds-why-work__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(239, 179, 68, .38);
    color: var(--dww-cream);
    font-size: 14px;
    font-weight: 700;
    transition: background .25s ease, color .25s ease;
}

.ds-why-work__cta span {
    color: var(--dww-gold);
    font-size: 18px;
}

.ds-why-work__cta:hover {
    color: var(--dww-bg);
    background: var(--dww-gold);
}

.ds-why-work__cta:hover span {
    color: var(--dww-bg);
}

/* TABLET */

@media (max-width: 1100px) {
    .ds-why-work__inner {
        padding: 75px 4% 55px;
    }

    .ds-why-work__intro {
        grid-template-columns: minmax(0, 1fr) minmax(230px, .7fr);
        gap: 32px;
    }

    .ds-why-work__intro h2 {
        font-size: clamp(43px, 5.7vw, 62px);
        letter-spacing: -2.8px;
    }

    .ds-why-work__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    .ds-why-card {
        padding: 19px;
    }

    .ds-why-card__art {
        min-height: 215px;
    }

    .ds-why-card__content h3 {
        font-size: 23px;
    }
}

/* MOBILE */

@media (max-width: 650px) {
    .ds-why-work__inner {
        padding: 52px 20px 38px;
    }

    .ds-why-work__topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        font-size: 14px;
    }

    .ds-why-work__topline-right {
        padding-left: 17px;
        text-align: left;
    }

    .ds-why-work__intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 31px 0 32px;
    }

    .ds-why-work__intro h2 {
        font-size: clamp(41px, 9.5vw, 57px);
        line-height: 1.08;
        letter-spacing: -2.3px;
    }

    .ds-why-work__intro-copy {
        padding-left: 17px;
    }

    .ds-why-work__intro-copy p {
        font-size: 17px;
    }

    .ds-why-work__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .ds-why-card {
        padding: 17px;
    }

    .ds-why-card__art {
        min-height: 225px;
        margin: 15px 0 18px;
    }

    .ds-why-card__content h3 {
        font-size: 23px;
    }

    .ds-why-card__content p {
        font-size: 15px;
    }

    .ds-why-work__footer {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
    }

    .ds-why-work__cta {
        width: 100%;
    }
}

/* SMALL PHONES */

@media (max-width: 380px) {
    .ds-why-work__inner {
        padding-right: 16px;
        padding-left: 16px;
    }

    .ds-why-work__intro h2 {
        font-size: 39px;
        letter-spacing: -1.8px;
    }

    .ds-why-card__art {
        min-height: 200px;
    }

    .ds-why-work__footer-statement {
        align-items: flex-start;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .ds-why-work *,
    .ds-why-work *::before,
    .ds-why-work *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* SECTION 03: WHY DIGITALEX ENDS HERE */



/* =====================================================
   SELECTED WORK PORTFOLIO SECTION STARTS HERE
===================================================== */

.ds-portfolio {
    --dsp-bg: #fff8ed;
    --dsp-ink: #20170f;
    --dsp-muted: #776b5c;
    --dsp-orange: #e85b00;
    --dsp-gold: #e9a72e;

    padding: clamp(65px, 8vw, 115px) 0 35px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 90% 12%, #e9a72e15, transparent 32%),
        var(--dsp-bg);
    color: var(--dsp-ink);
}

.ds-portfolio-inner {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: clamp(22px, 4.5vw, 70px);
}

.ds-portfolio-topline,
.ds-portfolio-heading,
.ds-portfolio-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.ds-portfolio-topline {
    padding-bottom: 18px;
    border-bottom: 1px solid #20170f20;
    color: var(--dsp-muted);
    font: 500 14px/1.7 "DM Mono", monospace;
    letter-spacing: .7px;
}

.ds-portfolio-topline b,
.ds-portfolio-topline i {
    color: var(--dsp-orange);
    font-style: normal;
}

.ds-portfolio-heading {
    align-items: flex-end;
    padding-block: clamp(42px, 6vw, 75px);
}

.ds-portfolio-heading > div {
    min-width: 0;
}

.ds-portfolio-eyebrow {
    display: inline-block;
    margin-bottom: 19px;
    color: var(--dsp-orange);
    font: 500 14px/1.6 "DM Mono", monospace;
    letter-spacing: 1px;
}

.ds-portfolio-heading h2 {
    margin: 0;
    font: 800 clamp(39px, 5.5vw, 76px)/1.02 "Manrope", sans-serif;
    letter-spacing: -.07em;
}

.ds-portfolio-heading h2 em {
    color: var(--dsp-orange);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -.055em;
}

.ds-portfolio-heading > p {
    max-width: 380px;
    margin: 0 0 5px;
    color: var(--dsp-muted);
    font-size: 16px;
    line-height: 1.8;
}

.ds-portfolio-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 27px;
}

.ds-portfolio-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 43px;
    padding: 0 16px;
    border: 1px solid #20170f20;
    border-radius: 999px;
    background: transparent;
    color: var(--dsp-ink);
    font: 600 14px/1.4 "DM Sans", sans-serif;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.ds-portfolio-filter:hover,
.ds-portfolio-filter.is-active {
    border-color: var(--dsp-ink);
    background: var(--dsp-ink);
    color: #fff8ed;
}

.ds-portfolio-filter span {
    color: var(--dsp-gold);
    font-size: 14px;
}

.ds-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 37px 22px;
}

.ds-project-card {
    min-width: 0;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .3s ease, transform .3s ease;
}

.ds-project-card.is-filtered-out {
    display: none;
}

.ds-project-preview {
    position: relative;
    display: flex;
    min-width: 0;
    aspect-ratio: 1.42;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 13px;
    color: var(--dsp-ink);
    text-decoration: none !important;
    isolation: isolate;
}

.ds-project-featured {
    grid-column: span 2;
}

.ds-project-featured .ds-project-preview {
    aspect-ratio: 2.1;
}

.ds-preview-label {
    position: absolute;
    z-index: 6;
    top: 17px;
    left: 17px;
    padding: 8px 11px;
    border: 1px solid #ffffff55;
    border-radius: 999px;
    background: #20170f20;
    color: #fff8ed;
    font: 500 14px/1.4 "DM Mono", monospace;
    letter-spacing: .5px;
    backdrop-filter: blur(10px);
}

.ds-preview-open {
    position: absolute;
    z-index: 7;
    right: 17px;
    bottom: 17px;
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border: 1px solid #ffffff80;
    border-radius: 50%;
    background: #20170f40;
    color: white;
    font-size: 21px;
    transition: transform .3s ease, background .3s ease;
}

.ds-project-preview:hover .ds-preview-open {
    transform: rotate(45deg);
    background: var(--dsp-orange);
}

.ds-project-preview::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    border: 1px solid #20170f0b;
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.ds-project-preview > div:not(.ds-preview-window) {
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.ds-project-preview:hover > div:not(.ds-preview-window) {
    transform: scale(1.035);
}

/* FollowUpPro preview */

.ds-preview-followup {
    background: radial-gradient(ellipse at 80% 20%, #efad3240, transparent 40%), #17120d;
}

.ds-preview-window {
    position: relative;
    display: flex;
    width: 76%;
    height: 72%;
    overflow: hidden;
    border: 1px solid #ffffff20;
    border-radius: 11px;
    background: #211a14;
    box-shadow: 0 25px 60px #0006;
    transform: perspective(900px) rotateY(-7deg) rotateX(2deg);
    transition: transform .5s ease;
}

.ds-project-preview:hover .ds-preview-window {
    transform: perspective(900px) rotateY(0) rotateX(0) translateY(-5px);
}

.ds-preview-sidebar {
    display: flex;
    width: 17%;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 15px 7px;
    border-right: 1px solid #ffffff15;
}

.ds-preview-logo {
    margin-bottom: 7px;
    color: var(--dsp-gold);
    font: 800 24px "Manrope", sans-serif;
}

.ds-preview-sidebar i {
    width: 19px;
    height: 6px;
    border-radius: 5px;
    background: #ffffff30;
}

.ds-preview-sidebar i:first-of-type {
    background: var(--dsp-orange);
}

.ds-preview-dashboard {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 13px;
    padding: 18px;
}

.ds-preview-caption {
    color: #fff8ed;
    font: 500 14px "DM Mono", monospace;
    letter-spacing: .6px;
}

.ds-preview-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.ds-preview-metrics i {
    height: 49px;
    border: 1px solid #ffffff16;
    border-radius: 5px;
    background: linear-gradient(140deg, #efad321a, #ffffff03);
}

.ds-preview-chart {
    display: flex;
    height: 85px;
    align-items: flex-end;
    gap: 7px;
    padding: 10px;
    border: 1px solid #ffffff16;
    border-radius: 5px;
}

.ds-preview-chart i {
    flex: 1;
    height: 30%;
    border-radius: 3px 3px 0 0;
    background: var(--dsp-orange);
}

.ds-preview-chart i:nth-child(2) { height: 65%; }
.ds-preview-chart i:nth-child(3) { height: 42%; }
.ds-preview-chart i:nth-child(4) { height: 78%; background: var(--dsp-gold); }
.ds-preview-chart i:nth-child(5) { height: 56%; }
.ds-preview-chart i:nth-child(6) { height: 90%; background: var(--dsp-gold); }
.ds-preview-chart i:nth-child(7) { height: 68%; }

.ds-preview-table {
    display: flex;
    gap: 8px;
}

.ds-preview-table i {
    height: 6px;
    flex: 1;
    border-radius: 5px;
    background: #ffffff24;
}

/* Digitalex Skill Hub */

.ds-preview-skillhub {
    background: linear-gradient(135deg, #f7d789, #e9a72e);
}

.ds-preview-education {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 12% 9%;
    overflow: hidden;
    background: radial-gradient(circle at 80% 70%, #ffffff55, transparent 25%);
}

.ds-preview-education > span:first-child,
.ds-preview-natural > span:first-child,
.ds-preview-industrial > span:first-child,
.ds-preview-hospitality > span:first-child,
.ds-preview-travel > span:first-child,
.ds-preview-corporate > span:first-child,
.ds-preview-tech > span:first-child,
.ds-preview-hotel > span:first-child,
.ds-preview-air > span:first-child,
.ds-preview-training > span:first-child,
.ds-preview-holiday > span:first-child {
    position: relative;
    z-index: 3;
    display: block;
    font: 500 14px "DM Mono", monospace;
    letter-spacing: .6px;
}

.ds-preview-education strong {
    position: relative;
    z-index: 3;
    display: block;
    margin-top: 17px;
    font: 800 clamp(32px, 5vw, 62px)/.98 "Manrope", sans-serif;
    letter-spacing: -.07em;
}

.ds-preview-education em {
    font-family: Georgia, serif;
    font-weight: 400;
}

.ds-education-shape {
    position: absolute;
    right: 10%;
    bottom: -24%;
    width: 43%;
    aspect-ratio: 1;
    border: 1px solid #20170f66;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff4d4, #e85b00);
    box-shadow: -23px -18px 0 #20170f12;
    transition: transform .5s ease;
}

.ds-project-preview:hover .ds-education-shape {
    transform: translateY(-10px) rotate(12deg);
}

.ds-preview-cta {
    position: absolute;
    bottom: 10%;
    left: 9%;
    font: 500 14px "DM Mono", monospace;
}

/* Vedik Greens */

.ds-preview-vedik {
    background: linear-gradient(135deg, #d7dfb9, #f4e7ca);
}

.ds-preview-natural {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10%;
    overflow: hidden;
    background: radial-gradient(ellipse at 78% 58%, #7e9b5b50, transparent 42%);
}

.ds-preview-natural > span:first-child {
    color: #33472b;
}

.ds-preview-natural strong {
    position: relative;
    z-index: 3;
    display: block;
    margin-top: 15px;
    color: #24391e;
    font: 700 clamp(33px, 4.4vw, 56px)/1 "Manrope", sans-serif;
    letter-spacing: -.06em;
}

.ds-natural-product {
    position: absolute;
    right: 13%;
    bottom: 8%;
    display: grid;
    width: 27%;
    aspect-ratio: .72;
    place-items: center;
    border: 1px solid #f8f0d2;
    border-radius: 12px 12px 22px 22px;
    background: linear-gradient(90deg, #4a603c, #7d9559, #35492c);
    box-shadow: 13px 13px 25px #33472b2b;
    color: #f8e9bd;
    font: 800 22px "Manrope", sans-serif;
    transition: transform .4s ease;
}

.ds-project-preview:hover .ds-natural-product {
    transform: translateY(-7px) rotate(4deg);
}

.ds-natural-caption {
    position: absolute;
    bottom: 12%;
    left: 10%;
    color: #33472b;
    font: 500 14px "DM Mono", monospace;
}

/* Brandix */

.ds-preview-brandix {
    background: linear-gradient(135deg, #d4d4ce, #efeee8);
}

.ds-preview-industrial {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10%;
    overflow: hidden;
    background: linear-gradient(120deg, #f4f3ed 50%, #d7d7d0 50%);
}

.ds-preview-industrial > span:first-child {
    color: #4b504e;
}

.ds-preview-industrial strong {
    position: relative;
    z-index: 3;
    display: block;
    margin-top: 16px;
    color: #2a302f;
    font: 800 clamp(35px, 4.5vw, 58px)/.96 "Manrope", sans-serif;
    letter-spacing: -.07em;
}

.ds-preview-industrial strong span,
.ds-preview-tech strong span {
    color: #e85b00;
}

.ds-industrial-lines {
    position: absolute;
    top: 12%;
    right: 7%;
    display: flex;
    gap: 9px;
    height: 80%;
    transform: rotate(18deg);
}

.ds-industrial-lines i {
    width: 12px;
    height: 100%;
    background: #303633;
    opacity: .09;
}

/* Indian Hospitality Association */

.ds-preview-iha {
    background: linear-gradient(135deg, #2b514a, #16342f);
}

.ds-preview-hospitality {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10%;
    overflow: hidden;
    background: radial-gradient(ellipse at 80% 80%, #efad3235, transparent 45%);
}

.ds-preview-hospitality > span:first-child {
    color: #e4d7bd;
}

.ds-preview-hospitality strong {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 17px;
    color: #fff7e6;
    font: 800 clamp(36px, 4.6vw, 60px)/.94 "Manrope", sans-serif;
    letter-spacing: -.065em;
}

.ds-preview-hospitality em {
    color: #efad32;
    font-family: Georgia, serif;
    font-weight: 400;
}

.ds-hospitality-line {
    position: absolute;
    right: 10%;
    bottom: 15%;
    width: 35%;
    height: 35%;
    border: 1px solid #efad3266;
    border-radius: 50%;
    transform: rotate(-35deg);
}

/* Southshore Journeys */

.ds-preview-southshore {
    background: linear-gradient(180deg, #f4d39a, #b6d2bc);
}

.ds-preview-travel {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10%;
    overflow: hidden;
    background: linear-gradient(180deg, #f3d49e 0%, #d7e2c4 55%, #648d72 100%);
}

.ds-preview-travel > span:first-child {
    color: #27483e;
}

.ds-preview-travel strong {
    position: relative;
    z-index: 4;
    display: block;
    margin-top: 16px;
    color: #20463b;
    font: 800 clamp(32px, 4.3vw, 56px)/.98 "Manrope", sans-serif;
    letter-spacing: -.065em;
}

.ds-preview-travel em {
    color: #f9f0d9;
    font-family: Georgia, serif;
    font-weight: 400;
}

.ds-travel-sun {
    position: absolute;
    right: 13%;
    top: 20%;
    width: 20%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff1bf;
}

.ds-travel-horizon {
    position: absolute;
    right: -8%;
    bottom: -25%;
    left: -8%;
    height: 55%;
    border-radius: 50% 50% 0 0;
    background: #3c7865;
    box-shadow: 0 -18px 0 #719d7b;
}

/* Alora Global */

.ds-corporate-alora {
    background: linear-gradient(135deg, #eadbc5, #c7aa85);
}

.ds-preview-corporate {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10%;
    overflow: hidden;
}

.ds-preview-corporate > span:first-child {
    color: #423324;
}

.ds-preview-corporate strong {
    position: relative;
    z-index: 3;
    display: block;
    margin-top: 16px;
    color: #30241a;
    font: 800 clamp(32px, 4.4vw, 55px)/.97 "Manrope", sans-serif;
    letter-spacing: -.065em;
}

.ds-preview-corporate em {
    color: #8c4e20;
    font-family: Georgia, serif;
    font-weight: 400;
}

.ds-corporate-orbit {
    position: absolute;
    right: -5%;
    bottom: -40%;
    width: 65%;
    aspect-ratio: 1;
    border: 1px solid #5b402e6e;
    border-radius: 50%;
    box-shadow: 0 0 0 20px #5b402e0b, 0 0 0 45px #5b402e0b;
}

/* Zionix Infotech */

.ds-preview-zionix {
    background: #171b2b;
}

.ds-preview-tech {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10%;
    overflow: hidden;
    background: radial-gradient(ellipse at 85% 60%, #e85b0029, transparent 40%);
}

.ds-preview-tech > span:first-child {
    color: #c8cce0;
}

.ds-preview-tech strong {
    position: relative;
    z-index: 3;
    display: block;
    margin-top: 17px;
    color: #fff8ed;
    font: 800 clamp(34px, 4.5vw, 58px)/.97 "Manrope", sans-serif;
    letter-spacing: -.065em;
}

.ds-tech-lines {
    position: absolute;
    right: 7%;
    bottom: 10%;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 50%;
    opacity: .45;
}

.ds-tech-lines i {
    width: 11px;
    height: 35%;
    background: #efad32;
}

.ds-tech-lines i:nth-child(2) { height: 70%; }
.ds-tech-lines i:nth-child(3) { height: 52%; }
.ds-tech-lines i:nth-child(4) { height: 90%; }
.ds-tech-lines i:nth-child(5) { height: 62%; }

/* Swaron Inn */

.ds-preview-swaron {
    background: linear-gradient(135deg, #d9c3a3, #8d7154);
}

.ds-preview-hotel {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10%;
    overflow: hidden;
    background: linear-gradient(135deg, #d9c3a3, #8c735a);
}

.ds-preview-hotel > span:first-child {
    color: #35291e;
}

.ds-preview-hotel strong {
    position: relative;
    z-index: 3;
    display: block;
    margin-top: 16px;
    color: #35291e;
    font: 800 clamp(33px, 4.5vw, 57px)/.98 "Manrope", sans-serif;
    letter-spacing: -.06em;
}

.ds-hotel-window {
    position: absolute;
    right: 12%;
    bottom: 9%;
    display: flex;
    gap: 7px;
    width: 33%;
    height: 45%;
    padding: 8px;
    border: 1px solid #fff5deaa;
    background: #45352a;
    transform: rotate(5deg);
}

.ds-hotel-window i {
    flex: 1;
    background: linear-gradient(180deg, #efad32, #b96c26);
}

/* Airpartsol */

.ds-preview-airparts {
    background: linear-gradient(135deg, #d5e0e6, #7b98a7);
}

.ds-preview-air {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10%;
    overflow: hidden;
    background: linear-gradient(135deg, #dce6eb, #91aab7);
}

.ds-preview-air > span:first-child {
    color: #213c4a;
}

.ds-preview-air strong {
    position: relative;
    z-index: 3;
    display: block;
    margin-top: 16px;
    color: #213c4a;
    font: 800 clamp(32px, 4.2vw, 53px)/.97 "Manrope", sans-serif;
    letter-spacing: -.06em;
}

.ds-preview-air strong span {
    color: #e85b00;
}

.ds-air-rings {
    position: absolute;
    right: 5%;
    bottom: -20%;
    width: 50%;
    aspect-ratio: 1;
}

.ds-air-rings i {
    position: absolute;
    inset: 0;
    border: 1px solid #213c4a55;
    border-radius: 50%;
}

.ds-air-rings i:nth-child(2) { inset: 17%; }
.ds-air-rings i:nth-child(3) { inset: 34%; }

/* S-Technologies */

.ds-preview-st {
    background: linear-gradient(135deg, #d4e3ee, #a2c5df);
}

.ds-preview-training {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10%;
    overflow: hidden;
    background: linear-gradient(135deg, #d4e3ee, #a2c5df);
}

.ds-preview-training > span:first-child {
    color: #25455f;
}

.ds-preview-training strong {
    position: relative;
    z-index: 3;
    display: block;
    margin-top: 16px;
    color: #1f3b53;
    font: 800 clamp(33px, 4.4vw, 56px)/.97 "Manrope", sans-serif;
    letter-spacing: -.065em;
}

.ds-preview-training em {
    color: #e85b00;
    font-family: Georgia, serif;
    font-weight: 400;
}

.ds-training-bars {
    position: absolute;
    right: 9%;
    bottom: 12%;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 40%;
}

.ds-training-bars i {
    width: 15px;
    height: 38%;
    border-radius: 4px 4px 0 0;
    background: #25455f;
}

.ds-training-bars i:nth-child(2) { height: 67%; }
.ds-training-bars i:nth-child(3) { height: 48%; background: #e85b00; }
.ds-training-bars i:nth-child(4) { height: 90%; }

/* South Kumari Holidays */

.ds-preview-southkumari {
    background: linear-gradient(180deg, #f4d7a2, #d58b52);
}

.ds-preview-holiday {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10%;
    overflow: hidden;
    background: linear-gradient(180deg, #f3d5a0, #d99c62 70%, #a95e35);
}

.ds-preview-holiday > span:first-child {
    color: #533321;
}

.ds-preview-holiday strong {
    position: relative;
    z-index: 4;
    display: block;
    margin-top: 16px;
    color: #4b2c1b;
    font: 800 clamp(32px, 4.4vw, 55px)/.98 "Manrope", sans-serif;
    letter-spacing: -.065em;
}

.ds-preview-holiday em {
    color: #fff5df;
    font-family: Georgia, serif;
    font-weight: 400;
}

.ds-holiday-sun {
    position: absolute;
    top: 20%;
    right: 13%;
    width: 20%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff0bf;
}

.ds-holiday-hills {
    position: absolute;
    right: -10%;
    bottom: -32%;
    left: -10%;
    height: 52%;
    border-radius: 50% 50% 0 0;
    background: #75482f;
    box-shadow: 0 -20px 0 #a56c45;
}

/* Project captions */

.ds-project-info {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
    gap: 12px 20px;
    padding: 18px 2px 0;
}

.ds-project-info > div > span {
    display: block;
    margin-bottom: 7px;
    color: var(--dsp-muted);
    font: 500 14px/1.5 "DM Mono", monospace;
    letter-spacing: .4px;
}

.ds-project-info h3 {
    margin: 0;
    font: 800 clamp(20px, 2vw, 27px)/1.2 "Manrope", sans-serif;
    letter-spacing: -.045em;
}

.ds-project-info p {
    margin: 0;
    color: var(--dsp-muted);
    font-size: 15px;
    line-height: 1.75;
}

.ds-project-info > a {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    width: fit-content;
    min-height: 35px;
    border-bottom: 1px solid #e85b0066;
    color: var(--dsp-orange) !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
}

.ds-project-info > a span {
    font-size: 18px;
    transition: transform .2s ease;
}

.ds-project-info > a:hover span {
    transform: translate(3px, -3px);
}

.ds-portfolio-footer {
    margin-top: 60px;
    padding-top: 24px;
    border-top: 1px solid #20170f20;
}

.ds-portfolio-footer-index {
    color: var(--dsp-orange);
    font: 500 14px "DM Mono", monospace;
}

.ds-portfolio-footer p {
    margin: 8px 0 0;
    font: 700 clamp(20px, 2.4vw, 30px)/1.3 "Manrope", sans-serif;
    letter-spacing: -.04em;
}

.ds-portfolio-footer > a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 0 19px;
    border-radius: 999px;
    background: var(--dsp-orange);
    color: white !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    transition: transform .2s ease, background .2s ease;
}

.ds-portfolio-footer > a:hover {
    transform: translateY(-3px);
    background: #c94f00;
}

/* Tablet */

@media (max-width: 900px) {
    .ds-portfolio-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .ds-portfolio-heading > p {
        max-width: 580px;
    }

    .ds-project-featured .ds-project-preview {
        aspect-ratio: 1.55;
    }

    .ds-project-info {
        grid-template-columns: minmax(0, 1fr);
    }

    .ds-project-info > a {
        grid-column: 1;
    }
}

/* Mobile */

@media (max-width: 650px) {
    .ds-portfolio {
        padding-top: 65px;
    }

    .ds-portfolio-inner {
        padding-inline: 20px;
    }

    .ds-portfolio-topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .ds-portfolio-heading {
        padding-block: 40px;
        gap: 18px;
    }

    .ds-portfolio-heading h2 {
        font-size: clamp(37px, 9.5vw, 58px);
    }

    .ds-portfolio-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 9px;
        scrollbar-width: thin;
        scrollbar-color: #e9a72e transparent;
    }

    .ds-portfolio-filter {
        flex: 0 0 auto;
    }

    .ds-portfolio-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .ds-project-featured {
        grid-column: auto;
    }

    .ds-project-featured .ds-project-preview,
    .ds-project-preview {
        aspect-ratio: 1.3;
    }

    .ds-preview-window {
        width: 83%;
        height: 70%;
    }

    .ds-preview-dashboard {
        padding: 10px;
        gap: 9px;
    }

    .ds-preview-chart {
        height: 60px;
    }

    .ds-project-info {
        gap: 10px;
    }

    .ds-portfolio-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
        margin-top: 40px;
    }
}

@media (max-width: 380px) {
    .ds-portfolio-inner {
        padding-inline: 16px;
    }

    .ds-preview-education strong,
    .ds-preview-natural strong,
    .ds-preview-industrial strong,
    .ds-preview-hospitality strong,
    .ds-preview-travel strong,
    .ds-preview-corporate strong,
    .ds-preview-tech strong,
    .ds-preview-hotel strong,
    .ds-preview-air strong,
    .ds-preview-training strong,
    .ds-preview-holiday strong {
        font-size: 32px;
    }

    .ds-preview-label {
        top: 11px;
        left: 11px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-portfolio *,
    .ds-portfolio *::before,
    .ds-portfolio *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =====================================================
   SELECTED WORK PORTFOLIO SECTION ENDS HERE
===================================================== */


/* SECTION 04: HOW WE WORK STARTS HERE */

.ds-studio-process {
    --dsp-bg: #17120e;
    --dsp-cream: #f7f0e5;
    --dsp-paper: #f2e7d5;
    --dsp-ink: #211811;
    --dsp-muted: #b5a999;
    --dsp-dim: #897e71;
    --dsp-orange: #ed7625;
    --dsp-gold: #efb344;
    --dsp-border: rgba(247, 240, 229, .15);

    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse at 90% 5%, rgba(112, 55, 18, .14), transparent 35%),
        var(--dsp-bg);
    color: var(--dsp-cream);
    font-family: inherit;
}

.ds-studio-process *,
.ds-studio-process *::before,
.ds-studio-process *::after {
    box-sizing: border-box;
}

.ds-studio-process a {
    color: inherit;
    text-decoration: none;
}

.ds-studio-process button {
    font: inherit;
}

.ds-studio-process__inner {
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 88px 6.2% 65px;
}

/* TOPLINE */

.ds-studio-process__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--dsp-border);
    color: var(--dsp-muted);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
}

.ds-studio-process__topline > span:first-child {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ds-studio-process__topline i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dsp-orange);
}

/* INTRO */

.ds-studio-process__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(250px, .7fr);
    align-items: end;
    gap: 50px;
    padding: 40px 0 38px;
}

.ds-studio-process__eyebrow {
    margin: 0 0 15px;
    color: var(--dsp-gold);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: 1.6px;
}

.ds-studio-process__intro h2 {
    margin: 0;
    color: var(--dsp-cream);
    font-size: clamp(45px, 5.2vw, 72px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -3.5px;
}

.ds-studio-process__intro h2 em {
    color: var(--dsp-orange);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.ds-studio-process__intro-copy {
    max-width: 390px;
    margin: 0 0 5px;
    padding-left: 23px;
    border-left: 1px solid rgba(239, 179, 68, .35);
    color: var(--dsp-muted);
    font-size: 16px;
    line-height: 1.9;
}

/* WORKSPACE */

.ds-studio-process__workspace {
    padding: 19px;
    border: 1px solid rgba(239, 179, 68, .2);
    background: rgba(255, 255, 255, .018);
}

.ds-studio-process__workspace-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 2px 17px;
    color: var(--dsp-muted);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: .9px;
}

.ds-studio-process__workspace-label {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ds-studio-process__status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a8c88d;
    box-shadow: 0 0 9px rgba(168, 200, 141, .3);
}

.ds-studio-process__workspace-id {
    color: var(--dsp-dim);
}

.ds-studio-process__workspace-id span {
    color: var(--dsp-gold);
}

/* SELECTOR + CANVAS */

.ds-studio-process__workspace-grid {
    display: grid;
    grid-template-columns: minmax(235px, .72fr) minmax(0, 1.28fr);
    gap: 16px;
    align-items: stretch;
}

/* LEFT STAGE NAVIGATION */

.ds-studio-process__nav {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 14px;
    background: var(--dsp-paper);
    color: var(--dsp-ink);
}

.ds-studio-process__stage {
    position: relative;
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 83px;
    padding: 13px 8px;
    border: 0;
    border-bottom: 1px solid rgba(33, 24, 17, .14);
    border-radius: 0;
    background: transparent;
    color: #6c5d4e;
    text-align: left;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, padding .2s ease;
}

.ds-studio-process__stage:last-of-type {
    border-bottom-color: transparent;
}

.ds-studio-process__stage:hover,
.ds-studio-process__stage:focus-visible {
    color: var(--dsp-ink);
}

.ds-studio-process__stage:focus-visible {
    outline: 2px solid #9e4d1c;
    outline-offset: -2px;
}

.ds-studio-process__stage.is-active {
    padding-left: 12px;
    background: rgba(237, 118, 37, .09);
    color: var(--dsp-ink);
}

.ds-studio-process__stage-num {
    align-self: start;
    padding-top: 3px;
    color: #9a8875;
    font-size: 14px;
    font-weight: 750;
}

.ds-studio-process__stage.is-active .ds-studio-process__stage-num {
    color: #b85a20;
}

.ds-studio-process__stage-info {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.ds-studio-process__stage-info strong {
    color: inherit;
    font-size: 19px;
    font-weight: 750;
    letter-spacing: -.5px;
}

.ds-studio-process__stage-info small {
    color: #76695b;
    font-size: 14px;
    line-height: 1.5;
}

.ds-studio-process__stage-arrow {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(33, 24, 17, .22);
    border-radius: 50%;
    color: #9e4d1c;
    font-size: 14px;
    opacity: 0;
    transform: translate(-3px, 3px);
    transition: opacity .2s ease, transform .2s ease;
}

.ds-studio-process__stage.is-active .ds-studio-process__stage-arrow,
.ds-studio-process__stage:hover .ds-studio-process__stage-arrow,
.ds-studio-process__stage:focus-visible .ds-studio-process__stage-arrow {
    opacity: 1;
    transform: none;
}

.ds-studio-process__nav-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding: 19px 5px 3px;
    color: #776a5b;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: .6px;
}

.ds-studio-process__nav-progress {
    width: 48px;
    height: 3px;
    overflow: hidden;
    background: rgba(33, 24, 17, .15);
}

.ds-studio-process__nav-progress i {
    display: block;
    width: 25%;
    height: 100%;
    background: #b85a20;
    transition: transform .35s ease;
}

/* MAIN VISUAL CANVAS */

.ds-studio-process__canvas {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 17px;
    overflow: hidden;
    background: var(--dsp-paper);
    color: var(--dsp-ink);
}

.ds-studio-process__canvas-top,
.ds-studio-process__canvas-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #756654;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: .7px;
}

.ds-studio-process__canvas-top {
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(33, 24, 17, .15);
}

.ds-studio-process__canvas-top span:last-child {
    color: #a45b27;
}

.ds-studio-process__canvas-bottom {
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 13px;
    border-top: 1px solid rgba(33, 24, 17, .15);
}

.ds-studio-process__canvas-bottom-note {
    color: #a45b27;
}

/* ARTWORK CONTAINER */

.ds-studio-process__art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 345px;
    margin: 0;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(rgba(33, 24, 17, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(33, 24, 17, .035) 1px, transparent 1px),
        #e9d9c3;
    background-size: 28px 28px;
}

.ds-studio-process__art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(33, 24, 17, .07));
}

.ds-studio-process__art > div:not(.ds-studio-process__orbit) {
    min-width: 0;
}

.ds-studio-process__art-discover,
.ds-studio-process__art-design,
.ds-studio-process__art-develop,
.ds-studio-process__art-launch {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(.985);
    transition:
        opacity .3s ease,
        transform .3s ease,
        visibility .3s ease;
}

.ds-studio-process__art[data-dsp-art="0"] .ds-studio-process__art-discover,
.ds-studio-process__art[data-dsp-art="1"] .ds-studio-process__art-design,
.ds-studio-process__art[data-dsp-art="2"] .ds-studio-process__art-develop,
.ds-studio-process__art[data-dsp-art="3"] .ds-studio-process__art-launch {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* ART 01 — DISCOVER */

.ds-studio-process__orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    aspect-ratio: 1;
    border: 1px solid rgba(164, 91, 39, .4);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.ds-studio-process__orbit--outer {
    width: 245px;
    border-color: rgba(164, 91, 39, .25);
}

.ds-studio-process__orbit--middle {
    width: 180px;
    border-color: rgba(237, 118, 37, .5);
}

.ds-studio-process__orbit--inner {
    width: 120px;
    border-color: rgba(164, 91, 39, .65);
}

.ds-studio-process__idea-core {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    width: 92px;
    height: 92px;
    border: 1px solid #a45b27;
    border-radius: 50%;
    background: var(--dsp-paper);
}

.ds-studio-process__idea-core span {
    color: #b65a21;
    font-size: 32px;
    font-weight: 850;
    letter-spacing: -2px;
}

.ds-studio-process__idea-core small {
    color: #665546;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: .5px;
}

.ds-studio-process__idea-tag {
    position: absolute;
    z-index: 2;
    padding: 9px 12px;
    border: 1px solid rgba(164, 91, 39, .35);
    background: var(--dsp-paper);
    color: #453323;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: .4px;
}

.ds-studio-process__idea-tag--one {
    top: 21%;
    left: 17%;
}

.ds-studio-process__idea-tag--two {
    top: 34%;
    right: 12%;
}

.ds-studio-process__idea-tag--three {
    bottom: 16%;
    left: 41%;
}

/* ART 02 — DESIGN */

.ds-studio-process__art-design {
    background: #e5a36e;
}

.ds-studio-process__design-paper {
    position: relative;
    width: 62%;
    max-width: 340px;
    min-height: 260px;
    padding: 15px;
    background: #f7f0e5;
    box-shadow: 12px 14px 0 rgba(33, 24, 17, .1);
    transform: rotate(-3deg);
}

.ds-studio-process__paper-top,
.ds-studio-process__paper-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #625142;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: .6px;
}

.ds-studio-process__paper-top {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(33, 24, 17, .2);
}

.ds-studio-process__paper-top span:last-child {
    color: #bd5a20;
}

.ds-studio-process__paper-heading {
    margin-top: 23px;
    color: #211811;
    font-size: clamp(28px, 3.1vw, 43px);
    font-weight: 850;
    line-height: .97;
    letter-spacing: -2px;
}

.ds-studio-process__paper-heading em {
    color: #bd5a20;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.ds-studio-process__paper-lines {
    display: grid;
    gap: 5px;
    margin-top: 17px;
}

.ds-studio-process__paper-lines i {
    display: block;
    width: 75%;
    height: 4px;
    background: #d4c5b1;
}

.ds-studio-process__paper-lines i:nth-child(2) {
    width: 54%;
}

.ds-studio-process__paper-lines i:nth-child(3) {
    width: 66%;
}

.ds-studio-process__paper-block {
    height: 35px;
    margin-top: 14px;
    background: #211811;
}

.ds-studio-process__paper-footer {
    margin-top: 12px;
    font-size: 14px;
    letter-spacing: 0;
}

.ds-studio-process__design-note {
    position: absolute;
    right: 6%;
    bottom: 12%;
    color: #512b17;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: .5px;
}

/* ART 03 — DEVELOP */

.ds-studio-process__art-develop {
    background: #242019;
}

.ds-studio-process__art-develop::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(247, 240, 229, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(247, 240, 229, .045) 1px, transparent 1px);
    background-size: 25px 25px;
}

.ds-studio-process__dev-window {
    position: relative;
    z-index: 1;
    width: 72%;
    max-width: 360px;
    border: 1px solid rgba(239, 179, 68, .35);
    background: #1a1510;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .22);
}

.ds-studio-process__dev-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid rgba(247, 240, 229, .13);
}

.ds-studio-process__dev-top > span {
    display: flex;
    gap: 5px;
}

.ds-studio-process__dev-top i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ed7625;
}

.ds-studio-process__dev-top i:nth-child(2) {
    background: #efb344;
}

.ds-studio-process__dev-top i:nth-child(3) {
    background: #a8c88d;
}

.ds-studio-process__dev-top small {
    color: #b5a999;
    font-size: 14px;
}

.ds-studio-process__dev-top b {
    color: #b5a999;
    font-size: 14px;
}

.ds-studio-process__dev-code {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 12px 9px;
    padding: 20px;
}

.ds-studio-process__dev-code span {
    color: #756a5c;
    font-size: 14px;
}

.ds-studio-process__dev-code i {
    display: block;
    height: 4px;
    border-radius: 4px;
    background: #d29b46;
}

.ds-studio-process__dev-code .ds-studio-process__code-a { width: 85%; }
.ds-studio-process__dev-code .ds-studio-process__code-b { width: 62%; background: #ed7625; }
.ds-studio-process__dev-code .ds-studio-process__code-c { width: 47%; }
.ds-studio-process__dev-code .ds-studio-process__code-d { width: 73%; background: #a8c88d; }
.ds-studio-process__dev-code .ds-studio-process__code-e { width: 54%; }
.ds-studio-process__dev-code .ds-studio-process__code-f { width: 65%; background: #ed7625; }

.ds-studio-process__dev-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(247, 240, 229, .13);
    color: #c3b8a8;
    font-size: 14px;
    letter-spacing: .5px;
}

.ds-studio-process__dev-live {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #a8c88d;
}

.ds-studio-process__dev-stamp {
    position: absolute;
    right: 5%;
    bottom: 10%;
    color: var(--dsp-gold);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: 1px;
}

/* ART 04 — LAUNCH */

.ds-studio-process__art-launch {
    background: #e9b956;
}

.ds-studio-process__launch-sun {
    position: absolute;
    right: -50px;
    bottom: -100px;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(33, 24, 17, .35);
    border-radius: 50%;
    box-shadow:
        0 0 0 18px rgba(33, 24, 17, .045),
        0 0 0 38px rgba(33, 24, 17, .04);
}

.ds-studio-process__launch-panel {
    position: relative;
    z-index: 1;
    width: 65%;
    max-width: 340px;
    padding: 22px;
    background: #f7f0e5;
    box-shadow: 12px 12px 0 rgba(33, 24, 17, .1);
    transform: rotate(-2deg);
}

.ds-studio-process__launch-panel > span {
    color: #8a5b32;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: .8px;
}

.ds-studio-process__launch-panel strong {
    display: block;
    margin: 19px 0;
    color: #211811;
    font-size: clamp(35px, 4vw, 55px);
    font-weight: 850;
    line-height: .92;
    letter-spacing: -2px;
}

.ds-studio-process__launch-panel strong span {
    color: #bd5a20;
}

.ds-studio-process__launch-line {
    width: 100%;
    height: 5px;
    background: #211811;
}

.ds-studio-process__launch-panel small {
    display: block;
    margin-top: 12px;
    color: #756654;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: .4px;
}

.ds-studio-process__launch-arrow {
    position: absolute;
    top: 12%;
    right: 10%;
    color: #643618;
    font-size: 40px;
}

/* STAGE DESCRIPTION */

.ds-studio-process__description {
    display: grid;
    grid-template-columns: minmax(125px, .48fr) minmax(0, 1.3fr) minmax(180px, .7fr);
    align-items: center;
    gap: 30px;
    padding: 28px 5px 25px;
    border-bottom: 1px solid rgba(247, 240, 229, .12);
}

.ds-studio-process__description-label {
    display: grid;
    align-content: start;
    gap: 12px;
    color: var(--dsp-dim);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: .8px;
}

.ds-studio-process__description-label span:last-child {
    color: var(--dsp-gold);
}

.ds-studio-process__description-main h3 {
    margin: 0 0 10px;
    color: var(--dsp-cream);
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
}

.ds-studio-process__description-main p {
    max-width: 580px;
    margin: 0;
    color: var(--dsp-muted);
    font-size: 15px;
    line-height: 1.8;
}

.ds-studio-process__deliverable {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 19px;
    border-left: 1px solid rgba(239, 179, 68, .3);
}

.ds-studio-process__deliverable-icon {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    border: 1px solid rgba(239, 179, 68, .35);
    color: var(--dsp-gold);
    font-size: 18px;
}

.ds-studio-process__deliverable > span:last-child {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.ds-studio-process__deliverable small {
    color: var(--dsp-dim);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: .5px;
}

.ds-studio-process__deliverable strong {
    color: var(--dsp-cream);
    font-size: 14px;
    line-height: 1.5;
}

/* WORKSPACE FOOTER */

.ds-studio-process__workspace-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 2px 0;
    color: var(--dsp-muted);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: .7px;
}

.ds-studio-process__foot-line {
    width: 23px;
    height: 1px;
    flex: 0 0 23px;
    background: var(--dsp-orange);
}

/* CLOSING CTA */

.ds-studio-process__closing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 25px;
}

.ds-studio-process__closing p {
    margin: 0;
    color: var(--dsp-muted);
    font-size: 15px;
    line-height: 1.7;
}

.ds-studio-process__closing p strong {
    color: var(--dsp-cream);
    font-weight: 700;
}

.ds-studio-process__closing a {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(239, 179, 68, .4);
    color: var(--dsp-cream);
    font-size: 14px;
    font-weight: 750;
    transition: color .25s ease, background .25s ease;
}

.ds-studio-process__closing a span {
    color: var(--dsp-gold);
    font-size: 18px;
}

.ds-studio-process__closing a:hover {
    color: var(--dsp-bg);
    background: var(--dsp-gold);
}

.ds-studio-process__closing a:hover span {
    color: var(--dsp-bg);
}

/* TABLET */

@media (max-width: 1050px) {
    .ds-studio-process__inner {
        padding: 72px 4% 55px;
    }

    .ds-studio-process__intro {
        gap: 30px;
    }

    .ds-studio-process__intro h2 {
        font-size: clamp(43px, 5.7vw, 62px);
        letter-spacing: -2.8px;
    }

    .ds-studio-process__workspace {
        padding: 14px;
    }

    .ds-studio-process__workspace-grid {
        grid-template-columns: minmax(215px, .75fr) minmax(0, 1.25fr);
        gap: 12px;
    }

    .ds-studio-process__nav {
        padding: 9px;
    }

    .ds-studio-process__stage {
        grid-template-columns: 25px minmax(0, 1fr) 22px;
        gap: 7px;
        min-height: 77px;
        padding: 11px 5px;
    }

    .ds-studio-process__stage-info strong {
        font-size: 18px;
    }

    .ds-studio-process__art {
        min-height: 305px;
    }

    .ds-studio-process__description {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 20px;
    }

    .ds-studio-process__deliverable {
        grid-column: 2;
        padding: 14px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(239, 179, 68, .25);
    }
}

/* MOBILE */

@media (max-width: 700px) {
    .ds-studio-process__inner {
        padding: 53px 20px 40px;
    }

    .ds-studio-process__topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        font-size: 14px;
    }

    .ds-studio-process__intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 31px 0;
    }

    .ds-studio-process__intro h2 {
        font-size: clamp(40px, 9vw, 57px);
        line-height: 1.08;
        letter-spacing: -2.4px;
    }

    .ds-studio-process__intro-copy {
        max-width: 540px;
        padding-left: 17px;
        font-size: 15px;
    }

    .ds-studio-process__workspace {
        padding: 12px;
    }

    .ds-studio-process__workspace-head {
        flex-wrap: wrap;
        font-size: 14px;
    }

    .ds-studio-process__workspace-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .ds-studio-process__nav {
        padding: 7px 12px;
    }

    .ds-studio-process__stage {
        grid-template-columns: 31px minmax(0, 1fr) 25px;
        min-height: 73px;
        padding: 11px 7px;
    }

    .ds-studio-process__stage-info strong {
        font-size: 18px;
    }

    .ds-studio-process__stage-info small {
        font-size: 14px;
    }

    .ds-studio-process__stage-arrow {
        opacity: 1;
        transform: none;
    }

    .ds-studio-process__nav-foot {
        padding-top: 13px;
    }

    .ds-studio-process__canvas {
        padding: 12px;
    }

    .ds-studio-process__art {
        min-height: 290px;
    }

    .ds-studio-process__description {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
        padding: 22px 2px;
    }

    .ds-studio-process__description-label {
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }

    .ds-studio-process__description-main h3 {
        font-size: 27px;
    }

    .ds-studio-process__deliverable {
        grid-column: auto;
        padding-top: 15px;
    }

    .ds-studio-process__workspace-foot {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 9px;
        line-height: 1.6;
    }

    .ds-studio-process__foot-line {
        width: 12px;
        flex-basis: 12px;
    }

    .ds-studio-process__closing {
        align-items: stretch;
        flex-direction: column;
        gap: 15px;
    }

    .ds-studio-process__closing a {
        width: 100%;
    }
}

/* SMALL PHONES */

@media (max-width: 390px) {
    .ds-studio-process__inner {
        padding: 44px 15px 32px;
    }

    .ds-studio-process__intro h2 {
        font-size: 39px;
        letter-spacing: -1.8px;
    }

    .ds-studio-process__workspace {
        padding: 9px;
    }

    .ds-studio-process__workspace-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .ds-studio-process__nav {
        padding: 5px 9px;
    }

    .ds-studio-process__art {
        min-height: 245px;
    }

    .ds-studio-process__orbit--outer {
        width: 195px;
    }

    .ds-studio-process__orbit--middle {
        width: 145px;
    }

    .ds-studio-process__orbit--inner {
        width: 105px;
    }

    .ds-studio-process__idea-tag {
        padding: 7px 8px;
        font-size: 14px;
    }

    .ds-studio-process__idea-tag--one {
        left: 5%;
    }

    .ds-studio-process__idea-tag--two {
        right: 4%;
    }

    .ds-studio-process__design-paper {
        width: 73%;
        min-height: 235px;
        padding: 12px;
    }

    .ds-studio-process__paper-heading {
        font-size: 34px;
    }

    .ds-studio-process__dev-window {
        width: 86%;
    }

    .ds-studio-process__dev-code {
        padding: 15px;
    }

    .ds-studio-process__launch-panel {
        width: 75%;
        padding: 17px;
    }

    .ds-studio-process__launch-panel strong {
        font-size: 39px;
    }

    .ds-studio-process__canvas-top,
    .ds-studio-process__canvas-bottom {
        font-size: 14px;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .ds-studio-process *,
    .ds-studio-process *::before,
    .ds-studio-process *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* SECTION 04: HOW WE WORK ENDS HERE */


/* SECTION 05: THE CLIENT PERSPECTIVE STARTS HERE */

.ds-client-view {
    --dcv-bg: #17120e;
    --dcv-cream: #f7f0e5;
    --dcv-muted: #b5a999;
    --dcv-dim: #897e71;
    --dcv-orange: #ed7625;
    --dcv-gold: #efb344;
    --dcv-border: rgba(247, 240, 229, .14);

    background:
        radial-gradient(ellipse at 8% 50%, rgba(104, 53, 20, .12), transparent 36%),
        var(--dcv-bg);
    color: var(--dcv-cream);
    font-family: inherit;
    overflow: hidden;
}

.ds-client-view *,
.ds-client-view *::before,
.ds-client-view *::after {
    box-sizing: border-box;
}

.ds-client-view a {
    color: inherit;
    text-decoration: none;
}

.ds-client-view button {
    font: inherit;
}

.ds-client-view__inner {
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 88px 6.2% 65px;
}

.ds-client-view__topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--dcv-border);
    color: var(--dcv-muted);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
}

.ds-client-view__topline > span:first-child {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ds-client-view__topline i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dcv-orange);
}

.ds-client-view__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(250px, .7fr);
    align-items: end;
    gap: 45px;
    padding: 40px 0;
}

.ds-client-view__eyebrow {
    margin: 0 0 15px;
    color: var(--dcv-gold);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: 1.5px;
}

.ds-client-view__intro h2 {
    margin: 0;
    color: var(--dcv-cream);
    font-size: clamp(44px, 5.2vw, 72px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -3px;
}

.ds-client-view__intro h2 em {
    color: var(--dcv-orange);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.ds-client-view__intro > p {
    max-width: 390px;
    margin: 0 0 5px;
    padding-left: 22px;
    border-left: 1px solid rgba(239, 179, 68, .35);
    color: var(--dcv-muted);
    font-size: 16px;
    line-height: 1.9;
}

/* FEATURE PANEL */

.ds-client-view__feature {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    border: 1px solid var(--dcv-border);
    background: #211a13;
}

/* QUOTE PANEL */

.ds-client-view__quote-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    min-height: 390px;
    padding: clamp(25px, 4vw, 48px);
    background: var(--dcv-cream);
    color: #211811;
}

.ds-client-view__quote-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    color: #776654;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: 1px;
}

.ds-client-view__quote-mark {
    color: #bd5b21;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 66px;
    line-height: .7;
}

.ds-client-view__quote-panel blockquote {
    margin: 30px 0;
}

.ds-client-view__quote-panel blockquote p {
    margin: 0;
    color: #211811;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(23px, 2.5vw, 35px);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -.6px;
}

.ds-client-view__quote-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid rgba(33, 24, 17, .17);
}

.ds-client-view__client {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ds-client-view__avatar {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 50%;
    background: #211811;
    color: var(--dcv-gold);
    font-size: 14px;
    font-weight: 850;
}

.ds-client-view__client > span:last-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.ds-client-view__client strong {
    color: #211811;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.ds-client-view__client small {
    color: #766655;
    font-size: 14px;
    line-height: 1.5;
}

.ds-client-view__quote-number {
    flex-shrink: 0;
    color: #766655;
    font-size: 14px;
    font-weight: 750;
}

.ds-client-view__quote-number span {
    color: #bd5b21;
}

/* RIGHT PANEL */

.ds-client-view__side-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 28px;
}

.ds-client-view__side-heading {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--dcv-border);
    color: var(--dcv-muted);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: .8px;
}

.ds-client-view__side-heading span:last-child {
    color: var(--dcv-gold);
    font-size: 21px;
}

.ds-client-view__point {
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr) 25px;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 91px;
    padding: 16px 4px;
    border: 0;
    border-bottom: 1px solid var(--dcv-border);
    border-radius: 0;
    background: transparent;
    color: var(--dcv-muted);
    text-align: left;
    cursor: pointer;
    transition: color .2s ease, padding .2s ease;
}

.ds-client-view__point:hover,
.ds-client-view__point:focus-visible,
.ds-client-view__point.is-active {
    color: var(--dcv-cream);
}

.ds-client-view__point:focus-visible {
    outline: 1px solid var(--dcv-gold);
    outline-offset: -1px;
}

.ds-client-view__point.is-active {
    padding-left: 9px;
}

.ds-client-view__point-number {
    align-self: start;
    padding-top: 3px;
    color: var(--dcv-dim);
    font-size: 14px;
    font-weight: 750;
}

.ds-client-view__point.is-active .ds-client-view__point-number {
    color: var(--dcv-gold);
}

.ds-client-view__point-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.ds-client-view__point-copy strong {
    color: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.ds-client-view__point-copy small {
    color: var(--dcv-dim);
    font-size: 14px;
    line-height: 1.6;
}

.ds-client-view__point-arrow {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 1px solid rgba(239, 179, 68, .3);
    border-radius: 50%;
    color: var(--dcv-gold);
    opacity: 0;
    transform: translate(-3px, 3px);
    transition: opacity .2s ease, transform .2s ease;
}

.ds-client-view__point.is-active .ds-client-view__point-arrow,
.ds-client-view__point:hover .ds-client-view__point-arrow,
.ds-client-view__point:focus-visible .ds-client-view__point-arrow {
    opacity: 1;
    transform: none;
}

.ds-client-view__side-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 20px;
    color: var(--dcv-dim);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: .5px;
}

.ds-client-view__side-progress {
    width: 46px;
    height: 3px;
    flex: 0 0 46px;
    overflow: hidden;
    background: rgba(247, 240, 229, .15);
}

.ds-client-view__side-progress i {
    display: block;
    width: 33.333%;
    height: 100%;
    background: var(--dcv-orange);
    transition: transform .3s ease;
}

/* TRUST PRINCIPLES */

.ds-client-view__principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 25px;
    border-top: 1px solid var(--dcv-border);
    border-bottom: 1px solid var(--dcv-border);
}

.ds-client-view__principle {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    min-width: 0;
    padding: 24px 20px 24px 0;
}

.ds-client-view__principle + .ds-client-view__principle {
    padding-left: 22px;
    border-left: 1px solid var(--dcv-border);
}

.ds-client-view__principle-icon {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    border: 1px solid rgba(239, 179, 68, .3);
    color: var(--dcv-gold);
    font-size: 14px;
    font-weight: 750;
}

.ds-client-view__principle h3 {
    margin: 0 0 7px;
    color: var(--dcv-cream);
    font-size: 17px;
    font-weight: 700;
}

.ds-client-view__principle p {
    margin: 0;
    color: var(--dcv-muted);
    font-size: 14px;
    line-height: 1.75;
}

/* CLOSING */

.ds-client-view__closing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 25px;
}

.ds-client-view__closing p {
    margin: 0;
    color: var(--dcv-muted);
    font-size: 15px;
    line-height: 1.7;
}

.ds-client-view__closing p strong {
    color: var(--dcv-cream);
}

.ds-client-view__closing a {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(239, 179, 68, .4);
    font-size: 14px;
    font-weight: 750;
    transition: color .2s ease, background .2s ease;
}

.ds-client-view__closing a span {
    color: var(--dcv-gold);
    font-size: 18px;
}

.ds-client-view__closing a:hover {
    color: var(--dcv-bg);
    background: var(--dcv-gold);
}

.ds-client-view__closing a:hover span {
    color: var(--dcv-bg);
}

/* TABLET */

@media (max-width: 1000px) {
    .ds-client-view__inner {
        padding: 70px 4% 55px;
    }

    .ds-client-view__intro {
        gap: 30px;
    }

    .ds-client-view__intro h2 {
        font-size: clamp(43px, 5.5vw, 61px);
        letter-spacing: -2.5px;
    }

    .ds-client-view__feature {
        grid-template-columns: minmax(0, 1fr) minmax(280px, .85fr);
    }

    .ds-client-view__quote-panel {
        min-height: 360px;
        padding: 28px;
    }

    .ds-client-view__side-panel {
        padding: 22px;
    }

    .ds-client-view__principle {
        padding-right: 13px;
    }

    .ds-client-view__principle + .ds-client-view__principle {
        padding-left: 14px;
    }
}

/* MOBILE */

@media (max-width: 700px) {
    .ds-client-view__inner {
        padding: 52px 20px 40px;
    }

    .ds-client-view__topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .ds-client-view__intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 31px 0;
    }

    .ds-client-view__intro h2 {
        font-size: clamp(40px, 9vw, 56px);
        line-height: 1.08;
        letter-spacing: -2px;
    }

    .ds-client-view__intro > p {
        padding-left: 17px;
        font-size: 15px;
    }

    .ds-client-view__feature {
        grid-template-columns: minmax(0, 1fr);
    }

    .ds-client-view__quote-panel {
        min-height: 330px;
        padding: 25px 20px;
    }

    .ds-client-view__quote-panel blockquote {
        margin: 27px 0;
    }

    .ds-client-view__quote-panel blockquote p {
        font-size: clamp(23px, 6vw, 32px);
    }

    .ds-client-view__side-panel {
        padding: 20px;
    }

    .ds-client-view__point {
        min-height: 80px;
    }

    .ds-client-view__point-arrow {
        opacity: 1;
        transform: none;
    }

    .ds-client-view__principles {
        grid-template-columns: minmax(0, 1fr);
    }

    .ds-client-view__principle,
    .ds-client-view__principle + .ds-client-view__principle {
        padding: 20px 0;
        border-left: 0;
    }

    .ds-client-view__principle + .ds-client-view__principle {
        border-top: 1px solid var(--dcv-border);
    }

    .ds-client-view__closing {
        align-items: stretch;
        flex-direction: column;
        gap: 15px;
    }

    .ds-client-view__closing a {
        width: 100%;
    }
}

/* SMALL PHONES */

@media (max-width: 390px) {
    .ds-client-view__inner {
        padding: 43px 15px 32px;
    }

    .ds-client-view__intro h2 {
        font-size: 39px;
        letter-spacing: -1.7px;
    }

    .ds-client-view__quote-panel {
        padding: 22px 16px;
    }

    .ds-client-view__quote-bottom {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .ds-client-view__side-panel {
        padding: 15px;
    }

    .ds-client-view__point {
        grid-template-columns: 25px minmax(0, 1fr) 24px;
        gap: 8px;
    }

    .ds-client-view__point-copy strong {
        font-size: 16px;
    }

    .ds-client-view__side-footer {
        font-size: 14px;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .ds-client-view *,
    .ds-client-view *::before,
    .ds-client-view *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* SECTION 05: CLIENT REVIEW CONTROLS START HERE */
.ds-client-view__stars {
    color: #c78338;
    letter-spacing: 3px;
    margin: 18px 0;
    font-size: 18px;
}

.ds-client-view__review-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.ds-client-view__review-actions button {
    width: 42px;
    height: 42px;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}

.ds-client-view__review-actions button:hover {
    background: #c78338;
    color: #fff;
}

.ds-client-view__google-link,
.ds-client-view__profile-link {
    display: inline-block;
    margin-top: 12px;
}

.ds-client-view__profile-link {
    font-size: 12px;
}

.ds-client-view__profile-link[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .ds-client-view__review-actions button {
        transition: none;
    }
}
 





/* SECTION 05: TESTIMONIAL TYPOGRAPHY FIX STARTS HERE */

/* Main testimonial text */
.ds-client-view__quote-panel blockquote {
    margin: 20px 0;
}

.ds-client-view__quote-panel blockquote p,
.ds-client-view__quote-panel [data-dscv-quote] {
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.8;
    font-weight: 400;
    letter-spacing: -0.01em;
    max-width: 620px;
    overflow-wrap: anywhere;
}

/* Reviewer name and designation */
.ds-client-view__client strong,
.ds-client-view__client [data-dscv-name] {
    font-size: 14px;
    line-height: 1.5;
}

.ds-client-view__client small,
.ds-client-view__client [data-dscv-role] {
    display: block;
    font-size: 12px;
    line-height: 1.6;
    margin-top: 3px;
}

/* Smaller review label and quote mark */
.ds-client-view__quote-top {
    font-size: 10px;
    letter-spacing: 0.12em;
}

.ds-client-view__quote-mark {
    font-size: 48px;
    line-height: 1;
}

.ds-client-view__quote-number {
    font-size: 12px;
    white-space: nowrap;
}

.ds-client-view__stars {
    font-size: 15px;
    letter-spacing: 2px;
    margin: 12px 0;
}

/* Keep the review panel balanced */
.ds-client-view__quote-panel {
    min-width: 0;
}

.ds-client-view__quote-bottom {
    gap: 14px;
    align-items: center;
}

@media (max-width: 767px) {
    .ds-client-view__quote-panel blockquote p,
    .ds-client-view__quote-panel [data-dscv-quote] {
        font-size: 15px;
        line-height: 1.75;
    }
}


/* SECTION 05: FULL-WIDTH TESTIMONIAL STARTS HERE */

.ds-client-view__feature--single {
    display: block;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
}

.ds-client-view__feature--single .ds-client-view__quote-panel {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.ds-client-view__feature--single blockquote p,
.ds-client-view__feature--single [data-dscv-quote] {
    max-width: 780px;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.ds-client-view__feature--single .ds-client-view__quote-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.ds-client-view__feature--single .ds-client-view__review-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.ds-client-view__feature--single .ds-client-view__review-actions button {
    width: 40px;
    height: 40px;
    cursor: pointer;
}

@media (max-width: 767px) {
    .ds-client-view__feature--single blockquote p,
    .ds-client-view__feature--single [data-dscv-quote] {
        font-size: 14px;
        line-height: 1.75;
    }
}

/* SECTION 05: FULL-WIDTH TESTIMONIAL ENDS HERE */


/* SECTION 05: TESTIMONIAL TYPOGRAPHY FIX ENDS HERE */


/* SECTION 05: THE CLIENT PERSPECTIVE ENDS HERE */


/* SECTION 07: FAQ STARTS HERE */

.ds-faq {
    --faq-ink: #29251f;
    --faq-cream: #f8f3e9;
    --faq-orange: #e87932;
    --faq-gold: #e7b968;
    --faq-muted: #756d62;

    position: relative;
    overflow: hidden;
    padding: 108px 0 100px;
    color: var(--faq-ink);
    background:
        radial-gradient(ellipse at 5% 85%, rgba(231, 185, 104, .12), transparent 35%),
        #f8f3e9;
    isolation: isolate;
}

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

.ds-faq__container {
    width: min(1240px, calc(100% - 64px));
    margin: 0 auto;
}

.ds-faq__layout {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: start;
    gap: clamp(45px, 7vw, 100px);
}

/* Left panel */

.ds-faq__intro {
    position: sticky;
    top: 35px;
}

.ds-faq__eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 22px;
    color: #90643b;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.ds-faq__eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--faq-orange);
    box-shadow: 0 0 0 5px rgba(232, 121, 50, .1);
}

.ds-faq__intro h2 {
    margin: 0;
    font-size: clamp(36px, 4.2vw, 55px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -2px;
}

.ds-faq__intro h2 span {
    display: block;
    margin-top: 7px;
    color: var(--faq-orange);
}

.ds-faq__intro > p {
    max-width: 450px;
    margin: 22px 0 31px;
    color: var(--faq-muted);
    font-size: 15px;
    line-height: 1.9;
}

/* Contact card */






.ds-faq__contact-card {
    position: relative;
    overflow: hidden;
    padding: 27px;
    border-radius: 15px;
    color: #fff8ed;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(232, 121, 50, .22), transparent 45%),
        var(--faq-ink);
    box-shadow: 0 16px 35px rgba(41, 37, 31, .1);
}

.ds-faq__contact-card::after {
    position: absolute;
    right: -34px;
    bottom: -45px;
    width: 135px;
    height: 135px;
    border: 1px solid rgba(231, 185, 104, .23);
    border-radius: 50%;
    box-shadow: 0 0 0 20px rgba(231, 185, 104, .035);
    content: "";
    pointer-events: none;
}

.ds-faq__contact-icon {
    display: flex;
    width: 47px;
    height: 47px;
    align-items: center;
    justify-content: center;
    margin-bottom: 23px;
    border: 1px solid rgba(231, 185, 104, .35);
    border-radius: 11px;
    color: var(--faq-gold);
    background: rgba(255, 255, 255, .04);
}

.ds-faq__contact-icon svg {
    width: 23px;
    height: 23px;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ds-faq__contact-label {
    display: block;
    margin-bottom: 10px;
    color: var(--faq-gold);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.ds-faq__contact-card h3 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.35;
}

.ds-faq__contact-card > p {
    position: relative;
    z-index: 1;
    margin: 13px 0 22px;
    color: rgba(255, 248, 237, .75);
    font-size: 14px;
    line-height: 1.8;
}

.ds-faq__contact-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    min-height: 45px;
    padding: 10px 14px;
    border: 1px solid var(--faq-orange);
    border-radius: 6px;
    color: #fff;
    background: var(--faq-orange);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: .3s ease;
}

.ds-faq__contact-link span {
    font-size: 19px;
    transition: transform .3s ease;
}

.ds-faq__contact-link:hover {
    border-color: var(--faq-gold);
    color: var(--faq-ink);
    background: var(--faq-gold);
}

.ds-faq__contact-link:hover span {
    transform: translate(2px, -2px);
}

.ds-faq__footnote {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    color: #786c5b;
    font-size: 14px;
    line-height: 1.6;
}

.ds-faq__footnote-mark {
    display: flex;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(232, 121, 50, .4);
    border-radius: 9px;
    color: #925a31;
    font-size: 14px;
    font-weight: 900;
}

/* Right accordion */

.ds-faq__questions {
    min-width: 0;
}

.ds-faq__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(41, 37, 31, .22);
    color: #85613e;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.ds-faq__topline span:last-child {
    color: #a29889;
    letter-spacing: .8px;
}

.ds-faq__item {
    border-bottom: 1px solid rgba(41, 37, 31, .15);
    transition: border-color .3s ease;
}

.ds-faq__item.is-open {
    border-bottom-color: rgba(232, 121, 50, .55);
}

.ds-faq__question-heading {
    margin: 0;
    font-size: inherit;
}

.ds-faq__question {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 35px;
    align-items: center;
    gap: 15px;
    width: 100%;
    min-height: 83px;
    padding: 19px 0;
    border: 0;
    color: var(--faq-ink);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.ds-faq__number {
    align-self: start;
    padding-top: 3px;
    color: #a29889;
    font-size: 14px;
    font-weight: 800;
    transition: color .3s ease;
}

.ds-faq__question-text {
    font-size: 16px;
    font-weight: 750;
    line-height: 1.6;
    transition: color .3s ease;
}

.ds-faq__toggle {
    position: relative;
    display: block;
    width: 33px;
    height: 33px;
    border: 1px solid rgba(41, 37, 31, .19);
    border-radius: 50%;
    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.ds-faq__toggle::before,
.ds-faq__toggle::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--faq-ink);
    content: "";
    transform: translate(-50%, -50%);
    transition:
        background .3s ease,
        transform .3s ease;
}

.ds-faq__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.ds-faq__item.is-open .ds-faq__toggle {
    border-color: var(--faq-orange);
    background: var(--faq-orange);
}

.ds-faq__item.is-open .ds-faq__toggle::before,
.ds-faq__item.is-open .ds-faq__toggle::after {
    background: #fff;
}

.ds-faq__item.is-open .ds-faq__toggle::after {
    transform: translate(-50%, -50%) rotate(0);
}

.ds-faq__item.is-open .ds-faq__number,
.ds-faq__item.is-open .ds-faq__question-text {
    color: #a95d2c;
}

.ds-faq__question:focus-visible,
.ds-faq__contact-link:focus-visible {
    outline: 3px solid var(--faq-orange);
    outline-offset: 4px;
}

.ds-faq__answer {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition:
        grid-template-rows .3s ease,
        opacity .3s ease;
}

.ds-faq__answer[hidden] {
    display: none;
}

.ds-faq__answer-inner {
    min-height: 0;
    padding: 0 47px 23px 49px;
    color: var(--faq-muted);
    font-size: 14px;
    line-height: 1.9;
}

.ds-faq__bottom-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 24px;
    color: #766b5d;
    font-size: 14px;
    line-height: 1.7;
}

.ds-faq__bottom-dot {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--faq-orange);
}

/* Scroll reveal */

.ds-faq-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2, .75, .25, 1);
}

.ds-faq-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */

@media (max-width: 950px) {
    .ds-faq {
        padding: 85px 0;
    }

    .ds-faq__container {
        width: min(100% - 44px, 760px);
    }

    .ds-faq__layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .ds-faq__intro {
        position: relative;
        top: auto;
    }

    .ds-faq__intro > p {
        max-width: 620px;
    }

    .ds-faq__contact-card {
        max-width: 620px;
    }

    .ds-faq__footnote {
        max-width: 620px;
    }
}

@media (max-width: 600px) {
    .ds-faq {
        padding: 68px 0 62px;
    }

    .ds-faq__container {
        width: calc(100% - 36px);
    }

    .ds-faq__layout {
        gap: 39px;
    }

    .ds-faq__intro h2 {
        font-size: clamp(34px, 8.5vw, 43px);
        letter-spacing: -1.4px;
    }

    .ds-faq__intro > p {
        font-size: 15px;
    }

    .ds-faq__contact-card {
        padding: 23px;
    }

    .ds-faq__contact-card h3 {
        font-size: 23px;
    }

    .ds-faq__topline {
        font-size: 14px;
    }

    .ds-faq__question {
        grid-template-columns: 25px minmax(0, 1fr) 31px;
        gap: 10px;
        min-height: 76px;
        padding: 17px 0;
    }

    .ds-faq__question-text {
        font-size: 15px;
    }

    .ds-faq__toggle {
        width: 30px;
        height: 30px;
    }

    .ds-faq__answer-inner {
        padding: 0 10px 21px 35px;
        font-size: 14px;
    }

    .ds-faq__footnote {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-faq *,
    .ds-faq *::before,
    .ds-faq *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* SECTION 07: FAQ ENDS HERE */


/* FINAL CTA: DIGITALEX SOLUTIONS STARTS HERE */

.ds-next-chapter {
    --dsnc-cream: #f5f0e7;
    --dsnc-paper: #fffdf8;
    --dsnc-ink: #29251f;
    --dsnc-muted: #716b60;
    --dsnc-orange: #dc713e;
    --dsnc-gold: #d7ad68;
    --dsnc-line: rgba(41, 37, 31, 0.16);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--dsnc-cream);
    color: var(--dsnc-ink);
    padding: clamp(64px, 9vw, 124px) 24px 28px;
    font-family: inherit;
}

.ds-next-chapter *,
.ds-next-chapter *::before,
.ds-next-chapter *::after {
    box-sizing: border-box;
}

.ds-next-chapter__inner {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
}

.ds-next-chapter__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--dsnc-line);
}

.ds-next-chapter__eyebrow,
.ds-next-chapter__index {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.11em;
    line-height: 1.6;
}

.ds-next-chapter__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.ds-next-chapter__status-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--dsnc-orange);
    box-shadow: 0 0 0 5px rgba(220, 113, 62, 0.12);
    animation: dsnc-pulse 2.4s ease-in-out infinite;
}

.ds-next-chapter__index {
    color: var(--dsnc-muted);
    white-space: nowrap;
}

.ds-next-chapter__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(40px, 7vw, 108px);
    padding-block: clamp(52px, 7vw, 92px);
}

/* LEFT CONTENT */

.ds-next-chapter__content {
    min-width: 0;
    animation: dsnc-rise-in 0.75s ease both;
}

.ds-next-chapter__overline {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 23px;
    color: var(--dsnc-muted);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1.7;
}

.ds-next-chapter__overline span {
    color: var(--dsnc-orange);
}

.ds-next-chapter__heading {
    margin: 0;
    max-width: 650px;
    font-size: clamp(52px, 7.3vw, 100px);
    font-weight: 600;
    letter-spacing: -0.075em;
    line-height: 0.99;
    overflow-wrap: anywhere;
}

.ds-next-chapter__heading-line {
    display: block;
}

.ds-next-chapter__asterisk {
    display: inline-block;
    color: var(--dsnc-orange);
    font-size: 0.47em;
    vertical-align: top;
    margin: 0 0 0 4px;
    transform-origin: center;
    animation: dsnc-rotate 18s linear infinite;
}

.ds-next-chapter__description {
    max-width: 470px;
    margin: 29px 0 0;
    color: var(--dsnc-muted);
    font-size: 16px;
    line-height: 1.9;
}

.ds-next-chapter__primary-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 58px;
    max-width: 100%;
    margin-top: 31px;
    padding: 9px 10px 9px 22px;
    border: 1px solid var(--dsnc-ink);
    border-radius: 4px;
    background: var(--dsnc-ink);
    color: var(--dsnc-paper);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        border-color 0.25s ease;
}

.ds-next-chapter__primary-link:hover {
    background: var(--dsnc-orange);
    border-color: var(--dsnc-orange);
    color: #fff;
    transform: translateY(-3px);
}

.ds-next-chapter__link-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 3px;
    background: var(--dsnc-orange);
    color: #fff;
    font-size: 20px;
    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.ds-next-chapter__primary-link:hover
.ds-next-chapter__link-icon {
    background: var(--dsnc-ink);
    transform: rotate(45deg);
}

.ds-next-chapter__availability {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    max-width: 420px;
    margin-top: 29px;
    color: var(--dsnc-muted);
    font-size: 14px;
    line-height: 1.75;
}

.ds-next-chapter__availability-mark {
    color: var(--dsnc-orange);
    font-size: 19px;
    line-height: 1.3;
}

/* RIGHT PROJECT PLANNER */

.ds-next-chapter__planner {
    position: relative;
    min-width: 0;
    padding: clamp(25px, 3.3vw, 43px);
    border: 1px solid rgba(255, 253, 248, 0.1);
    border-radius: 5px;
    background: var(--dsnc-ink);
    color: var(--dsnc-paper);
    box-shadow: 0 28px 65px rgba(41, 37, 31, 0.13);
    animation: dsnc-rise-in 0.85s 0.12s ease both;
}

.ds-next-chapter__planner::before {
    position: absolute;
    top: 0;
    left: 30px;
    width: 65px;
    height: 4px;
    background: var(--dsnc-orange);
    content: "";
}

.ds-next-chapter__planner-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.ds-next-chapter__step,
.ds-next-chapter__selection-label {
    display: block;
    color: var(--dsnc-gold);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.6;
}

.ds-next-chapter__planner-header h3 {
    margin: 12px 0 0;
    color: var(--dsnc-paper);
    font-size: clamp(24px, 2.5vw, 33px);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.2;
}

.ds-next-chapter__planner-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    min-height: 32px;
    border: 1px solid rgba(255, 253, 248, 0.18);
    border-radius: 3px;
    color: #e7d6b9;
    font-size: 14px;
    white-space: nowrap;
}

.ds-next-chapter__planner-intro {
    margin: 16px 0 25px;
    color: #c7c0b5;
    font-size: 14px;
    line-height: 1.8;
}

.ds-next-chapter__options {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ds-next-chapter__option {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 25px;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 253, 248, 0.13);
    border-radius: 3px;
    background: transparent;
    color: #e9e3d9;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease;
}

.ds-next-chapter__option:hover {
    border-color: rgba(215, 173, 104, 0.75);
    background: rgba(255, 253, 248, 0.045);
    transform: translateX(3px);
}

.ds-next-chapter__option.is-active {
    border-color: var(--dsnc-orange);
    background: var(--dsnc-orange);
    color: #fff;
}

.ds-next-chapter__option-number {
    color: #bdb3a5;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ds-next-chapter__option.is-active
.ds-next-chapter__option-number {
    color: #fff0e6;
}

.ds-next-chapter__option-label {
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.ds-next-chapter__option-arrow {
    color: var(--dsnc-gold);
    font-size: 19px;
    text-align: right;
    transition: transform 0.22s ease;
}

.ds-next-chapter__option:hover
.ds-next-chapter__option-arrow {
    transform: translate(2px, -2px);
}

.ds-next-chapter__option.is-active
.ds-next-chapter__option-arrow {
    color: #fff;
}

.ds-next-chapter__planner-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 253, 248, 0.15);
}

.ds-next-chapter__selection {
    min-width: 0;
}

.ds-next-chapter__selection-label {
    color: #bdb3a5;
    font-size: 14px;
    letter-spacing: 0.06em;
}

.ds-next-chapter__selection p {
    margin: 7px 0 0;
    color: var(--dsnc-paper);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.ds-next-chapter__continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 46px;
    flex: 0 0 auto;
    padding: 10px 14px;
    border: 1px solid var(--dsnc-gold);
    border-radius: 3px;
    color: var(--dsnc-paper);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease;
}

.ds-next-chapter__continue:hover {
    background: var(--dsnc-gold);
    border-color: var(--dsnc-gold);
    color: var(--dsnc-ink);
}

.ds-next-chapter__continue span {
    font-size: 18px;
}

.ds-next-chapter__corner {
    position: absolute;
    right: 18px;
    bottom: -19px;
    color: rgba(255, 253, 248, 0.055);
    font-size: 76px;
    font-weight: 800;
    letter-spacing: -0.09em;
    line-height: 1;
    pointer-events: none;
}

/* BOTTOM SIGNATURE */

.ds-next-chapter__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    padding-top: 24px;
    border-top: 1px solid var(--dsnc-line);
}

.ds-next-chapter__bottom > span {
    color: var(--dsnc-muted);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.055em;
    line-height: 1.7;
}

.ds-next-chapter__bottom > span:nth-child(2) {
    color: var(--dsnc-orange);
}

.ds-next-chapter__back-top {
    margin-left: auto;
    color: var(--dsnc-ink);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.ds-next-chapter__back-top:hover {
    color: var(--dsnc-orange);
}

/* KEYBOARD ACCESSIBILITY */

.ds-next-chapter a:focus-visible,
.ds-next-chapter button:focus-visible {
    outline: 3px solid var(--dsnc-gold);
    outline-offset: 4px;
}

/* ANIMATIONS */

@keyframes dsnc-pulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(220, 113, 62, 0.12);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(220, 113, 62, 0.04);
    }
}

@keyframes dsnc-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes dsnc-rise-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* RESPONSIVE */

@media (min-width: 1500px) {
    .ds-next-chapter__heading {
        font-size: 104px;
    }
}

@media (max-width: 1000px) {
    .ds-next-chapter {
        padding-inline: 22px;
    }

    .ds-next-chapter__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
        max-width: 760px;
        margin-inline: auto;
    }

    .ds-next-chapter__heading {
        max-width: 700px;
        font-size: clamp(58px, 10vw, 88px);
    }

    .ds-next-chapter__description {
        max-width: 580px;
    }

    .ds-next-chapter__planner {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .ds-next-chapter {
        padding: 48px 17px 22px;
    }

    .ds-next-chapter__topline {
        align-items: flex-start;
        gap: 12px;
        padding-bottom: 18px;
    }

    .ds-next-chapter__eyebrow {
        max-width: 235px;
        font-size: 14px;
        letter-spacing: 0.065em;
    }

    .ds-next-chapter__index {
        font-size: 14px;
        letter-spacing: 0.03em;
        text-align: right;
    }

    .ds-next-chapter__layout {
        gap: 35px;
        padding-block: 43px;
    }

    .ds-next-chapter__overline {
        margin-bottom: 18px;
        font-size: 14px;
        letter-spacing: 0.075em;
    }

    .ds-next-chapter__heading {
        font-size: clamp(49px, 13.3vw, 70px);
        letter-spacing: -0.07em;
        line-height: 1.01;
    }

    .ds-next-chapter__description {
        margin-top: 22px;
        font-size: 15px;
        line-height: 1.85;
    }

    .ds-next-chapter__primary-link {
        width: 100%;
        margin-top: 25px;
    }

    .ds-next-chapter__availability {
        margin-top: 22px;
    }

    .ds-next-chapter__planner {
        padding: 25px 17px;
    }

    .ds-next-chapter__planner-header {
        gap: 10px;
    }

    .ds-next-chapter__planner-header h3 {
        font-size: 25px;
    }

    .ds-next-chapter__planner-count {
        min-width: 58px;
        font-size: 14px;
    }

    .ds-next-chapter__option {
        grid-template-columns: 24px minmax(0, 1fr) 20px;
        gap: 9px;
        padding: 12px 10px;
    }

    .ds-next-chapter__planner-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;
    }

    .ds-next-chapter__continue {
        width: 100%;
    }

    .ds-next-chapter__bottom {
        gap: 9px 16px;
    }

    .ds-next-chapter__bottom > span {
        width: 100%;
        font-size: 14px;
    }

    .ds-next-chapter__back-top {
        margin: 8px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-next-chapter *,
    .ds-next-chapter *::before,
    .ds-next-chapter *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* FINAL CTA: DIGITALEX SOLUTIONS ENDS HERE */

/* FOOTER: DIGITALEX SOLUTIONS STARTS HERE */

.ds-footer-clean {
    --dsfc-bg: #29251f;
    --dsfc-text: #fffdf8;
    --dsfc-muted: #c2bbaf;
    --dsfc-orange: #dc713e;
    --dsfc-gold: #d7ad68;
    --dsfc-line: rgba(255, 253, 248, 0.14);

    position: relative;
    background: var(--dsfc-bg);
    color: var(--dsfc-text);
    padding: 0 24px;
    font-family: inherit;
}

.ds-footer-clean *,
.ds-footer-clean *::before,
.ds-footer-clean *::after {
    box-sizing: border-box;
}

.ds-footer-clean__inner {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

/* CONTACT STRIP */

.ds-footer-clean__contact-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 32px 36px;
    background: #f5f0e7;
    color: var(--dsfc-bg);
    border-bottom: 3px solid var(--dsfc-orange);
    transform: translateY(-1px);
}

.ds-footer-clean__eyebrow {
    display: block;
    color: #756b5e;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.6;
}

.ds-footer-clean__contact-copy h2 {
    margin: 8px 0 0;
    font-size: clamp(27px, 3.5vw, 40px);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.045em;
}

.ds-footer-clean__contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 52px;
    padding: 10px 12px 10px 20px;
    flex-shrink: 0;
    border: 1px solid var(--dsfc-bg);
    background: var(--dsfc-bg);
    color: var(--dsfc-text);
    border-radius: 3px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.ds-footer-clean__contact-button span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    background: var(--dsfc-orange);
    color: #fff;
    font-size: 19px;
    transition: transform 0.2s ease;
}

.ds-footer-clean__contact-button:hover {
    background: var(--dsfc-orange);
    border-color: var(--dsfc-orange);
    color: #fff;
    transform: translateY(-2px);
}

.ds-footer-clean__contact-button:hover span {
    transform: rotate(45deg);
}

/* MAIN FOOTER GRID */

.ds-footer-clean__main {
    display: grid;
    grid-template-columns: 1.35fr 0.8fr 1.1fr 1fr;
    gap: clamp(24px, 4vw, 55px);
    padding: 56px 0 46px;
}

.ds-footer-clean__brand-column,
.ds-footer-clean__links,
.ds-footer-clean__contact-details {
    min-width: 0;
}

/* BRAND */

.ds-footer-clean__brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--dsfc-text);
    text-decoration: none;
}

.ds-footer-clean__brand-mark {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    border-radius: 3px;
    background: var(--dsfc-orange);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.06em;
}

.ds-footer-clean__brand-name {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ds-footer-clean__brand-name strong {
    font-size: 16px;
    letter-spacing: 0.06em;
    font-weight: 800;
}

.ds-footer-clean__brand-name small {
    color: var(--dsfc-muted);
    font-size: 14px;
    letter-spacing: 0.15em;
}

.ds-footer-clean__brand-description {
    max-width: 290px;
    margin: 21px 0 18px;
    color: var(--dsfc-muted);
    font-size: 14px;
    line-height: 1.9;
}

.ds-footer-clean__location {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--dsfc-muted);
    font-size: 14px;
    line-height: 1.7;
}

.ds-footer-clean__location span {
    color: var(--dsfc-orange);
    font-size: 10px;
}

/* LINKS AND CONTACT */

.ds-footer-clean__links h3,
.ds-footer-clean__contact-details h3 {
    margin: 5px 0 22px;
    color: var(--dsfc-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

.ds-footer-clean__links a {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 13px;
    color: var(--dsfc-muted);
    font-size: 14px;
    line-height: 1.65;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.ds-footer-clean__links a:hover {
    color: var(--dsfc-gold);
    transform: translateX(3px);
}

.ds-footer-clean__contact-details p {
    margin: 0;
    color: var(--dsfc-muted);
    font-size: 14px;
    line-height: 1.9;
}

.ds-footer-clean__contact-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--dsfc-orange);
    color: var(--dsfc-text);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ds-footer-clean__contact-link span {
    color: var(--dsfc-orange);
    font-size: 18px;
}

.ds-footer-clean__contact-link:hover {
    color: var(--dsfc-gold);
}

/* SOCIAL LINKS */

.ds-footer-clean__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 25px;
}

.ds-footer-clean__socials a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 253, 248, 0.24);
    border-radius: 3px;
    color: var(--dsfc-text);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.ds-footer-clean__socials a:hover {
    border-color: var(--dsfc-orange);
    background: var(--dsfc-orange);
    color: #fff;
}

/* BOTTOM BAR */

.ds-footer-clean__bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 20px 30px;
    padding: 22px 0;
    border-top: 1px solid var(--dsfc-line);
}

.ds-footer-clean__bottom p {
    margin: 0;
    color: var(--dsfc-muted);
    font-size: 14px;
    line-height: 1.7;
}

.ds-footer-clean__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
}

.ds-footer-clean__legal a,
.ds-footer-clean__back-top {
    color: var(--dsfc-muted);
    font-size: 14px;
    line-height: 1.7;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ds-footer-clean__legal a:hover,
.ds-footer-clean__back-top:hover {
    color: var(--dsfc-gold);
}

.ds-footer-clean__back-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dsfc-text);
    font-weight: 600;
    white-space: nowrap;
}

/* ACCESSIBILITY */

.ds-footer-clean a:focus-visible {
    outline: 2px solid var(--dsfc-gold);
    outline-offset: 4px;
}

/* RESPONSIVE */

@media (max-width: 1050px) {
    .ds-footer-clean__main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 38px 45px;
    }

    .ds-footer-clean__bottom {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .ds-footer-clean__legal {
        grid-column: 1;
        grid-row: 2;
    }

    .ds-footer-clean__back-top {
        grid-column: 2;
        grid-row: 1 / 3;
    }
}

@media (max-width: 600px) {
    .ds-footer-clean {
        padding-inline: 16px;
    }

    .ds-footer-clean__contact-strip {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
        padding: 25px 20px;
    }

    .ds-footer-clean__contact-copy h2 {
        font-size: 30px;
    }

    .ds-footer-clean__contact-button {
        width: 100%;
    }

    .ds-footer-clean__main {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 34px 20px;
        padding: 38px 0 32px;
    }

    .ds-footer-clean__brand-column,
    .ds-footer-clean__contact-details {
        grid-column: 1 / -1;
    }

    .ds-footer-clean__brand-description {
        max-width: 360px;
    }

    .ds-footer-clean__bottom {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .ds-footer-clean__legal,
    .ds-footer-clean__back-top {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-footer-clean *,
    .ds-footer-clean *::before,
    .ds-footer-clean *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* FOOTER: DIGITALEX SOLUTIONS ENDS HERE */






/* SECTION 05: INDUSTRIES WE UNDERSTAND STARTS HERE */

.ds-industries {
    --dsi-ink: #191815;
    --dsi-muted: #514b42;
    --dsi-orange: #e7650a;
    --dsi-cream: #fff8ed;
    --dsi-font: "DM Sans", Arial, sans-serif;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(64px, 8vw, 116px) 0;
    background:
        radial-gradient(
            circle at 76% 7%,
            rgba(231, 101, 10, 0.055),
            transparent 23%
        ),
        var(--dsi-cream);
    color: var(--dsi-ink);
    font-family: var(--dsi-font);
}

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

.ds-industries__inner {
    width: min(100% - 48px, 1600px);
    margin-inline: auto;
}

/* Intro */

.ds-industries__intro {
    margin-bottom: clamp(32px, 4vw, 54px);
}

.ds-industries__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    color: var(--dsi-muted);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.13em;
}

.ds-industries__eyebrow-line {
    display: inline-block;
    width: 30px;
    height: 2px;
    background: var(--dsi-orange);
}

.ds-industries__heading-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.5fr);
    align-items: end;
    gap: clamp(28px, 5vw, 90px);
}

.ds-industries__title {
    max-width: 1000px;
    margin: 0;
    color: var(--dsi-ink);
    font-family: var(--dsi-font);
    font-size: clamp(42px, 6.2vw, 94px);
    font-weight: 800;
    letter-spacing: -0.075em;
    line-height: 0.99;
}

.ds-industries__title span {
    display: block;
    margin-top: 7px;
    color: var(--dsi-orange);
    font-style: italic;
    letter-spacing: -0.065em;
}

.ds-industries__description {
    max-width: 390px;
    margin: 0 0 8px;
    color: var(--dsi-muted);
    font-size: clamp(16px, 1.25vw, 19px);
    font-weight: 400;
    line-height: 1.85;
}

/* Industry cards */

.ds-industries__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.ds-industry-card {
    --dsi-card-bg: #f0e5d0;

    position: relative;
    display: flex;
    min-width: 0;
    min-height: 390px;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(22px, 2.25vw, 36px);
    background: var(--dsi-card-bg);
    color: var(--dsi-ink);
    text-decoration: none;
    border: 1px solid rgba(25, 24, 21, 0.035);
    transition:
        transform 450ms cubic-bezier(0.2, 0.75, 0.25, 1),
        box-shadow 450ms ease,
        background-color 350ms ease;
    -webkit-tap-highlight-color: transparent;
}

.ds-industry-card--hospitality {
    --dsi-card-bg: #f0e5d0;
}

.ds-industry-card--education {
    --dsi-card-bg: #f0bd64;
}

.ds-industry-card--commerce {
    --dsi-card-bg: #e9a43b;
}

.ds-industry-card--professional {
    --dsi-card-bg: #f4d7b2;
}

.ds-industry-card::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: linear-gradient(
        140deg,
        rgba(255, 255, 255, 0.24),
        transparent 50%
    );
    content: "";
    pointer-events: none;
}

.ds-industry-card::after {
    position: absolute;
    right: -50px;
    bottom: -75px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(25, 24, 21, 0.12);
    border-radius: 50%;
    content: "";
    transition:
        transform 600ms cubic-bezier(0.2, 0.75, 0.25, 1),
        border-color 350ms ease;
    pointer-events: none;
}

.ds-industry-card__top,
.ds-industry-card__content,
.ds-industry-card__bottom {
    position: relative;
    z-index: 1;
}

.ds-industry-card__top {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ds-industry-card__number,
.ds-industry-card__slash {
    font-size: 15px;
    font-weight: 500;
}

.ds-industry-card__slash {
    opacity: 0.7;
}

.ds-industry-card__icon {
    display: grid;
    width: 54px;
    height: 54px;
    margin-left: auto;
    place-items: center;
    border: 1px solid rgba(25, 24, 21, 0.22);
    border-radius: 50%;
    transition:
        transform 400ms ease,
        background-color 300ms ease,
        color 300ms ease;
}

.ds-industry-card__icon svg {
    display: block;
    width: 31px;
    height: 31px;
}

.ds-industry-card__content {
    margin-top: 42px;
    margin-bottom: 36px;
}

.ds-industry-card__content h3 {
    max-width: 290px;
    margin: 0 0 18px;
    color: var(--dsi-ink);
    font-family: var(--dsi-font);
    font-size: clamp(23px, 2.1vw, 34px);
    font-weight: 750;
    letter-spacing: -0.055em;
    line-height: 1.15;
}

.ds-industry-card__content h3 span {
    font-weight: 500;
}

.ds-industry-card__content p {
    max-width: 330px;
    margin: 0;
    color: #373229;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
}

.ds-industry-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(25, 24, 21, 0.18);
}

.ds-industry-card__label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.ds-industry-card__arrow {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border: 1px solid rgba(25, 24, 21, 0.25);
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    transition:
        transform 350ms ease,
        color 300ms ease,
        background-color 300ms ease,
        border-color 300ms ease;
}

.ds-industry-card__watermark {
    position: absolute;
    z-index: 0;
    right: 8px;
    bottom: 28px;
    color: rgba(25, 24, 21, 0.055);
    font-size: clamp(100px, 12vw, 180px);
    font-weight: 800;
    letter-spacing: -0.1em;
    line-height: 1;
    pointer-events: none;
    transition: transform 600ms ease;
}

/* Hover and keyboard interaction */

@media (hover: hover) and (pointer: fine) {
    .ds-industry-card:hover {
        z-index: 2;
        transform: translateY(-7px);
        box-shadow: 0 22px 45px rgba(51, 36, 18, 0.11);
    }

    .ds-industry-card:hover::after {
        transform: scale(1.35);
        border-color: rgba(25, 24, 21, 0.24);
    }

    .ds-industry-card:hover .ds-industry-card__icon {
        transform: rotate(-8deg);
        background: var(--dsi-ink);
        color: var(--dsi-cream);
    }

    .ds-industry-card:hover .ds-industry-card__arrow {
        transform: rotate(45deg);
        border-color: var(--dsi-ink);
        background: var(--dsi-ink);
        color: #fff8ed;
    }

    .ds-industry-card:hover .ds-industry-card__watermark {
        transform: translate(-8px, -10px);
    }
}

.ds-industry-card:focus-visible,
.ds-industries__cta:focus-visible {
    outline: 3px solid var(--dsi-orange);
    outline-offset: 5px;
}

/* Bottom statement */

.ds-industries__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid rgba(25, 24, 21, 0.15);
}

.ds-industries__footer p {
    margin: 0;
    color: var(--dsi-muted);
    font-size: 15px;
    line-height: 1.7;
}

.ds-industries__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 48px;
    padding: 12px 19px;
    border: 1px solid var(--dsi-ink);
    color: var(--dsi-ink);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background-color 250ms ease,
        color 250ms ease,
        border-color 250ms ease;
}

.ds-industries__cta span {
    font-size: 20px;
    transition: transform 250ms ease;
}

.ds-industries__cta:hover {
    border-color: var(--dsi-orange);
    background: var(--dsi-orange);
    color: #fff;
}

.ds-industries__cta:hover span {
    transform: translate(3px, -3px);
}

/* Scroll reveal */

.ds-industries [data-dsi-reveal] {
    opacity: 1;
    transform: translateY(0);
}

.ds-industries.ds-industries--motion [data-dsi-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 650ms ease,
        transform 650ms cubic-bezier(0.2, 0.7, 0.25, 1);
}

.ds-industries.ds-industries--motion [data-dsi-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ds-industries.ds-industries--motion .ds-industries__grid
.ds-industry-card:nth-child(2) {
    transition-delay: 80ms;
}

.ds-industries.ds-industries--motion .ds-industries__grid
.ds-industry-card:nth-child(3) {
    transition-delay: 160ms;
}

.ds-industries.ds-industries--motion .ds-industries__grid
.ds-industry-card:nth-child(4) {
    transition-delay: 240ms;
}

/* Tablet */

@media (max-width: 1100px) {
    .ds-industries__heading-row {
        grid-template-columns: minmax(0, 1.3fr) minmax(230px, 0.7fr);
        gap: 30px;
    }

    .ds-industries__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .ds-industry-card {
        min-height: 340px;
        padding: 28px;
    }

    .ds-industry-card__content h3 {
        max-width: 360px;
        font-size: clamp(27px, 3.2vw, 36px);
    }

    .ds-industry-card__watermark {
        font-size: 150px;
    }
}

/* Mobile */

@media (max-width: 680px) {
    .ds-industries {
        padding: 64px 0;
    }

    .ds-industries__inner {
        width: calc(100% - 32px);
    }

    .ds-industries__intro {
        margin-bottom: 28px;
    }

    .ds-industries__eyebrow {
        margin-bottom: 18px;
        font-size: 14px;
    }

    .ds-industries__heading-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ds-industries__title {
        font-size: clamp(39px, 10vw, 62px);
        letter-spacing: -0.07em;
        line-height: 1.02;
    }

    .ds-industries__title span {
        margin-top: 8px;
    }

    .ds-industries__description {
        max-width: 470px;
        margin: 0;
        font-size: 16px;
        line-height: 1.75;
    }

    .ds-industries__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ds-industry-card {
        min-height: 315px;
        padding: 25px;
    }

    .ds-industry-card__content {
        margin-top: 35px;
        margin-bottom: 30px;
    }

    .ds-industry-card__content h3 {
        max-width: 340px;
        font-size: 30px;
    }

    .ds-industry-card__content p {
        max-width: 440px;
        font-size: 16px;
        line-height: 1.75;
    }

    .ds-industry-card__watermark {
        right: 8px;
        bottom: 20px;
        font-size: 130px;
    }

    .ds-industries__footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
        margin-top: 25px;
        padding-top: 22px;
    }

    .ds-industries__footer p {
        font-size: 15px;
    }

    .ds-industries__cta {
        width: 100%;
        justify-content: space-between;
    }
}

/* Small mobile */

@media (max-width: 380px) {
    .ds-industries__title {
        font-size: 36px;
    }

    .ds-industry-card {
        min-height: 300px;
        padding: 21px;
    }

    .ds-industry-card__content h3 {
        font-size: 27px;
    }
}

/* Accessibility: reduced motion */

@media (prefers-reduced-motion: reduce) {
    .ds-industries *,
    .ds-industries *::before,
    .ds-industries *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .ds-industries.ds-industries--motion [data-dsi-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* SECTION 05: INDUSTRIES WE UNDERSTAND ENDS HERE */






/* WHY DIGITALEX: THE DIFFERENCE SECTION STARTS HERE */

.ds-difference {
    --dd-bg: #1d1c19;
    --dd-panel: #292721;
    --dd-text: #fff8ed;
    --dd-muted: #c2baad;
    --dd-orange: #e7650a;
    --dd-gold: #f0b64e;
    --dd-font: "DM Sans", Arial, sans-serif;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(70px, 8vw, 120px) 0;
    background:
        radial-gradient(
            ellipse at 80% 5%,
            rgba(231, 101, 10, 0.09),
            transparent 30%
        ),
        var(--dd-bg);
    color: var(--dd-text);
    font-family: var(--dd-font);
}

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

.ds-difference__inner {
    width: min(100% - 48px, 1480px);
    margin-inline: auto;
}

/* Top label */

.ds-difference__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 23px;
    border-bottom: 1px solid rgba(255, 248, 237, 0.17);
}

.ds-difference__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--dd-text);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.13em;
}

.ds-difference__eyebrow-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dd-orange);
    box-shadow: 0 0 0 5px rgba(231, 101, 10, 0.13);
}

.ds-difference__established {
    color: var(--dd-muted);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* Main headline */

.ds-difference__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
    align-items: end;
    gap: clamp(30px, 5vw, 90px);
    padding: clamp(38px, 5vw, 72px) 0 clamp(42px, 5vw, 70px);
}

.ds-difference__title {
    max-width: 950px;
    margin: 0;
    color: var(--dd-text);
    font-family: var(--dd-font);
    font-size: clamp(45px, 7.2vw, 104px);
    font-weight: 800;
    letter-spacing: -0.078em;
    line-height: 0.98;
}

.ds-difference__title > span {
    display: block;
    color: var(--dd-orange);
    font-style: italic;
    letter-spacing: -0.075em;
}

.ds-difference__intro-copy {
    max-width: 400px;
    padding-bottom: 7px;
}

.ds-difference__intro-mark {
    display: block;
    margin-bottom: 15px;
    color: var(--dd-gold);
    font-size: 33px;
    line-height: 1;
}

.ds-difference__intro-copy p {
    margin: 0;
    color: var(--dd-muted);
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.85;
}

/* Orange point-of-view panel */

.ds-difference__statement {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 4vw, 50px);
    background: var(--dd-orange);
    color: #fff8ed;
}

.ds-difference__statement::after {
    position: absolute;
    top: -110px;
    right: -55px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(255, 248, 237, 0.22);
    border-radius: 50%;
    box-shadow:
        0 0 0 35px rgba(255, 248, 237, 0.035),
        0 0 0 75px rgba(255, 248, 237, 0.025);
    content: "";
    pointer-events: none;
}

.ds-difference__statement-top,
.ds-difference__statement-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ds-difference__statement-top {
    color: rgba(255, 248, 237, 0.85);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.ds-difference__statement-symbol {
    color: var(--dd-gold);
    font-size: 30px;
    line-height: 1;
}

.ds-difference__statement h3 {
    position: relative;
    z-index: 1;
    max-width: 920px;
    margin: clamp(25px, 4vw, 45px) 0;
    color: #fff8ed;
    font-family: var(--dd-font);
    font-size: clamp(30px, 4.7vw, 65px);
    font-weight: 750;
    letter-spacing: -0.065em;
    line-height: 1.08;
}

.ds-difference__statement h3 span {
    color: var(--dd-gold);
}

.ds-difference__statement-bottom {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 248, 237, 0.35);
}

.ds-difference__statement-bottom p {
    margin: 0;
    color: #fff8ed;
    font-size: 15px;
    line-height: 1.7;
}

.ds-difference__statement-bottom a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff8ed;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.ds-difference__arrow {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border: 1px solid rgba(255, 248, 237, 0.65);
    border-radius: 50%;
    font-size: 22px;
    transition:
        background-color 250ms ease,
        color 250ms ease,
        transform 250ms ease;
}

.ds-difference__statement-bottom a:hover .ds-difference__arrow {
    transform: rotate(45deg);
    background: #fff8ed;
    color: var(--dd-orange);
}

/* Numbered editorial principles */

.ds-difference__principles {
    margin-top: clamp(35px, 5vw, 65px);
    border-top: 1px solid rgba(255, 248, 237, 0.2);
}

.ds-difference__principle {
    display: grid;
    grid-template-columns: 75px minmax(0, 1fr) 45px;
    align-items: center;
    gap: clamp(18px, 3vw, 45px);
    padding: clamp(23px, 3.1vw, 40px) 5px;
    border-bottom: 1px solid rgba(255, 248, 237, 0.17);
    transition: padding 350ms ease, background-color 300ms ease;
}

.ds-difference__number {
    align-self: start;
    padding-top: 6px;
    color: var(--dd-gold);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.ds-difference__principle-main h3 {
    margin: 0;
    color: var(--dd-text);
    font-family: var(--dd-font);
    font-size: clamp(23px, 3vw, 39px);
    font-weight: 650;
    letter-spacing: -0.055em;
    line-height: 1.2;
    transition: color 250ms ease;
}

.ds-difference__principle-main p {
    max-width: 710px;
    margin: 12px 0 0;
    color: var(--dd-muted);
    font-size: 16px;
    line-height: 1.8;
}

.ds-difference__principle-arrow {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255, 248, 237, 0.25);
    border-radius: 50%;
    color: var(--dd-gold);
    font-size: 23px;
    transition:
        transform 300ms ease,
        color 300ms ease,
        background-color 300ms ease,
        border-color 300ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .ds-difference__principle:hover {
        padding-right: 14px;
        padding-left: 14px;
        background: rgba(255, 248, 237, 0.025);
    }

    .ds-difference__principle:hover .ds-difference__principle-main h3 {
        color: var(--dd-gold);
    }

    .ds-difference__principle:hover .ds-difference__principle-arrow {
        transform: rotate(45deg);
        border-color: var(--dd-orange);
        background: var(--dd-orange);
        color: #fff8ed;
    }
}

/* Closing statement */

.ds-difference__closing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding-top: 30px;
}

.ds-difference__closing p {
    margin: 0;
    color: var(--dd-muted);
    font-size: clamp(16px, 1.6vw, 21px);
    line-height: 1.7;
}

.ds-difference__closing p span {
    display: block;
    color: var(--dd-text);
    font-weight: 650;
}

.ds-difference__closing-link {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    flex-shrink: 0;
    color: var(--dd-text);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.ds-difference__closing-link > span {
    color: var(--dd-gold);
    font-size: 23px;
    transition: transform 250ms ease;
}

.ds-difference__closing-link:hover > span {
    transform: translate(3px, -3px);
}

.ds-difference a:focus-visible {
    outline: 3px solid var(--dd-gold);
    outline-offset: 5px;
}

/* Scroll reveal */

.ds-difference [data-dd-reveal] {
    opacity: 1;
    transform: translateY(0);
}

.ds-difference.ds-difference--motion [data-dd-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 650ms ease,
        transform 650ms cubic-bezier(0.2, 0.7, 0.25, 1);
}

.ds-difference.ds-difference--motion [data-dd-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ds-difference.ds-difference--motion
.ds-difference__principles .ds-difference__principle:nth-child(2) {
    transition-delay: 70ms;
}

.ds-difference.ds-difference--motion
.ds-difference__principles .ds-difference__principle:nth-child(3) {
    transition-delay: 140ms;
}

.ds-difference.ds-difference--motion
.ds-difference__principles .ds-difference__principle:nth-child(4) {
    transition-delay: 210ms;
}

/* Tablet */

@media (max-width: 900px) {
    .ds-difference__intro {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .ds-difference__title {
        max-width: 850px;
        font-size: clamp(48px, 8vw, 76px);
    }

    .ds-difference__intro-copy {
        max-width: 580px;
    }

    .ds-difference__intro-mark {
        margin-bottom: 8px;
    }
}

/* Mobile */

@media (max-width: 600px) {
    .ds-difference {
        padding: 64px 0;
    }

    .ds-difference__inner {
        width: calc(100% - 32px);
    }

    .ds-difference__top {
        padding-bottom: 19px;
    }

    .ds-difference__intro {
        gap: 22px;
        padding: 35px 0;
    }

    .ds-difference__title {
        font-size: clamp(39px, 10vw, 59px);
        letter-spacing: -0.07em;
        line-height: 1.02;
    }

    .ds-difference__intro-copy p {
        font-size: 16px;
        line-height: 1.8;
    }

    .ds-difference__statement {
        padding: 24px 20px;
    }

    .ds-difference__statement h3 {
        margin: 27px 0;
        font-size: clamp(30px, 8vw, 43px);
    }

    .ds-difference__statement-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .ds-difference__principle {
        grid-template-columns: 37px minmax(0, 1fr);
        gap: 13px;
        padding: 25px 0;
    }

    .ds-difference__number {
        font-size: 14px;
    }

    .ds-difference__principle-main h3 {
        font-size: 23px;
    }

    .ds-difference__principle-main p {
        margin-top: 10px;
        font-size: 15px;
        line-height: 1.8;
    }

    .ds-difference__principle-arrow {
        display: none;
    }

    .ds-difference__closing {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
        padding-top: 24px;
    }

    .ds-difference__closing p {
        font-size: 17px;
    }
}

/* Reduced motion accessibility */

@media (prefers-reduced-motion: reduce) {
    .ds-difference *,
    .ds-difference *::before,
    .ds-difference *::after {
        animation: none !important;
        transition: none !important;
    }

    .ds-difference.ds-difference--motion [data-dd-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* WHY DIGITALEX: THE DIFFERENCE SECTION ENDS HERE */



/* =====================================================
   DIGITALEX CONTACT DETAILS: STARTS HERE
   ===================================================== */

.ds-hero-contact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 24px 0 10px;
}

.ds-hero-contact__item {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: inherit;
    text-decoration: none;
    min-width: 0;
    transition: opacity 0.25s ease;
}

.ds-hero-contact__item:hover {
    opacity: 0.75;
}

.ds-hero-contact__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid rgba(242, 139, 37, 0.5);
    border-radius: 50%;
    color: #f28b25;
    font-size: 17px;
}

.ds-hero-contact__item small {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    letter-spacing: 1px;
    opacity: 0.7;
}

.ds-hero-contact__item strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ds-hero-contact__divider {
    width: 1px;
    height: 32px;
    background: currentColor;
    opacity: 0.2;
}

.ds-faq__direct-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.ds-faq__direct-contact a,
.ds-next-chapter__contact a {
    color: inherit;
    font-size: 14px;
    overflow-wrap: anywhere;
    text-decoration: none;
    transition: color 0.25s ease;
}

.ds-faq__direct-contact a:hover,
.ds-next-chapter__contact a:hover {
    color: #f28b25;
}

.ds-next-chapter__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    margin-top: 22px;
}

.ds-next-chapter__contact a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.ds-next-chapter__contact a span {
    color: #f28b25;
}

/* Responsive layout */
@media (max-width: 600px) {
    .ds-hero-contact {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .ds-hero-contact__divider {
        display: none;
    }

    .ds-hero-contact__item strong {
        overflow-wrap: anywhere;
    }

    .ds-next-chapter__contact {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
}

/* =====================================================
   DIGITALEX CONTACT DETAILS: ENDS HERE
   ===================================================== */