@charset "UTF-8";
 
:root {

    /* ---- Brand ------------------------------------------ */
    --ab-blue: #2762F6;
    --ab-indigo: #6D18EF;
    --ab-gradient: linear-gradient(93.06deg, #2762F6 38.02%, #6D18EF 80.46%);
    --ab-blue-soft: #EEF3FF;

    /* ---- Ink -------------------------------------------- */
    --ab-heading: #2E3138;
    --ab-body: #5A6070;
    --ab-faint: #9294A5;
    --ab-on-dark: #ffffff;
    --ab-on-dark-soft: rgba(255, 255, 255, 0.82);

    /* ---- Surfaces --------------------------------------- */
    --ab-surface: #ffffff;
    --ab-card: #F7F8FA;
    --ab-line: #EAEAEA;
    --ab-line-soft: #E4E9F2;

    /* ---- Elevation -------------------------------------- */
    --ab-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .05);
    --ab-shadow-md: 0 2px 6px rgba(16, 24, 40, .05), 0 12px 28px rgba(16, 24, 40, .07);
    --ab-shadow-lg: 0 18px 44px -22px rgba(16, 17, 48, .32);

    /* ---- Radius ----------------------------------------- */
    --ab-radius-sm: 8px;
    --ab-radius: 12px;
    --ab-radius-lg: 16px;

    /* ---- Motion ----------------------------------------- */
    --ab-ease: cubic-bezier(.22, 1, .36, 1);
    --ab-dur: .28s;

    /* ---- Section rhythm ---------------------------------
       One vertical step for the whole page. Sections pick a
       token, they never hard-code padding. Section 14 rewrites
       these three values once, and every section follows.
    --------------------------------------------------- */
    --ab-pad-sm: 32px;
    --ab-pad: 36px;
    --ab-pad-lg: 40px;
}


/* =========================================================
   2. PAGE BASE
========================================================= */

body {
    margin: 0;
    font-family: "Lexend Deca", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--ab-body);
    background: var(--ab-surface);
    -webkit-font-smoothing: antialiased;

     
    overflow-x: clip;
}

h1, h2, h3, h4 {
    margin: 0;
    color: var(--ab-heading);
    line-height: 1.22;
    letter-spacing: -.01em;
}

p { margin: 0; line-height: 1.65; }

ul { margin: 0; padding: 0; list-style: none; }

img { max-width: 100%; height: auto; }

a { color: var(--ab-blue); text-decoration: none; }
a:hover { color: var(--ab-indigo); }

/* One visible focus ring for every interactive element. */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--ab-blue);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Skip link - visible only once focused. */
.ab-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1200;
    padding: 10px 18px;
    background: #fff;
    border-radius: 0 0 var(--ab-radius-sm) 0;
    font-weight: 600;
}

.ab-skip:focus { left: 0; }

 

.ab-section { padding-block: var(--ab-pad); }

.ab-section--tint {     background: #eef3ff;}
.ab-section--soft { background: var(--ab-blue-soft); }

/* Centred section intro: title + optional lead. */
.ab-head {
    max-width: 780px;
    margin: 0 auto 28px;
    text-align: center;
}

.ab-head__title { font-size: 24px; font-weight: 600; }

.ab-head__text {
    margin-top: 12px;
    font-size: 15px;
}

/* Gradient words inside a heading. */
.ab-accent {
    background: var(--ab-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---- Buttons ------------------------------------------- */

.ab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 13px 26px;
    border: 0;
    border-radius: var(--ab-radius-sm);

    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;

    transition: transform var(--ab-dur) var(--ab-ease),
                box-shadow var(--ab-dur) var(--ab-ease),
                background-color var(--ab-dur) var(--ab-ease);
}

.ab-btn .ab-ico { width: 18px; height: 18px; flex: 0 0 18px; }

.ab-btn--solid {
    background: var(--ab-gradient);
    color: #fff;
    box-shadow: 0 10px 24px -12px rgba(39, 98, 246, .8);
}

.ab-btn--solid:hover,
.ab-btn--solid:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -12px rgba(39, 98, 246, .85);
}

/* Sits on the gradient CTA panel. */
.ab-btn--light {
    background: #fff;
    color: var(--ab-blue);
}

.ab-btn--light:hover,
.ab-btn--light:focus-visible {
    color: var(--ab-blue);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}

/* ---- Icons --------------------------------------------- */

/* Every <use> inherits this: no fill, currentColor stroke. */
.ab-ico {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Tinted square that carries an icon on the cards. */
.ab-ico-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;
    flex: 0 0 46px;

    border-radius: var(--ab-radius-sm);
    background: var(--ab-blue-soft);
    color: var(--ab-blue);

    transition: background-color var(--ab-dur) var(--ab-ease),
                color var(--ab-dur) var(--ab-ease);
}

/* ---- Card ----------------------------------------------- */

.ab-card {
    height: 100%;
    padding: 26px 22px;

    /* Declared as a gradient even at rest, with both stops white.
       Two gradients of the same shape interpolate, so the hover wash
       fades in; a flat colour would have snapped straight to it. */
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-radius-lg);

    transition: transform var(--ab-dur) var(--ab-ease),
                box-shadow var(--ab-dur) var(--ab-ease),
                border-color var(--ab-dur) var(--ab-ease),
                background var(--ab-dur) var(--ab-ease);
}

.ab-card:hover {
    transform: translateY(-4px);
    border-color: transparent;

    /* Light branded wash on hover, top-to-bottom so the title stays
       on near-white and contrast never drops. */
    background: linear-gradient(180deg, #FFFFFF 0%, #EDF2FF 100%);
    box-shadow: var(--ab-shadow-md);
}

.ab-card:hover .ab-ico-box {
    background: var(--ab-gradient);
    color: #fff;
}

.ab-card__title {
    margin-top: 18px;
    font-size: 18px;
    font-weight: 600;
}

.ab-card__text {
    margin-top: 10px;
    font-size: 15px;
}

.ct-banner1 .ct-banner-inner {
    padding-top: 90px;
        margin-left: 95px;
    position: relative;
    z-index: 1;
}
.ct-banner1 .ct-banner-image {
    position: relative;
}
.ct-banner1 .ct-banner-inner:before {
    content: '';
        width: 534px;
    height: 490px;
    border: 66px solid var(--primary-color);
    position: absolute;
    top: 0px;
    right: -80px;
    z-index: -1;
    border-radius: 100%;
    animation: el-bounce 3s infinite linear alternate;
}
.ct-banner1 .ct-banner-holder {
    background-color: #fff;
    position: absolute;
    bottom: -38px;
    left: 18px;
    right: 18px;
    border-radius: 30px 30px 0 0;
    padding: 20px 30px;
    display: flex;
    flex-wrap: nowrap;
}
.ct-banner1 .ct-banner-counter {
    position: absolute;
    padding: 27px 20px 27px 26px;
    width: 170px;
    top: -48px;
    left: -12px;
    z-index: 1;
}
.ct-banner1 .ct-banner-counter:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url(../images/counter-dots.png);
    background-position: top right;
    background-repeat: no-repeat;
}
.ct-banner1 .ct-banner-image img {
    width: 100%;
}
.ct-banner1 .ct-banner-counter .ct-counter-number-value {
    line-height: 1;
    font-size: 60px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}
}
.ct-banner1 .ct-banner-counter .ct-counter-title {
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}
.ct-banner1 .ct-banner-holder {
    background-color: #fff;
    position: absolute;
    bottom: -125px;
    left: 18px;
    right: 18px;
    border-radius: 30px 30px 0 0;
    padding: 20px 30px;
    display: flex;
    flex-wrap: nowrap;
}
.ct-banner1 .icon {
    line-height: 1;
    margin-right: 14px;
}
.ct-banner1 .title {
    font-size: 24px;
    margin-bottom: 8px;
    margin-top: 8px;
}
.ct-banner1 .desc{
    font-size: 15px;
    line-height: 22px;
    color: #888;
}
/* =========================================================
   5. SECTION 1 - HERO
========================================================= */

.ab-hero {
    padding-block: var(--ab-pad-lg);
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(109, 24, 239, .10) 0%, rgba(109, 24, 239, 0) 55%),
        linear-gradient(180deg, #F4F7FF 0%, #FFFFFF 78%);
}

.ab-hero__grid {
    display: grid;
    gap: 28px;
    align-items: center;
}

.ab-hero__title {
    font-size: 27px;
    font-weight: 700;
    line-height: 1.2;
}

.ab-hero__text {
    margin-top: 16px;
    font-size: 15px;
    max-width: 62ch;
}

/* The DevOps mark is drawn on the right of its canvas, so the
   frame crops from the right and keeps the artwork centred. */
.ab-hero__art {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: right center;
    border-radius: var(--ab-radius-lg);
}


/* =========================================================
   6. SECTION 2 - AT A GLANCE
========================================================= */

.ab-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ab-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;

    padding: 22px 18px;

    background: var(--ab-card);
    border-radius: var(--ab-radius-lg);

    transition: transform var(--ab-dur) var(--ab-ease),
                box-shadow var(--ab-dur) var(--ab-ease);
}

.ab-stat:hover {
    transform: translateY(-4px);
    box-shadow: var(--ab-shadow-md);
}

.ab-stat__ico { color: var(--ab-blue); }
.ab-stat__ico .ab-ico { width: 22px; height: 22px; }

.ab-stat__figure {
    margin-top: 8px;

    font-size: 32px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ab-heading);

    /* Stops the row twitching while the count-up runs. */
    font-variant-numeric: tabular-nums;
}

.ab-stat__label {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ab-heading);
}

.ab-stat__note { font-size: 13px; color: var(--ab-body); }


/* =========================================================
   7. SECTION 3 - OUR BEGINNING
========================================================= */

.ab-split {
    display: grid;
    gap: 26px;
    align-items: center;
}

.ab-split__media { position: relative; }

.ab-split__img {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--ab-radius-lg);
    box-shadow: var(--ab-shadow-lg);
}

/* Brand chip behind the photo - decoration only, no text. */
.ab-split__media::after {
    content: "";
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 96px;
    height: 96px;
    border-radius: var(--ab-radius-lg);
    background: var(--ab-gradient);
    opacity: .18;
}

.ab-split__title { font-size: 24px; font-weight: 600; }

.ab-split__copy {
    margin-top: 16px;
    display: grid;
    gap: 14px;
    font-size: 15px;
}


/* =========================================================
   8. SECTION 4 - WHAT MATTERS TO US
========================================================= */

.ab-pillars {
    display: grid;
    gap: 18px;
}

.ab-pillar {
    height: 100%;
    padding: 26px 22px;

    background: var(--ab-surface);
    border-radius: var(--ab-radius-lg);
    box-shadow: var(--ab-shadow-sm);

    transition: transform var(--ab-dur) var(--ab-ease),
                box-shadow var(--ab-dur) var(--ab-ease);
}

.ab-pillar:hover {
    transform: translateY(-4px);
    box-shadow: var(--ab-shadow-md);
}

.ab-pillar:hover .ab-ico-box {
    background: var(--ab-gradient);
    color: #fff;
}

/* Vision is the forward-looking half of the pair, so it is the
   highlighted card: branded wash, a brand ring instead of a hairline
   border, a lifted shadow, and a gradient icon chip that reads as
   "active" without waiting for hover. */
.ab-pillar--vision {
    position: relative;
    background:
        linear-gradient(140deg, #FFFFFF 0%, #F3F0FF 48%, #E8EFFF 100%);
    box-shadow:
        0 0 0 2px rgba(39, 98, 246, .22),
        0 18px 38px -20px rgba(39, 98, 246, .55);
}

/* Gradient accent bar along the top edge. */
.ab-pillar--vision::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    border-radius: var(--ab-radius-lg) var(--ab-radius-lg) 0 0;
    background: var(--ab-gradient);
}

.ab-pillar--vision .ab-ico-box {
    background: var(--ab-gradient);
    color: #fff;
}

.ab-pillar--vision:hover {
    box-shadow:
        0 0 0 2px rgba(39, 98, 246, .3),
        0 24px 46px -20px rgba(39, 98, 246, .6);
}

.ab-pillar__title { margin-top: 18px; font-size: 19px; font-weight: 600; }
.ab-pillar__text { margin-top: 10px; font-size: 15px; }


/* =========================================================
   9. SECTION 5 - CORE PRINCIPLES

   Six equal cards on Bootstrap's grid (col-lg-4 col-md-6),
   so it resolves 3 x 2 -> 2 x 3 -> 1 column on its own. The
   card itself is the shared .ab-card in section 3; there is
   no extra layout CSS to keep in step here.
========================================================= */


/* =========================================================
   10. SECTION 6 - WHY BUSINESSES CHOOSE US

   Deliberately a different shape from the principles grid
   above: wide two-column rows with the icon on a rail to the
   left of the copy, on a light ground rather than a
   saturated band. Two long-form columns instead of three
   narrow ones also give this section's longer sentences a
   comfortable measure.
========================================================= */

.ab-why {
    display: grid;
    gap: 24px;
}

/* Heading column. From 992 up this is pinned to the right while the
   rows on the left scroll past it (section 14). Below that it is a
   normal centred section head stacked above the list. */
.ab-why__aside { text-align: center; }

.ab-why__heading { font-size: 24px; font-weight: 600; }

.ab-why__list {
    display: grid;
    gap: 16px;
}

.ab-why__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    height: 100%;
    padding: 24px 22px;

    background: var(--ab-surface);
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-radius-lg);

    transition: transform var(--ab-dur) var(--ab-ease),
                box-shadow var(--ab-dur) var(--ab-ease),
                border-color var(--ab-dur) var(--ab-ease);
}

.ab-why__item:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--ab-shadow-md);
}

.ab-why__item:hover .ab-ico-box {
    background: var(--ab-gradient);
    color: #fff;
}

/* min-width:0 lets long words wrap instead of widening the row. */
.ab-why__body { min-width: 0; }

.ab-why__title { font-size: 18px; font-weight: 600; }

.ab-why__text { margin-top: 8px; font-size: 15px; }


/* =========================================================
   11. SECTION 7 - WHERE WE WORK
========================================================= */

/* One column on small phones: two-up left names like "Logistics &
   Transportation" wrapping into a 90px-wide column. Widths step up
   in section 14. */
.ab-sectors {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.ab-sector {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px;

    /* Tinted tile on the white section ground, with the icon chip
       inverted to white so the two never flatten into each other. */
    background: var(--ab-blue-soft);
    border: 1px solid transparent;
    border-radius: var(--ab-radius);

    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ab-heading);

    transition: transform var(--ab-dur) var(--ab-ease),
                box-shadow var(--ab-dur) var(--ab-ease),
                border-color var(--ab-dur) var(--ab-ease),
                background-color var(--ab-dur) var(--ab-ease);
}

/* Hover swaps the tile and the chip: tile goes white, chip picks
   up the brand gradient. */
.ab-sector:hover {
    transform: translateY(-3px);
    background: var(--ab-surface);
    border-color: var(--ab-line);
    box-shadow: var(--ab-shadow-md);
}

.ab-sector .ab-ico-box {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    background: var(--ab-surface);
}

.ab-sector .ab-ico { width: 20px; height: 20px; }

.ab-sector:hover .ab-ico-box {
    background: var(--ab-gradient);
    color: #fff;
}


/* =========================================================
   12. CLOSING CTA
========================================================= */

.ab-cta {
    padding: 28px 22px;
    border-radius: var(--ab-radius-lg);
    background: #101130 var(--ab-gradient);
    box-shadow: var(--ab-shadow-lg);
    text-align: center;
}

.ab-cta__title { font-size: 22px; font-weight: 700; color: var(--ab-on-dark); }

.ab-cta__text {
    margin: 12px auto 0;
    max-width: 64ch;
    font-size: 15px;
    color: var(--ab-on-dark-soft);
}

.ab-cta__actions { margin-top: 22px; }

 

/* ---- >=576px - large phones ---------------------------- */
@media (min-width: 576px) {

    .ab-hero__title { font-size: 32px; }

    .ab-head__title,
    .ab-split__title { font-size: 27px; }

    .ab-stat { padding: 26px 22px; }
    .ab-stat__figure { font-size: 38px; }

    .ab-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .ab-cta { padding: 34px 30px; }
    .ab-cta__title { font-size: 25px; }

    .ab-footer__bar {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}


/* ---- >=768px - tablets --------------------------------- */
@media (min-width: 768px) {

    :root {
        --ab-pad-sm: 40px;
        --ab-pad: 48px;
        --ab-pad-lg: 52px;
    }

    .ab-head { margin-bottom: 32px; }
    .ab-head__title { font-size: 30px; }
    .ab-head__text { font-size: 16px; }

    .ab-hero__title { font-size: 36px; }
    .ab-hero__text { font-size: 16px; }

    .ab-stats { gap: 20px; }
    .ab-stat__figure { font-size: 44px; }
    .ab-stat__label { font-size: 18px; }

    .ab-split { gap: 32px; }
    .ab-split__title { font-size: 30px; }
    .ab-split__copy { font-size: 16px; }

    .ab-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Nine sectors resolve to three clean rows from here up. */
    .ab-sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* .ab-why stays a single stack here on purpose; its two-column
       split with the pinned heading starts at 992. */

    .ab-card__text,
    .ab-pillar__text { font-size: 15.5px; }

    /* Still one column here, so a tall frame would push the copy
       off-screen. Both images go wide-and-short until the layout
       splits into two columns at 992. */
    .ab-hero__art,
    .ab-split__img { aspect-ratio: 16 / 9; }

    .ab-cta { padding: 40px 36px; }
    .ab-cta__title { font-size: 28px; }
    .ab-cta__text { font-size: 16px; }

    .ab-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
}


/* ---- >=992px - laptops --------------------------------- */
@media (min-width: 992px) {

    :root {
        --ab-pad-sm: 40px;
        --ab-pad: 55px;
        --ab-pad-lg: 60px;
    }

    /* Desktop header: nav returns to one row. */
    .ab-header__bar { min-height: 74px; flex-wrap: nowrap; }

    .ab-toggler { display: none; }

    /* Bootstrap's collapse must not hide the desktop nav. */
    .ab-header__collapse {
        display: flex !important;
        align-items: center;
        gap: 28px;

        flex: 0 1 auto;
        border-top: 0;

        height: auto !important;
        visibility: visible !important;
    }

    .ab-nav {
        flex-direction: row;
        align-items: center;
        gap: 4px;
        padding: 0;
    }

    .ab-nav__link { padding: 8px 12px; }

    .ab-header__cta { margin-top: 0; }
    .ab-header__cta .ab-btn { padding: 11px 20px; font-size: 14px; }

    .ab-head__title { font-size: 34px; }

    .ab-hero { padding-block: calc(var(--ab-pad-lg) + 8px); }
    .ab-hero__grid { grid-template-columns: 1.05fr .95fr; gap: 40px; }

    /* Two columns again, so the images can regain their height. */
    .ab-hero__art { aspect-ratio: 3 / 2; }
    .ab-split__img { aspect-ratio: 4 / 3; }

    .ab-hero__title { font-size: 42px; }
    .ab-hero__text { font-size: 17px; margin-top: 18px; }

    .ab-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
    .ab-stat { padding: 32px 26px; }
    .ab-stat__figure { font-size: 50px; }
    .ab-stat__label { font-size: 20px; }

    .ab-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
    .ab-split__title { font-size: 32px; }


    .ab-pillars { gap: 24px; }
    .ab-pillar { padding: 32px 28px; }

    .ab-sectors { gap: 16px; }
    .ab-sector { padding: 16px 18px; font-size: 15px; }

    /* Rows on the left, heading pinned on the right.
       align-items:start gives the sticky item room to travel; without
       it the stretched grid item has nowhere to stick to.
       98px clears the 74px sticky header plus a little breathing room. */
    .ab-why {
       
        gap: 50px;
        align-items: start;
    }

    /* Stacking deck (see section 14b). display:block takes the rows out
       of grid flow so each one can be position:sticky and slide over the
       one before it instead of holding its own track. */
    .ab-why__list {
        grid-column: 2;
        grid-row: 1;
        display: block;
        gap: 0;
    }

    .ab-why__aside {
        grid-column: 1;
        grid-row: 1;
        position: sticky;
        top: 98px;
        text-align: left;
    }

    .ab-why__heading { font-size: 34px; }

    .ab-why__item { padding: 28px 26px; }
    .ab-why__text { font-size: 15.5px; }

    .ab-card { padding: 30px 26px; }

    .ab-cta { padding: 48px; }
    .ab-cta__title { font-size: 30px; }

    .ab-footer__grid {
        grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
        gap: 40px;
    }
}


/* ---- >=1200px - large desktop -------------------------- */
@media (min-width: 1200px) {

    .ab-head__title { font-size: 36px; }

    .ab-why__heading { font-size: 36px; }

    .ab-hero__title { font-size: 46px; }

    .ab-split__title { font-size: 34px; }

    .ab-cta__title { font-size: 32px; }
}


/* =========================================================
   14b. SECTION 6 - WHY US, STACKING DECK  (>=992px)

   Each row is position:sticky with a top offset one notch lower
   than the row before it, so scrolling pushes every card up
   until it parks on the growing pile. Later rows paint above
   earlier ones for free - they are positioned and come later in
   the DOM - so the incoming card always covers the one it lands
   on, leaving an --ab-stack-step sliver of it on show.

   The layout half is CSS only, so the deck still works with JS
   off. script.js adds just the scale-back on buried cards, via
   --ab-stack-scale.

   Below 992px the rows stay a plain list: the deck needs the
   spare viewport height that only the desktop layout has.
========================================================= */

@media (min-width: 992px) {

    .ab-why__list {
        /* 106px clears the sticky header, in line with .ab-why__aside.
           The step is the sliver each buried card keeps visible. */
        --ab-stack-top: 106px;
        --ab-stack-step: 14px;

        /* Room for the last card to finish parking before the section
           scrolls out from under the deck. */
        padding-bottom: 12vh;
    }

    .ab-why__item {
        position: sticky;
        top: calc(var(--ab-stack-top) + var(--i, 0) * var(--ab-stack-step));

        /* Scroll distance between one card and the next meeting it. */
        margin-bottom: 24px;
        height: auto;

        /* Scaling from the top edge leaves the visible sliver where the
           sticky offset put it and insets the sides instead - which is
           the part that reads as depth. */
        transform: scale(var(--ab-stack-scale, 1));
        transform-origin: 50% 0;

        /* Opaque, so the card underneath cannot bleed through, plus a
           shadow to give the overlap an edge. */
        background: var(--ab-surface);
        box-shadow: var(--ab-shadow-sm);

        /* No transition on `transform` here - the scale is driven from
           the scroll position, so easing it only adds lag. */
        transition: box-shadow var(--ab-dur) var(--ab-ease),
                    border-color var(--ab-dur) var(--ab-ease);
    }

    .ab-why__item:nth-child(1) { --i: 0; }
    .ab-why__item:nth-child(2) { --i: 1; }
    .ab-why__item:nth-child(3) { --i: 2; }
    .ab-why__item:nth-child(4) { --i: 3; }
    .ab-why__item:nth-child(5) { --i: 4; }
    .ab-why__item:nth-child(6) { --i: 5; }
    .ab-why__item:nth-child(7) { --i: 6; }
    .ab-why__item:nth-child(8) { --i: 7; }

    /* The stack is the entrance now, so the shared reveal must not hold
       these rows at opacity:0 or fight over `transform`.

       The extra .ab-why__list in the selector is doing real work: it
       has to outweigh `.ab-reveal-ready .ab-reveal.is-visible` in
       section 15, which is equally specific and comes later. */
    .ab-reveal-ready .ab-why__list .ab-why__item.ab-reveal {
        opacity: 1;
        transform: scale(var(--ab-stack-scale, 1));
        transition: box-shadow var(--ab-dur) var(--ab-ease),
                    border-color var(--ab-dur) var(--ab-ease);
    }

    /* No lift on hover inside the deck - a translate here would either
       drop the stack scale or drag the card out of its slot. */
    .ab-why__item:hover,
    .ab-reveal-ready .ab-why__list .ab-why__item.ab-reveal:hover {
        transform: scale(var(--ab-stack-scale, 1));
        box-shadow: var(--ab-shadow-md);
    }

    /* Reduced motion: no pile-up, just the plain list back. */
    @media (prefers-reduced-motion: reduce) {

        .ab-why__list { padding-bottom: 0; }

        .ab-why__item {
            position: static;
            transform: none;
            margin-bottom: 20px;
            box-shadow: none;
        }
    }
}


/* =========================================================
   15. MOTION

   One reveal, transform + opacity only, so nothing in it can
   trigger layout. Elements stay visible until script.js adds
   .ab-reveal-ready, which keeps the page readable with JS off.
========================================================= */

.ab-reveal-ready .ab-reveal {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity .5s var(--ab-ease), transform .5s var(--ab-ease);
}

.ab-reveal-ready .ab-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

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

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

    .ab-reveal-ready .ab-reveal { opacity: 1; transform: none; }
}

/* Nothing below the fold has been revealed when a print starts,
   so force every deferred element back on for print. */
@media print {

    .ab-reveal-ready .ab-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}