/* =========================================================
   Bizmantra - Why Choose Us
   assets/css/whychoose.css?v=1
   - Follows the header's light / dark tokens (--bm-*).
   - Desktop: horizontal line, cards above / below it, joined by dashed lines.
   - Tablet: two staggered columns.
   - Mobile: plain list with one vertical line on the left and numbered points.
   ========================================================= */
.bmw {
    --w-bg: #F6F8FD;
    --w-card: #FFFFFF;
    --w-line: #E0E7F5;
    --w-sub: #4F5D7A;
    --w-shadow: 0 24px 48px -34px rgba(31,53,115,.5);

    position: relative; overflow: hidden; isolation: isolate;
    padding-block: clamp(48px, 7vw, 104px);
    background: var(--w-bg);
    color: var(--bm-text);
    font-family: var(--bm-font, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
}
:root[data-theme="dark"] .bmw {
    --w-bg: #0B1330;
    --w-card: #141E3D;
    --w-line: rgba(143,176,255,.20);
    --w-sub: #B4C1E0;
    --w-shadow: 0 24px 48px -30px rgba(0,0,0,.7);
}
/* dark mode: continues the green glow from the section above (its right corner) */
:root[data-theme="dark"] .bmw::before {
    content: ""; position: absolute; z-index: -1; top: 0; right: 0; width: min(760px, 100%); height: 560px; pointer-events: none;
    background: radial-gradient(circle at 100% 0%, rgba(154,205,79,.24) 0%, rgba(154,205,79,.11) 30%, transparent 62%);
}

:where(.bmw) *, :where(.bmw) *::before, :where(.bmw) *::after { box-sizing: border-box; }
:where(.bmw) ul, :where(.bmw) ol { list-style: none; margin: 0; padding: 0; }
:where(.bmw) h2, :where(.bmw) h3, :where(.bmw) p { margin: 0; }
:where(.bmw) a { color: inherit; text-decoration: none; }
:where(.bmw) svg { display: block; flex: none; }
.bmw :focus-visible { outline: 2px solid var(--bm-blue-d); outline-offset: 2px; border-radius: 10px; }

.bmw__container { position: relative; width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 20px; }
.bmw__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 64px); }

/* ---------------- HEADER (plain) ---------------- */
.bmw__panel { max-width: 760px; margin-inline: auto; }
.bmw__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bm-green-x); }
:root[data-theme="dark"] .bmw__eyebrow { color: var(--bm-green); }
.bmw__eyebrow::before, .bmw__eyebrow::after { content: ""; width: 28px; height: 3px; border-radius: 3px; background: currentColor; }
.bmw__title { margin-top: 14px; font-size: clamp(28px, 3.5vw, 46px); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; color: var(--bm-head); text-wrap: balance; }
.bmw__lead { margin-top: 16px; max-width: 64ch; font-size: clamp(15px, 1.3vw, 16.5px); line-height: 1.7; color: var(--w-sub); }

/* ---------------- REASONS ---------------- */
.bmw__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.bmw__step { display: none; }

.bmw__card {
    position: relative; overflow: hidden; isolation: isolate; height: 100%;
    padding: 22px 22px 24px; border-radius: 22px;
    background: var(--w-card); border: 1px solid var(--w-line); box-shadow: var(--w-shadow);
    transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s;
}
.bmw__card::before {            /* soft corner glow */
    content: ""; position: absolute; z-index: -1; right: -50px; top: -50px; width: 190px; height: 190px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--bm-blue) 18%, transparent), transparent 68%);
    transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .3s; opacity: .8;
}
.bmw__item:nth-child(3n) .bmw__card::before { background: radial-gradient(circle, color-mix(in srgb, var(--bm-green) 26%, transparent), transparent 68%); }
.bmw__card::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--bm-blue), var(--bm-green)); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.bmw__cardtop { display: flex; align-items: center; justify-content: space-between; }
.bmw__icon {
    display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px;
    background: linear-gradient(135deg, var(--bm-blue), var(--bm-blue-d)); color: #fff;
    box-shadow: 0 12px 20px -12px rgba(31,53,115,.8); transition: transform .3s;
}
.bmw__icon svg { width: 24px; height: 24px; }
.bmw__item:nth-child(3n) .bmw__icon { background: linear-gradient(135deg, #A8D75E, #86B83F); color: #17306B; box-shadow: 0 12px 20px -12px rgba(134,184,63,.95); }
.bmw__no {
    font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1;
    color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--bm-blue) 42%, transparent);
}
.bmw__name { margin-top: 20px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; color: var(--bm-head); }
.bmw__text { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: var(--w-sub); }

@media (hover: hover) {
    .bmw__card:hover { transform: translateY(-5px); border-color: var(--bm-blue); }
    .bmw__card:hover::before { transform: scale(1.35); opacity: 1; }
    .bmw__card:hover::after { transform: scaleX(1); }
    .bmw__card:hover .bmw__icon { transform: rotate(-6deg) scale(1.06); }
}

/* scroll reveal (only when JS is running) */
.bmw--js .bmw__item { opacity: 0; transform: translateY(24px); }
.bmw--js .bmw__item.is-in { opacity: 1; transform: none; transition: opacity .6s ease calc(var(--i) * 70ms), transform .6s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 70ms); }

/* ---------------- TABLET: two columns, right one stepped down ---------------- */
@media (min-width: 640px) {
    .bmw__panel { text-align: center; }
    .bmw__title { margin-inline: auto; max-width: 21ch; }
    .bmw__lead { margin-inline: auto; }
    .bmw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .bmw__item:nth-child(even) { margin-top: 28px; }
    .bmw__card { padding: 26px 24px 28px; }
}

/* ---------------- DESKTOP: text + collage on the left, vertical timeline on the right ----------------
   Both columns stretch to the same height; the collage fills whatever is left under the text. */
.bmw__collage { display: none; }
@media (min-width: 1024px) {
    .bmw { padding-block: clamp(64px, 7vw, 108px); }
    .bmw__layout { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(48px, 6vw, 88px); align-items: stretch; }

    /* LEFT */
    .bmw__side { display: flex; flex-direction: column; min-width: 0; }
    .bmw__panel { max-width: none; margin: 0; text-align: left; }
    .bmw__eyebrow::after { display: none; }
    .bmw__title { max-width: 18ch; margin-inline: 0; font-size: clamp(32px, 3.4vw, 46px); }
    .bmw__lead { margin-inline: 0; max-width: 52ch; }

    .bmw__collage {
        position: relative; flex: 1; min-height: 380px; margin-top: clamp(28px, 3vw, 40px);
        display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 12px;
    }
    .bmw__collage::before {         /* dot grid behind the photos */
        content: ""; position: absolute; z-index: 0; right: -18px; bottom: -18px; width: 46%; height: 52%;
        background: radial-gradient(color-mix(in srgb, var(--bm-blue) 45%, transparent) 1.4px, transparent 1.6px) 0 0 / 14px 14px;
        opacity: .55; border-radius: 12px;
    }
    .bmw__shot {
        position: relative; z-index: 1; overflow: hidden; margin: 0; background: linear-gradient(135deg, var(--bm-blue), var(--bm-blue-d));
        border: 4px solid var(--w-bg); box-shadow: var(--w-shadow);
    }
    .bmw__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
    .bmw__shot:hover img { transform: scale(1.05); }
    .bmw__shotic { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.85); }
    .bmw__shotic svg { width: 38px; height: 38px; }
    /* 6 tiles tile a 6 x 4 grid, so the collage fills any height cleanly */
    .bmw__shot--1 { grid-column: 1 / span 4; grid-row: 1 / span 2; border-radius: 30px 30px 8px 30px; }
    .bmw__shot--2 { grid-column: 5 / span 2; grid-row: 1 / span 2; border-radius: 8px 30px 8px 8px; background: linear-gradient(135deg, #A8D75E, #86B83F); }
    .bmw__shot--2 .bmw__shotic { color: #17306B; }
    .bmw__shot--3 { grid-column: 1 / span 2; grid-row: 3 / span 2; border-radius: 8px 8px 8px 30px; background: linear-gradient(135deg, #2D4DA3, #17306B); }
    .bmw__shot--4 { grid-column: 3 / span 4; grid-row: 3; border-radius: 8px 8px 30px 8px; background: linear-gradient(135deg, #3A5FC7, #24418F); }
    .bmw__shot--5 { grid-column: 3 / span 2; grid-row: 4; border-radius: 8px; background: linear-gradient(135deg, #A8D75E, #86B83F); }
    .bmw__shot--5 .bmw__shotic { color: #17306B; }
    .bmw__shot--6 { grid-column: 5 / span 2; grid-row: 4; border-radius: 8px 8px 30px 8px; }

    /* RIGHT: vertical line on the left, cards stacked, dashed connector from each node */
    .bmw__grid {
        position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: space-between;
        padding-left: 80px;
    }
    .bmw__grid::before {             /* vertical line */
        content: ""; position: absolute; left: 21px; top: 24px; bottom: 6px; width: 4px; border-radius: 4px;
        background: linear-gradient(var(--bm-blue), var(--bm-green));
    }
    .bmw__grid::after {              /* arrow head at the bottom */
        content: ""; position: absolute; left: 17px; bottom: 2px; width: 12px; height: 12px;
        border-right: 4px solid var(--bm-green); border-bottom: 4px solid var(--bm-green); border-radius: 2px; transform: rotate(45deg);
    }
    .bmw__item { position: relative; margin: 0; display: flex; }
    .bmw__item:nth-child(even) { margin-top: 0; }
    .bmw__card {
        flex: 1; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start;
        height: auto; padding: 16px 20px 18px;
    }
    .bmw__cardtop { display: contents; }
    .bmw__no { display: none; }
    .bmw__icon { grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: 14px; }
    .bmw__name { margin-top: 0; padding-top: 2px; font-size: 17.5px; }
    .bmw__text { margin-top: 6px; font-size: 14px; }

    .bmw__step {                     /* numbered node on the line */
        position: absolute; z-index: 2; left: -80px; top: 50%; transform: translateY(-50%);
        display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
        background: linear-gradient(135deg, var(--bm-blue), var(--bm-blue-d)); color: #fff; font-size: 17px; font-weight: 800; line-height: 1;
        box-shadow: 0 0 0 7px var(--w-bg), 0 12px 20px -8px rgba(31,53,115,.8);
    }
    .bmw__item:nth-child(3n) .bmw__step { background: linear-gradient(135deg, #A8D75E, #86B83F); color: #17306B; }
    .bmw__item::after {              /* dashed connector node -> card */
        content: ""; position: absolute; left: -32px; top: 50%; width: 32px; height: 0;
        border-top: 2px dashed color-mix(in srgb, var(--bm-blue) 60%, transparent); transform: translateY(-1px);
    }
    .bmw__item::before {             /* dot on the card edge */
        content: ""; position: absolute; left: -5px; top: 50%; width: 9px; height: 9px; border-radius: 50%;
        background: var(--bm-blue); transform: translateY(-50%); z-index: 1;
    }
    .bmw--js .bmw__item { transform: translateX(24px); }
}

/* ---------------- MOBILE: no boxes, one line on the left with 1, 2, 3 ... ---------------- */
@media (max-width: 639px) {
    .bmw__container { padding-inline: 16px; }
    .bmw__layout { gap: 30px; }
    .bmw__panel { text-align: left; }
    .bmw__eyebrow::after { display: none; }

    .bmw__grid { position: relative; gap: 0; padding-left: 52px; }
    .bmw__grid::before {              /* the vertical line */
        content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px;
        background: linear-gradient(var(--bm-blue), var(--bm-green)); opacity: .6;
    }
    .bmw__item { position: relative; padding-bottom: 28px; }
    .bmw__item:last-child { padding-bottom: 0; }
    .bmw__step {                      /* 1, 2, 3 ... on the line */
        position: absolute; left: -52px; top: 0; z-index: 1; display: grid; place-items: center;
        width: 36px; height: 36px; border-radius: 50%;
        background: linear-gradient(135deg, var(--bm-blue), var(--bm-blue-d)); color: #fff;
        font-size: 15px; font-weight: 800; line-height: 1;
        box-shadow: 0 0 0 5px var(--w-bg), 0 10px 18px -8px rgba(31,53,115,.8);
    }
    .bmw__item:nth-child(3n) .bmw__step { background: linear-gradient(135deg, #A8D75E, #86B83F); color: #17306B; }

    /* content sits directly on the page: no card box, no icon (the numbered step is enough) */
    .bmw__card { display: block; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
    .bmw__card::before, .bmw__card::after { display: none; }
    .bmw__cardtop, .bmw__icon, .bmw__no { display: none; }
    .bmw__name { margin-top: 0; padding-top: 6px; font-size: 16.5px; line-height: 1.3; }
    .bmw__text { margin-top: 5px; font-size: 14px; line-height: 1.6; }
    .bmw--js .bmw__item { transform: translateX(14px); }
}
@media (max-width: 359px) {
    .bmw__grid { padding-left: 46px; }
    .bmw__step { left: -46px; width: 32px; height: 32px; font-size: 14px; }
    .bmw__grid::before { left: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .bmw--js .bmw__item { opacity: 1; transform: none; }
    .bmw * { transition-duration: .01ms !important; }
}