/* ==========================================================================
   Valunxt — Brand Stylesheet
   UAE accounting, bookkeeping, VAT, corporate tax, valuation & advisory.
   Loaded after Bootstrap 5. Bootstrap supplies grid (container/row/col-*)
   and the navbar component; all other layout/spacing/typography is here.
   Brand palette: #0053B7 (brand blue), #9C00DD (brand purple),
                  #0a1733 (ink), #1a1a1a (text), #fff (white)
   ========================================================================== */

/* Typography: Avenir across the project. Avenir is a licensed font (no Google
   Fonts source); we use an Avenir-first stack with system fallbacks. To serve
   Avenir to every visitor, drop the licensed woff2 files into /public/fonts and
   add an @font-face block here. */

:root {
    /* Brand palette (new) */
    --brand-blue: #0053B7;
    --brand-blue-dk: #00408c;
    --brand-purple: #9C00DD;
    --brand-purple-dk: #7a00ad;
    --brand-gradient: linear-gradient(120deg, #0053B7 0%, #9C00DD 100%);
    --brand-gradient-soft: linear-gradient(120deg, rgba(0,83,183,0.10) 0%, rgba(156,0,221,0.10) 100%);
    --ink: #0a1733;
    --ink-soft: #475069;
    --hairline: #e6e9f2;
    --surface: #f5f7fc;

    /* Legacy aliases — kept because the rest of the sheet references them.
       Re-pointed to the new brand colors so everything recolors centrally. */
    --color-gold: #9C00DD;   /* accent  → brand purple */
    --color-teal: #0053B7;   /* primary → brand blue   */
    --color-white: #ffffff;
    --color-text: #1a1a1a;

    --font-base: 'Avenir Next', 'Avenir', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Avenir Next', 'Avenir', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

    --bs-body-font-family: var(--font-base);
    --bs-body-color: var(--color-text);
    --bs-body-bg: var(--color-white);
    --bs-primary: #0053B7;
    --bs-primary-rgb: 0, 83, 183;
    --bs-link-color: #0053B7;
    --bs-link-color-rgb: 0, 83, 183;
    --bs-link-hover-color: #9C00DD;
    --bs-link-hover-color-rgb: 156, 0, 221;
}

/* ==========================================================================
   Base typography
   ========================================================================== */

body {
    font-family: var(--font-base);
    color: var(--color-text);
    background: var(--color-white);
}

p {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-base);
    color: var(--color-text);
}

a {
    transition: color 0.2s ease;
}

/* ==========================================================================
   Header (top contact bar)
   ========================================================================== */

.site-header {
    background: #0053B7;
    color: var(--color-white);
    font-size: 13.5px;
    line-height: 1;
    min-height: 52px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 200;
    width: 100%;
    margin: 0;
}

.site-header>.container,
.site-header>.container-fluid {
    width: 100%;
    padding-left: clamp(20px, 4vw, 56px);
    padding-right: clamp(20px, 4vw, 56px);
}

.site-header .row {
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
}

.header-info {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px;
}

.header-info-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
}

.header-info,
.header-info a {
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.2s ease;
}

.header-info a:hover {
    color: rgba(255, 255, 255, 0.8);
}

.header-info-icon {
    color: var(--color-white);
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.header-socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.header-socials-item {
    line-height: 1;
}

.header-socials-item a {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: var(--color-white);
    font-size: 15px;
    text-decoration: none;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transition: color 0.25s ease;
}

.header-socials-item a::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-white);
    transform: translateX(101%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
    border-radius: 50%;
}

.header-socials-item a:hover::before,
.header-socials-item a:focus::before {
    transform: translateX(0);
}

.header-socials-item a:hover,
.header-socials-item a:focus {
    color: #0053B7;
}

/* ==========================================================================
   Navbar (Bootstrap component + custom skin)
   ========================================================================== */

.site-navbar {
    background: var(--color-white);
    border-bottom: 1px solid var(--hairline);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow 0.3s ease;
}

/* Subtle elevation once the page scrolls under the sticky header */
.site-navbar.is-stuck {
    box-shadow: 0 8px 30px rgba(10, 23, 51, 0.08);
}

/* Mobile-only off-canvas helpers — hidden on desktop */
.navbar-backdrop,
.navbar-mobile-close,
.navbar-mobile-header {
    display: none;
}

.site-navbar .navbar {
    padding: 0;
    border-bottom: 0;
    align-items: stretch;
    min-height: 80px;
}

.site-navbar .navbar>.container-fluid {
    align-items: stretch;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: clamp(20px, 4vw, 56px);
    padding-right: clamp(20px, 4vw, 56px);
}

.site-navbar .navbar-brand,
.site-navbar .navbar-toggler {
    align-self: center;
}

.site-navbar .navbar-collapse {
    align-self: stretch;
    align-items: stretch;
}

/* Inside the collapse, only the consult button stretches edge-to-edge;
   the menu, search icon and region switcher stay vertically centered. */
.site-navbar .navbar-collapse>.navbar-nav,
.site-navbar .navbar-collapse>.nav-icon-btn,
.site-navbar .navbar-collapse>.navbar-region {
    align-self: center;
}

.site-navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    text-decoration: none;
}

.brand-logo {
    display: block;
    width: 160px;
    height: auto;          /* keep the SVG's true 5:1 ratio — no vertical stretch */
    max-width: 100%;
}

.brand-logo--mobile {
    width: 132px;
    height: auto;
}

/* Off-canvas mobile panel sits on dark teal — keep the logo as-is. */
.navbar-mobile-brand .brand-logo {
    filter: none;
}

.site-navbar .navbar-nav {
    /* No auto margins — flows immediately after the brand on the left */
    margin-left: 32px;
    margin-right: 0;
    align-items: center;
}

.site-navbar .nav-link {
    position: relative;
    color: var(--ink);
    font-size: 15.5px;
    font-weight: 500;
    padding: 20px 22px !important;
    text-decoration: none;
    font-family: var(--font-base);
}

/* Animated brand-gradient underline on hover/active */
.site-navbar .nav-link::after {
    content: '';
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 14px;
    height: 2px;
    background: var(--brand-blue);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-navbar .nav-link.active,
.site-navbar .nav-link.is-active,
.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus {
    color: var(--brand-blue);
}

.site-navbar .nav-link.active::after,
.site-navbar .nav-link.is-active::after,
.site-navbar .nav-link:hover::after,
.site-navbar .nav-link:focus::after {
    transform: scaleX(1);
}

.site-navbar-cta {
    display: flex;
    align-self: stretch;
    align-items: stretch;
    margin-left: auto;
    min-height: 80px;
}

.btn-consult {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 8px;
    background: var(--color-gold);
    color: var(--color-white);
    padding: 0 26px;
    border-radius: 0;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.4px;
    border: 0;
    text-decoration: none;
    line-height: 1;
    font-family: var(--font-display);
    transition: color 0.3s ease, border-color 0.3s ease;
    margin: 0;
    min-height: 80px;
    height: 100%;
}

.btn-consult::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-teal);
    transform: translateX(101%);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.btn-consult>svg {
    transition: transform 0.3s ease;
}

.btn-consult:hover::before,
.btn-consult:focus::before {
    transform: translateX(0);
}

.btn-consult:hover,
.btn-consult:focus {
    color: var(--color-white);
    border-color: var(--color-teal);
}

.btn-consult:hover>svg,
.btn-consult:focus>svg {
    transform: translateX(3px);
}

/* ==========================================================================
   Navbar — Mega-menu enhancements
   ========================================================================== */

/* Positioning context for full-width mega-panels */
.site-navbar {
    position: relative;
}

.site-navbar .navbar-collapse {
    position: static;
}

/* Tighten nav-link padding so 8 items + region switcher + CTA fit */
.site-navbar .navbar-expand-lg .nav-link {
    padding: 20px 14px !important;
    font-size: 15px;
}

/* Trigger anchor (Services / Insights / Partners) — flex with caret */
.site-navbar .nav-link-mega {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.nav-mega-caret {
    transition: transform 0.2s ease;
    flex-shrink: 0;
    opacity: 0.7;
}

.nav-item-mega.is-open .nav-mega-caret,
.navbar-region.is-open .nav-mega-caret {
    transform: rotate(180deg);
    opacity: 1;
}

.site-navbar .nav-link-mega.is-active {
    color: var(--color-gold);
}

/* Mega-panel container — full width of the navbar, drops below the bar */
.mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--color-white);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
    padding: 44px 60px 32px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.nav-item-mega.is-open>.mega-panel,
.navbar-region.is-open>.mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

/* Desktop: pure CSS hover opens the mega panel — no JS class toggling required.
   Mobile (<992px) keeps the .is-open accordion mechanism above. */
@media (min-width: 992px) {

    .nav-item-mega:hover>.mega-panel,
    .navbar-region:hover>.mega-panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
    }

    .nav-item-mega:hover .nav-mega-caret,
    .navbar-region:hover .nav-mega-caret {
        transform: rotate(180deg);
        opacity: 1;
    }

    .navbar-region:hover .nav-region-trigger {
        border-color: var(--color-gold);
        color: var(--color-gold);
    }
}

/* Three-column grid inside the panel */
.mega-panel-cols {
    display: grid;
    gap: 56px;
    max-width: 1240px;
    margin: 0 auto;
}

/* ==========================================================================
   Services mega-menu — clean 4-up grid (vxm)
   ========================================================================== */
.vxm {
    max-width: 1180px;
    margin: 0 auto;
}

.vxm__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.vxm__card {
    display: flex;
    flex-direction: column;
    padding: 22px 22px 24px;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.vxm__card:hover {
    border-color: transparent;
    box-shadow: 0 16px 32px rgba(10, 23, 51, 0.10);
    transform: translateY(-3px);
}

.vxm__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    background: rgba(0, 83, 183, 0.08);
    color: var(--brand-blue);
    margin-bottom: 16px;
    transition: background 0.2s ease, color 0.2s ease;
}

.vxm__card:hover .vxm__icon {
    background: var(--brand-blue);
    color: #fff;
}

.vxm__title {
    font-family: var(--font-base);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 6px;
    transition: color 0.2s ease;
}

.vxm__card:hover .vxm__title {
    color: var(--brand-blue);
}

.vxm__text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
}

.vxm__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--hairline);
}

.vxm__note {
    margin: 0;
    font-size: 13.5px;
    color: var(--ink-soft);
}

.vxm__all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-blue);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.vxm__all svg {
    transition: transform 0.2s ease;
}

.vxm__all:hover {
    color: var(--brand-purple);
}

.vxm__all:hover svg {
    transform: translateX(4px);
}

/* Mobile (<992px): the panel is an in-menu accordion — stack as compact rows */
@media (max-width: 991.98px) {
    .vxm__grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .vxm__card {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 14px;
    }
    .vxm__icon {
        flex: none;
        margin-bottom: 0;
        width: 40px;
        height: 40px;
    }
    .vxm__title {
        margin-bottom: 2px;
    }
    .vxm__foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-top: 16px;
    }
}

.mega-panel-cols-3 {
    grid-template-columns: 1fr 1fr 1.25fr;
}

.mega-col {
    min-width: 0;
}

.mega-col-heading {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-teal);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 22px;
    padding-bottom: 0;
    border-bottom: none;
}

/* Standard mega link (title optionally with subtext) */
.mega-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    text-decoration: none;
    color: var(--color-teal);
    line-height: 1.4;
    border-bottom: 1px solid #e9e9ee;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.mega-link:last-child {
    border-bottom: none;
}

.mega-link:hover,
.mega-link:focus {
    color: var(--color-gold);
}

/* Chevron-down on the right of every standard link (Colliers-style).
   Excluded from .mega-link-arrow because those CTA links already carry an arrow
   in their text. */
.mega-link:not(.mega-link-arrow)::after {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231c31aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.18s ease, opacity 0.18s ease;
    pointer-events: none;
    opacity: 0.85;
}

.mega-link:not(.mega-link-arrow):hover::after,
.mega-link:not(.mega-link-arrow):focus::after {
    opacity: 1;
    transform: translateY(2px);
}

.mega-link-title {
    display: block;
    font-family: var(--font-base);
    font-size: 16px;
    font-weight: 500;
    color: inherit;
}

.mega-link-subtext {
    display: block;
    font-family: var(--font-base);
    font-size: 13px;
    color: #6b6b6b;
    margin-top: 4px;
    line-height: 1.5;
}

/* "View all ..." footer-link under each column — bold + underline accent */
.mega-link-arrow {
    border-bottom: none;
    padding-top: 18px;
}

.mega-link-arrow .mega-link-title {
    color: var(--color-gold);
    font-size: 15px;
    font-weight: 600;
    border-bottom: 2px solid var(--color-gold);
    padding-bottom: 4px;
    display: inline-block;
}

.mega-link-arrow:hover .mega-link-title,
.mega-link-arrow:focus .mega-link-title {
    color: var(--color-gold);
    border-bottom-color: var(--color-gold);
}

/* "Why Valunxt" checklist (informational, not links) */
.mega-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-checklist li {
    position: relative;
    padding: 10px 0 10px 28px;
    font-family: var(--font-base);
    font-size: 15px;
    color: var(--color-text);
    line-height: 1.45;
}

.mega-checklist li::before {
    content: '\2713';
    /* ✓ */
    position: absolute;
    left: 0;
    top: 10px;
    color: var(--color-gold);
    font-weight: 700;
}

/* Featured article card (Colliers-style): image + label + title + text + Read more */
.mega-featured-card {
    display: block;
    text-decoration: none;
    color: var(--color-teal);
    border: none;
    background: transparent;
    padding: 0;
    transition: opacity 0.15s ease;
}

.mega-featured-card:hover,
.mega-featured-card:focus {
    color: var(--color-teal);
    opacity: 0.92;
}

.mega-featured-card-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    margin-bottom: 18px;
    background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-gold) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-white);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    overflow: hidden;
}

.mega-featured-card-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mega-featured-card-thumb-label {
    display: none;
}

.mega-featured-card-meta {
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gold);
    margin-bottom: 6px;
}

.mega-featured-card-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--color-teal);
    margin-bottom: 12px;
}

.mega-featured-card-text {
    font-family: var(--font-base);
    font-size: 14px;
    line-height: 1.55;
    color: #5a5a5a;
    margin: 0 0 14px;
}

.mega-featured-card-cta {
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-teal);
    display: inline-block;
    border-bottom: 2px solid var(--color-teal);
    padding-bottom: 2px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.mega-featured-card:hover .mega-featured-card-cta,
.mega-featured-card:focus .mega-featured-card-cta {
    color: var(--color-gold);
    border-bottom-color: var(--color-gold);
}

/* Bottom row CTA (under all mega panels) — pill button on the right (Colliers-style) */
.mega-bottom-row {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid #e9e9ee;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

.mega-bottom-label {
    font-family: var(--font-base);
    font-size: 15px;
    color: #5a5a5a;
}

.mega-bottom-cta {
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--color-white);
    background: var(--color-teal);
    padding: 14px 32px;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.mega-bottom-cta:hover,
.mega-bottom-cta:focus {
    background: var(--color-gold);
    color: var(--color-white);
}

/* ==========================================================================
   Mega menu — modern icon-card layout
   ========================================================================== */

.mega-panel-cols-services {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;
    gap: 48px;
    max-width: 1280px;
    margin: 0 auto;
}

.mega-col-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    color: var(--color-teal);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eceef3;
}

.mega-col-heading-icon,
.mega-col-heading-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(28, 49, 170, 0.08), rgba(212, 175, 55, 0.12));
    color: var(--color-teal);
    flex-shrink: 0;
}

.mega-col-heading-icon svg {
    width: 16px;
    height: 16px;
}

.mega-col-heading-flag {
    overflow: hidden;
    padding: 0;
    background: #f5f6fa;
}

.mega-col-heading-flag svg,
.mega-col-heading-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mega-card-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mega-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--color-teal);
    border: 1px solid transparent;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.mega-card:hover,
.mega-card:focus {
    background: #f8f7f1;
    border-color: rgba(212, 175, 55, 0.35);
    color: var(--color-teal);
    transform: translateX(2px);
}

.mega-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(28, 49, 170, 0.08), rgba(28, 49, 170, 0.02));
    color: var(--color-teal);
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.mega-card-icon svg {
    width: 20px;
    height: 20px;
}

.mega-card:hover .mega-card-icon,
.mega-card:focus .mega-card-icon {
    background: linear-gradient(135deg, var(--color-teal), #2a3fc1);
    color: var(--color-white);
    transform: scale(1.05);
}

.mega-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mega-card-title {
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-teal);
    line-height: 1.35;
}

.mega-card-subtext {
    font-family: var(--font-base);
    font-size: 12.5px;
    color: #6b6b78;
    line-height: 1.45;
}

.mega-card:hover .mega-card-title,
.mega-card:focus .mega-card-title {
    color: var(--color-gold);
}

/* ---------- Partners mega — clean, flat icons (no gradient backgrounds) ---------- */
.mega-panel-partners .mega-col-heading-icon {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    color: var(--color-gold);
}

.mega-panel-partners .mega-col-heading-icon svg {
    width: 20px;
    height: 20px;
}

.mega-panel-partners .mega-card-icon {
    width: 34px;
    height: 34px;
    background: none;
    border-radius: 0;
    color: var(--color-teal);
    transition: color 0.2s ease, transform 0.2s ease;
}

.mega-panel-partners .mega-card-icon svg {
    width: 24px;
    height: 24px;
}

.mega-panel-partners .mega-card:hover .mega-card-icon,
.mega-panel-partners .mega-card:focus .mega-card-icon {
    background: none;
    color: var(--color-gold);
    transform: none;
}

/* "View all" CTA at end of each card column */
.mega-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 8px 0;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-gold);
    border-bottom: 2px solid transparent;
    align-self: flex-start;
    width: auto;
    transition: gap 0.18s ease, border-color 0.18s ease;
}

.mega-view-all svg {
    transition: transform 0.18s ease;
}

.mega-view-all:hover,
.mega-view-all:focus {
    color: var(--color-gold);
    gap: 12px;
    border-bottom-color: var(--color-gold);
}

.mega-view-all:hover svg,
.mega-view-all:focus svg {
    transform: translateX(2px);
}

/* Feature column — light textured card, shared across all mega menus */
.mega-col-feature {
    position: relative;
    background: #fbfbfd;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #eceef3;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(28, 49, 170, 0.05);
}

.mega-col-feature::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%231c31aa' fill-opacity='0.06'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3Ccircle cx='22' cy='22' r='1'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.mega-col-feature>* {
    position: relative;
    z-index: 1;
}

.mega-col-feature .mega-col-heading {
    color: var(--color-teal);
    border-bottom-color: rgba(28, 49, 170, 0.08);
    margin-bottom: 18px;
}

.mega-col-feature .mega-col-heading-icon {
    background: rgba(28, 49, 170, 0.08);
    color: var(--color-teal);
}

.mega-col-feature .mega-featured-card {
    color: var(--color-teal);
}

.mega-col-feature .mega-featured-card-thumb {
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 6px 16px rgba(28, 49, 170, 0.12);
    aspect-ratio: 16 / 9;
}

.mega-col-feature .mega-featured-card-meta {
    color: var(--color-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.mega-col-feature .mega-featured-card-title {
    color: var(--color-teal);
    font-size: 19px;
    line-height: 1.3;
    margin-bottom: 10px;
}

.mega-col-feature .mega-featured-card-text {
    color: #5a5a6b;
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 16px;
}

.mega-col-feature .mega-featured-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-teal);
    border-bottom: 2px solid var(--color-teal);
    padding-bottom: 3px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.mega-col-feature .mega-featured-card-cta svg {
    transition: transform 0.2s ease;
}

.mega-col-feature .mega-featured-card:hover .mega-featured-card-cta {
    color: var(--color-gold);
    border-bottom-color: var(--color-gold);
}

.mega-col-feature .mega-featured-card:hover .mega-featured-card-cta svg {
    transform: translateX(4px);
}

.mega-col-feature .mega-featured-card:hover,
.mega-col-feature .mega-featured-card:focus {
    opacity: 1;
    color: var(--color-teal);
}

/* Bottom row — icon next to label, arrow inside CTA */
.mega-bottom-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mega-bottom-label svg {
    color: var(--color-teal);
    opacity: 0.7;
    flex-shrink: 0;
}

.mega-bottom-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mega-bottom-cta svg {
    transition: transform 0.18s ease;
}

.mega-bottom-cta:hover svg,
.mega-bottom-cta:focus svg {
    transform: translateX(3px);
}

/* ==========================================================================
   Partners mega menu — two open link groups + immersive spotlight card
   ========================================================================== */
@media (min-width: 992px) {
    .mega-panel-partners {
        grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
        gap: 48px;
        align-items: stretch;
    }

    /* Left zone fills the row height so the spotlight stays balanced */
    .mega-partners-main {
        display: flex;
        flex-direction: column;
    }

    .mega-partners-groups {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 44px;
        flex: 1;
    }

    .mega-panel-partners .mega-col-cards {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* Push the "view all" CTA to the bottom of each group */
    .mega-panel-partners .mega-view-all {
        margin-top: auto;
    }

    .mega-panel-partners .mega-col-heading {
        font-size: 19px;
        margin-bottom: 12px;
        padding-bottom: 12px;
    }

    .mega-panel-partners .mega-col-heading-icon {
        width: auto;
        height: auto;
        background: none;
        border-radius: 0;
        color: var(--color-gold);
    }

    /* Flat links with a quiet tinted hover */
    .mega-panel-partners .mega-card {
        padding: 11px 12px;
    }

    .mega-panel-partners .mega-card:hover,
    .mega-panel-partners .mega-card:focus {
        background: rgba(28, 49, 170, 0.045);
        border-color: transparent;
        transform: translateX(3px);
    }

    .mega-panel-partners .mega-card:hover .mega-card-title,
    .mega-panel-partners .mega-card:focus .mega-card-title {
        color: var(--color-gold);
    }

    /* Right zone: immersive spotlight — strip the old light-card chrome */
    .mega-feature-partners {
        display: flex;
        background: none;
        border: 0;
        box-shadow: none;
        padding: 0;
        overflow: visible;
    }

    .mega-feature-partners::before {
        display: none;
    }

    .mega-spotlight {
        position: relative;
        display: block;
        width: 100%;
        min-height: 320px;
        border-radius: 18px;
        overflow: hidden;
        text-decoration: none;
        box-shadow: 0 18px 38px rgba(13, 18, 60, 0.22);
        isolation: isolate;
    }

    .mega-spotlight-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.45s ease;
    }

    .mega-spotlight:hover .mega-spotlight-img,
    .mega-spotlight:focus .mega-spotlight-img {
        transform: scale(1.05);
    }

    .mega-spotlight-scrim {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top,
                rgba(11, 16, 56, 0.94) 0%,
                rgba(11, 16, 56, 0.66) 38%,
                rgba(11, 16, 56, 0.08) 72%);
    }

    .mega-spotlight-badge {
        position: absolute;
        top: 18px;
        left: 18px;
        z-index: 2;
        font-family: var(--font-base);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--color-white);
        padding: 5px 12px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--color-teal), var(--color-gold));
        box-shadow: 0 6px 16px rgba(11, 16, 56, 0.35);
    }

    .mega-spotlight-content {
        position: absolute;
        inset: auto 0 0 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 24px;
    }

    .mega-spotlight-title {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 22px;
        line-height: 1.25;
        color: var(--color-white);
        margin: 0;
    }

    .mega-spotlight-text {
        font-family: var(--font-base);
        font-size: 13px;
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.82);
        margin: 0;
    }

    .mega-spotlight-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 6px;
        font-family: var(--font-base);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        color: var(--color-white);
        padding-bottom: 3px;
        border-bottom: 2px solid var(--color-gold);
    }

    .mega-spotlight-cta svg {
        transition: transform 0.2s ease;
    }

    .mega-spotlight:hover .mega-spotlight-cta svg,
    .mega-spotlight:focus .mega-spotlight-cta svg {
        transform: translateX(4px);
    }

    /* Full-width process band across the bottom of the panel */
    .mega-partners-steps {
        grid-column: 1 / -1;
        margin-top: 12px;
        padding-top: 26px;
        border-top: 1px solid #eceef3;
    }

    .mega-partners-steps-label {
        display: block;
        font-family: var(--font-base);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--color-gold);
        margin-bottom: 18px;
    }

    .mega-partners-steps-track {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    .mega-step {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 14px;
    }

    /* Connector line between steps */
    .mega-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 17px;
        right: -32px;
        width: 32px;
        height: 1px;
        background: rgba(28, 49, 170, 0.14);
    }

    .mega-step-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        font-family: var(--font-base);
        font-size: 14px;
        font-weight: 700;
        color: var(--color-gold);
        background: transparent;
        border: 1.5px solid rgba(167, 52, 190, 0.45);
    }

    .mega-step-body {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .mega-step-title {
        font-family: var(--font-base);
        font-size: 14.5px;
        font-weight: 600;
        color: var(--color-teal);
        line-height: 1.3;
    }

    .mega-step-text {
        font-family: var(--font-base);
        font-size: 12.5px;
        line-height: 1.5;
        color: #6b6b78;
    }
}

/* ==========================================================================
   Insights mega menu — editorial content hub (featured hero + category tiles)
   ========================================================================== */
@media (min-width: 992px) {
    .mega-panel-insights {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    /* Featured report — horizontal hero card */
    .mega-insights-hero {
        display: grid;
        grid-template-columns: 320px 1fr;
        border-radius: 18px;
        overflow: hidden;
        text-decoration: none;
        background: #fbfbfd;
        border: 1px solid #eceef3;
        box-shadow: 0 10px 26px rgba(28, 49, 170, 0.07);
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .mega-insights-hero:hover,
    .mega-insights-hero:focus {
        box-shadow: 0 16px 34px rgba(28, 49, 170, 0.13);
        transform: translateY(-2px);
    }

    .mega-insights-hero-media {
        position: relative;
        min-height: 200px;
        overflow: hidden;
    }

    .mega-insights-hero-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.45s ease;
    }

    .mega-insights-hero:hover .mega-insights-hero-img,
    .mega-insights-hero:focus .mega-insights-hero-img {
        transform: scale(1.05);
    }

    .mega-insights-hero-media::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, transparent 60%, rgba(251, 251, 253, 0.9));
    }

    .mega-insights-hero-tag {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 1;
        font-family: var(--font-base);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--color-white);
        padding: 5px 11px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--color-teal), var(--color-gold));
        box-shadow: 0 6px 14px rgba(11, 16, 56, 0.3);
    }

    .mega-insights-hero-body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 28px 34px;
    }

    .mega-insights-hero-badge {
        font-family: var(--font-base);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--color-gold);
        margin-bottom: 10px;
    }

    .mega-insights-hero-title {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 26px;
        line-height: 1.2;
        color: var(--color-teal);
        margin: 0 0 10px;
    }

    .mega-insights-hero-text {
        font-family: var(--font-base);
        font-size: 13.5px;
        line-height: 1.6;
        color: #5a5a6b;
        margin: 0 0 16px;
        max-width: 560px;
    }

    .mega-insights-hero-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-base);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        color: var(--color-teal);
        padding-bottom: 3px;
        border-bottom: 2px solid var(--color-teal);
    }

    .mega-insights-hero-cta svg {
        transition: transform 0.2s ease;
    }

    .mega-insights-hero:hover .mega-insights-hero-cta,
    .mega-insights-hero:focus .mega-insights-hero-cta {
        color: var(--color-gold);
        border-bottom-color: var(--color-gold);
    }

    .mega-insights-hero:hover .mega-insights-hero-cta svg,
    .mega-insights-hero:focus .mega-insights-hero-cta svg {
        transform: translateX(4px);
    }

    /* Explore — header row + category tiles */
    .mega-insights-explore-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #eceef3;
    }

    .mega-insights-explore-label {
        font-family: var(--font-base);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--color-gold);
    }

    .mega-insights-explore-all {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-family: var(--font-base);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--color-teal);
        transition: gap 0.18s ease, color 0.18s ease;
    }

    .mega-insights-explore-all:hover,
    .mega-insights-explore-all:focus {
        color: var(--color-gold);
        gap: 11px;
    }

    .mega-insights-tiles {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 14px;
    }

    .mega-itile {
        display: flex;
        flex-direction: column;
        gap: 9px;
        padding: 18px 16px;
        border-radius: 14px;
        text-decoration: none;
        background: transparent;
        border: 0;
    }

    .mega-itile-icon {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        align-self: flex-start;
        width: auto;
        height: 26px;
        border-radius: 0;
        background: none;
        color: var(--color-teal);
    }

    .mega-itile-icon svg {
        width: 24px;
        height: 24px;
    }

    .mega-itile-title {
        font-family: var(--font-base);
        font-size: 14.5px;
        font-weight: 600;
        color: var(--color-teal);
        line-height: 1.3;
    }

    .mega-itile-text {
        font-family: var(--font-base);
        font-size: 12px;
        line-height: 1.45;
        color: #6b6b78;
    }
}

/* Insights — tablet: hero stacks, tiles wrap to a tighter grid */
@media (max-width: 1199.98px) and (min-width: 992px) {
    .mega-insights-hero {
        grid-template-columns: 260px 1fr;
    }

    .mega-insights-tiles {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive: tablet — feature drops below the link groups */
@media (max-width: 1199.98px) and (min-width: 992px) {
    .mega-panel-cols-services {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

    .mega-col-feature {
        grid-column: 1 / -1;
    }

    .mega-panel-partners {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* Responsive: mobile — single column stacking, light icon containers on dark bg */
@media (max-width: 991.98px) {
    .mega-panel-cols-services {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mega-col-heading {
        border-bottom-color: rgba(255, 255, 255, 0.12);
        color: var(--color-gold);
        font-size: 18px;
    }

    .mega-col-heading-icon {
        background: rgba(212, 175, 55, 0.15);
        color: var(--color-gold);
    }

    .mega-card {
        padding: 10px 12px;
        border-color: rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.03);
    }

    .mega-card:hover,
    .mega-card:focus {
        background: rgba(212, 175, 55, 0.08);
        border-color: rgba(212, 175, 55, 0.45);
        transform: none;
    }

    .mega-card-icon {
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.08);
        color: var(--color-gold);
    }

    .mega-card:hover .mega-card-icon,
    .mega-card:focus .mega-card-icon {
        background: var(--color-gold);
        color: var(--color-teal);
    }

    .mega-card-title {
        color: var(--color-white);
        font-size: 14px;
    }

    .mega-card-subtext {
        color: rgba(255, 255, 255, 0.6);
        font-size: 12px;
    }

    .mega-card:hover .mega-card-title,
    .mega-card:focus .mega-card-title {
        color: var(--color-gold);
    }

    .mega-view-all {
        color: var(--color-gold);
        font-size: 12px;
    }

    .mega-col-feature {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08);
        padding: 16px;
    }

    .mega-bottom-label svg {
        color: var(--color-gold);
        opacity: 1;
    }
}

/* ----- Circular icon buttons (search + region trigger) ----- */
.nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #e5e5e5;
    color: var(--color-teal);
    padding: 0;
    cursor: pointer;
    margin-left: 8px;
    flex-shrink: 0;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.nav-icon-btn:hover,
.nav-icon-btn:focus,
.nav-icon-btn.is-active {
    border-color: var(--color-gold);
    color: var(--color-gold);
    outline: 0;
}

.nav-icon-svg {
    display: block;
}

/* Region switcher (flag in circle).
   Note: NO position:relative here — we want .mega-panel-region to position
   against .site-navbar (the full navbar bar) so the panel sits cleanly below
   the bar, not below the small 40px trigger circle. */
.navbar-region {
    display: inline-flex;
    align-items: center;
}

.navbar-region.is-open .nav-region-trigger {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.nav-region-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Trigger button: flag fills the circle, gets clipped by the border-radius */
.nav-region-trigger {
    overflow: hidden;
}

.nav-region-trigger .region-flag-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Globe icon in the trigger is centred at icon-size, not flag-size */
.nav-region-trigger .region-flag-svg--globe {
    width: 22px;
    height: 22px;
}

/* Region switcher panel — smaller, right-aligned */
.mega-panel-region {
    left: auto;
    right: 10px;
    min-width: 320px;
    max-width: 360px;
    padding: 20px;
}

.mega-region-list {
    display: flex;
    flex-direction: column;
}

.mega-region-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 8px;
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s ease, color 0.15s ease;
}

.mega-region-row:last-of-type {
    border-bottom: none;
}

.mega-region-row:hover,
.mega-region-row:focus {
    background: #faf8f4;
    color: var(--color-teal);
}

.mega-region-row.is-current {
    background: #faf8f4;
}

.mega-region-row.is-current .mega-region-label {
    color: var(--color-teal);
}

/* Flag wrapper: fixed size for consistent row height regardless of flag */
.mega-region-flag {
    width: 28px;
    height: 20px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mega-region-flag .region-flag-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Globe row uses an icon-style SVG, not a flag — drop the border + cropping */
.mega-region-flag--globe {
    border: none;
    color: var(--color-teal);
}

.mega-region-flag--globe .region-flag-svg--globe {
    width: 22px;
    height: 22px;
}

.mega-region-label {
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    flex: 1;
}

/* Right-pointing chevron at the end of each row (Colliers-style) */
.mega-region-chev {
    width: 12px;
    height: 12px;
    color: #c0c0c0;
    flex-shrink: 0;
    transition: color 0.15s ease, transform 0.15s ease;
}

.mega-region-row:hover .mega-region-chev,
.mega-region-row:focus .mega-region-chev {
    color: var(--color-teal);
    transform: translateX(2px);
}

.mega-region-row.is-current .mega-region-chev {
    color: var(--color-teal);
}

.mega-region-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #eee;
    font-family: var(--font-base);
    font-size: 12px;
    color: #5a5a5a;
}

.mega-region-footer strong {
    color: var(--color-text);
    font-weight: 700;
}

.mega-region-language {
    margin-top: 4px;
    color: #8a8a8a;
}

/* ==========================================================================
   Navbar — Desktop active link styling
   --------------------------------------------------------------------------
   The base .site-navbar .nav-link.active/hover rule (further up) already sets
   gold colour. On desktop, current-page links also get a heavier weight so
   they read more strongly than hover — no underline accent.
   Mobile slide-in panel keeps the existing gold-on-hover behaviour for
   visibility on the dark teal background.
   ========================================================================== */

@media (min-width: 992px) {

    .site-navbar .navbar-nav .nav-link.active,
    .site-navbar .navbar-nav .nav-link.is-active {
        font-weight: 700;
    }
}

/* ==========================================================================
   Navbar — Tablet slide-in (768–991px) for navbar-expand-lg
   --------------------------------------------------------------------------
   The existing mobile slide-in styles (further below) target <768px. With
   the new mega-menu navbar using navbar-expand-lg, mobile mode now extends
   up to 991px. This block extends the slide-in skin into the tablet range
   without modifying the existing <768px rules.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991.98px) {
    .site-navbar .navbar-collapse {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        height: 100% !important;
        width: 420px !important;
        max-width: 100%;
        background: var(--color-teal) !important;
        color: var(--color-white);
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0s linear 0.4s;
        z-index: 1080;
        padding: 0 !important;
        overflow-y: auto;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.25);
        visibility: hidden;
    }

    .site-navbar.is-open .navbar-collapse {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0s linear 0s;
    }

    .navbar-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        width: 100%;
    }

    .navbar-mobile-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--color-white);
        text-decoration: none;
    }

    .navbar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1070;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s ease, visibility 0.35s ease;
    }

    .site-navbar.is-open .navbar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    .site-navbar .navbar-mobile-close {
        display: inline-flex !important;
        width: 40px;
        height: 40px;
        background: var(--color-gold);
        border: 0;
        color: var(--color-white);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 50%;
        padding: 0;
        line-height: 0;
        flex-shrink: 0;
    }

    body.nav-locked {
        overflow: hidden;
    }

    .site-navbar .navbar-toggler {
        display: inline-flex !important;
    }

    .site-navbar .navbar-collapse>.navbar-nav {
        padding: 16px 20px 0 !important;
    }

    .site-navbar .navbar-collapse>.site-navbar-cta {
        padding: 0 20px 24px;
        display: block;
        margin-top: 28px;
        margin-left: 0;
        width: 100%;
    }

    .site-navbar .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        margin: 0;
        padding: 0;
        width: 100%;
        text-align: left;
    }

    .site-navbar .navbar-nav .nav-item {
        width: 100%;
    }

    .site-navbar .nav-link {
        color: var(--color-white) !important;
        padding: 14px 0 !important;
        font-size: 16px;
        font-weight: 500;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        font-family: var(--font-base);
        text-align: left;
        display: block;
    }

    .site-navbar .nav-link.active,
    .site-navbar .nav-link:hover,
    .site-navbar .nav-link:focus,
    .site-navbar .nav-link.is-active {
        color: var(--color-gold) !important;
    }

    .btn-consult {
        width: 100%;
        padding: 16px 20px;
        font-size: 14px;
        justify-content: center;
    }
}

/* ==========================================================================
   Navbar — Mega-menu mobile accordion
   ========================================================================== */

@media (max-width: 991.98px) {

    /* Mega panels collapse inline within the existing slide-in */
    .mega-panel {
        position: static;
        opacity: 1;
        visibility: hidden;
        transform: none;
        transition: none;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        border-top: none;
        box-shadow: none;
        background: transparent;
    }

    .nav-item-mega.is-open>.mega-panel,
    .navbar-region.is-open>.mega-panel {
        visibility: visible;
        max-height: 2000px;
        /* generous, animation is via padding */
        padding: 8px 16px 16px;
    }

    .mega-panel-cols {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .mega-col-heading {
        margin-top: 8px;
    }

    /* Hide search trigger on mobile (placeholder hook only — no overlay yet) */
    .nav-icon-btn[data-search-trigger] {
        display: none;
    }

    /* Region trigger inside the slide-in: keep circular flag-in-circle,
       light variant for the dark teal background */
    .navbar-region {
        margin: 16px 18px 0;
    }

    .nav-region-trigger {
        border-color: rgba(255, 255, 255, 0.25);
        color: var(--color-white);
    }

    .nav-region-trigger:hover,
    .nav-region-trigger:focus,
    .navbar-region.is-open .nav-region-trigger {
        border-color: var(--color-gold);
        color: var(--color-gold);
    }

    .mega-panel-region {
        min-width: auto;
        max-width: none;
    }

    /* Inside the dark mobile panel, mega text needs to be light */
    .mega-link,
    .mega-link-title,
    .mega-checklist li,
    .mega-region-label,
    .mega-bottom-label,
    .mega-region-footer,
    .mega-region-footer strong {
        color: var(--color-white);
    }

    .mega-link {
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    /* Recolour the chevron caret on dark mobile bg */
    .mega-link:not(.mega-link-arrow)::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
    }

    .mega-link-arrow .mega-link-title {
        color: var(--color-gold);
        border-bottom-color: var(--color-gold);
    }

    .mega-link-subtext,
    .mega-region-subtext {
        color: rgba(255, 255, 255, 0.65);
    }

    /* Partners spotlight card on the dark mobile panel */
    .mega-feature-partners {
        background: none;
        border: 0;
        box-shadow: none;
        padding: 0;
        overflow: visible;
    }

    .mega-feature-partners::before {
        display: none;
    }

    .mega-spotlight {
        position: relative;
        display: block;
        margin-top: 12px;
        border-radius: 14px;
        overflow: hidden;
        text-decoration: none;
        min-height: 240px;
    }

    .mega-spotlight-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mega-spotlight-scrim {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top,
                rgba(11, 16, 56, 0.92) 0%,
                rgba(11, 16, 56, 0.6) 40%,
                rgba(11, 16, 56, 0.1) 75%);
    }

    .mega-spotlight-badge {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 2;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--color-white);
        padding: 4px 10px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--color-teal), var(--color-gold));
    }

    .mega-spotlight-content {
        position: absolute;
        inset: auto 0 0 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 18px;
    }

    .mega-spotlight-title {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 19px;
        line-height: 1.25;
        color: var(--color-white);
        margin: 0;
    }

    .mega-spotlight-text {
        font-family: var(--font-base);
        font-size: 12.5px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.8);
        margin: 0;
    }

    .mega-spotlight-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 4px;
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        color: var(--color-white);
        padding-bottom: 3px;
        border-bottom: 2px solid var(--color-gold);
    }

    /* Process band — light text, single column on dark mobile panel */
    .mega-partners-steps {
        margin-top: 16px;
        padding-top: 18px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .mega-partners-steps-label {
        display: block;
        font-family: var(--font-base);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--color-gold);
        margin-bottom: 14px;
    }

    .mega-partners-steps-track {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .mega-step {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .mega-step-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-family: var(--font-base);
        font-size: 13px;
        font-weight: 700;
        color: var(--color-gold);
        background: transparent;
        border: 1.5px solid rgba(167, 52, 190, 0.45);
    }

    .mega-step-body {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .mega-step-title {
        font-family: var(--font-base);
        font-size: 14px;
        font-weight: 600;
        color: var(--color-white);
        line-height: 1.3;
    }

    .mega-step-text {
        font-family: var(--font-base);
        font-size: 12.5px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.65);
    }

    /* Insights hub — stacked hero + single-column tiles on dark mobile panel */
    .mega-panel-insights {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .mega-insights-hero {
        display: block;
        border-radius: 14px;
        overflow: hidden;
        text-decoration: none;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
    }

    .mega-insights-hero-media {
        position: relative;
        height: 150px;
    }

    .mega-insights-hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mega-insights-hero-tag {
        position: absolute;
        top: 12px;
        left: 12px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--color-white);
        padding: 4px 10px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--color-teal), var(--color-gold));
    }

    .mega-insights-hero-body {
        padding: 16px 16px 18px;
    }

    .mega-insights-hero-badge {
        display: block;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--color-gold);
        margin-bottom: 8px;
    }

    .mega-insights-hero-title {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 19px;
        line-height: 1.25;
        color: var(--color-white);
        margin: 0 0 8px;
    }

    .mega-insights-hero-text {
        font-family: var(--font-base);
        font-size: 12.5px;
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.7);
        margin: 0 0 12px;
    }

    .mega-insights-hero-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        color: var(--color-white);
        padding-bottom: 3px;
        border-bottom: 2px solid var(--color-gold);
    }

    .mega-insights-explore-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .mega-insights-explore-label {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--color-gold);
    }

    .mega-insights-explore-all {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11.5px;
        font-weight: 600;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--color-white);
    }

    .mega-insights-tiles {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mega-itile {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        column-gap: 12px;
        row-gap: 2px;
        padding: 12px 14px;
        border-radius: 12px;
        text-decoration: none;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.03);
    }

    .mega-itile-icon {
        grid-row: 1 / 3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: 24px;
        border-radius: 0;
        background: none;
        color: var(--color-gold);
    }

    .mega-itile-icon svg {
        width: 22px;
        height: 22px;
    }

    .mega-itile-title {
        font-family: var(--font-base);
        font-size: 14px;
        font-weight: 600;
        color: var(--color-white);
        line-height: 1.3;
    }

    .mega-itile-text {
        font-family: var(--font-base);
        font-size: 12px;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.6);
    }

    .mega-col-heading {
        color: var(--color-gold);
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding-bottom: 12px;
        font-size: 20px;
    }

    .mega-link:hover,
    .mega-link:focus,
    .mega-region-row:hover,
    .mega-region-row:focus {
        color: var(--color-gold);
        background: transparent;
    }

    .mega-region-row.is-current {
        background: rgba(255, 255, 255, 0.04);
    }

    .mega-bottom-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    .mega-bottom-cta {
        background: var(--color-gold);
    }

    .mega-bottom-cta:hover,
    .mega-bottom-cta:focus {
        background: var(--color-white);
        color: var(--color-teal);
    }

    .mega-featured-card-title {
        color: var(--color-white);
    }

    .mega-featured-card-text {
        color: rgba(255, 255, 255, 0.7);
    }

    .mega-featured-card-cta {
        color: var(--color-gold);
        border-bottom-color: var(--color-gold);
    }
}


/* ==========================================================================
   India: navbar is transparent and overlays the hero/banner
   (UAE keeps the default solid white navbar above the coming-soon section.)
   ========================================================================== */

/* Body background on India: dark teal so any uncovered area between the
   header and the hero/banner never paints as white. */
body.region-in {
    background: #fff;
}

/* India desktop navbar — opaque white, matches UAE/Shared treatment.
   Keep position/z-index so any dropdowns layer above subsequent sections. */
.region-in .site-navbar {
    position: relative;
    z-index: 100;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.site-main {
    min-height: 60vh;
}

.hero {
    position: relative;
    background-color: var(--color-teal);
    color: var(--color-white);
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    display: block;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background-color: rgb(29 29 29 / 66%);
    z-index: 1;
    pointer-events: none;
}

.hero>.container {
    position: relative;
    z-index: 2;
}

.hero-content {
    width: 100%;
    padding-top: 90px;
    padding-bottom: 40px;
}

.hero-content .row {
    align-items: stretch;
    min-height: 320px;
}

.hero-col-headline {
    height: 100%;
}

.hero-headline {
    font-family: var(--font-base);
    color: var(--color-white);
    font-size: clamp(36px, 4.6vw, 62px);
    line-height: 1.2;
    font-weight: 500;
    margin: 0;
}

.hero-headline em {
    font-style: italic;
    font-weight: 500;
    color: #fff;
    font-family: var(--font-display);
}

.hero-col-tagline {
    display: flex;
    align-items: flex-end;
    height: 100%;
}

.hero-tagline {
    color: var(--color-white);
    font-size: 14px;
    line-height: 22px;
    margin: 0 0 0 auto;
    max-width: 320px;
}

.hero-watermark-wrap {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 20px;
    pointer-events: none;
}

.hero-watermark {
    font-family: var(--font-display);
    color: var(--color-white);
    font-weight: 500;
    font-size: clamp(80px, 16vw, 250px);
    letter-spacing: 6px;
    line-height: 0.85;
    /* margin: 0; */
    text-transform: uppercase;
}

.hero-arrows {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 3;
    display: flex;
    gap: 12px;
}

.hero-arrow {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-gold);
    color: var(--color-white);
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.hero-arrow::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-teal);
    transform: translateX(101%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
    border-radius: 50%;
}

.hero-arrow:hover::before,
.hero-arrow:focus::before {
    transform: translateX(0);
}

.hero-arrow:hover,
.hero-arrow:focus {
    color: var(--color-white);
    outline: 0;
}

/* ==========================================================================
   Page banner (reusable inner-page hero with city image + breadcrumb)
   --------------------------------------------------------------------------
   Used by partials/page-banner.blade.php (which the coming-soon partial
   auto-includes). Drop in any page header by including that partial.
   ========================================================================== */

.page-banner {
    position: relative;
    background-color: var(--color-teal);
    color: var(--color-white);
    overflow: hidden;
    isolation: isolate;
    min-height: 480px;
    display: flex;
    align-items: stretch;
}

.page-banner>.container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 60px;
    width: 100%;
}

.page-banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: -2;
    display: block;
}

.page-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 14, 40, 0.78) 0%, rgba(8, 14, 40, 0.55) 35%, rgba(8, 14, 40, 0.12) 70%, rgba(8, 14, 40, 0) 100%);
    z-index: -1;
}

.page-banner-content {
    width: 100%;
    max-width: 720px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-banner-title {
    font-family: var(--font-base);
    color: var(--color-white);
    font-size: clamp(40px, 5.4vw, 52px);
    line-height: 1.05;
    font-weight: 500;
    margin: 0 0 24px;
    letter-spacing: -1.2px;
}

.page-banner-text {
    color: var(--color-white);
    font-size: 17px;
    line-height: 1.55;
    font-weight: 400;
    margin: 0;
    max-width: 560px;
}

/* Breadcrumb pinned to the bottom-left of the banner, inside the dark area */
.page-banner-crumb {
    margin-top: auto;
    padding-top: 32px;
}

.page-banner-crumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 15px;
}

.page-banner-crumb-item {
    color: var(--color-white);
    font-weight: 500;
}

.page-banner-crumb-item a {
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.2s ease;
}

.page-banner-crumb-item a:hover {
    color: var(--color-gold);
}

.page-banner-crumb-item[aria-current="page"] {
    color: var(--color-white);
    opacity: 0.85;
}

.page-banner-crumb-sep {
    color: var(--color-white);
    opacity: 0.75;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.page-banner-crumb-sep svg {
    display: block;
}

/* Tablet */
@media (max-width: 991.98px) {
    .page-banner {
        min-height: 400px;
    }

    .page-banner>.container {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .page-banner-title {
        margin-bottom: 18px;
    }

    .page-banner-text {
        font-size: 15px;
    }

    .page-banner-crumb {
        padding-top: 28px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .page-banner {
        min-height: 340px;
    }

    .page-banner-title {
        font-size: 40px;
        letter-spacing: -0.6px;
    }

    .page-banner-text {
        font-size: 14px;
    }

    .page-banner-crumb-list {
        font-size: 13px;
    }
}

/* ==========================================================================
   Inner page placeholder
   ========================================================================== */

.page-section {
    padding: 80px 0;
    background: var(--color-white);
}

.page-placeholder {
    border: 1px solid var(--color-gold);
    padding: 64px 32px;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.page-placeholder-tag {
    display: inline-block;
    color: var(--color-gold);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 12px;
    margin-bottom: 16px;
}

.page-placeholder-title {
    font-family: var(--font-display);
    color: var(--color-text);
    font-size: 28px;
    margin: 0 0 16px;
}

.page-placeholder-text {
    color: var(--color-text);
    font-size: 14px;
    line-height: 22px;
    margin: 0;
}

.page-placeholder-text a {
    color: var(--color-gold);
    text-decoration: underline;
}

.page-placeholder-text a:hover {
    color: var(--color-teal);
}

/* ==========================================================================
   Coming Soon (UAE)
   ========================================================================== */

.coming-soon {
    background: linear-gradient(180deg, #faf8fb 0%, var(--color-white) 100%);
    padding: 96px 0;
}

.coming-soon-card {
    position: relative;
    overflow: hidden;
    background: var(--color-white);
    max-width: 760px;
    margin: 0 auto;
    padding: 72px 56px;
    text-align: center;
    border-radius: 4px;
    box-shadow:
        0 1px 2px rgba(28, 49, 170, 0.04),
        0 24px 60px -20px rgba(167, 52, 190, 0.18);
    border: 1px solid rgba(167, 52, 190, 0.12);
}

.coming-soon-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-teal) 100%);
}

.coming-soon-card::after {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    right: -120px;
    top: -120px;
    background: radial-gradient(circle, rgba(167, 52, 190, 0.08) 0%, rgba(167, 52, 190, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(167, 52, 190, 0.08);
    border: 1px solid rgba(167, 52, 190, 0.18);
    border-radius: 999px;
    color: var(--color-gold);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.coming-soon-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-gold);
    box-shadow: 0 0 0 0 rgba(167, 52, 190, 0.6);
    animation: comingSoonPulse 1.8s ease-out infinite;
}

@keyframes comingSoonPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(167, 52, 190, 0.55);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(167, 52, 190, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(167, 52, 190, 0);
    }
}

.coming-soon-tag {
    display: block;
    color: var(--color-teal);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 14px;
}

.coming-soon-title {
    font-family: var(--font-display);
    color: var(--color-text);
    font-size: 64px;
    line-height: 1.05;
    margin: 0 0 20px;
    letter-spacing: 1px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-text) 0%, var(--color-teal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.coming-soon-text {
    max-width: 520px;
    margin: 0 auto 36px;
    color: #5a5a6a;
    font-size: 15px;
    line-height: 1.7;
}

.coming-soon-progress {
    position: relative;
    width: 200px;
    height: 3px;
    margin: 0 auto 40px;
    background: rgba(28, 49, 170, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.coming-soon-progress-bar {
    position: absolute;
    inset: 0;
    width: 40%;
    background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-teal) 100%);
    border-radius: 999px;
    animation: comingSoonSlide 2.4s ease-in-out infinite;
}

@keyframes comingSoonSlide {
    0% {
        left: -40%;
    }

    100% {
        left: 100%;
    }
}

.coming-soon-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.coming-soon-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-decoration: none;
    border-radius: 2px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    line-height: 1;
}

.coming-soon-btn svg {
    transition: transform 0.25s ease;
}

.coming-soon-btn--primary {
    background: var(--color-gold);
    color: var(--color-white);
    border: 1px solid var(--color-gold);
    box-shadow: 0 8px 20px -8px rgba(167, 52, 190, 0.5);
}

.coming-soon-btn--primary:hover,
.coming-soon-btn--primary:focus {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(28, 49, 170, 0.45);
}

.coming-soon-btn--primary:hover svg,
.coming-soon-btn--primary:focus svg {
    transform: translateX(-3px);
}

.coming-soon-btn--ghost {
    background: transparent;
    color: var(--color-teal);
    border: 1px solid rgba(28, 49, 170, 0.25);
}

.coming-soon-btn--ghost:hover,
.coming-soon-btn--ghost:focus {
    border-color: var(--color-teal);
    background: rgba(28, 49, 170, 0.04);
    transform: translateY(-2px);
}

.coming-soon-btn--ghost:hover svg,
.coming-soon-btn--ghost:focus svg {
    transform: translateX(3px);
}

@media (max-width: 640px) {
    .coming-soon {
        padding: 64px 0;
    }

    .coming-soon-card {
        padding: 48px 24px;
    }

    .coming-soon-title {
        font-size: 44px;
    }

    .coming-soon-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    position: relative;
    isolation: isolate;
    background-color: var(--color-teal);
    background-image: url('/images/backgrounds/start-the-conversation-with-valunxt.webp');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    color: var(--color-white);
    overflow: hidden;
    padding: 84px 0 28px;
}

/* Layered overlay — deeper at the base, softer at the top for real depth */
.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(120% 90% at 85% 0%, rgba(167, 52, 190, 0.22) 0%, rgba(167, 52, 190, 0) 55%),
        linear-gradient(to top,
            rgba(8, 14, 58, 0.92) 0%,
            rgba(12, 20, 74, 0.80) 38%,
            rgba(14, 24, 85, 0.62) 100%);
    z-index: -1;
    pointer-events: none;
}

/* ---------- NEWSLETTER ROW ---------- */
.footer-news {
    padding-bottom: 56px;
}

.footer-news__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(24px, 2.2vw, 30px);
    line-height: 1.15;
    color: var(--color-white);
    margin: 0 0 12px;
}

.footer-news__text {
    font-family: var(--font-base);
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
    max-width: 380px;
}

.footer-news__form {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.30);
    padding-bottom: 12px;
}

.footer-news__input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--color-white);
    font-family: var(--font-base);
    font-size: 15px;
    padding: 6px 44px 6px 0;
}

.footer-news__input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.footer-news__submit {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-60%);
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.footer-news__submit:hover,
.footer-news__submit:focus {
    background: var(--color-gold);
    color: var(--color-white);
    outline: 0;
}

.footer-news__note {
    font-family: var(--font-base);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
    margin: 14px 0 0;
}

/* ---------- MAIN COLUMNS ---------- */
.footer-main {
    padding: 8px 0 48px;
}

.footer-brand-line {
    display: inline-flex;
    align-items: center;
    margin-bottom: 20px;
    text-decoration: none;
}

.footer-brand-logo {
    display: block;
    width: 130px;
    /* render the multi-color brand SVG as pure white */
    filter: brightness(0) invert(1);
    transition: opacity 0.25s ease;
}

.footer-brand-line:hover .footer-brand-logo,
.footer-brand-line:focus .footer-brand-logo {
    opacity: 0.85;
}

.footer-desc {
    font-family: var(--font-base);
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 26px;
    max-width: 340px;
}

/* Link columns with subtle left divider (matches reference) */
.footer-col--links,
.footer-col--contact {
    position: relative;
    padding-left: 28px;
}

.footer-col--links::before,
.footer-col--contact::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 100%);
}

.footer-col__title {
    font-family: var(--font-base);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-white);
    margin: 0 0 22px;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-links a {
    position: relative;
    font-family: var(--font-base);
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-links a:hover,
.footer-links a:focus {
    color: var(--color-white);
    padding-left: 6px;
}

/* ---------- Get In Touch ---------- */
.footer-contact-line {
    font-family: var(--font-base);
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 20px;
}

.footer-contact-item {
    margin-bottom: 16px;
}

.footer-contact-key {
    display: block;
    font-family: var(--font-base);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 2px;
}

.footer-contact-item a {
    font-family: var(--font-base);
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact-item a:hover,
.footer-contact-item a:focus {
    color: var(--color-gold);
}

/* ---------- COPYRIGHT ---------- */
.footer-copy {
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0) 100%) 1;
    padding-top: 22px;
    text-align: center;
}

.footer-copy__text {
    font-family: var(--font-base);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    line-height: 1.6;
}

.footer-copy__link {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-copy__link:hover,
.footer-copy__link:focus {
    color: var(--color-gold);
}

.footer-copy__sep {
    color: rgba(255, 255, 255, 0.30);
    padding: 0 8px;
}

/* ---------- SOCIALS ---------- */
.footer-socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-socials-item {
    line-height: 1;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.footer-social-link:hover,
.footer-social-link:focus {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-white);
    outline: 0;
}

/* ---------- SCROLL TO TOP (unchanged behavior) ---------- */
.footer-scroll-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-gold);
    color: var(--color-white);
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease,
        background-color 0.25s ease, color 0.25s ease;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

.footer-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.footer-scroll-top:hover,
.footer-scroll-top:focus {
    background: var(--color-white);
    color: var(--color-teal);
    outline: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .site-footer {
        padding: 56px 0 22px;
    }

    .footer-news {
        padding-bottom: 40px;
    }

    .footer-main {
        padding: 8px 0 36px;
    }

    /* Drop the vertical dividers when columns stack */
    .footer-col--links,
    .footer-col--contact {
        padding-left: 0;
    }

    .footer-col--links::before,
    .footer-col--contact::before {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .site-footer {
        padding: 44px 0 18px;
    }

    .footer-col__title {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .footer-copy__text {
        font-size: 12px;
    }

    .footer-copy__sep {
        padding: 0 5px;
    }
}

/* (Legacy footer styles removed — superseded by the redesigned block above.) */


/* ==========================================================================
   Values section (three-up icons block under hero)
   ========================================================================== */

.values-section {
    background: var(--color-white);
    border-bottom: 1px #e4e4e4 solid;
}


.values-row {
    align-items: stretch;
}

.values-col {
    display: flex;
    border-right: 1px solid #e6e6e6;
    height: 100%;
}

.values-section .row>[class*="col-"]:last-child .values-col {
    border-right: 0;
}

.values-item {
    width: 100%;
    padding: 40px 56px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 56px;
}

.values-icon {
    color: var(--color-teal);
    line-height: 0;
    background: none;
}

.values-icon svg {
    width: 60px;
    height: 60px;
    display: block;
}

.values-text {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    margin: 0;
    max-width: 280px;
}


/* ==========================================================================
   About section (image + content + stats)
   ========================================================================== */

.about-stats-row .col-md-3:last-child .about-stat-number {
    font-size: 2.5rem;
    /* smaller than the others, adjust to taste */
    letter-spacing: -0.02em;
}

.about-section {
    background: var(--color-white);
    padding-top: 50px;
}

.about-top {
    margin-bottom: 70px;
}

.about-image-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.about-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.about-content {
    padding-top: 8px;
}

.about-title {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1.25;
    font-weight: 500;
    margin: 0 0 14px;
}

.about-text {
    color: #5b6a72;
    margin: 0 0 16px;
}

.about-text:last-of-type {
    margin-bottom: 32px;
}

.about-cta {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.btn-readmore {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-teal);
    color: var(--color-white);
    padding: 14px 28px;
    border: 1px solid var(--color-teal);
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.btn-readmore::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-gold);
    transform: translateX(-101%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.btn-readmore svg {
    transition: transform 0.3s ease;
}

.btn-readmore:hover,
.btn-readmore:focus {
    color: var(--color-white);
    border-color: var(--color-gold);
}

.btn-readmore:hover::before,
.btn-readmore:focus::before {
    transform: translateX(0);
}

.btn-readmore:hover svg,
.btn-readmore:focus svg {
    transform: translateX(3px);
}

.about-signature {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
    color: var(--color-text);
}

.about-signature-name {
    font-family: var(--font-base);
    font-size: 18px;
    font-weight: 500;
}

.about-signature-role {
    font-size: 12px;
    color: #6c7a82;
    margin-top: 4px;
}

.about-signature-mark {
    position: absolute;
    right: -56px;
    top: -2px;
    width: 70px;
    height: 32px;
    color: var(--color-teal);
    opacity: 0.85;
    pointer-events: none;
}

/* Feature checklist */
.about-features-row {
    margin-bottom: 70px;
}

.about-features {
    list-style: none;
    margin: 0;
    padding: 0;
}

.about-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid #e6e6e6;
}

.about-feature:last-child {
    border-bottom: 0;
}

.about-feature-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--color-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-teal);
    margin-top: 2px;
}

.about-feature-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

.about-feature-text {
    color: #5b6a72;
    font-size: 14px;
    line-height: 22px;
}

/* Stats */
.about-stats-row {
    border-top: 1px solid #e6e6e6;
    padding-top: 40px;
}

.about-stat-col {
    border-right: 1px solid #e6e6e6;
    height: 100%;
}

.about-stats-row .row>[class*="col-"]:last-child .about-stat-col {
    border-right: 0;
}

.about-stat {
    padding: 8px 28px 8px 0;
}

.about-stats-row .row>[class*="col-"]:not(:first-child) .about-stat {
    padding-left: 28px;
}

.about-stat-number {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: clamp(36px, 3.8vw, 56px);
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
}

.about-stat-text {
    color: #5b6a72;
    margin: 0;
    max-width: 220px;
}


/* ==========================================================================
   Expertise section (banner + heading + feature cards)
   ========================================================================== */

.expertise-section {
    background: var(--color-white);
    overflow-x: hidden;
    padding-top: 50px;
}

/* Banner */
.expertise-banner {
    margin-bottom: 80px;
}

.expertise-banner-inner {
    position: relative;
    width: 100%;
    height: clamp(420px, 50vw, 560px);
}

.expertise-banner-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Card overlay (bottom-right) */
.expertise-banner-card {
    position: absolute;
    right: 4%;
    bottom: -5%;
    background: rgba(28, 49, 170, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-white);
    padding: 44px 32px 38px;
    max-width: 415px;
    width: 100%;
    z-index: 3;
}

.expertise-banner-card-num {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 1px;
    margin-bottom: 26px;
    font-weight: 500;
}

.expertise-banner-title {
    color: var(--color-white);
    font-size: 20px;
    line-height: 1.32;
    font-weight: 500;
    margin: 0 0 22px;
}

.expertise-banner-text {
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 30px;
}

.expertise-banner-card-icon {
    color: var(--color-white);
    line-height: 0;
}

.expertise-banner-card-icon svg {
    width: 38px;
    height: 38px;
    display: block;
}

/* Tabs overlay (bottom-left) */
.expertise-tabs {
    position: absolute;
    left: 6%;
    bottom: 8%;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 56px;
    z-index: 2;
}

.expertise-tab {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: color 0.25s ease;
}

.expertise-tab-num {
    font-size: 11px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.expertise-tab-label {
    font-family: var(--font-base);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    text-transform: capitalize;
    transition: color 0.25s ease;
}

.expertise-tab:hover .expertise-tab-label {
    color: var(--color-white);
}

.expertise-tab.is-active .expertise-tab-num,
.expertise-tab.is-active .expertise-tab-label {
    color: var(--color-white);
}

.expertise-tab.is-active .expertise-tab-label {
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    padding-bottom: 4px;
}

/* Heading block */

.expertise-eyebrow {
    display: block;
    font-size: 13px;
    color: #6c7a82;
    margin-bottom: 14px;
    font-weight: 400;
}

.expertise-heading {
    color: var(--color-text);
    font-size: clamp(30px, 3.2vw, 32px);
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 46px;
    letter-spacing: -0.3px;
    max-width: 500px;
}

/* Feature cards */
.expertise-cards .row {
    --bs-gutter-x: 32px;
    row-gap: 40px;
}

.expertise-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 30px 28px 32px;
    background: var(--color-white);
    border: 1px solid #e7e9ee;
    border-radius: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.expertise-card:hover {
    border-color: #d4d8e2;
    box-shadow: 0 14px 34px rgba(20, 28, 60, 0.08);
    transform: translateY(-4px);
}

.expertise-card-icon {
    color: var(--color-teal);
    line-height: 0;
    margin-bottom: 22px;
}

.expertise-card-icon svg {
    width: 34px;
    height: 34px;
    display: block;
}

.expertise-card-title {
    color: var(--color-text);
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e7e9ee;
}

.expertise-card-text {
    color: #5b6a72;
    margin: 0;
    flex: 1;
}


/* ==========================================================================
   Resources section (dark heading + filter chips + image grid)
   ========================================================================== */

.resources-section {
    background: var(--color-white);
}

/* Top band — clean, light */
.resources-top {
    background: var(--color-white);
    color: var(--color-text);
    padding: 56px 0 40px;
    border-bottom: 1px solid #e7e9ee;
}

.resources-heading-row {
    margin-bottom: 0;
}

.resources-heading-row .row {
    align-items: flex-end;
}

.resources-cta-col {
    text-align: right;
}

.resources-eyebrow {
    display: block;
    color: var(--color-gold);
    font-size: 13px;
    margin-bottom: 16px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 600;
}

.resources-heading {
    color: var(--color-text);
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.2;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.3px;
    max-width: 600px;
}

/* CTA */
.btn-explore-cases {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: var(--color-teal);
    padding: 14px 26px;
    border: 1px solid rgba(28, 49, 170, 0.35);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-decoration: none;
    line-height: 1;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.btn-explore-cases::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-gold);
    transform: translateX(-101%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.btn-explore-cases svg {
    transition: transform 0.3s ease;
}

.btn-explore-cases:hover,
.btn-explore-cases:focus {
    color: var(--color-white);
    border-color: var(--color-gold);
}

.btn-explore-cases:hover::before,
.btn-explore-cases:focus::before {
    transform: translateX(0);
}

.btn-explore-cases:hover svg,
.btn-explore-cases:focus svg {
    transform: translateX(3px);
}

/* Filter chips */
.resources-filters {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.resources-filter {
    display: inline-flex;
    align-items: center;
    padding: 9px 22px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.resources-filter:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.resources-filter.is-active {
    background: var(--color-white);
    color: var(--color-teal);
    border-color: var(--color-white);
}

/* Grid of 4 image cards */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: -1px;
}

/* ==========================================================================
   Resources — horizontal carousel (5 service cards with prev/next)
   Same grid look as before: 4 cards visible at once, edge-to-edge, no
   border-radius. 5th card revealed by smooth-scrolling the track.
   ========================================================================== */

.resources-carousel {
    position: relative;
    background: var(--color-white);
}

.resources-carousel-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.resources-carousel-viewport::-webkit-scrollbar {
    display: none;
}

.resources-carousel-track {
    display: flex;
    gap: 0;
    margin: 0;
    align-items: stretch;
}

.resources-card--slide {
    flex: 0 0 25%;
    width: 25%;
    aspect-ratio: 3 / 4;
    scroll-snap-align: start;
    border-radius: 0;
}

@media (max-width: 991.98px) {
    .resources-card--slide {
        flex: 0 0 33.3333%;
        width: 33.3333%;
    }
}

@media (max-width: 767.98px) {
    .resources-card--slide {
        flex: 0 0 50%;
        width: 50%;
    }
}

@media (max-width: 575.98px) {
    .resources-card--slide {
        flex: 0 0 80%;
        width: 80%;
    }
}

/* Nav buttons — visible against the white section */
.resources-carousel-nav {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 28px 24px;
}

.resources-carousel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-white);
    border: 1px solid #d8dde6;
    color: var(--color-teal);
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.resources-carousel-btn:hover:not([disabled]),
.resources-carousel-btn:focus:not([disabled]) {
    background: var(--color-teal);
    color: var(--color-white);
    border-color: var(--color-teal);
    outline: 0;
    transform: translateY(-2px);
}

.resources-carousel-btn[disabled] {
    opacity: 0.32;
    cursor: not-allowed;
}

@media (max-width: 575.98px) {
    .resources-carousel-nav {
        padding: 20px 16px;
    }

    .resources-carousel-btn {
        width: 42px;
        height: 42px;
    }
}

.resources-card {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    text-decoration: none;
    color: var(--color-white);
    isolation: isolate;
}

.resources-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
    z-index: 0;
}

.resources-card:hover .resources-card-img {
    transform: scale(1.06);
}

.resources-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 14, 60, 0) 35%, rgba(11, 14, 60, 0.85) 100%);
    z-index: 1;
    transition: background 0.4s ease;
}


.resources-card-body {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    z-index: 2;
    color: var(--color-white);
}

.resources-card-title {
    font-family: var(--font-base);
    color: var(--color-white);
    font-size: 18px;
    line-height: 1.35;
    font-weight: 600;
    margin: 0 0 10px;
    transition: color 0.3s ease;
}

.resources-card-tags {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.3px;
}

.resources-card-arrow {
    position: absolute;
    top: -8px;
    right: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-gold);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translate(8px, -8px) scale(0.6);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.resources-card:hover .resources-card-arrow,
.resources-card:focus .resources-card-arrow {
    opacity: 1;
    transform: translate(0, -52px) scale(1);
}

.resources-card:hover .resources-card-title,
.resources-card:focus .resources-card-title {
    color: #fff;
}


/* ==========================================================================
   Insights section (dark heading + image+body card grid)
   ========================================================================== */

.insights-section {
    background: var(--color-white);
    padding: 50px 0;
}

/* Top dark band (now a contained block) */
.insights-top {
    background: var(--color-teal);
    color: var(--color-white);
    padding: 30px;
    position: relative;
    overflow: hidden;
}

.insights-heading-row .row {
    align-items: flex-end;
}

.insights-heading-col {
    max-width: 640px;
}

.insights-eyebrow {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin-bottom: 18px;
    letter-spacing: 0.3px;
}

.insights-heading {
    color: var(--color-white);
    font-size: clamp(30px, 3.2vw, 38px);
    line-height: 1.2;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.3px;
}

.insights-cta-col {
    text-align: right;
}

/* Decorative globe (top-right) */
.insights-decor {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    color: rgba(255, 255, 255, 0.08);
    pointer-events: none;
    z-index: 0;
}

.insights-decor svg {
    width: 100%;
    height: 100%;
    display: block;
}

.insights-heading-row {
    position: relative;
    z-index: 1;
}

/* Cards grid */
.insights-cards {
    position: relative;
    z-index: 2;
}

.insights-cards .row {
    --bs-gutter-x: 0;
}

.insights-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-white);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.4s ease;
}

.insights-card:hover {
    box-shadow: 0 22px 40px -22px rgba(11, 14, 60, 0.35);
}

.insights-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.insights-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.insights-card:hover .insights-card-img {
    transform: scale(1.06);
}

.insights-card-body {
    padding: 28px 28px 32px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.insights-card-title {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    margin: 0 0 14px;
    transition: color 0.3s ease;
}

.insights-card:hover .insights-card-title {
    color: var(--color-gold);
}

.insights-card-text {
    color: #5b6a72;
    margin: 0 0 22px;
    flex: 1;
}

.insights-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.insights-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border: 1px solid #d9dee1;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: #5b6a72;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.insights-card:hover .insights-card-tag {
    border-color: var(--color-teal);
    color: var(--color-teal);
}


/* ==========================================================================
   Consultation section (dark bg + copy + form card)
   ========================================================================== */

.consult-section {
    position: relative;
    padding: 96px 0;
    background: #f5f6f8;
    color: var(--color-text);
    overflow: hidden;
    isolation: isolate;
}

/* Left column */
.consult-content {
    max-width: 92%;
}

.consult-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #6c7a82;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.consult-eyebrow::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--color-gold);
}

.consult-title {
    color: var(--color-text);
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.22;
    font-weight: 600;
    margin: 0 0 22px;
    letter-spacing: -0.4px;
    max-width: 600px;
}

.consult-text {
    color: #5b6a72;
    margin: 0 0 32px;
    max-width: 460px;
}

/* Schedule-a-Call pill — scoped teal style for the light background */
.consult-content .btn-pill-light {
    background: var(--color-teal);
    color: var(--color-white);
    border-color: var(--color-teal);
}

.consult-content .btn-pill-light:hover,
.consult-content .btn-pill-light:focus {
    color: var(--color-white);
    border-color: var(--color-gold);
}

.consult-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 44px;
}

/* Pill buttons */
.btn-pill-light,
.btn-pill-outline {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-decoration: none;
    line-height: 1;
    transition: color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

.btn-pill-light {
    background: var(--color-white);
    color: var(--color-teal);
    border: 1px solid var(--color-white);
}

.btn-pill-outline {
    background: transparent;
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.btn-pill-light::before,
.btn-pill-outline::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-gold);
    transform: translateX(-101%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.btn-pill-light svg,
.btn-pill-outline svg {
    transition: transform 0.3s ease;
}

.btn-pill-light:hover,
.btn-pill-light:focus,
.btn-pill-outline:hover,
.btn-pill-outline:focus {
    color: var(--color-white);
    border-color: var(--color-gold);
}

.btn-pill-light:hover::before,
.btn-pill-light:focus::before,
.btn-pill-outline:hover::before,
.btn-pill-outline:focus::before {
    transform: translateX(0);
}

.btn-pill-light:hover svg,
.btn-pill-outline:hover svg {
    transform: translateX(3px);
}

/* Checklist — 2x2 chip grid */
.consult-list {
    list-style: none;
    margin: 0;
    padding: 28px 0 0;
    border-top: 1px solid #e3e5ea;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.consult-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-white);
    border: 1px solid #e7e9ee;
    border-radius: 12px;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.consult-list-item:hover {
    border-color: rgba(167, 52, 190, 0.5);
    box-shadow: 0 10px 24px -16px rgba(20, 28, 60, 0.25);
    transform: translateY(-2px);
}

.consult-list-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--color-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.consult-list-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.consult-list-text {
    color: var(--color-text);
    font-size: 13.5px;
    line-height: 1.35;
}

/* Form card (right) */
.consult-card {
    position: relative;
    background: var(--color-white);
    color: var(--color-text);
    padding: 44px 46px 40px;
    box-shadow: 0 30px 70px -45px rgba(20, 28, 60, 0.4);
    border-radius: 18px;
    border: 1px solid #e7e9ee;
}

.consult-card-head {
    margin-bottom: 30px;
}

.consult-card-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.consult-card-eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-gold);
}

.consult-card-title {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}

.consult-card-sub {
    color: #6c7a82;
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
}

/* Form fields (floating-label, underline only) */
.consult-form .row {
    --bs-gutter-y: 30px;
}

.consult-field {
    position: relative;
    width: 100%;
}

.consult-field input,
.consult-field select,
.consult-field textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #d7dadc;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 14px;
    line-height: 22px;
    padding: 26px 4px 12px;
    outline: 0;
    transition: border-color 0.25s ease;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

.consult-field textarea {
    resize: vertical;
    min-height: 96px;
    padding-top: 26px;
}

.consult-field label {
    position: absolute;
    left: 4px;
    top: 26px;
    color: #9aa3a8;
    font-size: 14px;
    pointer-events: none;
    transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}

.consult-field input:focus,
.consult-field select:focus,
.consult-field textarea:focus {
    border-bottom-color: var(--color-gold);
}

.consult-field input:focus+label,
.consult-field input:not(:placeholder-shown)+label,
.consult-field textarea:focus+label,
.consult-field textarea:not(:placeholder-shown)+label,
.consult-field-select select:valid+label,
.consult-field-select select:focus+label {
    top: 4px;
    font-size: 11px;
    color: var(--color-gold);
}

/* Select caret */
.consult-field-select select {
    padding-right: 30px;
    background-image: none;
    cursor: pointer;
}

.consult-field-caret {
    position: absolute;
    right: 4px;
    top: 30px;
    color: #6c7a82;
    pointer-events: none;
    line-height: 0;
}

.iti--inline-dropdown .iti__dropdown-content {
    margin-top: 14px !important;
}



.consult-field-phone .iti {
    display: block;
    width: 100%;
    position: relative;
}

/* The <input type="tel"> after plugin init */
.consult-field-phone .iti>input[type="tel"],
.consult-field-phone input.iti__tel-input {
    width: 100% !important;
    border: 0;
    border-bottom: 1px solid #d7dadc;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 14px;
    line-height: 22px;
    padding: 26px 4px 12px 78px;
    outline: 0;
    border-radius: 0;
    transition: border-color 0.25s ease;
}

.consult-field-phone .iti>input[type="tel"]:focus,
.consult-field-phone input.iti__tel-input:focus {
    border-bottom-color: var(--color-gold);
}

/* Resting label aligns with the input's padding-left */
.consult-field-phone>label {
    left: 78px;
    top: 26px;
}

/* Floated label state — input is inside .iti wrapper after plugin init,
   so label is no longer the input's sibling. Use :focus-within on the field. */
.consult-field-phone:focus-within>label,
.consult-field-phone:has(input[type="tel"]:not(:placeholder-shown))>label {
    top: 4px;
    left: 78px;
    font-size: 11px;
    color: var(--color-gold);
}

/* Country selector button (flag + dial code) — sits at the input baseline */
.consult-field-phone .iti__country-container {
    position: absolute;
    top: 26px;
    /* match input padding-top */
    left: 0;
    height: 22px;
    /* match input line-height */
    z-index: 2;
    display: flex;
    align-items: center;
}

.consult-field-phone .iti__selected-country,
.consult-field-phone .iti__selected-country-primary {
    background: transparent !important;
    border: 0;
    padding: 0;
    margin: 0;
    height: 22px;
    line-height: 22px;
    color: var(--color-text);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.consult-field-phone .iti__selected-country:hover,
.consult-field-phone .iti__selected-country:focus,
.consult-field-phone .iti__selected-country-primary:hover {
    background: transparent !important;
}

.consult-field-phone .iti__flag {
    margin-right: 0;
}

.consult-field-phone .iti__selected-dial-code {
    color: var(--color-text);
    font-weight: 500;
    margin-left: 4px;
    font-size: 14px;
    line-height: 22px;
}

.consult-field-phone .iti__arrow {
    border-top-color: #6c7a82;
    margin-left: 6px;
}

/* Dropdown — float above other fields */
.consult-field-phone .iti__dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    background: var(--color-white);
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    box-shadow: 0 18px 40px -18px rgba(11, 14, 60, 0.25);
    min-width: 320px;
    max-width: 360px;
    margin-top: 4px;
    overflow: hidden;
}

.consult-field-phone .iti__search-input {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #eee;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--color-text);
    font-family: var(--font-base);
    outline: 0;
}

.consult-field-phone .iti__country-list {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    max-height: 240px;
    font-family: var(--font-base);
    color: var(--color-text);
}

.consult-field-phone .iti__country.iti__highlight {
    background: rgba(167, 52, 190, 0.12);
}

.consult-field-phone .iti__country-name,
.consult-field-phone .iti__dial-code {
    color: var(--color-text);
}

/* Submit */
.consult-form-actions {
    margin-top: 28px;
}

.btn-submit-request {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-teal);
    color: var(--color-white);
    border: 1px solid var(--color-teal);
    padding: 14px 28px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.btn-submit-request::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-gold);
    transform: translateX(-101%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.btn-submit-request svg {
    transition: transform 0.3s ease;
}

.btn-submit-request:hover,
.btn-submit-request:focus {
    color: var(--color-white);
    border-color: var(--color-gold);
}

.btn-submit-request:hover::before,
.btn-submit-request:focus::before {
    transform: translateX(0);
}

.btn-submit-request:hover svg,
.btn-submit-request:focus svg {
    transform: translateX(3px);
}


/* ==========================================================================
   Featured news / blog section
   ========================================================================== */

.blog-section {
    background: var(--color-teal);
    color: var(--color-white);
    padding: 96px 0;
}

/* Heading row */
.blog-heading-row {
    margin-bottom: 56px;
}

.blog-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.blog-eyebrow::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
}

.blog-heading {
    font-family: var(--font-display);
    color: var(--color-white);
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1.1;
    font-weight: 500;
    margin: 0;
    letter-spacing: -0.3px;
}

.blog-cta-col {
    text-align: right;
}

/* White pill button on the dark band */
.btn-blog-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-white);
    color: var(--color-teal);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 26px;
    border-radius: 999px;
    transition: background 0.25s ease, color 0.25s ease;
}

.btn-blog-all svg {
    color: var(--color-gold);
    transition: transform 0.3s ease;
}

.btn-blog-all:hover,
.btn-blog-all:focus {
    background: var(--color-gold);
    color: var(--color-white);
}

.btn-blog-all:hover svg,
.btn-blog-all:focus svg {
    color: var(--color-white);
    transform: translate(2px, -2px);
}

/* Card grid */
.blog-grid>.row {
    --bs-gutter-x: 28px;
    row-gap: 44px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.blog-card-cat {
    color: var(--color-white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.blog-card-date {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
}

.blog-card-title {
    font-family: var(--font-display);
    color: var(--color-white);
    font-size: 21px;
    line-height: 1.28;
    font-weight: 500;
    margin: 0 0 22px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    transition: color 0.25s ease;
}

.blog-card-title span {
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease;
}

.blog-card-arrow {
    flex: 0 0 auto;
    margin-top: 4px;
    color: var(--color-gold);
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-title span,
.blog-card:focus .blog-card-title span {
    border-bottom-color: rgba(255, 255, 255, 0.7);
}

.blog-card:hover .blog-card-arrow,
.blog-card:focus .blog-card-arrow {
    transform: translate(3px, -3px);
}

.blog-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: auto;
    overflow: hidden;
    border-radius: 0 26px 0px 26px;
    background: rgba(0, 0, 0, 0.18);
}

.blog-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.blog-card:hover .blog-card-img,
.blog-card:focus .blog-card-img {
    transform: scale(1.05);
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767px) {

    /* Top contact bar (header) */
    .site-header {
        font-size: 12px;
        min-height: auto;
        padding: 12px 0;
        z-index: 1;
    }

    .header-info {
        gap: 8px 16px;
    }

    .header-info-item {
        font-size: 12px;
    }

    .header-info-icon {
        font-size: 13px;
    }

    .header-socials {
        justify-content: flex-start;
        margin-top: 10px;
        gap: 12px;
    }

    .header-socials-item a {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }

    /* Navbar — slide-in off-canvas panel */
    .site-navbar .navbar-collapse {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        height: 100% !important;
        width: 100% !important;
        background: var(--color-teal) !important;
        color: var(--color-white);
        transform: translateX(100%);
        /* Animate transform smoothly; visibility flips AFTER the slide-out
           when closing, and immediately ON when opening so the panel is
           interactive during the slide-in. */
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0s linear 0.4s;
        z-index: 1080;
        padding: 0 !important;
        overflow-y: auto;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.25);
        visibility: hidden;
    }

    .site-navbar.is-open .navbar-collapse {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0s linear 0s;
    }

    /* Panel header — logo on left, close button on right */
    .navbar-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        width: 100%;
    }

    .navbar-mobile-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--color-white);
        text-decoration: none;
    }

    .navbar-mobile-brand .brand-logo {
        height: 32px;
    }

    /* Inner padding for the menu list and CTA inside the panel */
    .site-navbar .navbar-collapse>.navbar-nav {
        padding: 16px 20px 0 !important;
    }

    .site-navbar .navbar-collapse>.site-navbar-cta {
        padding: 0 20px 24px;
    }

    /* Backdrop overlay */
    .navbar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1070;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s ease, visibility 0.35s ease;
    }

    .site-navbar.is-open .navbar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    /* Close (×) button — sits inline in the panel header */
    .site-navbar .navbar-mobile-close {
        display: inline-flex !important;
        width: 40px;
        height: 40px;
        background: var(--color-gold);
        border: 0;
        color: var(--color-white);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 50%;
        padding: 0;
        line-height: 0;
        flex-shrink: 0;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
        transition: background 0.25s ease, color 0.25s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .site-navbar .navbar-mobile-close:hover,
    .site-navbar .navbar-mobile-close:focus {
        background: var(--color-white);
        color: var(--color-teal);
        outline: 0;
        transform: rotate(90deg);
    }

    .site-navbar .navbar-mobile-close svg {
        display: block;
        width: 20px;
        height: 20px;
    }

    /* Lock body scroll when menu is open */
    body.nav-locked {
        overflow: hidden;
    }

    /* Nav links inside the panel — left-aligned, vertical stack */
    .site-navbar .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        margin: 0;
        padding: 0;
        width: 100%;
        text-align: left;
    }

    .site-navbar .navbar-nav .nav-item {
        width: 100%;
    }

    .site-navbar .nav-link {
        color: var(--color-white) !important;
        padding: 14px 0 !important;
        font-size: 16px;
        font-weight: 500;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        font-family: var(--font-base);
        text-align: left;
        display: block;
    }

    .site-navbar .nav-link.active,
    .site-navbar .nav-link:hover,
    .site-navbar .nav-link:focus {
        color: var(--color-gold) !important;
    }

    .site-navbar-cta {
        display: block;
        margin-top: 28px;
        margin-left: 0;
        width: 100%;
    }

    .btn-consult {
        width: 100%;
        padding: 16px 20px;
        font-size: 14px;
        justify-content: center;
    }

    /* Override the region-in white-navbar mobile rule above —
       in mobile the navbar bar itself stays white but the off-canvas
       panel uses its own teal background. The teal text on the bar
       is already set above. */

    /* Mobile navbar gets a solid white background so the collapsed menu reads
       cleanly on top of the hero. Force brand text + nav links back to teal
       (the desktop transparent-overlay scheme makes them white). */
    .region-in .site-navbar {
        background: var(--color-white);
        border-bottom: 1px solid #eeeeee;
    }

    .region-in .site-navbar .navbar-brand {
        color: var(--color-text);
    }

    /* Mobile India navbar bar is white — invert the white-on-dark brand logo
       so it stays visible. */

    .region-in .site-navbar .nav-link {
        color: var(--color-teal);
    }

    .region-in .site-navbar .nav-link.active,
    .region-in .site-navbar .nav-link:hover,
    .region-in .site-navbar .nav-link:focus {
        color: var(--color-gold);
    }

    /* Hero spacing under navbar — the navbar is no longer overlaid */
    .region-in .site-main>section:first-child {
        margin-top: 0;
    }

    /* Navbar bar — give brand + toggler some breathing room */
    .site-navbar .navbar>.container-fluid {
        padding-left: 16px;
        padding-right: 16px !important;
        gap: 20px;
        margin: 10px 0;
    }

    .site-navbar .navbar-brand {
        margin-right: auto;
    }

    /* Brand mark / logo */
    .brand-mark {
        font-size: 18px;
        letter-spacing: 1.5px;
    }

    .brand-sub {
        font-size: 9px;
        letter-spacing: 4px;
    }

    .brand-icon {
        width: 30px;
        height: 30px;
    }

    /* Navbar toggler — dark icon on the white mobile navbar, with margin from logo */
    .region-in .site-navbar .navbar-toggler {
        padding: 8px 12px;
        border-radius: 4px;
        color: var(--color-teal);
        border-color: rgba(28, 49, 170, 0.35);
        margin-left: 16px;
    }

    .region-in .site-navbar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2828, 49, 170, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /* Hero */
    .hero {
        min-height: 80vh;
    }

    .hero-content {
        padding-top: 130px;
        padding-bottom: 56px;
    }

    .hero-content .row {
        min-height: auto;
    }

    .hero-headline {
        font-size: 26px;
        line-height: 1.2;
    }

    .hero-col-tagline {
        align-items: flex-start;
        margin-top: 24px;
    }

    .hero-tagline {
        margin: 0;
        max-width: 100%;
        font-size: 13px;
        line-height: 20px;
    }

    .hero-watermark-wrap {
        padding: 0 16px;
    }

    .hero-watermark {
        font-size: 44px;
        letter-spacing: 2px;
    }

    /* Footer */
    .footer-bottom-right {
        text-align: left;
        margin-top: 6px;
    }

    /* Values */
    .values-section {
        padding: 56px 0;
    }

    .values-col {
        border-right: 0;
        border-bottom: 1px solid #e6e6e6;
    }

    .values-section .row>[class*="col-"]:last-child .values-col {
        border-bottom: 0;
    }

    .values-item {
        padding: 40px 24px;
        gap: 32px;
    }

    /* About */
    .about-section {
        padding: 64px 0;
    }

    .about-image-wrap {
        margin-bottom: 32px;
    }

    .about-features-row .row>[class*="col-"] {
        margin-left: 0 !important;
    }

    .about-features-row {
        margin-bottom: 48px;
    }

    .about-stat-col {
        border-right: 0;
        border-bottom: 1px solid #e6e6e6;
        padding-bottom: 24px;
        margin-bottom: 24px;
    }

    .about-stats-row .row>[class*="col-"]:nth-last-child(-n+2) .about-stat-col {
        margin-bottom: 0;
        border-bottom: 0;
    }

    .about-stat,
    .about-stats-row .row>[class*="col-"]:not(:first-child) .about-stat {
        padding: 0 16px;
    }

    .about-signature-mark {
        display: none;
    }

    /* Expertise */
    .expertise-section {
        padding: 64px 0 72px;
    }

    .expertise-banner {
        margin-bottom: 56px;
    }

    .expertise-banner-inner {
        height: 420px;
    }

    .expertise-banner-card {
        position: static;
        max-width: 100%;
        margin-top: -60px;
        margin-left: 16px;
        margin-right: 16px;
        background: rgba(28, 49, 170, 0.92);
        padding: 24px;
    }

    .expertise-tabs {
        bottom: 6%;
        gap: 20px;
        flex-wrap: wrap;
    }

    .expertise-tab-label {
        font-size: 12px;
    }

    /* Resources */
    .resources-top {
        padding: 64px 0 56px;
    }

    .resources-heading-row {
        margin-bottom: 36px;
    }

    .resources-cta-col {
        text-align: left;
    }

    .btn-explore-cases {
        margin-top: 24px;
    }

    .resources-grid {
        grid-template-columns: 1fr;
    }

    .resources-card {
        aspect-ratio: 4 / 3;
    }

    .resources-filters {
        gap: 8px;
    }

    .resources-filter {
        padding: 8px 16px;
        font-size: 12px;
    }

    /* Insights */
    .insights-section {
        padding: 64px 0;
    }

    .insights-top {
        padding: 48px 24px;
    }

    .insights-cta-col {
        text-align: left;
    }

    .insights-cards .row>[class*="col-"] {
        margin-bottom: 24px;
    }

    .insights-cards .row>[class*="col-"]:last-child {
        margin-bottom: 0;
    }

    .insights-decor {
        width: 200px;
        height: 200px;
        top: -40px;
        right: -40px;
    }

    .insights-card-body {
        padding: 22px 22px 26px;
    }

    /* Consultation */
    .consult-section {
        padding: 64px 0;
    }

    .consult-content {
        max-width: 100%;
        margin-bottom: 40px;
    }

    .consult-card {
        padding: 30px 22px;
        border-radius: 16px;
    }

    .consult-list {
        grid-template-columns: 1fr;
    }

    .consult-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-pill-light,
    .btn-pill-outline {
        justify-content: center;
    }

    /* Blog */
    .blog-section {
        padding: 64px 0;
    }

    .blog-heading-row {
        margin-bottom: 36px;
    }

    .blog-cta-col {
        text-align: left;
    }

    .btn-blog-all {
        margin-top: 20px;
    }

    .blog-card-image {
        aspect-ratio: 16 / 10;
    }
}


/* ==========================================================================
   About Us — Banner (full hero image + dark left gradient + breadcrumb inside)
   ========================================================================== */

.about-banner {
    position: relative;
    background-color: var(--color-teal);
    color: var(--color-white);
    overflow: hidden;
    isolation: isolate;
    padding: 80px 0;
    display: flex;
    align-items: stretch;
}

.about-banner>.container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 60px;
    width: 100%;
}

.about-banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: -2;
    display: block;
}

.about-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 14, 40, 0.82) 0%, rgba(8, 14, 40, 0.55) 35%, rgba(8, 14, 40, 0.10) 70%, rgba(8, 14, 40, 0) 100%);
    z-index: -1;
}

.about-banner-content {
    width: 100%;
    max-width: 720px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* H1 — page hero title (one per page; slightly larger than section headings) */
.about-banner-title {
    color: var(--color-white);
    font-size: clamp(36px, 4.6vw, 56px);
    line-height: 1.15;
    font-weight: 500;
    margin: 0 0 24px;
    letter-spacing: -0.5px;
}

.about-banner-text {
    color: var(--color-white);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
    margin: 0;
    max-width: 560px;
}

/* Breadcrumb sits at the bottom-left of the banner, inside the dark area */
.about-banner-crumb {
    margin-top: auto;
    padding-top: 40px;
}

.about-crumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 15px;
}

.about-crumb-item {
    color: var(--color-white);
    font-weight: 500;
}

.about-crumb-item a {
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.2s ease;
}

.about-crumb-item a:hover {
    color: var(--color-gold);
}

.about-crumb-item[aria-current="page"] {
    color: var(--color-white);
    opacity: 0.85;
}

.about-crumb-sep {
    color: var(--color-white);
    opacity: 0.75;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.about-crumb-sep svg {
    display: block;
}


/* ==========================================================================
   About Us — Commit section (founder card + big heading + 2-col + CTA)
   ========================================================================== */

.about-commit-section {
    background: var(--color-white);
    padding: 100px 0 90px;
}

/* Founder card --------------------------------------------------------- */

.about-founder {
    text-align: left;
    padding-top: 6px;
}

.about-founder-photo-wrap {
    position: relative;
    width: 100%;
    max-width: 200px;
    margin-bottom: 32px;
}

.about-founder-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #eef0f4;
}

.about-founder-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Big quote-mark badge sitting at the bottom-left, overlapping the founder photo */
.about-founder-quote {
    position: absolute;
    left: 10px;
    bottom: -22px;
    width: 78px;
    height: 60px;
    color: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.about-founder-quote svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.25));
}

.about-founder-meta {
    position: relative;
    display: inline-block;
    padding-right: 60px;
    max-width: 100%;
}

.about-founder-name {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.2px;
}

.about-founder-role {
    display: block;
    color: #6c7a82;
    font-size: 14px;
    font-weight: 500;
    margin-top: 4px;
}

/* Cursive signature mark to the right of the name */
.about-founder-sign {
    position: absolute;
    right: -10px;
    top: -4px;
    width: 64px;
    height: 28px;
    color: var(--color-text);
    opacity: 0.75;
    pointer-events: none;
}

/* Content (right column) ----------------------------------------------- */

.about-commit-content {
    max-width: 100%;
}

/* H2 — section heading (unified scale across commit/strategy/power/industries) */
.about-commit-title {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: clamp(28px, 2.8vw, 38px);
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.4px;
    margin: 0 0 36px;
}

.about-commit-grid {
    margin-bottom: 0;
}

.about-commit-text {
    color: var(--color-text);
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.7;
    font-weight: 500;
}

.about-commit-text:last-of-type {
    margin-bottom: 28px;
}

/* Circular bordered check icons (grey discs) */
.about-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.about-check-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.about-check-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eef0f4;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.about-check-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

.about-check-text {
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 500;
}

.about-commit-cta {
    margin-top: 4px;
}

.about-commit-cta .btn-readmore {
    padding: 16px 30px;
    font-size: 14px;
    font-weight: 600;
}


/* ==========================================================================
   About Us — Strategy section (scroll-pinned 3-slide slider)
   --------------------------------------------------------------------------
   Section is tall (≈ slides × 100vh). The inner .about-strategy-pin is
   sticky and stays fixed while the user scrolls through that tall area.
   JS toggles .is-active on the slide/image that matches scroll progress;
   slides themselves stack absolutely and animate vertically.
   ========================================================================== */

.about-strategy-section {
    background: var(--color-white);
    position: relative;
    /* 3 slides × 100vh of scroll travel = total scrollable height */
    height: 300vh;
}

.about-strategy-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.about-strategy-pin>.container {
    width: 100%;
}

.about-strategy-row {
    min-height: 70vh;
    position: relative;
}

/* Left content column — slides stacked absolutely */
.about-strategy-content {
    position: relative;
    width: 100%;
    max-width: 480px;
    min-height: 460px;
    padding-right: 20px;
}

.about-strategy-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(60px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.7s;
    will-change: transform, opacity;
}

.about-strategy-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
}

.about-strategy-slide.is-past {
    transform: translateY(-60px);
}

/* Inline image inside the slide — hidden on desktop, shown on mobile only */
.about-strategy-slide-image {
    display: none;
}

.about-strategy-num {
    display: block;
    color: #6c7a82;
    font-size: 14px;
    letter-spacing: 0.5px;
    margin-bottom: 28px;
    font-weight: 500;
}

.about-strategy-title {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: clamp(28px, 2.8vw, 38px);
    line-height: 1.25;
    font-weight: 500;
    margin: 0 0 22px;
    letter-spacing: -0.4px;
}

.about-strategy-title em {
    font-style: normal;
    font-weight: 500;
    color: var(--color-gold);
    font-family: var(--font-display);
}

.about-strategy-text {
    color: #5b6a72;
    margin: 0 0 32px;
    font-size: 14px;
    line-height: 1.65;
    max-width: 440px;
}

.about-strategy-icon {
    color: var(--color-text);
    line-height: 0;
}

.about-strategy-icon svg {
    width: 50px;
    height: 50px;
    display: block;
}

/* Right image column — stacked absolutely */
.about-strategy-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 4;
    overflow: hidden;
}

.about-strategy-image {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(60px) scale(1.02);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.8s;
    will-change: transform, opacity;
}

.about-strategy-image.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
}

.about-strategy-image.is-past {
    transform: translateY(-60px) scale(1.02);
}

.about-strategy-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Vertical progress dots — bottom-right corner of the container */
.about-strategy-dots {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 3;
}

.about-strategy-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d9dee1;
    transition: background 0.3s ease, transform 0.3s ease;
    display: block;
}

.about-strategy-dot.is-active {
    background: var(--color-teal);
    transform: scale(1.4);
}


/* ==========================================================================
   About Us — Power section (split bg: image left / dark right + glass cards)
   ========================================================================== */

.about-power-section {
    position: relative;
    color: var(--color-white);
    overflow: hidden;
    isolation: isolate;
    background-color: var(--color-teal);
    min-height: 720px;
    padding: 0 0 80px;
}

/* Split background (absolute, behind content) */
.about-power-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
}

.about-power-bg-image {
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.about-power-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.about-power-bg-dark {
    width: 50%;
    height: 100%;
    background: var(--color-teal);
}

/* Wireframe torus decoration in bottom-right */
.about-power-decor {
    position: absolute;
    right: -60px;
    bottom: -40px;
    width: 320px;
    height: 320px;
    color: rgba(255, 255, 255, 0.12);
    pointer-events: none;
    z-index: 1;
}

.about-power-decor svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Top: content (right column) */
.about-power-container {
    position: relative;
    z-index: 2;
    padding-top: 90px;
}

.about-power-content {
    max-width: 520px;
    padding-left: 30px;
}

.about-power-title {
    color: var(--color-white);
    font-family: var(--font-base);
    font-size: clamp(28px, 2.8vw, 38px);
    line-height: 1.25;
    font-weight: 500;
    margin: 0 0 22px;
    letter-spacing: -0.4px;
}

.about-power-text {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 32px;
    font-size: 14px;
    line-height: 1.65;
    max-width: 480px;
}

.about-power-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Stats — glassmorphic cards spanning across the bottom */
.about-power-stats-wrap {
    position: relative;
    z-index: 3;
    margin-top: 90px;
}

.about-power-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.about-power-stat {
    position: relative;
    padding: 28px 32px 26px;
    color: var(--color-white);
    /* Glass effect — tinted with brand teal */
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 55%),
        rgba(14, 25, 85, 0.45);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

/* Subtle top-left glow accent */
.about-power-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 70%);
    pointer-events: none;
}

.about-power-stat-label {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
    margin-bottom: 26px;
    position: relative;
}

.about-power-stat-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
    position: relative;
}

.about-power-stat-arrow {
    color: rgba(255, 255, 255, 0.55);
    display: inline-flex;
    align-items: flex-end;
    flex-shrink: 0;
}

.about-power-stat-arrow svg {
    width: 18px;
    height: 18px;
    display: block;
}

.about-power-stat-value {
    font-family: var(--font-base);
    color: var(--color-white);
    font-size: clamp(44px, 4.6vw, 64px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -2px;
    text-align: right;
    flex: 1;
}

.about-power-stat-desc {
    color: rgba(255, 255, 255, 0.55);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 22px;
    position: relative;
}


/* ==========================================================================
   About Us — Industries section (split bg: white left / grey right + grid)
   ========================================================================== */

.about-industries-section {
    position: relative;
    background: var(--color-white);
    overflow: hidden;
    isolation: isolate;
}

/* Split background — single layer with a soft gradient blend at the seam
   (no hard vertical line where white meets grey) */
.about-industries-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(90deg,
            var(--color-white) 0%,
            var(--color-white) 42%,
            #f5f6f9 58%,
            #f5f6f9 100%);
}

.about-industries-bg-left,
.about-industries-bg-right {
    display: none;
}

.about-industries-container {
    position: relative;
    z-index: 1;
}

/* Left column ------------------------------------------------------------ */

.about-industries-left {
    padding: 90px 60px 90px 0;
    max-width: 520px;
}

.about-industries-title {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: clamp(28px, 2.8vw, 38px);
    line-height: 1.25;
    font-weight: 500;
    margin: 0 0 24px;
    letter-spacing: -0.4px;
}

.about-industries-title em {
    font-family: var(--font-display);
    font-style: normal;
    color: var(--color-gold);
    font-weight: 500;
}

.about-industries-text {
    color: #5b6a72;
    margin: 0 0 32px;
    font-size: 14px;
    line-height: 1.65;
}

.about-industries-cta {
    margin-top: 4px;
}

.about-industries-cta .btn-readmore {
    padding: 16px 30px;
    font-size: 14px;
    font-weight: 600;
}

/* Right column ----------------------------------------------------------- */

.about-industries-right {
    padding: 90px 0 90px 60px;
}

.about-industries-lead {
    color: var(--color-text);
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.65;
    max-width: 540px;
}

.about-industries-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 50px;
    row-gap: 0;
}

.about-industries-link {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.3;
    padding: 22px 0;
    border-bottom: 1px solid #d1d6dc;
    transition: color 0.25s ease;
}

.about-industries-arrow {
    color: var(--color-text);
    display: inline-flex;
    flex-shrink: 0;
    transition: transform 0.25s ease, color 0.25s ease;
}

.about-industries-arrow svg {
    display: block;
}

.about-industries-label {
    flex: 1;
}

.about-industries-link:hover,
.about-industries-link:focus {
    color: var(--color-gold);
}

.about-industries-link:hover .about-industries-arrow,
.about-industries-link:focus .about-industries-arrow {
    color: var(--color-gold);
    transform: translateX(3px);
}


/* ==========================================================================
   About Us — Testimonial section
   ========================================================================== */

.about-testimonial-section {
    background: var(--color-white);
    padding: 70px 0 60px;
}

.about-testimonial-author {
    text-align: left;
}

.about-testimonial-photo-wrap {
    position: relative;
    width: 130px;
    margin-bottom: 18px;
}

.about-testimonial-photo {
    width: 130px;
    height: 130px;
    overflow: hidden;
    background: #f1f2f5;
}

.about-testimonial-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-testimonial-mark {
    position: absolute;
    left: -14px;
    bottom: -16px;
    width: 56px;
    height: 56px;
    background: var(--color-teal);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.about-testimonial-mark svg {
    width: 28px;
    height: 28px;
    display: block;
}

.about-testimonial-name {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: 16px;
    font-weight: 500;
    margin: 6px 0 0;
}

.about-testimonial-role {
    display: block;
    color: #6c7a82;
    font-size: 12px;
    margin-top: 4px;
}

.about-testimonial-content {
    padding-left: 20px;
}

.about-testimonial-eyebrow {
    display: block;
    color: #6c7a82;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 18px;
}

.about-testimonial-quote {
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.55;
    font-weight: 500;
    margin: 0;
    letter-spacing: -0.1px;
}

.about-testimonial-nav-row {
    margin-top: 36px;
}

.about-testimonial-nav {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.about-testimonial-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #d9dee1;
    background: transparent;
    color: var(--color-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.about-testimonial-arrow:hover,
.about-testimonial-arrow:focus {
    background: var(--color-teal);
    color: var(--color-white);
    border-color: var(--color-teal);
    outline: 0;
}


/* ==========================================================================
   About Us — Partners logo strip (single horizontal row)
   ========================================================================== */

.about-partners-section {
    background: var(--color-white);
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    padding: 0;
}

.about-partners-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    width: 100%;
}

.about-partner {
    flex: 1 1 0;
    min-width: 0;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-right: 1px solid #ececec;
}

.about-partner:last-child {
    border-right: 0;
}

.about-partner-logo {
    max-height: 36px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.55;
    filter: grayscale(100%);
    transition: opacity 0.25s ease, filter 0.25s ease;
    display: block;
}

.about-partner:hover .about-partner-logo {
    opacity: 1;
    filter: grayscale(0%);
}

.about-partner-name {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.2px;
    opacity: 0.6;
    text-align: center;
    transition: opacity 0.25s ease, color 0.25s ease;
}

.about-partner:hover .about-partner-name {
    opacity: 1;
    color: var(--color-teal);
}


/* ==========================================================================
   About Us — Contact section (bg image + right card)
   ========================================================================== */

.about-contact-section {
    position: relative;
    padding: 90px 0;
    color: var(--color-text);
    overflow: hidden;
    isolation: isolate;
}

.about-contact-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -2;
}

.about-contact-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 23, 70, 0.5) 0%, rgba(15, 23, 70, 0.3) 60%, rgba(15, 23, 70, 0.15) 100%);
    z-index: -1;
}

.about-contact-card {
    background: rgba(255, 255, 255, 0.95);
    padding: 38px 38px 32px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.4);
}

.about-contact-title {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 24px;
}

.about-contact-form .row {
    --bs-gutter-y: 22px;
}

.about-contact-actions {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}


/* ==========================================================================
   About Us — Responsive (tablet + mobile)
   ========================================================================== */

@media (max-width: 991.98px) {

    /* Banner */
    .about-banner {
        min-height: 460px;
    }

    .about-banner>.container {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .about-banner-title {
        margin-bottom: 18px;
    }

    .about-banner-text {
        font-size: 15px;
    }

    .about-banner-crumb {
        padding-top: 28px;
    }

    /* Commit */
    .about-commit-section {
        padding: 56px 0 40px;
    }

    .about-founder {
        margin-bottom: 28px;
    }

    .about-commit-title {
        margin-bottom: 28px;
    }

    /* Strategy slider — keep pinned on tablet but reduce height */
    .about-strategy-section {
        height: 280vh;
    }

    .about-strategy-content {
        max-width: 100%;
        padding-right: 0;
        min-height: 380px;
    }

    .about-strategy-stage {
        margin-top: 28px;
        aspect-ratio: 4 / 3;
    }

    .about-strategy-dots {
        right: 12px;
    }

    /* Power section — stack on tablet: image banner on top, content below */
    .about-power-section {
        min-height: 0;
        padding: 320px 0 56px;
    }

    .about-power-bg {
        flex-direction: column;
    }

    .about-power-bg-image,
    .about-power-bg-dark {
        width: 100%;
    }

    .about-power-bg-image {
        height: 280px;
        flex: 0 0 280px;
    }

    .about-power-bg-dark {
        flex: 1;
    }

    .about-power-container {
        padding-top: 40px;
    }

    .about-power-content {
        padding-left: 0;
        max-width: 100%;
    }

    .about-power-stats-wrap {
        margin-top: 56px;
    }

    .about-power-stats {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .about-power-decor {
        width: 220px;
        height: 220px;
        right: -40px;
        bottom: -30px;
    }

    /* Industries — vertical gradient blend on tablet */
    .about-industries-bg {
        background: linear-gradient(180deg,
                var(--color-white) 0%,
                var(--color-white) 42%,
                #f5f6f9 58%,
                #f5f6f9 100%);
    }

    .about-industries-left {
        padding: 56px 16px 32px 0;
        max-width: 100%;
    }

    .about-industries-right {
        padding: 32px 0 56px 0;
    }

    .about-industries-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    /* Testimonial */
    .about-testimonial-section {
        padding: 56px 0;
    }

    .about-testimonial-author {
        margin-bottom: 24px;
    }

    .about-testimonial-content {
        padding-left: 0;
    }

    /* Partners */
    .about-partners-list {
        flex-wrap: wrap;
    }

    .about-partner {
        flex: 0 0 33.333%;
        height: 80px;
        border-bottom: 1px solid #ececec;
    }

    .about-partner:nth-child(3) {
        border-right: 0;
    }

    .about-partner:nth-last-child(-n+3) {
        border-bottom: 0;
    }

    /* Contact */
    .about-contact-section {
        padding: 56px 0;
    }
}

@media (max-width: 767px) {

    .about-banner {
        min-height: 380px;
    }

    .about-banner-title {
        font-size: 34px;
        letter-spacing: -0.4px;
    }

    .about-banner-text {
        font-size: 14px;
    }

    .about-crumb-list {
        font-size: 13px;
    }

    /* Strategy: unpin and stack all slides vertically on mobile */
    .about-strategy-section {
        height: auto;
        padding: 56px 0 64px;
    }

    .about-strategy-pin {
        position: static;
        height: auto;
        display: block;
        overflow: visible;
    }

    .about-strategy-row {
        min-height: 0;
    }

    .about-strategy-content {
        position: relative;
        min-height: 0;
        margin-bottom: 28px;
    }

    .about-strategy-slide {
        position: relative;
        inset: auto;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
        margin-bottom: 48px;
    }

    .about-strategy-slide:last-child {
        margin-bottom: 0;
    }

    /* Hide the right-column image stage on mobile — each slide uses its inline image */
    .about-strategy-stage,
    .about-strategy-section .col-lg-6:nth-child(2) {
        display: none;
    }

    .about-strategy-slide-image {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        margin-bottom: 28px;
    }

    .about-strategy-slide-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .about-strategy-dots {
        display: none;
    }

    /* Partners 2-per-row on mobile */
    .about-partner {
        flex: 0 0 50%;
        height: 70px;
    }

    .about-partner:nth-child(odd) {
        border-right: 1px solid #ececec;
    }

    .about-partner:nth-child(even) {
        border-right: 0;
    }

    .about-partner:nth-child(3),
    .about-partner:nth-child(4) {
        border-bottom: 1px solid #ececec;
    }

    .about-partner:nth-child(5),
    .about-partner:nth-child(6) {
        border-bottom: 0;
    }

    /* Contact card */
    .about-contact-card {
        padding: 26px 22px 22px;
    }

    .about-contact-form .row {
        --bs-gutter-y: 18px;
    }
}


/* ==========================================================================
   Contact page — map + info column + form card
   ========================================================================== */

/* ==========================================================================
   Contact page — Our Presence / Get In Touch / Map
   ========================================================================== */

/* Shared eyebrow chip used across the page heads ------------------------- */
.contact-eyebrow {
    display: inline-block;
    background: #eceef3;
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 4px;
    margin-bottom: 18px;
}

.contact-eyebrow--pill {
    background: var(--color-white);
    border: 1px solid #e9eaf0;
    border-radius: 999px;
    padding: 8px 18px;
    color: var(--color-teal);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(28, 49, 170, 0.06);
}

.contact-eyebrow--pill svg {
    color: var(--color-gold);
}

/* ---------- Section 1: Our Presence ---------- */

.contact-presence {
    background: var(--color-white);
    padding: 90px 0 60px;
}

.contact-presence-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 50px;
}

.contact-presence-title {
    font-family: var(--font-display);
    color: var(--color-teal);
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.15;
    margin: 0 0 14px;
    font-weight: 500;
}

.contact-presence-subtitle {
    color: #6b6b78;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.contact-presence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0;
    background: var(--color-white);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 50px -28px rgba(11, 14, 60, 0.22);
}

/* Office card — alternating light/dark ------------------------------------ */
.office-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px 26px 22px;
    min-height: 360px;
    overflow: hidden;
    isolation: isolate;
}

.office-card-art {
    position: absolute;
    inset: 0 0 0 30%;
    background-size: cover;
    background-position: center;
    clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%);
    opacity: 0.85;
    z-index: 0;
    transition: transform 0.5s ease;
}

.office-card:hover .office-card-art {
    transform: scale(1.05);
}

.office-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg, currentColor 0%, currentColor 55%, transparent 85%);
    z-index: 1;
    pointer-events: none;
}

.office-card-body,
.office-card-cta {
    position: relative;
    z-index: 2;
}

.office-card--light {
    background: #eef2fb;
    color: #eef2fb;
}

.office-card--light .office-card-body,
.office-card--light .office-card-city {
    color: var(--color-teal);
}

.office-card--light .office-card-address,
.office-card--light .office-card-line {
    color: #475063;
}

.office-card--dark {
    background: #0f1f7a;
    color: #0f1f7a;
}

.office-card--dark .office-card-body,
.office-card--dark .office-card-city,
.office-card--dark .office-card-line {
    color: var(--color-white);
}

.office-card--dark .office-card-address {
    color: rgba(255, 255, 255, 0.78);
}

.office-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.office-card-hq {
    display: inline-block;
    background: var(--color-teal);
    color: var(--color-white);
    font-family: var(--font-base);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    padding: 4px 8px;
    border-radius: 4px;
}

.office-card--dark .office-card-hq {
    background: var(--color-gold);
    color: var(--color-teal);
}

.office-card-city {
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1.1;
    font-weight: 500;
    margin: 0;
}

.office-card-address {
    font-family: var(--font-base);
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 14px;
    max-width: 80%;
}

.office-card-line {
    display: block;
    font-family: var(--font-base);
    font-size: 13.5px;
    text-decoration: none;
    margin-bottom: 4px;
    transition: color 0.2s ease;
}

.office-card-line:hover,
.office-card-line:focus {
    color: var(--color-gold);
}

.office-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid currentColor;
    color: inherit;
    text-decoration: none;
    margin-top: 24px;
    align-self: flex-start;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.office-card--light .office-card-cta {
    color: var(--color-teal);
    border-color: rgba(28, 49, 170, 0.25);
}

.office-card--dark .office-card-cta {
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.4);
}

.office-card-cta:hover,
.office-card-cta:focus {
    background: var(--color-gold);
    color: var(--color-white);
    border-color: var(--color-gold);
    transform: translate(2px, -2px);
}


/* ---------- Section 2: Get In Touch ---------- */

.contact-touch {
    background: linear-gradient(180deg, var(--color-white) 0%, #f4f6fc 100%);
    padding: 40px 0 90px;
}

.contact-touch-card {
    background: var(--color-white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px -32px rgba(11, 14, 60, 0.25);
}

/* Left dark pitch panel */
.contact-touch-pitch {
    position: relative;
    background:
        radial-gradient(circle at 15% 10%, rgba(212, 175, 55, 0.18) 0, transparent 45%),
        radial-gradient(circle at 90% 90%, rgba(255, 255, 255, 0.08) 0, transparent 50%),
        linear-gradient(160deg, #1c31aa 0%, #0f1f7a 100%);
    color: var(--color-white);
    padding: 50px 44px 40px;
    height: 100%;
    overflow: hidden;
}

.contact-touch-pitch::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3Ccircle cx='22' cy='22' r='1'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.contact-touch-pitch>* {
    position: relative;
    z-index: 1;
}

.contact-touch-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    font-family: var(--font-base);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 22px;
}

.contact-touch-title {
    font-family: var(--font-display);
    font-size: clamp(26px, 2.6vw, 34px);
    line-height: 1.2;
    color: var(--color-white);
    margin: 0 0 18px;
    font-weight: 500;
}

.contact-touch-lead {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 28px;
}

.contact-touch-bullets {
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-touch-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.contact-touch-check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-teal);
    margin-top: 2px;
}

.contact-touch-bullets strong {
    display: block;
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 2px;
}

.contact-touch-bullets small {
    display: block;
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.65);
}

.contact-touch-foot {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-touch-foot-label {
    display: block;
    font-family: var(--font-base);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 8px;
}

.contact-touch-foot-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-white);
    font-family: var(--font-base);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-touch-foot-phone svg {
    color: var(--color-white);
}

.contact-touch-foot-phone:hover,
.contact-touch-foot-phone:focus {
    color: var(--color-white);
    opacity: 0.85;
}

/* Right form panel */
.contact-touch-form-wrap {
    padding: 50px 44px 44px;
}

.contact-touch-form-title {
    font-family: var(--font-display);
    color: var(--color-teal);
    font-size: clamp(22px, 2vw, 28px);
    margin: 0 0 6px;
    font-weight: 500;
}

.contact-touch-form-sub {
    color: #6b6b78;
    font-size: 14px;
    margin: 0 0 26px;
    line-height: 1.55;
}

.contact-touch-label {
    display: block;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-teal);
    margin-bottom: 6px;
}

.contact-touch-req {
    color: #e63946;
}

.contact-touch-input {
    width: 100%;
    background: #fbfbfd;
    border: 1px solid #e6e8ef;
    border-radius: 10px;
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 14px;
    line-height: 1.4;
    padding: 13px 16px;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    outline: 0;
}

.contact-touch-input::placeholder {
    color: #a3a8b8;
}

.contact-touch-input:focus {
    border-color: var(--color-teal);
    background: var(--color-white);
    box-shadow: 0 0 0 4px rgba(28, 49, 170, 0.08);
}

.contact-touch-textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.55;
}

.contact-touch-form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 26px;
}

.contact-touch-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-teal);
    color: var(--color-white);
    border: 0;
    border-radius: 999px;
    padding: 14px 30px;
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 10px 22px -10px rgba(28, 49, 170, 0.45);
}

.contact-touch-submit svg {
    transition: transform 0.2s ease;
}

.contact-touch-submit:hover,
.contact-touch-submit:focus {
    background: var(--color-gold);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -10px rgba(212, 175, 55, 0.55);
}

.contact-touch-submit:hover svg,
.contact-touch-submit:focus svg {
    transform: translateX(3px);
}

.contact-touch-tos {
    margin: 0;
    color: #8a8fa3;
    font-size: 12px;
}

.contact-touch-tos a {
    color: var(--color-teal);
    text-decoration: underline;
}


/* ---------- Section 3: Map ---------- */

.contact-map {
    background: var(--color-white);
    padding: 70px 0 90px;
}

.contact-map-head {
    text-align: center;
    margin-bottom: 38px;
}

.contact-map-title {
    font-family: var(--font-display);
    color: var(--color-teal);
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.15;
    margin: 14px 0 0;
    font-weight: 500;
}

.contact-map-wrap {
    position: relative;
    width: 100%;
    line-height: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 50px -28px rgba(11, 14, 60, 0.22);
    border: 1px solid #ececec;
}

.contact-map-frame {
    width: 100%;
    height: 520px;
    border: 0;
    display: block;
}

.contact-map-card {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
    background: var(--color-white);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 12px 26px -10px rgba(11, 14, 60, 0.25);
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 340px;
    line-height: 1.45;
}

.contact-map-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.contact-map-card-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-base);
    font-weight: 700;
    color: var(--color-teal);
    font-size: 13px;
    margin-bottom: 2px;
}

.contact-map-card-tag {
    background: var(--color-gold);
    color: var(--color-teal);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 2px 6px;
    border-radius: 3px;
}

.contact-map-card-address {
    color: #6b6b78;
    font-size: 12.5px;
}

.contact-map-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.contact-map-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.contact-map-card-btn--ghost {
    background: #f1f3f9;
    color: var(--color-teal);
}

.contact-map-card-btn--primary {
    background: var(--color-teal);
    color: var(--color-white);
}

.contact-map-card-btn:hover,
.contact-map-card-btn:focus {
    transform: translateY(-1px);
}

.contact-map-card-btn--ghost:hover,
.contact-map-card-btn--ghost:focus {
    background: var(--color-teal);
    color: var(--color-white);
}

.contact-map-card-btn--primary:hover,
.contact-map-card-btn--primary:focus {
    background: var(--color-gold);
    color: var(--color-teal);
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .contact-presence {
        padding: 60px 0 40px;
    }

    .contact-presence-head {
        margin-bottom: 32px;
    }

    .office-card {
        min-height: 320px;
        padding: 24px 22px 20px;
    }

    .contact-touch {
        padding: 30px 0 70px;
    }

    .contact-touch-pitch {
        padding: 38px 30px 32px;
    }

    .contact-touch-form-wrap {
        padding: 38px 30px 32px;
    }

    .contact-map {
        padding: 50px 0 70px;
    }

    .contact-map-frame {
        height: 420px;
    }

    .contact-map-card {
        position: static;
        margin: 16px;
        max-width: none;
    }
}

@media (max-width: 575px) {
    .contact-presence {
        padding: 48px 0 32px;
    }

    .office-card-city {
        font-size: 26px;
    }

    .contact-touch-pitch {
        padding: 30px 24px 28px;
    }

    .contact-touch-form-wrap {
        padding: 30px 24px 28px;
    }

    .contact-map-frame {
        height: 320px;
    }
}


/* ==========================================================================
   Case Studies — index (filters + grid + pagination) and detail
   ========================================================================== */

.case-section {
    background: var(--color-white);
    padding: 70px 0 80px;
}

/* ==========================================================================
   Case Studies — Newsletter banner
   ========================================================================== */

.case-newsletter {
    background: var(--color-white);
    padding: 0 0 100px;
}

.case-newsletter-inner {
    background: var(--color-teal);
    color: var(--color-white);
    padding: 48px 56px;
    border-radius: 12px;
}

.case-newsletter-title {
    font-family: var(--font-base);
    color: var(--color-white);
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.2px;
    margin: 0 0 10px;
}

.case-newsletter-text {
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
    max-width: 460px;
}

.case-newsletter-form {
    display: flex;
    align-items: stretch;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 6px;
}

.case-newsletter-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    color: var(--color-white);
    padding: 12px 18px;
    font-family: var(--font-base);
    font-size: 14px;
    line-height: 1;
    outline: none;
}

.case-newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.case-newsletter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-gold);
    color: var(--color-white);
    border: 0;
    border-radius: 999px;
    padding: 12px 24px;
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease, gap 0.25s ease;
}

.case-newsletter-btn:hover,
.case-newsletter-btn:focus {
    background: var(--color-white);
    color: var(--color-teal);
    gap: 12px;
    outline: 0;
}

.case-newsletter-btn svg {
    transition: transform 0.3s ease;
}

.case-newsletter-btn:hover svg,
.case-newsletter-btn:focus svg {
    transform: translateX(3px);
}

@media (max-width: 991.98px) {
    .case-newsletter-inner {
        padding: 36px 32px;
    }

    .case-newsletter-form {
        margin-top: 24px;
    }
}

@media (max-width: 575.98px) {
    .case-newsletter-inner {
        padding: 28px 22px;
    }

    .case-newsletter-form {
        flex-direction: column;
        gap: 10px;
        background: transparent;
        border: 0;
        padding: 0;
    }

    .case-newsletter-input {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        padding: 14px 20px;
    }

    .case-newsletter-btn {
        justify-content: center;
        padding: 14px 24px;
    }
}

/* Filter chips ----------------------------------------------------------- */

.case-filters {
    list-style: none;
    margin: 0 0 56px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.case-filter {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border: 1px solid #d9dee1;
    background: transparent;
    border-radius: 999px;
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.2;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.case-filter:hover,
.case-filter:focus {
    border-color: var(--color-teal);
    color: var(--color-teal);
    outline: 0;
}

.case-filter.is-active {
    background: var(--color-teal);
    color: var(--color-white);
    border-color: var(--color-teal);
}

/* Grid ------------------------------------------------------------------- */

.case-grid {
    margin-bottom: 56px;
}

.case-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-white);
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.case-card:hover,
.case-card:focus {
    box-shadow: 0 22px 40px -22px rgba(11, 14, 60, 0.32);
    transform: translateY(-3px);
}

.case-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eef0f4;
}

.case-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
    display: block;
}

.case-card:hover .case-card-img,
.case-card:focus .case-card-img {
    transform: scale(1.05);
}

.case-card-body {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.case-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.case-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border: 1px solid #d9dee1;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

a.case-card-tag:hover,
a.case-card-tag:focus {
    border-color: var(--color-teal);
    color: var(--color-teal);
}

.case-card-title {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: 19px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -0.2px;
    margin: 0;
    transition: color 0.25s ease;
}

.case-card:hover .case-card-title,
.case-card:focus .case-card-title {
    color: var(--color-teal);
}

/* Pagination ------------------------------------------------------------- */

.case-pagination {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.case-pagination-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.case-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #d9dee1;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.case-page:hover,
.case-page:focus {
    border-color: var(--color-teal);
    color: var(--color-teal);
    outline: 0;
}

.case-page.is-active {
    background: var(--color-teal);
    color: var(--color-white);
    border-color: var(--color-teal);
}

.case-page-arrow svg {
    display: block;
}

/* Empty state ------------------------------------------------------------ */

.case-empty {
    text-align: center;
    padding: 56px 16px;
    color: #5b6a72;
    font-size: 15px;
}

.case-empty a {
    color: var(--color-teal);
    font-weight: 500;
}


/* ==========================================================================
   Case Study — detail page
   ========================================================================== */

.case-detail {
    background: var(--color-white);
    padding: 80px 0 100px;
}

.case-detail-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 32px;
}

.case-detail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.case-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.case-detail-date {
    color: #6c7a82;
    font-size: 13px;
    margin-left: 4px;
}

.case-detail-body {
    color: var(--color-text);
}

.case-detail-heading {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: clamp(22px, 1.9vw, 26px);
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -0.2px;
    margin: 36px 0 14px;
}

.case-detail-heading:first-child {
    margin-top: 0;
}

.case-detail-text {
    color: #4a5560;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 18px;
}

.case-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.case-detail-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.55;
}

.case-detail-list-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-teal);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.case-detail-list-icon svg {
    width: 12px;
    height: 12px;
    display: block;
}

.case-detail-back {
    margin-top: 48px;
}

.case-detail-back .btn-readmore svg {
    margin-right: 4px;
}

/* Sidebar ---------------------------------------------------------------- */

.case-detail-side {
    position: sticky;
    top: 30px;
}

.case-detail-side-card {
    background: #f4f6fa;
    padding: 32px 30px 30px;
    border-radius: 8px;
}

.case-detail-side-title {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.1px;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e0e4ea;
}

.case-detail-facts {
    margin: 0 0 24px;
    padding: 0;
}

.case-detail-fact {
    margin: 0 0 16px;
}

.case-detail-fact dt {
    color: #6c7a82;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin: 0 0 4px;
}

.case-detail-fact dd {
    color: var(--color-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    margin: 0;
}

.case-detail-services {
    list-style: none;
    margin: 0;
    padding: 0;
}

.case-detail-services li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.45;
}

.case-detail-services li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-teal);
}

.case-detail-side-cta {
    width: 100%;
    justify-content: center;
}

/* Related case studies --------------------------------------------------- */

.case-related {
    margin-top: 80px;
    padding-top: 56px;
    border-top: 1px solid #e6e6e6;
}

.case-related-title {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -0.2px;
    margin: 0 0 32px;
}

/* Case Studies — responsive --------------------------------------------- */

@media (max-width: 991.98px) {

    .case-section {
        padding: 48px 0 64px;
    }

    .case-filters {
        margin-bottom: 36px;
    }

    .case-detail {
        padding: 48px 0 64px;
    }

    .case-detail-side {
        position: static;
        margin-top: 40px;
    }

    .case-related {
        margin-top: 56px;
        padding-top: 40px;
    }
}

@media (max-width: 767px) {

    .case-section {
        padding: 40px 0 56px;
    }

    .case-filter {
        padding: 8px 18px;
        font-size: 13px;
    }

    .case-card-body {
        padding: 18px 20px 22px;
    }

    .case-card-title {
        font-size: 17px;
    }

    .case-page {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .case-detail-side-card {
        padding: 24px 22px 22px;
    }
}


/* ==========================================================================
   Services Hub — region pill switcher + cards + closing CTA
   ========================================================================== */

.services-hub,
.services-split-section {
    background: var(--color-white);
    padding: 80px 0 90px;
}

/* ==========================================================================
   Services — Split-screen by region
   ========================================================================== */

.services-split {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid #e6e9ef;
}

.services-split::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #e6e9ef;
    transform: translateX(-50%);
}

.services-split-col {
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
}

.services-split-col--in {
    padding-right: 44px;
}

.services-split-col--ae {
    padding-left: 44px;
}

.services-split-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.services-split-flag {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f5f7fa;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-teal);
    overflow: hidden;
}

.services-split-flag svg,
.services-split-flag img {
    width: 26px;
    height: auto;
    display: block;
}

.services-split-eyebrow {
    display: block;
    color: var(--color-gold);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.services-split-region {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.3px;
    margin: 0;
}

.services-split-tagline {
    color: #5b6a72;
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0 0 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #eef0f4;
}

.services-split-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.services-split-item+.services-split-item {
    border-top: 1px solid #eef0f4;
}

.services-split-link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 22px;
    padding: 18px 4px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.25s ease, padding 0.25s ease;
}

.services-split-link:hover,
.services-split-link:focus {
    background-color: #fafbfc;
    padding-left: 10px;
    padding-right: 10px;
    outline: 0;
}

.services-split-num {
    font-family: var(--font-display);
    color: #c1c8d3;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    min-width: 30px;
    transition: color 0.25s ease;
}

.services-split-link:hover .services-split-num,
.services-split-link:focus .services-split-num {
    color: var(--color-gold);
}

.services-split-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.services-split-label {
    color: var(--color-teal);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1.3;
}

.services-split-desc {
    color: #5b6a72;
    font-size: 13.5px;
    line-height: 1.55;
}

.services-split-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e0e4ec;
    color: var(--color-teal);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    flex-shrink: 0;
}

.services-split-link:hover .services-split-arrow,
.services-split-link:focus .services-split-arrow {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: var(--color-white);
    transform: translateX(3px);
}

@media (max-width: 991.98px) {
    .services-split {
        grid-template-columns: 1fr;
    }

    .services-split::before {
        display: none;
    }

    .services-split-col,
    .services-split-col--in,
    .services-split-col--ae {
        padding: 32px 4px;
    }

    .services-split-col+.services-split-col {
        border-top: 1px solid #e6e9ef;
    }
}

@media (max-width: 575.98px) {
    .services-split-link {
        column-gap: 14px;
        padding: 16px 2px;
    }

    .services-split-num {
        font-size: 16px;
        min-width: 26px;
    }

    .services-split-label {
        font-size: 15.5px;
    }

    .services-split-desc {
        font-size: 13px;
    }

    .services-split-arrow {
        width: 28px;
        height: 28px;
    }
}

/* Intro block ------------------------------------------------------------ */

.services-hub-intro {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 48px;
}

.services-hub-eyebrow {
    display: inline-block;
    color: var(--color-teal);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.services-hub-title {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: clamp(28px, 2.8vw, 38px);
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.4px;
    margin: 0 0 18px;
}

.services-hub-lead {
    color: #5b6a72;
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}

/* Region pill switcher --------------------------------------------------- */

.services-hub-tabs.nav {
    list-style: none;
    margin: 0 auto 36px;
    padding: 6px;
    display: flex;
    gap: 4px;
    background: #f4f6fa;
    border-radius: 999px;
    width: max-content;
    max-width: 100%;
    justify-content: center;
    border: 0;
}

.services-hub-tabs .nav-item {
    display: flex;
}

/* Override Bootstrap .nav-link defaults so our pill design wins */
.services-hub-tab.nav-link {
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 500;
    padding: 12px 32px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    line-height: 1.2;
}

.services-hub-tab.nav-link:hover,
.services-hub-tab.nav-link:focus {
    color: var(--color-teal);
    background: transparent;
    border: 0;
    outline: 0;
    isolation: isolate;
}

.services-hub-tab.nav-link.active {
    background: var(--color-teal);
    color: var(--color-white);
    border: 0;
    box-shadow: 0 8px 20px -10px rgba(28, 49, 170, 0.45);
}

/* Pane content ----------------------------------------------------------- */

.services-hub-tagline {
    text-align: left;
    color: #5b6a72;
    font-size: 15px;
    line-height: 1.55;
    max-width: 720px;
    margin: 0 0 22px;
}

.services-hub-grid {
    margin: 0;
}

/* ==========================================================================
   Services — interactive accordion list + underlined region tabs
   ========================================================================== */
.svacc {
    padding: 80px 0;
}

/* Header: tag + title (left), tabs (right) */
.svacc__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    border-bottom: 1px solid #e6e9ef;
    padding-bottom: 18px;
    margin-bottom: 8px;
}

.svacc__tag {
    display: inline-block;
    background: rgba(28, 49, 170, 0.08);
    color: var(--color-teal);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.svacc__title {
    font-family: var(--font-base);
    font-weight: 500;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--color-text);
    margin: 0;
}

/* Underlined region tabs */
.svacc__tabs {
    display: flex;
    gap: 28px;
    border: 0;
}

.svacc__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 6px 2px 10px;
    color: #8a8a96;
    font-family: var(--font-base);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.25s ease;
}

.svacc__tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -19px;
    height: 2px;
    background: var(--color-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}

.svacc__tab:hover { color: var(--color-text); }

.svacc__tab.active { color: var(--color-teal); }
.svacc__tab.active::after { transform: scaleX(1); }

.svacc__tab-count {
    font-size: 12px;
    font-weight: 700;
    color: #b3b3bd;
}

.svacc__tab.active .svacc__tab-count { color: var(--color-gold); }

/* ---- Full-width list rows with thumbnail ---- */
.svlist {
    margin-top: 24px;
    border-top: 1px solid #e9eaf0;
}

.svrow {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 22px 10px;
    border-bottom: 1px solid #e9eaf0;
    text-decoration: none;
    transition: background 0.25s ease, padding 0.25s ease;
}

.svrow:hover,
.svrow:focus {
    background: #fafafa;
    padding-left: 22px;
    padding-right: 22px;
}

.svrow__num {
    flex-shrink: 0;
    width: 36px;
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-gold);
}

.svrow__text {
    flex: 1;
    min-width: 0;
}

.svrow__title {
    font-family: var(--font-base);
    font-size: clamp(19px, 1.8vw, 24px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.2px;
    color: #222;
    margin: 0 0 4px;
    transition: color 0.25s ease;
}

.svrow:hover .svrow__title,
.svrow:focus .svrow__title {
    color: var(--color-teal);
}

.svrow__desc {
    font-family: var(--font-base);
    font-size: 14px;
    line-height: 1.55;
    color: #6b6b78;
    margin: 0;
    max-width: 560px;
}

.svrow__media {
    flex-shrink: 0;
    width: 200px;
    height: 120px;
    overflow: hidden;
    background: #e9ecf3;
    /* asymmetric rounded corners — matches the team page */
    border-radius: 26px 26px 4px 26px;
}

.svrow__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.svrow:hover .svrow__media img,
.svrow:focus .svrow__media img {
    transform: scale(1.07);
}

.svrow__arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #e0e1e9;
    color: var(--color-teal);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.svrow:hover .svrow__arrow,
.svrow:focus .svrow__arrow {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: #fff;
    transform: translateX(3px);
}

@media (max-width: 767.98px) {
    .svrow {
        flex-wrap: wrap;
        gap: 14px 18px;
        padding: 20px 8px;
    }
    .svrow__num { width: auto; }
    .svrow__text { flex: 1 1 100%; order: 2; }
    .svrow__media {
        order: 3;
        width: 100%;
        height: 180px;
    }
    .svrow__arrow { order: 1; margin-left: auto; }
}

/* Accordion list */
.svacc__list {
    margin-top: 8px;
}

.svacc-item {
    display: block;
    border-bottom: 1px solid #e9eaf0;
    text-decoration: none;
    color: var(--color-teal);
}

.svacc-item__bar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 26px 8px;
    transition: padding 0.3s ease;
}

.svacc-item__num {
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-gold);
    flex-shrink: 0;
    width: 32px;
}

.svacc-item__title {
    flex: 1;
    font-family: var(--font-base);
    font-weight: 600;
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: #222;
    margin: 0;
    transition: color 0.25s ease;
}

.svacc-item__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #e0e1e9;
    color: var(--color-teal);
    transition: transform 0.35s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Expanding panel — animated via grid-template-rows 0fr -> 1fr */
.svacc-item__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.svacc-item__panel-in {
    overflow: hidden;
    min-height: 0;
    display: flex;
    gap: 32px;
    align-items: stretch;
    padding: 0 8px 4px 56px;
}

.svacc-item__media {
    flex: 0 0 320px;
    max-width: 320px;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    background: #eceef3;
}

.svacc-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.svacc-item__copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 28px;
}

.svacc-item__text {
    font-family: var(--font-base);
    font-size: 15px;
    line-height: 1.7;
    color: #5b6a72;
    margin: 0 0 18px;
}

.svacc-item__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gold);
}

.svacc-item__more svg { transition: transform 0.25s ease; }

/* Open / hover / focus state */
.svacc-item:hover,
.svacc-item:focus-within,
.svacc-item.is-open {
    background: #fafafa;
}

.svacc-item:hover .svacc-item__panel,
.svacc-item:focus-within .svacc-item__panel,
.svacc-item.is-open .svacc-item__panel {
    grid-template-rows: 1fr;
}

.svacc-item:hover .svacc-item__title,
.svacc-item:focus-within .svacc-item__title,
.svacc-item.is-open .svacc-item__title {
    color: var(--color-teal);
}

.svacc-item:hover .svacc-item__icon,
.svacc-item:focus-within .svacc-item__icon,
.svacc-item.is-open .svacc-item__icon {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: #fff;
    transform: rotate(45deg);
}

.svacc-item:hover .svacc-item__more svg,
.svacc-item:focus-within .svacc-item__more svg {
    transform: translateX(4px);
}

@media (max-width: 767.98px) {
    .svacc { padding: 52px 0; }
    .svacc__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
    .svacc__tabs { gap: 22px; }
    .svacc-item__panel-in {
        flex-direction: column;
        gap: 16px;
        padding: 0 8px 4px;
    }
    .svacc-item__media {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
    .svacc-item__copy { padding-bottom: 22px; }
}

/* Image-led service card (svc-card) -------------------------------------- */
.svc-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-white);
    border-radius: 18px;
    padding: 12px;
    text-decoration: none;
    color: var(--color-teal);
    box-shadow: 0 1px 2px rgba(20, 24, 60, 0.04);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.svc-card:hover,
.svc-card:focus {
    box-shadow: 0 20px 44px rgba(20, 24, 60, 0.14);
    transform: translateY(-5px);
}

.svc-card__media {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border-radius: 12px;
    background: #eceef3;
}

.svc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.svc-card:hover .svc-card__media img,
.svc-card:focus .svc-card__media img {
    transform: scale(1.06);
}

.svc-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 14px 14px;
}

.svc-card__title {
    font-family: var(--font-base);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-teal);
    margin: 0 0 10px;
}

.svc-card__text {
    font-family: var(--font-base);
    font-size: 14px;
    line-height: 1.6;
    color: #5b6a72;
    margin: 0 0 20px;
}

/* Footer: "Learn more" + circular arrow button */
.svc-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #eef0f4;
}

.svc-card__link {
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-teal);
    transition: color 0.25s ease;
}

.svc-card__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #f0f1f8;
    color: var(--color-teal);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.svc-card:hover .svc-card__link,
.svc-card:focus .svc-card__link {
    color: var(--color-gold);
}

.svc-card:hover .svc-card__arrow,
.svc-card:focus .svc-card__arrow {
    background: var(--color-gold);
    color: var(--color-white);
    transform: translateX(3px);
}

/* Service card ----------------------------------------------------------- */

.services-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-white);
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 32px 30px 28px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.services-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(28, 49, 170, 0.04) 0%, rgba(28, 49, 170, 0) 50%);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: -1;
}

.services-card:hover,
.services-card:focus {
    border-color: var(--color-teal);
    transform: translateY(-4px);
    box-shadow: 0 24px 44px -24px rgba(11, 14, 60, 0.28);
}

.services-card:hover::before,
.services-card:focus::before {
    opacity: 1;
}

.services-card-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-teal);
    background: rgba(28, 49, 170, 0.08);
    border-radius: 12px;
    margin-bottom: 22px;
    transition: background 0.3s ease, color 0.3s ease;
}

.services-card-icon svg {
    width: 32px;
    height: 32px;
    display: block;
}

.services-card:hover .services-card-icon,
.services-card:focus .services-card-icon {
    background: var(--color-teal);
    color: var(--color-white);
}

.services-card-title {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.2px;
    margin: 0 0 12px;
    transition: color 0.25s ease;
}

.services-card:hover .services-card-title,
.services-card:focus .services-card-title {
    color: var(--color-teal);
}

.services-card-text {
    color: #5b6a72;
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 22px;
    flex: 1;
}

.services-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-teal);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px;
    transition: gap 0.25s ease, color 0.25s ease;
}

.services-card-cta svg {
    transition: transform 0.25s ease;
}

.services-card:hover .services-card-cta,
.services-card:focus .services-card-cta {
    color: var(--color-gold);
}

.services-card:hover .services-card-cta svg,
.services-card:focus .services-card-cta svg {
    transform: translateX(4px);
}

/* ==========================================================================
   Services — Intro v3 (compact centered + segmented switcher)
   ========================================================================== */

.services-intro-v3 {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 26px;
}

.services-intro-v3-tag {
    display: inline-block;
    background: rgba(28, 49, 170, 0.08);
    color: var(--color-teal);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 22px;
}

.services-intro-v3-title {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.4px;
    margin: 0 0 16px;
}

.services-intro-v3-lead {
    color: #5b6a72;
    font-size: 15px;
    line-height: 1.65;
    margin: 0 auto 28px;
    max-width: 560px;
}

/* Segmented pill switcher */
.services-intro-v3-switch-wrap {
    display: flex;
    justify-content: center;
}

.services-intro-v3-switch {
    position: relative;
    display: inline-flex;
    padding: 4px;
    background: #f3f5f8;
    border-radius: 999px;
    border: 1px solid #e6e9ef;
    gap: 0;
}

.services-intro-v3-switch-thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / 2);
    background: var(--color-teal);
    border-radius: 999px;
    box-shadow: 0 6px 16px -8px rgba(28, 49, 170, 0.45);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}

.services-intro-v3-switch:has(.services-intro-v3-tab:nth-of-type(1).active) .services-intro-v3-switch-thumb {
    transform: translateX(0);
}

.services-intro-v3-switch:has(.services-intro-v3-tab:nth-of-type(2).active) .services-intro-v3-switch-thumb {
    transform: translateX(100%);
}

.services-intro-v3-tab.nav-link {
    position: relative;
    z-index: 1;
    background: transparent;
    border: 0;
    color: #5b6a72;
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 10px 30px;
    margin: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.3s ease;
    min-width: 110px;
}

.services-intro-v3-tab.nav-link:hover,
.services-intro-v3-tab.nav-link:focus {
    color: var(--color-text);
    outline: 0;
    background: transparent;
}

.services-intro-v3-tab.nav-link.active {
    color: var(--color-white);
    background: transparent;
}

@media (max-width: 480px) {
    .services-intro-v3-tab.nav-link {
        padding: 9px 22px;
        min-width: 90px;
    }
}

/* ==========================================================================
   Services — Editorial header + underlined tab bar (current)
   ========================================================================== */
.services-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 30px;
}

.services-head__left {
    flex: 1;
    min-width: 0;
}

.services-head__right {
    flex: 0 1 420px;
}

.services-head__tag {
    display: inline-block;
    background: rgba(28, 49, 170, 0.08);
    color: var(--color-teal);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 20px;
}

.services-head__title {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.5px;
    margin: 0;
}

.services-head__lead {
    color: #5b6a72;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

/* Tab bar — underline style with count badges */
.services-tabbar {
    border-bottom: 1px solid #e6e9ef;
    margin-bottom: 28px;
}

.services-tabbar__nav {
    display: flex;
    gap: 8px;
    border: 0;
    flex-wrap: wrap;
}

.services-tab.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 14px 4px;
    margin: 0 18px -1px 0;
    color: #5b6a72;
    font-family: var(--font-base);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: color 0.25s ease;
}

.services-tab.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--color-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}

.services-tab.nav-link:hover,
.services-tab.nav-link:focus {
    color: var(--color-text);
    background: transparent;
    outline: 0;
}

.services-tab.nav-link.active {
    color: var(--color-teal);
    background: transparent;
}

.services-tab.nav-link.active::after {
    transform: scaleX(1);
}

.services-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f0f1f8;
    color: #6b6b78;
    font-size: 11px;
    font-weight: 700;
    transition: background 0.25s ease, color 0.25s ease;
}

.services-tab.nav-link.active .services-tab__count {
    background: var(--color-teal);
    color: var(--color-white);
}

@media (max-width: 767.98px) {
    .services-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        margin-bottom: 24px;
    }

    .services-head__title br {
        display: none;
    }

    .services-tab.nav-link {
        font-size: 15px;
        margin-right: 12px;
    }
}

/* ==========================================================================
   Services — Intro v2 (editorial, left-aligned, underline tabs) — legacy
   ========================================================================== */

.services-intro-v2 {
    margin: 0 0 56px;
    padding-bottom: 32px;
    border-bottom: 1px solid #eef0f4;
}

.services-intro-v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--color-gold);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.services-intro-v2-eyebrow-line {
    display: inline-block;
    width: 36px;
    height: 1px;
    background: var(--color-gold);
}

.services-intro-v2-title {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.6px;
    margin: 0;
    max-width: 14ch;
}

.services-intro-v2-lead {
    color: #5b6a72;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 991.98px) {
    .services-intro-v2-lead {
        margin-top: 22px;
    }
}

/* Underline-style market switcher */
.services-intro-v2-switch {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 36px;
    flex-wrap: wrap;
}

.services-intro-v2-switch-label {
    color: #8a949c;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    padding-right: 18px;
    border-right: 1px solid #e6e9ef;
    line-height: 1;
}

.services-intro-v2-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 0;
}

.services-intro-v2-tabs .nav-item+.nav-item {
    margin-left: 8px;
}

.services-intro-v2-tab.nav-link {
    position: relative;
    background: transparent;
    border: 0;
    color: #8a949c;
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.2px;
    padding: 8px 14px 12px;
    margin: 0;
    transition: color 0.25s ease;
    cursor: pointer;
}

.services-intro-v2-tab.nav-link::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2px;
    background: var(--color-teal);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}

.services-intro-v2-tab.nav-link:hover,
.services-intro-v2-tab.nav-link:focus {
    color: var(--color-text);
    outline: 0;
}

.services-intro-v2-tab.nav-link.active {
    color: var(--color-teal);
    font-weight: 600;
}

.services-intro-v2-tab.nav-link.active::after {
    transform: scaleX(1);
}

/* ==========================================================================
   Service card v2 — color-blocked tops, rotating accents, hover reveal
   ========================================================================== */

.services-card-v2 {
    --card-block-color: var(--color-teal);
    --card-block-text: #ffffff;
    --card-block-hover: #0e1855;

    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-white);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 0 #e6e9ef inset, 0 0 0 1px #e6e9ef;
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.services-card-v2:hover,
.services-card-v2:focus {
    transform: translateY(-6px);
    box-shadow: 0 30px 50px -28px rgba(11, 14, 60, 0.30), 0 0 0 1px transparent;
    outline: 0;
}

/* Color-blocked top */
.services-card-v2-block {
    position: relative;
    background: var(--card-block-color);
    color: var(--card-block-text);
    padding: 26px 28px 30px;
    min-height: 130px;
    overflow: hidden;
    transition: background-color 0.45s ease, padding 0.45s ease;
}

.services-card-v2:hover .services-card-v2-block,
.services-card-v2:focus .services-card-v2-block {
    background: var(--card-block-hover);
}

.services-card-v2-num {
    position: relative;
    z-index: 2;
    display: block;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
}

.services-card-v2-eyebrow {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.services-card-v2-watermark {
    position: absolute;
    right: -16px;
    bottom: -38px;
    font-family: var(--font-display);
    font-size: 150px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.10);
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1), color 0.45s ease;
    z-index: 1;
}

.services-card-v2:hover .services-card-v2-watermark,
.services-card-v2:focus .services-card-v2-watermark {
    transform: translate(-6px, -10px) scale(1.05);
    color: rgba(255, 255, 255, 0.16);
}

/* Body */
.services-card-v2-body {
    flex: 1;
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
}

.services-card-v2-title {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.2px;
    margin: 0 0 12px;
    transition: color 0.25s ease;
}

.services-card-v2:hover .services-card-v2-title,
.services-card-v2:focus .services-card-v2-title {
    color: var(--color-teal);
}

.services-card-v2-text {
    color: #5b6a72;
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 20px;
    flex: 1;
}

.services-card-v2-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-teal);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: gap 0.25s ease, color 0.25s ease;
    align-self: flex-start;
}

.services-card-v2-cta::after {
    content: '';
    position: absolute;
}

.services-card-v2-cta svg {
    transition: transform 0.3s ease;
}

.services-card-v2:hover .services-card-v2-cta,
.services-card-v2:focus .services-card-v2-cta {
    color: var(--color-gold);
    gap: 12px;
}

.services-card-v2:hover .services-card-v2-cta svg,
.services-card-v2:focus .services-card-v2-cta svg {
    transform: translateX(4px);
}

/* Color rotation across cards */
.services-card-v2--variant-0 {
    --card-block-color: var(--color-teal);
    --card-block-hover: #0e1855;
    --card-block-text: #ffffff;
}

.services-card-v2--variant-1 {
    --card-block-color: #0e1855;
    --card-block-hover: var(--color-teal);
    --card-block-text: #ffffff;
}

.services-card-v2--variant-2 {
    --card-block-color: var(--color-gold);
    --card-block-hover: var(--color-text);
    --card-block-text: #ffffff;
}

.services-card-v2--variant-2 .services-card-v2-eyebrow {
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 575.98px) {
    .services-card-v2-block {
        padding: 22px 22px 26px;
        min-height: 110px;
    }

    .services-card-v2-watermark {
        font-size: 120px;
    }

    .services-card-v2-body {
        padding: 22px 22px 24px;
    }
}

/* Closing CTA section ---------------------------------------------------- */

.services-cta {
    background: var(--color-white);
    padding: 0 0 100px;
}

.services-cta-inner {
    background: var(--color-teal);
    color: var(--color-white);
    padding: 56px 56px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.services-cta-inner::after {
    content: '';
    position: absolute;
    right: -80px;
    bottom: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
    z-index: -1;
}

.services-cta-title {
    font-family: var(--font-base);
    color: var(--color-white);
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.3px;
    margin: 0 0 12px;
}

.services-cta-text {
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
    max-width: 540px;
}

.services-cta-actions {
    text-align: right;
}

/* Services Hub — responsive --------------------------------------------- */

@media (max-width: 991.98px) {

    .services-hub {
        padding: 56px 0 64px;
    }

    .services-hub-intro {
        margin-bottom: 32px;
    }

    .services-hub-tagline {
        margin-bottom: 28px;
    }

    .services-card {
        padding: 26px 24px 24px;
    }

    .services-cta {
        padding-bottom: 64px;
    }

    .services-cta-inner {
        padding: 40px 32px;
    }

    .services-cta-actions {
        text-align: left;
        margin-top: 22px;
    }
}

@media (max-width: 767px) {

    .services-hub-tab {
        padding: 10px 22px;
        font-size: 13px;
    }

    .services-card-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 18px;
    }

    .services-card-icon svg {
        width: 28px;
        height: 28px;
    }

    .services-cta-inner {
        padding: 32px 24px;
    }
}


/* ==========================================================================
   FAQ page — eyebrow + serif heading + accordion list
   ========================================================================== */

.faq-section {
    background: #f4f6fa;
    padding: 100px 0 110px;
}

/* Left column ------------------------------------------------------------ */

.faq-intro {
    position: sticky;
    top: 40px;
}

.faq-eyebrow {
    display: inline-block;
    background: #e3e6ec;
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 8px 22px;
    border-radius: 999px;
    margin-bottom: 28px;
}

.faq-heading {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: clamp(40px, 4.4vw, 54px);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.5px;
    margin: 0 0 22px;
}

.faq-text {
    color: #5b6a72;
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 28px;
    max-width: 380px;
}

.faq-cta {
    padding: 14px 26px;
    font-size: 14px;
    font-weight: 600;
}

/* Right column — accordion ---------------------------------------------- */

.faq-accordion {
    width: 100%;
}

.faq-item {
    border-top: 1px solid #d9dde4;
}

.faq-item:last-child {
    border-bottom: 1px solid #d9dde4;
}

.faq-question {
    margin: 0;
}

.faq-toggle {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 26px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    cursor: pointer;
    text-align: left;
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.1px;
    transition: color 0.25s ease;
}

.faq-toggle:hover,
.faq-toggle:focus {
    color: var(--color-teal);
    outline: 0;
}

.faq-toggle[aria-expanded="true"] {
    color: var(--color-text);
}

.faq-toggle-text {
    flex: 1;
}

.faq-toggle-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease, background 0.25s ease;
}

.faq-toggle-icon svg {
    display: block;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-toggle[aria-expanded="true"] .faq-toggle-icon {
    background: var(--color-teal);
    color: var(--color-white);
    transform: rotate(45deg);
}

.faq-toggle:hover .faq-toggle-icon {
    color: var(--color-teal);
}

.faq-toggle[aria-expanded="true"]:hover .faq-toggle-icon {
    color: var(--color-white);
}

/* Answer panel ----------------------------------------------------------- */

.faq-answer-inner {
    padding: 0 50px 26px 0;
    color: #4a5560;
    font-size: 15px;
    line-height: 1.7;
}

.faq-answer-inner a {
    color: var(--color-teal);
    text-decoration: underline;
}

.faq-answer-inner a:hover {
    color: var(--color-gold);
}

/* FAQ — responsive ------------------------------------------------------ */

@media (max-width: 991.98px) {

    .faq-section {
        padding: 56px 0 64px;
    }

    .faq-intro {
        position: static;
        margin-bottom: 32px;
    }

    .faq-heading {
        font-size: 36px;
    }
}

@media (max-width: 767px) {

    .faq-toggle {
        font-size: 15px;
        padding: 20px 0;
        gap: 16px;
    }

    .faq-toggle-icon {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
    }

    .faq-toggle-icon svg {
        width: 16px;
        height: 16px;
    }

    .faq-answer-inner {
        padding-bottom: 22px;
        padding-right: 30px;
        font-size: 14px;
    }
}


/* ==========================================================================
   Blog archive — 3-col card grid with image zoom + shadow on hover
   ========================================================================== */

.blog-archive {
    background: var(--color-white);
    padding: 90px 0 110px;
}

.blog-archive-grid {
    margin-bottom: 64px;
    --bs-gutter-x: 2.5rem;
    --bs-gutter-y: 3rem;
}

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

.blog-archive-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-white);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
        transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
    box-shadow: 0 0 0 rgba(11, 14, 60, 0);
}

.blog-archive-card:hover,
.blog-archive-card:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 30px 50px -28px rgba(11, 14, 60, 0.32);
}

/* Image with tag overlay (bottom-center) -------------------------------- */

.blog-archive-image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eef0f4;
    border-radius: 0;
}

.blog-archive-img {
    /* width: 100%; */
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
    will-change: transform;
}

.blog-archive-card:hover .blog-archive-img,
.blog-archive-card:focus-within .blog-archive-img {
    transform: scale(1.07);
}

.blog-archive-tags {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    z-index: 2;
    pointer-events: none;
    max-width: calc(100% - 32px);
    justify-content: center;
    width: max-content;
}

.blog-archive-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 22px;
    background: var(--color-text);
    border-radius: 999px;
    color: var(--color-white);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1px;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Body ------------------------------------------------------------------- */

.blog-archive-body {
    padding: 36px 28px 32px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-archive-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #5b6a72;
    margin-bottom: 16px;
}

.blog-archive-author {
    color: var(--color-text);
    font-weight: 600;
    letter-spacing: 0.1px;
}

.blog-archive-sep {
    color: #9aa3a8;
}

.blog-archive-date {
    color: #6c7a82;
    font-weight: 500;
}

.blog-archive-title {
    margin: 0 0 22px;
}

.blog-archive-title a {
    color: var(--color-teal);
    text-decoration: none;
    font-family: var(--font-base);
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.2px;
    display: inline;
    transition: opacity 0.25s ease;
}

.blog-archive-card:hover .blog-archive-title a,
.blog-archive-card:focus-within .blog-archive-title a {
    opacity: 0.78;
}

.blog-archive-rule {
    display: block;
    width: 100%;
    height: 1px;
    background: #e3e6ec;
    margin: 0 0 22px;
}

.blog-archive-excerpt {
    color: #4a5560;
    font-size: 14px;
    line-height: 1.75;
    margin: 0 0 28px;
    flex: 1;
}

.blog-archive-more {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--color-teal);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.1px;
    text-decoration: none;
    transition: opacity 0.25s ease, gap 0.25s ease;
}

.blog-archive-more svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
    transition: transform 0.3s ease;
}

.blog-archive-more:hover,
.blog-archive-more:focus,
.blog-archive-card:hover .blog-archive-more,
.blog-archive-card:focus-within .blog-archive-more {
    color: var(--color-teal);
    opacity: 0.78;
}

.blog-archive-card:hover .blog-archive-more svg,
.blog-archive-card:focus-within .blog-archive-more svg,
.blog-archive-more:hover svg,
.blog-archive-more:focus svg {
    transform: translateX(5px);
}

/* Pagination — reuses .case-page styling, wrapper centers */

.blog-archive-pagination {
    display: flex;
    justify-content: center;
}


/* ==========================================================================
   Blog detail — article + sidebar
   ========================================================================== */

.blog-detail {
    background: var(--color-white);
    padding: 80px 0 100px;
}

.blog-detail-main {
    color: var(--color-text);
}

.blog-detail-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 28px;
}

.blog-detail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-detail-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #5b6a72;
    margin-bottom: 24px;
}

.blog-detail-meta-divider {
    color: #c1c6cd;
}

.blog-detail-meta-tags {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.blog-detail-tag {
    background: rgba(20, 24, 50, 0.85);
}

.blog-detail-lead {
    color: var(--color-text);
    font-size: 18px;
    line-height: 1.55;
    font-weight: 500;
    margin: 0 0 26px;
    letter-spacing: -0.1px;
}

.blog-detail-body p {
    color: #4a5560;
    font-size: 16px;
    line-height: 1.75;
    margin: 0 0 18px;
}

.blog-detail-back {
    margin-top: 40px;
}

.blog-detail-back .btn-readmore svg {
    margin-right: 4px;
}

.blog-detail-author-bio {
    color: #4a5560;
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 24px;
}

.blog-detail-author-bio strong {
    color: var(--color-text);
    font-weight: 500;
}


/* Blog — responsive ----------------------------------------------------- */

@media (max-width: 991.98px) {

    .blog-archive {
        padding: 56px 0 64px;
    }

    .blog-detail {
        padding: 48px 0 64px;
    }
}

@media (max-width: 767px) {

    .blog-archive {
        padding: 48px 0 64px;
    }

    .blog-archive-grid {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 2rem;
    }

    .blog-archive-tags {
        bottom: 12px;
        gap: 8px;
    }

    .blog-archive-tag {
        padding: 6px 15px;
        font-size: 11px;
    }

    .blog-archive-image {
        border-radius: 0;
    }

    .blog-archive-body {
        padding: 30px 22px 26px;
    }

    .blog-detail-lead {
        font-size: 16px;
    }

    .blog-detail-body p {
        font-size: 15px;
    }
}


.about-power-stat-value {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* ==========================================================================
   Site Search — Full-screen overlay
   ========================================================================== */

html.has-search-open,
body.has-search-open {
    overflow: hidden;
}

.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.search-overlay.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.35s ease, visibility 0s linear 0s;
}

.search-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 14, 60, 0.86);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    z-index: 1;
}

.search-overlay-close {
    position: absolute;
    top: 28px;
    right: 32px;
    z-index: 3;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.search-overlay-close:hover,
.search-overlay-close:focus {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-white);
    transform: rotate(90deg);
    outline: 0;
}

.search-overlay-inner {
    position: relative;
    z-index: 2;
    width: min(840px, calc(100% - 48px));
    text-align: center;
    color: var(--color-white);
    transform: translateY(-12px) scale(0.98);
    opacity: 0;
    transition: opacity 0.35s ease 0.05s, transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) 0.05s;
}

.search-overlay.is-open .search-overlay-inner {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.search-overlay-title {
    font-family: var(--font-base);
    color: var(--color-white);
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.4px;
    margin: 0 0 12px;
}

.search-overlay-sub {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 36px;
}

.search-overlay-form {
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 8px;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.search-overlay-form:focus-within {
    border-color: var(--color-gold);
    background: rgba(255, 255, 255, 0.12);
}

.search-overlay-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    color: rgba(255, 255, 255, 0.78);
    flex-shrink: 0;
}

.search-overlay-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    color: var(--color-white);
    font-family: var(--font-base);
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.2;
    padding: 14px 8px;
    outline: none;
}

.search-overlay-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-overlay-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.search-overlay-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-gold);
    color: var(--color-white);
    border: 0;
    border-radius: 999px;
    padding: 0 28px;
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, gap 0.25s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.search-overlay-submit:hover,
.search-overlay-submit:focus {
    background: var(--color-white);
    color: var(--color-teal);
    gap: 12px;
    outline: 0;
}

.search-overlay-submit svg {
    transition: transform 0.3s ease;
}

.search-overlay-submit:hover svg,
.search-overlay-submit:focus svg {
    transform: translateX(3px);
}

.search-overlay-suggestions {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 12px;
}

.search-overlay-suggest-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.search-overlay-suggest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-overlay-suggest {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.search-overlay-suggest:hover,
.search-overlay-suggest:focus {
    background: var(--color-gold);
    color: var(--color-white);
    border-color: var(--color-gold);
    outline: 0;
}

@media (max-width: 575.98px) {
    .search-overlay-close {
        top: 16px;
        right: 16px;
        width: 42px;
        height: 42px;
    }

    .search-overlay-form {
        flex-wrap: wrap;
        padding: 6px;
    }

    .search-overlay-input {
        width: 100%;
        padding: 12px 6px;
    }

    .search-overlay-submit {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
    }

    .search-overlay-icon {
        width: 40px;
    }
}

/* ==========================================================================
   Transaction Advisory — Interactive Planning Approach
   ========================================================================== */

.trx-approach {
    padding: 60px 0;
    background: var(--color-white);
}

.trx-approach__row {
    align-items: center;
    row-gap: 48px;
}

/* ---------- LEFT column ---------- */
.trx-approach__left {
    max-width: 520px;
}

.trx-approach__tag {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid rgba(28, 49, 170, 0.18);
    border-radius: 999px;
    font-family: var(--font-base);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--color-teal);
    text-transform: uppercase;
    margin-bottom: 26px;
    background: rgba(28, 49, 170, 0.02);
}

.trx-approach__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin: 0 0 22px;
}

.trx-approach__lead {
    font-family: var(--font-base);
    font-size: 15px;
    line-height: 1.75;
    color: #555a66;
    margin: 0 0 34px;
    max-width: 480px;
}

.trx-approach__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;
    background: var(--color-teal);
    color: var(--color-white);
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    border: 1px solid var(--color-teal);
}

.trx-approach__cta:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(167, 52, 190, 0.22);
}

/* ---------- RIGHT column: accordion ---------- */
.trx-approach__accordion {
    border-top: 1px solid rgba(26, 26, 26, 0.10);
}

.trx-approach__item {
    border-bottom: 1px solid rgba(26, 26, 26, 0.10);
    padding: 0;
}

.trx-approach__item>summary {
    list-style: none;
    cursor: pointer;
}

.trx-approach__item>summary::-webkit-details-marker {
    display: none;
}

.trx-approach__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 4px;
    transition: color 0.25s ease;
}

.trx-approach__head-title {
    font-family: var(--font-base);
    font-size: 17px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.4;
}

.trx-approach__head-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(26, 26, 26, 0.18);
    color: var(--color-text);
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.trx-approach__icon-minus {
    display: none;
}

.trx-approach__item[open] .trx-approach__head-title {
    color: var(--color-teal);
}

.trx-approach__item[open] .trx-approach__head-icon {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: var(--color-white);
    transform: rotate(180deg);
}

.trx-approach__item[open] .trx-approach__icon-plus {
    display: none;
}

.trx-approach__item[open] .trx-approach__icon-minus {
    display: inline-block;
}

.trx-approach__item:hover .trx-approach__head-icon {
    border-color: var(--color-teal);
    color: var(--color-teal);
}

.trx-approach__item[open]:hover .trx-approach__head-icon {
    color: var(--color-white);
}

.trx-approach__body {
    overflow: hidden;
    height: 0;
    transition: height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: height;
}

.trx-approach__body-inner {
    padding: 4px 4px 26px;
}

.trx-approach__body p {
    font-family: var(--font-base);
    font-size: 14.5px;
    line-height: 1.7;
    color: #555a66;
    margin: 0;
    max-width: 520px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.32s ease 0.06s, transform 0.32s ease 0.06s;
}

.trx-approach__item[open] .trx-approach__body p {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- BOTTOM: pills ---------- */
.trx-approach__pills {
    list-style: none;
    margin: 64px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
}

.trx-approach__pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 10px 12px;
    border-radius: 999px;
    background: #f5f5f7;
    border: 1px solid rgba(26, 26, 26, 0.06);
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.trx-approach__pill:hover {
    background: var(--color-white);
    border-color: rgba(28, 49, 170, 0.25);
    transform: translateY(-2px);
}

.trx-approach__pill-dot {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-teal);
    color: var(--color-white);
}

.trx-approach__pill-text {
    line-height: 1;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .trx-approach {
        padding: 48px 0;
    }

    .trx-approach__left {
        max-width: 100%;
    }

    .trx-approach__title {
        font-size: clamp(26px, 5vw, 34px);
    }
}

@media (max-width: 575.98px) {
    .trx-approach {
        padding: 40px 0;
    }

    .trx-approach__head {
        padding: 20px 2px;
    }

    .trx-approach__head-title {
        font-size: 15px;
    }

    .trx-approach__pills {
        margin-top: 44px;
        gap: 10px;
    }

    .trx-approach__pill {
        font-size: 12px;
        padding: 8px 16px 8px 10px;
    }
}

/* ==========================================================================
   Transaction Advisory — Achieving Your Vision
   ========================================================================== */

.trx-vision {
    padding: 60px 0;
    background: var(--color-white);
}

.trx-vision__row {
    align-items: stretch;
    row-gap: 20px;
    justify-content: center;
}

/* ---------- LEFT: image ---------- */
.trx-vision__image {
    position: relative;
    width: 100%;
    height: 350px;
    border-radius: 22px;
    overflow: hidden;
    background: #eef1fc;
}

.trx-vision__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s ease;
}

.trx-vision__image:hover img {
    transform: scale(1.03);
}

/* ---------- RIGHT: card ---------- */
.trx-vision__card {
    position: relative;
    width: 100%;
    height: 350px;
    padding: 26px 30px 28px;
    border-radius: 22px;
    background: #e8ecfb;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
}

.trx-vision__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(167, 52, 190, 0.10) 0%, transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(28, 49, 170, 0.08) 0%, transparent 45%);
    pointer-events: none;
    z-index: 0;
}

.trx-vision__card>* {
    position: relative;
    z-index: 1;
}

.trx-vision__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.trx-vision__tag {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.14);
    font-family: var(--font-base);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--color-teal);
    text-transform: uppercase;
    line-height: 1;
}

.trx-vision__badge {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-teal);
    color: var(--color-white);
    box-shadow: 0 8px 22px rgba(28, 49, 170, 0.20);
    transition: background 0.3s ease, transform 0.3s ease;
}

.trx-vision__card:hover .trx-vision__badge {
    background: var(--color-gold);
    transform: rotate(-8deg);
}

.trx-vision__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin: 0;
}

.trx-vision__text {
    font-family: var(--font-base);
    font-size: 13.5px;
    line-height: 1.65;
    color: #4a4f63;
    margin: auto 0 0;
    padding-top: 20px;
    max-width: 440px;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .trx-vision {
        padding: 48px 0;
    }

    .trx-vision__card,
    .trx-vision__image {
        height: 350px;
    }

    .trx-vision__card {
        padding: 22px 22px 24px;
    }

    .trx-vision__title {
        font-size: clamp(26px, 5vw, 34px);
    }
}

@media (max-width: 575.98px) {
    .trx-vision {
        padding: 40px 0;
    }

    .trx-vision__card,
    .trx-vision__image {
        height: 300px;
        border-radius: 18px;
    }

    .trx-vision__card {
        padding: 20px 18px 22px;
    }

    .trx-vision__head {
        margin-bottom: 16px;
    }

    .trx-vision__badge {
        width: 36px;
        height: 36px;
    }

    .trx-vision__text {
        padding-top: 16px;
    }
}

/* ==========================================================================
   Transaction Advisory — Our Process
   ========================================================================== */

.trx-process {
    padding: 60px 0;
    background: var(--color-white);
}

/* ---------- Head ---------- */
.trx-process__head {
    text-align: center;
    margin: 0 auto 48px;
    max-width: 760px;
}

.trx-process__tag {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid rgba(28, 49, 170, 0.18);
    border-radius: 999px;
    font-family: var(--font-base);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--color-teal);
    text-transform: uppercase;
    margin-bottom: 20px;
    background: rgba(28, 49, 170, 0.02);
}

.trx-process__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin: 0;
}

.trx-process__title em {
    font-style: italic;
    color: var(--color-gold);
}

/* ---------- Grid ---------- */
.trx-process__grid {
    align-items: stretch;
}

.trx-process__grid>[class*="col-"] {
    display: flex;
}

/* ---------- Card (outer white frame) ---------- */
.trx-process__card {
    position: relative;
    width: 100%;
    padding: 22px 18px 18px;
    border-radius: 20px;
    background: var(--color-white);
    border: 1px solid rgba(26, 26, 26, 0.08);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition:
        background-color 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease,
        transform 0.45s ease;
}

/* ---------- Top area (lime badge sits in white space) ---------- */
.trx-process__top {
    display: flex;
    align-items: center;
    padding: 14px 10px 60px;
}

.trx-process__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #1c31aa;
    color: #fff;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: background-color 0.45s ease, color 0.45s ease, transform 0.45s ease;
}

/* ---------- Inset (gray rounded panel with title + text) ---------- */
.trx-process__inset {
    margin-top: auto;
    padding: 24px 22px 26px;
    border-radius: 14px;
    background: #f3f4f6;
    display: flex;
    flex-direction: column;
    transition: background-color 0.45s ease;
}

.trx-process__card-title {
    font-family: var(--font-base);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-teal);
    margin: 0 0 48px;
    transition: color 0.45s ease;
}

.trx-process__card-text {
    font-family: var(--font-base);
    font-size: 13.5px;
    line-height: 1.65;
    color: #4b5563;
    margin: 0;
    transition: color 0.45s ease;
}

/* ---------- Hover state: smooth lime takeover ---------- */
.trx-process__card:hover {
    background-color: #1c31aa;
    border-color: #1c31aa;
    box-shadow: 0 18px 36px -16px rgba(132, 178, 30, 0.45);
    transform: translateY(-4px);
}

.trx-process__card:hover .trx-process__num {
    background-color: var(--color-white);
    color: var(--color-text);
    transform: scale(1.04);
}

.trx-process__card:hover .trx-process__inset {
    background-color: #fff;
}

.trx-process__card:hover .trx-process__card-title {
    color: var(--color-teal);
}

.trx-process__card:hover .trx-process__card-text {
    color: var(--color-text);
}

/* ---------- Bottom CTA ---------- */
.trx-process__cta-wrap {
    text-align: center;
    margin-top: 48px;
}

.trx-process__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 24px;
    border-radius: 999px;
    background: var(--color-teal);
    color: var(--color-white);
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.trx-process__cta:hover {
    background: var(--color-gold);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(167, 52, 190, 0.25);
}

.trx-process__cta-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: var(--color-white);
    transition: background 0.3s ease, transform 0.3s ease;
}

.trx-process__cta:hover .trx-process__cta-icon {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(-8deg);
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .trx-process {
        padding: 48px 0;
    }

    .trx-process__head {
        margin-bottom: 36px;
    }

    .trx-process__num {
        margin-bottom: 26px;
    }
}

@media (max-width: 575.98px) {
    .trx-process {
        padding: 40px 0;
    }

    .trx-process__title {
        font-size: clamp(26px, 5vw, 34px);
    }

    .trx-process__card {
        padding: 22px 20px;
    }

    .trx-process__num {
        margin-bottom: 22px;
    }

    .trx-process__cta-wrap {
        margin-top: 36px;
    }
}

/* ==========================================================================
   Transaction Advisory — You'll Know What Steps to Take
   ========================================================================== */

.trx-steps {
    padding: 60px 0;
    background: var(--color-white);
}

.trx-steps__wrap {
    width: 100%;
    padding: 0px;
}

.trx-steps__inner {
    position: relative;
    width: 100%;
    min-height: 600px;
    overflow: hidden;
    isolation: isolate;
}

.trx-steps__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* ---------- Floating card ---------- */
.trx-steps__card {
    position: absolute;
    left: 32px;
    bottom: 32px;
    z-index: 2;
    width: min(440px, calc(100% - 64px));
    padding: 26px 28px 22px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 55%, rgba(167, 52, 190, 0.22) 130%);
    box-shadow: 0 24px 50px -16px rgba(28, 49, 170, 0.25);
}

.trx-steps__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.trx-steps__tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(28, 49, 170, 0.08);
    font-family: var(--font-base);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--color-teal);
    text-transform: uppercase;
    line-height: 1;
}

.trx-steps__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-gold);
    color: var(--color-white);
    transition: transform 0.4s ease, background 0.4s ease;
}

.trx-steps__card:hover .trx-steps__icon {
    transform: rotate(90deg);
}

.trx-steps__title {
    font-family: var(--font-base);
    font-weight: 600;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--color-teal);
    margin: 0 0 22px;
}

/* ---------- Highlight chip with typing animation ---------- */
.trx-steps__title-hl {
    display: inline-block;
    padding: 2px 10px;
    background: var(--color-gold);
    border-radius: 6px;
    color: var(--color-white);
    vertical-align: bottom;
    line-height: 1.18;
    position: relative;
}

.trx-steps__title-hl-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
    /* Before JS measures, render natural width (no animation). */
}

.trx-steps__title-hl-text.is-typing {
    width: 0;
    border-right: 2px solid var(--color-white);
    animation:
        trx-typing 4.6s steps(var(--trx-typing-steps, 13), end) infinite,
        trx-caret 0.7s step-end infinite;
}

@keyframes trx-typing {
    0% {
        width: 0;
    }

    40% {
        width: var(--trx-typing-width, 0);
    }

    78% {
        width: var(--trx-typing-width, 0);
    }

    96% {
        width: 0;
    }

    100% {
        width: 0;
    }
}

@keyframes trx-caret {
    50% {
        border-right-color: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trx-steps__title-hl-text.is-typing {
        width: var(--trx-typing-width, auto);
        animation: none;
        border-right-color: transparent;
    }
}

.trx-steps__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.trx-steps__text {
    font-family: var(--font-base);
    font-size: 12.5px;
    line-height: 1.55;
    color: #4b5563;
    margin: 0;
    flex: 1 1 200px;
}

.trx-steps__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--color-teal);
    color: var(--color-white);
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.trx-steps__cta:hover {
    background: var(--color-gold);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(167, 52, 190, 0.25);
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .trx-steps {
        padding: 48px 0;
    }

    .trx-steps__wrap {
        padding: 0 16px;
    }

    .trx-steps__inner {
        min-height: 420px;
    }

    .trx-steps__card {
        left: 24px;
        bottom: 24px;
        padding: 22px 22px 20px;
        width: min(380px, calc(100% - 48px));
    }
}

@media (max-width: 575.98px) {
    .trx-steps {
        padding: 40px 0;
    }

    .trx-steps__wrap {
        padding: 0 10px;
    }

    .trx-steps__inner {
        min-height: 380px;
        border-radius: 18px;
    }

    .trx-steps__card {
        left: 14px;
        right: 14px;
        bottom: 14px;
        width: auto;
        padding: 18px 18px 16px;
        border-radius: 14px;
    }

    .trx-steps__title {
        font-size: 19px;
        margin-bottom: 16px;
    }

    .trx-steps__icon {
        width: 34px;
        height: 34px;
    }

    .trx-steps__cta {
        padding: 10px 18px;
        font-size: 12px;
    }
}

/* ==========================================================================
   Transaction Advisory — Our services + sectors we serve
   ========================================================================== */

.trx-sectors {
    position: relative;
    background: var(--color-white);
    padding: 60px 0;
    overflow: hidden;
}

/* ---------- Top head (white area) ---------- */
.trx-sectors__head {
    position: relative;
    z-index: 2;
    padding-bottom: 0;
}

.trx-sectors__tag {
    display: block;
    font-family: var(--font-base);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: 40px;
}

.trx-sectors__row {
    align-items: flex-start;
    row-gap: 36px;
}

.trx-sectors__title {
    font-family: var(--font-base);
    font-weight: 500;
    font-size: clamp(22px, 1.8vw, 28px);
    line-height: 1.55;
    letter-spacing: -0.005em;
    color: var(--color-text);
    margin: 0;
    max-width: 500px;
}

/* ---------- Brand teal card (right) ---------- */
.trx-sectors__card {
    position: relative;
    z-index: 2;
    background: var(--color-teal);
    color: var(--color-white);
    border-radius: 8px;
    padding: 32px 36px 34px;
    margin-bottom: -140px;
    /* overlaps the image below */
    box-shadow: 0 36px 70px -28px rgba(28, 49, 170, 0.45);
}

.trx-sectors__card-lead {
    font-family: var(--font-base);
    font-size: 13.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.94);
    margin: 0 0 22px;
}

.trx-sectors__card-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
    margin: 0 0 22px;
}

.trx-sectors__card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-base);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-white);
    margin: 0 0 20px;
}

.trx-sectors__card-title-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--color-white);
}

.trx-sectors__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
}

.trx-sectors__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-base);
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.94);
}

.trx-sectors__dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-white);
    display: inline-block;
}

/* ---------- Image strip ---------- */
.trx-sectors__image {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: 48px;
    /* clear gap between heading and image */
    height: 420px;
    overflow: hidden;
}

.trx-sectors__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .trx-sectors {
        padding: 48px 0;
    }

    .trx-sectors__tag {
        margin-bottom: 28px;
    }

    .trx-sectors__title {
        font-size: clamp(20px, 4vw, 24px);
        line-height: 1.5;
    }

    .trx-sectors__card {
        padding: 26px 24px 28px;
        margin-bottom: -100px;
    }

    .trx-sectors__image {
        height: 300px;
        margin-top: 32px;
    }
}

@media (max-width: 575.98px) {
    .trx-sectors {
        padding: 40px 0;
    }

    .trx-sectors__tag {
        margin-bottom: 22px;
    }

    .trx-sectors__title {
        font-size: 18px;
        line-height: 1.5;
    }

    .trx-sectors__card {
        padding: 22px 20px 24px;
        margin-bottom: -70px;
    }

    .trx-sectors__list {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .trx-sectors__image {
        height: 220px;
        margin-top: 20px;
    }
}

/* ==========================================================================
   Transaction Advisory — FAQ
   ========================================================================== */

.trx-faq {
    padding: 60px 0;
    background: #f5f5f3;
}

.trx-faq__row {
    align-items: flex-start;
}

/* ---------- LEFT: tag + title ---------- */
.trx-faq__left {
    position: sticky;
    top: 100px;
}

.trx-faq__tag {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 999px;
    background: var(--color-teal);
    color: var(--color-white);
    font-family: var(--font-base);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 22px;
    line-height: 1;
}

.trx-faq__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--color-text);
    margin: 0;
}

/* ---------- RIGHT: accordion ---------- */
.trx-faq__accordion {
    border-top: 1px solid rgba(26, 26, 26, 0.10);
}

.trx-faq__item {
    border-bottom: 1px solid rgba(26, 26, 26, 0.10);
}

.trx-faq__item>summary {
    list-style: none;
    cursor: pointer;
}

.trx-faq__item>summary::-webkit-details-marker {
    display: none;
}

.trx-faq__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 4px;
    transition: color 0.25s ease;
}

.trx-faq__q {
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.45;
    transition: color 0.25s ease;
}

.trx-faq__toggle {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    transition: color 0.25s ease, transform 0.3s ease;
}

.trx-faq__icon-minus {
    display: none;
}

.trx-faq__item[open] .trx-faq__q {
    color: var(--color-teal);
}

.trx-faq__item[open] .trx-faq__toggle {
    color: var(--color-teal);
    transform: rotate(180deg);
}

.trx-faq__item[open] .trx-faq__icon-plus {
    display: none;
}

.trx-faq__item[open] .trx-faq__icon-minus {
    display: inline-block;
}

.trx-faq__item:hover .trx-faq__q {
    color: var(--color-teal);
}

.trx-faq__body {
    overflow: hidden;
    height: 0;
    transition: height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: height;
}

.trx-faq__body-inner {
    padding: 0 4px 24px;
}

.trx-faq__body p {
    font-family: var(--font-base);
    font-size: 14px;
    line-height: 1.7;
    color: #555a66;
    margin: 0;
    max-width: 620px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.32s ease 0.06s, transform 0.32s ease 0.06s;
}

.trx-faq__item[open] .trx-faq__body p {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .trx-faq {
        padding: 48px 0;
    }

    .trx-faq__left {
        position: static;
        margin-bottom: 8px;
    }

    .trx-faq__title {
        font-size: clamp(26px, 5vw, 34px);
    }
}

@media (max-width: 575.98px) {
    .trx-faq {
        padding: 40px 0;
    }

    .trx-faq__head {
        padding: 18px 2px;
    }

    .trx-faq__q {
        font-size: 14px;
    }
}

/* ==========================================================================
   Transaction Advisory (India) — Footer CTA
   ========================================================================== */

.trx-footer-cta {
    padding: 60px 0;
    background: var(--color-white);
}

.trx-footer-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
    padding: 56px 28px;
    border-radius: 24px;
    background: var(--color-teal);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.trx-footer-cta__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(167, 52, 190, 0.30) 0%, transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.08) 0%, transparent 55%);
    pointer-events: none;
    z-index: -1;
}

.trx-footer-cta__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-white);
    margin: 0;
    max-width: 720px;
}

.trx-footer-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-teal);
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.trx-footer-cta__btn:hover {
    background: var(--color-gold);
    color: var(--color-white);
    transform: translateY(-2px);
}

.trx-footer-cta__icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(28, 49, 170, 0.10);
    color: var(--color-teal);
    transition: background 0.3s ease, color 0.3s ease;
}

.trx-footer-cta__btn:hover .trx-footer-cta__icon {
    background: rgba(255, 255, 255, 0.18);
    color: var(--color-white);
}

@media (max-width: 991.98px) {
    .trx-footer-cta {
        padding: 48px 0;
    }

    .trx-footer-cta__inner {
        padding: 44px 24px;
        gap: 22px;
    }
}

@media (max-width: 575.98px) {
    .trx-footer-cta {
        padding: 40px 0;
    }

    .trx-footer-cta__inner {
        padding: 36px 20px;
        border-radius: 18px;
    }
}

/* ==========================================================================
   Static dummy pages — shared utilities
   Used by Insights, Market Reports, Media & Press, Events, Case Studies,
   Leadership Team, Careers, Technology, Corridor, Partners, Sectors, Legal.
   ========================================================================== */

.static-section {
    padding: 88px 0;
    background: var(--color-white);
}

.static-section--muted {
    background: #faf8fb;
}

.static-section-head {
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
}

.static-section-head--row {
    max-width: 100%;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.static-eyebrow {
    display: inline-block;
    color: var(--color-gold);
    text-transform: uppercase;
    letter-spacing: 3.5px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 14px;
}

.static-eyebrow--light {
    color: rgba(255, 255, 255, 0.85);
}

.static-section-title {
    font-family: var(--font-display);
    font-size: 42px;
    line-height: 1.15;
    margin: 0 0 16px;
    color: var(--color-text);
    letter-spacing: 0.5px;
    font-weight: 700;
}

.static-section-lead {
    color: #5a5a6a;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

/* Pills, chips, links */

.static-pill {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    padding: 5px 12px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--color-gold);
    background: rgba(167, 52, 190, 0.08);
    border: 1px solid rgba(167, 52, 190, 0.18);
    border-radius: 999px;
}

.static-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 7px;
    opacity: 0.7;
    flex-shrink: 0;
}

.static-chip {
    display: inline-block;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #5a5a6a;
    background: transparent;
    border: 1px solid rgba(28, 49, 170, 0.18);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.static-chip:hover {
    color: var(--color-teal);
    border-color: var(--color-teal);
}

.static-chip.is-active {
    color: var(--color-white);
    background: var(--color-teal);
    border-color: var(--color-teal);
}

.static-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.static-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-gold);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}

.static-link:hover {
    color: var(--color-teal);
    gap: 10px;
}

.static-link--back svg {
    margin-right: 4px;
}

.static-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-gold);
    border: 1px solid rgba(167, 52, 190, 0.2);
    text-decoration: none;
    transition: all 0.2s ease;
}

.static-icon-btn:hover {
    background: var(--color-gold);
    color: var(--color-white);
    border-color: var(--color-gold);
}

/* Buttons */

.static-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-decoration: none;
    border-radius: 2px;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1;
    transition: all 0.25s ease;
}

.static-btn--primary {
    background: var(--color-gold);
    color: var(--color-white);
    border-color: var(--color-gold);
    box-shadow: 0 8px 20px -8px rgba(167, 52, 190, 0.5);
}

.static-btn--primary:hover {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: var(--color-white);
    transform: translateY(-2px);
}

.static-btn--ghost {
    background: transparent;
    color: var(--color-teal);
    border-color: rgba(28, 49, 170, 0.3);
}

.static-btn--ghost:hover {
    color: var(--color-white);
    background: var(--color-teal);
    border-color: var(--color-teal);
}

.static-btn--light {
    background: var(--color-white);
    color: var(--color-teal);
    border-color: var(--color-white);
}

.static-btn--light:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-teal);
    transform: translateY(-2px);
}

.static-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

/* Tiles (insights landing categories) */

.static-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 32px 28px;
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.1);
    border-radius: 4px;
    text-decoration: none;
    color: var(--color-text);
    transition: all 0.25s ease;
}

.static-tile:hover {
    border-color: var(--color-gold);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px -16px rgba(167, 52, 190, 0.25);
    color: var(--color-text);
}

.static-tile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.static-tile-count {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    color: var(--color-gold);
    line-height: 1;
}

.static-tile-arrow {
    color: var(--color-teal);
    transition: transform 0.25s ease;
}

.static-tile:hover .static-tile-arrow {
    transform: translate(3px, -3px);
}

.static-tile-title {
    font-family: var(--font-display);
    font-size: 22px;
    margin: 0 0 8px;
    font-weight: 700;
}

.static-tile-text {
    font-size: 14px;
    line-height: 1.6;
    color: #5a5a6a;
    margin: 0;
}

/* Feature blocks */

.static-feature {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 28px 24px;
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.08);
    border-radius: 4px;
}

.static-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(167, 52, 190, 0.1);
    color: var(--color-gold);
}

.static-feature-title {
    font-family: var(--font-display);
    font-size: 18px;
    margin: 0;
    font-weight: 700;
}

.static-feature-text {
    font-size: 14px;
    line-height: 1.65;
    color: #5a5a6a;
    margin: 0;
}

/* Stat cells */

.static-stat-cell {
    padding: 24px 20px;
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.08);
    border-radius: 4px;
}

.static-stat-cell-value {
    display: block;
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--color-gold);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
}

.static-stat-cell-label {
    display: block;
    font-size: 13px;
    color: #5a5a6a;
}

.static-stat-band {
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.static-stat-band--dark {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: var(--color-white);
}

.static-stat-band-cell {
    padding: 32px 24px;
    text-align: center;
    border-right: 1px solid rgba(28, 49, 170, 0.1);
    border-bottom: 1px solid rgba(28, 49, 170, 0.1);
}

.static-stat-band--dark .static-stat-band-cell {
    border-color: rgba(255, 255, 255, 0.12);
}

.static-stat-band-value {
    display: block;
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    color: var(--color-gold);
    line-height: 1;
    margin-bottom: 8px;
}

.static-stat-band--dark .static-stat-band-value {
    color: var(--color-white);
}

.static-stat-band-label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.4px;
    color: #5a5a6a;
}

.static-stat-band--dark .static-stat-band-label {
    color: rgba(255, 255, 255, 0.85);
}

/* CTA band */

.static-cta-band {
    background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-gold) 100%);
    color: var(--color-white);
    padding: 48px 40px;
    border-radius: 4px;
}

.static-cta-band-title {
    font-family: var(--font-display);
    font-size: 30px;
    margin: 0 0 8px;
    color: var(--color-white);
    font-weight: 700;
}

.static-cta-band-text {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

.static-cta-band-form {
    display: flex;
    background: var(--color-white);
    border-radius: 2px;
    overflow: hidden;
    padding: 6px;
}

.static-cta-band-form input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 12px 14px;
    font-size: 14px;
    outline: none;
    color: var(--color-text);
}

.static-cta-band-form button {
    padding: 12px 22px;
    background: var(--color-teal);
    color: var(--color-white);
    border: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.static-cta-band-form button:hover {
    background: #142387;
}

/* Image frame (technology page) */

.static-image-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    box-shadow: 0 20px 50px -20px rgba(28, 49, 170, 0.4);
}

/* Promo cards (partners landing) */

.static-promo {
    display: block;
    padding: 40px 36px;
    background: var(--color-white);
    border: 1px solid rgba(167, 52, 190, 0.15);
    border-radius: 4px;
    color: var(--color-text);
    text-decoration: none;
    transition: all 0.25s ease;
    height: 100%;
}

.static-promo:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px -16px rgba(167, 52, 190, 0.3);
    color: var(--color-text);
    border-color: var(--color-gold);
}

.static-promo--alt {
    background: linear-gradient(135deg, rgba(28, 49, 170, 0.04) 0%, rgba(167, 52, 190, 0.06) 100%);
}

.static-promo-title {
    font-family: var(--font-display);
    font-size: 26px;
    margin: 0 0 12px;
    font-weight: 700;
}

.static-promo-text {
    color: #5a5a6a;
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 20px;
}

/* Logo wall */

.static-logo-wall {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: rgba(28, 49, 170, 0.1);
    border: 1px solid rgba(28, 49, 170, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.static-logo-wall-cell {
    background: var(--color-white);
    padding: 32px 20px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 16px;
    color: #6a6a78;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.static-logo-wall-cell:hover {
    color: var(--color-teal);
}

/* Steps */

.static-step {
    position: relative;
    padding: 28px 24px;
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.08);
    border-radius: 4px;
    height: 100%;
}

.static-step-num {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--color-gold);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 12px;
}

.static-step-title {
    font-family: var(--font-display);
    font-size: 20px;
    margin: 0 0 8px;
    font-weight: 700;
}

.static-step-text {
    font-size: 14px;
    line-height: 1.65;
    color: #5a5a6a;
    margin: 0;
}

.static-stepline {
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
}

.static-stepline li {
    display: flex;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(28, 49, 170, 0.08);
}

.static-stepline li:last-child {
    border-bottom: 0;
}

.static-stepline-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(167, 52, 190, 0.1);
    color: var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: var(--font-display);
}

.static-stepline h3 {
    font-family: var(--font-display);
    font-size: 17px;
    margin: 0 0 4px;
    font-weight: 700;
}

.static-stepline p {
    font-size: 13.5px;
    color: #5a5a6a;
    margin: 0;
    line-height: 1.6;
}

/* Timeline */

.static-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.static-timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: rgba(167, 52, 190, 0.2);
}

.static-timeline li {
    position: relative;
    padding: 0 0 36px 44px;
}

.static-timeline li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-gold);
    box-shadow: 0 0 0 4px rgba(167, 52, 190, 0.15);
}

.static-timeline-year {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--color-teal);
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.static-timeline h3 {
    font-family: var(--font-display);
    font-size: 19px;
    margin: 0 0 6px;
    font-weight: 700;
}

.static-timeline p {
    font-size: 14px;
    color: #5a5a6a;
    margin: 0;
    line-height: 1.6;
}

/* Doc list / form helpers */

.static-doc-list {
    padding-left: 20px;
    margin: 0 0 16px;
}

.static-doc-list li {
    font-size: 14.5px;
    line-height: 1.75;
    color: #3a3a48;
    margin-bottom: 6px;
}

.static-doc-list--compact li {
    margin-bottom: 10px;
    font-size: 15px;
}

.static-doc-list--ordered {
    list-style: decimal;
}

/* Static document (legal pages) */

.static-doc {
    padding: 88px 0;
    background: var(--color-white);
}

.static-doc-aside {
    position: sticky;
    top: 100px;
    padding: 28px 24px;
    border: 1px solid rgba(28, 49, 170, 0.1);
    border-radius: 4px;
    background: #faf8fb;
}

.static-doc-toc {
    list-style: none;
    padding: 0;
    margin: 12px 0 20px;
}

.static-doc-toc li {
    margin-bottom: 8px;
}

.static-doc-toc a {
    color: #3a3a48;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.static-doc-toc a:hover {
    color: var(--color-gold);
}

.static-doc-meta {
    font-size: 12.5px;
    color: #6a6a78;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(28, 49, 170, 0.1);
}

.static-doc-body section {
    margin-bottom: 36px;
}

.static-doc-body h2 {
    font-family: var(--font-display);
    font-size: 26px;
    margin: 0 0 14px;
    font-weight: 700;
    color: var(--color-text);
}

.static-doc-body p {
    font-size: 15px;
    line-height: 1.75;
    color: #3a3a48;
    margin: 0 0 12px;
}

.static-doc-body a {
    color: var(--color-gold);
    text-decoration: underline;
}

.static-doc-table {
    overflow-x: auto;
    border: 1px solid rgba(28, 49, 170, 0.1);
    border-radius: 4px;
}

.static-doc-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.static-doc-table th,
.static-doc-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(28, 49, 170, 0.08);
}

.static-doc-table th {
    background: #faf8fb;
    color: var(--color-text);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
}

.static-doc-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Forms */

.static-form label {
    display: block;
    font-size: 12.5px;
    color: #5a5a6a;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}

.static-form input,
.static-form select,
.static-form textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.18);
    border-radius: 2px;
    font-family: var(--font-base);
    font-size: 14px;
    color: var(--color-text);
    outline: none;
    margin-top: 6px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.static-form input:focus,
.static-form select:focus,
.static-form textarea:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(167, 52, 190, 0.1);
}

.static-form textarea {
    resize: vertical;
    min-height: 100px;
}

.static-form button[type="submit"] {
    margin-top: 24px;
}

.static-form--card {
    padding: 36px 32px;
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.1);
    border-radius: 4px;
}

.static-form-title {
    font-family: var(--font-display);
    font-size: 24px;
    margin: 0 0 24px;
    font-weight: 700;
}

.static-form-section {
    margin-bottom: 28px;
}

.static-form-section h4 {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--color-teal);
    margin: 0 0 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.static-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13.5px;
    color: #5a5a6a;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.static-checkbox input {
    width: auto;
    margin: 3px 0 0;
}

/* Pagination */

.static-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 48px;
}

.static-pagination-page,
.static-pagination-prev,
.static-pagination-next,
.static-pagination-gap {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-white);
    text-decoration: none;
    border: 1px solid rgba(28, 49, 170, 0.15);
    line-height: 1;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.static-pagination-page:hover,
.static-pagination-prev:hover,
.static-pagination-next:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
    background: rgba(167, 52, 190, 0.04);
}

.static-pagination .is-active,
.static-pagination-page.is-active {
    background: var(--color-gold);
    color: var(--color-white);
    border-color: var(--color-gold);
    box-shadow: 0 6px 16px -6px rgba(167, 52, 190, 0.55);
    cursor: default;
    pointer-events: none;
}

.static-pagination-prev svg,
.static-pagination-next svg {
    color: currentColor;
}

.static-pagination-gap {
    border: 0;
    color: #6a6a78;
    background: transparent;
    font-weight: 400;
}

.static-pagination .is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--color-white);
}

.static-pagination-info {
    text-align: center;
    font-size: 13px;
    color: #6a6a78;
    margin: 16px 0 0;
    letter-spacing: 0.2px;
}

.static-pagination-info strong {
    color: var(--color-text);
    font-weight: 600;
}

/* ==========================================================================
   Insights featured + articles
   ========================================================================== */

.insights-featured {
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.insights-featured-art {
    width: 100%;
    height: 100%;
    min-height: 360px;
    background-size: cover;
    background-position: center;
}

.insights-featured-body {
    padding: 48px 40px;
}

.insights-featured-title {
    font-family: var(--font-display);
    font-size: 30px;
    margin: 12px 0 14px;
    font-weight: 700;
    line-height: 1.2;
}

.insights-featured-text {
    color: #5a5a6a;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 20px;
}

.insights-featured-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: #6a6a78;
}

.insights-featured-meta li::after {
    content: '·';
    margin-left: 16px;
    color: #c5c5d0;
}

.insights-featured-meta li:last-child::after {
    content: '';
}

.static-article {
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.08);
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.static-article:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px -16px rgba(28, 49, 170, 0.2);
}

.static-article-art {
    width: 100%;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
}

.static-article-body {
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.static-article-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #6a6a78;
}

.static-article-title {
    font-family: var(--font-display);
    font-size: 18px;
    margin: 0 0 14px;
    line-height: 1.35;
    font-weight: 700;
    flex: 1;
}

.static-article-title a {
    color: var(--color-text);
    text-decoration: none;
}

.static-article-title a:hover {
    color: var(--color-gold);
}

.static-article-foot {
    font-size: 12.5px;
    color: #6a6a78;
    margin: 0;
}

/* ==========================================================================
   Report cards
   ========================================================================== */

.report-card {
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.08);
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.report-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px -16px rgba(28, 49, 170, 0.2);
}

.report-card-art {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
}

.report-card-body {
    padding: 24px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.report-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #6a6a78;
}

.report-card-title {
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 1.35;
    margin: 0 0 10px;
    font-weight: 700;
}

.report-card-title a {
    color: var(--color-text);
    text-decoration: none;
}

.report-card-title a:hover {
    color: var(--color-gold);
}

.report-card-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: #5a5a6a;
    margin: 0 0 16px;
    flex: 1;
}

/* Report show */

.report-show-hero {
    width: 100%;
    aspect-ratio: 16 / 7;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    margin-bottom: 24px;
}

.report-show-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-bottom: 28px;
    font-size: 13px;
    color: #6a6a78;
}

.report-show-body h2 {
    font-family: var(--font-display);
    font-size: 26px;
    margin: 32px 0 14px;
    font-weight: 700;
}

.report-show-body p {
    font-size: 15px;
    line-height: 1.75;
    color: #3a3a48;
    margin: 0 0 14px;
}

.report-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin: 28px 0;
}

.report-stat {
    padding: 20px 18px;
    background: #faf8fb;
    border-radius: 4px;
    border: 1px solid rgba(28, 49, 170, 0.06);
}

.report-stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--color-gold);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
}

.report-stat-label {
    display: block;
    font-size: 12px;
    color: #5a5a6a;
}

.report-show-aside {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.report-download-card {
    padding: 28px 24px;
    background: var(--color-teal);
    color: var(--color-white);
    border-radius: 4px;
}

.report-download-card h3 {
    font-family: var(--font-display);
    font-size: 20px;
    margin: 0 0 6px;
    color: var(--color-white);
    font-weight: 700;
}

.report-download-card p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13.5px;
    margin: 0 0 18px;
}

.report-download-card input,
.report-download-card textarea {
    width: 100%;
    padding: 11px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    font-size: 14px;
    border-radius: 2px;
    margin-bottom: 10px;
    outline: none;
    font-family: var(--font-base);
}

.report-download-card input::placeholder,
.report-download-card textarea::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.report-download-card .static-btn--primary {
    width: 100%;
    justify-content: center;
    background: var(--color-gold);
    border-color: var(--color-gold);
    margin-top: 6px;
}

.report-show-related {
    padding: 24px 22px;
    background: #faf8fb;
    border-radius: 4px;
    border: 1px solid rgba(28, 49, 170, 0.08);
}

.report-show-related h4 {
    font-family: var(--font-display);
    font-size: 16px;
    margin: 0 0 12px;
    font-weight: 700;
}

.report-show-related ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.report-show-related li {
    margin-bottom: 8px;
}

.report-show-related a {
    color: #3a3a48;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.report-show-related a:hover {
    color: var(--color-gold);
}

.report-show-author {
    padding: 22px 22px;
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.08);
    border-radius: 4px;
}

.report-show-author hr {
    border: 0;
    border-top: 1px solid rgba(28, 49, 170, 0.08);
    margin: 14px 0;
}

.report-show-author-name {
    font-family: var(--font-display);
    font-size: 16px;
    margin: 8px 0 2px;
    font-weight: 700;
    color: var(--color-text);
}

.report-show-author-role {
    font-size: 13px;
    color: #6a6a78;
    margin: 0;
}

/* ==========================================================================
   Press list
   ========================================================================== */

.press-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.press-row {
    display: flex;
    gap: 28px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(28, 49, 170, 0.08);
    align-items: flex-start;
}

.press-row:first-child {
    border-top: 1px solid rgba(28, 49, 170, 0.08);
}

.press-row-date {
    flex-shrink: 0;
    width: 80px;
    text-align: center;
    padding-top: 4px;
}

.press-row-day {
    display: block;
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--color-gold);
    line-height: 1;
    font-weight: 700;
}

.press-row-mon {
    display: block;
    font-size: 11px;
    color: #6a6a78;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

.press-row-body {
    flex: 1;
    min-width: 0;
}

.press-row-title {
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.35;
    margin: 10px 0 8px;
    font-weight: 700;
}

.press-row-title a {
    color: var(--color-text);
    text-decoration: none;
}

.press-row-title a:hover {
    color: var(--color-gold);
}

.press-row-text {
    font-size: 14px;
    color: #5a5a6a;
    margin: 0;
    line-height: 1.6;
}

.press-row-cta {
    flex-shrink: 0;
    align-self: center;
}

.press-coverage {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px 24px;
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.08);
    border-radius: 4px;
    text-decoration: none;
    color: var(--color-text);
    transition: all 0.25s ease;
}

.press-coverage:hover {
    border-color: var(--color-gold);
    transform: translateY(-3px);
    color: var(--color-text);
}

.press-coverage-outlet {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-gold);
    margin-bottom: 12px;
    letter-spacing: 0.3px;
}

.press-coverage-title {
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text);
    flex: 1;
    margin: 0 0 16px;
    font-weight: 500;
}

.press-coverage-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    color: #6a6a78;
}

/* ==========================================================================
   Events
   ========================================================================== */

.event-featured {
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.event-featured-art {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 380px;
    background-size: cover;
    background-position: center;
}

.event-featured-live {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 12px;
    background: var(--color-gold);
    color: var(--color-white);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    border-radius: 2px;
}

.event-featured-body {
    padding: 48px 40px;
}

.event-featured-date {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 18px;
    background: rgba(167, 52, 190, 0.08);
    border-radius: 4px;
    margin-bottom: 20px;
}

.event-featured-day {
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1;
    color: var(--color-gold);
    font-weight: 700;
}

.event-featured-mon {
    font-size: 12px;
    color: var(--color-teal);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

.event-featured-title {
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1.25;
    margin: 0 0 12px;
    font-weight: 700;
}

.event-featured-text {
    color: #5a5a6a;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 20px;
}

.event-featured-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13.5px;
    color: #3a3a48;
}

.event-featured-meta li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.event-featured-meta svg {
    color: var(--color-gold);
}

.event-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.event-row {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 24px;
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.08);
    border-radius: 4px;
    margin-bottom: 12px;
}

.event-row-date {
    flex-shrink: 0;
    width: 76px;
    text-align: center;
    padding: 14px 8px;
    background: #faf8fb;
    border-radius: 4px;
}

.event-row-date span {
    display: block;
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1;
    color: var(--color-gold);
    font-weight: 700;
}

.event-row-date small {
    display: block;
    font-size: 11px;
    color: var(--color-teal);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 4px;
}

.event-row-body {
    flex: 1;
    min-width: 0;
}

.event-row-title {
    font-family: var(--font-display);
    font-size: 18px;
    margin: 8px 0 4px;
    font-weight: 700;
}

.event-row-meta {
    font-size: 13px;
    color: #6a6a78;
    margin: 0;
}

.event-row-sep {
    margin: 0 8px;
    color: #c5c5d0;
}

.event-row-cta {
    flex-shrink: 0;
}

.event-replay {
    display: block;
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.25s ease;
}

.event-replay:hover {
    transform: translateY(-3px);
    color: var(--color-text);
}

.event-replay-art {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    margin-bottom: 14px;
    overflow: hidden;
}

.event-replay-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.45) 100%);
}

.event-replay-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: transform 0.2s ease;
}

.event-replay:hover .event-replay-play {
    transform: translate(-50%, -50%) scale(1.1);
}

.event-replay-len {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.65);
    color: var(--color-white);
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 2px;
}

.event-replay-body h3 {
    font-family: var(--font-display);
    font-size: 17px;
    margin: 0 0 4px;
    font-weight: 700;
}

.event-replay-body span {
    font-size: 12.5px;
    color: #6a6a78;
}

.event-show-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    margin-bottom: 24px;
}

.event-show-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-bottom: 28px;
    font-size: 13px;
    color: #6a6a78;
}

.event-show-body h2 {
    font-family: var(--font-display);
    font-size: 26px;
    margin: 32px 0 14px;
    font-weight: 700;
}

.event-show-body p {
    font-size: 15px;
    line-height: 1.75;
    color: #3a3a48;
    margin: 0 0 14px;
}

/* ==========================================================================
   Case cards (index)
   ========================================================================== */

.case-card {
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.08);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-text);
    height: 100%;
    transition: all 0.25s ease;
}

.case-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px -16px rgba(28, 49, 170, 0.2);
    color: var(--color-text);
}

.case-card-art {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
}

.case-card-stat {
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-gold);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    border-radius: 2px;
}

.case-card-body {
    padding: 22px 22px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.case-card-title {
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 1.35;
    margin: 12px 0 6px;
    font-weight: 700;
}

.case-card-sub {
    color: #6a6a78;
    font-size: 13.5px;
    margin: 0 0 14px;
    flex: 1;
}

/* ==========================================================================
   People (leadership)
   ========================================================================== */

.people-card {
    display: block;
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.08);
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text);
    transition: all 0.25s ease;
    height: 100%;
}

.people-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px -16px rgba(28, 49, 170, 0.2);
    color: var(--color-text);
}

.people-card-art {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center top;
}

.people-card-region {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-teal);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    border-radius: 999px;
}

.people-card-body {
    padding: 18px 18px 22px;
}

.people-card-name {
    font-family: var(--font-display);
    font-size: 17px;
    margin: 0 0 4px;
    font-weight: 700;
}

.people-card-role {
    font-size: 13px;
    color: #6a6a78;
    margin: 0;
    line-height: 1.4;
}

.people-card--mini .people-card-art {
    aspect-ratio: 4 / 5;
}

/* Person show */

.person-side {
    position: sticky;
    top: 100px;
}

.person-side-art {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    margin-bottom: 20px;
}

.person-side-name {
    font-family: var(--font-display);
    font-size: 24px;
    margin: 0 0 4px;
    font-weight: 700;
}

.person-side-role {
    font-size: 14px;
    color: var(--color-gold);
    margin: 0 0 20px;
    font-weight: 500;
}

.person-side-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    border-top: 1px solid rgba(28, 49, 170, 0.1);
}

.person-side-meta li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(28, 49, 170, 0.08);
    font-size: 13.5px;
    color: #3a3a48;
}

.person-side-meta strong {
    color: #6a6a78;
    font-weight: 600;
    margin-right: 8px;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.person-side-social {
    display: flex;
    gap: 10px;
}

.person-side-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(167, 52, 190, 0.1);
    color: var(--color-gold);
    transition: all 0.2s ease;
}

.person-side-social a:hover {
    background: var(--color-gold);
    color: var(--color-white);
}

.person-body h2 {
    font-family: var(--font-display);
    font-size: 24px;
    margin: 28px 0 12px;
    font-weight: 700;
}

.person-body h2:first-child {
    margin-top: 0;
}

.person-body p {
    font-size: 15px;
    line-height: 1.75;
    color: #3a3a48;
    margin: 0 0 14px;
}

/* ==========================================================================
   Careers (jobs)
   ========================================================================== */

.job-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.job-row {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 24px 28px;
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.08);
    border-radius: 4px;
    margin-bottom: 12px;
    transition: all 0.25s ease;
}

.job-row:hover {
    border-color: var(--color-gold);
    transform: translateX(4px);
}

.job-row-body {
    flex: 1;
    min-width: 0;
}

.job-row-title {
    font-family: var(--font-display);
    font-size: 20px;
    margin: 10px 0 6px;
    font-weight: 700;
}

.job-row-title a {
    color: var(--color-text);
    text-decoration: none;
}

.job-row-title a:hover {
    color: var(--color-gold);
}

.job-row-meta {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 13px;
    color: #6a6a78;
}

.job-row-meta li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.job-row-meta svg {
    color: var(--color-teal);
}

.job-row-cta {
    flex-shrink: 0;
}

.job-show-body {
    padding-top: 4px;
}

.job-show-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-bottom: 28px;
    font-size: 13px;
    color: #6a6a78;
}

.job-show-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.job-show-body h2 {
    font-family: var(--font-display);
    font-size: 24px;
    margin: 28px 0 12px;
    font-weight: 700;
}

.job-show-body p {
    font-size: 15px;
    line-height: 1.75;
    color: #3a3a48;
    margin: 0 0 14px;
}

.job-file {
    display: block;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
    padding: 14px 16px;
    border-radius: 2px;
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    margin-bottom: 10px;
    cursor: pointer;
}

.job-file input {
    display: none;
}

/* ==========================================================================
   Technology cards
   ========================================================================== */

.tech-card {
    padding: 28px 26px;
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.08);
    border-radius: 4px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.tech-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-gold);
}

.tech-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.tech-card-metric {
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--color-teal);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.tech-card-name {
    font-family: var(--font-display);
    font-size: 22px;
    margin: 0 0 10px;
    font-weight: 700;
}

.tech-card-desc {
    font-size: 14px;
    color: #5a5a6a;
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

/* ==========================================================================
   Corridor hero diagram
   ========================================================================== */

.corridor-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 48px 32px;
    background: linear-gradient(135deg, rgba(28, 49, 170, 0.06) 0%, rgba(167, 52, 190, 0.08) 100%);
    border: 1px solid rgba(167, 52, 190, 0.12);
    border-radius: 4px;
}

.corridor-hero-node {
    flex-shrink: 0;
    text-align: center;
    padding: 24px 28px;
    background: var(--color-white);
    border-radius: 4px;
    border: 1px solid rgba(28, 49, 170, 0.1);
    min-width: 140px;
}

.corridor-hero-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-gold);
    color: var(--color-white);
    font-weight: 700;
    font-family: var(--font-display);
    margin-bottom: 12px;
}

.corridor-hero-node--uae .corridor-hero-flag {
    background: var(--color-teal);
}

.corridor-hero-label {
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
}

.corridor-hero-node small {
    display: block;
    font-size: 12px;
    color: #6a6a78;
    margin-top: 4px;
}

.corridor-hero-link {
    flex: 1;
    color: var(--color-gold);
    line-height: 0;
}

.corridor-hero-link svg {
    width: 100%;
    height: 40px;
}

/* ==========================================================================
   Sector cards (india/sectors)
   ========================================================================== */

.sector-card {
    display: block;
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.08);
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text);
    height: 100%;
    transition: all 0.25s ease;
}

.sector-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px -16px rgba(28, 49, 170, 0.2);
    color: var(--color-text);
}

.sector-card-art {
    width: 100%;
    aspect-ratio: 16 / 11;
    background-size: cover;
    background-position: center;
}

.sector-card-body {
    padding: 22px 22px 24px;
}

.sector-card-title {
    font-family: var(--font-display);
    font-size: 18px;
    margin: 0 0 8px;
    font-weight: 700;
}

.sector-card-lead {
    font-size: 13px;
    color: #5a5a6a;
    line-height: 1.6;
    margin: 0 0 14px;
}

.sector-card-meta {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #6a6a78;
    border-top: 1px solid rgba(28, 49, 170, 0.08);
    padding-top: 12px;
}

.sector-card-meta strong {
    color: var(--color-gold);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    display: block;
}

/* ==========================================================================
   Pricing cards (partner-with-us tiers)
   ========================================================================== */

.pricing-card {
    position: relative;
    padding: 36px 32px;
    background: var(--color-white);
    border: 1px solid rgba(28, 49, 170, 0.1);
    border-radius: 4px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.pricing-card--feature {
    border-color: var(--color-gold);
    box-shadow: 0 16px 40px -16px rgba(167, 52, 190, 0.3);
}

.pricing-card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    background: var(--color-gold);
    color: var(--color-white);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    border-radius: 999px;
}

.pricing-card-name {
    font-family: var(--font-display);
    font-size: 22px;
    margin: 0 0 12px;
    font-weight: 700;
}

.pricing-card-price {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--color-gold);
    font-weight: 700;
    line-height: 1;
    margin: 0 0 24px;
}

.pricing-card-price small {
    font-family: var(--font-base);
    font-size: 13px;
    color: #6a6a78;
    font-weight: 400;
    margin-left: 6px;
}

.pricing-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    flex: 1;
}

.pricing-card-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: #3a3a48;
}

.pricing-card-features svg {
    color: var(--color-gold);
    flex-shrink: 0;
    margin-top: 3px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991.98px) {
    .static-section {
        padding: 64px 0;
    }

    .static-doc {
        padding: 64px 0;
    }

    .static-section-title {
        font-size: 32px;
    }

    .insights-featured-body,
    .event-featured-body {
        padding: 36px 28px;
    }

    .static-cta-band {
        padding: 40px 28px;
    }

    .static-cta-band-title {
        font-size: 24px;
    }

    .static-form--card {
        padding: 28px 22px;
    }

    .corridor-hero {
        padding: 32px 20px;
        flex-direction: column;
    }

    .corridor-hero-link {
        width: 100%;
        transform: rotate(90deg);
        height: 60px;
    }

    .static-doc-aside {
        position: static;
        margin-bottom: 32px;
    }

    .report-show-aside,
    .person-side {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .static-section {
        padding: 48px 0;
    }

    .static-section-head {
        margin-bottom: 32px;
    }

    .static-section-title {
        font-size: 28px;
    }

    .static-section-head--row {
        flex-direction: column;
        align-items: flex-start;
    }

    .press-row {
        flex-direction: column;
        gap: 14px;
    }

    .press-row-date {
        width: auto;
        text-align: left;
        display: flex;
        align-items: baseline;
        gap: 8px;
    }

    .press-row-day {
        font-size: 22px;
    }

    .press-row-cta {
        align-self: flex-start;
    }

    .event-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .job-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .static-stat-band-cell {
        padding: 24px 16px;
    }

    .static-stat-band-value {
        font-size: 28px;
    }

    .insights-featured-title {
        font-size: 22px;
    }

    .event-featured-title {
        font-size: 22px;
    }

    .report-show-body h2,
    .event-show-body h2,
    .person-body h2,
    .job-show-body h2,
    .static-doc-body h2 {
        font-size: 22px;
    }
}

/* ==========================================================================
   Case Studies — Track record layout
   (matches the brochure "Track record" page: alternating colored cards
    with images that bleed into the card)
   ========================================================================== */

.track-section {
    padding: 96px 0;
    background: var(--color-white);
}

.track-head {
    margin-bottom: 64px;
}

.track-head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 22px;
    margin-bottom: 36px;
    border-bottom: 1px solid rgba(28, 49, 170, 0.12);
}

.track-head-eyebrow {
    color: var(--color-teal);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 12px;
    font-weight: 700;
}

.track-head-since {
    color: var(--color-text);
    font-size: 14px;
    letter-spacing: 0.5px;
}

.track-head-since strong {
    font-weight: 700;
}

.track-head-title {
    font-family: var(--font-display);
    font-size: 56px;
    line-height: 1;
    margin: 0 0 28px;
    color: var(--color-text);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.track-head-intro p {
    font-size: 14px;
    line-height: 1.75;
    color: #3a3a48;
    margin: 0 0 10px;
}

.track-head-intro p:last-child {
    margin-bottom: 0;
}

/* Grid of cases */

.track-grid {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.track-case {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 220px;
}

/* Card variants */

.track-case-card {
    position: relative;
    z-index: 2;
    padding: 36px 40px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.track-case--blue .track-case-card {
    background: var(--color-teal);
    color: var(--color-white);
}

.track-case--grey .track-case-card {
    background: #f2f2f4;
    color: var(--color-text);
}

.track-case-title {
    font-family: var(--font-base);
    font-size: 20px;
    line-height: 1.25;
    margin: 0 0 4px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.track-case--blue .track-case-title {
    color: var(--color-white);
}

.track-case--grey .track-case-title {
    color: var(--color-teal);
}

.track-case-loc {
    font-size: 14px;
    margin: 0 0 16px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.track-case--blue .track-case-loc {
    color: var(--color-white);
}

.track-case--grey .track-case-loc {
    color: var(--color-teal);
}

.track-case-rule {
    display: inline-block;
    width: 36px;
    height: 2px;
    margin-bottom: 16px;
}

.track-case--blue .track-case-rule {
    background: rgba(255, 255, 255, 0.5);
}

.track-case--grey .track-case-rule {
    background: rgba(28, 49, 170, 0.45);
}

.track-case-text {
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
    max-width: 420px;
}

.track-case--blue .track-case-text {
    color: rgba(255, 255, 255, 0.92);
}

.track-case--grey .track-case-text {
    color: #3a3a48;
}

/* Image */

.track-case-image {
    position: relative;
    z-index: 1;
    align-self: stretch;
    min-height: 240px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.25);
}

/* Image-on-right (blue card on left). Image sticks out vertically. */
.track-case--image-right .track-case-card {
    grid-column: 1;
}

.track-case--image-right .track-case-image {
    grid-column: 2;
    margin: -20px 0 -20px -40px;
}

/* Image-on-left (grey card on right). */
.track-case--image-left .track-case-image {
    grid-column: 1;
    margin: -20px -40px -20px 0;
}

.track-case--image-left .track-case-card {
    grid-column: 2;
}

/* Foot */

.track-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 72px 0 0;
    padding-top: 24px;
    border-top: 1px solid rgba(28, 49, 170, 0.1);
    color: #6a6a78;
    font-size: 13px;
    letter-spacing: 0.3px;
}

.track-foot-rule {
    flex: 1;
    height: 1px;
    background: rgba(28, 49, 170, 0.15);
}

/* Responsive */

@media (max-width: 991.98px) {
    .track-section {
        padding: 64px 0;
    }

    .track-head {
        margin-bottom: 48px;
    }

    .track-head-title {
        font-size: 42px;
    }

    .track-grid {
        gap: 40px;
    }

    .track-case {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .track-case-card {
        padding: 28px 28px;
    }

    .track-case-image {
        min-height: 220px;
        margin: 0 !important;
    }

    .track-case--image-right .track-case-card,
    .track-case--image-left .track-case-card {
        grid-column: 1;
        grid-row: 2;
    }

    .track-case--image-right .track-case-image,
    .track-case--image-left .track-case-image {
        grid-column: 1;
        grid-row: 1;
    }
}

@media (max-width: 575.98px) {
    .track-head-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .track-head-title {
        font-size: 32px;
    }
}

/* ==========================================================================
   Font policy override — Playfair Display reserved for MAIN page/section
   headings only. Card titles, sub-titles, numbers, stats and other
   secondary headings use the base sans-serif (Geist).
   Keep this block LAST so it wins over earlier static-* definitions.
   ========================================================================== */

/* --- Stat values / numbers --- */
.static-tile-count,
.static-stat-cell-value,
.static-stat-band-value,
.static-step-num,
.static-stepline-num,
.static-timeline-year,
.report-stat-value,
.press-row-day,
.event-featured-day,
.event-row-date span,
.case-card-stat,
.sector-card-meta strong,
.pricing-card-price,
.tech-card-metric,
.corridor-hero-flag,

/* --- Card / row / tile titles (h3 / inline) --- */
.static-tile-title,
.static-feature-title,
.static-promo-title,
.static-step-title,
.static-stepline h3,
.static-timeline h3,
.static-form-title,
.static-form-section h4,
.static-cta-band-title,
.insights-featured-title,
.static-article-title,
.report-card-title,
.report-download-card h3,
.report-show-related h4,
.report-show-author-name,
.press-row-title,
.press-coverage-outlet,
.event-featured-title,
.event-row-title,
.event-replay-body h3,
.case-card-title,
.people-card-name,
.person-side-name,
.job-row-title,
.tech-card-name,
.corridor-hero-label,
.sector-card-title,
.pricing-card-name,

/* --- Doc / show-page sub-headings (h2 within an article) --- */
.static-doc-body h2,
.report-show-body h2,
.event-show-body h2,
.person-body h2,
.job-show-body h2,

/* --- Buttons & form button --- */
.static-btn,
.static-cta-band-form button,

/* --- Logo wall items --- */
.static-logo-wall-cell {
    font-family: var(--font-base);
}

/* Numbers usually want a tighter, more confident weight when sans-serif */
.static-tile-count,
.static-stat-cell-value,
.static-stat-band-value,
.static-step-num,
.report-stat-value,
.press-row-day,
.event-featured-day,
.pricing-card-price,
.track-case-title {
    letter-spacing: -0.01em;
    font-weight: 700;
}

/* ==========================================================================
   Leadership team — "Excellence Through Teamwork" grid
   ========================================================================== */
.lt-section {
    padding: 56px 0 80px;
}

/* --- Header --- */
.lt-intro {
    display: flex;
    align-items: stretch;
    gap: 48px;
    margin-bottom: 44px;
}

.lt-hero {
    flex: 0 0 52%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    padding: 0;
    color: var(--color-text);
}

/* No decorative pattern on the (now plain) header */
.lt-hero::after {
    display: none;
}

.lt-hero::after,
.lt-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='3' cy='3' r='1'/%3E%3Ccircle cx='24' cy='24' r='1'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

/* Animated drifting pattern on the statement cards */
.lt-card::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Ccircle cx='3' cy='3' r='1'/%3E%3Ccircle cx='24' cy='24' r='1'/%3E%3C/g%3E%3C/svg%3E");
    inset: -42px;
    animation: lt-drift 16s linear infinite;
    will-change: transform;
}

/* Second pattern layer drifting the opposite way — adds depth, no gradients */
.lt-card::before {
    content: '';
    position: absolute;
    inset: -60px;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='8' cy='8' r='1.4'/%3E%3Ccircle cx='38' cy='30' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    animation: lt-drift-rev 22s linear infinite;
    will-change: transform;
}

@keyframes lt-drift {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(42px, 42px, 0);
    }
}

@keyframes lt-drift-rev {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-60px, 60px, 0);
    }
}

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

    .lt-card::after,
    .lt-card::before {
        animation: none;
    }
}

.lt-hero>*,
.lt-card>* {
    position: relative;
    z-index: 1;
}

.lt-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-base);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #20424a;
    margin-bottom: 18px;
}

.lt-hero-eyebrow::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    margin-right: 10px;
}

.lt-hero-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(34px, 4vw, 44px);
    line-height: 1.08;
    color: #20424a;
    margin: 0;
}


.lt-intro-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 40px;
    border-left: 1px solid #dcdde6;
}

.lt-intro-text p {
    font-family: var(--font-base);
    font-size: 15.5px;
    line-height: 1.8;
    color: #6b6b78;
    margin: 0;
    max-width: 440px;
}

/* --- Grid --- */
.lt-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    align-items: start;
}

/* --- Person --- */
.lt-member {
    display: block;
}

.lt-member-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Asymmetric rounded corners — three soft corners, one squared (bottom-right) */
    border-radius: 50px 0px 50px 0px;
    overflow: hidden;
    background: #e9ecf3;
}

.lt-member-imglink {
    display: block;
    width: 100%;
    height: 100%;
}

.lt-member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.5s ease;
}

.lt-member:hover .lt-member-photo img,
.lt-member:focus-within .lt-member-photo img {
    transform: scale(1.04);
}

/* Hover-reveal info card (name + designation + socials) */
.lt-member-info {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 30px 28px;
    background: #f1f0ec;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.lt-member:hover .lt-member-info,
.lt-member:focus-within .lt-member-info {
    opacity: 1;
    visibility: visible;
}

.lt-member-name {
    display: block;
    font-family: var(--font-base);
    font-size: 20px;
    font-weight: 600;
    color: #222;
    line-height: 1.25;
    margin: 0 0 6px;
    text-decoration: none;
}

.lt-member-role {
    font-family: var(--font-base);
    font-size: 13.5px;
    line-height: 1.5;
    color: #8b8b97;
    margin: 0;
}

.lt-member-socials {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lt-soc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: #222;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.lt-soc svg { width: 14px; height: 14px; display: block; }

.lt-soc:hover,
.lt-soc:focus {
    background: var(--color-gold);
    color: #fff;
}

/* --- Statement cards --- */
.lt-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: var(--color-teal);
    color: var(--color-white);
    border-radius: 44px 44px 8px 44px;
    padding: 30px 30px;
}

/* Wide cards span two columns but stay one image tall
   (ratio ≈ 2·col + gap : col, near-constant across breakpoints) */
.lt-card--wide {
    grid-column: span 2;
    aspect-ratio: 2.08 / 1;
}

.lt-card--center {
    text-align: center;
    align-items: center;
}

.lt-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-white);
    margin-bottom: 18px;
}

.lt-card-icon svg {
    width: 22px;
    height: 22px;
}

.lt-card-eyebrow {
    display: block;
    font-family: var(--font-base);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 14px;
}

.lt-card-eyebrow::before {
    content: '— ';
}

.lt-card-quote {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 19px;
    line-height: 1.38;
    color: var(--color-white);
    margin: 0;
}

.lt-card--wide .lt-card-quote {
    font-size: 21px;
}

.lt-card--center .lt-card-quote {
    font-style: italic;
    font-size: 23px;
    line-height: 1.35;
    max-width: 520px;
}

.lt-card-foot {
    display: block;
    font-family: var(--font-base);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 16px;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .lt-intro {
        flex-direction: column;
        gap: 24px;
        margin-bottom: 32px;
    }

    .lt-hero {
        flex: auto;
        padding: 0;
    }

    .lt-intro-text {
        padding-left: 0;
        border-left: 0;
        padding-top: 4px;
        border-top: 1px solid #dcdde6;
        padding-top: 22px;
    }

    .lt-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .lt-card--wide {
        grid-column: span 2;
    }

    .lt-card-quote {
        font-size: 17px;
    }

    .lt-card--wide .lt-card-quote,
    .lt-card--center .lt-card-quote {
        font-size: 19px;
    }
}

@media (max-width: 575.98px) {
    .lt-section {
        padding: 40px 0 56px;
    }

    .lt-card {
        padding: 22px 20px;
    }
}

/* ==========================================================================
   Team member details — clean profile page
   ========================================================================== */
.tmd-section {
    padding: 60px 0 84px;
}

.tmd-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 56px;
    align-items: start;
}

/* --- Profile card --- */
.tmd-card {
    position: sticky;
    top: 28px;
    background: var(--color-white);
    border: 1px solid #eceef3;
    border-radius: 16px;
    padding: 22px 22px 26px;
    box-shadow: 0 10px 30px rgba(28, 49, 170, 0.06);
    text-align: center;
}

.tmd-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-teal);
    margin-bottom: 20px;
}

.tmd-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.tmd-photo-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 72px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.tmd-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-teal);
    margin: 0 0 6px;
}

.tmd-role {
    font-family: var(--font-base);
    font-size: 13px;
    line-height: 1.5;
    color: #6b6b78;
    margin: 0 0 22px;
}

.tmd-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 10px;
    background: var(--color-teal);
    color: var(--color-white);
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.18s ease;
}

.tmd-btn svg {
    transition: transform 0.18s ease;
}

.tmd-btn:hover,
.tmd-btn:focus {
    background: #16278a;
    color: var(--color-white);
    transform: translateY(-2px);
}

.tmd-btn:hover svg,
.tmd-btn:focus svg {
    transform: translateX(3px);
}

/* --- Details --- */
.tmd-body {
    padding-top: 4px;
}

.tmd-eyebrow {
    display: block;
    font-family: var(--font-base);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 12px;
}

.tmd-heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.22;
    color: var(--color-teal);
    margin: 0 0 16px;
}

.tmd-lead {
    font-family: var(--font-base);
    font-size: 15.5px;
    line-height: 1.75;
    color: #54545f;
    margin: 0;
    max-width: 640px;
}

.tmd-block {
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid #eceef3;
}

.tmd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tmd-chip {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-base);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-teal);
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(28, 49, 170, 0.06);
    border: 1px solid rgba(28, 49, 170, 0.12);
}

.tmd-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tmd-list li {
    position: relative;
    padding-left: 26px;
    font-family: var(--font-base);
    font-size: 14.5px;
    line-height: 1.6;
    color: #54545f;
}

.tmd-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-teal);
    box-shadow: 0 0 0 4px rgba(28, 49, 170, 0.1);
}

.tmd-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 36px;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-gold);
    transition: gap 0.18s ease;
}

.tmd-back:hover,
.tmd-back:focus {
    gap: 12px;
    color: var(--color-gold);
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .tmd-section {
        padding: 44px 0 64px;
    }

    .tmd-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .tmd-card {
        position: static;
        max-width: 380px;
    }

    .tmd-heading {
        font-size: 24px;
    }
}

@media (max-width: 575.98px) {
    .tmd-card {
        max-width: none;
    }
}

/* ==========================================================================
   About Us — fresh redesign (.abt-*) — Valunxt theme, no gradients
   ========================================================================== */
.abt-eyebrow {
    display: inline-block;
    font-family: var(--font-base);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 14px;
}

.abt-eyebrow::before {
    content: '— ';
}

.abt-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.abt-btn svg {
    transition: transform .2s ease;
}

.abt-btn:hover svg {
    transform: translateX(3px);
}

.abt-btn--solid {
    background: var(--color-teal);
    color: #fff;
}

.abt-btn--solid:hover {
    background: #16278a;
    color: #fff;
    transform: translateY(-1px);
}

.abt-btn--light {
    background: #fff;
    color: var(--color-teal);
}

.abt-btn--light:hover {
    background: #f0f1f8;
    color: var(--color-teal);
    transform: translateY(-1px);
}

.abt-btn--outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
}

.abt-btn--outline-light:hover {
    background: #fff;
    color: var(--color-teal);
}

.abt-btn--lg {
    padding: 14px 30px;
    font-size: 15px;
}

.abt-section-head {
    max-width: 720px;
    margin: 0 auto 44px;
    text-align: center;
}

.abt-section-head__title {
    font-family: var(--font-base);
    font-weight: 500;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.2;
    color: var(--color-teal);
    margin: 0;
}

/* ----- Intro ----- */
.abt-intro {
    padding: 84px 0 70px;
}

.abt-intro__grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 56px;
    align-items: start;
}

.abt-intro__title {
    font-family: var(--font-base);
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.18;
    color: var(--color-teal);
    margin: 0 0 22px;
}

.abt-intro__text {
    font-family: var(--font-base);
    font-size: 15.5px;
    line-height: 1.8;
    color: #54545f;
    margin: 0 0 18px;
}

.abt-intro__lead .abt-btn {
    margin-top: 12px;
}

.abt-founder {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fbfbfd;
    border: 1px solid #eceef3;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 22px;
}

.abt-founder__photo {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-teal);
}

.abt-founder__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.abt-founder__name {
    font-family: var(--font-base);
    font-size: 19px;
    font-weight: 600;
    color: var(--color-teal);
    margin: 0 0 3px;
}

.abt-founder__role {
    font-family: var(--font-base);
    font-size: 13px;
    color: var(--color-gold);
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.abt-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.abt-points li {
    position: relative;
    padding-left: 40px;
    font-family: var(--font-base);
    font-size: 14px;
    line-height: 1.6;
    color: #54545f;
}

.abt-points__tick {
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(28, 49, 170, .08);
    color: var(--color-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.abt-points__tick svg {
    width: 14px;
    height: 14px;
}

/* ----- Approach ----- */
.abt-approach {
    padding: 70px 0;
    background: #fbfbfd;
}

.abt-approach__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.abt-story {
    background: #fff;
    border: 1px solid #eceef3;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.abt-story:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(28, 49, 170, .1);
}

.abt-story__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eef0fa;
}

.abt-story__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.abt-story:hover .abt-story__media img {
    transform: scale(1.05);
}

.abt-story__num {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--color-teal);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-base);
    font-size: 17px;
    font-weight: 600;
}

.abt-story__title {
    font-family: var(--font-base);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-teal);
    margin: 22px 22px 10px;
}

.abt-story__text {
    font-family: var(--font-base);
    font-size: 13.5px;
    line-height: 1.65;
    color: #6b6b78;
    margin: 0 22px 24px;
}

/* ----- Impact (solid blue band + texture) ----- */
.abt-impact {
    position: relative;
    padding: 88px 0;
    background: var(--color-teal);
    color: #fff;
    overflow: hidden;
}

/* Dot-grid texture */
.abt-impact::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%23ffffff' fill-opacity='0.07'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Concentric-ring decoration, top-right */
.abt-impact::after {
    content: '';
    position: absolute;
    top: -140px;
    right: -120px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow:
        0 0 0 44px rgba(255, 255, 255, .035),
        0 0 0 88px rgba(255, 255, 255, .025),
        0 0 0 132px rgba(255, 255, 255, .015);
    pointer-events: none;
}

.abt-impact .container {
    position: relative;
    z-index: 1;
}

.abt-impact__head {
    max-width: 760px;
    margin-bottom: 44px;
}

.abt-impact__title {
    font-family: var(--font-base);
    font-weight: 500;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.22;
    color: #fff;
    margin: 0 0 16px;
}

.abt-impact__text {
    font-family: var(--font-base);
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .82);
    margin: 0;
}

.abt-impact__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.abt-stat {
    position: relative;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 16px;
    padding: 30px 26px;
    background: rgba(255, 255, 255, .05);
    overflow: hidden;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.abt-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--color-gold);
    border-radius: 0 0 3px 0;
}

.abt-stat:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .42);
    transform: translateY(-4px);
}

.abt-stat__value {
    display: block;
    font-family: var(--font-base);
    font-size: 38px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -.01em;
    line-height: 1;
}

.abt-stat__label {
    display: block;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #cfe0ff;
    margin-bottom: 14px;
}

.abt-stat__desc {
    font-family: var(--font-base);
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
    margin: 0;
}

.abt-impact__cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* ----- Sectors ----- */
/* ----- Coverage / Industries auto-slider ----- */
.abt-cover {
    padding: 56px 0;
    background: #f4f3ef;
    overflow: hidden;
}

.abt-cover__inner {
    display: flex;
    align-items: stretch;
    max-width: 1480px;
    margin: 0 auto;
    padding-left: clamp(20px, 5vw, 64px);
}

/* Left fixed intro */
.abt-cover__intro {
    flex: 0 0 360px;
    max-width: 360px;
    padding: 14px 48px 14px 0;
    display: flex;
    flex-direction: column;
}

.abt-cover__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-teal);
    margin-bottom: 22px;
}

.abt-cover__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid var(--color-gold);
    flex-shrink: 0;
}

.abt-cover__heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(34px, 4vw, 42px);
    line-height: 1.05;
    color: var(--color-teal);
    margin: 0 0 22px;
    -webkit-user-select: none;
    user-select: none;
}

.abt-cover__lead {
    font-family: var(--font-base);
    font-size: 15px;
    line-height: 1.7;
    color: #54545f;
    margin: 0 0 36px;
    max-width: 280px;
}

.abt-cover__btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    margin-top: auto;
    padding: 14px 28px;
    border: 1px solid rgba(28, 49, 170, 0.30);
    border-radius: 999px;
    background: transparent;
    color: var(--color-teal);
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.abt-cover__btn svg { transition: transform 0.25s ease; }
.abt-cover__btn:hover, .abt-cover__btn:focus {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: #fff;
}
.abt-cover__btn:hover svg, .abt-cover__btn:focus svg { transform: translate(2px, -2px); }

/* Right slider */
.abt-cover__slider {
    flex: 1;
    min-width: 0;
    border-left: 1px solid #ddddd6;
}

.abt-cover-swiper { overflow: hidden; height: 100%; }
.abt-cover-swiper .swiper-slide {
    height: auto;
    border-right: 1px solid #ddddd6;
}

/* Card */
.abt-cover-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 420px;
    padding: 22px 28px 30px;
    text-decoration: none;
    background: transparent;
    transition: background 0.3s ease;
}

.abt-cover-card__num {
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--color-gold);
    margin-bottom: 14px;
}

/* Image area — square box, revealed smoothly on hover.
   Shape = 4-petal clover/quatrefoil = union of four corner circles
   (66% tiles) + a centre circle to fill the middle cleanly. */
.abt-cover-card__media {
    display: block;
    width: 100%;
    max-width: 240px;
    aspect-ratio: 1 / 1;
    margin-bottom: 22px;
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.55s ease, transform 0.65s ease;
    will-change: opacity, transform;
    --petal: radial-gradient(circle closest-side, #000 99%, transparent 100%);
    -webkit-mask:
        var(--petal) left top / 60% 60% no-repeat,
        var(--petal) right top / 60% 60% no-repeat,
        var(--petal) left bottom / 60% 60% no-repeat,
        var(--petal) right bottom / 60% 60% no-repeat,
        radial-gradient(circle closest-side, #000 99%, transparent 100%) center / 56% 56% no-repeat;
    mask:
        var(--petal) left top / 60% 60% no-repeat,
        var(--petal) right top / 60% 60% no-repeat,
        var(--petal) left bottom / 60% 60% no-repeat,
        var(--petal) right bottom / 60% 60% no-repeat,
        radial-gradient(circle closest-side, #000 99%, transparent 100%) center / 56% 56% no-repeat;
}

.abt-cover-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.abt-cover-card__title {
    font-family: var(--font-base);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #222;
    margin: 0 0 12px;
}

.abt-cover-card__text {
    font-family: var(--font-base);
    font-size: 14.5px;
    line-height: 1.65;
    color: #6b6b78;
    margin: 0;
    max-width: 280px;
}

/* Hover: turn card white + reveal image */
.abt-cover-card:hover {
    background: #ffffff;
}

.abt-cover-card:hover .abt-cover-card__media {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 991.98px) {
    .abt-cover__inner { flex-direction: column; padding-right: clamp(20px, 5vw, 64px); }
    .abt-cover__intro {
        flex: none; max-width: none; padding: 0 0 36px;
    }
    .abt-cover__btn { margin-top: 0; }
    .abt-cover__lead, .abt-cover-card__text { max-width: none; }
    .abt-cover__slider { border-left: 0; border-top: 1px solid #ddddd6; }
    .abt-cover-card { min-height: 460px; }
}

/* ----- Values ----- */
.abt-values {
    padding: 80px 0;
}

.abt-values__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.abt-value {
    border: 1px solid #eceef3;
    border-radius: 16px;
    padding: 28px 24px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.abt-value:hover {
    border-color: rgba(28, 49, 170, .18);
    box-shadow: 0 14px 30px rgba(28, 49, 170, .08);
    transform: translateY(-4px);
}

.abt-value__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 13px;
    margin-bottom: 18px;
    background: rgba(28, 49, 170, .07);
    color: var(--color-teal);
}

.abt-value__icon svg {
    width: 24px;
    height: 24px;
}

.abt-value:hover .abt-value__icon {
    background: var(--color-teal);
    color: #fff;
}

.abt-value__title {
    font-family: var(--font-base);
    font-size: 17px;
    font-weight: 700;
    color: var(--color-teal);
    margin: 0 0 8px;
}

.abt-value__text {
    font-family: var(--font-base);
    font-size: 13.5px;
    line-height: 1.6;
    color: #6b6b78;
    margin: 0;
}

/* ----- Process ----- */
.abt-process {
    padding: 80px 0;
    background: #fbfbfd;
}

.abt-process__grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 56px;
    align-items: start;
}

.abt-process__title {
    font-family: var(--font-base);
    font-weight: 600;
    font-size: clamp(24px, 2.8vw, 32px);
    line-height: 1.22;
    color: var(--color-teal);
    margin: 0 0 16px;
}

.abt-process__text {
    font-family: var(--font-base);
    font-size: 15px;
    line-height: 1.75;
    color: #54545f;
    margin: 0;
}

.abt-process__steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.abt-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    border: 1px solid #eceef3;
    border-radius: 14px;
    padding: 22px 20px;
    background: #fff;
}

.abt-step__num {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--color-teal);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 700;
}

.abt-step__title {
    font-family: var(--font-base);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-teal);
    margin: 0 0 5px;
}

.abt-step__text {
    font-family: var(--font-base);
    font-size: 13px;
    line-height: 1.55;
    color: #6b6b78;
    margin: 0;
}

/* ----- Team preview ----- */
/* ----- Meet our team ----- */
.abt-meet {
    padding: 0 0 56px;
}

/* Left feature column */
.abt-meet__feature {
    display: flex;
    flex-direction: column;
    /* height: 100%; */
}

.abt-meet__feature-img {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    background: #eceef3;
    aspect-ratio: 16 / 11;
}

.abt-meet__feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* On desktop the feature image stretches to match the team grid height */
@media (min-width: 992px) {
    .abt-meet__feature-img {
        aspect-ratio: auto;
        flex: 1;
        min-height: 0;
    }
}

.abt-meet__feature-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
}

.abt-meet__title {
    font-family: var(--font-base);
    font-weight: 400;
    font-size: clamp(26px, 2.6vw, 28px);
    line-height: 1.15;
    color: var(--color-teal);
    margin: 0;
}

.abt-meet__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 12px 22px;
    border-radius: 999px;
    border: 1px solid rgba(28, 49, 170, 0.28);
    background: transparent;
    color: var(--color-teal);
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.abt-meet__btn svg {
    transition: transform 0.2s ease;
}

.abt-meet__btn:hover,
.abt-meet__btn:focus {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: #fff;
}

.abt-meet__btn:hover svg,
.abt-meet__btn:focus svg {
    transform: translate(2px, -2px);
}

/* Right grid cards */
.abt-meet-card {
    display: flex;
    flex-direction: column;
}

.abt-meet-card__img {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: #eceef3;
    aspect-ratio: 1 / 1;
}

.abt-meet-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.abt-meet-card__img:hover img,
.abt-meet-card__img:focus img {
    transform: scale(1.04);
}

.abt-meet-card__foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}

.abt-meet-card__info {
    min-width: 0;
}

.abt-meet-card__name {
    font-family: var(--font-base);
    font-weight: 600;
    font-size: 16px;
    color: #222;
    margin: 0 0 3px;
    line-height: 1.25;
}

.abt-meet-card__role {
    font-family: var(--font-base);
    font-size: 13px;
    color: #6b6b78;
    margin: 0;
    line-height: 1.4;
}

/* ----- Partners ----- */
.abt-partners {
    padding: 56px 0;
    border-top: 1px solid #eceef3;
}

.abt-partners__label {
    display: block;
    text-align: center;
    font-family: var(--font-base);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #9aa0ac;
    margin-bottom: 30px;
}

.abt-partners__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 44px;
}

.abt-partner__logo {
    height: 30px;
    width: auto;
    opacity: .55;
    filter: grayscale(1);
    transition: opacity .2s ease, filter .2s ease;
}

.abt-partner__logo:hover {
    opacity: 1;
    filter: grayscale(0);
}

.abt-partner__name {
    font-family: var(--font-base);
    font-size: 18px;
    font-weight: 600;
    color: #b8bcc7;
    letter-spacing: 1px;
}

/* ----- CTA ----- */
.abt-cta {
    padding: 0 0 84px;
}

.abt-cta__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    background: var(--color-teal);
    border-radius: 20px;
    padding: 46px 50px;
    color: #fff;
}

.abt-cta__title {
    font-family: var(--font-base);
    font-weight: 500;
    font-size: clamp(24px, 2.6vw, 30px);
    line-height: 1.2;
    color: #fff;
    margin: 0 0 6px;
}

.abt-cta__text {
    font-family: var(--font-base);
    font-size: 14.5px;
    color: rgba(255, 255, 255, .82);
    margin: 0;
}

/* ----- Responsive ----- */
@media (max-width: 991.98px) {
    .abt-intro {
        padding: 56px 0 50px;
    }

    .abt-intro__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .abt-approach__grid {
        grid-template-columns: 1fr;
    }

    .abt-impact__grid {
        grid-template-columns: 1fr;
    }

    .abt-values__grid {
        grid-template-columns: 1fr 1fr;
    }

    .abt-process__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .abt-cta__card {
        padding: 36px 30px;
    }
}

@media (max-width: 575.98px) {
    .abt-partners__list {
        gap: 28px;
    }

    .abt-values__grid {
        grid-template-columns: 1fr;
    }

    .abt-process__steps {
        grid-template-columns: 1fr;
    }

    .abt-meet__feature-img {
        aspect-ratio: 16 / 12;
    }

    .abt-meet__feature-foot {
        margin-top: 20px;
        margin-bottom: 8px;
    }
}


/* ==========================================================================
   Home — Trusted By (institutions grid)
   ========================================================================== */

.trusted-section {
    background: var(--color-white);
    padding: 96px 0;
}

.trusted-head {
    text-align: center;
    margin-bottom: 48px;
}

.trusted-eyebrow {
    display: inline-block;
    color: var(--color-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.trusted-heading {
    font-family: var(--font-display);
    color: var(--color-text);
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1.15;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.3px;
}

.trusted-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1px;
    background: #e7e9f1;
    border: 1px solid #e7e9f1;
    border-radius: 12px;
    overflow: hidden;
}

.trusted-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--color-white);
    padding: 36px 16px;
    min-height: 112px;
    transition: background 0.25s ease, color 0.25s ease;
}

.trusted-logo {
    max-width: 100%;
    height: auto;
    max-height: 40px;
    opacity: 0.75;
    transition: opacity 0.25s ease;
}

.trusted-cell:hover {
    background: #f7f8fb;
}

.trusted-cell:hover .trusted-logo {
    opacity: 1;
}

.trusted-cell--featured .trusted-logo {
    opacity: 1;
}

.trusted-cell--featured:hover {
    background: rgba(28, 49, 170, 0.05);
}

@media (max-width: 1199.98px) {
    .trusted-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .trusted-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .trusted-section {
        padding: 64px 0;
    }

    .trusted-head {
        margin-bottom: 32px;
    }

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

    .trusted-cell {
        padding: 26px 12px;
        min-height: 92px;
    }
}


/* ==========================================================================
   Home — About Us (creative heading + stats)  [after values-section]
   ========================================================================== */

.creative-section {
    background: var(--color-white);
    padding: 40px 0;
    padding-bottom: 0;
}

.creative-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #6c7a82;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.creative-eyebrow::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--color-gold);
}

.creative-top {
    margin-bottom: 72px;
    align-items: flex-start;
}

.creative-heading {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: clamp(28px, 3.1vw, 42px);
    line-height: 1.2;
    font-weight: 500;
    margin: 0;
    letter-spacing: -0.4px;
}

.creative-heading em {
    font-style: italic;
}

.creative-dot {
    display: inline-block;
    width: clamp(42px, 4.2vw, 62px);
    height: clamp(42px, 4.2vw, 62px);
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle;
    margin: 0 8px;
    transform: translateY(-5px);
}

.creative-dot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.creative-aside {
    padding-top: 6px;
}

.creative-text {
    color: #5b6a72;
    margin: 0 0 20px;
}

.creative-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    padding: 15px 30px;
    border: 1px solid #d7d9e0;
    border-radius: 999px;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    transition: border-color 0.25s ease, color 0.25s ease;
}

.creative-btn svg {
    color: var(--color-gold);
    transition: transform 0.3s ease, color 0.25s ease;
}

.creative-btn:hover,
.creative-btn:focus {
    border-color: var(--color-teal);
    color: var(--color-teal);
}

.creative-btn:hover svg,
.creative-btn:focus svg {
    transform: translate(2px, -2px);
}

.creative-stats .row {
    align-items: stretch;
}

.creative-stat {
    height: 100%;
    padding: 10px 0 10px 28px;
    border-left: 2px solid var(--color-gold);
}

.creative-stat-number {
    font-family: var(--font-base);
    color: var(--color-text);
    font-size: clamp(32px, 3.4vw, 48px);
    font-weight: 600;
    line-height: 1;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
}

.creative-stat-label {
    color: #6c7a82;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

@media (max-width: 991.98px) {
    .creative-section {
        padding: 64px 0;
    }

    .creative-top {
        margin-bottom: 48px;
    }

    .creative-aside {
        margin-top: 28px;
    }

    .creative-stat {
        margin-bottom: 28px;
    }

    .creative-stats .row > [class*="col-"]:nth-last-child(-n+2) .creative-stat {
        margin-bottom: 0;
    }
}

@media (max-width: 767px) {
    .creative-stats .row > [class*="col-"]:nth-last-child(-n+2) .creative-stat {
        margin-bottom: 28px;
    }

    .creative-stats .row > [class*="col-"]:last-child .creative-stat {
        margin-bottom: 0;
    }
}


/* ==========================================================================
   Case Studies — featured auto-rotating slider
   ========================================================================== */

.case-feature-section {
    background: var(--color-white);
    padding: 84px 0 92px;
    overflow: hidden;
}

.case-feature-head {
    margin-bottom: 38px;
}

.case-feature-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #6c7a82;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.case-feature-eyebrow::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--color-gold);
}

.case-feature-heading {
    font-family: var(--font-display);
    color: var(--color-text);
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.12;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.3px;
}

.case-feature-swiper {
    overflow: hidden;
    width: 100%;
}

.case-feature-swiper .case-feature-slide {
    width: min(54%, 880px);
    height: auto;
}

.case-feature-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.case-feature-meta {
    margin-bottom: 18px;
    min-height: 66px;
}

.case-feature-title {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: var(--font-display);
    color: var(--color-text);
    font-size: clamp(20px, 1.9vw, 27px);
    line-height: 1.2;
    font-weight: 600;
    margin: 0 0 6px;
    transition: opacity 0.4s ease;
}

.case-feature-title span {
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.case-feature-title svg {
    flex: 0 0 auto;
    margin-top: 5px;
    color: var(--color-gold);
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.case-feature-by {
    color: #6c7a82;
    font-size: 13px;
    letter-spacing: 0.2px;
}

.case-feature-art {
    width: 100%;
    height: 380px;
    border-radius: 50px 0 50px 0;
    background-color: #e9eaf0;
    background-size: cover;
    background-position: center;
    transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Active slide grows taller — smoothly */
.swiper-slide-active .case-feature-art {
    height: 480px;
}

/* Dim the non-active slides */
.case-feature-slide:not(.swiper-slide-active) .case-feature-art {
    opacity: 0.4;
}

.case-feature-slide:not(.swiper-slide-active) .case-feature-meta {
    opacity: 0.32;
}

/* Active slide emphasis */
.swiper-slide-active .case-feature-title svg {
    opacity: 1;
    transform: translate(0, 0);
}

.swiper-slide-active .case-feature-title span {
    border-bottom-color: var(--color-text);
}

.case-feature-card:hover .case-feature-art {
    transform: scale(1.015);
}

@media (max-width: 991.98px) {
    .case-feature-section {
        padding: 60px 0 64px;
    }

    .case-feature-swiper .case-feature-slide {
        width: 78%;
    }

    .case-feature-art {
        height: 300px;
    }

    .swiper-slide-active .case-feature-art {
        height: 360px;
    }
}

@media (max-width: 575.98px) {
    .case-feature-swiper .case-feature-slide {
        width: 88%;
    }

    .case-feature-meta {
        min-height: 0;
    }
}

/* ==========================================================================
   Partners — collage hero + About Us content (.pn-*) — Valunxt theme
   ========================================================================== */

/* ----- Collage hero ----- */
.pn-hero {
    padding: 84px 0 76px;
}

.pn-hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
    text-align: justify;
}

.pn-hero__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(30px, 4.4vw, 32px);
    line-height: 1.05;
    color: #000;
    margin: 0 0 22px;
}

.pn-hero__text {
    font-family: var(--font-base);
    font-size: 15.5px;
    line-height: 1.85;
    color: #54545f;
    margin: 0 0 16px;
}

.pn-hero__text strong {
    color: var(--color-teal);
    font-weight: 600;
}

.pn-hero__lead .abt-btn {
    margin-top: 14px;
}

/* ----- Mosaic (photos + colour blocks + chevrons) ----- */
.pn-hero__art {
    position: relative;
}

.pn-mosaic {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 104px;
    gap: 14px;
}

.pn-mosaic__photo {
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
    background: #eef0fa;
    position: relative;
}

.pn-mosaic__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    /* filter: grayscale(100%) contrast(1.02); */
    transition: filter .4s ease, transform .5s ease;
}

.pn-mosaic__photo:hover img {
    filter: grayscale(0);
    transform: scale(1.04);
}

/* graceful fallback when a portrait is missing */
.pn-mosaic__photo.is-empty {
    background: linear-gradient(135deg, var(--color-teal) 0%, #16278a 100%);
}

.pn-mosaic__photo.is-empty img {
    display: none;
}

/* large portrait, top-left, spans 2 rows — framed in brand colour */
.pn-mosaic__photo--a {
    grid-column: 1;
    grid-row: 1 / span 2;
    border: 2px solid var(--color-teal);
    padding: 5px;
    background: #fff;
    border-radius: 6px;
}

.pn-mosaic__photo--a img {
    border-radius: 3px;
}

/* secondary portrait, top-right, spans 2 rows — purple frame */
.pn-mosaic__photo--b {
    grid-column: 3;
    grid-row: 1 / span 2;
    border: 2px solid var(--color-gold);
    padding: 5px;
    background: #fff;
    border-radius: 6px;
}

.pn-mosaic__photo--b img {
    border-radius: 3px;
}

.pn-mosaic__block {
    border-radius: 4px;
    display: block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: soft-light;
}

.pn-mosaic__block--teal {
    grid-column: 2;
    grid-row: 1;
    background-color: var(--color-teal);
    background-image: url('/images/team/february-texture.png');
}

/* large block, middle column, spans 2 rows */
.pn-mosaic__block--purple {
    grid-column: 2;
    grid-row: 2 / span 2;
    background-color: var(--color-gold);
    background-image: url('/images/backgrounds/bg-banner.webp');
}

.pn-mosaic__block--tint {
    grid-column: 3;
    grid-row: 3;
    background-color: rgba(167, 52, 190, .14);
    background-image: url('/images/team/valuation-texture.png');
}

.pn-mosaic__block--grey {
    grid-column: 3;
    grid-row: 4;
    background-color: #e7e9f1;
    background-image: url('/images/backgrounds/bg-banner.webp');
    background-blend-mode: multiply;
}

/* ----- Chevron textures ----- */
.pn-mosaic__chevrons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b0b6c4;
    pointer-events: none;
}

.pn-mosaic__chevrons svg {
    width: 22px;
    height: 22px;
}

/* downward stack — column 1, below the left portrait */
.pn-mosaic__chevrons--down {
    grid-column: 1;
    grid-row: 3;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pn-mosaic__chevrons--down svg {
    margin-bottom: -7px;
}

.pn-mosaic__chevrons--down svg:last-child {
    margin-bottom: 0;
}

/* rightward row — bottom, pointing right */
.pn-mosaic__chevrons--right {
    grid-column: 1 / span 2;
    grid-row: 4;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.pn-mosaic__chevrons--right svg {
    margin-right: -7px;
}

.pn-mosaic__chevrons--right svg:last-child {
    margin-right: 0;
}

/* ----- Body (remaining original content) ----- */
.pn-body {
    margin-top: 30px;
    text-align: justify;
}

.pn-body__text {
    font-family: var(--font-base);
    font-size: 15.5px;
    line-height: 1.85;
    color: #54545f;
    margin: 0 0 16px;
}

.pn-body__text--lead {
    margin-top: 10px;
    color: var(--color-teal);
    font-weight: 600;
}

.pn-pillars-line {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(22px, 2.8vw, 32px);
    line-height: 1.25;
    color: var(--color-teal);
    margin: 0 0 22px;
}

/* ----- Responsive ----- */
@media (max-width: 991.98px) {
    .pn-hero__grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .pn-hero__art {
        max-width: 480px;
    }
}

@media (max-width: 575.98px) {
    .pn-hero {
        padding: 56px 0 50px;
    }

    .pn-mosaic {
        grid-auto-rows: 84px;
        gap: 10px;
    }
}

/* ==========================================================================
   UAE Footer — green consultancy layout (region-ae only)
   ========================================================================== */
.vx-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--color-teal);
    background-image: url('/images/backgrounds/start-the-conversation-with-valunxt.webp');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--font-base);
    padding: 84px 0 28px;
}

.vx-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(6, 30, 78, 0.55);
    z-index: -1;
    pointer-events: none;
}

.vx-footer__container {
    position: relative;
    z-index: 1;
}

/* ---------- Newsletter row ---------- */
.vx-footer__news-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 64px;
    align-items: start;
    padding: 0 0 64px;
}

.vx-footer__news-intro {
    max-width: 470px;
    margin-left: auto;
}

.vx-footer__news-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.1;
    color: #ffffff;
    margin: 0 0 16px;
}

.vx-footer__news-text {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.66);
    margin: 0;
    max-width: 430px;
}

.vx-footer__news-form-wrap {
    align-self: center;
}

.vx-footer__news-form {
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.34);
    padding-bottom: 14px;
}

.vx-footer__news-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-base);
    font-size: 16px;
    color: #ffffff;
    padding: 6px 2px;
}

.vx-footer__news-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.vx-footer__news-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    color: #0a1647;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vx-footer__news-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.vx-footer__news-note {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.6);
    margin: 14px 0 0;
}

/* ---------- Main columns ---------- */
.vx-footer__main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding: 8px 0 56px;
}

.vx-footer__logo-link {
    display: inline-block;
    margin-bottom: 26px;
}

.vx-footer__logo {
    height: 42px;
    width: auto;
    filter: brightness(0) invert(1);
}

.vx-footer__about {
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.66);
    max-width: 320px;
    margin: 0 0 28px;
}

.vx-footer__socials {
    display: flex;
    align-items: center;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.vx-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.vx-footer__social:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

.vx-footer__social svg {
    width: 16px;
    height: 16px;
}

.vx-footer__col,
.vx-footer__contact {
    padding-left: 28px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.vx-footer__col-title {
    font-size: 21px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 24px;
}

.vx-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vx-footer__list li {
    margin-bottom: 18px;
}

.vx-footer__list li:last-child {
    margin-bottom: 0;
}

.vx-footer__list a {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    transition: color 0.2s ease;
}

.vx-footer__list a:hover {
    color: #ffffff;
}

/* contact column */
.vx-footer__contact-address {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 22px;
    max-width: 250px;
}

.vx-footer__contact-item {
    margin-bottom: 18px;
}

.vx-footer__contact-item:last-child {
    margin-bottom: 0;
}

.vx-footer__contact-label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
}

.vx-footer__contact-item a {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: color 0.2s ease;
}

.vx-footer__contact-item a:hover {
    color: #ffffff;
}

/* ---------- Bottom bar ---------- */
.vx-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 26px;
    text-align: center;
}

.vx-footer__copy {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.62);
    margin: 0;
}

.vx-footer__copy a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: color 0.2s ease;
}

.vx-footer__copy a:hover {
    color: #ffffff;
}

.vx-footer__dot {
    margin: 0 12px;
    color: rgba(255, 255, 255, 0.4);
}

/* ---------- Scroll-to-top ---------- */
.vx-footer__totop {
    position: absolute;
    right: 40px;
    bottom: 40px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(140deg, #c074e6 0%, #8e3fd0 100%);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(142, 63, 208, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vx-footer__totop:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(142, 63, 208, 0.55);
}

.vx-footer__totop svg {
    width: 20px;
    height: 20px;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .vx-footer {
        padding: 56px 0 24px;
    }

    .vx-footer__news-row {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-bottom: 48px;
    }

    .vx-footer__news-intro {
        margin-left: 0;
    }

    .vx-footer__main {
        grid-template-columns: 1fr 1fr;
        gap: 36px 32px;
    }

    .vx-footer__brand {
        grid-column: 1 / -1;
    }

    .vx-footer__col,
    .vx-footer__contact {
        padding-left: 0;
        border-left: none;
    }

    .vx-footer__totop {
        right: 20px;
        bottom: 20px;
    }
}

@media (max-width: 575.98px) {
    .vx-footer__main {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .vx-footer__news-title {
        font-size: 30px;
    }
}

/* ==========================================================================
   Unified eyebrow / section-label — pill / chip badge (site-wide)
   ========================================================================== */
.abt-eyebrow,
.abt-cover__eyebrow,
.sv2-eyebrow,
.vins__eyebrow,
.static-eyebrow,
.contact-eyebrow,
.svacc__tag,
.uae-expertise__tag,
.uae-stats__tag,
.uae-cases__tag,
.uae-insights__tag,
.uae-why__tag,
.uae-contact__tag,
.uae-faq__tag,
.uae-cta__tag,
.uae-finsights__tag,
.sv2-eyebrow--light {
    display: inline-block !important;
    width: auto !important;
    max-width: max-content !important;
    align-self: flex-start !important;   /* don't stretch inside flex columns */
    justify-self: start !important;      /* don't stretch inside grid cells   */
    font-family: var(--font-base) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 7px 14px !important;
    color: #0053B7 !important;
    background: rgba(0, 83, 183, 0.09) !important;
}

/* Light pill — eyebrows on dark / coloured backgrounds */
.uae-cta__tag,
.uae-finsights__tag,
.sv2-eyebrow--light {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.16) !important;
}

/* Drop the old leading line / dot inside eyebrows */
.abt-eyebrow::before,
.abt-cover__dot {
    display: none !important;
}