/* =====================================================================
   home.css — Home page: Banner (Section 1) + Services Slider (Section 2)
   Container width: 1280px. Breakpoints: mobile <768px, tablet 768–1023px,
   laptop/desktop ≥1024px.
   ===================================================================== */

:root {
    --dmw-font-heading: 'Satoshi';
    --dmw-font-body: 'Satoshi';

    --dmw-navy: #081426;
    --dmw-ink: #081426;
    --dmw-blue: #2F6BFF;
    --dmw-blue-dark: #1D4FD8;
    --dmw-paper: #FFFFFF;
    --dmw-mist: #F5F7FB;
    --dmw-line: #E4E8F0;
    --dmw-text-soft: #536176;
}

.dmw-container {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    /* padding-inline: 24px; */
    box-sizing: border-box;
    padding-right: 60px !important;
    padding-left: 60px !important;
}
section.dmw-services, section.dmw-banner {
    max-width: unset !important;
}

/* =====================================================================
   SECTION 1 — BANNER
   ===================================================================== */

.dmw-banner {
    position: relative;
    background: var(--dmw-navy);
    overflow: hidden;
}

.dmw-banner__media {
    position: absolute;
    inset: 0;
}

.dmw-banner__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dmw-banner__overlay {
    /* position: absolute; */
    inset: 0;
    background: linear-gradient(90deg, var(--dmw-navy) -8%, rgba(16, 25, 46, 0.35) 83%);
}

.dmw-banner__inner {
    position: relative;
    padding-block: 150px 150px;
}

.dmw-banner__content {
    max-width: 600px;
}

.dmw-banner__heading {
    font-family: var(--dmw-font-heading);
    font-weight: 700;
    font-size: 56px;
    line-height: 130%;
    color: #F5F7FA;
    margin: 0 0 20px;
}

li.dmw-banner__logo img {
    background-color: #0000004a;
    padding: 15px 25px;
    border-radius: 12px !important;
}

.dmw-banner__desc {
    font-family: var(--dmw-font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 142%;
    color: #ffffff;
    /* max-width: 460px; */
    margin: 0 0 32px;
}

.dmw-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg,
            #1285FF 0%,
            #0675EB 50%,
            #1285FF 100%);
    color: #FFFFFF;
    font-family: var(--dmw-font-body);
    font-weight: 600;
    font-size: 16px;
    padding: 14px 40px;
    border-radius: 30px !important;
    text-decoration: none;
    transition: background-color 160ms ease;
    transform: translateY(-1px);
 box-shadow: 0 6px 20px rgba(6, 117, 235, 0.25);
}
.dmw-banner__logos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    margin: 56px 0 0;
    padding: 24px 0 0;
    /* border-top: 1px solid rgba(255, 255, 255, 0.12); */
}

.dmw-banner__logo img {
    height: 24px;
    width: auto;
    display: block;
}

/* =====================================================================
   SECTION 2 — SERVICES SLIDER
   ===================================================================== */

.dmw-services {
    background: var(--dmw-mist);
    padding-block: 80px;
}

.dmw-services__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
}

.dmw-services__heading {
    font-family: var(--dmw-font-heading);
    font-weight: 700;
    font-size: 48px;
    line-height: 130%;
    color: var(--dmw-navy);
    max-width: 536px;
    margin: 0;
}

.dmw-services__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    background: transparent;
    color: #081426;
    font-family: var(--dmw-font-body);
    font-weight: 500;
    font-size: 16px;
    padding: 12px 22px;
    border: 1px solid #1382F9;
    border-radius: 999px;
    text-decoration: none;
    transition: border-color 160ms ease, color 160ms ease;
}

.dmw-services__cta:hover {
    border-color: var(--dmw-blue);
    color: #081426;
}

/* --- slider shell --- */

.dmw-services__slider {
    position: relative;
}

.dmw-services__viewport {
    overflow: hidden;
}

.dmw-services__track {
    display: flex;
    will-change: transform;
    transition: transform 420ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

.dmw-services__item {
    flex: 0 0 calc((100% - 2 * 24px) / 4);
    margin-right: 24px;
    box-sizing: border-box;
    height: 370px !important;
}

.dmw-services__item:last-child {
    margin-right: 0;
}

.dmw-services__card {

    background: var(--dmw-paper);

    border: 1px solid #ffffff;

    border-radius: 20px;

    padding: 32px;

    height: 100%;

    display: flex;

    flex-direction: column;

    gap: 12px;

    box-sizing: border-box;

    /* Smooth hover transition */
    transition:
        background-color 300ms ease,
        color 300ms ease,
        border-color 300ms ease;

}

/* =====================================================
   SERVICES CARD HOVER
   ===================================================== */

.dmw-services__card:hover {
    background-color: #081426;
    border-color: #081426;
}


/* Number - white on hover */
.dmw-services__card:hover .dmw-services__number {

    color: #ffffff;

}


/* Title - white on hover */
.dmw-services__card:hover .dmw-services__title {

    color: #ffffff !important;

}


/* Description - white on hover */
.dmw-services__card:hover .dmw-services__desc {
    color: #ffffff !important;
    font-weight: 400 !important;

}


/* Bottom link + text - white on hover */
.dmw-services__card:hover .dmw-services__link {
    color: #1382f9 !important;
    border-top-color: rgb(19 130 249);
}

.dmw-services__card:hover .dmw-services__link img {
    filter: brightness(0) saturate(100%) invert(48%) sepia(98%) saturate(2700%) hue-rotate(201deg) brightness(101%) contrast(101%) !important;
}

/* Icon + arrow SVG - white on hover */
/* Hover પર icon dark blue */
.dmw-services__card:hover .dmw-services__icon {
    filter: none;
}


/* Hover પર નીચેનું button/link dark blue */
.dmw-services__card:hover .dmw-services__link {
    color: #081426;
    border-top-color: rgba(255, 255, 255, 0.8);
}


/* Button/link ની અંદર arrow પણ dark blue */
.dmw-services__card:hover .dmw-services__link img {
    filter: none;
}

/* Smooth transition for all hover elements */
.dmw-services__number,
.dmw-services__title,
.dmw-services__desc,
.dmw-services__link,
.dmw-services__icon,
.dmw-services__link img {

    transition:
        color 300ms ease,
        border-color 300ms ease,
        filter 300ms ease;

}

.dmw-services__icon {
    width: 57px;
    height: 56px;
    object-fit: contain;
}

.dmw-services__number {
    font-family: var(--dmw-font-heading);
    font-weight: 700;
    font-size: 22px;
    color: #9CC1FF;
}

.dmw-services__title {
    font-family: var(--dmw-font-heading);
    font-weight: 700;
    font-size: 25px;
    color: #0B1628 !important;
    margin: 0;
}

.dmw-services__desc {
    font-family: var(--dmw-font-body);
    font-size: 20px !important;
    line-height: 135%;
    color: #536176;
    flex-grow: 1;
    margin: 0;
    padding-bottom: 40px !important;
    font-weight: 400 !important;
}

.dmw-services__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--dmw-font-body);
    font-weight: 700;
    font-size: 18px !important;
    color: var(--dmw-navy);
    text-decoration: none;
    padding-top: 20px;
    border-top: 1px solid var(--dmw-line);
}

.dmw-services__link:hover {
    color: var(--dmw-blue);
}

/* --- prev/next buttons --- */

.dmw-services__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--dmw-ink);
    color: #FFFFFF;
    border: none;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 160ms ease, opacity 160ms ease;
    z-index: 2;
}

.dmw-services__nav:hover {
    background: var(--dmw-blue);
}

.dmw-services__nav:disabled {
    opacity: 0.35;
    cursor: default;
    background: var(--dmw-ink);
}

.dmw-services__nav--prev {
    left: -22px;
}

.dmw-services__nav--next {
    right: -22px;
}

/* --- right-edge fade (Figma): last visible card fades into the section background --- */

.dmw-services__slider::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 16%;
    max-width: 260px;
    background: linear-gradient(90deg,
            rgba(245, 247, 251, 0) 0%,
            rgba(245, 247, 251, 0.85) 60%,
            #F5F7FB 100%);
    pointer-events: none;
    z-index: 1;
    transition: opacity 300ms ease;
}

/* Slider end par pahonchi jay (Next disabled) to fade hati jay, jethi last card saaf dekhay */
.dmw-services__slider:has(.dmw-services__nav--next:disabled)::after {
    opacity: 0;
}

/* Mobile par 1 j card dekhay che, etle fade hide */
@media (max-width: 767px) {
    .dmw-services__slider::after {
        display: none;
    }
}

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

/* Tablet: 768–1023px — 2 cards visible */
@media (max-width: 1023px) {
    .dmw-banner__heading {
        font-size: 36px;
    }

    .dmw-banner__inner {
        padding-block: 72px 48px;
    }

    .dmw-services__item {
        flex: 0 0 calc((100% - 32px) / 2);
    }

    .dmw-services__nav--prev {
        left: 4px;
    }

    .dmw-services__nav--next {
        right: 4px;
    }
}

/* Mobile: <768px — 1 card visible, stacked banner */
@media (max-width: 767px) {
    .dmw-banner__inner {
        padding-block: 56px 40px;
    }

    .dmw-banner__heading {
        font-size: 28px;
    }

    .dmw-banner__desc {
        font-size: 15px;
        line-height: 24px;
    }

    .dmw-banner__cta {
        font-size: 14px;
        padding: 12px 22px;
    }

    .dmw-banner__logos {
        gap: 16px;
        margin-top: 40px;
        padding-top: 20px;
    }

    .dmw-banner__logo img {
        height: 24px;
    }

    .dmw-services {
        padding-block: 56px;
    }

    .dmw-services__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .dmw-services__heading {
        font-size: 24px;
    }

    .dmw-services__item {
        flex: 0 0 100%;
    }

    .dmw-services__nav {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .dmw-services__nav--prev {
        left: 4px;
    }

    .dmw-services__nav--next {
        right: 4px;
    }
}


/* =====================================================================
   home-innovation.css
   Section 3: Innovation pills + product slider (dmw-innovation__*)
   Section 4: Digital Innovation / team (dmw-digital-innovation__*)
   Shares --dmw-* color/font variables defined in home.css.
   Container width: 1280px. Breakpoints: mobile <768px, tablet 768–1023px,
   laptop/desktop ≥1024px.
   ===================================================================== */

/* =====================================================================
   SECTION 3 — INNOVATION (pills + linked centre-focus slider)
   Card size is driven by --dmw-inn-w (28vw = 403px on Figma's 1440
   frame). Text, padding and icon scale with it, so the wrapping and
   spacing match the design at every width.
   ===================================================================== */

.dmw-innovation {
    --dmw-inn-w: clamp(340px, 28vw, 520px);
    --dmw-inn-hf: 1.127;
    --dmw-inn-h: calc(var(--dmw-inn-w) * var(--dmw-inn-hf));
    --dmw-inn-step: calc(var(--dmw-inn-w) * 1.3);
    --dmw-inn-dy: calc(var(--dmw-inn-w) * 0.21);
    --dmw-inn-tilt: 15deg;
    --dmw-inn-mock-h: 46%;

    position: relative;
    background-color: var(--dmw-ink);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-block: 88px;
    overflow: hidden;
}

.dmw-innovation__title {
    font-family: var(--dmw-font-heading);
    font-weight: 700;
    font-size: 48px;
    line-height: 100%;
    color: #F5F7FA;
    text-align: center;
    max-width: 100%;
    margin: 0 auto 42px;
}

button.dmw-innovation__pillnav.dmw-innovation__pillnav--prev img, button.dmw-innovation__pillnav.dmw-innovation__pillnav--next img {
    width: 15px !important;
    height: 15px !important;
}
/* --- pills row --- */

.dmw-innovation__pills {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 56px;
}

.dmw-innovation__pill {
    font-family: var(--dmw-font-body);
    font-weight: 500;
    font-size: 18px !important;
    color: #F5F7FA;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 62px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.dmw-innovation__pill:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: #f5f7fa !important

}
.dmw-innovation__pill--active {
    background: #FFFFFF;
    color: var(--dmw-ink);
    border-color: #FFFFFF;
}
.dmw-innovation__pill--active:hover {
    color: #081426 !important;
}

.dmw-innovation__pillnav {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 200ms ease, background-color 200ms ease;
}

.dmw-innovation__pillnav:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
}

/* --- stage: every card is stacked in the centre, then moved by its
       data-dmw-pos (-2 / -1 / 0 / 1 / 2) that the JS sets --- */

.dmw-innovation__slider {
    position: relative;
    height: calc(var(--dmw-inn-h) + var(--dmw-inn-w) * 0.34 + 72px);
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

.dmw-innovation__viewport,
.dmw-innovation__track {
    position: relative;
    display: block;
    height: 100%;
    overflow: visible;
}

.dmw-innovation__item {
    position: absolute;
    top: 24px;
    left: 50%;
    width: var(--dmw-inn-w);
    height: var(--dmw-inn-h);
    margin-left: calc(var(--dmw-inn-w) / -2);
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
}

/* no-JS fallback: at least the first card is shown */
.dmw-innovation__item:first-child {
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
}

.dmw-innovation__slider.dmw-is-ready .dmw-innovation__item {
    transition: transform 650ms cubic-bezier(0.22, 0.8, 0.26, 1),
        opacity 450ms ease;
}

.dmw-innovation__item[data-dmw-pos="0"] {
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
    cursor: grab;
    transform: translate3d(0, 0, 0) rotate(0deg);
}

.dmw-innovation__item[data-dmw-pos="-1"] {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
    cursor: pointer;
    transform: translate3d(calc(var(--dmw-inn-step) * -0.99), var(--dmw-inn-dy), 0) rotate(calc(var(--dmw-inn-tilt) * -1));
}

.dmw-innovation__item[data-dmw-pos="1"] {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
    cursor: pointer;
    transform: translate3d(var(--dmw-inn-step), var(--dmw-inn-dy), 0) rotate(var(--dmw-inn-tilt));
}

.dmw-innovation__item[data-dmw-pos="-2"] {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transform: translate3d(calc(var(--dmw-inn-step) * -2), calc(var(--dmw-inn-dy) * 1.5), 0) rotate(calc(var(--dmw-inn-tilt) * -1.4));
}

.dmw-innovation__item[data-dmw-pos="2"] {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transform: translate3d(calc(var(--dmw-inn-step) * 2), calc(var(--dmw-inn-dy) * 1.5), 0) rotate(calc(var(--dmw-inn-tilt) * 1.4));
}

/* --- card --- */

.dmw-innovation__card {
    --dmw-inn-tint: #E9E1FA;

    position: relative;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: max(24px, calc(var(--dmw-inn-w) * 0.0794));
    border-radius: 20px;
    text-align: left;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 34%, var(--dmw-inn-tint) 100%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.dmw-innovation__card img {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

/* tint by position (used when no theme colour matches) */
.dmw-innovation__item[data-dmw-tone="0"] .dmw-innovation__card {
    --dmw-inn-tint: #E9E1FA;
}

.dmw-innovation__item[data-dmw-tone="1"] .dmw-innovation__card {
    --dmw-inn-tint: #D6F0E0;
}

.dmw-innovation__item[data-dmw-tone="2"] .dmw-innovation__card {
    --dmw-inn-tint: #D8E7FB;
}

/* tint by the ACF "card theme colour" select — wins over position */
.dmw-innovation .dmw-innovation__card.dmw-innovation__card--mint,
.dmw-innovation .dmw-innovation__card.dmw-innovation__card--green,
.dmw-innovation .dmw-innovation__card.dmw-innovation__card--teal {
    --dmw-inn-tint: #D6F0E0;
}

.dmw-innovation .dmw-innovation__card.dmw-innovation__card--sky,
.dmw-innovation .dmw-innovation__card.dmw-innovation__card--blue,
.dmw-innovation .dmw-innovation__card.dmw-innovation__card--cyan {
    --dmw-inn-tint: #D8E7FB;
}

.dmw-innovation .dmw-innovation__card.dmw-innovation__card--lavender,
.dmw-innovation .dmw-innovation__card.dmw-innovation__card--purple,
.dmw-innovation .dmw-innovation__card.dmw-innovation__card--violet,
.dmw-innovation .dmw-innovation__card.dmw-innovation__card--light {
    --dmw-inn-tint: #E9E1FA;
}

.dmw-innovation .dmw-innovation__card.dmw-innovation__card--pink,
.dmw-innovation .dmw-innovation__card.dmw-innovation__card--rose {
    --dmw-inn-tint: #F6DCEB;
}

/* --- card content: icon + title on one row, then text, then stats --- */

.dmw-innovation__card-body {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    row-gap: calc(var(--dmw-inn-w) * 0.035);
    max-width: none;
}

.dmw-innovation__icon {
    grid-column: 1;
    grid-row: 1;
    width: max(30px, calc(var(--dmw-inn-w) * 0.0893));
    height: max(30px, calc(var(--dmw-inn-w) * 0.0893));
    margin-right: 10px;
    border-radius: 10px;
    object-fit: contain;
}

.dmw-innovation__card-title {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--dmw-font-heading);
    font-weight: 700;
    font-size: max(19px, calc(var(--dmw-inn-w) * 0.0546)) !important;
    line-height: 100% !important;
    color: #081426;
    margin: 0;
}

.dmw-innovation__card-desc {
    grid-column: 1 / -1;
    font-family: var(--dmw-font-body);
    font-weight: 500 !important;
    font-size: 18px !important;
    line-height: 130% !important;
    color: var(--dmw-text-soft);
    margin: 0;
}

.dmw-innovation__stats {
    grid-column: 1 / -1;
    display: flex;
    gap: calc(var(--dmw-inn-w) * 0.1);
    margin-top: calc(var(--dmw-inn-w) * 0.025);
}

.dmw-innovation__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dmw-innovation__stat-value {
    font-family: var(--dmw-font-heading);
    font-weight: 700;
    font-size: max(20px, calc(var(--dmw-inn-w) * 0.0596));
    line-height: 1.2;
    color: var(--dmw-navy);
}

.dmw-innovation__stat-label {
    font-family: var(--dmw-font-body);
    font-size: max(12px, calc(var(--dmw-inn-w) * 0.0347));
    line-height: 1.3;
    text-transform: none;
    color: var(--dmw-text-soft);
    font-weight: 500;
}

/* --- product mockup: bottom of the card, centred --- */

.dmw-innovation__card .dmw-innovation__mockup {
    position: absolute;
    left: 0;
    bottom: 0;
    width: fit-content;
    height: fit-content;
    object-fit: contain;
    margin: auto;
    right: 0;
}

.dmw-innovation__item[data-dmw-index="1"] .dmw-innovation__card .dmw-innovation__mockup {
    width: 450px;
}

.dmw-innovation__item[data-dmw-index="2"] .dmw-innovation__card .dmw-innovation__mockup {
    left: -37%;
    bottom: -44%;
    width: 780px;
}

.dmw-innovation__item[data-dmw-index="0"] .dmw-innovation__card .dmw-innovation__mockup {
    bottom: -36%;
    width: 650px;
    transform: rotate(15deg);
    left: -12%;
}

@media (prefers-reduced-motion: reduce) {
    .dmw-innovation__slider.dmw-is-ready .dmw-innovation__item {
        transition: none;
    }
}

/* --- Laptop: 1024–1279px --- */
@media (max-width: 1279px) {
    .dmw-innovation {
        --dmw-inn-hf: 1.2;
        --dmw-inn-step: calc(var(--dmw-inn-w) * 1.4);
        --dmw-inn-mock-h: 42%;
    }
}

/* --- Tablet: 768–1023px --- */
@media (max-width: 1023px) {
    .dmw-innovation {
        --dmw-inn-w: 340px;
        --dmw-inn-hf: 1.22;
        --dmw-inn-step: calc(var(--dmw-inn-w) * 1.12);
        --dmw-inn-tilt: 12deg;
    }
}

/* --- Mobile: <768px --- */
@media (max-width: 767px) {
    .dmw-innovation {
        --dmw-inn-w: min(76vw, 320px);
        --dmw-inn-hf: 1.42;
        --dmw-inn-step: calc(var(--dmw-inn-w) * 1);
        --dmw-inn-dy: calc(var(--dmw-inn-w) * 0.14);
        --dmw-inn-tilt: 9deg;
        --dmw-inn-mock-h: 36%;
    }

    .dmw-innovation__card-title {
        font-size: 20px !important;
    }
}
/* =====================================================================
   SECTION 4 — DIGITAL INNOVATION (team)
   ===================================================================== */

.dmw-digital-innovation {
    position: relative;
    background-color: var(--dmw-ink);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    color: #FFFFFF;
    padding-block: 88px;
}

.dmw-digital-innovation__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 60px;
}

.dmw-digital-innovation__heading {
    font-family: var(--dmw-font-heading);
    font-weight: 700;
    font-size: 48px !important;
    max-width: 41%;
    margin: 0;
}

.dmw-digital-innovation__desc {
    font-family: var(--dmw-font-body);
    font-size: 20px !important;
    color: #9BAAC0;
    max-width: 32%;
    margin: 0;
    flex-shrink: 0;
    font-weight: 400;
}

.dmw-digital-innovation__grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
    margin-bottom: 24px;
}

.dmw-digital-innovation__excellence {
    background: #121B2E;
    border-radius: 20px;
    padding: 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 540px;
}

.dmw-digital-innovation__excellence-icon {
    width: 101px;
    height: 101px;
    object-fit: contain;
}

.dmw-digital-innovation__excellence-bottom {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 60% !important;
}
.dmw-digital-innovation__excellence-label {
    font-family: var(--dmw-font-body);
    font-size: 18px !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
}

.dmw-digital-innovation__excellence-heading {
    font-family: var(--dmw-font-heading);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.35;
    color: #FFFFFF;
    margin: 0;
}

.dmw-digital-innovation__showcase {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    min-height: 300px;
}

.dmw-digital-innovation__showcase-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.dmw-digital-innovation__showcase-btn {
    position: absolute;
    left: 45px;
    bottom: 51px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFFFFF;
    color: #1382F9;
    font-family: var(--dmw-font-body);
    font-weight: 600;
    font-size: 16px;
    padding: 12px 35px;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid #1382F9 !important;
}
.dmw-digital-innovation__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.dmw-digital-innovation__stat {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dmw-digital-innovation__stat-label {
    font-family: var(--dmw-font-body);
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff !important;
    line-height: 26px;
}

.dmw-digital-innovation__stat-value {
    font-family: var(--dmw-font-heading);
    font-weight: 700;
    font-size: 56px;
    color: #FFFFFF;
}

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

/* Tablet: 768–1023px */
@media (max-width: 1023px) {
    .dmw-innovation__item {
        flex: 0 0 calc((100% - 28px) / 2);
    }

    .dmw-innovation__item[data-dmw-slot="2"] {
        transform: none;
    }

    .dmw-digital-innovation__grid {
        grid-template-columns: 1fr;
    }

    .dmw-digital-innovation__excellence,
    .dmw-digital-innovation__showcase {
        min-height: 240px;
    }
}

/* Mobile: <768px */
@media (max-width: 767px) {
    .dmw-innovation {
        padding-block: 56px;
    }

    .dmw-innovation__title {
        font-size: 22px;
        margin-bottom: 24px;
    }

    .dmw-innovation__pills {
        margin-bottom: 32px;
    }

    .dmw-innovation__item {
        flex: 0 0 100%;
    }

    .dmw-innovation__item[data-dmw-slot="0"],
    .dmw-innovation__item[data-dmw-slot="1"],
    .dmw-innovation__item[data-dmw-slot="2"] {
        transform: none;
    }

    .dmw-innovation__card {
        min-height: 240px;
    }

    .dmw-innovation__mockup {
        width: 55%;
    }

    .dmw-digital-innovation {
        padding-block: 56px;
    }

    .dmw-digital-innovation__header {
        flex-direction: column;
        gap: 16px;
    }

    .dmw-digital-innovation__heading {
        font-size: 22px;
    }

    .dmw-digital-innovation__desc {
        max-width: 100%;
    }

    .dmw-digital-innovation__stats {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   SECTION 5 — APPROACH  (Figma frame: 1440px wide)
   Desktop (≥1024px): every number is a Figma pixel value, multiplied by
   --dmw-ap-u  (= 1px at 1440px viewport and wider, scales down below).
   Tablet: 2-column staggered flow.  Mobile: 1-column flow.
   Scroll animation: home-approach-scroll.js writes --dmw-ap-p (0 → 1)
   on every card + the watermark; all visuals for it live here.
   ===================================================================== */

.dmw-approach {
    --dmw-ap-w: min(100vw, 1440px);
    --dmw-ap-u: calc(var(--dmw-ap-w) / 1440);
    --dmw-ap-wm-top: 85;
    /* watermark box top, Figma px */
    --dmw-ap-travel: calc(var(--dmw-ap-u) * 140);
    /* how far cards rise while revealing */
    --dmw-ap-stage-h: calc(var(--dmw-ap-u) * 1226);
    /* pin duration: how much extra scroll the "stuck" phase lasts.
       Must match SCROLL_EXTRA_VH in home-approach-scroll.js. */
    --dmw-ap-scroll-extra: 70vh;

    position: relative;
    height: calc(var(--dmw-ap-stage-h) + var(--dmw-ap-scroll-extra));
    padding: 0;
    background: var(--dmw-mist);
}

/* The pinned box: sticks to the top of the viewport while the taller
   .dmw-approach wrapper above scrolls past it — this is what makes the
   section "stick" on screen while cards reveal, like the reference. */
.dmw-approach__stage {
    position: sticky;
    top: 0;
    height: var(--dmw-ap-stage-h);
    overflow: hidden;
}
/* --- big background word --- */

.dmw-approach__watermark {
    position: absolute;
    top: calc(var(--dmw-ap-u) * var(--dmw-ap-wm-top));
    left: 0;
    right: 0;
    z-index: 0;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    font-family: var(--dmw-font-heading);
    font-weight: 800;
    font-size: calc(var(--dmw-ap-u) * 195);
    line-height: 1;
    letter-spacing: 0.01em;
    color: transparent;
    background: linear-gradient(180deg, #C4C7CD 8%, #E9EBEF 88%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* --- stage: a 1440px-wide (scaled) frame, centred in the section --- */

.dmw-approach__grid {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc((100% - var(--dmw-ap-w)) / 2);
    width: var(--dmw-ap-w);
    z-index: 1;
}

/* card positions taken from Figma (left / top, in 1440px design px) */
.dmw-approach__card:nth-child(1) {
    --dmw-ap-x: 73;
    --dmw-ap-y: 228;
}

.dmw-approach__card:nth-child(2) {
    --dmw-ap-x: 558;
    --dmw-ap-y: 360;
}

.dmw-approach__card:nth-child(3) {
    --dmw-ap-x: 1043;
    --dmw-ap-y: 185;
}

.dmw-approach__card:nth-child(4) {
    --dmw-ap-x: 173;
    --dmw-ap-y: 802;
}

.dmw-approach__card:nth-child(5) {
    --dmw-ap-x: 943;
    --dmw-ap-y: 768;
}

/* the Figma layout has exactly 5 slots */
.dmw-approach__card:nth-child(n+6) {
    display: none;
}

.dmw-approach__card {
    position: absolute;
    left: calc(var(--dmw-ap-u) * var(--dmw-ap-x));
    top: calc(var(--dmw-ap-u) * var(--dmw-ap-y));
    width: calc(var(--dmw-ap-u) * 324);
    height: calc(var(--dmw-ap-u) * 364);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: max(20px, calc(var(--dmw-ap-u) * 32)) max(18px, calc(var(--dmw-ap-u) * 26)) max(20px, calc(var(--dmw-ap-u) * 32)) max(20px, calc(var(--dmw-ap-u) * 32));
    border-radius: calc(var(--dmw-ap-u) * 20);
    box-shadow: 0 calc(var(--dmw-ap-u) * 10) calc(var(--dmw-ap-u) * 30) rgba(31, 92, 200, 0.14);
    text-align: left;
}

/* icon on top, title right under it, description pinned to the bottom */

.dmw-approach__icon {
    display: block;
    flex: 0 0 auto;
    width: max(44px, calc(var(--dmw-ap-u) * 72));
    height: max(44px, calc(var(--dmw-ap-u) * 72));
    object-fit: contain;
    object-position: left top;
    filter: none;
}

.dmw-approach__body {
    display: contents;
}

.dmw-approach__title {
    margin: max(10px, calc(var(--dmw-ap-u) * 18)) 0 0;
    max-width: 8em;
    font-family: var(--dmw-font-heading);
    font-weight: 500 !important;
    font-size: max(18px, calc(var(--dmw-ap-u) * 24)) !important;
    line-height: 1.35 !important;
    text-wrap: balance;
}

.dmw-approach__desc {
    margin: auto 0 0;
    padding-top: 12px;
    font-family: var(--dmw-font-body);
    font-weight: 500 !important;
    font-size: max(13px, calc(var(--dmw-ap-u) * 16)) !important;
    line-height: 1.4 !important;
}

/* --- card themes (ACF: approach_card_theme = dark / light / blue) --- */

.dmw-approach__card--dark {
    background: var(--dmw-ink);
}

.dmw-approach__card--dark .dmw-approach__title,
.dmw-approach__card--dark .dmw-approach__desc {
    color: #FFFFFF !important;
}

.dmw-approach__card--light {
    background: #FFFFFF;
}

.dmw-approach__card--light .dmw-approach__title {
    color: var(--dmw-ink) !important;
}

.dmw-approach__card--light .dmw-approach__desc {
    color: var(--dmw-text-soft) !important;
}

.dmw-approach__card--blue {
    background: #1382F9;
}

.dmw-approach__card--blue .dmw-approach__title,
.dmw-approach__card--blue .dmw-approach__desc {
    color: #FFFFFF !important;
}

/* =====================================================================
   SCROLL ANIMATION — only active once the JS has added .dmw-ap-js
   (without JS everything simply stays visible)
   ===================================================================== */

.dmw-approach.dmw-ap-js .dmw-approach__watermark {
    --dmw-ap-p: 0;
    opacity: var(--dmw-ap-p);
    transform: translate3d(0, calc((1 - var(--dmw-ap-p)) * var(--dmw-ap-u) * 70), 0);
    will-change: transform, opacity;
}

.dmw-approach.dmw-ap-js .dmw-approach__card {
    --dmw-ap-p: 0;
    opacity: min(1, calc(var(--dmw-ap-p) * 1.6));
    transform: translate3d(0, calc((1 - var(--dmw-ap-p)) * var(--dmw-ap-travel)), 0) scale(calc(0.92 + 0.08 * var(--dmw-ap-p)));
    transform-origin: 50% 100%;
    will-change: transform, opacity;
}

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

/* --- Tablet: 768–1023px — 2 columns, right column dropped a little --- */
@media (max-width: 1023px) {
    .dmw-approach {
        --dmw-ap-travel: 72px;
        height: auto;
        padding: 72px 0 88px;
    }
        .dmw-approach__stage {
            position: static;
            height: auto;
            overflow: visible;
        }

    .dmw-approach .dmw-container {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    .dmw-approach__watermark {
        position: relative;
        top: auto;
        font-size: clamp(72px, 15.5vw, 150px);
    }

    .dmw-approach__grid {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        width: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        align-items: start;
        margin-top: 28px;
    }

    .dmw-approach__card,
    .dmw-approach__card:nth-child(n+6) {
        display: flex;
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        height: auto;
        min-height: 300px;
        padding: 28px;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(31, 92, 200, 0.14);
    }

    .dmw-approach__card:nth-child(even) {
        margin-top: 48px;
    }

    .dmw-approach__icon {
        width: 60px;
        height: 60px;
    }

    .dmw-approach__title {
        margin-top: 16px;
        font-size: 22px !important;
    }

    .dmw-approach__desc {
        padding-top: 20px;
        font-size: 15px !important;
    }
}

/* --- Mobile: <768px — 1 column --- */
@media (max-width: 767px) {
    .dmw-approach {
        --dmw-ap-travel: 48px;
        padding: 56px 0 64px;
    }

    .dmw-approach .dmw-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .dmw-approach__watermark {
        font-size: 15.5vw;
    }

    .dmw-approach__grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 20px;
    }

    .dmw-approach__card:nth-child(even) {
        margin-top: 0;
    }

    .dmw-approach__card,
    .dmw-approach__card:nth-child(n+6) {
        min-height: 240px;
        padding: 24px;
    }

    .dmw-approach__icon {
        width: 52px;
        height: 52px;
    }

    .dmw-approach__title {
        font-size: 20px !important;
    }

    .dmw-approach__desc {
        font-size: 14px !important;
    }
}
/* =====================================================================
   SECTION 6 — AI SOLUTION
   ===================================================================== */
 
.dmw-ai {
	background: var(--dmw-paper);
	padding-block: 88px;
}
 
.dmw-ai__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 65px;
}
 
.dmw-ai__heading {
    font-family: var(--dmw-font-heading);
    font-weight: 700;
    font-size: 48px;
    line-height: 1.25;
    color: var(--dmw-navy);
    max-width: 556px;
    margin: 0;
}
 
.dmw-ai__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	background: var(--dmw-ink);
	color: #FFFFFF;
	font-family: var(--dmw-font-body);
	font-weight: 600;
	font-size: 14px;
	padding: 14px 24px;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 160ms ease;
}
.dmw-ai__cta:hover { background: var(--dmw-blue); }
 
.dmw-ai__grid {
	display: grid;
	grid-template-columns: 1.70fr 1fr;
	gap: 48px;
	align-items: stretch;
}
 
.dmw-ai__features {
	display: flex;
	flex-direction: column;
    width: 93%;
}
 
.dmw-ai__feature {
	display: flex;
	align-items: flex-start;
	gap: 26px;
	padding-block: 47px;
	border-bottom: 1px solid var(--dmw-line);
}
.dmw-ai__feature:first-child { padding-top: 0; }
.dmw-ai__feature:last-child { border-bottom: none; }
 
.dmw-ai__feature-icon-wrap {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	/* background: #EAF1FE; */
	display: flex;
	align-items: center;
	justify-content: center;
}
 
.dmw-ai__feature-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
}
 
.dmw-ai__feature-title {
    font-family: var(--dmw-font-heading);
    font-weight: 700;
    font-size: 22px;
    color: var(--dmw-navy);
    margin: 0px 0 15px;
}

.dmw-ai__feature-desc {
    font-family: var(--dmw-font-body);
    font-size: 16px;
    line-height: 100% !important;
    color: var(--dmw-text-soft);
    margin: 0;
    font-weight: 500;
}
 
.dmw-ai__media {
	border-radius: 20px;
	overflow: hidden;
	min-height: 100%;
}
 
.dmw-ai__media-image {
    width: 100%;
    height: 600px;
    min-height: 420px;
    object-fit: cover;
    display: block;
}
/* =====================================================================
   RESPONSIVE — SECTION 6
   ===================================================================== */
 
@media (max-width: 1023px) {
	.dmw-ai__grid {
		grid-template-columns: 1fr;
	}
	.dmw-ai__media-image { min-height: 320px; }
}
 
@media (max-width: 767px) {
	.dmw-ai { padding-block: 56px; }
	.dmw-ai__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.dmw-ai__heading { font-size: 24px; max-width: 100%; }
	.dmw-ai__grid { gap: 32px; }
	.dmw-ai__feature { padding-block: 18px; gap: 12px; }
	.dmw-ai__feature-title { font-size: 14px; }
	.dmw-ai__feature-desc { font-size: 12.5px; line-height: 20px; }
	.dmw-ai__media-image { min-height: 240px; }
}
/* =====================================================================
   SECTION 7 — AWARDS + MARQUEE
   ===================================================================== */
 
.dmw-awards {
    background-color: var(--dmw-ink);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-block: 88px;
    overflow: hidden;
}
 
/* --- infinite scrolling marquee --- */
 
.dmw-awards__marquee {
	overflow: hidden;
	white-space: nowrap;
	margin-bottom: 56px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
 
.dmw-awards__marquee-track {
	display: inline-flex;
	width: max-content;
	animation: dmw-marquee-scroll 115s linear infinite;
}
.dmw-awards__marquee:hover .dmw-awards__marquee-track {
	animation-play-state: paused;
}
 
.dmw-awards__marquee-group {
	display: inline-flex;
	align-items: center;
}
.dmw-awards__marquee-text {
    font-family: var(--dmw-font-heading);
    font-weight: 700;
    font-size: 90px;
    padding-inline: 20px;

    background: linear-gradient(135deg,
            rgba(248, 249, 252, 0.52) 0%,
            rgba(248, 249, 252, 0.30) 50%,
            rgba(248, 249, 252, 0.18) 100%);

    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text;
}
 
.dmw-awards__marquee-dot {
	font-size: 20px;
	color: rgba(255, 255, 255, 0.25);
}
 
@keyframes dmw-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
 
@media (prefers-reduced-motion: reduce) {
	.dmw-awards__marquee-track { animation: none; }
}
 
/* --- award rows --- */
 
.dmw-awards__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 1150px;
	margin-inline: auto;
}
 
.dmw-awards__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px 32px;
    border-radius: 90px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background-color 200ms ease, border-color 200ms ease;
}
 
.dmw-awards__row--active {
	background: #FFFFFF;
	border-color: #FFFFFF;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}
 
.dmw-awards__year {
	font-family: var(--dmw-font-heading);
	font-weight: 700;
	font-size: 15px;
	width: 56px;
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.5);
}
.dmw-awards__row--active .dmw-awards__year { color: var(--dmw-navy); }
 
.dmw-awards__title {
    font-family: var(--dmw-font-body);
    font-weight: 500;
    font-size: 18px !important;
    color: rgba(255, 255, 255, 0.75);
    flex-grow: 1;
}
.dmw-awards__row--active .dmw-awards__title { color: var(--dmw-navy); }
 
.dmw-awards__category {
	font-family: var(--dmw-font-body);
	font-size: 16px !important;
	color: rgba(255, 255, 255, 0.35);
	flex-shrink: 0;
    font-weight: 500;
}
.dmw-awards__row--active .dmw-awards__category { color: var(--dmw-text-soft); }
 
.dmw-awards__image {
	position: absolute;
	right: 40px;
	top: 50%;
	transform: translateY(-50%) rotate(-4deg);
	width: 120px;
	border-radius: 14px;
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

.dmw-technology__heading {
    font-family: var(--dmw-font-heading);
    font-weight: 700;
    font-size: 48px;
    line-height: 1.25;
    color: #FFFFFF;
    text-align: center;
    max-width: 640px;
    margin: 0 auto 56px;
}
.dmw-technology__grid {
    display: grid;
    grid-template-columns: repeat(10, 152px);
    gap: 18px;
    justify-content: center;
    padding-bottom: 89px;
}
.dmw-technology__tile {
    width: 84px;
    height: 84px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0;
    transform: translateY(14px);
    transition: transform 260ms ease, box-shadow 260ms ease, background-color 200ms ease,
        opacity 500ms ease, transform 500ms ease;
}

/* organic stagger, Figma jem thoda columns niche/upar */
.dmw-technology__tile:nth-child(10n+2),
.dmw-technology__tile:nth-child(10n+5),
.dmw-technology__tile:nth-child(10n+8) {
    margin-top: 28px;
}

.dmw-technology__tile:nth-child(10n+4),
.dmw-technology__tile:nth-child(10n+9) {
    margin-top: -14px;
}

/* purely decorative filler tiles (no icon, no link) — JS thi insert thay che */
.dmw-technology__tile--empty {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.04);
    pointer-events: none;
    cursor: default;
}

.dmw-technology__tile--empty:hover {
    transform: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.025);
}

.dmw-technology__tile.dmw-is-visible {
    opacity: 1;
    transform: translateY(0);
}

.dmw-technology__tile:nth-child(10n+2).dmw-is-visible,
.dmw-technology__tile:nth-child(10n+5).dmw-is-visible,
.dmw-technology__tile:nth-child(10n+8).dmw-is-visible {
    transform: translateY(28px);
}

.dmw-technology__tile:nth-child(10n+4).dmw-is-visible,
.dmw-technology__tile:nth-child(10n+9).dmw-is-visible {
    transform: translateY(-14px);
}

.dmw-technology__tile:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.dmw-technology__icon {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

 
/* =====================================================================
   RESPONSIVE — SECTIONS 7 & 8
   ===================================================================== */
 
@media (max-width: 1023px) {
    .dmw-awards__marquee-text {
        font-size: 36px;
    }

    .dmw-awards__image {
        width: 78px;
        right: 24px;
    }
}

@media (max-width: 767px) {
    .dmw-awards {
        padding-block: 56px;
    }

    .dmw-awards__marquee-text {
        font-size: 26px;
        padding-inline: 14px;
    }

    .dmw-awards__marquee {
        margin-bottom: 36px;
    }

    .dmw-awards__row {
        flex-wrap: wrap;
        gap: 6px 16px;
        padding: 16px 20px;
    }

    .dmw-awards__year {
        width: auto;
    }

    .dmw-awards__image {
        display: none;
    }

    /* avoid overlap collision on narrow rows */

                                            			.dmw-technology {
                                            			    padding-block: 0 56px;
                                            			}
                            
                                            			.dmw-technology__heading {
                                            			    font-size: 22px;
                                            			    margin-bottom: 28px;
                                            			}
                            
                                            			.dmw-technology__grid {
                                            			    grid-template-columns: repeat(5, 60px);
                                            			    gap: 10px;
                                            			    max-width: 100%;
                                            			}
                            
                                            			.dmw-technology__tile {
                                            			    width: 60px;
                                            			    height: 60px;
                                            			    border-radius: 14px;
                                            			    margin-top: 0 !important;
                                            			}
                            
                                            			.dmw-technology__icon {
                                            			    width: 22px;
                                            			    height: 22px;
                                            			}}
/* =====================================================================
   SECTION 9 — INDUSTRIES ACCORDION
   ===================================================================== */

.dmw-industries {
	background: var(--dmw-paper);
	padding-block: 88px;
}

.dmw-industries__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}

.dmw-industries__heading {
    font-family: var(--dmw-font-heading);
    font-weight: 700;
    font-size: 48px !important;
    line-height: 1.2;
    color: var(--dmw-navy);
    max-width: 549px;
    margin: 0;
}

.dmw-industries__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	background: transparent;
	color: var(--dmw-navy);
	font-family: var(--dmw-font-body);
	font-weight: 500;
	font-size: 16px;
	padding: 12px 22px;
	border: 1px solid var(--dmw-line);
	border-radius: 999px;
	text-decoration: none;
	transition: border-color 160ms ease, color 160ms ease;
}
.dmw-industries__cta:hover {
	border-color: var(--dmw-blue);
	color: var(--dmw-blue);
}

/* --- list / rows --- */

.dmw-industries__list {
	display: flex;
	flex-direction: column;
}

.dmw-industries__item {
	position: relative;
	border-bottom: 1px solid var(--dmw-line);
}
.dmw-industries__item:first-child {
	border-top: 1px solid var(--dmw-line);
}

.dmw-industries__row {
	position: relative;
	width: 100%;
	display: flex;
	align-items: flex-start;
	gap: 500px;
	background: transparent;
	border: none;
	padding: 26px 4px;
	margin: 0;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
	appearance: none;
	-webkit-appearance: none;
}

.dmw-industries__name {
	flex: 0 0 auto;
	font-family: var(--dmw-font-heading);
	font-weight: 50;
	font-size: 26px;
	color: var(--dmw-text-soft);
	white-space: nowrap;
	transition: color 300ms ease;
    font-weight: 500;
}

.dmw-industries__arrow {
	flex: 0 0 auto;
	margin-left: auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--dmw-line);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dmw-text-soft);
	transition: background-color 300ms ease, border-color 300ms ease,
		color 300ms ease, transform 300ms ease;
}

/* --- expandable panel (description + image) --- */
/* grid-template-rows trick = smooth height animation without JS measuring */

.dmw-industries__panel {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 28px;

	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transform: translateY(6px);
	transition: grid-template-rows 420ms cubic-bezier(0.22, 0.8, 0.28, 1),
		opacity 320ms ease, transform 420ms cubic-bezier(0.22, 0.8, 0.28, 1);
}

.dmw-industries__panel-inner {
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr !important;
	align-items: center;
	column-gap: 28px;
	min-height: 0;
}

.dmw-industries__desc {
    font-family: var(--dmw-font-body);
    font-size: 18px !important;
    line-height: 27px;
    color: #536176;
    max-width: 460px;
    font-weight: 500 !important;
    margin-bottom: 21px !important;
}

.dmw-industries__image-wrap {
    flex-shrink: 0;
    width: 340px;
    height: 180px;
    border-radius: 14px;
    overflow: hidden;
    display: block;
}

.dmw-industries__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.06);
	transition: transform 420ms cubic-bezier(0.22, 0.8, 0.28, 1);
}

button.dmw-industries__row:focus {
    outline: unset !important;
}

/* --- active state --- */

.dmw-industries__item--active .dmw-industries__row {
	padding-block: 30px;
}

.dmw-industries__item--active .dmw-industries__name {
	color: var(--dmw-navy);
}

.dmw-industries__item--active .dmw-industries__panel {
	grid-template-rows: 1fr;
	opacity: 1;
	transform: translateY(0);
}

.dmw-industries__item--active .dmw-industries__image {
	transform: scale(1);
}

.dmw-industries__item--active .dmw-industries__arrow {
	background: var(--dmw-navy);
	border-color: var(--dmw-navy);
	color: #FFFFFF;
	transform: rotate(266deg);
}

.dmw-industries__arrow svg {
	transition: transform 300ms ease;
}

.dmw-industries__item--active .dmw-industries__arrow svg {
	transform: rotate(90deg);
}

/* --- full-row click/hover overlay for industry_link --- */

.dmw-industries__linkoverlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.dmw-industries__row {
	position: relative;
	z-index: 0;
}

/* =====================================================================
   RESPONSIVE — SECTION 9
   ===================================================================== */

/* Tablet: 768–1023px */
@media (max-width: 1023px) {
	.dmw-industries { padding-block: 72px; }
	.dmw-industries__heading { font-size: 28px; }

	.dmw-industries__panel-inner {
		grid-template-columns: 1fr auto;
		column-gap: 20px;
	}
	.dmw-industries__image-wrap { width: 140px; height: 88px; }
}

/* Mobile: <768px — stack desc above image, tap to expand */
@media (max-width: 767px) {
	.dmw-industries { padding-block: 56px; }

	.dmw-industries__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		margin-bottom: 28px;
	}
	.dmw-industries__heading { font-size: 24px; }

	.dmw-industries__row {
		flex-wrap: wrap;
		gap: 12px 20px;
		padding: 20px 4px;
	}
	.dmw-industries__item--active .dmw-industries__row {
		padding-block: 20px;
	}

	.dmw-industries__name { font-size: 16px; }

	.dmw-industries__panel { flex-basis: 100%; order: 3; }
	.dmw-industries__panel-inner {
		grid-template-columns: 1fr;
		row-gap: 16px;
	}
	.dmw-industries__image-wrap {
		width: 100%;
		height: 160px;
	}

	.dmw-industries__arrow { width: 28px; height: 28px; }
}

/* =====================================================================
   SECTION 11 — VISION CTA BANNER
   ===================================================================== */

.dmw-vision {
	position: relative;
	padding-block: 60px;
}

/* Rounded banner card (Figma) */
.dmw-vision__card {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 480px;
	padding: 60px 80px;
	border-radius: 24px;
	background: var(--dmw-ink);
	overflow: hidden;
}

/* Background layer: gradient bg image + side image */
.dmw-vision__media {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.dmw-vision__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Right-side handshake image (ACF: side_image_vision) */
.dmw-vision__side {
	position: absolute;
	top: 0;
	right: 0;
	width: 56%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.dmw-vision__content {
	position: relative;
	z-index: 1;
	max-width: 540px;
}

/* Title */
.dmw-vision__heading {
	font-family: var(--dmw-font-heading);
	font-weight: 600;
	font-size: 48px;
	line-height: 1.2;
	margin: 0 0 16px;
}

.dmw-vision__heading-line {
	display: block;
	color: #FFFFFF;
}

.dmw-vision__heading-line--accent {
	color: var(--dmw-blue);
}

/* "Reality." — italic, lighter weight (auto-wrapped in <em> by PHP) */
.dmw-vision__heading em {
	font-style: italic;
	font-weight: 400;
}

.dmw-vision__desc {
	font-family: var(--dmw-font-body);
	font-weight: 500;
	font-size: 20px !important;
	line-height: 24px;
	color: rgba(255, 255, 255, 0.68);
	max-width: 500px;
	margin: 0 0 28px;
}

.dmw-vision__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #FFFFFF;
	color: var(--dmw-navy);
	font-family: var(--dmw-font-body);
	font-weight: 600;
	font-size: 14px;
	padding: 14px 24px;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.dmw-vision__cta:hover {
	background: var(--dmw-blue);
	color: #FFFFFF;
	transform: translateY(-2px);
}

/* =====================================================================
   RESPONSIVE — SECTION 11
   ===================================================================== */

/* Tablet: 768–1023px */
@media (max-width: 1023px) {
	.dmw-vision { padding-block: 40px; }
	.dmw-vision__card {
		min-height: 380px;
		padding: 48px 40px;
		border-radius: 20px;
	}
	.dmw-vision__side { width: 52%; }
	.dmw-vision__heading { font-size: 32px; }
	.dmw-vision__desc { font-size: 16px !important; line-height: 22px; }
}

/* Mobile: <768px — side image becomes a faded backdrop behind the text */
@media (max-width: 767px) {
	.dmw-vision { padding-block: 32px; }

	.dmw-vision__card {
		min-height: 0;
		padding: 40px 24px;
		border-radius: 16px;
	}

	.dmw-vision__content { max-width: 100%; }

	.dmw-vision__side {
		width: 100%;
		opacity: 0.35;
	}

	.dmw-vision__heading { font-size: 26px; margin-bottom: 12px; }

	.dmw-vision__desc {
		font-size: 14px !important;
		line-height: 22px;
		max-width: 100%;
		margin-bottom: 22px;
	}

	.dmw-vision__cta {
		font-size: 13.5px;
		padding: 12px 20px;
	}
}
/* =====================================================================
   SECTION 12 — FAQ + CONTACT BOX
   ===================================================================== */

.dmw-faq {
	background: var(--dmw-paper);
	padding-block: 96px;
}

.dmw-faq__heading {
    font-family: var(--dmw-font-heading);
    font-weight: 700;
    font-size: 48px;
    line-height: 1.35;
    color: var(--dmw-navy);
    text-align: center;
    max-width: 620px;
    margin: 0 auto 56px;
}

.dmw-faq__grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 48px;
	align-items: start;
}

/* --- FAQ accordion list --- */

.dmw-faq__list {
	display: flex;
	flex-direction: column;
}

.dmw-faq__item {
	border-bottom: 1px solid var(--dmw-line);
}
.dmw-faq__item:first-child {
	border-top: 1px solid var(--dmw-line);
}

.dmw-faq__trigger {
	width: 100%;
	display: flex;
	align-items: flex-start;
	gap: 18px;
	background: transparent;
	border: none;
	margin: 0;
	padding: 22px 4px;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
	appearance: none;
	-webkit-appearance: none;
}
button.dmw-faq__trigger:focus {
    outline: unset !important;
}
.dmw-faq__item--active span.dmw-faq__number {
    color: #081426 !important;
}
.dmw-faq__number {
    flex-shrink: 0;
    font-family: var(--dmw-font-body);
    font-weight: 500;
    font-size: 18px !important;
    color: #98a0ad;
    margin-top: 2px;
    line-height: 30px !important;
}

.dmw-faq__question {
    opacity: 60% !important;
    flex: 1 1 auto;
    font-family: var(--dmw-font-heading);
    font-weight: 600;
    font-size: 20px !important;
    line-height: 1.4;
    color: #536176;
    transition: color 260ms ease;
}

.dmw-faq__item--active .dmw-faq__question {
    color: #081426 !important;
    opacity: unset !important;
}

/* --- expandable panel: smooth height via grid-template-rows --- */

.dmw-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 380ms cubic-bezier(0.22, 0.8, 0.28, 1),
		opacity 300ms ease;
}

.dmw-faq__panel-inner {
	overflow: hidden;
	min-height: 0;
}

.dmw-faq__answer {
    font-family: var(--dmw-font-body);
    font-size: 18px;
    line-height: 28px;
    color: #536176;
    /* max-width: 520px; */
    margin: 0;
    padding: 0 4px 23px 58px;
    font-weight: 500 !important;
}
.dmw-faq__item--active .dmw-faq__panel {
	grid-template-rows: 1fr;
	opacity: 1;
}

/* =====================================================================
   FORM BOX (outer shell only — no fields styled here)
   ===================================================================== */

.dmw-faq__formbox {
	background: var(--dmw-ink);
	border-radius: 20px;
	padding: 32px;
	box-sizing: border-box;
	color: #FFFFFF;
	position: sticky;
	top: 24px;
}

/* =====================================================================
   RESPONSIVE — SECTION 12
   ===================================================================== */

/* Tablet: 768–1023px */
@media (max-width: 1023px) {
	.dmw-faq { padding-block: 72px; }
	.dmw-faq__heading { font-size: 28px; margin-bottom: 44px; }

	.dmw-faq__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.dmw-faq__formbox {
		position: static;
		padding: 28px;
	}
}

/* Mobile: <768px */
@media (max-width: 767px) {
	.dmw-faq { padding-block: 56px; }

	.dmw-faq__heading {
		font-size: 22px;
		margin-bottom: 32px;
	}

	.dmw-faq__trigger {
		gap: 12px;
		padding: 18px 2px;
	}

	.dmw-faq__number { font-size: 12px; }
	.dmw-faq__question { font-size: 14.5px; }

	.dmw-faq__answer {
		font-size: 13px;
		line-height: 21px;
		padding-left: 28px;
		padding-bottom: 18px;
	}

	.dmw-faq__formbox {
		padding: 22px;
		border-radius: 16px;
	}
}

/* =====================================================================    
   SECTION 7 — AWARDS HOVER ANIMATION (row highlight + cursor-follow image)
   Paste at the very END of home.css
   ===================================================================== */

.dmw-awards__row {
    transition: background-color 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
    cursor: pointer;
}

.dmw-awards__row:hover {
    z-index: 2;
    /* image neighbour rows upar overlap thay */
}

.dmw-awards__year,
.dmw-awards__title,
.dmw-awards__category {
    transition: color 400ms ease;
}

/* image: default hidden, JS cursor ni pase move kare che */
.dmw-awards__image {
    left: 0;
    top: 0;
    right: auto;
    z-index: 3;
    opacity: 0;
    scale: 0.85;
    transform: translate3d(var(--dmw-aw-x, 0px), var(--dmw-aw-y, 0px), 0) translate(-50%, -50%) rotate(-4deg);
    transition: opacity 300ms ease, scale 400ms cubic-bezier(0.22, 0.8, 0.28, 1);
    will-change: transform, opacity;
}

.dmw-awards__row:hover .dmw-awards__image {
    opacity: 1;
    scale: 1;
}

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

    .dmw-awards__row,
    .dmw-awards__image {
        transition: none;
    }
}