/* ============================================================
   custom.css — all newly-added custom styles live here.
   Keep the original stylesheets untouched; add new rules below.
   ============================================================ */

/* ===== Public form submit loader ===== */
.vvk-spin {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: vvkspin .6s linear infinite;
    vertical-align: -2px;
    margin-right: 6px;
}
@keyframes vvkspin { to { transform: rotate(360deg); } }
button.is-loading { opacity: .9; cursor: progress; pointer-events: none; }

/* ===== Full-page submit loader (window.VVKLoader) ===== */
.vvk-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(28, 43, 64, .72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    /* fades out gently, but appears at once */
    transition: opacity .28s ease, visibility .28s ease;
}

.vvk-loader.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .1s ease, visibility 0s;
}

.vvk-loader-box {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(340px, calc(100vw - 40px));
    padding: 34px 32px 26px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(16, 24, 40, .28);
    text-align: center;
    transform: translateY(8px) scale(.97);
    transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}

.vvk-loader.is-active .vvk-loader-box {
    transform: none;
}

.vvk-loader-ring {
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
    border: 4px solid rgba(28, 43, 64, .14);
    border-top-color: var(--gold, #c9a24b);
    border-radius: 50%;
    animation: vvkspin .85s cubic-bezier(.5, .15, .5, .85) infinite;
}

.vvk-loader-text {
    font-family: var(--sans, 'Libre Franklin', sans-serif);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--navy, #1C2B40);
}

.vvk-loader-sub {
    font-family: var(--sans, 'Libre Franklin', sans-serif);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: #7b8494;
}

/* Indeterminate progress bar under the text */
.vvk-loader-bar {
    position: relative;
    display: block;
    width: 100%;
    height: 3px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(28, 43, 64, .1);
}

.vvk-loader-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    border-radius: 3px;
    background: var(--gold, #c9a24b);
    animation: vvkbar 1.15s ease-in-out infinite;
}

@keyframes vvkbar {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

html.vvk-loading,
html.vvk-loading body {
    overflow: hidden;
    cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
    .vvk-loader-ring { animation-duration: 2s; }
    .vvk-loader-bar::after { animation-duration: 3s; }
    .vvk-loader,
    .vvk-loader-box { transition: none; }
}

/* ===== "Industries we serve" marquee — pause while hovered =====
   Both rows stop together: they scroll in opposite directions, so
   freezing only the hovered one looks like a glitch.
   Guarded by (hover: hover) so a tap on touch devices can't leave
   the rows stuck in a paused state. */
@media (hover: hover) {

    .industries:hover .ind-track,
    .industries:focus-within .ind-track {
        animation-play-state: paused;
    }
}

/* ===== Blog detail: "Related blogs" is its own section band =====
   The article above it sits on white, so this gets the cream ground and a
   hairline top edge to separate it, and reuses the site's standard
   .sec-head + .art-grid article cards. */
.bd-related-section {
    background: var(--cream, #f5f4f0);
    border-top: 1px solid #EAECF0;
    padding: 80px 0 90px;
    margin-top: 70px;
}

.bd-related-section .sec-head {
    margin-bottom: 40px;
}

.bd-related-section .sec-head h2 {
    font-size: 44px;
    margin: 0;
}

.bd-related-section .art-card {
    background: #fff;          /* cards lift off the cream band */
}

/* Shorter covers than the 1:1 used on the blogs listing — these are a
   secondary read at the end of an article, so the image shouldn't
   dominate the card. */
.bd-related-section .art-card img {
    aspect-ratio: 16 / 9;
    max-height: 240px;
}

@media (max-width: 768px) {
    .bd-related-section .art-card img {
        aspect-ratio: 16 / 9;
        max-height: 200px;
    }
}

/* Fewer than three related posts shouldn't leave a hole in the row.
   Desktop only — below 769px .art-grid is a single column and must stay one. */
@media (min-width: 769px) {

    .bd-related-section .art-grid.cols-1 {
        grid-template-columns: minmax(0, 420px);
    }

    .bd-related-section .art-grid.cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 900px;
    }
}

@media (max-width: 1024px) {
    .bd-related-section { padding: 60px 0 66px; margin-top: 50px; }
    .bd-related-section .sec-head h2 { font-size: 34px; }
}

@media (max-width: 768px) {
    .bd-related-section { padding: 46px 0 52px; margin-top: 36px; }
    .bd-related-section .sec-head { margin-bottom: 26px; }
    .bd-related-section .sec-head h2 { font-size: 26px; }
}

/* ===== Thank-you page: auto-redirect countdown ===== */
.ty-redirect {
    margin: 18px 0 0;
    font-family: var(--sans, 'Libre Franklin', sans-serif);
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
}

.ty-redirect-stop {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.ty-redirect-stop:hover {
    opacity: .8;
}

/* ===== International Association: image left, content right =====
   Scoped with .ia-story so the About page's stacked .ab-story is untouched. */
.ia-story .ab-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
}

.ia-story .ab-story-img {
    margin-bottom: 0;
}

.ia-story .ab-story-img img {
    height: 420px;
}

.ia-story .ab-story-text {
    max-width: none;
    margin: 0;
    text-align: left;
}

.ia-story .ab-story-text h2 {
    font-size: 44px;
    line-height: 1.15;
}

.ia-story .ab-story-text p {
    font-size: 18px;
    line-height: 1.65;
}

@media (max-width: 900px) {
    .ia-story .ab-wrap {
        grid-template-columns: 1fr;   /* stack: image first, then the text */
        gap: 30px;
    }

    .ia-story .ab-story-img img { height: 300px; }
    .ia-story .ab-story-text h2 { font-size: 34px; }
}

/* ===== Insights (knowledge article) cards — whole card opens the PDF ===== */
a.in-card {
    color: inherit;
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

a.in-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(16, 24, 40, .12);
    border-top-color: var(--navy, #1C2B40);
}

a.in-card:focus-visible {
    outline: 2px solid #1C2B40;
    outline-offset: 3px;
}

.in-card .in-readmore {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.in-section .bg-filters {
    margin-bottom: 34px;
}

@media (prefers-reduced-motion: reduce) {
    a.in-card { transition: none; }
    a.in-card:hover { transform: none; }
}

/* ===== Blog cards — the whole card is the link ===== */
a.art-card {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease;
}

a.art-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(16, 24, 40, .14);
}

a.art-card img {
    transition: transform .45s ease;
}

a.art-card:hover img {
    transform: scale(1.04);      /* contained by .art-card overflow:hidden */
}

/* "Read Article" is a span now — keep it looking like the link it stands for */
a.art-card .link-more {
    display: inline-block;
    transition: color .2s ease, border-color .2s ease;
}

a.art-card:hover .link-more {
    color: #1C2B40;
    border-bottom-color: #1C2B40;
}

a.art-card:focus-visible {
    outline: 2px solid #1C2B40;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    a.art-card,
    a.art-card img { transition: none; }
    a.art-card:hover { transform: none; }
    a.art-card:hover img { transform: none; }
}

/* ===== About "Our Journey" — cross-fade between milestones ===== */
.ab-ms-feature .ab-ms-img img,
.ab-ms-feature .ab-ms-body .ab-ms-year,
.ab-ms-feature .ab-ms-body .ab-ms-title,
.ab-ms-feature .ab-ms-body p {
    transition: opacity .26s ease;
}

.ab-ms-feature.is-swapping .ab-ms-img img,
.ab-ms-feature.is-swapping .ab-ms-body .ab-ms-year,
.ab-ms-feature.is-swapping .ab-ms-body .ab-ms-title,
.ab-ms-feature.is-swapping .ab-ms-body p {
    opacity: 0;
}

/* Timeline dots are interactive, so make that visible */
.ab-timeline .ab-tl { cursor: pointer; }
.ab-timeline .ab-tl:focus-visible {
    outline: 2px solid #4d92d8;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .ab-ms-feature .ab-ms-img img,
    .ab-ms-feature .ab-ms-body .ab-ms-year,
    .ab-ms-feature .ab-ms-body .ab-ms-title,
    .ab-ms-feature .ab-ms-body p { transition: none; }
}

/* ===== Button hover animations (CTAs, form submits, navbar button) ===== */
.btn,
.btn-blue,
.btn-light,
.ty-btn,
.ct-submit,
.cr-opp-btn {
    transition: transform .22s ease, box-shadow .22s ease, background-color .25s ease, color .25s ease;
}
.btn:hover,
.btn-blue:hover,
.btn-light:hover,
.ty-btn:hover,
.ct-submit:hover,
.cr-opp-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(16, 24, 40, .18);
}
.btn:active,
.btn-blue:active,
.btn-light:active,
.ty-btn:active,
.ct-submit:active,
.cr-opp-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(16, 24, 40, .14);
}
.svg-arrow { transition: transform .22s ease; }
.btn:hover .svg-arrow,
.btn-blue:hover .svg-arrow,
.btn-light:hover .svg-arrow,
.ty-btn:hover .svg-arrow,
.ct-submit:hover .svg-arrow {
    transform: translate(2px, -2px);
}

/* ===== .btn-navy hover — white bg, navy text ===== */
.btn-navy {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease,
                transform .22s ease, box-shadow .22s ease;
    border: 2px solid var(--navy);
}
.btn-navy:hover {
    background: #fff;
    color: var(--navy);
    border-color: var(--navy);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(16, 24, 40, .18);
}
.btn-navy:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(16, 24, 40, .14);
}
.btn-navy:hover .svg-arrow {
    transform: translate(2px, -2px);
}

/* ===== About page: prevent journey section overflow + fix lone last stat ===== */
.ab-journey { overflow: hidden; }

@media (max-width: 900px) {
    /* Last stat spans both columns when it's alone (odd total) */
    .ab-stat:last-child:nth-child(odd) {
        /* grid-column: 1 / -1; */
        text-align: center;
    }
}

/* ===== Mobile heading fixes ===== */
@media (max-width: 768px) {
    /* Team section: "The people behind your | business success" — 2 lines */
    .ab-team-head h2 {
        font-size:32px;
        line-height: 1.25;
        letter-spacing: -0.5px;
    }

    /* FAQ section: "Questions we | hear often" — 2 lines */
    .ab-faq-head h2 {
        font-size: 36px;
        line-height: 1.2;
        letter-spacing: -1px;
    }
}

/* ===== Testimonials: restore right-side padding on mobile ===== */
@media (max-width: 760px) {
    .testi-viewport {
        padding-right: 28px;
    }
}


/* ===== Staggered horizontal timeline — MOBILE ONLY ===== */
@media (max-width: 768px) {

    /* Container: single row, all items fit on screen — no scroll */
    .ab-timeline {
        flex-wrap: nowrap !important;
        overflow-x: visible;
        overflow-y: visible;
        height: 120px;
        align-items: center;
        gap: 0 !important;
        padding: 0 8px;
        margin: 0 0 40px;
    }

    /* Horizontal line sits at vertical center */
    .ab-timeline::before {
        content: "";
        position: absolute;
        display: block !important;
        top: 50% !important;
        transform: translateY(-50%);
        left: 0;
        right: 0;
        height: 1px;
        background: rgba(255, 255, 255, .25);
    }

    /* per-item rail segments are desktop-only */
    .ab-tl::after { display: none !important; }

    /* Each item: equal share of full width, full container height */
    .ab-tl {
        flex: 1 1 0 !important;
        width: 0;
        min-width: 0;
        height: 220px;
        position: relative;
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-direction: column !important;
        padding: 0;
        cursor: pointer;
    }

    /* Dot: always at center, in normal flex flow */
    .ab-tl .ab-tl-dot {
        position: relative;
        z-index: 2;
        width: 18px !important;
        height: 18px !important;
        border: 5px solid rgba(255, 255, 255, .25) !important;
        background: #1C2B40 !important;
        margin-bottom: 0 !important;
        flex-shrink: 0;
        transition: background .2s, border-color .2s, box-shadow .2s;
    }
    .ab-tl.on .ab-tl-dot {
        background: #4d92d8 !important;
        border-color: rgba(77, 146, 216, .35) !important;
        box-shadow: 0 0 0 5px rgba(77, 146, 216, .18);
        width: 22px !important;
        height: 22px !important;
    }

    /* Year + label: absolutely positioned, NOT in flex flow */
    .ab-tl .ab-tl-y,
    .ab-tl .ab-tl-l {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        white-space: normal;
        word-break: break-word;
        text-align: center;
        line-height: 1.2;
        width: 100%;
        padding: 0 4px;
        box-sizing: border-box;
    }
    .ab-tl .ab-tl-y {
        font-size: 21px;
        font-weight: 500;
        color: #fff;
    }
    .ab-tl .ab-tl-l {
        font-size: 12px;
        color: #a0aab4;
        margin-top: 0;
    }
    .ab-tl.on .ab-tl-y { color: #4d92d8; }
    .ab-tl.on .ab-tl-l { color: #c5c7c9; }

    /* ODD items (1st, 3rd, 5th): label just above dot, year above label */
    .ab-tl:nth-child(odd) .ab-tl-l {
        bottom: calc(50% + 18px);   /* label bottom edge: 13px above center */
    }
    .ab-tl:nth-child(odd) .ab-tl-y {
        bottom: calc(50% + 48px);   /* year bottom edge: clears label top (13+15px label height+10px gap) */
    }

    /* EVEN items (2nd, 4th): year just below dot, label below year */
    .ab-tl:nth-child(even) .ab-tl-y {
        top: calc(50% + 18px);
    }
    .ab-tl:nth-child(even) .ab-tl-l {
        top: calc(50% + 48px);      /* 25px gap below year (year is 20px tall) */
    }
}
select { color: #9ca3af; } /* default: placeholder-grey */
select.has-value,
.ct-field select.has-value,
.sd-field select.has-value,
.jd-field select.has-value { color: #1C2B40 !important; } /* after selection: navy */

/* ===== About journey timeline: fits 8 milestones ===== */
.ab-journey .ab-tl {
    box-sizing: border-box;
    min-width: 0;
}
.ab-journey .ab-tl-y { font-size: 22px; }
.ab-journey .ab-tl-l { font-size: 14px; line-height: 1.35; }

/* Tablet: two rows of four instead of five per row */
@media (max-width: 1024px) and (min-width: 769px) {
    .ab-journey .ab-timeline { gap: 30px 0; }
    .ab-journey .ab-tl { flex: 0 0 25%; height: 240px; }
    .ab-journey .ab-tl:nth-child(odd) { padding-bottom: 106px; }
    .ab-journey .ab-tl:nth-child(even) { padding-top: 106px; }
    /* rail must stop at the last dot of each row */
    .ab-journey .ab-tl:nth-child(4n)::after { display: none; }
}

/* Mobile: 8 dots in one row — years only, labels live in the card above */
@media (max-width: 768px) {
    .ab-journey .ab-tl-l { display: none !important; }
    .ab-journey .ab-tl-y { font-size: 15px !important; }
    .ab-journey .ab-tl { height: 150px; }
    .ab-journey .ab-timeline { height: 100px; padding: 0 4px; }
    .ab-journey .ab-tl .ab-tl-dot {
        width: 14px !important;
        height: 14px !important;
        border-width: 4px !important;
    }
    .ab-journey .ab-tl.on .ab-tl-dot { width: 18px !important; height: 18px !important; }
}

/* ===== Services: "Speak to an expert" card =====
   Sits below the Industries marquee. Same cream ground and navy accents the
   rest of the site uses: portrait in a navy frame on the left, name in Gilda
   Display, and the email as a pill button rather than a bare link. */
.svc-expert {
    background: #fff;
    padding: 10px 0 90px;
}

.svc-expert-card {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 44px;
    /* stretch, not center: the portrait runs the full height of the text
       beside it, so the two columns end level instead of the photo floating
       in the middle of a taller card. */
    align-items: stretch;
    background: var(--cream, #F5F4F0);
    border: 1px solid #E4E7EC;
    border-left: 4px solid var(--navy, #1C2B40);
    padding: 36px 40px;
}

.svc-expert-photo {
    line-height: 0;
    min-height: 230px;      /* a short blurb can't squash the frame flat */
}

.svc-expert-photo img {
    width: 100%;
    height: 100%;
    /* No aspect-ratio here — the frame takes its height from the text column.
       Anchoring the crop near the top keeps heads in frame whatever that
       height turns out to be. */
    object-fit: cover;
    object-position: center 22%;
    display: block;
}

.svc-expert-body {
    align-self: center;
}

.svc-expert-eyebrow {
    display: inline-block;
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #215D98;
    margin-bottom: 12px;
}

.svc-expert-name {
    font-family: "Gilda Display", serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1.2;
    color: #0E182E;
    margin: 0 0 6px;
}

.svc-expert-role {
    font-family: "Libre Franklin", sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #215D98;
    margin: 0 0 16px;
}

.svc-expert-text {
    font-family: "Libre Franklin", sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 28px;
    color: #475467;
    margin: 0 0 22px;
    max-width: 62ch;
}

.svc-expert-mail {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: var(--navy, #1C2B40);
    text-decoration: none;
    background: #fff;
    border: 1px solid #D6D9DE;
    border-radius: 100px;
    padding: 11px 22px;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.svc-expert-mail:hover,
.svc-expert-mail:focus-visible {
    background: var(--navy, #1C2B40);
    border-color: var(--navy, #1C2B40);
    color: #fff;
}

/* --- Service pages: the same card driven by the Team record --- */
.svc-expert-head {
    margin-bottom: 26px;
}

.svc-expert-heading {
    font-family: "Gilda Display", serif;
    font-weight: 400;
    font-size: 34px;
    line-height: 1.2;
    color: #0E182E;
    margin: 6px 0 0;
}

.svc-expert-list {
    display: grid;
    gap: 24px;
}

/* Two owners (e.g. Audit — Varun and Varad) sit side by side, with a
   smaller portrait so each card still breathes at half width. */
.svc-expert-list.is-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.svc-expert-list.is-2 .svc-expert-card {
    grid-template-columns: 190px 1fr;
    gap: 26px;
    padding: 26px;
}

/* Both cards in a row end up the same height, so the two portraits match. */
.svc-expert-list.is-2 .svc-expert-photo {
    min-height: 210px;
}

.svc-expert-list.is-2 .svc-expert-name {
    font-size: 24px;
}

.svc-expert-list.is-2 .svc-expert-text {
    font-size: 15px;
    line-height: 25px;
}

/* Three owners (e.g. Payroll) — a third of the row is too narrow for the
   portrait-beside-text layout, so the card stacks instead. */
.svc-expert-list.is-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.svc-expert-list.is-3 .svc-expert-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
}

.svc-expert-list.is-3 .svc-expert-photo {
    min-height: 0;
}

.svc-expert-list.is-3 .svc-expert-photo img {
    height: auto;
    aspect-ratio: 1 / 1;
}

.svc-expert-list.is-3 .svc-expert-body {
    align-self: start;
}

.svc-expert-list.is-3 .svc-expert-name {
    font-size: 22px;
}

.svc-expert-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.svc-expert-profile {
    font-family: "Libre Franklin", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #215D98;
    text-decoration: none;
    border-bottom: 1px solid rgba(33, 93, 152, .4);
    padding-bottom: 1px;
    transition: color .18s ease, border-color .18s ease;
}

.svc-expert-profile:hover {
    color: var(--navy, #1C2B40);
    border-bottom-color: var(--navy, #1C2B40);
}

@media (max-width: 1024px) {
    .svc-expert-list.is-2 {
        grid-template-columns: 1fr;   /* two full-width cards, not two cramped ones */
    }

    .svc-expert-list.is-2 .svc-expert-card {
        grid-template-columns: 200px 1fr;
    }

    .svc-expert-list.is-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));   /* 2 + 1 */
    }
}

@media (max-width: 860px) {
    .svc-expert-card,
    .svc-expert-list.is-2 .svc-expert-card {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 26px 22px;
    }

    .svc-expert-list.is-3 {
        grid-template-columns: 1fr;
    }

    /* Stacked, the portrait sits above the text and has no column height to
       match, so it goes back to a plain square. */
    .svc-expert-photo,
    .svc-expert-list.is-2 .svc-expert-photo,
    .svc-expert-list.is-3 .svc-expert-photo {
        max-width: 220px;
        min-height: 0;
    }

    .svc-expert-photo img {
        height: auto;
        aspect-ratio: 1 / 1;
        object-position: center center;
    }

    .svc-expert-name,
    .svc-expert-list.is-2 .svc-expert-name {
        font-size: 26px;
    }

    .svc-expert-heading {
        font-size: 26px;
    }

    .svc-expert-text {
        font-size: 15px;
        line-height: 26px;
    }
}

/* ===== Service pages: "Our Offerings" image =====
   The GRC and FIS artwork carries its title in the top band, and the frame is
   shorter than the artwork, so a centred crop cut the first line of the
   heading off. Anchor the crop to the top — harmless for the plain photos the
   other service pages use. */
.sd-offer-img img {
    object-position: center top;
}

/* ===== Team cards: long designations =====
   A designation can run to three or four lines ("Executive Director –
   Governance, Risk & Compliance and Forensic Investigation Services").
   The row was centring its contents, so the arrow drifted down the card
   as the text grew and every card in the row sat at a different height.
   Pin the arrow to the top-right and give both texts a sane line-height. */
.ab-member {
    display: flex;
    flex-direction: column;
}

.ab-member-photo img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.ab-member-foot {
    align-items: flex-start;   /* was center — kept the arrow beside the text */
    flex: 1;
    padding: 16px;
}

.ab-member-info {
    min-width: 0;
}

.ab-member-info strong {
    font-size: 19px;
    line-height: 1.25;
    margin-bottom: 5px;
}

.ab-member-info span {
    display: block;
    font-size: 13px;
    line-height: 1.4;
}

/* ===== Footer credit line ===== */
.copyright strong {
    font-weight: 600;
}

/* ===== Policy pages (privacy/disclaimer): contact block =====
   Body copy on these pages is Libre Franklin 300; <strong> matches the
   font-weight the section titles (.pp-h) use, so bold text and headings
   carry the same weight. The email / phone links stay plain text — the
   gold highlight they briefly carried was asked off. Scoped to .pp-body —
   .contact-link is also used in the footer and on the Contact page,
   which must stay untouched. */
.pp-body strong {
    font-weight: 500;
}

.pp-body .contact-link {
    font-weight: 500;
    color: #14243D;
    text-decoration: none;
}

.pp-body .contact-link:hover {
    text-decoration: underline;
}

/* ===== Testimonials section hidden site-wide =====
   The "Words from our clients" slider is marked up on 16 pages; one rule
   here keeps them all in sync. Remove this block to bring it back. */
.testi { display: none !important; }

/* ===== Footer location pins =====
   The row was a fixed-width flex line with wrapping commented out, so a
   fourth office squeezed the others and "Corporate office" broke onto two
   lines with its pin floating beside the gap. Let the row wrap as whole
   pins, keep each label on one line, and hold the icon steady beside it. */
.locations {
    flex-wrap: wrap;
    row-gap: 12px;
    column-gap: 18px;
    align-items: center;
}

.locations span {
    align-items: center;
    white-space: nowrap;   /* a label never splits across two lines */
}

.locations span img {
    flex: none;            /* the pin keeps its size when space is tight */
    width: 16px;
    height: 16px;
}

@media (max-width: 480px) {
    .locations {
        column-gap: 14px;
    }
}

/* ===== Contact page: office cards =====
   The grid was locked to three columns, so a fourth office dropped onto a
   row of its own and sat alone on the left. Flex-wrap with centring lets
   the row hold as many cards as fit and keeps any remainder centred, so
   the section stays balanced whatever number of offices the panel holds. */
.ct-offices .ab-wrap { max-width: 1400px; }

.ct-off-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.ct-off-card {
    flex: 1 1 300px;      /* share the row evenly, wrap below 300px */
    max-width: 420px;     /* two or three offices can't stretch into slabs */
    width: auto !important;
    padding: 32px 24px;
}

/* Cards in a row end level, so the maps line up along the bottom. */
.ct-off-card h3 {
    font-size: 22px;
}

@media (max-width: 1024px) {
    .ct-off-card {
        flex-basis: 280px;
        max-width: none;
    }
}

@media (max-width: 640px) {
    .ct-off-grid {
        gap: 20px;
    }

    .ct-off-card {
        flex-basis: 100%;
    }
}

/* ===== Service detail: "Our Offerings" artwork =====
   The image used to carry an inline `position:sticky;top:120px`, which
   applied at every width. Below 900px the grid collapses to one column,
   so the picture stayed pinned to the top of the viewport and the open
   accordion scrolled underneath it. Sticky belongs to the two-column
   layout only — same rule the team detail aside and the job apply form
   already follow. */
@media (min-width: 901px) {
    .sd-offer-img {
        position: sticky;
        top: 120px;
        align-self: start;
    }
}

/* ===== Team cards on small screens =====
   Two cards to a row leaves roughly 85px beside the 40px arrow, so a
   single long word ("Dharmendra") ran straight under it. Tighten the
   card, let long names wrap, and drop to one column on the narrowest
   phones where two columns can no longer hold a name at all. */
@media (max-width: 768px) {
    .ab-member-foot {
        padding: 12px;
        gap: 8px;
    }

    .ab-member-info {
        min-width: 0;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .ab-member-info strong {
        font-size: 16px;
        line-height: 1.25;
    }

    .ab-member-info span {
        font-size: 11.5px;
        line-height: 1.4;
    }

    .ab-member-arrow {
        width: 34px;
        height: 34px;
    }

    .ab-member-arrow i {
        font-size: 14px;
    }
}

@media (max-width: 440px) {
    .ab-team-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Blogs / Insights: nothing to show =====
   The message sat hard against the left edge under a filter row that had
   nothing to filter. Centre it and give it room; the tabs themselves are
   dropped in blogs.php when no post is published. */
.bg-empty {
    display: block;
    text-align: center;
    color: #667085;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 28px;
    margin: 0;
    padding: 56px 20px 64px;
}

@media (max-width: 768px) {
    .bg-empty {
        font-size: 15px;
        padding: 40px 16px 48px;
    }
}
/* Thank-you page: the urgent-call number is a real tel: link */
.ty-tel {
    color: inherit;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* ===== About: "Our Journey" timeline =====
   Each milestone is `flex: 1 1 0; min-width: 0`, so eight of them share the
   row equally and can be squeezed narrower than their own label — which
   broke the years down the middle ("197 / 9"). Keep a year on one line, and
   give the items a width floor so a tight window scrolls the rail instead
   of crushing it. */
.ab-tl-y {
    white-space: nowrap;
}

.ab-tl-l {
    overflow-wrap: break-word;
}

@media (min-width: 769px) {
    .ab-timeline {
        overflow-x: auto;
        scrollbar-width: thin;
        padding-bottom: 4px;
    }

    .ab-tl {
        min-width: 112px;
    }
}

@media (max-width: 768px) {
    .ab-tl-y {
        font-size: 20px;
    }
}
/* ===== Home: gap between "Industries we serve" and "Articles" =====
   Both sections sit on the same --paper background, so their stacked
   padding (80px bottom + 90px top) reads as one large empty band on a
   phone — there is no colour change to justify it. The ≤760px block in
   main.css only scales the headings, not the section padding. */
@media (max-width: 1024px) {
    .industries { padding: 70px 0 56px; }
    .articles   { padding: 60px 0 70px; }
}

@media (max-width: 760px) {
    .industries { padding: 52px 0 36px; }
    .industries h2 { margin-bottom: 28px; }
    .articles   { padding: 40px 0 52px; }
}
/* ===== Mobile nav: white highlight, not gold =====
   main.css tinted the open dropdown label and the link hover with
   var(--gold). The desktop nav never uses gold for its selected state,
   so the mobile drawer now matches it — white for the active/hovered
   item, and the sub-links already brighten to white on hover. */
.m-has-dropdown.open .m-dd-toggle {
    color: #fff;
}

.mobile-nav-links a:hover,
.mobile-nav-links a:focus-visible {
    color: #fff;
}
/* ===== About timeline on mobile: the year must never split =====
   The mobile block above positions the year and label absolutely and gives
   both `white-space: normal; word-break: break-word`, which is what allowed
   "1979" to break into "197 / 9" — at 15px in a 1/8-of-screen column the
   text is a hair too wide, so the break rule fires. The label needs that
   wrapping, the year never does. Higher specificity (.ab-journey .ab-tl
   .ab-tl-y) plus !important to clear the existing !important font-size. */
@media (max-width: 768px) {
    .ab-journey .ab-tl .ab-tl-y {
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        padding: 0 !important;
        font-size: 13.5px !important;
        letter-spacing: 0;
    }
}

@media (max-width: 380px) {
    .ab-journey .ab-tl .ab-tl-y {
        font-size: 12px !important;
    }
}
/* ===== About timeline on mobile: equal gap above and below the rail =====
   The staggered offsets were authored for year + label: odd items put the
   label at 18px and the year above it at 48px, even items mirrored that.
   On the journey timeline the label is display:none, so the years were left
   at 48px above vs 18px below — visibly lopsided. With no label in play,
   both sides just need the same clearance from the dot. */
@media (max-width: 768px) {
    .ab-journey .ab-tl:nth-child(odd) .ab-tl-y {
        top: auto !important;
        bottom: calc(50% + 24px) !important;
    }

    .ab-journey .ab-tl:nth-child(even) .ab-tl-y {
        bottom: auto !important;
        top: calc(50% + 24px) !important;
    }
}
/* ===== International Association: DFK member card =====
   Replaces the generic AI-globe artwork with a proper membership card:
   the DFK logo (assets/img/dfk-logo.png; the wordmark stands in until
   that file is uploaded), the membership line and a link to dfk.com. */
.ia-dfk-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    background: var(--cream, #F5F4F0);
    border: 1px solid #E4E7EC;
    border-top: 4px solid var(--navy, #1C2B40);
    padding: 56px 40px;
    min-height: 340px;
}

.ia-dfk-logo {
    max-width: 260px;
    max-height: 110px;
    width: auto;
    height: auto;
}

.ia-dfk-wordmark {
    font-family: "Gilda Display", serif;
    font-size: 64px;
    line-height: 1;
    letter-spacing: 2px;
    color: var(--navy, #1C2B40);
}

.ia-dfk-wordmark span {
    display: block;
    font-family: "Geist Mono", monospace;
    font-size: 14px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #215D98;
    margin-top: 10px;
}

.ia-dfk-tag {
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #667085;
    margin: 4px 0 0;
    padding-top: 14px;
    border-top: 1px solid #D8DCE2;
}

.ia-dfk-link {
    font-family: "Libre Franklin", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #215D98;
    text-decoration: none;
    border-bottom: 1px solid rgba(33, 93, 152, .4);
    padding-bottom: 1px;
}

.ia-dfk-link:hover {
    color: var(--navy, #1C2B40);
    border-bottom-color: var(--navy, #1C2B40);
}

/* four stats fit the band the About page's five-stat grid uses */
.ia-stats {
    grid-template-columns: repeat(4, 1fr);
}

.ia-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 44px;
}

@media (max-width: 900px) {
    .ia-dfk-card { min-height: 0; padding: 40px 24px; }
    .ia-dfk-wordmark { font-size: 48px; }
    .ia-stats { grid-template-columns: repeat(2, 1fr); }
}
/* ===== Service cards: the whole card is the link =====
   The card is a <div> with "Learn more" inside it, so wrapping it in an
   <a> would nest anchors (invalid, and it breaks keyboard navigation).
   Instead the existing link is stretched over the card with a pseudo
   element — one tab stop, one link, image and title both clickable. */
.svc-card {
    position: relative;
    transition: transform .22s ease, box-shadow .22s ease;
}

.svc-card .link-more::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.svc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(16, 24, 40, .14);
}

.svc-card img {
    transition: transform .45s ease;
}

/* the card already clips its image, so the zoom stays inside the frame */
.svc-card:hover img {
    transform: scale(1.04);
}

.svc-card h3 {
    transition: color .2s ease;
}

.svc-card:hover h3 {
    color: #215D98;
}

/* the stretched link owns the whole card, so the pointer belongs on it */
.svc-card,
.svc-card h3,
.svc-card img {
    cursor: pointer;
}

/* keyboard focus has to be visible on the CARD, not on the small link */
.svc-card:focus-within {
    outline: 2px solid #215D98;
    outline-offset: 3px;
}

.svc-card .link-more:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .svc-card,
    .svc-card img { transition: none; }
    .svc-card:hover { transform: none; }
    .svc-card:hover img { transform: none; }
}