/* About Us section — Our Purpose / Our Team / Media
   (resources/views/frontend/about/*.blade.php). Everything is scoped under
   .ab-page so it can't leak into the shared site layout. */

/* Montserrat for the featured-story slider (the rest of the site is Roboto, loaded by style.css) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap');

.ab-page {
    --ab-ink: #0f1d2e;
    --ab-body: #475569;
    --ab-muted: #64748b;
    --ab-line: #e6ebf2;
    --ab-soft: #f6f9fc;
    --ab-navy: #15416e;
    --ab-navy-deep: #0b1d33;
    --ab-blue: #1c68b5;
    --ab-green: #18ba60;
    --ab-radius: 20px;
    --ab-shadow: 0 1px 2px rgba(15, 29, 46, .04), 0 10px 30px -10px rgba(15, 29, 46, .12);
    --ab-shadow-lg: 0 4px 10px rgba(15, 29, 46, .04), 0 30px 60px -20px rgba(15, 29, 46, .22);
    --ab-font: "Roboto", "Helvetica Neue", Arial, sans-serif;
    --ab-display: "Roboto", "Helvetica Neue", Arial, sans-serif;
    --ab-ease: cubic-bezier(.16, 1, .3, 1);

    /* accent used by icons / rings / cards; each .ab-tone--* overrides it */
    --tone: var(--ab-blue);
    --tone-2: #3fa2f5;
    --tone-soft: #e8f1fb;
    --tone-glow: rgba(28, 104, 181, .35);

    position: relative;
    color: var(--ab-body);
    font-family: var(--ab-font);
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.ab-tone--blue   { --tone: #1c68b5; --tone-2: #3fa2f5; --tone-soft: #e8f1fb; --tone-glow: rgba(28, 104, 181, .35); }
.ab-tone--green  { --tone: #14a456; --tone-2: #3dd68c; --tone-soft: #e6f7ee; --tone-glow: rgba(20, 164, 86, .35); }
.ab-tone--orange { --tone: #f26b1d; --tone-2: #ffa24c; --tone-soft: #fef0e6; --tone-glow: rgba(242, 107, 29, .35); }
.ab-tone--purple { --tone: #7559e6; --tone-2: #a48dff; --tone-soft: #f0ecfd; --tone-glow: rgba(117, 89, 230, .35); }

.ab-page *,
.ab-page *::before,
.ab-page *::after { box-sizing: border-box; }
/* :where() keeps these resets at zero specificity so component rules win. */
.ab-page :where(h1, h2, h3, h4, h5, p, figure, blockquote) { margin: 0; font-family: var(--ab-font); }
.ab-page :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.ab-page :where(img) { display: block; max-width: 100%; }
.ab-page :where(button) { font-family: inherit; }

.ab-wrap { position: relative; width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 28px; }

.ab-section { padding: 110px 0; }
.ab-section--soft { background: var(--ab-soft); }
.ab-section--flush { padding-top: 0; }

/* =====================================================================
   Scroll reveal. JS adds .ab-js to <html> before first paint, then adds
   .is-in to each [data-reveal] element as it enters the viewport.
   Without JS (or with reduced motion) nothing is hidden.
   ===================================================================== */

.ab-js .ab-page [data-reveal] {
    opacity: 0;
    transition: opacity .9s ease, transform 1s var(--ab-ease), clip-path 1.2s var(--ab-ease);
    transition-delay: var(--d, 0ms);
    will-change: opacity, transform;
}
.ab-js .ab-page [data-reveal="up"]    { transform: translateY(46px); }
.ab-js .ab-page [data-reveal="down"]  { transform: translateY(-30px); }
.ab-js .ab-page [data-reveal="left"]  { transform: translateX(-60px); }
.ab-js .ab-page [data-reveal="right"] { transform: translateX(60px); }
.ab-js .ab-page [data-reveal="zoom"]  { transform: scale(.9); }
.ab-js .ab-page [data-reveal="clip"]  { opacity: 1; clip-path: inset(0 100% 0 0 round var(--ab-radius)); }
.ab-js .ab-page [data-reveal].is-in   { opacity: 1; transform: none; }
.ab-js .ab-page [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0 round var(--ab-radius)); }

/* ---------- shared bits ---------- */

.ab-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-family: var(--ab-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ab-green);
}
.ab-label::before { content: ""; width: 30px; height: 2px; background: currentColor; }
.ab-label--center::after { content: ""; width: 30px; height: 2px; background: currentColor; }

.ab-h2 {
    font-family: var(--ab-display);
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ab-ink);
}
.ab-h2 em { font-style: normal; color: var(--ab-blue); }
/* two-tone heading, like the home testimonials title: navy, then the <span> in orange */
.ab-h2--duo { color: #15416e; }
.ab-h2--duo span { color: #f07f22; }

.ab-head { max-width: 720px; margin: 0 auto 60px; text-align: center; }
.ab-head p:not(.ab-label) { margin-top: 16px; font-size: 17.5px; color: var(--ab-muted); }

.ab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    border: 0;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none !important;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.ab-btn:hover { transform: translateY(-2px); }
.ab-btn .fa { transition: transform .25s ease; }
.ab-btn:hover .fa { transform: translateX(4px); }
.ab-btn--primary {
    background: linear-gradient(135deg, var(--ab-blue), var(--ab-navy));
    color: #fff !important;
    box-shadow: 0 10px 24px -8px rgba(28, 104, 181, .55);
}
.ab-btn--primary:hover { box-shadow: 0 16px 32px -8px rgba(28, 104, 181, .65); }
.ab-btn--green { background: var(--ab-green); color: #fff !important; box-shadow: 0 10px 24px -8px rgba(24, 186, 96, .55); }
.ab-btn--blue { background: var(--ab-blue); color: #fff !important; box-shadow: 0 10px 24px -8px rgba(28, 104, 181, .55); }
.ab-btn--blue:hover { background: #2277cc; }
.ab-btn--white { background: #fff; color: var(--ab-navy) !important; box-shadow: var(--ab-shadow); }
.ab-btn--ghost { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.ab-btn--ghost:hover { background: rgba(255, 255, 255, .1); }

.ab-ticks li { position: relative; padding: 7px 0 7px 34px; font-weight: 500; color: var(--ab-ink); }
.ab-ticks .fa {
    position: absolute;
    left: 0; top: 10px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #e6f7ee;
    color: var(--ab-green);
    font-size: 11px;
    line-height: 22px;
    text-align: center;
}
.ab-ticks--sm li { font-size: 14.5px; padding-top: 5px; padding-bottom: 5px; }
.ab-ticks--sm .fa { top: 8px; }

.ab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--tone-soft);
    color: var(--tone);
    font-size: 22px;
}

/* =====================================================================
   Page hero (shared) — full-bleed photo, dark overlay, uppercase title
   ===================================================================== */

.ab-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 600px;
    padding: 120px 0 140px;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.ab-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--ab-hero-bg) center / cover no-repeat;
    transform: scale(1.12);
    animation: ab-kenburns 14s ease-out forwards;
}
.ab-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(11, 29, 51, .92) 0%, rgba(11, 29, 51, .7) 45%, rgba(11, 29, 51, .25) 100%),
        linear-gradient(0deg, rgba(11, 29, 51, .6) 0%, transparent 40%);
}
/* Our Purpose hero: its own dark artwork (purpose-hero.svg, clean on the left for the text),
   so no gradient layer over it; set in Montserrat (loaded by purpose.blade.php). */
.ab-hero--purpose::before { display: none; }
.ab-hero--purpose .ab-hero__bg { background-position: right center; }
.ab-hero--purpose .ab-label,
.ab-hero--purpose .ab-hero__title,
.ab-hero--purpose .ab-hero__tagline,
.ab-hero--purpose .ab-hero__lead { font-family: "Montserrat", var(--ab-display); text-shadow: 0 2px 4px rgba(6, 18, 33, .55), 0 4px 22px rgba(6, 18, 33, .75); }
.ab-hero--purpose .ab-hero__title { font-weight: 800; letter-spacing: -.01em; }
.ab-hero--purpose .ab-hero__tagline { font-weight: 600; letter-spacing: .01em; color: #f07f22; }   /* the site orange, like the kicker above */
.ab-hero--purpose .ab-hero__lead { max-width: 760px; font-size: 17px; font-weight: 300; color: rgba(255, 255, 255, .88); }   /* light, three lines on desktop */
/* 2026-11-04: a shorter hero (now the hero.webp team photo with the .ab-hero--team veil; see the end of this file); the breadcrumb is the strip under it (partials/hero) */
.ab-hero--purpose { min-height: 440px; padding: 70px 0 64px; }
.ab-hero--purpose .ab-hero__bg { background-color: #06111f; background-size: auto 100%; background-position: right center; transform: none; animation: none; }   /* pinned to the right edge: the artwork never slides under the text */
.ab-hero--purpose .ab-hero__title { margin-top: 4px; font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; line-height: 1.1; letter-spacing: .01em; text-transform: uppercase; }
.ab-hero--purpose .ab-hero__title::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 14px; border-radius: 2px; background: linear-gradient(90deg, #5fd697, #3fa2f5); }
.ab-hero--purpose .ab-hero__tagline { margin-top: 16px; }
.ab-hero--purpose .ab-scroll { display: none; }
/* small laptops: no room right of the text for the whole artwork, so it dims behind the text (as on phones) */
@media (min-width: 992px) and (max-width: 1279px) { .ab-hero--purpose .ab-hero__bg { filter: brightness(.5); } }
.ab-hero__inner { max-width: 760px; }
.ab-crumb {
    display: flex;
    width: max-content;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .7);
}
.ab-crumb a { color: rgba(255, 255, 255, .8) !important; text-decoration: none !important; }
.ab-crumb a:hover { color: #fff !important; }
.ab-crumb [aria-current] { color: #5fd697; }
.ab-hero .ab-label { color: #5fd697; }
.ab-hero__title {
    font-family: var(--ab-display);
    font-size: clamp(40px, 6vw, 80px);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #fff;
}
.ab-hero__title span { color: #5fd697; }
.ab-hero__tagline { margin-top: 18px; font-size: 22px; line-height: 1.4; font-weight: 600; color: #fff; text-wrap: balance; }
.ab-hero__tagline + .ab-hero__lead { margin-top: 14px; }
.ab-hero__lead { max-width: 620px; margin-top: 24px; font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, .8); }

.ab-scroll { /* animated mouse at the bottom of the hero */
    position: absolute;
    left: 50%;
    bottom: 70px;
    width: 26px;
    height: 42px;
    margin-left: -13px;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 14px;
}
.ab-scroll::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 7px;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    border-radius: 2px;
    background: #fff;
    animation: ab-scroll 1.8s ease-in-out infinite;
}

@keyframes ab-kenburns { to { transform: scale(1); } }
@keyframes ab-scroll { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }


/* =====================================================================
   OUR PURPOSE
   ===================================================================== */

/* who we are */
.ab-statement { max-width: 960px; margin: 0 auto; text-align: center; }
.ab-statement p:not(.ab-label) {
    font-family: var(--ab-display);
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.45;
    font-weight: 500;
    color: var(--ab-ink);
}
.ab-statement p:not(.ab-label) strong { color: var(--ab-blue); font-weight: 600; }
.ab-statement__title { margin-bottom: 22px !important; font-family: var(--ab-display); font-size: clamp(26px, 2.8vw, 38px); line-height: 1.25; font-weight: 700; color: var(--ab-ink); text-wrap: balance; }
/* two paragraphs of copy here, so they read as body text, not the large one-line statement */
.ab-statement p:not(.ab-label) { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.7; font-weight: 400; color: var(--ab-body); }
.ab-statement p.ab-statement__more { margin-top: 14px; }

/* stats */
.ab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 64px !important; }
.ab-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    align-items: center;
    align-content: start;
    padding: 26px 24px;
    background: #fff;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-radius);
    box-shadow: var(--ab-shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}
.ab-stat:hover { transform: translateY(-4px); box-shadow: var(--ab-shadow-lg); }
.ab-stat > div:not(.ab-ring) { display: contents; }
.ab-ring { position: relative; width: 64px; height: 64px; flex: 0 0 auto; }
.ab-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ab-ring circle { fill: none; stroke-width: 5; }
.ab-ring__track { stroke: var(--tone-soft); }
.ab-ring__bar { stroke: var(--tone); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--ring)); }
.ab-ring .fa { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--tone); font-size: 20px; }
.ab-stat__num { display: block; font-family: var(--ab-display); font-size: clamp(30px, 2.8vw, 38px); font-weight: 700; line-height: 1.1; color: var(--ab-ink); }
.ab-page .ab-count { font-variant-numeric: tabular-nums; }
.ab-stat p { grid-column: 1 / -1; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--ab-line); font-size: 14px; line-height: 1.45; color: var(--ab-muted); }
/* Who we are: capability cards (title + text instead of a number) and the closing line */
.ab-stat__title { margin: 0; font-family: var(--ab-display); font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--ab-ink); }
.ab-stats--pillars .ab-stat p { font-size: 15px; line-height: 1.55; }
.ab-closing { margin: 48px auto 0 !important; text-align: center; font-family: var(--ab-display); font-size: clamp(20px, 1.9vw, 26px); line-height: 1.35; font-weight: 700; color: var(--ab-blue); text-wrap: balance; }

.ab-stats.is-armed .ab-ring__bar { stroke-dashoffset: 100; transition: stroke-dashoffset 2s var(--ab-ease); transition-delay: calc(300ms + var(--i) * 150ms); }
.ab-stats.is-armed .ab-ring .fa { transform: scale(.4); opacity: 0; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .4s ease; transition-delay: calc(500ms + var(--i) * 150ms); }
.ab-stats.is-active .ab-ring__bar { stroke-dashoffset: calc(100 - var(--ring)); }
.ab-stats.is-active .ab-ring .fa { transform: none; opacity: 1; }

/* founder message */
.ab-founder { display: grid; grid-template-columns: 5fr 7fr; gap: 90px; align-items: center; }
.ab-founder__media { position: relative; padding: 0 0 40px 40px; }
.ab-founder__media::before {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 80%; height: 80%;
    border-radius: 28px;
    background: linear-gradient(135deg, var(--ab-blue), var(--ab-green));
}
.ab-founder__photo { position: relative; width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: center 15%; border-radius: 24px; box-shadow: var(--ab-shadow-lg); }
.ab-founder__card {
    position: absolute;
    right: -30px;
    bottom: 70px;
    padding: 16px 22px;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--ab-shadow-lg);
}
.ab-founder__card strong { display: block; font-family: var(--ab-display); font-size: 19px; color: var(--ab-ink); }
.ab-founder__card span { font-size: 13.5px; font-weight: 600; color: var(--ab-green); }
.ab-founder__quote { position: relative; }
.ab-founder__copy .ab-h2 { margin-bottom: 24px; }
.ab-founder__copy p + p { margin-top: 16px; }
.ab-founder__copy > p { font-size: 16.5px; }
/* founder's message: a quotation, marked by a green rule; the heading's second sentence on its own line */
.ab-founder__quote em { display: block; }
.ab-founder__message { margin: 0; padding: 2px 0 2px 24px; border-left: 3px solid var(--ab-green); }
.ab-founder__message p { font-size: 16.5px; line-height: 1.7; }
.ab-founder__message p + p { margin-top: 14px; }
.ab-sign b { color: var(--ab-ink); font-weight: 600; }
.ab-sign { display: flex; align-items: center; gap: 14px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--ab-line); }
.ab-sign strong { font-family: var(--ab-display); font-size: 18px; color: var(--ab-ink); }
.ab-sign span { display: block; font-size: 13.5px; color: var(--ab-muted); }
.ab-sign__line { width: 48px; height: 2px; background: var(--ab-green); }

/* image duo (Our Team / The Cybarwind Difference) */
.ab-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ab-duo__card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 460px;
    padding: 40px;
    border-radius: 24px;
    overflow: hidden;
    color: #fff !important;
    text-decoration: none !important;
    isolation: isolate;
}
.ab-duo__card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ab-ease); }
.ab-duo__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 29, 51, .05) 20%, rgba(11, 29, 51, .92) 100%); transition: background .5s ease; }
.ab-duo__card:hover img { transform: scale(1.08); }
.ab-duo__card:hover::before { background: linear-gradient(180deg, rgba(21, 65, 110, .35) 0%, rgba(11, 29, 51, .95) 100%); }
.ab-duo__card h3 { font-family: var(--ab-display); font-size: 30px; font-weight: 700; color: #fff; }
.ab-duo__card p { max-width: 460px; margin-top: 10px; font-size: 15.5px; color: rgba(255, 255, 255, .82); }
.ab-duo__more { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-weight: 700; color: #5fd697; }
.ab-duo__more .fa { transition: transform .25s ease; }
.ab-duo__card:hover .ab-duo__more .fa { transform: translateX(6px); }

/* vision / mission / values */
.ab-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.ab-pillar {
    position: relative;
    padding: 40px 34px;
    background: #fff;
    border-radius: 24px;
    border: 1px solid var(--ab-line);
    box-shadow: var(--ab-shadow);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}
.ab-pillar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--tone); }
.ab-pillar:hover { transform: translateY(-6px); box-shadow: var(--ab-shadow-lg); }
.ab-pillar h3 { margin-top: 24px; font-family: var(--ab-display); font-size: 24px; font-weight: 700; color: var(--ab-ink); }
.ab-pillar > p { margin-top: 12px; font-size: 15.5px; }
.ab-pillar .ab-ticks { margin-top: 12px; }
.ab-pillar--featured { background: linear-gradient(160deg, #15416e 0%, #0e2b4b 100%); border-color: transparent; box-shadow: var(--ab-shadow-lg); }
.ab-pillar--featured::before { background: linear-gradient(90deg, var(--ab-green), #5fd697); }
.ab-pillar--featured .ab-icon { background: rgba(255, 255, 255, .1); color: #5fd697; }
.ab-pillar--featured h3 { color: #fff; }
.ab-pillar--featured > p { color: rgba(255, 255, 255, .75); }
.ab-pillar--featured .ab-ticks li { color: rgba(255, 255, 255, .9); }
.ab-pillar--featured .ab-ticks .fa { background: rgba(95, 214, 151, .18); color: #5fd697; }
.ab-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px !important; }
.ab-tags li { padding: 8px 14px; border-radius: 10px; background: var(--tone-soft); font-size: 14px; font-weight: 600; color: var(--tone); }

/* philosophy steps */
.ab-steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.ab-steps::before { /* connecting line behind the circles */
    content: "";
    position: absolute;
    top: 46px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: repeating-linear-gradient(90deg, #c9d6e5 0 8px, transparent 8px 16px);
}
.ab-step { position: relative; text-align: center; }
.ab-step__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    margin: 0 auto;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--ab-shadow-lg);
    color: var(--tone);
    font-size: 30px;
    transition: transform .4s var(--ab-ease), background .3s ease, color .3s ease;
}
.ab-step__icon::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px dashed var(--tone-soft); }
.ab-step:hover .ab-step__icon { transform: translateY(-6px); background: linear-gradient(135deg, var(--tone), var(--tone-2)); color: #fff; }
.ab-step__num { position: absolute; top: -4px; right: calc(50% - 56px); width: 28px; height: 28px; border-radius: 50%; background: var(--tone); color: #fff; font-size: 12px; font-weight: 700; line-height: 28px; }
.ab-step h3 { margin-top: 28px; font-family: var(--ab-display); font-size: 21px; font-weight: 700; color: var(--ab-ink); }
.ab-step p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--ab-muted); }

/* services */
.ab-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ab-service {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 2px 6px rgba(15, 29, 46, .05), 0 16px 36px -14px rgba(15, 29, 46, .18);
    overflow: hidden;
    color: inherit !important;
    text-decoration: none !important;
    transition: transform .4s var(--ab-ease), box-shadow .4s ease;
}
.ab-service:hover { transform: translateY(-10px); box-shadow: 0 28px 50px -18px var(--tone-glow); }
.ab-service__top {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height: 128px;
    padding: 26px 26px 0;
    background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .28), transparent 55%), linear-gradient(135deg, var(--tone) 0%, var(--tone-2) 100%);
    overflow: hidden;
}
.ab-service__top::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 14px); }
.ab-service__top::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -36px; height: 60px; border-radius: 50%; background: #fff; }
.ab-service__icon {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    width: 60px; height: 60px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff; font-size: 24px;
    box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .25);
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.ab-service:hover .ab-service__icon { transform: rotate(-8deg) scale(1.08); }
.ab-service__num { position: relative; z-index: 1; font-family: var(--ab-display); font-size: 56px; font-weight: 700; line-height: .9; color: rgba(255, 255, 255, .3); }
.ab-service__body { flex: 1; display: flex; flex-direction: column; padding: 8px 26px 26px; }
.ab-service h3 { font-size: 18.5px; font-weight: 800; line-height: 1.3; color: var(--ab-ink); }
.ab-service p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--ab-muted); }
.ab-service__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 24px !important; }
.ab-service__tags li { padding: 5px 11px; border-radius: 999px; background: var(--tone-soft); font-size: 12px; font-weight: 700; color: var(--tone); }
.ab-service__more { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--ab-line); font-size: 14px; font-weight: 700; color: var(--ab-ink); }
.ab-service__arrow { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--tone-soft); color: var(--tone); font-size: 14px; transition: background .3s ease, color .3s ease, transform .3s ease; }
.ab-service:hover .ab-service__more { color: var(--tone); }
.ab-service:hover .ab-service__arrow { background: linear-gradient(135deg, var(--tone), var(--tone-2)); color: #fff; transform: rotate(-45deg); }

/* full-bleed quote banner */
.ab-quote {
    position: relative;
    padding: 150px 0;
    text-align: center;
    color: #fff;
    background:
        linear-gradient(120deg, rgba(11, 29, 51, .94) 0%, rgba(21, 65, 110, .82) 100%),
        var(--ab-quote-bg) center / cover no-repeat fixed;
}
.ab-quote .ab-label { color: #5fd697; }
.ab-quote blockquote {
    max-width: 900px;
    margin: 0 auto;
    font-family: var(--ab-display);
    font-size: clamp(28px, 3.6vw, 48px);
    line-height: 1.25;
    font-weight: 600;
    color: #fff;
}
.ab-quote blockquote::before { content: "\201C"; display: block; font-family: Georgia, serif; font-size: 110px; line-height: .6; color: #5fd697; }
.ab-quote cite { display: block; margin-top: 24px; font-style: normal; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.ab-quote__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 44px; }


/* logos */

/* =====================================================================
   OUR TEAM
   ===================================================================== */

.ab-partner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.ab-partner__copy .ab-h2 { margin-bottom: 22px; }
.ab-partner__copy > p + p { margin-top: 16px; }
.ab-partner__copy .ab-ticks { margin-top: 26px; }
.ab-partner__media { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ab-partner__media img { width: 100%; height: 260px; object-fit: cover; border-radius: 20px; box-shadow: var(--ab-shadow-lg); }
.ab-partner__media img:first-child { grid-row: span 2; height: 538px; }
.ab-partner__badge {
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--ab-shadow-lg);
    white-space: nowrap;
}
.ab-partner__badge strong { font-family: var(--ab-display); font-size: 34px; font-weight: 700; line-height: 1; color: var(--ab-blue); }
.ab-partner__badge span { font-size: 13.5px; line-height: 1.35; color: var(--ab-muted); }

/* leadership cards */
.ab-leaders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ab-leader {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--ab-shadow);
    overflow: hidden;
    transition: transform .4s var(--ab-ease), box-shadow .4s ease;
}
.ab-leader:hover { transform: translateY(-8px); box-shadow: 0 28px 50px -20px var(--tone-glow); }
.ab-leader__photo { position: relative; aspect-ratio: 1 / .95; overflow: hidden; background: var(--tone-soft); }
.ab-leader__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform .9s var(--ab-ease); }
.ab-leader:hover .ab-leader__photo img { transform: scale(1.06); }
.ab-leader__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--tone), var(--tone-2)); }
.ab-leader__social { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; }
.ab-leader__social a {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 12px;
    background: #fff; color: var(--ab-navy) !important;
    font-size: 15px; text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
    opacity: 0; transform: translateX(14px);
    transition: opacity .3s ease, transform .3s ease, background .2s ease, color .2s ease;
}
.ab-leader__social a:nth-child(2) { transition-delay: .05s; }
.ab-leader:hover .ab-leader__social a, .ab-leader__social a:focus { opacity: 1; transform: none; }
.ab-leader__social a:hover { background: var(--tone); color: #fff !important; }
.ab-leader__body { flex: 1; display: flex; flex-direction: column; padding: 26px 28px 28px; }
.ab-leader__body h3 { font-family: var(--ab-display); font-size: 24px; font-weight: 700; color: var(--ab-ink); }
.ab-leader__role { margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--tone); }
.ab-leader__excerpt { margin: 14px 0 22px !important; font-size: 14.5px; line-height: 1.65; color: var(--ab-muted); }
.ab-leader__more {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ab-ink);
    cursor: pointer;
}
.ab-leader__more span { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tone-soft); color: var(--tone); transition: background .3s ease, color .3s ease, transform .3s ease; }
.ab-leader__more:hover span { background: var(--tone); color: #fff; transform: rotate(90deg); }

/* bio modal */
.ab-modal {
    width: min(1120px, calc(100% - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 40px 100px rgba(11, 29, 51, .4);
    overflow: hidden;
}
.ab-modal::backdrop { background: rgba(11, 29, 51, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ab-modal[open] { animation: ab-modal-in .5s var(--ab-ease); }
@keyframes ab-modal-in { from { opacity: 0; transform: translateY(30px) scale(.97); } }
.ab-modal__grid { display: grid; grid-template-columns: 360px 1fr; max-height: calc(100vh - 48px); }
.ab-modal__side { position: relative; padding: 36px 30px; background: linear-gradient(160deg, var(--tone), var(--ab-navy-deep)); color: #fff; text-align: center; }
.ab-modal__side img { width: 200px; height: 200px; margin: 0 auto; border-radius: 50%; object-fit: cover; object-position: center 18%; border: 6px solid rgba(255, 255, 255, .25); }
.ab-modal__side h3 { margin-top: 22px; font-family: var(--ab-display); font-size: 28px; font-weight: 700; color: #fff; }
.ab-modal__side p { margin-top: 4px; font-size: 14.5px; color: rgba(255, 255, 255, .8); }
.ab-modal__side .ab-tags { justify-content: center; }
.ab-modal__side .ab-tags li { background: rgba(255, 255, 255, .14); color: #fff; font-size: 12.5px; }
.ab-modal__main { padding: 44px 44px 40px; min-height: 0; max-height: calc(100vh - 48px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--tone) transparent; }
.ab-modal__main::-webkit-scrollbar { width: 8px; }
.ab-modal__main::-webkit-scrollbar-thumb { background: var(--tone); border-radius: 8px; }
.ab-modal__main::-webkit-scrollbar-track { background: transparent; }
.ab-modal__main h4 { margin: 0 0 10px; font-family: var(--ab-display); font-size: 14px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tone); }
.ab-modal__main h4:not(:first-child) { margin-top: 28px; }
.ab-modal__main p { font-size: 15.5px; margin: 0 0 14px; }
.ab-modal__main p:last-child { margin-bottom: 0; }
.ab-modal__commit {
    margin: 10px 0 0;
    padding: 14px 18px;
    border-left: 3px solid var(--tone);
    border-radius: 0 10px 10px 0;
    background: var(--tone-soft);
    color: var(--ab-ink);
    font-size: 15px;
    font-style: italic;
    line-height: 1.6;
}
.ab-modal__commit::before { content: "\201C"; }
.ab-modal__commit::after { content: "\201D"; }
.ab-modal__resp { margin: 10px 0 0; padding: 0; list-style: none; }
.ab-modal__resp li { position: relative; padding-left: 22px; margin-bottom: 12px; font-size: 15px; line-height: 1.55; }
.ab-modal__resp li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
.ab-modal__resp li strong { display: block; color: var(--ab-ink); font-weight: 700; }
.ab-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border: 0; border-radius: 50%;
    background: var(--ab-soft);
    color: var(--ab-ink);
    font-size: 18px;
    cursor: pointer;
    transition: background .2s ease, transform .3s ease;
}
.ab-modal__close:hover { background: #e2e8f0; transform: rotate(90deg); }

/* practice leads */
.ab-experts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ab-expert { display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; background: #fff; border-radius: 18px; box-shadow: var(--ab-shadow); transition: transform .3s ease, box-shadow .3s ease; }
.ab-expert:hover { transform: translateY(-3px); box-shadow: var(--ab-shadow-lg); }
.ab-expert img { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.ab-expert > div { flex: 1; min-width: 0; }
.ab-expert h4 { font-size: 16px; font-weight: 700; color: var(--ab-ink); }
.ab-expert p { font-size: 13.5px; line-height: 1.4; color: var(--ab-muted); }
.ab-expert__in { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ab-soft); color: var(--ab-navy) !important; text-decoration: none !important; transition: background .2s ease, color .2s ease; }
.ab-expert__in:hover { background: #0a66c2; color: #fff !important; }

/* culture gallery */
.ab-culture { display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: 240px 240px; gap: 18px; }
.ab-culture figure { position: relative; overflow: hidden; border-radius: 20px; }
.ab-culture figure:first-child { grid-row: span 2; }
.ab-culture img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ab-ease); }
.ab-culture figure:hover img { transform: scale(1.07); }
.ab-culture figcaption { position: absolute; left: 16px; bottom: 16px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 13px; font-weight: 700; color: var(--ab-ink); }
.ab-culture__cta { display: flex; flex-direction: column; justify-content: center; padding: 30px; border-radius: 20px; background: linear-gradient(135deg, var(--ab-blue), var(--ab-navy)); color: #fff; }
.ab-culture__cta h3 { font-family: var(--ab-display); font-size: 26px; font-weight: 700; color: #fff; }
.ab-culture__cta p { margin: 8px 0 20px !important; font-size: 14.5px; color: rgba(255, 255, 255, .8); }
.ab-culture__cta .ab-btn { align-self: flex-start; }

/* =====================================================================
   MEDIA
   ===================================================================== */

.ab-feature {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    background: #fff;
    border-radius: 28px;
    box-shadow: var(--ab-shadow-lg);
    overflow: hidden;
}
.ab-feature__media { position: relative; min-height: 420px; overflow: hidden; }
.ab-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ab-ease); }
.ab-feature:hover .ab-feature__media img { transform: scale(1.05); }
.ab-feature__flag { position: absolute; top: 22px; left: 22px; padding: 8px 16px; border-radius: 999px; background: var(--ab-green); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.ab-feature__body { display: flex; flex-direction: column; justify-content: center; padding: 50px 54px; }
.ab-feature__body h2 { margin-top: 16px; font-family: var(--ab-display); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; font-weight: 700; color: var(--ab-ink); }
.ab-feature__body p { margin-top: 14px; font-size: 16px; }
.ab-feature__body .ab-btn { align-self: flex-start; margin-top: 28px; }

/* featured slider (partials/news.blade.php): the stories sit side by side in a track that slides; the rounded
   frame and shadow move from each card to the viewport, prev / dots / next under it */
.ab-fslider__viewport { overflow: hidden; border-radius: 28px; box-shadow: var(--ab-shadow-lg); background: #fff; }
.ab-fslider__track { display: flex; transition: transform .7s var(--ab-ease); }
.ab-fslider__track > .ab-feature { flex: 0 0 100%; min-width: 0; border-radius: 0; box-shadow: none; }
.ab-fslider__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; }
.ab-fslider__btn {
    display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0;
    border: 1px solid var(--ab-line); border-radius: 50%; background: #fff; color: var(--ab-navy); font-size: 15px;
    box-shadow: var(--ab-shadow); cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.ab-fslider__btn:hover, .ab-fslider__btn:focus-visible { background: var(--ab-navy); border-color: var(--ab-navy); color: #fff; transform: translateY(-2px); }
.ab-fslider__dots { display: flex; gap: 8px; }
.ab-fslider__dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: #c7d3e2; cursor: pointer; transition: width .3s ease, background .3s ease; }
.ab-fslider__dots button.is-on { width: 26px; background: var(--ab-blue); }
@media (prefers-reduced-motion: reduce) { .ab-fslider__track { transition: none; } }
/* slider type: Montserrat headline in the site navy, small-caps category pill, roomier body copy */
.ab-fslider .ab-feature__body h2 {
    margin-top: 18px; font-family: "Montserrat", var(--ab-display); font-size: clamp(24px, 2.3vw, 31px);
    font-weight: 800; line-height: 1.22; letter-spacing: -.015em; color: #15416e;
}
.ab-fslider .ab-feature__body p { margin-top: 16px; font-size: 16.5px; line-height: 1.75; color: #4a5a6e; }
.ab-fslider .ab-meta { font-family: "Montserrat", var(--ab-font); font-size: 12.5px; font-weight: 600; }
.ab-fslider .ab-meta__cat { padding: 5px 12px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ab-fslider .ab-feature__body .ab-btn { font-family: "Montserrat", var(--ab-font); font-weight: 700; letter-spacing: .01em; }

.ab-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; font-weight: 600; color: var(--ab-muted); }
.ab-meta .fa { margin-right: 5px; color: var(--ab-green); }
.ab-meta__cat { padding: 4px 12px; border-radius: 999px; background: var(--tone-soft); color: var(--tone); }

.ab-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 44px !important; }
.ab-filters button {
    padding: 11px 22px;
    border: 1px solid var(--ab-line);
    border-radius: 999px;
    background: #fff;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ab-ink);
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ab-filters button:hover { border-color: var(--ab-blue); color: var(--ab-blue); }
.ab-filters button.is-active { background: linear-gradient(135deg, var(--ab-blue), var(--ab-navy)); border-color: transparent; color: #fff; box-shadow: 0 10px 24px -10px rgba(28, 104, 181, .6); }

.ab-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ab-news__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 22px;
    box-shadow: var(--ab-shadow);
    overflow: hidden;
    color: inherit !important;
    text-decoration: none !important;
    transition: transform .4s var(--ab-ease), box-shadow .4s ease, opacity .4s ease;
}
.ab-news__card:hover { transform: translateY(-8px); box-shadow: 0 28px 50px -20px var(--tone-glow); }
.ab-news__card.is-hidden { display: none; }
.ab-news__card.is-filtering { animation: ab-pop .5s var(--ab-ease); }
@keyframes ab-pop { from { opacity: 0; transform: translateY(20px) scale(.97); } }
.ab-news__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.ab-news__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ab-ease); }
.ab-news__card:hover .ab-news__img img { transform: scale(1.07); }
.ab-news__date { position: absolute; left: 16px; bottom: 16px; padding: 8px 12px; border-radius: 12px; background: #fff; text-align: center; line-height: 1; box-shadow: var(--ab-shadow); }
.ab-news__date strong { display: block; font-family: var(--ab-display); font-size: 22px; color: var(--ab-ink); }
.ab-news__date span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tone); }
.ab-news__body { flex: 1; display: flex; flex-direction: column; padding: 22px 24px 24px; }
.ab-news__body h3 { margin-top: 14px; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--ab-ink); transition: color .25s ease; }
.ab-news__card:hover h3 { color: var(--tone); }
.ab-news__body p { margin: 10px 0 20px !important; font-size: 14.5px; color: var(--ab-muted); }
.ab-news__more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--tone); }
.ab-news__more .fa { transition: transform .25s ease; }
.ab-news__card:hover .ab-news__more .fa { transform: translateX(5px); }

.ab-press { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ab-press__card { display: flex; gap: 22px; padding: 36px; border-radius: 24px; background: #fff; box-shadow: var(--ab-shadow); }
.ab-press__card h3 { font-family: var(--ab-display); font-size: 24px; font-weight: 700; color: var(--ab-ink); }
.ab-press__card p { margin: 8px 0 18px !important; font-size: 15px; }
.ab-press__card a:not(.ab-btn) { font-weight: 700; color: var(--ab-blue) !important; }

/* =====================================================================
   Closing CTA (shared)
   ===================================================================== */


/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .ab-hero__bg { animation: none; transform: none; }
    .ab-scroll::after { animation: none; }
    .ab-quote { background-attachment: scroll; }
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
    .ab-stats, .ab-services { grid-template-columns: repeat(2, 1fr); }
    .ab-leaders, .ab-news { grid-template-columns: repeat(2, 1fr); }
    .ab-experts { grid-template-columns: repeat(2, 1fr); }
    .ab-steps { grid-template-columns: repeat(3, 1fr); row-gap: 48px; }
    .ab-steps::before { display: none; }
    .ab-founder, .ab-partner { gap: 56px; }
}

@media (max-width: 991px) {
    .ab-section { padding: 80px 0; }
    .ab-section--flush { padding-top: 0; }
    .ab-hero { min-height: 480px; padding: 90px 0 120px; }
    .ab-founder, .ab-partner, .ab-feature { grid-template-columns: 1fr; }
    .ab-founder__media { max-width: 480px; }
    .ab-founder__card { right: 0; }
    .ab-duo { grid-template-columns: 1fr; }
    .ab-duo__card { min-height: 380px; }
    .ab-pillars { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
    .ab-quote { padding: 110px 0; background-attachment: scroll; }
    .ab-culture { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 200px 200px; }
    .ab-culture figure:first-child { grid-column: span 2; grid-row: auto; }
    .ab-feature__media { min-height: 300px; }
    .ab-feature__body { padding: 36px 32px; }
    .ab-press { grid-template-columns: 1fr; }
    .ab-modal__grid { grid-template-columns: 1fr; overflow-y: auto; }
    .ab-modal__main { overflow: visible; max-height: none; }
}

@media (max-width: 767px) {
    .ab-wrap { padding: 0 16px; }
    .ab-section { padding: 64px 0; }
    .ab-section--flush { padding-top: 0; }
    .ab-head { margin-bottom: 40px; }
    .ab-head p:not(.ab-label) { font-size: 16px; }
    .ab-hero { min-height: 0; padding: 90px 0 100px; }
    .ab-hero__tagline { font-size: 18px; }
    /* phones: the text spans the full width, so the shield peeks in at the right edge, dimmed */
    .ab-hero--purpose .ab-hero__bg { background-position: 78% center; filter: brightness(.55); }
    .ab-hero--purpose { padding: 70px 0 44px; }
    .ab-hero__lead { font-size: 16.5px; }
    .ab-scroll { display: none; }
    .ab-stats { gap: 12px; margin-top: 44px !important; }
    .ab-stat { padding: 16px 14px; column-gap: 10px; }
    .ab-ring { width: 50px; height: 50px; }
    .ab-ring .fa { font-size: 16px; }
    .ab-stat__num { font-size: 24px; }
    .ab-stat p { font-size: 12.5px; margin-top: 12px; padding-top: 10px; }
    .ab-stats--pillars { grid-template-columns: 1fr; }
    .ab-stat__title { font-size: 17px; }
    .ab-stats--pillars .ab-stat p { font-size: 15px; }
    .ab-closing { margin-top: 36px !important; }
    .ab-founder__media { padding: 0 0 24px 24px; }
    .ab-founder__card { bottom: 40px; padding: 12px 16px; }
    .ab-duo__card { min-height: 320px; padding: 26px; }
    .ab-duo__card h3 { font-size: 24px; }
    .ab-pillar { padding: 32px 24px; }
    .ab-steps { grid-template-columns: 1fr 1fr; gap: 36px 16px; }
    .ab-step__icon { width: 76px; height: 76px; font-size: 24px; }
    .ab-step__num { right: calc(50% - 48px); }
    .ab-services, .ab-leaders, .ab-experts, .ab-news { grid-template-columns: 1fr; }
    .ab-leader__photo { aspect-ratio: 4 / 3; }
    .ab-partner__media img { height: 180px; }
    .ab-partner__media img:first-child { height: 378px; }
    .ab-partner__badge { bottom: 16px; padding: 12px 16px; }
    .ab-culture { grid-template-columns: 1fr; grid-template-rows: none; }
    .ab-culture figure { height: 220px; }
    .ab-culture figure:first-child { grid-column: auto; }
    .ab-modal { border-radius: 20px; }
    .ab-modal__side { padding: 30px 20px; }
    .ab-modal__side img { width: 140px; height: 140px; }
    .ab-modal__main { padding: 28px 22px; }
    .ab-press__card { flex-direction: column; padding: 28px 22px; }
    .ab-cta__btns, .ab-quote__cta { width: 100%; }
    .ab-cta__btns .ab-btn, .ab-quote__cta .ab-btn { flex: 1 1 auto; }
}

/* ---------- "Meet the team" grid (Our Team page), Advatix-style:
   round ringed photo, uppercase name, role, icons, bio, Read More,
   with vertical dividers between columns and a rule under each member. ---------- */

.ab-ateam { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 56px; }
.ab-amember {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 30px 24px;
    border-left: 1px solid rgba(21, 65, 110, .35);
}
.ab-amember:nth-child(4n + 1) { border-left: 0; }
.ab-amember::after { /* rule under each member */
    content: "";
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 0;
    height: 1px;
    background: rgba(21, 65, 110, .35);
}
.ab-amember__photo {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    padding: 5px;
    border-radius: 50%;
    background: #15416e;
    box-shadow: 0 14px 30px -14px rgba(21, 65, 110, .55);
    transition: transform .5s var(--ab-ease), box-shadow .4s ease;
}
.ab-amember__photo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid #fff;
    object-fit: cover;
    object-position: center 18%;
    background: #dfe9e2;
}
.ab-amember:hover .ab-amember__photo { transform: translateY(-6px) scale(1.03); box-shadow: 0 22px 40px -16px rgba(21, 65, 110, .65); }
.ab-amember h3 {
    margin-top: 16px;
    font-family: var(--ab-display);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .03em;
    text-align: center;
    text-transform: uppercase;
    color: var(--ab-ink);
}
.ab-amember__role { min-height: 44px; margin-top: 8px !important; font-size: 15.5px; line-height: 1.5; text-align: center; color: var(--ab-body); }
.ab-amember__social { display: flex; justify-content: center; gap: 10px; margin: 10px 0 16px; }
.ab-amember__social a {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    color: var(--ab-ink) !important;
    font-size: 16px;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease;
}
.ab-amember__social a:hover { background: #15416e; color: #fff !important; }
.ab-amember__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ab-body);
}
.ab-amember__more {
    align-self: flex-start;
    margin-top: 14px;
    padding: 9px 16px;
    border: 0;
    border-radius: 4px;
    background: #15416e;
    font-family: var(--ab-display);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
}
.ab-amember__more:hover { background: var(--ab-blue); transform: translateY(-2px); }

@media (max-width: 1100px) {
    .ab-ateam { grid-template-columns: repeat(2, 1fr); }
    .ab-amember:nth-child(4n + 1) { border-left: 1px solid rgba(21, 65, 110, .35); }
    .ab-amember:nth-child(2n + 1) { border-left: 0; }
}
@media (max-width: 600px) {
    .ab-ateam { grid-template-columns: 1fr; row-gap: 40px; }
    .ab-amember, .ab-amember:nth-child(4n + 1) { border-left: 0; padding: 0 8px 30px; }
    .ab-amember::after { left: 8px; right: 8px; }
    .ab-amember__role { min-height: 0; }
}

/* ---------- Accreditation / client logo strip ---------- */

.ab-logos { padding: 72px 0; }
.ab-logos__strip {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ab-line);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}
.ab-logos__label {
    flex: 0 0 190px;
    display: flex;
    align-items: center;
    padding: 0 28px;
    background: var(--ab-soft);
    border-right: 1px solid var(--ab-line);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ab-navy);
}
.ab-logos__strip ul { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); }
.ab-logos__strip li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    padding: 0 20px;
    border-left: 1px solid var(--ab-line);
}
.ab-logos__strip li:first-child { border-left: 0; }
.ab-logos__strip img {
    max-width: 100%;
    max-height: 26px;
    width: auto;
    filter: brightness(0);   /* source PNGs are white; render as one flat dark mark */
    opacity: .4;
    transition: opacity .25s ease;
}
.ab-logos__strip li:hover img { opacity: .85; }

/* ---------- Closing CTA band (shared) ---------- */

.ab-cta {
    position: relative;
    padding: 72px 0;
    margin-bottom: 64px;
    background: var(--ab-navy);
    border-top: 4px solid var(--ab-blue);
    color: #fff;
}
.ab-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.ab-cta__copy { max-width: 680px; }
.ab-cta h2 { font-family: var(--ab-display); font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; line-height: 1.25; color: #fff; }
.ab-cta p { margin-top: 10px; font-size: 16.5px; color: rgba(255, 255, 255, .78); }
.ab-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; flex: 0 0 auto; }
.ab-cta .ab-btn { border-radius: 6px; padding: 14px 28px; }
.ab-cta .ab-btn--blue { box-shadow: none; }
.ab-cta .ab-btn--blue:hover { background: #2277cc; }

@media (max-width: 1100px) {
    .ab-logos__strip ul { grid-template-columns: repeat(3, 1fr); }
    .ab-logos__strip li:nth-child(4) { border-left: 0; }
    .ab-logos__strip li:nth-child(n+4) { border-top: 1px solid var(--ab-line); }
}
@media (max-width: 991px) {
    .ab-cta__inner { flex-direction: column; align-items: flex-start; gap: 28px; }
}
@media (max-width: 767px) {
    .ab-logos { padding: 48px 0; }
    .ab-logos__strip { flex-direction: column; }
    .ab-logos__label { flex: none; padding: 14px 18px; border-right: 0; border-bottom: 1px solid var(--ab-line); }
    .ab-logos__label br { display: none; }
    .ab-logos__strip ul { grid-template-columns: repeat(2, 1fr); }
    .ab-logos__strip li { height: 76px; }
    .ab-logos__strip li:nth-child(4) { border-left: 1px solid var(--ab-line); }
    .ab-logos__strip li:nth-child(odd) { border-left: 0; }
    .ab-logos__strip li:nth-child(n+3) { border-top: 1px solid var(--ab-line); }
    .ab-logos__strip img { max-height: 20px; }
    .ab-cta { padding: 52px 0; margin-bottom: 40px; }
}

/* ---------- Vision / Mission (photo + two stacked statements) and Values row ---------- */

.ab-vmx {
    display: grid;
    grid-template-columns: 5fr 7fr;
    background: #fff;
    border: 1px solid var(--ab-line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--ab-shadow);
}
.ab-vmx__media { position: relative; min-height: 460px; }
.ab-vmx__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-vmx__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 29, 51, 0) 40%, rgba(11, 29, 51, .88) 100%);
}
.ab-vmx__quote {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 30px;
    z-index: 1;
    margin: 0;
    padding-left: 18px;
    border-left: 3px solid var(--ab-green);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.45;
    color: #fff;
}

.ab-vmx__body { display: flex; flex-direction: column; justify-content: center; padding: 48px 52px; }
.ab-vmx__item { display: flex; gap: 22px; }
.ab-vmx__item + .ab-vmx__item { margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--ab-line); }
.ab-vmx__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: #15416e;
    color: #fff;
    font-size: 22px;
}
.ab-vmx__tag { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ab-green); }
.ab-vmx__item h3 { margin-top: 6px; font-size: 21px; font-weight: 700; line-height: 1.4; color: var(--ab-ink); }
.ab-vmx__item h3 + p { margin-top: 8px; font-size: 15.5px; color: var(--ab-body); }
.ab-vmx__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-top: 16px !important; }
/* mission commitments: a bold lead-in plus a sentence each, so one per row */
.ab-vmx__list--detailed { grid-template-columns: 1fr; gap: 12px; }
.ab-vmx__list--detailed strong { color: var(--ab-ink); font-weight: 600; }
.ab-vmx__list li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; color: var(--ab-body); }
.ab-vmx__list li::before {
    content: "\f00c";
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 13px;
    color: #15416e;
}

.ab-valx { margin-top: 56px; }
.ab-valx__title { margin-bottom: 22px !important; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ab-navy); }
.ab-valx__title:has(+ .ab-valx__lead) { margin-bottom: 6px !important; }
.ab-valx__lead { margin: 0 0 22px !important; font-family: var(--ab-display); font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--ab-ink); }
.ab-valx ul { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid #15416e; }
.ab-valx li { padding: 28px 26px 6px; border-left: 1px solid var(--ab-line); }
.ab-valx li:first-child { border-left: 0; padding-left: 0; }
.ab-valx__icon { display: inline-block; font-size: 22px; color: #15416e; }
.ab-valx h4 { margin-top: 14px; font-size: 18px; font-weight: 700; color: var(--ab-ink); }
.ab-valx li p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--ab-muted); }

@media (max-width: 1100px) {
    .ab-vmx__body { padding: 40px 36px; }
    .ab-vmx__list { grid-template-columns: 1fr; }
    .ab-valx ul { grid-template-columns: repeat(2, 1fr); }
    .ab-valx li:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 991px) {
    .ab-vmx { grid-template-columns: 1fr; }
    .ab-vmx__media { min-height: 300px; }
}
@media (max-width: 767px) {
    .ab-vmx__body { padding: 30px 20px; }
    .ab-vmx__item { gap: 16px; }
    .ab-vmx__icon { width: 46px; height: 46px; font-size: 19px; }
    .ab-vmx__item h3 { font-size: 18px; }
    .ab-vmx__quote { left: 20px; right: 20px; font-size: 16px; }
    .ab-valx ul { grid-template-columns: 1fr; }
    .ab-valx li, .ab-valx li:first-child { padding: 22px 0 4px; border-left: 0; }
    .ab-valx li + li { border-top: 1px solid var(--ab-line); }
}

/* ---------- Philosophy: dark band with an animated 5-step timeline ---------- */

.ab-flow-sec {
    position: relative;
    padding: 110px 0 120px;
    background:
        linear-gradient(180deg, rgba(11, 29, 51, .95) 0%, rgba(21, 65, 110, .93) 100%),
        var(--ab-flow-bg) center / cover no-repeat;
    color: #fff;
    overflow: hidden;
}
.ab-head--light .ab-label { color: #5fd697; }
.ab-head--light .ab-h2 { color: #fff; }
.ab-head--light p:not(.ab-label) { color: rgba(255, 255, 255, .72); }

.ab-flow {
    --node: 84px;
    --num-h: 30px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}
/* track + animated fill, running through the centre of the nodes */
.ab-flow::before,
.ab-flow::after {
    content: "";
    position: absolute;
    top: calc(var(--num-h) + var(--node) / 2 - 1px);
    left: 10%;
    right: 10%;
    height: 2px;
}
.ab-flow::before { background: rgba(255, 255, 255, .16); }
.ab-flow::after {
    background: linear-gradient(90deg, #5fd697, var(--ab-green));
    box-shadow: 0 0 12px rgba(95, 214, 151, .6);
    transform-origin: left;
    transition: transform 1.8s var(--ab-ease) .2s;
}
.ab-js .ab-page .ab-flow:not(.is-in)::after { transform: scaleX(0); }

.ab-flow__step { position: relative; z-index: 1; text-align: center; }
.ab-flow__num {
    display: block;
    height: var(--num-h);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #5fd697;
}
.ab-flow__node {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--node);
    height: var(--node);
    margin: 0 auto;
    border-radius: 50%;
    background: #10305a;
    border: 2px solid rgba(255, 255, 255, .25);
    color: #fff;
    font-size: 28px;
    transition: background .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s var(--ab-ease);
}
.ab-flow__node::after { /* outer ring */
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, .22);
}
/* nodes light up one after another as the line reaches them */
.ab-flow.is-in .ab-flow__node,
html:not(.ab-js) .ab-flow__node {
    background: var(--ab-green);
    border-color: var(--ab-green);
    box-shadow: 0 0 0 6px rgba(24, 186, 96, .18), 0 14px 30px -8px rgba(24, 186, 96, .6);
    transition-delay: calc(400ms + var(--n) * 320ms);
}
.ab-flow__step:hover .ab-flow__node { transform: translateY(-6px) scale(1.05); transition-delay: 0s; }

.ab-flow__step h3 { margin-top: 30px; font-size: 21px; font-weight: 700; color: #fff; }
.ab-flow__step p { max-width: 210px; margin: 10px auto 0 !important; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .7); }

@media (max-width: 991px) {
    .ab-flow-sec { padding: 80px 0 90px; }
    /* vertical timeline */
    .ab-flow { grid-template-columns: 1fr; gap: 0; max-width: 520px; margin: 0 auto; }
    .ab-flow::before, .ab-flow::after { top: calc(var(--node) / 2); bottom: calc(var(--node) / 2); left: calc(var(--node) / 2 - 1px); right: auto; width: 2px; height: auto; }
    .ab-flow::after { transform-origin: top; }
    .ab-js .ab-page .ab-flow:not(.is-in)::after { transform: scaleY(0); }
    .ab-flow__step { display: grid; grid-template-columns: var(--node) 1fr; column-gap: 24px; padding: 0 0 36px; text-align: left; }
    .ab-flow__step:last-child { padding-bottom: 0; }
    .ab-flow__node { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
    .ab-flow__num, .ab-flow__step h3, .ab-flow__step p { grid-column: 2; }
    .ab-flow__num { height: auto; }
    .ab-flow__step h3 { margin-top: 4px; }
    .ab-flow__step p { max-width: none; margin: 6px 0 0 !important; }
}
@media (max-width: 767px) {
    .ab-flow { --node: 64px; }
    .ab-flow__node { font-size: 22px; }
    .ab-flow__node::after { inset: -7px; }
    .ab-flow__step { column-gap: 18px; }
}

/* ---------- What we do: photo-led service cards (navy) ---------- */

/* services slider: three cards in view (two on tablets, one on phones), the rest scroll in with the
   arrows or a swipe. Native scroll-snap, no library. Vertical padding leaves room for the hover lift. */
.ab-svc-slider { position: relative; }
.ab-svc { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 4px; padding: 12px 4px 28px; margin: -12px -4px 0; scrollbar-width: none; }
.ab-svc::-webkit-scrollbar { display: none; }
.ab-svc__card { flex: 0 0 calc((100% - 52px) / 3); scroll-snap-align: start; }
.ab-svc-nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 6px; }
.ab-svc-nav button { width: 46px; height: 46px; border: 0; border-radius: 50%; background: #15416e; color: #fff; font-size: 18px; cursor: pointer; transition: background .25s ease, opacity .25s ease; }
.ab-svc-nav button:hover { background: var(--ab-green); }
.ab-svc-nav button:disabled { opacity: .35; cursor: default; background: #15416e; }
.ab-svc-nav__count { min-width: 52px; text-align: center; font-size: 14px; font-weight: 700; color: var(--ab-ink); }
/* desktop: arrows sit on either side of the cards, at their middle; the counter stays below */
@media (min-width: 992px) {
    .ab-svc-nav button { position: absolute; top: calc(50% - 40px); z-index: 3; width: 54px; height: 54px; font-size: 24px; background: #fff; color: #15416e; box-shadow: 0 10px 26px -8px rgba(21, 65, 110, .45); }
    .ab-svc-nav button:hover { background: #15416e; color: #fff; }
    .ab-svc-nav button:disabled { opacity: 0; pointer-events: none; }
    .ab-svc-nav__prev { left: -27px; }
    .ab-svc-nav__next { right: -27px; }
}
.ab-svc__card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ab-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--ab-shadow);
    color: inherit !important;
    text-decoration: none !important;
    transition: transform .4s var(--ab-ease), box-shadow .4s ease, border-color .4s ease;
}
.ab-svc__card::after { /* bottom accent that grows on hover */
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #15416e;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ab-ease);
}
.ab-svc__card:hover { transform: translateY(-8px); box-shadow: 0 26px 50px -22px rgba(21, 65, 110, .45); border-color: transparent; }
.ab-svc__card:hover::after { transform: scaleX(1); }

.ab-svc__media { position: relative; height: 170px; overflow: hidden; background: #15416e; }
.ab-svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ab-ease); }
.ab-svc__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(21, 65, 110, .15) 0%, rgba(11, 29, 51, .75) 100%);
}
.ab-svc__card:hover .ab-svc__media img { transform: scale(1.08); }
.ab-svc__num {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 1;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .85);
}

.ab-svc__icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: -29px 0 0 24px;
    border-radius: 14px;
    background: #15416e;
    border: 3px solid #fff;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 10px 22px -8px rgba(21, 65, 110, .6);
    transition: background .35s ease;
}
.ab-svc__card:hover .ab-svc__icon { background: var(--ab-green); }

.ab-svc__body { flex: 1; display: flex; flex-direction: column; padding: 18px 24px 26px; }
.ab-svc__body h3 { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--ab-ink); }
.ab-svc__body > p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--ab-muted); }
.ab-svc__list { margin: 16px 0 22px !important; padding-top: 14px !important; border-top: 1px solid var(--ab-line); }
.ab-svc__list li { position: relative; padding: 4px 0 4px 22px; font-size: 14px; color: var(--ab-body); }
.ab-svc__list li::before {
    content: "\f00c";
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 5px;
    font-size: 12px;
    color: #15416e;
}
.ab-svc__more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: #15416e; }
.ab-svc__more .fa { transition: transform .3s ease; }
.ab-svc__card:hover .ab-svc__more .fa { transform: translateX(6px); }

@media (max-width: 991px) { .ab-svc__card { flex-basis: calc((100% - 26px) / 2); } }
@media (max-width: 767px)  { .ab-svc { gap: 16px; } .ab-svc__card { flex-basis: 88%; } .ab-svc__media { height: 150px; } }
/* keep the checklists aligned across cards on desktop */
@media (min-width: 1101px) {
    .ab-svc__body h3 { min-height: 25px; }
    .ab-svc__body > p { min-height: 140px; }
}

/* ---------- Our Team / The Cybarwind Difference image cards (enhanced) ---------- */

.ab-duo__card { min-height: 500px; padding: 36px; border-radius: 20px; box-shadow: 0 24px 50px -28px rgba(11, 29, 51, .7); }
.ab-duo__card::before {
    background:
        linear-gradient(180deg, rgba(11, 29, 51, .25) 0%, rgba(11, 29, 51, .1) 30%, rgba(11, 29, 51, .94) 78%),
        linear-gradient(90deg, rgba(21, 65, 110, .35), transparent 60%);
}
.ab-duo__card:hover::before {
    background:
        linear-gradient(180deg, rgba(21, 65, 110, .45) 0%, rgba(11, 29, 51, .3) 30%, rgba(11, 29, 51, .96) 75%),
        linear-gradient(90deg, rgba(21, 65, 110, .45), transparent 60%);
}
.ab-duo__card::after { /* green bar that grows along the bottom on hover */
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    background: var(--ab-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ab-ease);
}
.ab-duo__card:hover::after { transform: scaleX(1); }

.ab-duo__tag {
    position: absolute;
    top: 26px;
    left: 26px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
}
.ab-duo__tag .fa { color: #5fd697; }
.ab-duo__go {
    position: absolute;
    top: 22px;
    right: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    color: #15416e;
    font-size: 17px;
    transform: rotate(-45deg);
    transition: transform .4s var(--ab-ease), background .3s ease, color .3s ease;
}
.ab-duo__card:hover .ab-duo__go { transform: rotate(0); background: var(--ab-green); color: #fff; }

.ab-duo__content { position: relative; width: 100%; }
.ab-duo__card h3 { font-size: 32px; }
.ab-duo__card p { max-width: 520px; }

.ab-duo__facts {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 0;
    margin-top: 22px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.ab-duo__facts li { padding: 0 22px; border-left: 1px solid rgba(255, 255, 255, .18); }
.ab-duo__facts li:first-child { padding-left: 0; border-left: 0; }
.ab-duo__facts strong { display: block; font-size: 22px; font-weight: 700; line-height: 1.1; color: #fff; }
.ab-duo__facts span { display: block; margin-top: 4px; font-size: 12.5px; color: rgba(255, 255, 255, .7); }

.ab-duo__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.ab-duo__chips li {
    padding: 7px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
}

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

@media (max-width: 767px) {
    .ab-duo__card { min-height: 440px; padding: 24px; }
    .ab-duo__tag { top: 18px; left: 18px; }
    .ab-duo__go { top: 14px; right: 14px; width: 42px; height: 42px; }
    .ab-duo__card h3 { font-size: 25px; }
    .ab-duo__facts li { padding: 0 12px; }
    .ab-duo__facts strong { font-size: 17px; }
}

/* services slider: while the arrows glide it (JS easing), snap is off so it can't tug mid-move;
   the cards ease their lift too. */
.ab-svc.is-gliding { scroll-snap-type: none; }
.ab-svc__card { transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease; }

/* =====================================================================
   Our Purpose page typography: Montserrat headings, Inter body text, orange section labels,
   tighter heading tracking. Everything on these pages takes its fonts from --ab-display /
   --ab-font, so redefining them here restyles every section; Teams and Insights are untouched.
   ===================================================================== */
.ab-page--purpose {
    --ab-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --ab-font: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
    --ab-ink: #0b1f3f;
    -webkit-font-smoothing: antialiased;
}
.ab-page--purpose .ab-label { color: #E8792B; font-size: 16px; font-weight: 700; letter-spacing: .2em; }
.ab-page--purpose .ab-label::before, .ab-page--purpose .ab-label--center::after { width: 36px; }
@media (max-width: 767px) { .ab-page--purpose .ab-label { font-size: 14px; } }
.ab-page--purpose .ab-h2 { font-weight: 800; letter-spacing: -.025em; line-height: 1.14; text-wrap: pretty; }
.ab-page--purpose .ab-h2 em { color: #E8792B; }
.ab-page--purpose .ab-head p:not(.ab-label) { font-size: 17px; line-height: 1.75; }
.ab-page--purpose .ab-statement__title { font-weight: 800; letter-spacing: -.02em; }
.ab-page--purpose .ab-statement p:not(.ab-label) { line-height: 1.8; }
.ab-page--purpose h3, .ab-page--purpose h4 { letter-spacing: -.01em; }
.ab-page--purpose .ab-closing { font-weight: 800; letter-spacing: -.015em; }
.ab-page--purpose .ab-svc__body h3 { font-weight: 700; }
.ab-page--purpose .ab-svc__more { letter-spacing: .01em; }
.ab-page--purpose .ab-valx__title { color: #E8792B; letter-spacing: .2em; font-size: 15px; }
.ab-page--purpose .ab-vmx__tag { color: #E8792B; letter-spacing: .16em; font-size: 14px; }
.ab-page--purpose .ab-founder__quote .ab-h2 em { color: #1c68b5; }
.ab-page--purpose blockquote, .ab-page--purpose .ab-founder__message p { font-size: 16.5px; line-height: 1.8; }
.ab-page--purpose .ab-statement p:not(.ab-label) { font-family: var(--ab-font); }   /* body copy in Inter; the title above it stays Montserrat */
.ab-page--purpose .ab-vmx__item h3, .ab-page--purpose .ab-valx h4, .ab-page--purpose .ab-step h3 { font-family: var(--ab-display); font-weight: 700; letter-spacing: -.015em; }
/* headings in the narrow side columns (founder message, partner/feature blocks): smaller, so a short
   phrase like "Protecting Business Value." stays on one line instead of breaking word by word */
.ab-page--purpose .ab-founder__copy .ab-h2 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.18; }
.ab-page--purpose .ab-founder__quote em { display: block; }
/* multi-sentence titles: each sentence is an .ab-line, kept whole, so lines break between sentences
   (a sentence longer than the screen still wraps inside itself on phones) */
.ab-page--purpose .ab-line { display: inline-block; }
.ab-page--purpose .ab-head .ab-h2 { max-width: 900px; margin-left: auto; margin-right: auto; }

/* multi-sentence titles: first sentence in navy, the following ones in brand blue, and a
   short two-tone accent bar under the heading */
.ab-page--purpose .ab-line + .ab-line { color: #1c68b5; }   /* same two-tone as the founder heading */
.ab-page--purpose h2:has(.ab-line) { position: relative; padding-bottom: 22px; }
.ab-page--purpose h2:has(.ab-line)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 72px;
    height: 4px;
    border-radius: 4px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #15416e 0 50%, #E8792B 50% 100%);
}
.ab-page--purpose .ab-closing .ab-line:first-child { color: #15416e; }
.ab-pt-btn { background: #E8792B; color: #fff !important; box-shadow: 0 12px 26px -10px rgba(232, 121, 43, .7); }
.ab-pt-btn:hover { background: #cf6419; }

/* =====================================================================
   Partner banner (Our Purpose page): one full-width banner, text on the background art.
   The art (partner-banner-bg.jpg) carries the shield/rings on the right; the copy sits on the
   left. On narrower screens a darker veil keeps the text readable over the art.
   ===================================================================== */
.ab-pb {
    position: relative;
    padding: 96px 0;
    color: #fff;
    background: #0b1f3f var(--ab-pb-bg) right center / cover no-repeat;
    overflow: hidden;
}
.ab-pb__copy { position: relative; z-index: 1; max-width: 680px; }
.ab-pb .ab-label { color: #ffb37a; }
.ab-pb__title {
    margin: 0;
    font-family: var(--ab-display);
    font-size: clamp(30px, 3.3vw, 48px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
}
.ab-pb__title span { display: block; color: #fff; }
.ab-pb__title span:nth-child(2) { color: #ffb37a; }
.ab-pb__title span:nth-child(3) { color: #8ec5ff; }
.ab-pb__tag {
    display: inline-block;
    margin-top: 22px !important;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    font-family: var(--ab-display);
    font-size: 14px;
    font-weight: 600;
}
.ab-pb__text { margin-top: 18px !important; font-size: 16.5px; line-height: 1.75; color: rgba(255, 255, 255, .82); }
.ab-pb__h {
    margin-top: 26px !important;
    font-family: var(--ab-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #ffb37a;
}
.ab-pb__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 !important; padding: 0; list-style: none; }
.ab-pb__chips li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    transition: background-color .25s ease, border-color .25s ease;
}
.ab-pb__chips li:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); }
.ab-pb__chips li .fa { color: #ffb37a; font-size: 14px; }
.ab-pb__chips--models li { border-color: rgba(232, 121, 43, .55); background: rgba(232, 121, 43, .12); }
.ab-pb__chips--models li .fa { color: #fff; }
.ab-pb__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

@media (max-width: 1199px) {
    .ab-pb::before {             /* veil over the art so the copy stays readable */
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(8, 25, 54, .92) 0%, rgba(8, 25, 54, .75) 60%, rgba(8, 25, 54, .35) 100%);
    }
}
@media (max-width: 767px) {
    .ab-pb { padding: 64px 0; background-position: 78% center; }
    .ab-pb::before { background: rgba(8, 25, 54, .82); }
    .ab-pb__text { font-size: 15.5px; }
    .ab-pb__chips li { font-size: 13px; padding: 7px 11px; }
    .ab-pb__cta .ab-btn { width: 100%; justify-content: center; }
}
/* keep the art clear of the copy: art pinned to the right edge at the banner's height, headline a size
   down so each sentence holds one line */
@media (min-width: 1200px) {
    .ab-pb { background-size: auto 100%; background-position: right -160px center; }
    .ab-pb__copy { max-width: 640px; }
    .ab-pb__title { font-size: clamp(30px, 2.7vw, 40px); }
}
/* banner extras: second summary line, small section headings, CTA note */
.ab-pb__text--sub { margin-top: 10px !important; font-size: 15.5px; color: rgba(255, 255, 255, .72); }
.ab-pb__h + .ab-pb__chips { margin-top: 10px !important; }
.ab-pb .ab-pb__h { margin-top: 22px !important; }
.ab-pb__note { margin-top: 24px !important; max-width: 600px; padding-left: 14px; border-left: 3px solid #E8792B; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .8); }
.ab-pb__note strong { color: #fff; }
.ab-pb__note + .ab-pb__cta { margin-top: 20px; }
/* the art as its own fixed-size layer (no longer stretched to the banner's height, so more copy
   doesn't enlarge it), edges faded into the base gradient */
.ab-pb {
    isolation: isolate;
    background: radial-gradient(circle at 10% 100%, rgba(28, 104, 181, .45), transparent 45%),
                linear-gradient(125deg, #081936 0%, #0f2d55 55%, #15416e 100%) !important;
}
.ab-pb::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    right: -160px;
    width: 1800px;
    height: 720px;
    transform: translateY(-50%);
    background: var(--ab-pb-bg) right center / cover no-repeat;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 70% 50%, #000 55%, transparent 100%);
            mask-image: radial-gradient(ellipse 60% 70% at 70% 50%, #000 55%, transparent 100%);
    pointer-events: none;
}
.ab-pb::before { z-index: 1; }
.ab-pb__copy { z-index: 2; }
@media (max-width: 767px) { .ab-pb::after { right: -900px; } }
/* art: a size smaller and less far right so all three nodes stay in view; fade on all four edges */
.ab-pb::after {
    right: -20px;
    width: 1600px;
    height: 640px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
            mask-composite: intersect;
}
@media (min-width: 1600px) { .ab-pb__copy { max-width: 700px; } }
@media (max-width: 767px) { .ab-pb::after { right: -900px; } }
/* horizontal layout: headline + summary on the left, a glass panel (points, engagements, CTA) on the
   right; the art sits faintly behind the panel */
.ab-pb { padding: 90px 0; }
.ab-pb__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.ab-pb__copy { max-width: none !important; }
.ab-pb__panel {
    padding: 30px 30px 32px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 22px;
    background: rgba(8, 25, 54, .55);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.ab-pb__panel > .ab-pb__h:first-child { margin-top: 0 !important; }
.ab-pb__panel .ab-pb__cta { margin-top: 20px; }
.ab-pb::after { opacity: .55; }
@media (min-width: 1200px) { .ab-pb__title { font-size: clamp(30px, 2.6vw, 42px); } }
@media (max-width: 991px) {
    .ab-pb__grid { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 767px) {
    .ab-pb__panel { padding: 22px 18px; border-radius: 16px; }
}
/* with the panel on the right, the art only peeked out in fragments: background is gradient + dots only */
.ab-pb::after { display: none; }
.ab-pb { background:
    radial-gradient(circle at 92% 8%, rgba(232, 121, 43, .22), transparent 32%),
    radial-gradient(circle at 8% 100%, rgba(28, 104, 181, .45), transparent 45%),
    radial-gradient(rgba(255, 255, 255, .09) 1.2px, transparent 1.6px) 0 0 / 26px 26px,
    linear-gradient(125deg, #081936 0%, #0f2d55 55%, #15416e 100%) !important; }
@media (min-width: 992px) { .ab-pb__title { font-size: clamp(28px, 2.5vw, 36px) !important; } }
.ab-pb__panel .ab-pb__cta .ab-btn { flex: 1 1 auto; justify-content: center; }
/* banner v3: copy | shield graphic, with a horizontal strip of points + engagements underneath */
.ab-pb__grid { grid-template-columns: 1.1fr .9fr; align-items: center; }
.ab-pb__art svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.ab-pb__spin { transform-origin: 280px 260px; animation: ab-pb-spin 60s linear infinite; }
@keyframes ab-pb-spin { to { transform: rotate(360deg); } }
.ab-pb__cta { margin-top: 26px; }
.ab-pb__strip {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px;
    margin-top: 40px;
    padding: 24px 28px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .05);
}
.ab-pb__strip .ab-pb__h { margin-top: 0 !important; }
@media (max-width: 991px) {
    .ab-pb__grid { grid-template-columns: 1fr; }
    .ab-pb__art svg { max-width: 380px; }
    .ab-pb__strip { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 767px) { .ab-pb__art svg { max-width: 300px; } .ab-pb__strip { padding: 18px 16px; } }
@media (prefers-reduced-motion: reduce) { .ab-pb__spin { animation: none; } }

/* =====================================================================
   Our Purpose › Who we are (2026-11-04): left-aligned. The label and title run full width (the first
   sentence on its own line, so words never stack one per line); the copy sits below in two columns, lead left.
   An accent rule runs beside the copy.
   The pillar cards get a tone-coloured top edge and the closing line becomes a left-aligned band.
   Phones/tablets (≤991px) stack the two columns.
   ===================================================================== */
.ab-page--purpose .ab-statement--split { max-width: none; text-align: left; }
/* title full width on top: the first sentence on one line, the other two together on the next */
.ab-page--purpose .ab-statement--split .ab-label { justify-content: flex-start; margin-bottom: 16px; }
.ab-page--purpose .ab-statement--split .ab-statement__title {
    margin: 0 0 40px !important;
    font-size: clamp(26px, 2.3vw, 34px);
    line-height: 1.25;
    text-wrap: initial;
}
.ab-page--purpose .ab-statement--split .ab-statement__title .ab-line:first-child { display: block; }
.ab-page--purpose .ab-statement--split .ab-statement__title .ab-line:last-child { color: #E8792B; }
.ab-page--purpose .ab-statement--split .ab-statement__title::after { left: 0; transform: none; }

/* copy below in two columns: the lead on the left, the detail on the right */
.ab-page--purpose .ab-statement__body {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 56px;
    align-items: start;
    padding: 4px 0 4px 30px;
}
.ab-page--purpose .ab-statement__lead { grid-row: span 2; }
.ab-page--purpose .ab-statement__more { grid-column: 2; }
.ab-page--purpose .ab-statement__body::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #E8792B 0 22%, #d5e1ef 22% 100%);
}
.ab-page--purpose .ab-statement p.ab-statement__lead {
    margin: 0;
    font-family: var(--ab-display);
    font-size: clamp(19px, 1.55vw, 23px);
    line-height: 1.55;
    font-weight: 600;
    color: #15416e;
}
.ab-page--purpose .ab-statement--split p.ab-statement__more { margin-top: 18px; font-size: 17px; line-height: 1.8; }
.ab-page--purpose .ab-statement--split p.ab-statement__lead + p.ab-statement__more { margin-top: 0; }

.ab-page--purpose .ab-stats--pillars .ab-stat { border-top: 3px solid var(--tone); }
.ab-page--purpose .ab-closing {
    margin: 56px 0 0 !important;
    padding: 22px 28px;
    text-align: left;
    border-left: 4px solid #E8792B;
    border-radius: 0 12px 12px 0;
    background: #eef2f7;   /* one even grey band to the end (no fade) */
}

@media (max-width: 991px) {
    .ab-page--purpose .ab-statement__body { grid-template-columns: 1fr; }
    .ab-page--purpose .ab-statement__more { grid-column: auto; }
    .ab-page--purpose .ab-statement--split p.ab-statement__lead + p.ab-statement__more { margin-top: 14px; }
    .ab-page--purpose .ab-statement--split .ab-statement__title { margin-bottom: 26px !important; }
    .ab-page--purpose .ab-statement--split .ab-label { margin-bottom: 12px; }
    .ab-page--purpose .ab-statement--split .ab-statement__title { font-size: clamp(24px, 6vw, 30px); }
    .ab-page--purpose .ab-statement__body { padding-left: 20px; }
    .ab-page--purpose .ab-statement p.ab-statement__lead { font-size: 18px; }
    .ab-page--purpose .ab-statement--split p.ab-statement__more { margin-top: 14px; font-size: 16px; line-height: 1.75; }
    .ab-page--purpose .ab-closing { margin-top: 36px !important; padding: 16px 18px; }
}

/* Founder photo (Arvind Mittal, 2026-11-04): a square studio portrait on white. Framed from the top so the
   name card at the bottom sits over the suit, not the face; a soft tint behind the white keeps the edge. */
.ab-founder__photo--arvind { height: auto; object-position: center 8%; background: #eef3f9; }

/* Founder name card (2026-11-04): lower, over the bottom edge of the photo, taller, with a navy→orange
   accent bar on the left and the company name under a hairline. */
.ab-page--purpose .ab-founder__card {
    bottom: 30px;
    right: -64px;
    min-width: 260px;
    padding: 10px 22px 9px 24px;
    border-radius: 18px;
    border: 1px solid #e3eaf3;
    overflow: hidden;
    box-shadow: 0 24px 50px -18px rgba(11, 31, 63, .35);
}
.ab-page--purpose .ab-founder__card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #15416e, #E8792B);
}
.ab-page--purpose .ab-founder__card strong { font-size: 19px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: #0b1f3f; }
.ab-page--purpose .ab-founder__card span { display: block; margin-top: 1px; font-size: 13.5px; line-height: 1.4; color: #E8792B; }
.ab-page--purpose .ab-founder__card em {
    display: block;
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid #e6ebf2;
    line-height: 1.3;
    font-style: normal;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
@media (min-width: 992px) and (max-width: 1279px) { .ab-page--purpose .ab-founder__card { right: -30px; } }   /* keep clear of the quote rule */
@media (max-width: 991px) { .ab-page--purpose .ab-founder__card { right: -12px; } }
@media (max-width: 767px) {
    .ab-page--purpose .ab-founder__card { bottom: 18px; right: -8px; min-width: 0; padding: 8px 14px 7px 16px; }
    .ab-page--purpose .ab-founder__card strong { font-size: 18px; }
    .ab-page--purpose .ab-founder__card span { margin-top: 4px; font-size: 13px; }
    .ab-page--purpose .ab-founder__card em { margin-top: 6px; padding-top: 5px; font-size: 11px; }
}

/* Pillar cards (2026-11-04): white cards on a white section looked flat, so each card takes a soft wash of
   its own tone (fading to white), a tone-tinted border and divider, and the ring sits on a white disc. */
.ab-page--purpose .ab-stats--pillars .ab-stat {
    background: linear-gradient(180deg, var(--tone-soft) 0%, #fff 85%);
    border-color: color-mix(in srgb, var(--tone) 22%, #fff);
    border-top-color: var(--tone);
    box-shadow: 0 14px 34px -18px var(--tone-glow);
}
.ab-page--purpose .ab-stats--pillars .ab-stat:hover { box-shadow: 0 22px 44px -18px var(--tone-glow); }
.ab-page--purpose .ab-stats--pillars .ab-ring { border-radius: 50%; background: #fff; box-shadow: 0 6px 16px -8px var(--tone-glow); }
.ab-page--purpose .ab-stats--pillars .ab-stat p { border-top-color: color-mix(in srgb, var(--tone) 25%, #fff); }

/* Founder sign-off (2026-11-04): boxed like the name card on the photo — white card, hairline border,
   soft shadow; the short green rule becomes a vertical navy→orange bar. */
.ab-page--purpose .ab-sign {
    margin-top: 30px;
    padding: 16px 24px 16px 20px;
    gap: 16px;
    background: #fff;
    border: 1px solid #e3eaf3;
    border-radius: 16px;
    box-shadow: 0 16px 36px -20px rgba(11, 31, 63, .3);
}
.ab-page--purpose .ab-sign__line { flex: 0 0 auto; align-self: stretch; width: 4px; height: auto; border-radius: 4px; background: linear-gradient(180deg, #15416e, #E8792B); }
.ab-page--purpose .ab-sign strong { font-size: 19px; line-height: 1.25; color: #0b1f3f; }
.ab-page--purpose .ab-sign span { margin-top: 3px; font-size: 14px; line-height: 1.45; }
@media (max-width: 767px) {
    .ab-page--purpose .ab-sign { padding: 12px 16px 12px 14px; gap: 12px; }
    .ab-page--purpose .ab-sign strong { font-size: 17px; }
    .ab-page--purpose .ab-sign span { font-size: 13px; }
}

/* Founder photo motion (2026-11-04). On scroll-in (.is-in from the reveal script): the gradient block slides
   in from the bottom-left, the photo wipes up from the bottom while settling from a slight zoom, then the
   name card pops in. After that the gradient drifts slowly and the card floats gently. On hover (desktop)
   the photo lifts and the block and card spread apart. Entrances are keyframes and hover is a transform
   transition, so leaving hover never waits on an entrance delay. Without JS or with reduced motion: static. */
.ab-page--purpose .ab-founder__media::before { background-size: 220% 220%; transition: transform .7s var(--ab-ease); }
.ab-page--purpose .ab-founder__photo { transition: transform .6s var(--ab-ease), box-shadow .6s ease; }
.ab-page--purpose .ab-founder__card { transition: transform .6s var(--ab-ease); }

.ab-js .ab-page--purpose .ab-founder__media:not(.is-in)::before,
.ab-js .ab-page--purpose .ab-founder__media:not(.is-in) .ab-founder__card { opacity: 0; }
.ab-js .ab-page--purpose .ab-founder__media:not(.is-in) .ab-founder__photo { clip-path: inset(100% 0 0 0 round 24px); }
.ab-js .ab-page--purpose .ab-founder__media.is-in::before { animation: ab-fd-block .9s var(--ab-ease) .1s both, ab-fd-drift 9s ease-in-out 1s infinite alternate; }
.ab-js .ab-page--purpose .ab-founder__media.is-in .ab-founder__photo { animation: ab-fd-photo 1.3s var(--ab-ease) .25s backwards; }   /* backwards: once done the clip-path is gone, so it stops clipping the shadow */
.ab-js .ab-page--purpose .ab-founder__media.is-in .ab-founder__card { animation: ab-fd-card .8s cubic-bezier(.34, 1.45, .64, 1) 1s both, ab-fd-float 5s ease-in-out 2.2s infinite; }

@media (hover: hover) and (min-width: 992px) {
    .ab-page--purpose .ab-founder__media:hover::before { transform: translate(-12px, 12px); }
    .ab-page--purpose .ab-founder__media:hover .ab-founder__photo { transform: translate(6px, -8px); box-shadow: 0 34px 60px -24px rgba(11, 31, 63, .45); }
    .ab-page--purpose .ab-founder__media:hover .ab-founder__card { transform: translateX(10px); }
}
@keyframes ab-fd-block { from { opacity: 0; translate: -28px 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes ab-fd-drift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@keyframes ab-fd-photo { from { clip-path: inset(100% 0 0 0 round 24px); scale: 1.08; } to { clip-path: inset(0 0 0 0 round 24px); scale: 1; } }
@keyframes ab-fd-card { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes ab-fd-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) {
    .ab-js .ab-page--purpose .ab-founder__media.is-in::before,
    .ab-js .ab-page--purpose .ab-founder__media.is-in .ab-founder__photo,
    .ab-js .ab-page--purpose .ab-founder__media.is-in .ab-founder__card { animation: none; }
    .ab-page--purpose .ab-founder__media::before, .ab-page--purpose .ab-founder__photo, .ab-page--purpose .ab-founder__card { transition: none; }
}

/* Founder section background (2026-11-04): a shade deeper than the shared --ab-soft so the white photo,
   name card and sign-off box stand out. */
.ab-page--purpose .ab-section--founder { background: #e5ecf5; }

/* The founder portrait has a white backdrop, so on the light section its top edge disappeared: a crisp
   blue-grey ring plus a deeper shadow outline the card (the hover state keeps the ring). */
.ab-page--purpose .ab-founder__photo--arvind { box-shadow: 0 0 0 1.5px #b9c9de, 0 26px 50px -22px rgba(11, 31, 63, .45); }
@media (hover: hover) and (min-width: 992px) {
    .ab-page--purpose .ab-founder__media:hover .ab-founder__photo--arvind { box-shadow: 0 0 0 1.5px #a9bdd6, 0 36px 62px -24px rgba(11, 31, 63, .5); }
}

/* =====================================================================
   Our Purpose › Vision / Mission redesign (2026-11-04), markup .ab-vm2 in purpose.blade.php.
   Row 1: the photo beside a navy Vision card (big statement in white, a faint eye watermark).
   Row 2: a full-width white Mission card: statement on the left, the four commitments as numbered
   tiles (2x2) on the right. Values below become four cards with tone-coloured icon tiles.
   ===================================================================== */
.ab-vm2 { display: grid; gap: 26px; }
.ab-vm2__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 26px; }
.ab-vm2__media { position: relative; margin: 0; min-height: 420px; overflow: hidden; border-radius: 22px; box-shadow: 0 24px 50px -26px rgba(11, 31, 63, .45); }
.ab-vm2__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ab-ease); }
.ab-vm2__media:hover img { transform: scale(1.05); }
.ab-vm2__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 26, 51, 0) 45%, rgba(8, 26, 51, .9) 100%); }
.ab-vm2__quote {
    position: absolute; left: 28px; right: 28px; bottom: 26px; z-index: 1; margin: 0;
    padding-left: 16px; border-left: 3px solid #E8792B;
    font-family: var(--ab-display); font-size: 19px; font-weight: 600; line-height: 1.45; color: #fff;
}

.ab-vm2__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 14px; font-size: 22px;
}
.ab-vm2__tag { margin: 18px 0 0 !important; font-size: 13.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #E8792B; }
.ab-vm2 h3 { margin: 10px 0 0; font-family: var(--ab-display); font-weight: 700; letter-spacing: -.015em; }

.ab-vm2__vision {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 48px 52px; border-radius: 22px; color: #fff;
    background: radial-gradient(circle at 100% 0%, rgba(63, 162, 245, .28), transparent 55%), linear-gradient(135deg, #0b2a4f 0%, #15416e 60%, #1b5690 100%);
    box-shadow: 0 24px 50px -26px rgba(11, 31, 63, .55);
}
.ab-vm2__vision::after {   /* faint eye watermark */
    content: "\f06e"; font-family: FontAwesome; position: absolute; right: -14px; bottom: -40px;
    font-size: 220px; line-height: 1; color: rgba(255, 255, 255, .05); pointer-events: none;
}
.ab-vm2__vision .ab-vm2__icon { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #ffb37a; }
.ab-vm2__vision h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.35; color: #fff; }
.ab-vm2__vision h3 + p { margin-top: 16px; max-width: 620px; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .8); }

.ab-vm2__mission {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; align-items: center;
    padding: 44px 48px; border-radius: 22px; background: #fff; border: 1px solid #e3eaf3;
    box-shadow: 0 20px 44px -28px rgba(11, 31, 63, .35);
}
.ab-vm2__mission .ab-vm2__icon { background: #15416e; color: #fff; }
.ab-vm2__mission h3 { font-size: clamp(20px, 1.6vw, 23px); line-height: 1.4; color: #0b1f3f; }
.ab-vm2__mission h3 + p { margin-top: 12px; font-size: 15.5px; line-height: 1.7; color: var(--ab-body); }
.ab-vm2__commit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ab-vm2__commit li {
    position: relative; padding: 20px 22px 18px; border-radius: 16px;
    background: #f3f7fc; border: 1px solid #e3eaf3;
    transition: transform .35s var(--ab-ease), box-shadow .35s ease, background .35s ease;
}
.ab-vm2__commit li:hover { transform: translateY(-4px); background: #fff; box-shadow: 0 18px 34px -20px rgba(11, 31, 63, .35); }
.ab-vm2__commit span { display: block; font-family: var(--ab-display); font-size: 24px; font-weight: 800; line-height: 1; color: #E8792B; }
.ab-vm2__commit strong { display: block; margin-top: 10px; font-family: var(--ab-display); font-size: 16px; line-height: 1.35; color: #0b1f3f; }
.ab-vm2__commit p { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--ab-muted); }

/* Values: four cards */
.ab-page--purpose .ab-valx { margin-top: 64px; }
.ab-page--purpose .ab-valx ul { gap: 20px; border-top: 0; }
.ab-page--purpose .ab-valx li,
.ab-page--purpose .ab-valx li:first-child {
    padding: 26px 24px 24px; border: 1px solid #e3eaf3; border-top: 3px solid var(--v); border-radius: 18px; background: #fff;
    box-shadow: 0 16px 34px -24px rgba(11, 31, 63, .35);
    transition: transform .35s var(--ab-ease), box-shadow .35s ease;
}
.ab-page--purpose .ab-valx li:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -24px rgba(11, 31, 63, .4); }
.ab-page--purpose .ab-valx li:nth-child(1) { --v: #1c68b5; --v-soft: #e8f1fb; }
.ab-page--purpose .ab-valx li:nth-child(2) { --v: #E8792B; --v-soft: #fef0e6; }
.ab-page--purpose .ab-valx li:nth-child(3) { --v: #14a456; --v-soft: #e6f7ee; }
.ab-page--purpose .ab-valx li:nth-child(4) { --v: #7559e6; --v-soft: #f0ecfd; }
.ab-page--purpose .ab-valx__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 50px; height: 50px; border-radius: 14px; font-size: 21px; background: var(--v-soft); color: var(--v);
}
.ab-page--purpose .ab-valx h4 { margin-top: 16px; }

@media (max-width: 1199px) {
    .ab-vm2__mission { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 991px) {
    .ab-vm2__top { grid-template-columns: 1fr; }
    .ab-vm2__media { min-height: 300px; }
    .ab-vm2__vision { padding: 34px 30px; }
    .ab-vm2__mission { padding: 34px 30px; }
    .ab-page--purpose .ab-valx ul { grid-template-columns: repeat(2, 1fr); }
    .ab-page--purpose .ab-valx li:nth-child(3) { padding-left: 24px; border-left: 1px solid #e3eaf3; }
}
@media (max-width: 767px) {
    .ab-vm2 { gap: 18px; }
    .ab-vm2__top { gap: 18px; }
    .ab-vm2__media { min-height: 240px; border-radius: 18px; }
    .ab-vm2__quote { left: 18px; right: 18px; bottom: 18px; font-size: 16px; }
    .ab-vm2__vision, .ab-vm2__mission { padding: 26px 20px; border-radius: 18px; }
    .ab-vm2__vision::after { font-size: 150px; }
    .ab-vm2__icon { width: 46px; height: 46px; font-size: 19px; }
    .ab-vm2__tag { margin-top: 14px !important; font-size: 12.5px; }
    .ab-vm2__vision h3 { font-size: 20px; }
    .ab-vm2__vision h3 + p { font-size: 15px; }
    .ab-vm2__mission h3 { font-size: 18px; }
    .ab-vm2__commit { grid-template-columns: 1fr; gap: 12px; }
    .ab-vm2__commit li { padding: 16px 18px; }
    .ab-page--purpose .ab-valx { margin-top: 44px; }
    .ab-page--purpose .ab-valx ul { grid-template-columns: 1fr; gap: 14px; }
    .ab-page--purpose .ab-valx li, .ab-page--purpose .ab-valx li:first-child,
    .ab-page--purpose .ab-valx li:nth-child(3), .ab-page--purpose .ab-valx li + li { padding: 22px 20px 20px; border: 1px solid #e3eaf3; border-top: 3px solid var(--v); }
}
@media (prefers-reduced-motion: reduce) {
    .ab-vm2__media img, .ab-vm2__commit li, .ab-page--purpose .ab-valx li { transition: none; }
}

/* Who we are copy (2026-11-04 rewrite): the lead is now a full paragraph, so the two copy columns are equal
   and the lead is set a size smaller and lighter, keeping both columns a similar height. */
@media (min-width: 992px) {
    .ab-page--purpose .ab-statement__body { grid-template-columns: 1fr 1fr; }
    .ab-page--purpose .ab-statement p.ab-statement__lead { font-size: clamp(17px, 1.3vw, 19px); font-weight: 500; line-height: 1.7; }
    .ab-page--purpose .ab-statement--split p.ab-statement__more { font-size: 17px; line-height: 1.85; }
}

/* Values cards (2026-11-04): white on the light section read as one surface, so — like the pillar cards —
   each takes a soft wash of its own colour, a tinted border and a coloured shadow; the icon sits on white. */
.ab-page--purpose .ab-valx li,
.ab-page--purpose .ab-valx li:first-child {
    background: linear-gradient(180deg, var(--v-soft) 0%, #fff 80%);
    border-color: color-mix(in srgb, var(--v) 25%, #fff);
    border-top-color: var(--v);
    box-shadow: 0 16px 34px -20px color-mix(in srgb, var(--v) 45%, transparent);
}
.ab-page--purpose .ab-valx li:hover { box-shadow: 0 26px 44px -20px color-mix(in srgb, var(--v) 55%, transparent); }
.ab-page--purpose .ab-valx__icon { background: #fff; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--v) 60%, transparent); }
@media (max-width: 767px) {
    .ab-page--purpose .ab-valx li, .ab-page--purpose .ab-valx li:first-child,
    .ab-page--purpose .ab-valx li:nth-child(3), .ab-page--purpose .ab-valx li + li { border-color: color-mix(in srgb, var(--v) 25%, #fff); border-top-color: var(--v); }
}

/* Vision / Mission / Values section (2026-11-04): the light --ab-soft background matched the white Mission
   card and the Values cards, so the section takes the deeper blue-grey of the founder section. */
.ab-page--purpose #ab-vision { background: #e5ecf5; }

/* =====================================================================
   Our Purpose › Philosophy redesign (2026-11-04), markup .ab-phil in purpose.blade.php.
   Replaces the tall full-bleed photo band (.ab-flow-sec) with a compact navy band: heading on the left,
   intro on the right, then the five steps (Assess → Improve) as glass cards in one row, each with its
   tone-coloured icon and a large faint step number. Phones/tablets stack the head and list the steps.
   ===================================================================== */
.ab-phil {
    position: relative; overflow: hidden; padding: 84px 0 88px; color: #fff;
    background:
        radial-gradient(circle at 85% 10%, rgba(63, 162, 245, .22), transparent 45%),
        radial-gradient(circle at 5% 100%, rgba(232, 121, 43, .14), transparent 40%),
        linear-gradient(135deg, #071a33 0%, #0d2c52 55%, #15416e 100%);
}
.ab-phil::before {   /* faint dot grid */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px) 0 0 / 24px 24px;
}
.ab-phil .ab-wrap { position: relative; }
.ab-phil__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: end; }
.ab-phil .ab-label { justify-content: flex-start; margin-bottom: 14px; color: #E8792B; }
.ab-phil__title {
    margin: 0; font-family: var(--ab-display); font-size: clamp(28px, 2.6vw, 38px); font-weight: 800;
    line-height: 1.2; letter-spacing: -.02em; color: #fff;
}
.ab-phil__title span { display: block; }
.ab-phil__title span + span { color: #ffa24c; }
.ab-phil__lead { margin: 0; padding-left: 22px; border-left: 3px solid rgba(255, 255, 255, .2); font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .78); }

.ab-phil__steps {
    position: relative; list-style: none; margin: 52px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px;
}
.ab-phil__step {
    position: relative; padding: 22px 20px 22px; border-radius: 18px;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(4px);
    transition: transform .35s var(--ab-ease), background .35s ease, border-color .35s ease;
}
.ab-phil__step::before {   /* tone strip on top */
    content: ""; position: absolute; left: 20px; right: 20px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--tone-2);
}
.ab-phil__step:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); }
.ab-phil__top { display: flex; align-items: center; justify-content: space-between; }
.ab-phil__icon {
    display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px;
    font-size: 19px; color: #fff; background: linear-gradient(135deg, var(--tone), var(--tone-2));
    box-shadow: 0 10px 22px -10px var(--tone-glow);
}
.ab-phil__num { font-family: var(--ab-display); font-size: 34px; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, .12); }
.ab-phil__step h3 { margin: 16px 0 0; font-family: var(--ab-display); font-size: 19px; font-weight: 700; color: #fff; }
.ab-phil__step p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .72); }

@media (max-width: 1199px) {
    .ab-phil__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .ab-phil { padding: 60px 0 64px; }
    .ab-phil__head { grid-template-columns: 1fr; gap: 18px; }
    .ab-phil__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px; }
}
@media (max-width: 767px) {
    .ab-phil { padding: 48px 0 52px; }
    .ab-phil__title { font-size: 25px; }
    .ab-phil__lead { padding-left: 16px; font-size: 15px; }
    .ab-phil__steps { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
    .ab-phil__step { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 16px; }
    .ab-phil__step::before { left: 0; right: auto; top: 16px; bottom: 16px; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
    .ab-phil__top { grid-row: span 2; align-self: start; }
    .ab-phil__num { display: none; }
    .ab-phil__icon { width: 42px; height: 42px; font-size: 17px; }
    .ab-phil__step h3 { margin: 0; font-size: 17px; }
    .ab-phil__step p { margin-top: 4px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .ab-phil__step { transition: none; } }

/* =====================================================================
   Our Purpose › What we do redesign (2026-11-04), markup .ab-wwd in purpose.blade.php.
   Replaces the 3-up card slider: the standard centred title (.ab-head), then a service tab list beside one large
   panel (photo with a count badge, summary, two-column checklist, CTA). Panels share one grid cell and
   cross-fade, so the block keeps a steady height. Phones/tablets: the tabs become a scrolling chip strip
   above the panel. Without JS (.is-js absent) every panel is shown, stacked.
   ===================================================================== */
.ab-page--purpose .ab-wwd { background: #fff; }
.ab-wwd__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: end; }
.ab-wwd .ab-label { justify-content: flex-start; margin-bottom: 14px; }
.ab-wwd__title { margin: 0; font-family: var(--ab-display); font-size: clamp(28px, 2.6vw, 38px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: #0b1f3f; }
.ab-wwd__title span { display: block; }
.ab-wwd__title span + span { color: #1c68b5; }
.ab-wwd__lead { margin: 0; padding-left: 22px; border-left: 3px solid #E8792B; font-size: 16px; line-height: 1.75; color: var(--ab-body); }

.ab-wwd__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 28px; margin-top: 48px; align-items: start; }

/* tab list */
.ab-wwd__tabs { display: flex; flex-direction: column; gap: 10px; }
.ab-wwd__tab {
    display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; text-align: left; cursor: pointer;
    font: inherit; color: #0b1f3f; background: #f3f7fc; border: 1px solid #e3eaf3; border-radius: 14px;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s var(--ab-ease);
}
.ab-wwd__tab:hover { background: #fff; border-color: #c9d7e8; transform: translateX(4px); }
.ab-wwd__tab:focus-visible { outline: 2px solid #E8792B; outline-offset: 2px; }
.ab-wwd__tab-icon {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px;
    font-size: 17px; color: #15416e; background: #fff; border: 1px solid #dbe5f1; transition: background .3s ease, color .3s ease;
}
.ab-wwd__tab-text { flex: 1 1 auto; font-family: var(--ab-display); font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.ab-wwd__tab-text small { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: #E8792B; }
.ab-wwd__tab-arrow { flex: 0 0 auto; font-size: 18px; color: #9fb2c9; transition: transform .3s ease, color .3s ease; }
.ab-wwd__tab.is-active {
    color: #fff; border-color: transparent; transform: none;
    background: linear-gradient(135deg, #0d2c52, #15416e 60%, #1b5690);
    box-shadow: 0 16px 32px -18px rgba(11, 31, 63, .6);
}
.ab-wwd__tab.is-active .ab-wwd__tab-icon { color: #fff; background: #E8792B; border-color: #E8792B; }
.ab-wwd__tab.is-active .ab-wwd__tab-text small { color: #ffb37a; }
.ab-wwd__tab.is-active .ab-wwd__tab-arrow { color: #fff; transform: translateX(3px); }

/* panels */
.ab-wwd__panels { display: grid; }
.ab-wwd__panel {
    grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    background: #fff; border: 1px solid #e3eaf3; border-radius: 22px; overflow: hidden;
    box-shadow: 0 24px 50px -30px rgba(11, 31, 63, .45);
}
.ab-wwd__grid:not(.is-js) .ab-wwd__panel + .ab-wwd__panel { grid-area: auto; margin-top: 20px; }
.ab-wwd__grid.is-js .ab-wwd__panel { opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .45s ease, transform .55s var(--ab-ease), visibility 0s linear .45s; }
.ab-wwd__grid.is-js .ab-wwd__panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .55s var(--ab-ease), visibility 0s; }
.ab-wwd__media { position: relative; min-height: 100%; }
.ab-wwd__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-wwd__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 26, 51, 0) 50%, rgba(8, 26, 51, .55)); }
.ab-wwd__badge {
    position: absolute; left: 18px; bottom: 18px; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: #fff;
    background: rgba(8, 26, 51, .55); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(6px);
}
.ab-wwd__badge .fa { color: #ffb37a; }
.ab-wwd__body { padding: 34px 36px 32px; }
.ab-wwd__body h3 { margin: 0; font-family: var(--ab-display); font-size: 24px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; color: #0b1f3f; }
.ab-wwd__body > p { margin-top: 12px; font-size: 15.5px; line-height: 1.75; color: var(--ab-body); }
.ab-wwd__list { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px dashed #dbe5f1; display: grid; gap: 10px; }
.ab-wwd__list li { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.5; color: #24364f; }
.ab-wwd__list li::before {
    content: "\f00c"; font-family: FontAwesome; position: absolute; left: 0; top: 1px;
    display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%;
    font-size: 10px; color: #fff; background: #14a456;
}
.ab-wwd__cta {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 12px 22px; border-radius: 999px;
    font-size: 14.5px; font-weight: 700; color: #fff !important; background: #E8792B; text-decoration: none;
    box-shadow: 0 12px 24px -12px rgba(232, 121, 43, .8); transition: background .3s ease, gap .3s ease;
}
.ab-wwd__cta:hover { background: #cf6419; gap: 14px; }

@media (max-width: 1199px) {
    .ab-wwd__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
    .ab-wwd__panel { grid-template-columns: 1fr; }
    .ab-wwd__media { min-height: 220px; }
}
@media (max-width: 991px) {
    .ab-wwd__head { grid-template-columns: 1fr; gap: 18px; }
    .ab-wwd__grid { grid-template-columns: 1fr; gap: 18px; margin-top: 34px; }
    .ab-wwd__tabs { flex-direction: row; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
    .ab-wwd__tabs::-webkit-scrollbar { display: none; }
    .ab-wwd__tab { flex: 0 0 auto; width: auto; padding: 9px 14px 9px 9px; gap: 10px; border-radius: 999px; }
    .ab-wwd__tab:hover { transform: none; }
    .ab-wwd__tab-icon { width: 32px; height: 32px; border-radius: 50%; font-size: 14px; }
    .ab-wwd__tab-text { font-size: 13.5px; white-space: nowrap; }
    .ab-wwd__tab-text small, .ab-wwd__tab-arrow { display: none; }
}
@media (max-width: 767px) {
    .ab-wwd__title { font-size: 25px; }
    .ab-wwd__lead { padding-left: 16px; font-size: 15px; }
    .ab-wwd__media { min-height: 190px; }
    .ab-wwd__body { padding: 22px 20px 24px; }
    .ab-wwd__body h3 { font-size: 20px; }
    .ab-wwd__body > p { font-size: 14.5px; }
    .ab-wwd__list li { font-size: 14px; }
    .ab-wwd__cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .ab-wwd__grid.is-js .ab-wwd__panel, .ab-wwd__tab, .ab-wwd__cta { transition: none; }
}

/* =====================================================================
   Our Purpose › Team / Difference cards (2026-11-04), markup .ab-duo2 in purpose.blade.php.
   The two photo cards used weak stock images; now there are no photos. "Our Team" is a navy card with a
   team-network illustration and stat tiles; "The Codec Networks Difference" is a white card with a
   shield-and-capabilities illustration and coloured chips. On hover a card lifts, its art floats up and
   the arrow turns orange.
   ===================================================================== */
.ab-duo2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ab-duo2__card {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    padding: 30px 34px 32px; border-radius: 24px; text-decoration: none !important;
    transition: transform .4s var(--ab-ease), box-shadow .4s ease;
}
.ab-duo2__card:hover { transform: translateY(-6px); }
.ab-duo2__card--team {
    color: #fff;
    background: radial-gradient(circle at 80% 0%, rgba(63, 162, 245, .3), transparent 50%), linear-gradient(140deg, #071a33 0%, #0d2c52 55%, #15416e 100%);
    box-shadow: 0 26px 50px -26px rgba(11, 31, 63, .7);
}
.ab-duo2__card--why {
    color: #0b1f3f; background: linear-gradient(180deg, #fff 0%, #f6f9fd 100%); border: 1px solid #e3eaf3;
    box-shadow: 0 26px 50px -30px rgba(11, 31, 63, .4);
}
.ab-duo2__card--why::before {   /* orange edge */
    content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, #E8792B, #ffb37a);
}
.ab-duo2__card:hover.ab-duo2__card--team { box-shadow: 0 34px 60px -26px rgba(11, 31, 63, .8); }
.ab-duo2__card:hover.ab-duo2__card--why { box-shadow: 0 34px 60px -30px rgba(11, 31, 63, .5); }

.ab-duo2__top { display: flex; align-items: center; justify-content: space-between; }
.ab-duo2__tag {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.ab-duo2__card--team .ab-duo2__tag { color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); }
.ab-duo2__card--team .ab-duo2__tag .fa { color: #ffb37a; }
.ab-duo2__card--why .ab-duo2__tag { color: #15416e; background: #fef0e6; border: 1px solid #fbd9bf; }
.ab-duo2__card--why .ab-duo2__tag .fa { color: #E8792B; }
.ab-duo2__go {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
    font-size: 16px; transform: rotate(-45deg); transition: transform .35s var(--ab-ease), background .3s ease, color .3s ease;
}
.ab-duo2__card--team .ab-duo2__go { color: #15416e; background: #fff; }
.ab-duo2__card--why .ab-duo2__go { color: #fff; background: #15416e; }
.ab-duo2__card:hover .ab-duo2__go { transform: rotate(0); background: #E8792B; color: #fff; }

.ab-duo2__art { display: block; width: 100%; max-width: 420px; height: auto; margin: 14px auto 6px; transition: transform .6s var(--ab-ease); }
.ab-duo2__card:hover .ab-duo2__art { transform: translateY(-6px) scale(1.02); }

.ab-duo2__card h3 { margin: 10px 0 0; font-family: var(--ab-display); font-size: 28px; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.ab-duo2__card--team h3 { color: #fff; }
.ab-duo2__card--why h3 { color: #0b1f3f; }
.ab-duo2__card p { margin-top: 10px; font-size: 15.5px; line-height: 1.7; }
.ab-duo2__card--team p { color: rgba(255, 255, 255, .78); }
.ab-duo2__card--why p { color: var(--ab-body); }

.ab-duo2__facts { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ab-duo2__facts li { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.ab-duo2__facts strong { display: block; font-family: var(--ab-display); font-size: 21px; font-weight: 800; line-height: 1.1; color: #ffb37a; }
.ab-duo2__facts span { display: block; margin-top: 4px; font-size: 12.5px; color: rgba(255, 255, 255, .72); }

.ab-duo2__chips { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ab-duo2__chips li { padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; border: 1px solid; }
.ab-duo2__chips li:nth-child(1) { color: #1c68b5; background: #e8f1fb; border-color: #cfe1f5; }
.ab-duo2__chips li:nth-child(2) { color: #0f8a48; background: #e6f7ee; border-color: #c7ecd7; }
.ab-duo2__chips li:nth-child(3) { color: #c75f14; background: #fef0e6; border-color: #fbd9bf; }
.ab-duo2__chips li:nth-child(4) { color: #5b40cf; background: #f0ecfd; border-color: #ddd4fb; }

.ab-duo2__more { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 22px; font-size: 15px; font-weight: 700; }
.ab-duo2__card--team .ab-duo2__more { color: #ffb37a; }
.ab-duo2__card--why .ab-duo2__more { color: #E8792B; }
.ab-duo2__more .fa { transition: transform .25s ease; }
.ab-duo2__card:hover .ab-duo2__more .fa { transform: translateX(6px); }

@media (max-width: 991px) {
    .ab-duo2 { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 767px) {
    .ab-duo2__card { padding: 22px 20px 24px; border-radius: 20px; }
    .ab-duo2__go { width: 38px; height: 38px; font-size: 14px; }
    .ab-duo2__card h3 { font-size: 23px; }
    .ab-duo2__card p { font-size: 14.5px; }
    .ab-duo2__facts { gap: 8px; }
    .ab-duo2__facts li { padding: 10px; }
    .ab-duo2__facts strong { font-size: 17px; }
    .ab-duo2__facts span { font-size: 11.5px; }
    .ab-duo2__chips li { padding: 7px 13px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .ab-duo2__card, .ab-duo2__art, .ab-duo2__go { transition: none; }
}

/* "Difference" card (2026-11-04): white on the white section did not stand out, so it takes a warm peach
   wash with an orange-tinted border and a deeper shadow (the navy Team card beside it is unchanged). */
.ab-duo2__card--why {
    background: radial-gradient(circle at 90% 0%, rgba(255, 179, 122, .35), transparent 50%), linear-gradient(160deg, #fff8f2 0%, #fde8d6 100%);
    border-color: #f5c9a4;
    box-shadow: 0 26px 50px -24px rgba(199, 95, 20, .38);
}
.ab-duo2__card:hover.ab-duo2__card--why { box-shadow: 0 34px 60px -24px rgba(199, 95, 20, .45); }
.ab-duo2__card--why .ab-duo2__tag { background: #fff; }
.ab-duo2__card--why p { color: #4a3b30; }

/* Our Team hero (2026-11-04): uses the Our Purpose hero style (.ab-hero--purpose: 440px, Montserrat, uppercase
   title, orange tagline, light lead) but over the team photo, so the photo fills the band and the navy
   left-to-right veil comes back for the text. */
.ab-hero--team .ab-hero__bg { background-size: cover; background-position: center 35%; filter: none; }
.ab-hero--team::before {
    display: block;
    background: linear-gradient(90deg, rgba(6, 17, 31, .94) 0%, rgba(8, 26, 51, .82) 45%, rgba(11, 29, 51, .45) 100%);
}
@media (min-width: 992px) and (max-width: 1279px) { .ab-hero--team .ab-hero__bg { filter: none; } }
@media (max-width: 767px) {
    .ab-hero--team .ab-hero__bg { background-position: 60% center; filter: none; }
    .ab-hero--team::before { background: rgba(8, 22, 42, .82); }
}
.ab-hero--team .ab-label { color: #E8792B; font-size: 16px; font-weight: 700; letter-spacing: .2em; }   /* orange kicker, as on Our Purpose */
@media (max-width: 767px) { .ab-hero--team .ab-label { font-size: 14px; } }

/* Team: initials avatar for a leader with no photo yet ('photo' => '' in team.blade.php). Fills the same
   circle as the photo (card) or the 200px portrait (bio dialog). */
.ab-avatar {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    border-radius: 50%; border: 4px solid #fff;
    font-family: "Montserrat", var(--ab-display); font-size: 48px; font-weight: 800; letter-spacing: .02em; color: #fff;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .18), transparent 55%), linear-gradient(140deg, #1c68b5, #15416e 60%, #0b2a4f);
}
.ab-avatar::after { content: none; }
.ab-avatar--modal { width: 200px; height: 200px; margin: 0 auto; border: 6px solid rgba(255, 255, 255, .25); font-size: 60px; background: rgba(255, 255, 255, .12); }
/* one-line names (Piyush, Meenakshi, Gaurav) kept the row's icons and Read More higher than their
   neighbours: reserve two lines for the name and push the button to the bottom of each card */
@media (min-width: 768px) {
    .ab-amember h3 { min-height: 2.4em; }
    .ab-amember__excerpt { margin-bottom: 20px; }
    .ab-amember__more { margin-top: auto; }
}

/* =====================================================================
   Team › Partner intro (2026-11-04), markup .ab-tp in team.blade.php. Replaces the copy + three stock photos:
   the client's copy on the left (three-line title: navy / blue / orange), a navy "five disciplines" panel on
   the right with the 100+ figure, and the three strengths as tinted cards underneath.
   ===================================================================== */
.ab-tp__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.ab-tp .ab-label { justify-content: flex-start; color: #E8792B; font-weight: 700; letter-spacing: .2em; }
.ab-tp__title { margin: 0; font-family: "Montserrat", var(--ab-display); font-size: clamp(28px, 2.6vw, 38px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: #0b1f3f; }
.ab-tp__title span { display: block; }
.ab-tp__title span:nth-child(2) { color: #1c68b5; }
.ab-tp__title span:nth-child(3) { color: #E8792B; }
.ab-tp__title::after { content: ""; display: block; width: 72px; height: 4px; margin-top: 18px; border-radius: 4px; background: linear-gradient(90deg, #15416e 0 50%, #E8792B 50% 100%); }
.ab-tp__copy p:not(.ab-label) { margin-top: 18px; font-size: 16px; line-height: 1.8; color: var(--ab-body); }
.ab-tp__copy p.ab-tp__lead { margin-top: 24px; font-size: 17px; font-weight: 500; color: #15416e; }

.ab-tp__panel {
    position: relative; overflow: hidden; padding: 32px 30px 28px; border-radius: 24px; color: #fff;
    background: radial-gradient(circle at 100% 0%, rgba(63, 162, 245, .3), transparent 50%), linear-gradient(150deg, #071a33 0%, #0d2c52 55%, #15416e 100%);
    box-shadow: 0 30px 60px -30px rgba(11, 31, 63, .7);
}
.ab-tp__panel::before {   /* faint dot grid */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px) 0 0 / 20px 20px;
}
.ab-tp__panel > * { position: relative; }
.ab-tp__panel-tag { margin: 0 0 18px !important; font-family: "Montserrat", var(--ab-display); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #ffb37a; }
.ab-tp__roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ab-tp__roles li {
    display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 14px;
    font-family: "Montserrat", var(--ab-display); font-size: 15.5px; font-weight: 600;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
    transition: background .3s ease, transform .3s var(--ab-ease);
}
.ab-tp__roles li:hover { background: rgba(255, 255, 255, .12); transform: translateX(4px); }
.ab-tp__roles span {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
    font-size: 15px; color: #fff; background: linear-gradient(135deg, #E8792B, #ffa24c);
}
.ab-tp__stat { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .15); }
.ab-tp__stat strong { font-family: "Montserrat", var(--ab-display); font-size: 40px; font-weight: 800; line-height: 1; color: #5fd697; }
.ab-tp__stat span { font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .78); }

.ab-tp__points { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ab-tp__points li {
    padding: 26px 24px 24px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--tone) 25%, #fff); border-top: 3px solid var(--tone);
    background: linear-gradient(180deg, var(--tone-soft) 0%, #fff 80%);
    box-shadow: 0 16px 34px -22px var(--tone-glow);
    transition: transform .35s var(--ab-ease), box-shadow .35s ease;
}
.ab-tp__points li:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -22px var(--tone-glow); }
.ab-tp__icon {
    display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px;
    font-size: 21px; color: var(--tone); background: #fff; box-shadow: 0 6px 16px -8px var(--tone-glow);
}
.ab-tp__points h3 { margin: 16px 0 0; font-family: "Montserrat", var(--ab-display); font-size: 18px; font-weight: 700; color: #0b1f3f; }
.ab-tp__points p { margin-top: 8px; font-size: 15px; line-height: 1.65; color: var(--ab-body); }

@media (max-width: 991px) {
    .ab-tp__top { grid-template-columns: 1fr; gap: 32px; }
    .ab-tp__points { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
}
@media (max-width: 767px) {
    .ab-tp__title { font-size: 25px; }
    .ab-tp__copy p.ab-tp__lead { font-size: 16px; }
    .ab-tp__copy p:not(.ab-label) { font-size: 15px; }
    .ab-tp__panel { padding: 24px 18px 22px; border-radius: 20px; }
    .ab-tp__roles li { font-size: 14.5px; padding: 10px 12px; }
    .ab-tp__stat strong { font-size: 34px; }
    .ab-tp__points li { padding: 20px 18px; }
}
@media (prefers-reduced-motion: reduce) { .ab-tp__roles li, .ab-tp__points li { transition: none; } }

/* Team › Practice leads cards (2026-11-04): set apart from the Leadership grid — each lead is a boxed card
   with a band in its own tone at the top, the photo rising out of it, the "Practice Lead" label as a pill
   and the practice area in bold. The leadership dividers and underline are switched off here. */
.ab-ateam--experts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; row-gap: 24px; }
.ab-ateam--experts .ab-amember,
.ab-ateam--experts .ab-amember:nth-child(4n + 1),
.ab-ateam--experts .ab-amember:nth-child(2n + 1) {
    position: relative; overflow: hidden; padding: 0 22px 26px; border: 1px solid #e3eaf3; border-radius: 22px; background: #fff;
    box-shadow: 0 20px 40px -26px rgba(11, 31, 63, .4);
    transition: transform .35s var(--ab-ease), box-shadow .35s ease;
}
.ab-ateam--experts .ab-amember::after { content: none; }
.ab-ateam--experts .ab-amember::before {   /* tone band behind the photo */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 96px;
    background: radial-gradient(circle at 85% 0%, rgba(255, 255, 255, .25), transparent 55%), linear-gradient(135deg, var(--tone), var(--tone-2));
}
.ab-ateam--experts .ab-amember:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -26px rgba(11, 31, 63, .5); }
.ab-ateam--experts .ab-amember__photo { position: relative; width: 140px; height: 140px; margin-top: 30px; padding: 4px; background: #fff; box-shadow: 0 14px 28px -14px var(--tone-glow); }
.ab-ateam--experts .ab-amember__photo img { border: 0; }
.ab-ateam--experts .ab-amember h3 { margin-top: 18px; font-size: 18px; }
.ab-ateam--experts .ab-amember__role { min-height: 0; font-family: "Montserrat", var(--ab-display); font-size: 15px; font-weight: 700; line-height: 1.4; color: #0b1f3f; }
.ab-amember__tag {
    display: table; margin: 0 auto 8px; padding: 4px 12px; border-radius: 999px;
    font-family: var(--ab-font); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--tone); background: var(--tone-soft);
}
.ab-ateam--experts .ab-amember__social { margin: 14px 0 16px; }
.ab-ateam--experts .ab-amember__excerpt { padding-top: 14px; border-top: 1px dashed #dbe5f1; }
.ab-ateam--experts .ab-amember__more { background: var(--tone); border-color: var(--tone); }
@media (max-width: 1199px) { .ab-ateam--experts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .ab-ateam--experts { grid-template-columns: 1fr; }
    .ab-ateam--experts .ab-amember, .ab-ateam--experts .ab-amember:nth-child(4n + 1) { padding: 0 18px 22px; }
}
@media (prefers-reduced-motion: reduce) { .ab-ateam--experts .ab-amember { transition: none; } }
@media (min-width: 601px) { .ab-ateam--experts .ab-amember__role { min-height: 118px; } }   /* pill + up to four lines (Himanshu's two practices), so every card keeps its icons level */

/* =====================================================================
   Team › Life at Codec Networks (2026-11-04), markup .ab-life in team.blade.php. A photo banner (team
   photo under a navy veil) carrying the client's copy and a "Join the team" link, the three values from
   the copy as glass cards on the right, then four photo tiles with their caption over the image.
   ===================================================================== */
.ab-life__banner {
    position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center;
    padding: 56px 56px; border-radius: 28px; color: #fff;
    background: linear-gradient(100deg, rgba(6, 17, 31, .95) 0%, rgba(8, 26, 51, .88) 50%, rgba(13, 44, 82, .7) 100%), var(--life-bg) center / cover no-repeat;
    box-shadow: 0 34px 70px -34px rgba(11, 31, 63, .75);
}
.ab-life__banner::after {   /* orange edge along the bottom */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #E8792B, #ffb37a 40%, #3fa2f5);
}
.ab-life .ab-label { justify-content: flex-start; color: #ffb37a; font-weight: 700; letter-spacing: .2em; }
.ab-life__title { margin: 0; font-family: "Montserrat", var(--ab-display); font-size: clamp(26px, 2.4vw, 36px); font-weight: 800; line-height: 1.22; letter-spacing: -.015em; color: #fff; }
.ab-life__title span { display: block; }
.ab-life__title span:first-child { color: #ffa24c; }
.ab-life__copy > p:not(.ab-label) { margin-top: 18px; max-width: 640px; font-size: 16px; line-height: 1.8; color: rgba(255, 255, 255, .82); }
.ab-life__cta {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 12px 24px; border-radius: 999px;
    font-size: 15px; font-weight: 700; color: #fff !important; background: #E8792B; text-decoration: none;
    box-shadow: 0 14px 28px -12px rgba(232, 121, 43, .8); transition: background .3s ease, gap .3s ease;
}
.ab-life__cta:hover { background: #cf6419; gap: 14px; }

.ab-life__values { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ab-life__values li {
    display: flex; align-items: flex-start; gap: 14px; padding: 18px 18px; border-radius: 16px;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(6px);
    font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .78);
    transition: background .3s ease, transform .3s var(--ab-ease);
}
.ab-life__values li:hover { background: rgba(255, 255, 255, .14); transform: translateX(-4px); }
.ab-life__values span {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px;
    font-size: 18px; color: #fff; background: linear-gradient(135deg, #E8792B, #ffa24c);
}
.ab-life__values li:nth-child(2) span { background: linear-gradient(135deg, #1c68b5, #3fa2f5); }
.ab-life__values li:nth-child(3) span { background: linear-gradient(135deg, #14a456, #3dd68c); }
.ab-life__values strong { display: block; margin-bottom: 3px; font-family: "Montserrat", var(--ab-display); font-size: 16px; font-weight: 700; color: #fff; }

.ab-life__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 22px; }
.ab-life__tiles figure { position: relative; margin: 0; height: 240px; overflow: hidden; border-radius: 20px; box-shadow: 0 20px 40px -26px rgba(11, 31, 63, .55); }
.ab-life__tiles img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ab-ease); }
.ab-life__tiles figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 26, 51, 0) 35%, rgba(8, 26, 51, .92) 100%); }
.ab-life__tiles figure:hover img { transform: scale(1.07); }
.ab-life__tiles figcaption { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .8); }
.ab-life__tiles figcaption strong { display: block; margin-bottom: 3px; font-family: "Montserrat", var(--ab-display); font-size: 17px; font-weight: 700; color: #fff; }
.ab-life__tiles figcaption strong::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 8px; border-radius: 2px; background: #E8792B; }

@media (max-width: 1199px) { .ab-life__tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991px) {
    .ab-life__banner { grid-template-columns: 1fr; gap: 28px; padding: 40px 32px; }
}
@media (max-width: 767px) {
    .ab-life__banner { padding: 30px 20px 32px; border-radius: 22px; }
    .ab-life__title { font-size: 23px; }
    .ab-life__copy > p:not(.ab-label) { font-size: 15px; }
    .ab-life__values li { padding: 14px; }
    .ab-life__tiles { gap: 12px; }
    .ab-life__tiles figure { height: 190px; border-radius: 16px; }
    .ab-life__tiles figcaption { left: 12px; right: 12px; bottom: 12px; font-size: 12px; }
    .ab-life__tiles figcaption strong { font-size: 15px; }
}
@media (max-width: 480px) { .ab-life__tiles { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ab-life__tiles img, .ab-life__values li, .ab-life__cta { transition: none; } }

/* Team: arriving from Our Purpose's "Meet the team" link (/about-us/team#ab-leadership) — stop the section
   just below the fixed site header instead of under it. */
#ab-leadership { scroll-margin-top: 100px; }
@media (max-width: 991px) { #ab-leadership { scroll-margin-top: 56px; } }
/* darker veil (2026-11-04): the team photo now shows only faintly behind the copy and value cards */
.ab-life__banner {
    background: linear-gradient(100deg, rgba(5, 13, 26, .97) 0%, rgba(6, 19, 38, .94) 50%, rgba(8, 26, 51, .88) 100%), var(--life-bg) center / cover no-repeat;
}

/* Our Purpose hero (2026-11-04): the team-at-laptops photo (hero.webp) with the Team page's veil
   (.ab-hero--team); framed so the two consultants sit right of the copy. */
.ab-page--purpose .ab-hero--team .ab-hero__bg { background-position: 70% 40%; }
@media (max-width: 767px) { .ab-page--purpose .ab-hero--team .ab-hero__bg { background-position: 75% center; } }
/* Our Purpose hero, desktop: the photo fills only the right half; the left half is solid navy for the copy
   and the photo's left edge fades into it (no hard seam). Phones/tablets keep the full-width veiled photo. */
@media (min-width: 992px) {
    .ab-page--purpose .ab-hero--team { background: #06111f; }
    .ab-page--purpose .ab-hero--team .ab-hero__bg { left: 48%; background-position: 60% 40%; }
    .ab-page--purpose .ab-hero--team::before {
        background: linear-gradient(90deg, #06111f 0%, #06111f 50%, rgba(6, 17, 31, .7) 59%, rgba(6, 17, 31, .15) 76%, rgba(6, 17, 31, 0) 100%);
    }
}

/* Split hero (2026-11-04), used by Media (CN Insight): like Our Purpose's — on desktop the photo fills only the
   right half and fades into a solid navy left half for the copy; phones/tablets keep the full-width veiled photo. */
.ab-hero--split .ab-hero__bg { background-position: 70% center; }
@media (min-width: 992px) {
    .ab-hero--split { background: #06111f; }
    .ab-hero--split .ab-hero__bg { left: 48%; }
    .ab-hero--split::before {
        background: linear-gradient(90deg, #06111f 0%, #06111f 50%, rgba(6, 17, 31, .7) 59%, rgba(6, 17, 31, .15) 76%, rgba(6, 17, 31, 0) 100%);
    }
}

/* Newsroom card photo that is portrait (e.g. the SAMVAD plaque hand-over): 'top' => true crops from the top, keeping faces */
.ab-news__card img.is-top { object-position: center 18%; }

/* "What's New" slider section (2026-11-05): the white slide card sat on a white section; a blue-grey band and a
   firmer border/shadow on the card set it apart. The Newsroom below keeps its own light background. */
.ab-page .ab-whatsnew { background: #e5ecf5; }
.ab-page .ab-whatsnew .ab-feature { border: 1px solid #d3deeb; box-shadow: 0 30px 60px -30px rgba(11, 31, 63, .45); }
/* Our Team hero photo (2026-11-05): show the top of team-hero.webp so the people's heads are not cut off */
.ab-hero.ab-hero--teampage .ab-hero__bg { background-position: 60% 0%; }
@media (max-width: 991px) { .ab-hero.ab-hero--teampage .ab-hero__bg { background-position: 60% 0%; } }

/* 2026-11-05 Event dialog (CN Insight › Events, partials/news): photo stage + thumbnails on the left,
   client, summary and the scope of work on the right. Shares .ab-modal's shell/close button. */
.ab-evm { width: min(1080px, calc(100% - 32px)); }
.ab-evm[open] { display: grid; grid-template-columns: 1.15fr 1fr; }
.ab-evm__stage { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: #0f1d2e; min-height: 0; }
.ab-evm__big { flex: 1 1 auto; width: 100%; min-height: 320px; max-height: calc(100vh - 190px); object-fit: contain; border-radius: 14px; background: #0b1726; }
.ab-evm__thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.ab-evm__thumb { flex: 0 0 auto; width: 74px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: none; cursor: pointer; opacity: .6; transition: opacity .2s, border-color .2s; }
.ab-evm__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ab-evm__thumb:hover, .ab-evm__thumb.is-on { opacity: 1; border-color: var(--tone); }
.ab-evm__body { padding: 40px 36px 34px; overflow-y: auto; max-height: calc(100vh - 48px); background: #eef3f8; }
.ab-evm__body h3 { margin: 14px 0 10px; font-family: var(--ab-display); font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--ab-ink); }
.ab-evm__body p { margin: 0; font-size: 15px; line-height: 1.65; color: #475569; }
.ab-evm__body h4 { margin: 24px 0 12px; font-family: var(--ab-display); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tone); }
.ab-evm__scope { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ab-evm__scope li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #fff; font-size: 14px; line-height: 1.45; color: var(--ab-ink); box-shadow: 0 2px 8px rgba(15, 29, 46, .06); }
.ab-evm__scope .fa { flex: 0 0 auto; margin-top: 3px; color: var(--tone); }
.ab-evm .ab-modal__close { background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
@media (max-width: 991px) {
    .ab-evm[open] { display: block; overflow-y: auto; }
    .ab-evm__stage { padding: 12px; }
    .ab-evm__big { min-height: 0; max-height: 56vh; }
    .ab-evm__body { max-height: none; overflow: visible; padding: 24px 20px 26px; }
    .ab-evm__body h3 { font-size: 20px; }
}
/* the photo sits centred at its own proportions (no tall empty band above and below it) */
.ab-evm__stage { justify-content: center; }
.ab-evm__big { flex: 0 1 auto; height: auto; min-height: 0; }
.ab-news__card { box-shadow: 0 10px 30px -14px rgba(15, 29, 46, .25); }

/* 2026-11-05 Our Purpose hero: boardroom photo (purpose-hero.jpeg) — keep the presenter and the flip chart in frame */
.ab-page--purpose .ab-hero--team .ab-hero__bg { background-position: 52% 35%; }
@media (max-width: 767px) { .ab-page--purpose .ab-hero--team .ab-hero__bg { background-position: 55% 30%; } }

/* 2026-11-05 Newsroom ("At Our News Desk"): a navy band, so it no longer shares the light #e5ecf5 of the
   What's New section above it; white cards stand out on it. */
.ab-newsroom { position: relative; overflow: hidden; background: linear-gradient(160deg, #0d2340 0%, #15416e 60%, #1b4f86 100%); }
.ab-newsroom::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 10% 0%, rgba(63, 162, 245, .16), transparent 42%),
                radial-gradient(circle at 92% 30%, rgba(63, 162, 245, .14), transparent 45%),
                radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 22px 22px; }
.ab-newsroom .ab-wrap { position: relative; }
.ab-newsroom .ab-label { color: #3dd68c; }
.ab-newsroom .ab-h2--duo { color: #fff; }
.ab-newsroom .ab-h2--duo span { color: #f7953f; }
.ab-newsroom .ab-news__card { box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55); }

/* filter tabs: plain text tabs on one hairline, the active one white with an orange underline; a small count
   after each label (no icons) */
.ab-newsroom .ab-filters {
    display: flex; flex-wrap: nowrap; justify-content: center; gap: 34px;
    width: max-content; max-width: 100%; margin: 0 auto 44px !important; padding: 0 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    overflow-x: auto; scrollbar-width: none;
}
.ab-newsroom .ab-filters::-webkit-scrollbar { display: none; }
.ab-newsroom .ab-filters button {
    position: relative; display: inline-flex; align-items: baseline; gap: 6px; flex: 0 0 auto;
    padding: 12px 2px 16px; border: 0; border-radius: 0; background: none; box-shadow: none;
    font-size: 16px; font-weight: 600; letter-spacing: .01em; color: rgba(255, 255, 255, .62); white-space: nowrap;
}
.ab-newsroom .ab-filters button::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, #f7953f, #e8792b); transform: scaleX(0); transition: transform .3s ease;
}
.ab-filters__n { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .45); transition: color .25s ease; }
.ab-newsroom .ab-filters button:hover { background: none; color: #fff; }
.ab-newsroom .ab-filters button.is-active { background: none; color: #fff; box-shadow: none; }
.ab-newsroom .ab-filters button.is-active::after { transform: scaleX(1); }
.ab-newsroom .ab-filters button.is-active .ab-filters__n { color: #f7953f; }
@media (max-width: 991px) {
    .ab-newsroom .ab-filters { justify-content: flex-start; gap: 22px; margin-bottom: 30px !important; }
    .ab-newsroom .ab-filters button { font-size: 14.5px; padding: 10px 2px 13px; }
}
/* home page: the "View All" button sits on the navy newsroom band, so it goes orange there */
.ab-newsroom .ab-news-more .ab-btn--primary { background: linear-gradient(135deg, #f7953f, #e8792b); box-shadow: 0 14px 30px -12px rgba(240, 127, 34, .7); color: #fff; }

/* 2026-11-05 News cards: compact (shorter photo, 2-line title + text) with a richer hover, and a sequential
   entrance — on scroll each row 1 → 2 → 3 (--d, set per column in the partial), on a filter tab 1 → n (--fi). */
.ab-news { gap: 26px; }
.ab-news__card { position: relative; border-radius: 20px; isolation: isolate; }
.ab-news__card::before {   /* accent line along the top edge, drawn in on hover */
    content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 4px;
    background: linear-gradient(90deg, #f07f22, #15416e); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ab-ease);
}
.ab-news__card:hover::before { transform: scaleX(1); }
.ab-news__img { aspect-ratio: 16 / 9; }
.ab-news__img::after {   /* soft shade at the bottom of the photo, deeper on hover */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 45%, rgba(11, 29, 51, .45)); opacity: .7; transition: opacity .4s ease;
}
.ab-news__card:hover .ab-news__img::after { opacity: 1; }
.ab-news__date { z-index: 1; left: 14px; bottom: 14px; padding: 6px 10px; border-radius: 10px; }
.ab-news__date strong { font-size: 18px; }
.ab-news__date span { font-size: 10px; }
.ab-news__body { padding: 16px 20px 18px; }
.ab-news__body h3 {
    margin-top: 10px; font-size: 16.5px; line-height: 1.38;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ab-news__body p {
    margin: 8px 0 14px !important; font-size: 14px; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ab-news__more { gap: 10px; font-size: 13.5px; }
.ab-news__more .fa {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--tone-soft); color: var(--tone); font-size: 12px; transition: transform .3s ease, background .3s ease, color .3s ease;
}
.ab-news__card:hover .ab-news__more .fa { transform: translateX(4px); background: var(--tone); color: #fff; }

/* entrance: a little rise + fade, one card after another */
.ab-js .ab-page .ab-news__card[data-reveal] { transform: translateY(34px) scale(.98); transition: opacity .6s ease var(--d, 0ms), transform .7s var(--ab-ease) var(--d, 0ms), box-shadow .4s ease; }
.ab-js .ab-page .ab-news__card[data-reveal].is-in { transform: none; }
.ab-js .ab-page .ab-news__card[data-reveal].is-in:hover { transform: translateY(-8px); transition-delay: 0ms; }
.ab-news__card.is-filtering { animation: ab-card-in .6s var(--ab-ease) backwards; animation-delay: calc(var(--fi, 0) * 90ms); }
@keyframes ab-card-in { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 991px) {
    .ab-js .ab-page .ab-news__card[data-reveal] { --d: 0ms !important; }   /* one column: each card on its own */
}
@media (prefers-reduced-motion: reduce) {
    .ab-news__card.is-filtering { animation: none; }
}
/* award / event dialog: optional video under the text */
.ab-evm__video { display: block; width: 100%; max-height: 320px; margin-top: 4px; border-radius: 12px; background: #000; }
/* CN Insight: the navy newsroom band and the navy closing CTA no longer touch — a clear gap between them
   (home keeps its own spacing: there the newsroom is light) */
.ab-page:not(.cn-home-news) .ab-newsroom + .ab-cta { margin-top: 48px; }
@media (max-width: 991px) { .ab-page:not(.cn-home-news) .ab-newsroom + .ab-cta { margin-top: 32px; } }

/* Team: a portrait with a lot of background around the face ('zoom' => true in team.blade.php) — the ring moves
   to a round, clipping wrapper and the photo is scaled up inside it, centred on the face */
.ab-zoom { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 4px solid #fff; background: #dfe9e2; }
.ab-zoom img { display: block; width: 100%; height: 100%; border: 0 !important; border-radius: 0 !important; object-fit: cover; object-position: center top; transform: scale(1.5); transform-origin: 50% 5%; }
.ab-zoom--modal { width: 200px; height: 200px; margin: 0 auto; border: 6px solid rgba(255, 255, 255, .25); }
.ab-modal__side .ab-zoom--modal img { width: 100%; height: 100%; margin: 0; }
/* Our Purpose: the logo strip between the partner banner and the closing CTA was removed — keep the same clear gap
   as on CN Insight so the two dark bands don't touch */
.ab-page--purpose .ab-pb + .ab-cta { margin-top: 48px; }
@media (max-width: 991px) { .ab-page--purpose .ab-pb + .ab-cta { margin-top: 32px; } }
/* Team › Practice Leads: "Specialist Expertise. Accountable Delivery." on one line on desktop — a wider head for
   this section only; its intro paragraph keeps the usual reading width */
.ab-head--wide { max-width: 1140px; }
.ab-head--wide p:not(.ab-label) { max-width: 720px; margin-left: auto; margin-right: auto; }
@media (min-width: 992px) { .ab-h2--oneline { white-space: nowrap; } }

/* 2026-11-05 About pages (Our Purpose, Team, CN Insight — not the home page's shared sections):
   1) tighter vertical rhythm — less padding above/below every section and under the section heads;
   2) the near-white "soft" sections (#f6f9fc) weren't visible against white — a clearer #e5ecf5 tint. */
.ab-page:not(.cn-home-news) .ab-section { padding: 72px 0; }
.ab-page:not(.cn-home-news) .ab-section--flush { padding-top: 0; }
.ab-page:not(.cn-home-news) .ab-head { margin-bottom: 44px; }
.ab-page:not(.cn-home-news) .ab-pb { padding: 64px 0; }
.ab-page:not(.cn-home-news) .ab-phil { padding: 60px 0 64px; }
.ab-page:not(.cn-home-news) .ab-flow-sec { padding: 72px 0 80px; }
.ab-page:not(.cn-home-news) .ab-section--soft { background: #e5ecf5; }
@media (max-width: 991px) {
    .ab-page:not(.cn-home-news) .ab-section { padding: 56px 0; }
    .ab-page:not(.cn-home-news) .ab-section--flush { padding-top: 0; }
    .ab-page:not(.cn-home-news) .ab-head { margin-bottom: 32px; }
    .ab-page:not(.cn-home-news) .ab-pb { padding: 52px 0; }
    .ab-page:not(.cn-home-news) .ab-phil { padding: 48px 0 52px; }
    .ab-page:not(.cn-home-news) .ab-flow-sec { padding: 56px 0 64px; }
}
@media (max-width: 767px) {
    .ab-page:not(.cn-home-news) .ab-section { padding: 44px 0; }
    .ab-page:not(.cn-home-news) .ab-section--flush { padding-top: 0; }
    .ab-page:not(.cn-home-news) .ab-head { margin-bottom: 28px; }
    .ab-page:not(.cn-home-news) .ab-pb { padding: 44px 0; }
}

/* a second designation under the practice area (Himanshu: Solution Architect – Enterprise Sales), 2026-11-06:
   same font as the area text above it, in the site blue */
.ab-amember__role-extra { display: block; margin-top: 6px; font: inherit; color: #1c68b5; }
@media (min-width: 601px) { .ab-ateam--experts .ab-amember__role { min-height: 142px; } }   /* pill + extra designation + up to four lines, so every card keeps its icons level */