/* =====================================================================
   DS — Corporate Website Stylesheet
   1. Design tokens | 2. Base | 3. Buttons | 4. Top bar | 5. Job bar
   6. Navbar | 7. Hero slider | 8. Sections | 9. About
   10. Recognition & Affiliation | 11. Statistics | 12. Services | 13. Sectors
   14. Gallery | 15. Why us | 16. CTA | 17. Contact | 18. Footer
   19. Inner pages | 20. Utilities & responsiveness
   ===================================================================== */

/* --------------------------------------------------------------
   1. Design tokens
-------------------------------------------------------------- */
:root {
    --ds-primary:       #6046E8;   /* brand purple */
    --ds-primary-dark:  #4732a8;
    --ds-primary-deep:  #2B1B63;
    --ds-primary-soft:  #ece7ff;
    --ds-primary-tint:  #f5f2ff;
    --ds-secondary:     #7c5cff;   /* violet accent */
    --ds-accent:        #7c5cff;   /* bright violet accent */
    --ds-navy:          #2B1B63;   /* deep purple for dark sections */
    --ds-navy-mid:      #3a2a63;
    --ds-gold:          #7c5cff;   /* remapped to brand violet (no unrelated gold) */
    --ds-ink:           #1f2340;   /* dark charcoal/navy headings */
    --ds-text:          #3f4663;   /* body text */
    --ds-muted:         #64748b;
    --ds-line:          #e7e4ff;
    --ds-bg:            #ffffff;
    --ds-bg-soft:       #f5f2ff;
    --ds-accent-soft:   #f3efff;
    --ds-gold-soft:     #ede8ff;

    --ds-radius:        16px;
    --ds-radius-lg:     24px;
    --ds-radius-sm:     10px;

    --ds-shadow-sm:     0 2px 10px rgba(43, 27, 99, .06);
    --ds-shadow-md:     0 14px 34px -14px rgba(43, 27, 99, .22);
    --ds-shadow-lg:     0 28px 64px -24px rgba(43, 27, 99, .30);

    --ds-font-head:     'Poppins', 'Segoe UI', sans-serif;
    --ds-font-body:     'Inter', 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------
   2. Base & typography
-------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--ds-font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ds-text);
    background: var(--ds-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ds-font-head);
    font-weight: 600;
    color: var(--ds-ink);
    line-height: 1.28;
    letter-spacing: -0.01em;
}

p { margin-bottom: 0; }
img { max-width: 100%; height: auto; }
::selection { background: var(--ds-primary); color: #fff; }
:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
[id] { scroll-margin-top: 110px; }

/* --------------------------------------------------------------
   3. Buttons
-------------------------------------------------------------- */
.btn-ds {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.85rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease,
                transform .25s ease, box-shadow .25s ease;
}
.btn-ds i { transition: transform .25s ease; }
.btn-ds:hover i.bi-arrow-right { transform: translateX(4px); }

.btn-ds-primary {
    background: var(--ds-primary);
    color: #fff;
    box-shadow: 0 12px 24px -12px rgba(96, 70, 232, .65);
}
.btn-ds-primary:hover, .btn-ds-primary:focus {
    background: var(--ds-primary-dark);
    color: #fff;
    transform: translateY(-2px);
}

.btn-ds-outline {
    border-color: rgba(96, 70, 232, .3);
    color: var(--ds-primary);
    background: transparent;
}
.btn-ds-outline:hover, .btn-ds-outline:focus {
    background: var(--ds-navy);
    border-color: var(--ds-navy);
    color: #fff;
    transform: translateY(-2px);
}

.btn-ds-gold {
    background: var(--ds-gold);
    color: #fff;
    box-shadow: 0 12px 24px -12px rgba(124, 92, 255, .7);
}
.btn-ds-gold:hover, .btn-ds-gold:focus {
    background: var(--ds-primary-dark);
    color: #fff;
    transform: translateY(-2px);
}

.btn-ds-ghost {
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
    background: transparent;
}
.btn-ds-ghost:hover, .btn-ds-ghost:focus {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    transform: translateY(-2px);
}

.btn-ds-sm { padding: .58rem 1.3rem; font-size: .88rem; }

/* --------------------------------------------------------------
   4. Top information bar — compact, full-width brand purple
-------------------------------------------------------------- */
.ds-topbar {
    background: var(--ds-primary-deep);
    color: #fff;
    font-size: .8rem;
    padding: .4rem 0;
    /* Full viewport width — not constrained by any .container */
    position: relative;
    width: 100vw;
    max-width: none;
    left: 0;
    right: 0;
    margin: 0;
    box-sizing: border-box;
    border-bottom: 1px solid var(--ds-line);
}
.ds-topbar-inner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 1rem;
    box-sizing: border-box;
}
.ds-topbar-list { gap: 1.6rem; }
.ds-topbar-list li { display: flex; align-items: center; gap: .5rem; color: #FFFFFF; }
.ds-topbar-list li span { color: #FFFFFF; }
.ds-topbar-list i { color: #FFFFFF; font-size: .9rem; }
.ds-topbar-list a { color: #FFFFFF; text-decoration: none; transition: color .2s ease; }
.ds-topbar-list a:hover { color: #fff; }
.ds-topbar-right { gap: 1rem; }
.ds-topbar-apply {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    padding: .3rem .9rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    transition: background-color .25s ease, border-color .25s ease;
}
.ds-topbar-apply:hover { background: var(--ds-primary); border-color: var(--ds-primary); }
.ds-topbar-sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .2); }
.ds-social-mini { display: flex; gap: .3rem; }
.ds-social-mini a {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    color: #FFFFFF;
    font-size: .85rem;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.ds-social-mini a:hover { background: var(--ds-primary); color: #fff; }

/* --------------------------------------------------------------
   5. Job opportunity bar — full-viewport-width light announcement strip
   The outer strip touches both viewport edges at all zoom levels.
   Light grey background, compact dark "JOB OPPORTUNITY" label,
   dark navy text, red email link. No .container / no max-width
   constraint on the outer strip.
-------------------------------------------------------------- */
.ds-jobbar {
    background: #f7f7f9;
    color: var(--ds-navy);
    padding: 0;
    border-top: 1px solid var(--ds-line);
    border-bottom: 1px solid var(--ds-line);
    /* Full viewport width — not constrained by any .container */
    position: relative;
    width: 100vw;
    max-width: none;
    left: 0;
    right: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: visible;
}
.ds-jobbar-inner {
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 36px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 1rem;
    box-sizing: border-box;
}
.ds-jobbar-label {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--ds-primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: .3rem .6rem;
    margin-right: .6rem;
    border-radius: 2px;
    line-height: 1.15;
}
.ds-jobbar-label i { font-size: .8rem; color: #fff; }
.ds-jobbar-icon { display: none; }
.ds-jobbar-track {
    overflow: hidden;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}
.ds-jobbar-text {
    font-size: .83rem;
    font-weight: 500;
    color: #FF0000;
    white-space: nowrap;
    animation: ds-ticker 34s linear infinite;
    margin-bottom: 0;
}
.ds-jobbar-text a {
    color: #FF0000;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ds-jobbar-text a:hover {
    color: #FF0000;
    text-decoration: underline;
}
.ds-jobbar:hover .ds-jobbar-text { animation-play-state: paused; }
@media (max-width: 575.98px) {
    .ds-jobbar-inner {
        padding: 0 .75rem;
        min-height: 34px;
    }
    .ds-jobbar-label {
        font-size: .65rem;
        padding: .25rem .5rem;
    }
    .ds-jobbar-text { font-size: .74rem; }
}
@keyframes ds-ticker {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* --------------------------------------------------------------
   6. Navbar & dropdowns
-------------------------------------------------------------- */
.ds-navbar {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: .6rem 0;
    border-bottom: 1px solid transparent;
    transition: box-shadow .3s ease, padding .3s ease, border-color .3s ease;
}
.ds-navbar.is-scrolled {
    padding: .45rem 0;
    border-bottom-color: var(--ds-line);
    box-shadow: 0 10px 30px -18px rgba(43, 27, 99, .3);
}

/* Full-width navbar wrapper — not capped, not centered as one block.
   Desktop layout is a 3-part grid: [ logo ] [ navigation ] [ login ]. */
.ds-nav-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 36px;
    padding-right: 36px;
    box-sizing: border-box;
}
@media (max-width: 1199.98px) {
    .ds-nav-inner { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 575.98px) {
    .ds-nav-inner { padding-left: 16px; padding-right: 16px; }
}

.ds-brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.ds-navbar .navbar-brand { margin-right: 0; flex: 0 0 auto; }
.ds-brand-logo {
    height: 60px;
    width: auto;
    max-height: 60px;
    max-width: 160px;
    object-fit: contain;
    display: block;
    background: #fff;
    border-radius: 8px;
    padding: 3px 6px;
}
.ds-brand-footer-logo {
    height: 70px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
    background: #fff;
    border-radius: 8px;
    padding: 3px 6px;
    margin-bottom: .9rem;
}
@media (max-width: 991.98px) {
    .ds-brand-logo { height: 48px; max-width: 130px; }
}
@media (max-width: 575.98px) {
    .ds-brand-logo { height: 42px; max-width: 110px; }
    .ds-brand-footer-logo { height: 52px; max-width: 190px; }
}
.ds-brand-mark {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-accent));
    color: #fff;
    font-family: var(--ds-font-head);
    font-size: 1.05rem;
    font-weight: 700;
    box-shadow: 0 8px 18px -8px rgba(96, 70, 232, .6);
}
.ds-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.ds-brand-name { font-family: var(--ds-font-head); font-size: 1.3rem; font-weight: 700; color: var(--ds-ink); }
.ds-brand-tag  { font-size: .63rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ds-muted); }

.ds-toggler {
    border: 1px solid var(--ds-line);
    border-radius: 10px;
    padding: .45rem .65rem;
    color: var(--ds-navy);
}
.ds-toggler:focus { box-shadow: 0 0 0 .2rem rgba(96, 70, 232, .2); }

.ds-navbar .navbar-nav .nav-link {
    position: relative;
    padding: .5rem .7rem;
    font-weight: 500;
    font-size: 16px;
    color: var(--ds-ink);
    transition: color .25s ease;
}
.ds-navbar .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: .2rem;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ds-primary), var(--ds-accent));
    transform: translateX(-50%);
    transition: width .28s ease;
}
.ds-navbar .navbar-nav .nav-link:hover,
.ds-navbar .navbar-nav .nav-link.active { color: var(--ds-primary); }
.ds-navbar .navbar-nav .nav-link:hover::after,
.ds-navbar .navbar-nav .nav-link.active::after { width: calc(100% - 1.9rem); }

.ds-navbar { min-height: 78px; }

.ds-nav-links { list-style: none; }

/* Desktop: [ logo 200px ] [ navigation, centered & flexible ] [ login 150px ] */
@media (min-width: 992px) {
    .ds-navbar .ds-nav-inner {
        display: grid;
        grid-template-columns: 200px minmax(0, 1fr) 150px;
        align-items: center;
    }
    /* The collapse spans the navigation + login columns so it can fill all
       remaining width — this is what removes the empty space after Login. */
    .ds-navbar .ds-nav-main {
        grid-column: 2 / -1;
        display: flex;
        align-items: center;
        width: 100%;
        min-width: 0;
    }
    .ds-navbar .ds-nav-links {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        column-gap: 14px;
        margin-left: 0;
        min-width: 0;
    }
    .ds-navbar .ds-nav-links .nav-link { padding: .5rem .5rem; }
    /* Login sits at the right end of the bar, 55px from the viewport edge. */
    .ds-navbar .ds-nav-cta-wrap {
        flex: 0 0 150px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .ds-navbar .ds-nav-inner { grid-template-columns: 150px minmax(0, 1fr) 130px; }
    .ds-navbar .ds-brand-logo { height: 46px; max-height: 46px; max-width: 120px; }
    .ds-navbar .ds-nav-links { column-gap: 0; }
    .ds-navbar .ds-nav-links .nav-link { padding: .5rem .35rem; font-size: 14px; }
    .ds-navbar .ds-nav-cta-wrap { flex: 0 0 130px; }
}

/* Login button — icon + label perfectly centred, fixed height */
.ds-nav-cta-wrap { display: flex; align-items: center; margin-top: .4rem; }
@media (min-width: 992px) { .ds-nav-cta-wrap { margin-top: 0; } }
.ds-nav-cta-wrap .ds-nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 116px;
    height: 46px;
    padding: 0 18px;
    line-height: 1;
    text-align: center;
}
.ds-nav-cta-wrap .ds-nav-cta i { font-size: 1rem; line-height: 1; position: static; }

.ds-dropdown {
    margin-top: .4rem !important;
    min-width: 240px;
    padding: .5rem;
    border: 1px solid var(--ds-line);
    border-radius: 14px;
    box-shadow: var(--ds-shadow-lg);
}
.ds-dropdown-wide { min-width: 290px; }
.ds-dropdown::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}
.ds-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .52rem .8rem;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--ds-ink);
    transition: background-color .2s ease, color .2s ease;
}
.ds-dropdown .dropdown-item i { font-size: 1rem; color: var(--ds-primary); }
.ds-dropdown .dropdown-item:hover,
.ds-dropdown .dropdown-item:focus,
.ds-dropdown .dropdown-item.active {
    background: var(--ds-primary-soft);
    color: var(--ds-primary-dark);
}
.ds-sublist { list-style: none; margin: .1rem 0; padding: 0; }
.ds-subitem { padding-left: 2.35rem !important; font-size: .87rem; color: var(--ds-text); position: relative; }
.ds-subitem::before {
    content: "";
    position: absolute;
    left: 1.3rem;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ds-gold);
    transform: translateY(-50%);
}

@media (min-width: 992px) {
    .ds-navbar .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        pointer-events: none;
        transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    }
    .ds-navbar .nav-item.dropdown:hover > .dropdown-menu,
    .ds-navbar .nav-item.dropdown:focus-within > .dropdown-menu,
    .ds-navbar .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

@media (max-width: 991.98px) {
    .ds-navbar .navbar-collapse {
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        padding: .75rem 0 1.25rem;
    }
    .ds-dropdown {
        position: static;
        width: 100%;
        margin: 0 0 .5rem 1.1rem !important;
        padding: .25rem 0;
        border: 0;
        border-left: 2px solid var(--ds-line);
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
    .ds-dropdown::before { display: none; }
    .ds-navbar .navbar-nav .nav-link::after { display: none; }
}

/* --------------------------------------------------------------
   7. Hero slider
-------------------------------------------------------------- */
.ds-hero-slider {
    position: relative;
    height: min(78vh, 640px);
    min-height: 460px;
    overflow: hidden;
}
.ds-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s ease, visibility .9s ease;
}
.ds-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.ds-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ds-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(43,27,99,.82) 0%, rgba(43,27,99,.55) 46%, rgba(43,27,99,.25) 100%);
}
.ds-slide-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: #fff;
}
.ds-slide-label {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem 1rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, .1);
}
.ds-slide-headline {
    max-width: 640px;
    margin: 1.1rem 0 0;
    font-size: clamp(1.9rem, 4.4vw, 3.4rem);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 2px 18px rgba(43,27,99,.45);
}
.ds-slide-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: 2rem;
}
/* text entrance */
.ds-slide .ds-slide-label,
.ds-slide .ds-slide-headline,
.ds-slide .ds-slide-actions {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease .35s, transform .7s ease .35s;
}
.ds-slide.is-active .ds-slide-label,
.ds-slide.is-active .ds-slide-headline,
.ds-slide.is-active .ds-slide-actions { opacity: 1; transform: translateY(0); }

/* controls */
.ds-slider-btn {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: rgba(43,27,99,.35);
    color: #fff;
    font-size: 1.05rem;
    transition: background-color .25s ease, opacity .25s ease;
}
.ds-slider-prev { left: 1.25rem; }
.ds-slider-next { right: 1.25rem; }
.ds-slider-btn:hover { background: var(--ds-primary); border-color: var(--ds-primary); }

.ds-slider-dots {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    z-index: 3;
    transform: translateX(-50%);
    display: flex;
    gap: .55rem;
}
.ds-dot {
    width: 26px;
    height: 4px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .4);
    padding: 0;
    transition: background-color .25s ease, width .25s ease;
}
.ds-dot.is-active { background: var(--ds-gold); width: 38px; }

@media (max-width: 767.98px) {
    .ds-hero-slider { height: 68vh; min-height: 400px; }
    .ds-slider-btn { width: 38px; height: 38px; font-size: .9rem; }
    .ds-slide-headline { font-size: clamp(1.6rem, 6.4vw, 2.2rem); }
}

/* --------------------------------------------------------------
   8. Sections & headings
-------------------------------------------------------------- */
.section { padding: 6rem 0; }
.section-surface { background: var(--ds-bg-soft); }
.ds-section-tight { padding: 4rem 0 5.5rem; }

.ds-section-head { max-width: 680px; margin-bottom: 3rem; }
.ds-section-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.ds-section-head-center .ds-eyebrow { justify-content: center; }
.ds-head-split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    max-width: none;
}
.ds-head-link { margin-bottom: .35rem; }

.ds-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ds-primary);
}
.ds-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--ds-gold);
}
.ds-eyebrow-light { color: #b9c8f5; }

.ds-section-title {
    font-size: clamp(1.7rem, 3.1vw, 2.4rem);
    font-weight: 700;
    line-height: 1.22;
    margin: .85rem 0 1.05rem;
}
.ds-section-title span {
    background: linear-gradient(90deg, var(--ds-primary), var(--ds-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ds-section-copy { color: var(--ds-text); margin-bottom: 1.05rem; }
.ds-section-lead { color: var(--ds-text); font-size: 1.02rem; }

/* --------------------------------------------------------------
   9. About
-------------------------------------------------------------- */
.ds-media-frame { position: relative; margin: 0; }
.ds-media-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-lg);
}
.ds-media-frame::after {
    content: "";
    position: absolute;
    top: 1.3rem;
    left: 1.3rem;
    right: -1.3rem;
    bottom: -1.3rem;
    border: 2px solid var(--ds-primary-soft);
    border-radius: var(--ds-radius-lg);
    z-index: 0;
}
.ds-about-media img { aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------
   10. Recognition & Affiliation — premium logo showcase
   Two-row layout: 8 cards (top) + 3 centered larger cards (bottom).
   White cards, slight lavender border, no filters, original colors.
-------------------------------------------------------------- */
.ds-affil { background: #ffffff; }
.ds-affil .ds-section-lead { max-width: 720px; margin-left: auto; margin-right: auto; }

/* NCVET recognition statement box */
.ds-ncvet-box {
    max-width: 880px;
    margin: 0 auto 2.5rem;
    background: #f5f2ff;
    border: 1px solid var(--ds-gold-soft);
    border-left: 4px solid var(--ds-primary);
    border-radius: var(--ds-radius);
    padding: 1.5rem 1.75rem;
    box-shadow: var(--ds-shadow-sm);
}
.ds-ncvet-box-inner { max-width: 780px; }
.ds-ncvet-eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ds-primary);
    margin-bottom: .6rem;
    padding: .2rem .6rem;
    background: var(--ds-primary-soft);
    border-radius: 3px;
}
.ds-ncvet-box p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--ds-ink);
}

/* Logo grid layouts */
.ds-affil-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}
.ds-affil-grid-row1 {
    grid-template-columns: repeat(8, 1fr);
    max-width: 1220px;
    margin: 0 auto;
}
.ds-affil-grid-row2 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 720px;
    margin: 3.25rem auto 0;   /* clear vertical gap between the two rows */
    gap: 2.5rem;              /* wider horizontal spacing between cards */
}

.ds-affil-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: .9rem .5rem;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-sm);
    box-shadow: var(--ds-shadow-sm);
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.ds-affil-card:hover {
    border-color: var(--ds-primary);
    box-shadow: var(--ds-shadow-md);
    transform: translateY(-4px);
}
.ds-affil-card-large {
    min-height: 150px;        /* same height as row 1 for a consistent grid */
    padding: .75rem .5rem;    /* trimmed so the larger row-2 logo still fits */
}
.ds-affil-logo {
    width: auto;
    max-width: 100%;          /* fills the padded card content box (~15% more visible width) */
    height: auto;
    max-height: 140px;        /* was 120px — ~17% larger */
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0 auto;
}
.ds-affil-logo-row1,
.ds-affil-logo-row2 { max-height: 140px; }
/* Second row (NCVET / Rotate / Durga Skills) slightly larger again */
.ds-affil-logo-row2 { max-height: 145px; }

@media (max-width: 991.98px) {
    .ds-affil-grid-row1 { grid-template-columns: repeat(3, 1fr); }
    .ds-affil-grid-row2 { grid-template-columns: repeat(3, 1fr); margin-top: 2.25rem; gap: 1.5rem; }
    .ds-affil-logo-row1,
    .ds-affil-logo-row2 { max-height: 126px; }
}
@media (max-width: 575.98px) {
    .ds-affil-grid-row1 { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .ds-affil-grid-row2 { grid-template-columns: 1fr; max-width: 300px; margin-top: 1.75rem; gap: 1rem; }
    .ds-affil-card { min-height: 130px; padding: .7rem .5rem; }
    .ds-affil-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .ds-affil-logo-row1,
    .ds-affil-logo-row2 { max-height: 116px; }
    .ds-ncvet-box { margin-bottom: 1.75rem; padding: 1.1rem 1.3rem; }
}

/* --------------------------------------------------------------
   11. Statistics — light theme: #F7F8FC section, white stat cards
   Numbers & icons in brand purple, labels in dark gray.
-------------------------------------------------------------- */
.ds-stats-band {
    position: relative;
    overflow: hidden;
    padding: 4.25rem 0;
    background: #F7F8FC;
    color: var(--ds-ink);
}
.ds-stats-band::before { display: none; }
.ds-stats-band .container { position: relative; z-index: 1; }
.ds-stat {
    text-align: center;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    padding: 1.75rem 1.25rem;
    box-shadow: var(--ds-shadow-sm);
}
.ds-stat-icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: .8rem;
    border-radius: 14px;
    font-size: 1.35rem;
    color: var(--ds-primary);
    background: var(--ds-primary-soft);
}
.ds-stat-value {
    font-family: var(--ds-font-head);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    line-height: 1.1;
    color: var(--ds-primary);
}
.ds-stat-plus { color: var(--ds-primary); margin-left: .1rem; }
.ds-stat p {
    margin-top: .4rem;
    font-size: .92rem;
    color: var(--ds-muted);
}
@media (min-width: 992px) {
    .ds-stats-band .col-lg-3:not(:last-child) .ds-stat {
        border-right: 1px solid var(--ds-line);
    }
}

/* --------------------------------------------------------------
   12. Services (What We Do)
-------------------------------------------------------------- */
.ds-service-card {
    position: relative;
    height: 100%;
    padding: 2rem 1.7rem;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ds-service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--ds-primary), var(--ds-accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.ds-service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ds-shadow-md);
    border-color: transparent;
}
.ds-service-card:hover::before { transform: scaleX(1); }
/* Fixed image area — real artwork from assets/images (no filters, no distortion) */
.service-image {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.service-image img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    display: block;
}
.ds-service-card h3 { font-size: 1.12rem; margin-bottom: .55rem; }
.ds-service-card p  { font-size: .93rem; color: var(--ds-text); }

/* --------------------------------------------------------------
   13. Sectors (Our Assessors)
   Fixed-height logo area, consistent title position, consistent
   description height and bottom-aligned "View assessors" link.
-------------------------------------------------------------- */
.ds-sector-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.4rem 1.3rem;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ds-sector-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--ds-shadow-md);
}

.assessor-logo-area {
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.assessor-logosingle,
.assessor-logo-multi {
    object-fit: contain;
    object-position: center;
    background: transparent;
}
.assessor-logosingle {
    max-width: 90px;
    max-height: 60px;
    width: auto;
    height: auto;
}
.assessor-logo-multi {
    max-width: 55px;
    max-height: 50px;
    width: auto;
    height: auto;
}
.ds-sector-card h3 {
    font-size: 1.1rem;
    margin: 0 0 .45rem;
    color: var(--ds-ink);
}
.assessor-description {
    min-height: 48px;
    font-size: .92rem;
    color: var(--ds-text);
    margin: 0 0 .8rem;
}
.ds-sector-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    padding-top: .7rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--ds-primary);
    text-decoration: none;
}
.ds-sector-link i {
    transition: transform .25s ease;
}
.ds-sector-link:hover {
    color: var(--ds-primary-dark);
}
.ds-sector-link:hover i {
    transform: translateX(4px);
}

/* --------------------------------------------------------------
   14. Gallery
-------------------------------------------------------------- */
.ds-gallery-item {
    position: relative;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--ds-shadow-sm);
}
.ds-gallery-item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .5s ease;
}
.ds-gallery-item figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.4rem 1rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(78, 47, 212, .85));
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s ease, transform .35s ease;
}
.ds-gallery-item:hover img { transform: scale(1.06); }
.ds-gallery-item:hover figcaption { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------
   15. Why Choose Us
-------------------------------------------------------------- */
.ds-why-card {
    height: 100%;
    padding: 1.9rem 1.6rem;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    transition: transform .3s ease, box-shadow .3s ease;
}
.ds-why-card:hover { transform: translateY(-5px); box-shadow: var(--ds-shadow-md); }
/* Fixed image area — real artwork from assets/images (no filters, no distortion) */
.feature-image {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.feature-image img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    display: block;
}
.ds-why-card h3 { font-size: 1.08rem; margin-bottom: .45rem; }
.ds-why-card p  { font-size: .92rem; color: var(--ds-text); }

/* --------------------------------------------------------------
   16. CTA panel
-------------------------------------------------------------- */
.ds-cta-panel {
    max-width: 880px;
    margin: 0 auto;
    padding: 4.25rem 2.5rem;
    border-radius: var(--ds-radius-lg);
    color: #fff;
    background:
        radial-gradient(700px 320px at 90% 0%, rgba(124, 92, 255, .30), transparent 60%),
        radial-gradient(560px 280px at 0% 100%, rgba(109, 59, 209, .18), transparent 55%),
        linear-gradient(115deg, var(--ds-primary-deep), var(--ds-primary-dark) 55%, var(--ds-navy-mid));
    box-shadow: var(--ds-shadow-lg);
}
.ds-cta-panel h2 {
    color: #fff;
    font-size: clamp(1.8rem, 3.3vw, 2.5rem);
    margin: 1rem auto;
    max-width: 640px;
}
.ds-cta-panel p { color: rgba(255, 255, 255, .84); max-width: 560px; margin: 0 auto; }
.ds-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.2rem;
}
@media (max-width: 575.98px) { .ds-cta-panel { padding: 3rem 1.5rem; } }

/* --------------------------------------------------------------
   17. Contact form & points
-------------------------------------------------------------- */
.ds-contact-points { display: grid; gap: .9rem; margin-top: 1.5rem; }
.ds-contact-points li { display: flex; align-items: center; gap: .85rem; }
.ds-contact-points i {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 1rem;
    color: var(--ds-primary);
    background: var(--ds-primary-soft);
}
.ds-contact-points span { font-weight: 600; color: var(--ds-ink); font-size: .95rem; }

.ds-form {
    padding: 2.25rem 2rem;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow-sm);
}
.ds-form .form-label {
    font-size: .86rem;
    font-weight: 600;
    color: var(--ds-ink);
    margin-bottom: .35rem;
}
.ds-form .req { color: var(--ds-accent); }
.ds-form .form-control {
    border: 1px solid var(--ds-line);
    border-radius: 10px;
    padding: .7rem .95rem;
    font-size: .95rem;
    color: var(--ds-ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ds-form .form-control:focus {
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 .2rem rgba(96, 70, 232, .18);
}
.ds-form .is-invalid,
.ds-form.was-validated .form-control:invalid,
.ds-form.was-validated textarea:invalid {
    border-color: #dc2626;
}
.ds-form .is-invalid:focus,
.ds-form.was-validated .form-control:invalid:focus,
.ds-form.was-validated textarea:invalid:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 .2rem rgba(220, 38, 38, .12);
}
.ds-form .invalid-feedback {
    color: #dc2626;
    font-size: .82rem;
    margin-top: .3rem;
}

/* Contact form status messages — light corporate design */
.ds-form-error {
    color: #b91c1c;
    font-size: .92rem;
    font-weight: 600;
    padding: .75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
}
.ds-form-success {
    color: #047857;
    font-size: .92rem;
    font-weight: 600;
    padding: .75rem 1rem;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
}
.ds-form-note {
    color: var(--ds-primary-dark);
    font-size: .92rem;
    font-weight: 600;
}

/* --------------------------------------------------------------
   18. Footer
-------------------------------------------------------------- */
.ds-footer {
    background: var(--ds-primary-deep);
    color: #FFFFFF;
    padding-top: 2.25rem;
    font-size: .95rem;
    overflow-x: clip;
}
/* Wide FULL-WIDTH footer wrapper — no max-width cap, content uses the viewport */
.ds-footer-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: clamp(28px, 4vw, 64px);
    padding-right: clamp(28px, 4vw, 64px);
    box-sizing: border-box;
}
/* Full-width 5-column grid: Company | Links | Public Info | Contact | Map */
.ds-footer-main-row {
    width: 100%;
    display: grid;
    grid-template-columns:
        minmax(220px, 1.35fr)
        minmax(150px, 1fr)
        minmax(170px, 1fr)
        minmax(260px, 1.3fr)
        minmax(220px, 1.15fr);
    gap: 32px;
}
/* Neutralize Bootstrap row/column sizing inside the footer grid */
.ds-footer-main-row.row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin-left: 0;
    margin-right: 0;
}
.ds-footer-main-row > div[class*="col"] {
    width: auto;
    max-width: none;
    flex: none;
    padding-left: 0;
    padding-right: 0;
    min-width: 0;
}
@media (max-width: 1199.98px) {
    .ds-footer-main-row {
        grid-template-columns:
            minmax(200px, 1.4fr)
            minmax(140px, 1fr)
            minmax(160px, 1fr)
            minmax(240px, 1.2fr);
        gap: 28px;
    }
    .ds-footer-findus { grid-column: 1 / -1; }
    .ds-footer-findus .ds-footer-map { max-width: 640px; }
}
@media (max-width: 767.98px) {
    .ds-footer-main-row { grid-template-columns: 1fr; gap: 1.75rem; }
    .ds-footer-findus .ds-footer-map { max-width: none; }
}
@media (max-width: 575.98px) {
    .ds-footer-inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .ds-footer-about-text { max-width: none; }
}
.ds-brand-footer { margin-bottom: 1.2rem; }
.ds-brand-footer .ds-brand-name { color: #FFFFFF; }
.ds-brand-footer .ds-brand-tag  { color: #FFFFFF; }
.ds-footer-about-text { color: #FFFFFF; line-height: 1.85; max-width: 360px; margin-bottom: 1.5rem; }

.ds-social { display: flex; flex-wrap: wrap; gap: .55rem; }
.ds-social a {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    color: #FFFFFF;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.ds-social a:hover { background: rgba(255, 255, 255, .18); border-color: #FFFFFF; color: #FFFFFF; transform: translateY(-3px); }
/* Footer left-section social icons only (LinkedIn, X, Facebook, Instagram, YouTube) — white; header (.ds-social-mini) untouched, size/spacing/border/hover unchanged */
.ds-footer-about .ds-social a,
.ds-footer-about .ds-social a i { color: #FFFFFF !important; }
.ds-footer-about .ds-social a:hover,
.ds-footer-about .ds-social a:hover i { color: #FFFFFF !important; }

.ds-footer-title {
    position: relative;
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    color: #FFFFFF;
    font-family: var(--ds-font-head);
    font-size: 1rem;
    font-weight: 600;
}
.ds-footer-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2.2rem;
    height: 2px;
    border-radius: 2px;
    background: #FFFFFF;
}
.ds-footer-links li { margin-bottom: .6rem; }
.ds-footer-links a {
    color: #FFFFFF;
    font-size: .92rem;
    text-decoration: none;
    transition: color .2s ease, padding-left .2s ease;
}
.ds-footer-links a:hover { color: #FFFFFF; padding-left: .35rem; }

.ds-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: .65rem;
    font-size: .88rem;
}
.ds-footer-contact i { margin-top: .2rem; font-size: 1.05rem; color: #FFFFFF; }
.ds-footer-contact span { line-height: 1.65; color: #FFFFFF; }
.ds-footer-contact a { color: #FFFFFF; text-decoration: none; transition: color .2s ease; }
.ds-footer-contact a:hover { color: #FFFFFF; text-decoration: underline; }
/* Keep the long alternate email inside its column on desktop */
.ds-footer-contact-email a { overflow-wrap: anywhere; word-break: break-word; }

.ds-footer-bottom {
    margin-top: 1.75rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
/* Copyright bar shares the same wide spacing as the footer content */
.ds-footer-bottom .ds-footer-inner {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
@media (min-width: 768px) {
    .ds-footer-bottom .ds-footer-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}
.ds-footer-bottom p { color: #FFFFFF; font-size: .88rem; }
.ds-footer-bottom strong { color: #FFFFFF; }
.ds-footer-legal { gap: 1.6rem; }
.ds-footer-legal a {
    color: #FFFFFF;
    font-size: .85rem;
    text-decoration: none;
    transition: color .2s ease;
}
.ds-footer-legal a:hover { color: #FFFFFF; }

/* --------------------------------------------------------------
   18b. Footer contact details + Find Us map
-------------------------------------------------------------- */
.ds-contact-label {
    display: inline-block;
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: .15rem;
}
.ds-contact-suffix { color: rgba(255, 255, 255, .7); font-size: .82rem; }
.ds-footer .ds-contact-label { color: #FFFFFF; }
.ds-footer .ds-contact-suffix { color: #FFFFFF; }

.ds-footer-map-row {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.ds-footer-map-row .ds-footer-title { margin-bottom: 1rem; }

.ds-footer-map {
    display: block;
    width: 100%;
    max-width: none;
    height: 180px;
    border: 0;
    border-radius: 10px;
    box-shadow: var(--ds-shadow-md);
    filter: saturate(.95);
}
.ds-contact-map { height: 260px; }

@media (max-width: 767.98px) {
    .ds-footer-map { height: 180px; }
    .ds-contact-map { height: 220px; }
}

/* --------------------------------------------------------------
   19. Inner pages (banner / under construction)
-------------------------------------------------------------- */
.ds-page-banner {
    position: relative;
    overflow: hidden;
    padding: 4.25rem 0 4rem;
    color: #fff;
    background:
        radial-gradient(700px 340px at 88% -20%, rgba(109, 59, 209, .35), transparent 60%),
        linear-gradient(115deg, var(--ds-primary-deep), var(--ds-navy-mid) 60%, var(--ds-primary-dark));
}
.ds-page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.4px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 80%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 80%);
    pointer-events: none;
}
.ds-page-banner .container { position: relative; }
.ds-breadcrumb { font-size: .85rem; margin-bottom: .85rem; }
.ds-breadcrumb a { color: #d6daff; text-decoration: none; }
.ds-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.ds-breadcrumb .breadcrumb-item { color: rgba(255, 255, 255, .55); }
.ds-breadcrumb .breadcrumb-item.active { color: rgba(255, 255, 255, .85); }
.ds-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .4); }
.ds-page-title { color: #fff; font-size: clamp(1.9rem, 3.8vw, 2.7rem); font-weight: 700; margin: 0; }
.ds-page-lead { max-width: 640px; margin-top: .85rem; color: rgba(255, 255, 255, .8); }

.ds-soon-card {
    max-width: 720px;
    margin: 0 auto;
    padding: 3rem 2rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow-md);
}
.ds-soon-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    font-size: 1.55rem;
    color: var(--ds-accent);
    background: var(--ds-accent-soft);
}
.ds-soon-card h2 { font-size: 1.45rem; margin-bottom: .85rem; }
.ds-soon-card p { color: var(--ds-text); max-width: 480px; margin: 0 auto; }
.ds-soon-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.7rem;
}

/* --------------------------------------------------------------
   20. Utilities, animations & responsiveness
-------------------------------------------------------------- */
.ds-backtotop {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1080;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: #25D366;
    color: #fff;
    font-size: 1.1rem;
    text-decoration: none;
    box-shadow: var(--ds-shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background-color .25s ease;
}
.ds-backtotop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.ds-backtotop:hover { background: #1DA851; color: #fff; }
/* WhatsApp stays on top; Back-to-Top sits directly underneath, same size, brand purple. */
#dsBackToTop { bottom: calc(1.25rem + 44px + .6rem); }
.ds-backtotop-top { background: var(--ds-primary); }
.ds-backtotop-top:hover { background: var(--ds-primary-dark); color: #fff; }

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.row .reveal:nth-child(2) { transition-delay: .08s; }
.row .reveal:nth-child(3) { transition-delay: .16s; }
.row .reveal:nth-child(4) { transition-delay: .24s; }
.row .reveal:nth-child(5) { transition-delay: .32s; }
.row .reveal:nth-child(6) { transition-delay: .40s; }
.row .reveal:nth-child(7) { transition-delay: .48s; }
.row .reveal:nth-child(8) { transition-delay: .56s; }

@media (max-width: 991.98px) {
    .section { padding: 4.5rem 0; }
    .ps-lg-5 { padding-left: 0 !important; }
    .ds-media-frame::after { display: none; }
}

@media (max-width: 575.98px) {
    .ds-cta-actions .btn { width: 100%; justify-content: center; }
    .ds-soon-actions .btn { width: 100%; justify-content: center; }
    .ds-footer-about-text { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .ds-jobbar-text { animation: none; }
    .ds-slide .ds-slide-label,
    .ds-slide .ds-slide-headline,
    .ds-slide .ds-slide-actions { transition: none; }
    .btn-ds, .ds-service-card, .ds-sector-card, .ds-why-card,
    .ds-gallery-item img, .ds-gallery-item figcaption,
    .ds-backtotop, .ds-navbar, .ds-navbar .navbar-nav .nav-link::after { transition: none !important; }
}

/* --------------------------------------------------------------
   13a. Other Sectors card — BFSI + Sports logos only
   Exactly two contain-fit logos in the shared 65px logo area.
-------------------------------------------------------------- */
.other-sector-logos {
    height: 65px;
    gap: 18px;
}
.other-sector-logos img {
    width: 65px;
    height: 55px;
    max-width: 65px;
    max-height: 55px;
    object-fit: contain;
    display: block;
}


/* --------------------------------------------------------------
   21. Our Company page
   Light lavender hero, highlights card, story, VMV cards and
   closing CTA. Reuses the --ds-* tokens defined in section 1.
-------------------------------------------------------------- */

/* ---- 21a. Our Company hero ----
   our_company.png (2172x724, 3:1) is the full-width hero background.
   Desktop uses background-size:cover so the artwork spans the FULL hero
   width - the left lavender decoration and the right-hand building are
   both shown, with only a small vertical trim of sky/ground. `contain`
   was used before, which capped the artwork at 380*3 = 1140px wide and
   left up to 780px of flat fill on the left at 1920px, making the
   left-side artwork look cut off. Aspect ratio is never distorted. */
.ds-company-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 380px;
    padding: 2.75rem 0;
    color: var(--ds-ink);
    background-color: #c6b8fb;
    background-image: var(--ds-company-hero-bg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    border-bottom: 1px solid var(--ds-line);
    overflow: hidden;
}
/* suppress the dotted texture from the base banner - the artwork supplies it */
.ds-company-hero::before { content: none; }
.ds-company-hero .container { position: relative; z-index: 1; }
.ds-company-hero .ds-page-title { color: var(--ds-ink); }
.ds-company-hero .ds-page-lead { color: var(--ds-text); font-size: 1.08rem; max-width: 520px; }

/* ---- 21b. Highlights / stats card ---- */
.ds-hl-card {
    height: 100%;
    padding: 2rem 1.75rem;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-md);
}
.ds-hl-title { font-size: 1.12rem; margin-bottom: 1.35rem; }
.ds-hl-list { display: grid; gap: 1.15rem; margin: 0; padding: 0; }
.ds-hl-list li { display: flex; gap: .9rem; align-items: flex-start; }
.ds-hl-icon {
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: var(--ds-radius-sm);
    font-size: 1.25rem;
    color: var(--ds-primary);
    background: var(--ds-primary-soft);
}
/* Highlight-card icon images: fixed size, original aspect ratio preserved. */
.ds-hl-icon img {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: contain;
}
.ds-hl-list h3 { font-size: .99rem; margin-bottom: .18rem; }
.ds-hl-list p { font-size: .89rem; color: var(--ds-text); line-height: 1.62; }

/* ---- 21c. Our story ---- */
.ds-story-media img { aspect-ratio: 4 / 3; }
/* Story and the VMV cards share one lavender band — tighten the join. */
.ds-story-section { padding-bottom: 3.25rem; }
#vision-mission .ds-section-head { margin-bottom: 2.25rem; }

/* ---- 21d. Vision / Mission / Values / Focus cards ---- */
.ds-vmv-card {
    height: 100%;
    padding: 1.7rem 1.5rem;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ds-vmv-card:hover {
    transform: translateY(-4px);
    border-color: var(--ds-primary-soft);
    box-shadow: var(--ds-shadow-md);
}
.ds-vmv-icon {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    margin-bottom: .95rem;
    border-radius: var(--ds-radius-sm);
    font-size: 1.3rem;
    color: var(--ds-primary);
    background: var(--ds-primary-soft);
}
/* VMV card icon images: fixed size, original aspect ratio preserved. */
.ds-vmv-icon img {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: contain;
}
.ds-vmv-label {
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ds-primary);
    margin-bottom: .4rem;
}
.ds-vmv-card h3 { font-size: 1.05rem; margin-bottom: .38rem; }
.ds-vmv-card p:last-child { font-size: .9rem; color: var(--ds-text); }

/* ---- 21e. Closing CTA banner ---- */
.ds-cta-banner {
    position: relative;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
    padding: 3.25rem 2.5rem;
    border-radius: var(--ds-radius-lg);
    color: #fff;
    background:
        radial-gradient(640px 300px at 88% -10%, rgba(124, 92, 255, .40), transparent 62%),
        linear-gradient(120deg, var(--ds-primary-deep), var(--ds-primary) 135%);
    box-shadow: var(--ds-shadow-lg);
}
.ds-cta-banner::after {
    content: "";
    position: absolute;
    right: -90px; bottom: -140px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}
.ds-cta-banner > * { position: relative; z-index: 1; }
.ds-cta-banner .ds-eyebrow { justify-content: center; color: #d9d2ff; }
.ds-cta-banner .ds-eyebrow::before { background: rgba(255, 255, 255, .55); }
.ds-cta-banner h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.35rem); margin: .95rem auto; max-width: 660px; }
.ds-cta-banner p { color: rgba(255, 255, 255, .84); max-width: 600px; margin: 0 auto; }
.ds-cta-banner .ds-cta-actions { margin-top: 1.9rem; }

/* Light button for use on purple panels */
.btn-ds-light {
    background: #fff;
    color: var(--ds-primary-deep);
    box-shadow: 0 14px 28px -14px rgba(43, 27, 99, .55);
}
.btn-ds-light:hover, .btn-ds-light:focus {
    background: var(--ds-primary-tint);
    color: var(--ds-primary-deep);
    transform: translateY(-2px);
}

/* ---- 21f. Responsiveness ---- */
/* Tablet/mobile: stack the artwork under the text so the heading always sits
   on flat lavender (fully readable) and the whole image stays uncropped. */
@media (max-width: 991.98px) {
    .ds-company-hero {
        min-height: 0;
        padding: 2.5rem 0 0;
        background-position: right bottom;
        background-size: contain;
    }
}
@media (max-width: 575.98px) {
    .ds-company-hero {
        min-height: 0;
        padding: 2.25rem 0 0;
        background-position: right bottom;
        background-size: contain;
    }
    .ds-company-hero .ds-page-lead { font-size: 1rem; }
    .ds-hl-card { padding: 1.6rem 1.35rem; }
    .ds-cta-banner { padding: 2.5rem 1.35rem; }
    .ds-vmv-card { padding: 1.5rem 1.35rem; }
}

/* ---- 21g. Our Achievements + Our Services (text only, no imagery) ---- */

/* Section intro: 2-col grid so the 2 Lakh+ figure sizes to its own
   content instead of stretching into a tall empty box. */
.ds-ach-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 2rem 3rem;
    align-items: center;
    margin-bottom: 3.25rem;
}
.ds-ach-top > * { min-width: 0; }

/* Prominent achievement stat: "2 Lakh+" centred over "Trainees Evaluated".
   Text-only graphic (no image). Width is capped so the huge number cannot
   push the card past the grid track; height is fully content-driven. */
.ds-ach-figure {
    align-self: center;
    margin: 0;
    padding: 2.35rem 2.5rem 2.15rem;
    background: #fff;
    border: 1px solid rgba(96, 70, 232, .18);
    border-left: 6px solid var(--ds-primary);
    border-radius: var(--ds-radius-lg);
    box-shadow: 0 26px 52px -30px rgba(43, 27, 99, .55);
    text-align: center;
}
/* Label sits BELOW the number, centred, uppercase, letter-spaced. */
.ds-ach-figure-label {
    display: block;
    margin: .85rem 0 0;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ds-muted);
}
/* Large extra-bold figure: deep navy/purple, bright brand-purple "+". */
.ds-ach-figure-value {
    display: block;
    font-size: clamp(3.1rem, 6.4vw, 4.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--ds-primary-deep);
    white-space: nowrap;
}
.ds-ach-figure-plus { color: var(--ds-primary); }

/* Intro copy: cap the measure so long lines stay readable. */
.ds-ach-intro p { max-width: 68ch; }
.ds-ach-intro p + p { margin-top: 1.05rem; }

/* Subheadings: divider plus space on BOTH sides so the heading never
   crowds the list or paragraph beneath it. */
.ds-ach-sub {
    font-size: 1.04rem;
    font-weight: 700;
    color: var(--ds-primary-deep);
    margin: 0 0 1.15rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--ds-line);
}

/* Grouped content blocks instead of one continuous wall of text. */
.ds-ach-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem 3rem;
}
.ds-ach-grid > * { min-width: 0; }

.ds-ach-block {
    padding: 1.5rem 1.5rem 1.65rem;
    background: var(--ds-bg-soft);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
}
.ds-ach-block > :last-child { margin-bottom: 0; }

/* Text list - even line spacing, no marker collision. */
.ds-ach-list {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--ds-text);
    font-size: .95rem;
}
.ds-ach-list li { margin-bottom: .55rem; line-height: 1.65; }
.ds-ach-list li:last-child { margin-bottom: 0; }
.ds-ach-list li::marker { color: var(--ds-primary); }

.ds-ach-block p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.75;
    color: var(--ds-text);
}

/* Readable pill-style text list (schemes / states) */
.ds-ach-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem .5rem;
}
.ds-ach-chips li {
    padding: .4rem .85rem;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--ds-primary-deep);
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: 999px;
}

/* Services grid: explicit 3 / 2 / 1 columns (auto-fit produced a
   cramped 4-up layout on wide screens). */
.ds-svc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
    counter-reset: ds-svc;
}
/* Each card is a 2-col grid: a FIXED number column plus a fluid text
   column. The number can never overlap the title because it occupies
   its own track instead of floating over the padding box. */
.ds-svc-item {
    counter-increment: ds-svc;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-content: start;
    column-gap: 1.1rem;
    row-gap: .45rem;
    min-width: 0;
    padding: 1.6rem 1.5rem;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.ds-svc-item:hover {
    border-color: rgba(96, 70, 232, .38);
    box-shadow: 0 14px 30px -22px rgba(43, 27, 99, .45);
}
/* Number badge - a real grid item, not an absolute overlay. */
.ds-svc-item::before {
    content: counter(ds-svc, decimal-leading-zero);
    grid-column: 1;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ds-primary-deep);
    background: var(--ds-bg-soft);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-sm);
}
/* Title and description share the text column, stacked beneath it. */
.ds-svc-item h3 {
    grid-column: 2;
    grid-row: 1;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--ds-ink);
    margin: 0;
}
.ds-svc-item p {
    grid-column: 2;
    grid-row: 2;
    font-size: .9rem;
    line-height: 1.7;
    color: var(--ds-text);
    margin: 0;
}

/* Tablet: 2 columns, intro stacks. */
@media (max-width: 991.98px) {
    .ds-svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-ach-top { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    /* Stacked: full-width card, so nothing clips and no dead space remains. */
    .ds-ach-figure { align-self: stretch; width: auto; max-width: 100%; padding: 1.85rem 1.5rem 1.7rem; }
    .ds-ach-figure-value { font-size: clamp(2.5rem, 9vw, 3.4rem); }
}
/* Mobile: single column, stacked blocks. */
@media (max-width: 767.98px) {
    .ds-svc-list { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .ds-ach-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .ds-ach-block { padding: 1.3rem 1.2rem 1.4rem; }
    .ds-ach-top { margin-bottom: 2rem; }
    .ds-svc-item { padding: 1.35rem 1.25rem; }
}
@media (max-width: 575.98px) {
    .ds-ach-chips li { font-size: .84rem; padding: .36rem .7rem; }
    .ds-svc-item { grid-template-columns: 40px minmax(0, 1fr); column-gap: .95rem; }
    .ds-svc-item::before { width: 40px; height: 40px; font-size: .88rem; }
}

/* ---- 22. Affiliated Partners page ---- */

/* Hero reuses ds-company-hero (same height, padding, dark-ink title, cover
   background) but needs the artwork's own lavender as the fill so the
   un-cropped image blends seamlessly into the banner. #e8e8fe is sampled from
   the left edge of affilated_partners.png (2048x768). */
.ds-page-banner.ds-partners-hero {
    background-color: #e8e8fe;
}

/* Desktop only: hero height 380px -> 330px (-13%). Background sizing and
   positioning are deliberately LEFT AT the base .ds-company-hero values
   (cover / right center) so the original full-width composition is restored:
   the artwork fills the whole banner and blends into its own lavender left
   side, with the city skyline and handshake on the right. Nothing but the
   height is overridden here. Scoped to >=992px so the tablet/mobile stacking
   rules (min-height: 0, contain, padding-bottom: 37.5vw) stay authoritative. */
@media (min-width: 992px) {
    .ds-page-banner.ds-partners-hero {
        min-height: 330px;
    }
}

@media (max-width: 991.98px) {
    /* The artwork is 2.667:1, so once `contain` fits it to the viewport width
       its height is 100vw / 2.667 = 37.5vw. Reserving exactly that as bottom
       padding puts the FULL, uncropped image below the text - no overlap, no
       side cropping, no horizontal scroll. */
    .ds-page-banner.ds-partners-hero {
        padding-bottom: 37.5vw;
        background-position: right bottom;
        background-size: contain;
    }
}

/* Logos are plain <img> elements - there is no link to click. Neutralise the
   lift / border-glow affordance so the cards never imply clickability.
   Scoped to this page so the Home page cards are left untouched. */
.ds-partners-affil .ds-affil-card {
    cursor: default;
}
.ds-partners-affil .ds-affil-card:hover {
    border-color: var(--ds-line);
    box-shadow: var(--ds-shadow-sm);
    transform: none;
}

/* ---- 23. Quality Policy page (page-specific, no global changes) ---- */

/* Hero: the artwork's flat lavender left edge matches this fill, so the
   full image blends into the banner without an overlay or cropping. */
.ds-quality-hero { background-color: #f1effd; }

/* Subheading under the section title */
.ds-policy-sub {
    margin: .85rem 0 0;
    font-size: 1.06rem;
    font-weight: 600;
    color: var(--ds-primary-deep);
}

/* Original 4 policy paragraphs: comfortable measure and rhythm */
.ds-qp-copy {
    max-width: 78ch;
    margin: 0 auto;
}
.ds-qp-copy p {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.9;
    color: var(--ds-text);
}
.ds-qp-copy p + p { margin-top: 1.35rem; }
/* Five compact highlight cards distilled from the policy paragraphs */
.ds-qp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.1rem;
    margin-top: 2.75rem;
}
.ds-qp-card {
    padding: 1.5rem 1.35rem;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: 0 10px 24px -22px rgba(43, 27, 99, .45);
}
.ds-qp-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: .9rem;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-primary-soft);
    color: var(--ds-primary);
    font-size: 1.25rem;
}
/* Card icon images: fixed size, original aspect ratio preserved. */
.ds-qp-icon img {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: contain;
}
.ds-qp-card h3 {
    font-size: .99rem;
    margin-bottom: .4rem;
    color: var(--ds-ink);
}
.ds-qp-card p {
    margin: 0;
    font-size: .89rem;
    line-height: 1.65;
    color: var(--ds-text);
}

/* Impartiality intro */
.ds-imp-intro {
    max-width: 82ch;
    margin: 0 auto 2.4rem;
    text-align: center;
    font-size: 1.03rem;
    line-height: 1.85;
    color: var(--ds-text);
}

/* Numbered policy points: two columns on desktop, one on mobile.
   Each item is a grid with a dedicated number column, so the number
   badge can never overlap or touch the text. */
.ds-imp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.ds-imp-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 1.05rem;
    align-items: start;
    min-width: 0;
    padding: 1.15rem 1.25rem;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: 0 10px 24px -22px rgba(43, 27, 99, .45);
}
.ds-imp-num {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-primary-soft);
    color: var(--ds-primary-deep);
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .02em;
}
.ds-imp-body { min-width: 0; }
.ds-imp-body p {
    margin: 0;
    font-size: .94rem;
    line-height: 1.7;
    color: var(--ds-text);
}

/* Responsive: stack the artwork below the text on tablet/mobile (same
   2.667:1 artwork ratio as the Affiliated Partners hero), single column
   for the numbered points on small screens. */
@media (max-width: 991.98px) {
    .ds-quality-hero { padding-bottom: 37.5vw; }
}
@media (max-width: 767.98px) {
    .ds-imp-list { grid-template-columns: minmax(0, 1fr); }
    .ds-imp-intro { text-align: left; }
}

/* ---- 24. Manuals page (public-info/manuals.php) ---- */

/* White card holding the document register - same border, radius and
   restrained shadow as the site's other content cards. */
.ds-manuals-card {
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    overflow: hidden;
    box-shadow: 0 18px 40px -32px rgba(43, 27, 99, .45);
}

/* Table base: transparent background, light lavender row rules. */
.ds-manuals-table {
    margin: 0;
    --bs-table-bg: transparent;
}
.ds-manuals-table > thead > tr > th {
    padding: .9rem 1.3rem;
    background: var(--ds-primary-soft);
    border-bottom: 1px solid var(--ds-line);
    color: var(--ds-primary-deep);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ds-manuals-table > tbody > tr > td {
    padding: 1.05rem 1.3rem;
    border-color: var(--ds-line);
    vertical-align: middle;
    color: var(--ds-text);
}
.ds-manuals-table > tbody > tr:last-child > td { border-bottom: 0; }
.ds-manuals-table > tbody > tr:hover { background: rgba(96, 70, 232, .04); }

/* S.No column: narrow, centred, tabular purple figure. */
.ds-manuals-th-sno,
.ds-manuals-sno { width: 76px; text-align: center; }
.ds-manuals-sno {
    color: var(--ds-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Document name column: dark navy, readable weight and wrapping. */
.ds-manuals-name {
    color: var(--ds-ink);
    font-weight: 600;
    line-height: 1.55;
}

/* View / Download column right-aligned on desktop. */
.ds-manuals-th-act,
.ds-manuals-act { text-align: right; }
.ds-manuals-act { white-space: nowrap; }

/* "available soon" status pill - neutral, never styled like a link. */
.ds-manuals-status {
    display: inline-block;
    padding: .35rem .85rem;
    border: 1px solid var(--ds-line);
    border-radius: 999px;
    background: var(--ds-primary-tint);
    color: var(--ds-muted);
    font-size: .79rem;
    font-weight: 600;
}

/* PDF action buttons: solid purple View PDF + outlined Download. */
.ds-manuals-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}
.ds-manuals-btn {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .45rem 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ds-manuals-btn-view { background: var(--ds-primary); color: #fff; }
.ds-manuals-btn-view:hover,
.ds-manuals-btn-view:focus { background: var(--ds-primary-deep); color: #fff; }
.ds-manuals-btn-dl { background: #fff; color: var(--ds-primary); border-color: rgba(96, 70, 232, .38); }
.ds-manuals-btn-dl:hover,
.ds-manuals-btn-dl:focus { background: var(--ds-primary-soft); color: var(--ds-primary-deep); }
@media (max-width: 575.98px) {
    .ds-manuals-actions { justify-content: flex-start; }
}

@media (max-width: 575.98px) {
    .ds-manuals-table > thead > tr > th,
    .ds-manuals-table > tbody > tr > td { padding: .8rem .9rem; }
    .ds-manuals-th-sno, .ds-manuals-sno { width: 54px; }
    .ds-manuals-th-act, .ds-manuals-act { text-align: left; }
    .ds-manuals-act, .ds-manuals-status { white-space: normal; }
}


/* ---- 25. Manuals hero (public-info/manuals.php) ---- */

/* The hero reuses .ds-company-hero (380px, background-size: cover, position:
   right center) so manual.png (2172x724, 3:1) is staged exactly like the Our
   Company artwork: full-width on desktop, nothing distorted, only a small
   symmetric top/bottom trim of flat sky. Only the fill colour is overridden:
   #e5f2fc is sampled from the image''s own pale sky-blue left edge, so the
   un-cropped artwork blends into the banner and the dark navy heading stays
   readable on the left without needing a scrim. */
.ds-page-banner.ds-manuals-hero {
    background-color: #e5f2fc;
}

@media (max-width: 991.98px) {
    /* manual.png is 3:1, so once `contain` fits it to the viewport width its
       height is 100vw / 3 = 33.33vw. Reserving exactly that as bottom padding
       puts the FULL, uncropped image below the text - no overlap, no side
       cropping, no horizontal scroll. */
    .ds-page-banner.ds-manuals-hero {
        padding-bottom: 33.33vw;
        background-position: right bottom;
        background-size: contain;
    }
}

/* ---- 26. Manuals document actions (View PDF / Download buttons) ---- */

/* The action cell renders two real buttons instead of the old text link.
   Kept compact so the nowrap action column and mobile stacking stay intact. */
.ds-manuals-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: flex-end;
}
.ds-manuals-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .85rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ds-manuals-btn-view {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    color: #fff;
}
.ds-manuals-btn-view:hover, .ds-manuals-btn-view:focus {
    background: var(--ds-primary-deep);
    border-color: var(--ds-primary-deep);
    color: #fff;
}
.ds-manuals-btn-dl {
    background: #fff;
    border-color: rgba(96, 70, 232, .38);
    color: var(--ds-primary);
}
.ds-manuals-btn-dl:hover, .ds-manuals-btn-dl:focus {
    background: var(--ds-primary-tint);
    border-color: var(--ds-primary);
    color: var(--ds-primary-deep);
}
@media (max-width: 575.98px) {
    .ds-manuals-actions { justify-content: flex-start; }
}

/* --------------------------------------------------------------
   27. Grievance Redressal Mechanism page (public-info/grievance-redressal.php)
   Page-scoped styles only. Reuses the shared .ds-company-hero artwork
   treatment (section 21) and the --ds-* design tokens from section 1.
-------------------------------------------------------------- */

/* ---- 27a. Hero ----
   Grievance Redressal Mechanism.png (2016x780, 2.585:1) has a solid indigo
   panel on the left and the photo on the right. The fill matches the
   artwork's own left edge (#2d1d90) so the un-cropped background blends
   seamlessly, and a left-to-right scrim keeps the white title and lead
   readable wherever the photo begins behind the text. */
.ds-page-banner.ds-grm-hero { background-color: #2d1d90; }
.ds-page-banner.ds-grm-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(23, 14, 78, .85) 0%,
        rgba(23, 14, 78, .85) 40%,
        rgba(23, 14, 78, .55) 54%,
        rgba(23, 14, 78, 0) 68%);
    background-size: auto;
    -webkit-mask-image: none;
    mask-image: none;
    pointer-events: none;
}
.ds-page-banner.ds-grm-hero .ds-page-title {
    color: #fff;
    text-shadow: 0 2px 16px rgba(9, 5, 35, .35);
}
.ds-page-banner.ds-grm-hero .ds-page-lead {
    color: rgba(255, 255, 255, .88);
    text-shadow: 0 1px 10px rgba(9, 5, 35, .3);
}
/* Tablet & below: show the whole artwork beneath the text - `contain` fits
   it to the viewport width, so its height is 100vw / 2.585 = 38.7vw.
   Reserving that (plus a small gap) as bottom padding keeps the full,
   un-cropped composition visible with no overlap and no horizontal scroll.
   The scrim is dropped here: the text already sits on the solid fill. */
@media (max-width: 991.98px) {
    .ds-page-banner.ds-grm-hero {
        padding-bottom: calc(38.7vw + 1.75rem);
        background-position: right bottom;
        background-size: contain;
    }
    .ds-page-banner.ds-grm-hero::before { content: none; }
}

/* ---- 27b. Introduction lead panel ---- */
.ds-grm-lead-panel {
    max-width: 940px;
    padding: 1.85rem 2rem;
    background: var(--ds-primary-tint);
    border: 1px solid var(--ds-line);
    border-left: 4px solid var(--ds-primary);
    border-radius: var(--ds-radius-sm);
}
.ds-grm-lead-panel p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--ds-text);
}

/* ---- 27c. Scope cards (stakeholder groups) ----
   Five white cards in one evenly-spaced row on desktop, collapsing to
   3 -> 2 -> 1 columns on tablet and mobile. Each card shows the stakeholder
   artwork on top inside a fixed 96px band - max-width/max-height plus
   object-fit: contain keeps every image uncropped and at one consistent
   display size - followed by the title and a short description. */
.ds-grm-scope-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.25rem;
}
.ds-grm-scope-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 1.6rem 1.25rem 1.5rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: 0 10px 24px -22px rgba(43, 27, 99, .45);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.ds-grm-scope-card:hover {
    border-color: rgba(96, 70, 232, .35);
    box-shadow: var(--ds-shadow-md);
}
.ds-grm-scope-figure {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 96px;
    margin-bottom: 1.1rem;
}
.ds-grm-scope-figure img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.ds-grm-scope-card h3 {
    margin: 0 0 .4rem;
    font-size: .99rem;
    line-height: 1.35;
    color: var(--ds-ink);
}
.ds-grm-scope-card p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--ds-muted);
}
/* Narrow desktop (992-1199px): a little less padding/gap so five cards
   still sit comfortably in a single row. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .ds-grm-scope-grid { gap: 1rem; }
    .ds-grm-scope-card { padding: 1.5rem 1rem 1.4rem; }
}
@media (max-width: 991.98px) {
    .ds-grm-scope-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .ds-grm-scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .ds-grm-scope-grid { grid-template-columns: minmax(0, 1fr); }
    .ds-grm-scope-card { padding: 1.35rem 1.15rem 1.25rem; }
}

/* ---- 27d. Objectives cards ---- */
.ds-grm-obj-card {
    position: relative;
    height: 100%;
    overflow: hidden;
    padding: 1.9rem 1.6rem 1.7rem;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: 0 10px 24px -22px rgba(43, 27, 99, .45);
}
.ds-grm-obj-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.6rem;
    right: 1.6rem;
    height: 3px;
    background: var(--ds-primary);
    border-radius: 0 0 3px 3px;
}
.ds-grm-obj-num {
    display: block;
    margin-bottom: .8rem;
    font-family: var(--ds-font-head);
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ds-primary);
}
.ds-grm-obj-card p {
    margin: 0;
    font-size: .97rem;
    line-height: 1.7;
    color: var(--ds-text);
}

/* ---- 27e. Definition of grievance - check list ---- */
.ds-grm-copy { max-width: 82ch; }
.ds-grm-check-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem 2rem;
}
.ds-grm-check-grid li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    font-size: .99rem;
    color: var(--ds-text);
}
.ds-grm-check-grid li i {
    flex: 0 0 auto;
    margin-top: .18rem;
    font-size: 1.05rem;
    color: var(--ds-primary);
}
@media (max-width: 767.98px) {
    .ds-grm-check-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 27f. Data tables (committee + resolution types) ---- */
.ds-grm-table-card {
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow-sm);
    overflow: hidden;
}
.ds-grm-table {
    margin: 0;
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--ds-line);
}
.ds-grm-table > thead > tr > th {
    padding: .95rem 1.35rem;
    background: var(--ds-primary-soft);
    color: var(--ds-primary-deep);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ds-grm-table > tbody > tr > td {
    padding: 1.05rem 1.35rem;
    font-size: .96rem;
    color: var(--ds-text);
    vertical-align: middle;
}
.ds-grm-table > tbody > tr:last-child > td { border-bottom: 0; }
.ds-grm-table > tbody > tr:hover { background: rgba(96, 70, 232, .04); }
.ds-grm-cell-strong { color: var(--ds-ink); font-weight: 600; }
.ds-grm-note {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    max-width: 960px;
    margin-top: 1.25rem;
    padding: 1.05rem 1.3rem;
    background: var(--ds-primary-tint);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-sm);
}
.ds-grm-note i {
    flex: 0 0 auto;
    margin-top: .15rem;
    font-size: 1.1rem;
    color: var(--ds-primary);
}
.ds-grm-note p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--ds-text);
}
@media (max-width: 575.98px) {
    .ds-grm-table > thead > tr > th,
    .ds-grm-table > tbody > tr > td { padding: .8rem .95rem; }
}

/* ---- 27g. Filing channel cards ---- */
.ds-grm-channel-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.85rem 1.6rem;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: 0 10px 24px -22px rgba(43, 27, 99, .45);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.ds-grm-channel-card:hover {
    border-color: rgba(96, 70, 232, .35);
    box-shadow: var(--ds-shadow-md);
}
/* Illustrations replace the previous Bootstrap icons. Each card keeps its
   white background, light purple border, shadow and padding, and the
   artwork now sits on top inside a fixed 120px band - max-width/max-height
   plus object-fit: contain keeps every image uncropped and at one consistent
   display height, left aligned with the copy underneath. */
.ds-grm-channel-figure {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 120px;
    margin-bottom: 1.05rem;
}
.ds-grm-channel-figure img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.ds-grm-channel-card h3 {
    margin: 0 0 .55rem;
    font-size: 1.03rem;
}
.ds-grm-channel-card p {
    margin: 0;
    font-size: .93rem;
    line-height: 1.7;
    color: var(--ds-text);
}
.ds-grm-channel-value {
    display: inline-block;
    font-family: var(--ds-font-head);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--ds-primary);
    text-decoration: none;
    word-break: break-word;
}
.ds-grm-channel-value:hover,
.ds-grm-channel-value:focus {
    color: var(--ds-primary-deep);
    text-decoration: underline;
}
.ds-grm-channel-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: auto;
    padding-top: 1.1rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ds-primary);
    text-decoration: none;
}
.ds-grm-channel-link:hover,
.ds-grm-channel-link:focus {
    color: var(--ds-primary-deep);
    text-decoration: underline;
}
.ds-grm-channel-link i { transition: transform .2s ease; }
.ds-grm-channel-link:hover i { transform: translateX(3px); }
/* Helpline card: two labelled numbers, one per line. The label sits in its own
   column so both labels and both numbers line up, and the number keeps the
   purple .ds-grm-channel-value treatment defined above. */
.ds-grm-channel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .7rem;
}
.ds-grm-channel-list li {
    display: grid;
    grid-template-columns: 4.9rem minmax(0, 1fr);
    gap: .15rem .6rem;
    align-items: baseline;
}
.ds-grm-channel-label {
    font-family: var(--ds-font-head);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--ds-muted);
}
@media (max-width: 575.98px) {
    /* Full-width cards on phones: give the numbers more room. */
    .ds-grm-channel-list li { grid-template-columns: 5.4rem minmax(0, 1fr); }
}

/* ---- 27h. Filing steps (numbered cards) ---- */
.ds-grm-steps { list-style: none; padding: 0; }
.ds-grm-step {
    height: 100%;
    padding: 1.7rem 1.5rem 1.6rem;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: 0 10px 24px -22px rgba(43, 27, 99, .45);
}
.ds-grm-step-num {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--ds-primary);
    color: #fff;
    font-family: var(--ds-font-head);
    font-size: 1.05rem;
    font-weight: 700;
}
.ds-grm-step h3 { margin: 0 0 .45rem; font-size: 1.02rem; }
.ds-grm-step p { margin: 0; font-size: .92rem; line-height: 1.7; color: var(--ds-text); }

/* ---- 27i. Resolution process flow (vertical step chain) ---- */
.ds-grm-flow {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 680px;
}
.ds-grm-flow-step {
    padding: 1rem 1.4rem;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-left: 4px solid var(--ds-primary);
    border-radius: var(--ds-radius-sm);
    box-shadow: var(--ds-shadow-sm);
    font-family: var(--ds-font-head);
    font-size: .98rem;
    font-weight: 600;
    color: var(--ds-ink);
}
.ds-grm-flow-arrow {
    display: flex;
    justify-content: center;
    padding: .4rem 0;
    font-size: 1rem;
    line-height: 1;
    color: var(--ds-primary);
}

/* ---- 27j. Confidentiality & monitoring points ---- */
.ds-grm-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    max-width: 940px;
}
.ds-grm-point {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem 1.4rem;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: 0 10px 24px -22px rgba(43, 27, 99, .45);
}
.ds-grm-point-icon {
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-primary-soft);
    color: var(--ds-primary);
    font-size: 1.2rem;
}
.ds-grm-point p { margin: 0; font-size: .98rem; line-height: 1.7; color: var(--ds-text); }
/* Confidentiality & Non-Retaliation uses illustrations instead of the icons the
   other point lists use: the artwork sits on the left inside a fixed 64px band
   (max-width/max-height + object-fit: contain keep it uncropped and at one
   consistent size) and the statement is vertically centred against it. */
.ds-grm-points-media .ds-grm-point { align-items: center; }
.ds-grm-point-figure {
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
}
.ds-grm-point-figure img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ---- 27k. Conclusion & contact panel ---- */
.ds-grm-conclusion {
    max-width: 68ch;
    font-size: 1.04rem;
    line-height: 1.85;
    color: var(--ds-text);
}
.ds-grm-contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2.4rem 2rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-md);
}
.ds-grm-contact-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1.1rem;
    border-radius: 50%;
    background: var(--ds-primary-soft);
    color: var(--ds-primary);
    font-size: 1.4rem;
}
/* The contact card leads with the Email illustration instead of the round icon
   badge: centred above the heading inside a fixed 46px band, with
   object-fit: contain so the artwork is never cropped. */
.ds-grm-contact-figure {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1.1rem;
}
.ds-grm-contact-figure img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.ds-grm-contact-card h3 { margin: 0 0 .5rem; font-size: 1.06rem; }
.ds-grm-contact-email {
    display: inline-block;
    font-family: var(--ds-font-head);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-weight: 700;
    color: var(--ds-primary);
    text-decoration: none;
    word-break: break-word;
}
.ds-grm-contact-email:hover,
.ds-grm-contact-email:focus {
    color: var(--ds-primary-deep);
    text-decoration: underline;
}
.ds-grm-contact-card .btn-ds { margin-top: 1.5rem; }

/* ---- 27l. Responsive refinements ---- */
@media (max-width: 767.98px) {
    .ds-grm-lead-panel { padding: 1.4rem 1.25rem; }
    .ds-grm-flow-step { padding: .9rem 1.1rem; font-size: .94rem; }
}
@media (max-width: 575.98px) {
    .ds-grm-point { padding: 1.1rem 1.15rem; }
    /* Phones: a slightly smaller image band leaves more room for the text. */
    .ds-grm-point-figure { flex: 0 0 54px; width: 54px; height: 54px; }
    .ds-grm-contact-card { padding: 2rem 1.35rem; }
}

/* --------------------------------------------------------------
   28. POSH Policy page (public-info/posh-policy.php)
   Page-scoped styles only. Reuses the shared .ds-company-hero artwork
   treatment (section 21) and the --ds-* design tokens from section 1.
-------------------------------------------------------------- */

/* ---- 28a. Hero ----
   POSH.png (2158x729, ~2.96:1) is the hero's full-bleed BACKGROUND image and the
   only image layer - nothing was replaced, edited or regenerated.

   It is staged with `background-size: 100% 100%`, so the artwork is stretched
   across BOTH axes of the band: it covers the ENTIRE hero width (no flat
   lavender gap and no colour seam on the left, which `contain` + right-alignment
   used to leave) while 100% of the picture stays inside the box - nothing is
   cropped top, bottom or sides (`cover` used to slice ~166px off the bottom at
   1440px).

   A left-to-right lavender scrim sits behind the heading + subtitle - the same
   convention as the Grievance hero (27a) - so the copy keeps a strong contrast
   wherever the artwork's photo edge falls behind it. The artwork's own left
   panel is this same lavender (#f3f2fd), so the scrim simply disappears into it
   and the decoration + photo remain visible across the rest of the band.

   Band height (320px desktop / 220-260px tablet+phone), the copy position and
   all typography are unchanged. There is deliberately NO breadcrumb here. */
.ds-page-banner.ds-company-hero.ds-posh-hero {
    padding: 0;
    align-items: center;                /* heading + subtitle vertically centred */
    min-height: 320px;                  /* compact band - UNCHANGED */
    background-color: #f3f2fd;          /* artwork's left-edge lavender fills the gap */
    background-image: var(--ds-company-hero-bg);
    background-repeat: no-repeat;
    background-position: left center;   /* image fills the box - belt & braces */
    background-size: 100% 100%;         /* full-bleed: whole width + height, nothing cropped */
}
/* Readability scrim for the copy. Re-enables ::before, which the shared
   .ds-company-hero rule (21a) switches off, and drops its dotted texture/mask. */
.ds-page-banner.ds-company-hero.ds-posh-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(243, 242, 253, .96) 0%,
        rgba(243, 242, 253, .92) 24%,
        rgba(243, 242, 253, .80) 32%,
        rgba(243, 242, 253, .58) 40%,
        rgba(243, 242, 253, .30) 47%,
        rgba(243, 242, 253, 0) 56%);
    background-size: auto;
    -webkit-mask-image: none;
    mask-image: none;
    pointer-events: none;
}
.ds-posh-hero > .container {
    /* symmetric padding so flex centring lands the copy dead centre */
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.ds-posh-hero .ds-page-title { margin: 0; }
/* Keeps the copy inside the flat lavender panel at every desktop width. */
.ds-posh-hero .ds-posh-copy { max-width: 24rem; }

/* Tablets (576-991.98px): the SAME 100% 100% full-bleed fill inside the
   unchanged 220-260px band. These widths are the artwork's sweet spot - the
   band's ratio is 2.96:1 (exactly the picture's) at ~770px wide, so the
   artwork barely changes shape while still covering the whole hero. The scrim
   reaches further left-to-right only because the copy is a bigger share of the
   width here. */
@media (max-width: 991.98px) {
    .ds-page-banner.ds-company-hero.ds-posh-hero {
        min-height: clamp(220px, 62vw, 260px);  /* UNCHANGED band height */
    }
    .ds-page-banner.ds-company-hero.ds-posh-hero::before {
        background: linear-gradient(90deg,
            rgba(243, 242, 253, .96) 0%,
            rgba(243, 242, 253, .93) 30%,
            rgba(243, 242, 253, .86) 40%,
            rgba(243, 242, 253, .62) 50%,
            rgba(243, 242, 253, .28) 60%,
            rgba(243, 242, 253, 0) 72%);
    }
    .ds-posh-hero > .container {
        padding-top: .75rem;
        padding-bottom: .75rem;
    }
    .ds-posh-hero .ds-posh-copy { max-width: 18rem; }
}

/* Phones (<=575.98px): the band is only 220-260px tall, so a full-height
   stretch would squash the artwork badly AND put the copy on top of it. The
   artwork therefore keeps the hero's FULL WIDTH but is fitted into the lower
   44% of the band (`100% 44%`, bottom-left anchored): still the complete,
   uncropped picture edge-to-edge, while the copy sits on the flat lavender
   above it - text and image never overlap. */
@media (max-width: 575.98px) {
    .ds-page-banner.ds-company-hero.ds-posh-hero {
        align-items: flex-start;                /* copy hugs the top of the band */
        background-position: left bottom;       /* full-width artwork strip */
        background-size: 100% 44%;              /* whole picture, nothing cropped */
    }
    /* No scrim needed: the copy is on flat lavender, clear of the artwork. */
    .ds-page-banner.ds-company-hero.ds-posh-hero::before { content: none; }
    .ds-posh-hero > .container {
        padding-top: .5rem;
        padding-bottom: 0;
    }
}

/* ---- 28b. Intro / scope copy panel ---- */
.ds-posh-panel {
    max-width: 960px;
    padding: 1.9rem 2rem;
    background: var(--ds-primary-tint);
    border: 1px solid var(--ds-line);
    border-left: 4px solid var(--ds-primary);
    border-radius: var(--ds-radius-sm);
}
.ds-posh-panel p { margin: 0; font-size: 1.03rem; line-height: 1.85; color: var(--ds-text); }
.ds-posh-panel p + p { margin-top: 1.1rem; }

/* ---- 28c. Data tables (definition / ICC / disciplinary / training) ---- */
.ds-posh-table-card {
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow-sm);
    overflow: hidden;
}
.ds-posh-table {
    margin: 0;
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--ds-line);
}
.ds-posh-table > thead > tr > th {
    padding: .95rem 1.35rem;
    background: var(--ds-primary-soft);
    color: var(--ds-primary-deep);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ds-posh-table > tbody > tr > td {
    padding: 1.05rem 1.35rem;
    font-size: .96rem;
    color: var(--ds-text);
    vertical-align: middle;
}
.ds-posh-table > tbody > tr:last-child > td { border-bottom: 0; }
.ds-posh-table > tbody > tr:hover { background: rgba(96, 70, 232, .04); }
.ds-posh-cell-strong { color: var(--ds-ink); font-weight: 600; }
@media (max-width: 575.98px) {
    .ds-posh-table > thead > tr > th,
    .ds-posh-table > tbody > tr > td { padding: .8rem .95rem; }
}

/* ---- 28d. Note panels ---- */
.ds-posh-note {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    max-width: 960px;
    margin-top: 1.25rem;
    padding: 1.05rem 1.3rem;
    background: var(--ds-primary-tint);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-sm);
}
.ds-posh-note i { flex: 0 0 auto; margin-top: .15rem; font-size: 1.1rem; color: var(--ds-primary); }
.ds-posh-note p { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--ds-text); }

/* ---- 28e. Bulleted policy lists (filing / inquiry / confidentiality) ---- */
.ds-posh-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .85rem;
    max-width: 960px;
}
.ds-posh-list li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    font-size: .99rem;
    line-height: 1.7;
    color: var(--ds-text);
}
.ds-posh-list li i {
    flex: 0 0 auto;
    margin-top: .18rem;
    font-size: 1.05rem;
    color: var(--ds-primary);
}

/* ---- 28f. Complaint handling steps (numbered cards) ---- */
.ds-posh-steps-title { margin: 2.6rem 0 1.35rem; font-size: 1.15rem; }
.ds-posh-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.ds-posh-step {
    height: 100%;
    padding: 1.5rem 1.35rem 1.4rem;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: 0 10px 24px -22px rgba(43, 27, 99, .45);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.ds-posh-step:hover { border-color: rgba(96, 70, 232, .35); box-shadow: var(--ds-shadow-md); }
.ds-posh-step-num {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: .9rem;
    border-radius: 50%;
    background: var(--ds-primary);
    color: #fff;
    font-family: var(--ds-font-head);
    font-size: 1.02rem;
    font-weight: 700;
}
.ds-posh-step p {
    margin: 0;
    font-family: var(--ds-font-head);
    font-size: .96rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ds-ink);
}
@media (max-width: 991.98px) { .ds-posh-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .ds-posh-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .ds-posh-steps { grid-template-columns: minmax(0, 1fr); } }

/* ---- 28g. Confidentiality highlight ---- */
.ds-posh-highlight {
    max-width: 960px;
    padding: 1.9rem 2rem;
    background:
        radial-gradient(520px 240px at 92% -30%, rgba(124, 92, 255, .14), transparent 62%),
        #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-md);
}
.ds-posh-highlight .ds-posh-list { max-width: none; }

/* ---- 28h. Conclusion banner ---- */
.ds-posh-conclusion {
    position: relative;
    overflow: hidden;
    max-width: 960px;
    margin: 0 auto;
    padding: 3rem 2.6rem;
    color: #fff;
    border-radius: var(--ds-radius-lg);
    background:
        radial-gradient(640px 300px at 88% -10%, rgba(124, 92, 255, .42), transparent 62%),
        linear-gradient(120deg, var(--ds-primary-deep), var(--ds-primary) 135%);
    box-shadow: var(--ds-shadow-lg);
}
.ds-posh-conclusion::after {
    content: "";
    position: absolute;
    right: -90px; bottom: -140px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}
.ds-posh-conclusion > * { position: relative; z-index: 1; }
.ds-posh-conclusion-eyebrow { color: #d9d2ff; }
.ds-posh-conclusion-eyebrow::before { background: rgba(255, 255, 255, .55); }
.ds-posh-conclusion-title { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); margin: .85rem 0 1rem; }
.ds-posh-conclusion-title span {
    background: linear-gradient(90deg, #e4dcff, #c7b4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ds-posh-conclusion p { max-width: 62ch; color: rgba(255, 255, 255, .86); line-height: 1.8; }
.ds-posh-conclusion p + p { margin-top: 1rem; }
.ds-posh-mail {
    font-family: var(--ds-font-head);
    font-weight: 700;
    color: #fff;
    text-decoration: underline;
    word-break: break-word;
}
.ds-posh-mail:hover, .ds-posh-mail:focus { color: #d9d2ff; }
.ds-posh-effective-date {
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, .16);
    font-weight: 700;
    letter-spacing: .02em;
}

/* ---- 28i. Responsive refinements ---- */
@media (max-width: 767.98px) {
    .ds-posh-panel { padding: 1.4rem 1.25rem; }
    .ds-posh-highlight { padding: 1.5rem 1.25rem; }
}
@media (max-width: 575.98px) {
    .ds-posh-conclusion { padding: 2.4rem 1.4rem; }
}

/* --------------------------------------------------------------
   29. FAQs page (public-info/faqs.php)
   Page-scoped styles only. Reuses the shared .ds-company-hero artwork
   treatment (section 21), the .ds-section-head / .ds-eyebrow pattern
   (section 8) and the --ds-* design tokens from section 1. The hero uses the
   page's own artwork (assets/images/FAQs.png); no image was created, replaced
   or regenerated.
-------------------------------------------------------------- */

/* ---- 29a. Hero ----
   FAQs.png (2157x729, ~2.96:1) is the hero's only image layer, staged exactly
   like the POSH hero (28a): `background-size: 100% 100%` inside a compact band,
   so the artwork covers the ENTIRE hero width and height with nothing cropped,
   and the artwork's own flat lavender left panel (#f3f2fd) supplies the fill.

   A left-to-right lavender scrim sits behind the heading + subtitle so the dark
   ink copy keeps a strong contrast wherever the artwork's photo edge falls
   behind it; the artwork's own left panel is this same lavender, so the scrim
   simply disappears into it and the Q&A artwork stays visible on the right.
   There is deliberately NO breadcrumb in this hero. */
.ds-page-banner.ds-company-hero.ds-faq-hero {
    padding: 0;
    align-items: center;                /* heading + subtitle vertically centred */
    min-height: 320px;                  /* compact band, same as the POSH hero */
    background-color: #f3f2fd;          /* the artwork's own left-edge lavender */
    background-image: var(--ds-company-hero-bg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100% 100%;         /* full-bleed: whole width + height */
}
/* Readability scrim. Re-enables the ::before that the shared .ds-company-hero
   rule (21a) switches off, and drops its dotted texture / mask. */
.ds-page-banner.ds-company-hero.ds-faq-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(243, 242, 253, .96) 0%,
        rgba(243, 242, 253, .92) 24%,
        rgba(243, 242, 253, .80) 32%,
        rgba(243, 242, 253, .58) 40%,
        rgba(243, 242, 253, .30) 47%,
        rgba(243, 242, 253, 0) 56%);
    background-size: auto;
    -webkit-mask-image: none;
    mask-image: none;
    pointer-events: none;
}
.ds-faq-hero > .container {
    /* symmetric padding so the flex centring lands the copy dead centre */
    position: relative;
    z-index: 1;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.ds-faq-hero .ds-page-title { margin: 0; }
.ds-faq-hero .ds-page-lead { max-width: 440px; }
/* Keeps the copy inside the flat lavender panel at every desktop width. */
.ds-faq-hero-copy { max-width: 24rem; }

/* Compact light badge above the heading (purple/white theme, readable on the
   lavender panel). */
.ds-faq-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .9rem;
    padding: .35rem .9rem;
    background: #fff;
    border: 1px solid rgba(96, 70, 232, .28);
    border-radius: 999px;
    color: var(--ds-primary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.ds-faq-hero-badge i { font-size: .95rem; }

/* ---- 29b. Section surface + search toolbar ----
   The FAQ section sits on the soft lavender surface, so the white accordion
   cards and the search toolbar read as raised panels (the same alternating
   white / lavender rhythm used on the POSH and Grievance pages). */
.ds-faq-section { background: var(--ds-bg-soft); }
.ds-faq-panel { max-width: 940px; margin: 0 auto; }
.ds-faq-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    margin-bottom: 1.75rem;
    padding: 1.1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow-sm);
}
.ds-faq-search { position: relative; flex: 1 1 320px; }
.ds-faq-search > i {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: var(--ds-primary);
    font-size: 1rem;
    pointer-events: none;
}
.ds-faq-search-input {
    width: 100%;
    padding: .8rem 3rem .8rem 2.7rem;
    font-family: var(--ds-font-body);
    font-size: .95rem;
    color: var(--ds-ink);
    background: var(--ds-primary-tint);
    border: 1.5px solid var(--ds-line);
    border-radius: 999px;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.ds-faq-search-input::placeholder { color: var(--ds-muted); }
.ds-faq-search-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 4px rgba(96, 70, 232, .12);
}
/* The custom clear button is the only clear affordance (no doubled control) */
.ds-faq-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ds-faq-clear {
    position: absolute;
    top: 50%;
    right: .45rem;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--ds-primary-soft);
    color: var(--ds-primary-deep);
    font-size: .8rem;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.ds-faq-clear:hover, .ds-faq-clear:focus-visible { background: var(--ds-primary); color: #fff; }
.ds-faq-clear[hidden] { display: none; }
.ds-faq-search-status { flex: 1 1 100%; margin: 0; font-size: .88rem; color: var(--ds-muted); }


/* ---- 29c. Accordion ----
   The collapsed state is applied only after JavaScript adds .is-enhanced to the
   list, so with JavaScript disabled every answer stays open, readable and
   printable. Panel height is animated in JavaScript (0 -> content height ->
   auto) and never hard-coded here. */
.ds-faq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ds-faq-item {
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow-sm);
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.ds-faq-item:hover { border-color: rgba(96, 70, 232, .32); }
.ds-faq-item.is-open { border-color: rgba(96, 70, 232, .45); box-shadow: var(--ds-shadow-md); }
.ds-faq-item[hidden] { display: none; }
.ds-faq-q-heading { margin: 0; font-size: 1rem; font-weight: 600; }
.ds-faq-question {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.15rem 1.35rem;
    font-family: var(--ds-font-head);
    font-size: 1.03rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ds-ink);
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}
.ds-faq-question:hover { color: var(--ds-primary); }
.ds-faq-question[aria-expanded="true"] { color: var(--ds-primary-deep); background: var(--ds-primary-tint); }
.ds-faq-q-text { flex: 1 1 auto; min-width: 0; }

/* Plus / minus: two stacked glyphs cross-faded from aria-expanded, so the icon
   can never disagree with the panel state. */
.ds-faq-q-icon {
    position: relative;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(96, 70, 232, .25);
    border-radius: 50%;
    background: var(--ds-primary-tint);
    color: var(--ds-primary);
    font-size: .85rem;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.ds-faq-q-icon i { position: absolute; transition: opacity .25s ease, transform .25s ease; }
.ds-faq-q-icon .bi-plus { opacity: 1; transform: rotate(0deg); }
.ds-faq-q-icon .bi-dash { opacity: 0; transform: rotate(-90deg); }
.ds-faq-question[aria-expanded="true"] .ds-faq-q-icon {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    color: #fff;
}
.ds-faq-question[aria-expanded="true"] .ds-faq-q-icon .bi-plus { opacity: 0; transform: rotate(90deg); }
.ds-faq-question[aria-expanded="true"] .ds-faq-q-icon .bi-dash { opacity: 1; transform: rotate(0deg); }

.ds-faq-answer { overflow: hidden; }
.ds-faq-list.is-enhanced .ds-faq-answer { height: 0; transition: height .35s ease; }
.ds-faq-answer-inner { padding: 1.05rem 1.35rem 1.4rem; }
.ds-faq-answer-inner p { color: var(--ds-text); font-size: .97rem; line-height: 1.8; }
.ds-faq-answer-inner p + p { margin-top: .9rem; }

/* ---- 29d. Empty state + closing help card ---- */
.ds-faq-empty {
    margin: 1.75rem 0 0;
    padding: 2.1rem 1.5rem;
    text-align: center;
    color: var(--ds-text);
    background: var(--ds-primary-tint);
    border: 1px dashed rgba(96, 70, 232, .35);
    border-radius: var(--ds-radius);
}
.ds-faq-empty[hidden] { display: none; }
.ds-faq-empty strong {
    display: block;
    margin-bottom: .35rem;
    font-family: var(--ds-font-head);
    font-size: 1.05rem;
    color: var(--ds-ink);
}
.ds-faq-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: 940px;
    margin: 2.5rem auto 0;
    padding: 1.8rem 1.9rem;
    color: #fff;
    background: linear-gradient(120deg, var(--ds-primary-deep), var(--ds-navy-mid));
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-md);
}
.ds-faq-help-copy h3 { margin-bottom: .35rem; font-size: 1.2rem; color: #fff; }
.ds-faq-help-copy p { max-width: 48ch; color: rgba(255, 255, 255, .82); font-size: .95rem; }
.ds-faq-help-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---- 29e. Responsive refinements ---- */

/* Tablets (576-991.98px): the same full-bleed fill inside the unchanged
   220-260px band. The scrim reaches further across only because the copy is a
   bigger share of the width here. */
@media (max-width: 991.98px) {
    .ds-page-banner.ds-company-hero.ds-faq-hero {
        min-height: clamp(220px, 62vw, 260px);
    }
    .ds-page-banner.ds-company-hero.ds-faq-hero::before {
        background: linear-gradient(90deg,
            rgba(243, 242, 253, .96) 0%,
            rgba(243, 242, 253, .93) 30%,
            rgba(243, 242, 253, .86) 40%,
            rgba(243, 242, 253, .62) 50%,
            rgba(243, 242, 253, .28) 60%,
            rgba(243, 242, 253, 0) 72%);
    }
    .ds-faq-hero > .container { padding-top: .75rem; padding-bottom: .75rem; }
    .ds-faq-hero-copy { max-width: 20rem; }
}
@media (max-width: 767.98px) {
    .ds-faq-question { gap: .75rem; padding: 1rem 1.05rem; font-size: .98rem; }
    .ds-faq-answer-inner { padding: .95rem 1.05rem 1.2rem; }
    .ds-faq-help { padding: 1.5rem 1.25rem; }
}
/* Phones (<=575.98px): the artwork keeps the hero's FULL width but is fitted
   into the lower 44% of the band, so the copy sits on flat lavender above it and
   text and image never overlap. */
@media (max-width: 575.98px) {
    .ds-page-banner.ds-company-hero.ds-faq-hero {
        align-items: flex-start;                /* copy hugs the top of the band */
        background-position: left bottom;       /* full-width artwork strip */
        background-size: 100% 44%;              /* whole picture, nothing cropped */
    }
    /* No scrim needed: the copy is on flat lavender, clear of the artwork. */
    .ds-page-banner.ds-company-hero.ds-faq-hero::before { content: none; }
    .ds-faq-hero > .container { padding-top: .5rem; padding-bottom: 0; }
    .ds-faq-hero-copy { max-width: none; }
    .ds-faq-toolbar { padding: .9rem 1rem; }
    .ds-faq-search { flex: 1 1 100%; }
    .ds-faq-q-icon { flex: 0 0 30px; width: 30px; height: 30px; }
    .ds-faq-empty { padding: 1.75rem 1.15rem; }
    .ds-faq-help-actions { width: 100%; }
    .ds-faq-help-actions .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .ds-faq-item,
    .ds-faq-question,
    .ds-faq-q-icon,
    .ds-faq-q-icon i { transition: none; }
    .ds-faq-list.is-enhanced .ds-faq-answer { transition: none; }
}

/* --------------------------------------------------------------
   30. Our Team page (about/our-team.php)
   Page-scoped styles only. Reuses the shared .ds-company-hero artwork
   treatment (section 21) and the --ds-* design tokens (section 1). The hero
   uses the existing assets/images/Our team.png artwork; every photo is the
   real JPEG already present in assets/images/our team/. No image was created,
   replaced or regenerated.

   The page is sectioned (Hero -> Leadership -> Operations -> HR -> Accounts ->
   Technical) rather than one continuous grid.
-------------------------------------------------------------- */

/* ---- 30a. Hero ----
   Our team.png (2158x729, ~2.96:1) is staged exactly like the FAQ hero (29a):
   background-size: 100% 100% inside a compact band, so the artwork covers the
   ENTIRE hero width and height with nothing cropped, and the artwork's own flat
   lavender left panel supplies the fill. A left-to-right lavender scrim keeps
   the dark-ink heading + subtitle readable wherever the photo edge falls behind
   them. There is deliberately NO breadcrumb in this hero. */
.ds-page-banner.ds-company-hero.ds-team-hero {
    padding: 0;
    align-items: center;                /* heading + subtitle vertically centred */
    min-height: 320px;                  /* compact band, same as the FAQ hero */
    background-color: #f3f2fd;          /* the artwork's own left-edge lavender */
    background-image: var(--ds-company-hero-bg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100% 100%;         /* full-bleed: whole width + height */
}
/* Readability scrim. Re-enables the ::before that .ds-company-hero switches off
   and drops its dotted texture / mask. */
.ds-page-banner.ds-company-hero.ds-team-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(243, 242, 253, .96) 0%,
        rgba(243, 242, 253, .92) 24%,
        rgba(243, 242, 253, .80) 32%,
        rgba(243, 242, 253, .58) 40%,
        rgba(243, 242, 253, .30) 47%,
        rgba(243, 242, 253, 0) 56%);
    background-size: auto;
    -webkit-mask-image: none;
    mask-image: none;
    pointer-events: none;
}
.ds-team-hero > .container {
    position: relative;
    z-index: 1;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.ds-team-hero .ds-page-title { margin: 0; }
.ds-team-hero .ds-page-lead { max-width: 460px; }
/* Keeps the copy inside the artwork's flat lavender panel on desktop. */
.ds-team-hero-copy { max-width: 26rem; }

/* Compact light badge above the heading (white/purple theme, readable on the
   lavender panel), the same treatment as the FAQ hero badge. */
.ds-team-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .9rem;
    padding: .35rem .9rem;
    background: #fff;
    border: 1px solid rgba(96, 70, 232, .28);
    border-radius: 999px;
    color: var(--ds-primary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.ds-team-hero-badge i { font-size: .95rem; }

/* Tablets: the same full-bleed fill inside the unchanged 220-260px band. The
   scrim reaches further across only because the copy is a bigger share of the
   width here. */
@media (max-width: 991.98px) {
    .ds-page-banner.ds-company-hero.ds-team-hero {
        min-height: clamp(220px, 62vw, 260px);
    }
    .ds-page-banner.ds-company-hero.ds-team-hero::before {
        background: linear-gradient(90deg,
            rgba(243, 242, 253, .96) 0%,
            rgba(243, 242, 253, .93) 30%,
            rgba(243, 242, 253, .86) 40%,
            rgba(243, 242, 253, .62) 50%,
            rgba(243, 242, 253, .28) 60%,
            rgba(243, 242, 253, 0) 72%);
    }
    .ds-team-hero > .container { padding-top: .75rem; padding-bottom: .75rem; }
    .ds-team-hero-copy { max-width: 22rem; }
}
/* Phones: the artwork keeps the hero's FULL width but is fitted into the lower
   44% of the band, so the copy sits on flat lavender above it and the text and
   the image never overlap. */
@media (max-width: 575.98px) {
    .ds-page-banner.ds-company-hero.ds-team-hero {
        align-items: flex-start;                /* copy hugs the top of the band */
        background-position: left bottom;       /* full-width artwork strip */
        background-size: 100% 44%;              /* whole picture, nothing cropped */
    }
    /* No scrim needed: the copy is on flat lavender, clear of the artwork. */
    .ds-page-banner.ds-company-hero.ds-team-hero::before { content: none; }
    .ds-team-hero > .container { padding-top: .5rem; padding-bottom: 0; }
    .ds-team-hero-copy { max-width: none; }
}

/* ---- 30b. Section rhythm ----
   Each department is its own <section>; the lavender / white alternation
   (via .ds-team-section-surface) separates them without heavy bars. */
.ds-team-section { padding: 3.25rem 0; }
.ds-team-section-surface { background: var(--ds-bg-soft); }
.ds-team-leadership { padding-top: 4.25rem; }

/* ---- 30c. Department heading ----
   Modern, clean and premium: the department name followed by a short
   brand-gradient rule exactly as wide as the word - never an oversized bar. */
.ds-team-dept-head { margin-bottom: 2rem; }
.ds-team-dept-title {
    position: relative;
    display: inline-block;
    margin: 0;
    padding-bottom: .7rem;
    font-size: clamp(1.4rem, 2.5vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ds-ink);
}
.ds-team-dept-title::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ds-primary), var(--ds-accent));
}

/* ---- 30d. Leadership / CEO block ----
   Two columns (photo + message), noticeably more prominent than a member card.
   The photo is a fixed 4:5 frame filled with object-fit: cover and
   object-position: center top so the face stays fully visible - never stretched. */
.ds-ceo-photo {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--ds-primary-tint);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-md);
}
.ds-ceo-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.ds-ceo-body { padding: .35rem 0; }
.ds-ceo-name {
    margin: 0;
    font-size: clamp(1.5rem, 2.6vw, 1.95rem);
    color: var(--ds-ink);
}
.ds-ceo-role {
    display: inline-block;
    margin: .55rem 0 1.15rem;
    padding: .26rem .85rem;
    border-radius: 999px;
    background: var(--ds-primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.ds-ceo-text {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.9;
    color: var(--ds-text);
}

/* ---- 30e. Member card + grid ----
   Consistent 1:1 photo frame filled by the real JPEG with object-position:
   center top so faces (which sit in the upper part of every portrait / square
   photo) stay fully visible; never stretched or distorted. */
.ds-team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ds-team-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ds-team-card:hover {
    transform: translateY(-4px);
    border-color: var(--ds-primary-soft);
    box-shadow: var(--ds-shadow-md);
}
.ds-team-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--ds-primary-tint);
}
.ds-team-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
/* Graceful, image-free fallback for a missing photo file (never a substitute
   person's picture). Shared by the member cards and the CEO figure. */
.ds-team-photo-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--ds-primary);
    background: var(--ds-primary-soft);
    font-size: 2.1rem;
}
.ds-team-body {
    padding: 1.05rem 1.15rem 1.2rem;
    text-align: center;
}
.ds-team-name {
    margin: 0;
    font-size: 1.03rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ds-ink);
}
.ds-team-role {
    margin: .3rem 0 0;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ds-primary);
}

/* ---- 30f. Responsive ----
   Desktop 4 per row (3 on narrower desktops), tablet 2 per row, mobile 1 per
   row (capped so a single card never becomes oversized). The CEO block stacks
   to one column below lg, with the photo centred. */
@media (max-width: 1199.98px) {
    .ds-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .ds-team-section { padding: 2.75rem 0; }
    .ds-team-leadership { padding-top: 3.5rem; }
    .ds-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem; }
    .ds-ceo-photo { max-width: 420px; margin: 0 auto; }
    .ds-ceo-body { text-align: center; }
}
@media (max-width: 575.98px) {
    .ds-team-section { padding: 2.25rem 0; }
    .ds-team-leadership { padding-top: 3rem; }
    .ds-team-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .ds-team-card { width: 100%; max-width: 20rem; margin-left: auto; margin-right: auto; }
    .ds-ceo-photo { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ds-team-card { transition: none; }
}


/* --------------------------------------------------------------
   31. Gallery page (gallery.php)
   Page-scoped styles only. Reuses the shared .ds-company-hero artwork treatment
   (section 21) and the --ds-* design tokens (section 1). The hero uses the
   existing assets/images/gallery.png artwork; every tile is a real PNG already
   present in assets/images/Gallery/<category>/. No image was created, replaced,
   renamed or regenerated.

   The page is sectioned (Hero -> Intro -> Premises -> Assessments & Centers ->
   Celebrations -> Trips & Events -> Guest Visit & Discussion).
-------------------------------------------------------------- */

/* ---- 31a. Hero ----
   gallery.png (2103x748, 2.811:1) is the FULL-WIDTH BACKGROUND of the whole
   band - the standalone right-hand <img> column and the two-column grid are
   gone. The asset itself is unchanged: same file, same pixels, nothing
   cropped out of it, replaced or regenerated. It is passed in through the
   shared --ds-company-hero-bg custom property, the same convention the Our
   Company / POSH / FAQ / Team heroes use.

   SIZING - `cover` + `center center`. This is the fix for the "flat lavender
   on the left, collage on the right" bug. The previous rule used
   `background-size: auto 100%` (fit the BAND HEIGHT) with
   `background-position: right center`: gallery.png is 2.811:1, so at a
   380px band it measured only 380 x 2.8115 = 1069px wide. Parked against the
   right edge, that left 1920 - 1069 = 851px of the hero showing nothing but
   the `background-color` declaration - i.e. a plain empty CSS field, which is
   precisely what was reported. `cover` is the only value that puts real image
   pixels behind BOTH the copy area and the collage: by definition it fills
   the whole positioning area on both axes, so there is no leftover flat
   block anywhere on the band.

   `cover` keeps the artwork's own 2.811:1 ratio and scales it uniformly, so
   it is never stretched or squashed (`100% 100%` WOULD distort it and is
   deliberately not used), and `no-repeat` means it is never tiled.

   CROP - on a 1920px-wide viewport the band is 5:1 while the artwork is
   2.811:1, so some vertical trim is geometrically unavoidable for ANY
   full-width fill; `center center` splits that unavoidable trim evenly and
   keeps the horizontal composition whole, i.e. all five collage tiles
   (Premises / Assessments & Centers / Celebrations / Trips & Events /
   Guest Visit & Discussion) stay complete side by side - the maximum
   extent the fixed band allows. The trim shrinks as the viewport narrows and
   disappears entirely by ~1200px, where the scale becomes height-driven again
   (e.g. 1024x380 shows the artwork's full 748px height with only a few px
   trimmed off each side). The band height stays inside the requested
   340-400px range at `clamp(340px, 36vw, 400px)`.

   LEFT / RIGHT BALANCE - pixel sampling of the artwork: columns 0-20% are the
   flat lavender panel (0% dark pixels, avg #D2CAFD-#E5E2FD), columns 25-30%
   start the collage, and 30-100% is dense photography (31-69% dark). With
   `cover` that lavender panel is the hero's own left-hand artwork, and the
   collage is the right ~76%. The band height keeps the artwork's own left-edge
   lavender (#D8D2FD) as `background-color`, but that value is now only a
   pure fallback - with `cover` no part of the band ever falls through to it.

   READABILITY - the copy is capped to 25rem and the lead to 23rem so it sits
   over the artwork's light left portion. The left-to-right lavender scrim
   (the ::before that .ds-company-hero 21a switches off) is deliberately kept
   SUBTLE: because the artwork's left panel is already almost exactly this
   lavender, the wash there is visually almost invisible and therefore hides
   nothing, while the part that actually crosses onto photography (34-44%)
   is already down to .42/.16 and gone by 52%. */
.ds-page-banner.ds-company-hero.ds-gallery-hero {
    padding: 0;
    align-items: center;                              /* copy vertically centred */
    min-height: clamp(340px, 36vw, 400px);           /* compact band, inside the 340-400px range */
    background-color: #d8d2fd;                        /* the artwork's own left-edge lavender (fallback only) */
    background-image: var(--ds-company-hero-bg);
    background-repeat: no-repeat;                     /* never tiled - one continuous artwork */
    background-position: center center;               /* even split of the unavoidable vertical trim */
    background-size: cover;                           /* fills the WHOLE band: image behind the copy AND the collage */
}
/* Readability scrim. Re-enables the ::before that .ds-company-hero (21a)
   switches off, and drops its dotted texture / mask. Deliberately SUBTLE: the
   artwork's left panel is already ~#D2CAFD-#E5E2FD, so a lavender wash there
   is visually almost a no-op and hides nothing of the collage, which now runs
   edge to edge under this scrim. It holds through ~22% (where the artwork is
   still flat lavender), crosses onto photography around 25-30% - the copy
   ends near 37% on a wide screen - and is completely gone by 62% so the
   collage's right half is shown at full strength. */
.ds-page-banner.ds-company-hero.ds-gallery-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(231, 229, 253, .90) 0%,
        rgba(231, 229, 253, .86) 22%,
        rgba(231, 229, 253, .68) 32%,
        rgba(231, 229, 253, .38) 42%,
        rgba(231, 229, 253, .10) 52%,
        rgba(231, 229, 253, 0) 62%);
    background-size: auto;
    -webkit-mask-image: none;
    mask-image: none;
    pointer-events: none;
}
.ds-page-banner.ds-gallery-hero > .container {
    position: relative;
    z-index: 1;
    /* symmetric padding so flex centring lands the copy dead centre */
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.ds-page-banner.ds-gallery-hero .ds-page-title { margin: 0; }
.ds-page-banner.ds-gallery-hero .ds-page-lead {
    max-width: 23rem;
    margin-top: .75rem;
    font-size: 1.05rem;
}
/* Caps the copy so it stays over the artwork's light lavender left portion,
   well clear of the photography that starts at ~25% of the artwork. */
.ds-gallery-hero__copy { max-width: 25rem; }

/* Purple outlined "PHOTO GALLERY" badge above the heading. It now sits on the
   scrimmed side of the collage rather than on guaranteed-flat lavender, so the
   wash is opaque white instead of translucent - that guarantees contrast for
   the violet label regardless of what the artwork is doing underneath. */
.ds-gallery-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: 1rem;
    padding: .4rem 1.05rem;
    background: #fff;
    border: 1.5px solid rgba(96, 70, 232, .55);
    border-radius: 999px;
    color: var(--ds-primary);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
}
.ds-gallery-hero-badge i { font-size: .95rem; }

/* ---- 31b. Intro ----
   Short, premium intro on the soft lavender surface, so the white tiles in the
   sections below read as raised cards. */
.ds-gal-intro {
    padding: 3.5rem 0 1.25rem;
    background: var(--ds-bg-soft);
}
.ds-gal-intro-head { max-width: 760px; margin-bottom: 0; }
.ds-gal-intro-head .ds-section-lead { margin-bottom: 0; }

/* ---- 31c. Category section + heading ----
   Each category is its own <section>; the lavender / white alternation (via
   .ds-gal-section-surface) separates them without heavy bars. */
.ds-gal-section { padding: 3.5rem 0; }
.ds-gal-section-surface { background: var(--ds-bg-soft); }
.ds-gal-head { margin-bottom: 2rem; }
/* Small purple section label (the exact category name) above the heading. */
.ds-gal-label {
    display: block;
    margin-bottom: .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ds-primary);
}
/* Modern, clean and premium: the category heading followed by a short
   brand-gradient rule exactly as wide as the words - never an oversized bar. */
.ds-gal-title {
    position: relative;
    display: inline-block;
    margin: 0;
    padding-bottom: .7rem;
    font-size: clamp(1.4rem, 2.5vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ds-ink);
}
.ds-gal-title::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ds-primary), var(--ds-accent));
}

/* ---- 31d. Photograph grid ----
   Desktop 3 per row, tablet 2, mobile 1 (section 31g). Every tile keeps the SAME
   height (a 4:3 frame) and the photograph fills it with object-fit: cover, so the
   cards stay even and the images are never distorted, stretched or squashed. */
.ds-gal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ds-gal-item { min-width: 0; }
.ds-gal-thumb {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: 14px;
    box-shadow: var(--ds-shadow-sm);
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ds-gal-thumb:hover,
.ds-gal-thumb:focus-visible {
    transform: translateY(-3px);
    border-color: var(--ds-primary-soft);
    box-shadow: var(--ds-shadow-md);
    outline: none;
}
.ds-gal-thumb:focus-visible {
    box-shadow: var(--ds-shadow-md), 0 0 0 3px rgba(96, 70, 232, .35);
}
.ds-gal-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .45s ease;
}
/* Lightweight hover: a gentle zoom plus the caption / zoom affordances. */
.ds-gal-thumb:hover img,
.ds-gal-thumb:focus-visible img { transform: scale(1.04); }
.ds-gal-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.2rem 1rem .85rem;
    font-size: .84rem;
    font-weight: 600;
    color: #fff;
    text-align: left;
    background: linear-gradient(180deg, transparent, rgba(78, 47, 212, .85));
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}
.ds-gal-thumb:hover .ds-gal-caption,
.ds-gal-thumb:focus-visible .ds-gal-caption { opacity: 1; transform: translateY(0); }
.ds-gal-zoom {
    position: absolute;
    top: .75rem;
    right: .75rem;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    background: rgba(43, 27, 99, .55);
    font-size: .85rem;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.ds-gal-thumb:hover .ds-gal-zoom,
.ds-gal-thumb:focus-visible .ds-gal-zoom { opacity: 1; }

/* ---- 31e. Empty category ----
   A clean message instead of broken image icons, and only for that category. */
.ds-gal-empty {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0;
    padding: 1.35rem 1.5rem;
    background: #fff;
    border: 1px dashed var(--ds-line);
    border-radius: var(--ds-radius);
    color: var(--ds-text);
    font-size: .95rem;
}
.ds-gal-empty i { color: var(--ds-primary); font-size: 1.1rem; }

/* ---- 31f. Lightbox ----

/* --------------------------------------------------------------
   32. Other Sectors listing page (public-info/our-assessors/other-sectors.php)
   Page-scoped hero only. Mirrors the ASCI/Apparel full-bleed artwork hero
   (sector-page.css .ds-sector-hero--bg): other.png (2103x748, 2.81:1) is the
   band's FULL-WIDTH background - background-size: cover over a light fallback
   colour - so the artwork's own light left panel carries the heading and lead
   while the sector collage fills the rest of the band. There is no separate
   image column and no blank purple panel behind the copy. cover never
   distorts, and the only trim is the unavoidable vertical one, split evenly
   by background-position: center inside the compact 340px band. A white
   left-to-right wash - ASCI's veil restated for this near-white artwork -
   keeps the heading and subtitle readable, and the copy takes ASCI's dark ink
   colours instead of white-on-light. No breadcrumb is rendered (removed from
   the page markup), so nothing reserves space above the heading.
-------------------------------------------------------------- */
.ds-page-banner.ds-other-hero {
    display: flex;
    align-items: center;
    min-height: 340px;
    padding: 2rem 0;
    background-color: #fbfaff;   /* artwork's own light left edge (fallback only) */
    background-image: var(--ds-other-hero-img);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.ds-page-banner.ds-other-hero .container { width: 100%; }
/* Replaces the shared dotted texture (section 19) with ASCI's light veil:
   a white left-to-right wash the artwork still shows through on the right. */
.ds-page-banner.ds-other-hero::before {
    background: linear-gradient(90deg,
        rgba(251, 250, 255, .96) 0%,
        rgba(251, 250, 255, .90) 40%,
        rgba(251, 250, 255, .55) 54%,
        rgba(251, 250, 255, .22) 66%,
        rgba(251, 250, 255, 0) 78%);
    background-size: auto;
    -webkit-mask-image: none;
    mask-image: none;
}
.ds-page-banner.ds-other-hero .ds-page-title { color: var(--ds-ink); }
.ds-page-banner.ds-other-hero .ds-page-lead  { color: var(--ds-text); }
/* Small screens: the stacked copy spans the full container over the artwork's
   collage, so the veil reaches a little further right (same idea as the gallery
   hero, section 31). cover + center fills the band at every width - no reserved
   bottom padding, no dropped scrim. */
@media (max-width: 991.98px) {
    .ds-page-banner.ds-other-hero::before {
        background: linear-gradient(90deg,
            rgba(251, 250, 255, .96) 0%,
            rgba(251, 250, 255, .94) 55%,
            rgba(251, 250, 255, .84) 76%,
            rgba(251, 250, 255, .58) 92%,
            rgba(251, 250, 255, .38) 100%);
    }
}

   One shared viewer for every tile: the large photograph, close / previous /
   next, the category + position, ESC and the arrow keys, plus a touch swipe (the
   behaviour lives in script.js, section 10). A fixed overlay in the brand's deep
   purple; transitions are short and there is no heavy animation. */
body.ds-no-scroll { overflow: hidden; }
.ds-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1090;                          /* above the navbar and the back-to-top button */
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(23, 14, 53, .90);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.ds-lightbox[hidden] { display: none; }
.ds-lightbox-backdrop { position: absolute; inset: 0; }
.ds-lightbox-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1040px;
}
.ds-lightbox-figure {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    margin: 0;
}
.ds-lightbox-image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 11rem);
    /* The photograph is NEVER cropped and NEVER distorted: `contain` fits the
       whole picture inside the box, and width/height stay auto so the element
       keeps the intrinsic ratio (measured ratio error: 0). */
    object-fit: contain;
    margin: 0 auto;
    border-radius: 12px;
    background: #14102f;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85);
}
.ds-lightbox-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .3rem 1rem;
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    text-align: center;
}
.ds-lightbox-count { color: rgba(226, 222, 255, .75); letter-spacing: .06em; }
.ds-lightbox-btn {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    color: #fff;
    background: rgba(43, 27, 99, .66);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    font-size: 1.05rem;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.ds-lightbox-btn:hover,
.ds-lightbox-btn:focus-visible {
    background: var(--ds-primary);
    border-color: transparent;
    outline: none;
}
/* margin-top centres the arrows on the photograph without a transform, so the
   hover scale can never fight the centring. */
.ds-lightbox-prev,
.ds-lightbox-next {
    position: absolute;
    top: 50%;
    margin-top: -23px;
}
.ds-lightbox-prev { left: 0; }
.ds-lightbox-next { right: 0; }
.ds-lightbox-close { position: absolute; top: -.35rem; right: 0; z-index: 2; }

/* ---- 31g. Responsive ----
   `cover` behaves correctly at every width: it always fills the whole band on
   both axes, so the image is never absent and never leaves a flat filler
   block, and it scales uniformly so the 2.811:1 ratio is never distorted.
   Which axis drives the trim simply flips with the band's own ratio:
   above ~1200px the band is wider than 2.811:1 so a little height is trimmed;
   below it the band is taller, so the scale becomes height-driven again and
   the artwork's full 748px height shows with the overflow split evenly left
   and right. Only the BAND HEIGHT and the scrim reach change per breakpoint -
   the band stays inside the 340-400px range throughout.

   1200px+: clamp(340px, 36vw, 400px) from 31a. The artwork fills the band
   edge to edge, so the collage is complete and prominent on the right while
   the artwork's own lavender panel carries the badge, heading and subtitle on
   the left. The trim is only the unavoidable one.

   576-1199.98px: 36vw would ask for a band taller than 380px on a 1024px
   screen, so the upper clamp bound takes over. The scrim simply reaches a
   little further right, because the copy is a much bigger share of a narrower
   band - the same reason the Team hero widens its scrim at this breakpoint.

   Phones: the stacked copy needs a height-driven band. At 340px the artwork
   is wider than the viewport, so `center center` clips it evenly left/right
   while still filling the band top to bottom with the artwork's full height -
   the collage is never cut short vertically - and the scrim keeps the stacked
   copy readable on top of it. */
@media (max-width: 1199.98px) {
    .ds-page-banner.ds-company-hero.ds-gallery-hero {
        min-height: clamp(340px, 36vw, 380px);
    }
    .ds-gallery-hero__copy { max-width: 22rem; }
    .ds-page-banner.ds-gallery-hero > .container {
        padding-top: .75rem;
        padding-bottom: .75rem;
    }
}
@media (max-width: 991.98px) {
    /* Copy is a bigger share of the width, so the scrim holds further across. */
    .ds-page-banner.ds-company-hero.ds-gallery-hero::before {
        background: linear-gradient(90deg,
            rgba(231, 229, 253, .92) 0%,
            rgba(231, 229, 253, .88) 34%,
            rgba(231, 229, 253, .76) 44%,
            rgba(231, 229, 253, .48) 56%,
            rgba(231, 229, 253, .18) 66%,
            rgba(231, 229, 253, 0) 78%);
    }
    /* Re-assert the full-bleed treatment: the shared .ds-company-hero rule
       (21f) drops to `contain` / `right bottom` at this breakpoint, which
       would reintroduce flat filler either side of the artwork. `cover`
       keeps the band completely filled at every width, and with the band now
       taller than 2.811:1 the height-driven scale shows the artwork's full
       height with the sideways overflow split evenly about `center`. */
    .ds-page-banner.ds-company-hero.ds-gallery-hero {
        background-size: cover;
        background-position: center center;
    }
    .ds-gallery-hero__copy { max-width: 26rem; }
    .ds-page-banner.ds-gallery-hero .ds-page-lead { max-width: 26rem; font-size: 1rem; }
    .ds-gal-intro { padding: 3rem 0 1rem; }
    .ds-gal-section { padding: 3rem 0; }
    .ds-gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem; }
}
@media (max-width: 575.98px) {
    /* Height-driven band so the stacked badge + heading + subtitle fit. */
    .ds-page-banner.ds-company-hero.ds-gallery-hero { min-height: 340px; }
    /* The copy is narrow so the right-hand third of the band can still show the
       collage. The scrim holds near-full opacity only as far as the text
       actually reaches, then falls away so real artwork stays visible on the
       right - a uniformly heavy scrim would wash the collage out to a ghost. */
    .ds-page-banner.ds-company-hero.ds-gallery-hero::before {
        background: linear-gradient(90deg,
            rgba(231, 229, 253, .96) 0%,
            rgba(231, 229, 253, .95) 40%,
            rgba(231, 229, 253, .92) 56%,
            rgba(231, 229, 253, .74) 70%,
            rgba(231, 229, 253, .34) 84%,
            rgba(231, 229, 253, .06) 100%);
    }
    .ds-gallery-hero__copy { max-width: 18rem; }
    .ds-page-banner.ds-gallery-hero .ds-page-lead { max-width: 18rem; }
    .ds-gallery-hero-badge { margin-bottom: .8rem; }
    .ds-gal-intro { padding: 2.5rem 0 1rem; }
    .ds-gal-section { padding: 2.5rem 0; }
    .ds-gal-head { margin-bottom: 1.5rem; }
    .ds-gal-grid { grid-template-columns: minmax(0, 1fr); gap: 1.15rem; }
    .ds-lightbox { padding: 1rem 1rem 1.25rem; }
    .ds-lightbox-image { max-height: calc(100vh - 13rem); }
    .ds-lightbox-prev,
    .ds-lightbox-next { top: auto; bottom: -.25rem; margin-top: 0; }
    .ds-lightbox-close { top: -.25rem; }
    .ds-lightbox-btn { width: 42px; height: 42px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ds-gal-thumb, .ds-gal-thumb img, .ds-gal-caption, .ds-gal-zoom,
    .ds-lightbox-btn { transition: none; }
    .ds-gal-thumb:hover, .ds-gal-thumb:focus-visible { transform: none; }
    .ds-gal-thumb:hover img, .ds-gal-thumb:focus-visible img { transform: none; }
}