/* ============================================================
   BLUE SPIRE — Design System
   Bold. Brutal. Contemporary American Tech.
   ============================================================ */

/* Type uses the system Helvetica stack — no web fonts loaded. */

:root {
    /* --- Color System --- */
    --color-primary:       #2169A3;
    --color-primary-dark:  #2169A3;
    --color-secondary:     #79AFD9;
    --color-tertiary:      #79AFD9;
    --color-brand-gradient: linear-gradient(-60deg, #79AFD9 0%, #2169A3 100%);
    --color-brand-gradient-dark: linear-gradient(-60deg, #154577 0%, #2169A3 100%);
    --color-dark:          #0a0a0f;
    --color-light:         #ffffff;
    --color-white:         #ffffff;
    --color-text:          #0c0c0c;
    --color-text-muted:    #2f2f39;

    /* --- Legacy aliases --- */
    --primary-color:       var(--color-primary);
    --background-color:    var(--color-light);
    --text-color:          var(--color-text);

    /* --- Typography --- */
    --font-family:         Helvetica, "Helvetica Neue", Arial, sans-serif;
    --font-size-base:      1.01rem;
    --line-height-base:    1.6;
    --line-height-heading: 0.96;
    --tracking-tight:      -0.018em;
    --tracking-caps:       0.14em;
    --font-weight-display: 300;
    --font-weight-heading: 500;

    /* --- Spacing --- */
    --space-xs:   0.5rem;
    --space-sm:   1rem;
    --space-md:   2rem;
    --space-lg:   4rem;
    --space-xl:   8rem;

    /* --- Layout --- */
    --max-width:              1200px;
    --carousel-height:        82vh;
    --carousel-mobile-height: 55vh;

    /* --- Borders --- */
    --border-heavy:  5px solid var(--color-primary);
    --border-medium: 3px solid var(--color-primary);
    --border-light:  1px solid rgba(45, 53, 240, 0.15);
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background: var(--color-light);
    -webkit-font-smoothing: antialiased;
    padding-top: 60px;
}

body.has-subheader {
    padding-top: 86px;
}

/* Prose links: make inline content links stand out without affecting UI components. */
main p a,
main li a,
main td a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

main p a:hover,
main li a:hover,
main td a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Headings — bold, tight, uppercase ready */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-display);
    letter-spacing: var(--tracking-tight);
}

h1 { font-size: clamp(2.1rem, 6vw, 4.7rem); }
h2 { font-size: clamp(1.7rem, 3.8vw, 3rem); }
h3 { font-size: clamp(1.15rem, 2.3vw, 1.65rem); }
h4 { font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; }

p { margin: 0 0 1rem; }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.container {
    max-width: var(--max-width);
    margin: 0 auto;
}

/* ============================================================
   HEADER & NAV
   ============================================================ */

header,
.site-header {
    background-color: var(--color-white);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.site-header.is-scrolled {
    background: var(--color-white);
}

.site-header.is-hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

#site-nav {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 60px;
    position: relative;
}

/* Header wordmark */
.logo-b-wrap {
    display: flex;
    align-items: center;
    padding: 0.65rem 0.75rem;
    flex-shrink: 0;
    text-decoration: none;
    height: 60px;
}

.logo-wordmark {
    display: block;
    width: clamp(170px, 19vw, 248px);
    height: auto;
}

/* SVG fill — white on blue bg, blue on white bg */
.logo-fill {
    fill: var(--color-primary);
    transition: fill 0.35s ease;
}

.site-header.is-scrolled .logo-b-svg .logo-fill {
    fill: var(--color-primary);
}

/* Nav links */
#nav-links {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
    height: 100%;
    will-change: opacity, transform;
}

#nav-links .nav-item {
    position: relative;
    
    align-items: stretch;
}

#nav-links li a {
    display: flex;
    align-items: center;
    height: 100%;
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0 1.1rem;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    text-decoration: none;
}

.site-header.is-scrolled #nav-links li a { color: var(--color-primary); }

.site-header.is-scrolled .nav-submenu-toggle { color: var(--color-primary); }

#nav-links li a:hover {
    background: rgba(45,53,240,0.1);
    color: var(--color-primary);
    text-decoration: none;
}

.nav-submenu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-primary);
    width: 1.75rem;
    height: 1.75rem;
    margin-left: 0.1rem;
    padding: 0;
    cursor: pointer;
}

.nav-parent-row {
    display: flex;
    align-items: stretch;
    align-self: stretch;
}

.nav-parent-link,
.nav-submenu-title {
    display: flex;
    align-items: center;
    height: 100%;
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0 1.1rem;
    white-space: nowrap;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-parent-link:hover,
.nav-submenu-title:hover {
    background: rgba(45,53,240,0.1);
    text-decoration: none;
}

.nav-submenu-caret {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid currentColor;
    flex-shrink: 0;
    transition: none;
}

.has-submenu:hover .nav-submenu-caret,
.has-submenu:focus-within .nav-submenu-caret {
    transform: none;
}

.has-submenu.open .nav-submenu-caret {
    transform: none;
}

.nav-submenu {
    display: none;
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    margin: 0;
    padding: 0;
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    border-top: none;
    z-index: 120;
}

.has-submenu:hover .nav-submenu,
.has-submenu:focus-within .nav-submenu,
.has-submenu.open .nav-submenu {
    display: block;
}

.nav-submenu li {
    border-bottom: 1px solid rgba(45,53,240,0.1);
}

.nav-submenu li:last-child {
    border-bottom: none;
}

#nav-links .nav-submenu li a {
    display: block;
    color: var(--color-primary);
    padding: 0.9rem 1rem 0.9rem 1.8rem;
    font-size: 0.74rem;
    text-transform: none;
    letter-spacing: 0.01em;
    white-space: normal;
}

.sub-header {
    border-top: 1px solid rgba(45,53,240,0.08);
    border-bottom: 1px solid rgba(45,53,240,0.12);
    background: rgba(45,53,240,0.03);
}

.sub-header-inner {
    width: min(94vw, 1280px);
    margin: 0 auto;
    padding: 0.22rem 0;
}

.breadcrumbs {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem 0.45rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.breadcrumbs a {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

#nav-links li a.nav-cta {
    background: var(--color-brand-gradient);
    color: var(--color-white) !important;
    padding: 0 1.5rem;
    border-left: 4px solid var(--color-secondary);
}

@media (min-width: 769px) {
    #nav-links > li {
        display: flex;
        align-items: stretch;
    }

    .nav-parent-row {
        height: 100%;
    }
}

.site-header.is-scrolled #nav-links li a.nav-cta {
    background: var(--color-brand-gradient);
    color: var(--color-white) !important;
}

#nav-links li a.nav-cta:hover {
    background: var(--color-brand-gradient) !important;
    color: var(--color-white) !important;
}

/* Hamburger */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    width: 52px;
    height: 52px;
    color: var(--color-primary);
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    position: relative;
    align-items: center;
    justify-content: center;
}

.nav-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    position: absolute;
    left: 50%;
    margin-left: -11px;
    transition: transform 0.22s ease, opacity 0.18s ease;
}

.nav-toggle-bar:nth-child(1) {
    transform: translateY(-7px);
}

.nav-toggle-bar:nth-child(2) {
    transform: translateY(0);
}

.nav-toggle-bar:nth-child(3) {
    transform: translateY(7px);
}

.site-header.is-scrolled .nav-toggle { color: var(--color-primary); }

.nav-close {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--color-white);
    cursor: pointer;
    align-self: flex-end;
    padding: 1rem;
    line-height: 1;
}

@media (max-width: 768px) {
    .nav-toggle {
        display: inline-flex;
        z-index: 260;
    }

    body.nav-open {
        overflow: hidden;
    }

    #site-nav::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(8, 12, 20, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 210;
    }

    #site-nav.open::after {
        opacity: 1;
        pointer-events: auto;
    }

    #nav-links {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(320px, 92vw);
        background: var(--color-white);
        gap: 0;
        z-index: 240;
        margin: 0;
        align-items: stretch;
        transform: translateX(102%);
        transition: transform 0.24s ease;
        overflow-y: auto;
    }

    #site-nav.open #nav-links {
        transform: translateX(0);
    }

    #nav-links li { width: 100%; border-bottom: 1px solid rgba(45,53,240,0.12); }

    #nav-links li a {
        padding: 1.1rem 1.5rem;
        font-size: 1rem;
        color: var(--color-primary) !important;
        min-height: 52px;
        display: flex;
        align-items: center;
    }

    .nav-submenu-toggle {
        display: none;
    }

    .nav-parent-row {
        width: 100%;
        display: flex;
        align-items: stretch;
    }

    .nav-parent-link,
    .nav-submenu-title {
        padding: 1.1rem 1.5rem;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-primary);
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        min-height: 52px;
    }

    #nav-links > li:not(.has-submenu) > a {
        padding-left: 2rem;
    }

    #nav-links > li.has-submenu > .nav-parent-row > .nav-parent-link,
    #nav-links > li.has-submenu > .nav-parent-row > .nav-submenu-title {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .nav-submenu {
        position: static;
        min-width: 100%;
        display: block;
        border: none;
    }

    .has-submenu:hover .nav-submenu,
    .has-submenu:focus-within .nav-submenu {
        display: block;
    }

    .nav-submenu li {
        border-bottom: 1px solid rgba(45,53,240,0.1);
    }

    #nav-links .nav-submenu li a {
        padding: 0.78rem 1.5rem 0.78rem 3rem;
        font-size: 0.88rem;
        color: var(--color-primary) !important;
        text-transform: none !important;
        letter-spacing: 0.01em;
        font-weight: 600;
        white-space: normal;
        margin-left: 1.5rem;
        min-height: 46px;
    }

    .nav-submenu-caret {
        display: none;
    }

    .sub-header-inner {
        width: 100%;
        padding: 0.22rem 1rem;
    }

    .breadcrumbs {
        font-size: 0.65rem;
        letter-spacing: 0.04em;
        row-gap: 0.2rem;
    }

    #nav-links li a.nav-cta {
        border-left: none;
        border-top: 4px solid var(--color-primary);
        background: var(--color-brand-gradient);
        color: var(--color-white) !important;
        font-weight: 900;
        min-height: 58px;
        justify-content: center;
        letter-spacing: 0.11em;
    }

    .nav-close {
        display: none !important;
    }

    #site-nav.open .nav-toggle-bar:nth-child(1) {
        transform: translateY(0) rotate(45deg);
    }

    #site-nav.open .nav-toggle-bar:nth-child(2) {
        opacity: 0;
    }

    #site-nav.open .nav-toggle-bar:nth-child(3) {
        transform: translateY(0) rotate(-45deg);
    }
}

/* ============================================================
   FOOTER
   ============================================================ */

footer {
    background-color: var(--color-white);
    color: var(--color-text);
    font-size: 0.875rem;
    border-top: 5px solid var(--color-primary);
}

.footer-inner {
    display: grid;
    grid-template-columns: minmax(260px, 1.2fr) minmax(0, 2fr);
    align-items: start;
        padding: clamp(3rem, 6vw, 9rem) var(--space-lg) clamp(2.5rem, 5vw, 8rem);
}

.footer-brand {
    padding-right: clamp(0.5rem, 1.5vw, 1rem);
    display: flex;
    flex-direction: column;
    text-align: left;
}

.footer-brand-copy {
    margin: 1rem 0 0;
    max-width: 30ch;
    font-size: 0.875rem;
    line-height: 1.65;
    color: rgba(12,12,12,0.6);
}

.footer-nav-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: clamp(0.75rem, 1.8vw, 1.35rem);
}

.footer-col {
    min-width: 140px;
}

.footer-col--compact h4 {
    margin-bottom: 0.45rem;
}

.footer-col h4 {
    color: var(--color-text);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
    font-weight: 800;
}

.footer-logo {
    color: var(--color-primary);
    font-size: clamp(1.7rem, 2.4vw, 2.4rem);
    line-height: 1;
    width: 300px;
}

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 0; }

.footer-links a {
    color: rgba(12,12,12,0.72);
    font-size: 0.875rem;
    font-weight: 400;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--color-text);
    text-decoration: underline;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    border-top: 1px solid rgba(12,12,12,0.12);
    padding: 1.25rem var(--space-md);
    color: rgba(12,12,12,0.55);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.footer-bottom p {
    margin: 0;
}

.footer-social-links {
    display: flex;
    align-items: center;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-social-links a {
    color: rgba(12,12,12,0.8);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-legal-links li {
    margin: 0;
}

.footer-legal-links a {
    color: rgba(12,12,12,0.55);
    font-size: 0.78rem;
}

.logo-img-footer {
    height: 70px;
    margin-bottom: var(--space-sm);
}

@media (max-width: 768px) {
    .footer-inner {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        padding: var(--space-lg) var(--space-sm);
    }

    .footer-nav-grid {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
        gap: 1rem;
    }

    .footer-col { min-width: unset; }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.25rem var(--space-sm);
    }

    .footer-social-links {
        order: 1;
    }

    .footer-legal-links {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        order: 2;
    }

    .footer-bottom p {
        order: 3;
    }

    .footer-social-links a,
    .footer-legal-links a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0.1rem 0;
    }
}

/* ============================================================
   CAROUSEL
   ============================================================ */

.carousel {
    position: relative;
    overflow: hidden;
    height: var(--carousel-height);
    background: var(--color-dark);
}

.carousel-item {
    position: absolute;
    inset: 0;
    transform: translateX(100%);
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.18, 1);
}

.carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bottom-heavy gradient so the carousel headline reads on full-clarity imagery
   without dimming the photo itself. */
.carousel-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,15,0.75) 0%, rgba(10,10,15,0.25) 35%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.carousel-text { z-index: 2; }

.carousel-text {
    position: absolute;
    bottom: 12%;
    left: 5%;
    z-index: 2;
    max-width: 70%;
}

/* Yellow accent rule above headline */
.carousel-text::before {
    content: '';
    display: block;
    width: 60px;
    height: 5px;
    margin-bottom: 1.5rem;
}

.carousel-h1 {
    font-size: clamp(2.5rem, 6.8vw, 6.1rem);
    line-height: 0.88;
    color: var(--color-white);
    letter-spacing: -0.02em;
    font-weight: 300;
    text-transform: uppercase;
}

.carousel-button {
    display: inline-block;
    margin-top: 2.5rem;
    background: transparent;
    color: var(--color-white);
    border: 3px solid var(--color-white);
    padding: 0.8rem 2rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font-family: var(--font-family);
}

.carousel-button:hover {
    background: var(--color-brand-gradient);
    border-color: var(--color-secondary);
    color: var(--color-white);
    text-decoration: none;
}

.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: rgba(255,255,255,0.4);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 3;
    padding: 0.5rem;
    transition: color 0.2s;
    line-height: 1;
    font-family: var(--font-family);
}

.carousel-prev { left: 1rem; }
.carousel-next { right: 1rem; }
.carousel-prev:hover, .carousel-next:hover { color: var(--color-secondary); }

.carousel-dots {
    position: absolute;
    bottom: 0.8rem;
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 8px;
    z-index: 3;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

.dot.active {
    background: var(--color-tertiary);
    transform: scale(1.6);
}

@media (max-width: 768px) {
    .carousel { height: var(--carousel-mobile-height); }
    .carousel-text { bottom: 8%; max-width: 90%; }
    .carousel-h1 { font-size: clamp(2rem, 10vw, 3.5rem); }
    .carousel-button {
        font-size: 0.72rem;
        padding: 0.6rem 1.2rem;
        margin-top: 1.5rem;
    }
}

/* ============================================================
   TWO-COL FEATURE BLOCK (homepage)
   ============================================================ */

.two-col-block { display: flex; gap: 0; }

.two-col-block .col {
    flex: 1;
    padding: var(--space-md) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.two-col-block .col:first-child {
    background: var(--color-white);
    color: var(--color-text);
    border-right: 5px solid var(--color-primary);
}

.two-col-block .col:last-child {
    background: var(--color-white);
    color: var(--color-text);
}

.two-col-block .col h3 {
    font-size: 1.4rem;
    font-weight: 100;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: 0.5rem;
    line-height: 1;
}

/* Teal rule under h3 */
.two-col-block .col h3::after {
    content: '';
    display: block;
    width: 36px;
    height: 3px;
    background: var(--color-secondary);
    margin-top: 0.75rem;
}

.two-col-block .col p {
    font-size: 1rem;
    line-height: 1.7;
    opacity: 1;
    flex: 1;
    font-weight: 400;
}

.two-col-block .col a {
    display: inline-block;
    color: var(--color-primary);
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 3px solid var(--color-primary);
    padding-bottom: 3px;
    align-self: flex-start;
    transition: color 0.2s, border-color 0.2s;
    text-decoration: none;
}

.two-col-block .col a:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    text-decoration: none;
}

@media (max-width: 768px) {
    .two-col-block { flex-direction: column; }
    .two-col-block .col { padding: var(--space-sm); }
    .two-col-block .col:first-child { border-right: none; border-bottom: 5px solid var(--color-primary); }
}

/* ============================================================
   SLOGAN / STATEMENT
   ============================================================ */

.slogan {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
}

@media (max-width: 768px) {
    .slogan { padding: var(--space-sm); }
    .slogan--immersive { padding: var(--space-sm); }
}

.slogan h2 {
    font-size: clamp(1.8rem, 4vw, 3.5rem);
    font-weight: var(--font-weight-display);
    text-transform: uppercase;
    letter-spacing: -0.025em;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

.big-text {
    display: block;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 400;
    line-height: 1.55;
    max-width: 760px;
    margin: 0 auto;
    color: var(--color-text-muted);
}

.slogan--immersive {
    position: relative;
    text-align: left;
    padding: clamp(4.5rem, 11vw, 8.5rem) var(--space-md) clamp(3.5rem, 8vw, 6rem);
    margin: 0 auto;
    width: min(92vw, 1240px);
}

.slogan--immersive::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 10% 0%, rgba(70,75,217,0.1) 0%, rgba(70,75,217,0) 65%);
    pointer-events: none;
}

.slogan-inner {
    position: relative;
    z-index: 1;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.slogan--immersive h2 {
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 0.98;
    margin: 0;
}

.slogan--immersive .big-text {
    max-width: 820px;
    margin: 0;
    font-size: clamp(1.08rem, 1.8vw, 1.36rem);
    line-height: 1.75;
}

/* ============================================================
   INSIGHT LAG — prelude + sticky stack
   ------------------------------------------------------------
   .insight-lag           tall outer container, black background
    .insight-lag-prelude   first ~72vh — slogan scrolls naturally over black
   .insight-lag-stage     sticky pin (top:0) — full-bleed cards stack
   .insight-lag-cta       persistent bottom-right CTA inside the stage
   Each tile carries its own centred label/title/desc overlay so that
   the topmost (active) card's content is what reads on screen.
   JS sets section height = preludeHeight + viewport + N × stride
   so card progress only starts after the prelude has scrolled past.
   ============================================================ */

.insight-lag {
    width: 100%;
    margin: 0;
    position: relative;
    /* JS overrides this with an exact pixel height. Fallback for ~6 cards: */
    height: 800vh;
    overflow: visible;
    isolation: isolate;
    background: var(--color-dark);
    color: var(--color-white);
}

/* ── Prelude ─────────────────────────────────────────────── */
.insight-lag-prelude {
    position: relative;
    height: 90vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* Anchored to the lower portion of the viewport so the black space
       above carries weight before the slogan reads. */
    padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(3rem, 10vh, 6rem);
    text-align: center;
    background: var(--color-dark);
    z-index: 2;
}

.insight-lag-prelude__inner {
    position: relative;
    z-index: 3;
    transform: translateY(clamp(0.75rem, 2vh, 1.25rem));
    max-width: 980px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 1.75rem);
}

.insight-lag-prelude h2 {
    font-size: clamp(2.4rem, 7vw, 5.5rem);
    font-weight: 100;
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0;
    max-width: 18ch;
}

.insight-lag-prelude .big-text {
    margin: 0;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    line-height: 1.6;
    color: rgba(255,255,255,0.72);
    max-width: 640px;
    font-weight: 400;
}

.insight-lag-cta-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-white);
    font-weight: 600;
    z-index: 0;
    pointer-events: none;
}

/* ── Stage ───────────────────────────────────────────────── */
.insight-lag-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 540px;
    margin-top: -22vh;
    padding: 0;
    overflow: hidden;
    background: transparent;
    z-index: 1;
}

/* ── Cards layer (full bleed) ────────────────────────────── */
.insight-lag-cards {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.insight-lag-track {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Specificity: chain .insight-lag to beat single-class .card rules later in the file. */
.insight-lag .insight-lag-tile {
    /* JS sets these per-card every scroll frame */
    --stack-y: 110%;
    --stack-scale: 1;

    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    flex-shrink: initial;
    overflow: hidden;

    transform: translate3d(0, var(--stack-y), 0) scale(var(--stack-scale));
    transform-origin: center bottom;
    /* No transition by default — JS sets initial values without animating
       and only enables the transition once the section is marked .is-init. */
    transition: none;
    pointer-events: auto;
    will-change: transform;
    box-shadow: none;
    text-decoration: none;
    color: var(--color-white);
}

.insight-lag.is-init .insight-lag-tile {
    transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.insight-lag .insight-lag-tile:nth-child(odd),
.insight-lag .insight-lag-tile:nth-child(even) {
    align-self: auto;
    margin: 0;
}

/* No hover dim, no hover lift */
.insight-lag .insight-lag-tile:hover {
    transform: translate3d(0, var(--stack-y), 0) scale(var(--stack-scale));
}

/* Image fills card at full clarity — no opacity, no brightness filter.
   Readability for the overlay text comes from the per-tile gradient below. */
.insight-lag .insight-lag-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transform: none;
    transition: none;
    filter: none;
}
.insight-lag .insight-lag-tile:hover img {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Hide the legacy .card-label / .card-title (stack mode uses its own __label/__title) */
.insight-lag .insight-lag-tile .card-label,
.insight-lag .insight-lag-tile .card-title {
    display: none;
}

/* Per-tile gradient overlay — darkens just the corners where text sits
   (top-left for the eyebrow, bottom for title/desc/CTA), keeps the image
   centre at full clarity. Replaces the global brightness filter. */
.insight-lag .insight-lag-tile::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to top, rgba(10,10,15,0.78) 0%, rgba(10,10,15,0.25) 38%, rgba(10,10,15,0) 60%),
        linear-gradient(to bottom right, rgba(10,10,15,0.55) 0%, rgba(10,10,15,0) 28%);
    height: 100%;
}

/* ── Per-card overlay: label top-left, title/desc/more stack bottom-left ──
   Bottom padding matches .insight-lag-cta's bottom offset so the
   "Read case study →" link and the "View All Insights →" CTA share a baseline.
   z-index 3 to sit above both the image (no z-index) and ::after gradient (z-1). */
.insight-lag-tile__content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 4rem);
    gap: 1rem;
    pointer-events: none;
    color: var(--color-white);
}

.insight-lag-tile__label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-tertiary);
    padding: 0.25rem 0.75rem;
    border-left: 3px solid var(--color-tertiary);
}

.insight-lag-tile__bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: min(620px, 80%);
}

.insight-lag-tile__title {
    font-size: clamp(2.2rem, 4.8vw, 1.7rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-white);
    margin: 0;
    text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}

.insight-lag-tile__desc {
    margin: 0;
    font-size: clamp(0.85rem, 1.05vw, 0.95rem);
    line-height: 1.55;
    color: rgba(255,255,255,0.78);
    max-width: 56ch;
    text-shadow: 0 2px 14px rgba(0,0,0,0.45);
}

.insight-lag-tile__more {
    margin-top: 0.5rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-white);
    border-bottom: 2px solid var(--color-tertiary);
    padding-bottom: 0.25rem;
}

/* ── Persistent CTA, bottom-right of the pin ─────────────── */
.insight-lag-cta {
    position: absolute;
    right: clamp(1.5rem, 4vw, 4rem);
    bottom: clamp(1.5rem, 4vw, 3rem);
    z-index: 5;
    color: var(--color-white);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--color-tertiary);
    padding-bottom: 0.25rem;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
}
.insight-lag-cta:hover {
    color: var(--color-tertiary);
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .insight-lag .insight-lag-tile {
        --stack-y: 0px;
        --stack-scale: 1;
        transition: none;
    }
    .insight-lag .insight-lag-tile:hover {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* ── Responsive: ≤900px uses lightweight horizontal-card fallback ──
   This avoids heavy per-frame scroll transforms on mobile while
   keeping the same insights content and visual style. */
@media (max-width: 900px) {
    .insight-lag {
        height: auto !important;
    }

    .insight-lag-stage {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
        margin-top: 0;
        overflow: visible;
    }

    .insight-lag-prelude{
            height: 42vh;
    }

    .insight-lag-prelude h2 {
        font-size: clamp(2rem, 9vw, 3.4rem);
    }
    .insight-lag-prelude .big-text {
        font-size: clamp(0.95rem, 3.6vw, 1.1rem);
    }

    .insight-lag-cards {
        position: relative;
        inset: auto;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding: 0 1rem 1rem;
    }

    .insight-lag-cards::-webkit-scrollbar {
        display: none;
    }

    .insight-lag-track {
        position: relative;
        inset: auto;
        display: flex;
        gap: 0.75rem;
        width: max-content;
        pointer-events: auto;
        padding-bottom: var(--space-md);
    }

    .insight-lag .insight-lag-tile {
        position: relative;
        inset: auto;
        width: clamp(235px, 80vw, 320px);
        height: 380px;
        flex-shrink: 0;
        scroll-snap-align: start;
        transform: none !important;
        transition: transform 0.25s ease;
    }

    /* Slim per-card overlay for portrait phones. */
    .insight-lag-tile__content {
        padding: clamp(1rem, 5vw, 1.5rem);
        gap: 0.75rem;
    }
    .insight-lag-tile__title {
        font-size: clamp(1.05rem, 4.4vw, 1.4rem);
    }
    .insight-lag-tile__desc {
        display: none;  /* tight space on mobile — title + label + CTA carry it */
    }
    .insight-lag-tile__more,
    .insight-lag-cta {
        font-size: 0.66rem;
        letter-spacing: 0.1em;
    }

    .insight-lag-cta {
        right: clamp(1rem, 5vw, 1.5rem);
        bottom: clamp(1rem, 5vw, 1.5rem);
    }
}

/* ============================================================
   HORIZONTAL SCROLL CARDS
   ============================================================ */

.cards-section {
    padding: var(--space-lg) 0;
    background: var(--color-dark);
    border-top: 5px solid var(--color-primary);
}

.cards-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 var(--space-md) var(--space-md);
    gap: 1rem;
}

.cards-section-header h2 {
    color: var(--color-white);
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: var(--font-weight-display);
    text-transform: uppercase;
    letter-spacing: var(--tracking-tight);
}

.cards-section-header a {
    color: var(--color-secondary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    border-bottom: 2px solid var(--color-secondary);
    padding-bottom: 2px;
    transition: color 0.2s;
}

.cards-section-header a:hover {
    color: var(--color-white);
    border-color: var(--color-white);
    text-decoration: none;
}

.cards {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 0 var(--space-md) var(--space-sm);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.cards::-webkit-scrollbar { display: none; }

.card {
    flex-shrink: 0;
    width: clamp(260px, 28vw, 360px);
    height: 460px;
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
    cursor: pointer;
}

.card:last-child { border-right: none; }

.card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s, transform 0.5s;
}

.card:hover img {
    transform: scale(1.04);
}

/* Bottom gradient for readability */
.card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65%;
    background: linear-gradient(to top, rgba(10,10,15,0.95) 0%, transparent 100%);
    z-index: 1;
}

.card-label {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    z-index: 2;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-secondary);
    padding: 0.25rem 0.6rem;
    border-left: 3px solid var(--color-secondary);
}

.card-title {
    position: absolute;
    bottom: 1.5rem;
    left: 1.2rem;
    right: 1.2rem;
    z-index: 2;
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.card-arrow {
    position: absolute;
    bottom: 1.5rem;
    right: 1.2rem;
    z-index: 2;
    color: var(--color-tertiary);
    font-size: 1.2rem;
    font-weight: 100;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.3s, transform 0.3s;
}

.card:hover .card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Scroll hint — fades after interaction */
.cards-scroll-hint {
    padding: 0.5rem var(--space-md) 0;
    color: rgba(255,255,255,0.3);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: none;
    align-items: center;
    gap: 0.5rem;
}

.cards-scroll-hint::before {
    content: '←→';
    font-size: 0.8rem;
    color: var(--color-secondary);
}

@media (max-width: 768px) {
    .card {
        width: clamp(220px, 80vw, 300px);
        height: 380px;
    }
    .cards-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0 var(--space-sm) var(--space-sm);
    }
    .cards { padding: 0 var(--space-sm) var(--space-sm); }
}

/* ============================================================
   CTA STRIP
   ============================================================ */

.cta-strip {
    background: var(--color-brand-gradient-dark);
    color: var(--color-white);
    text-align: center;
    padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 5vw, 5rem);
}

/* Split variant: image + content side-by-side */
.cta-strip--split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    align-items: center;
    text-align: left;
}

.cta-strip--split .cta-strip__media {
    height: 450px;
    background-size: cover;
    background-position: center;
}

.cta-strip--split .cta-strip__content {
    max-width: 560px;
}

.cta-strip h2 {
    font-size: clamp(1.75rem, 4.2vw, 3.2rem);
    margin-bottom: 1rem;
    font-weight: var(--font-weight-display);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--color-white);
}

.cta-strip p {
    
    margin: 0 auto 2.5rem;
    color: rgba(255,255,255,0.86);
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 400;
}

.cta-strip__actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1rem;
    flex-direction: row;
}

.cta-strip__actions .btn-outline {
    margin-left: 0;
}

.cta-card {
    display: inline-block;
    background: var(--color-brand-gradient);
    color: var(--color-white);
    padding: 0.8rem 2rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font-family: var(--font-family);
    grid-column: span 2;
}

.cta-card .service-eyebrow,
.cta-card h2,
.cta-card p,
.cta-card .capability-card-link {
    color: var(--color-white);
}

.cta-card .capability-card-link {
    border-top-color: rgba(255,255,255,0.25);
}

.cta-card:hover {
    background: var(--color-dark);
    color: var(--color-white);
    text-decoration: none;
}

.cta-card:hover .service-eyebrow,
.cta-card:hover h2,
.cta-card:hover p,
.cta-card:hover .capability-card-link {
    color: var(--color-white);
}

@media (max-width: 768px) {
    .cta-strip--split {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .cta-strip--split .cta-strip__content {
        max-width: none;
        display: flex;
        flex-direction: column;
        
        gap: 1rem;
    }
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font-family: var(--font-family);
    text-decoration: none;
}

.btn-primary {
    background: var(--color-brand-gradient);
    color: var(--color-white);
    border: 3px solid var(--color-primary);
}

.btn-primary:hover {
    background: var(--color-brand-gradient);
    border-color: var(--color-secondary);
    color: var(--color-white);
    text-decoration: none;
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 3px solid var(--color-primary);
    margin-left: 1rem;
}

.btn-outline:hover {
    background: var(--color-brand-gradient);
    border-color: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
}

/* Buttons on blue/dark backgrounds — white outline, black hover */
.cta-strip .btn,
.cta-strip .btn-primary,
.cta-strip .btn-outline {
    background: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.cta-strip .btn:hover,
.cta-strip .btn-primary:hover,
.cta-strip .btn-outline:hover {
    background: var(--color-dark);
    border-color: var(--color-dark);
    color: var(--color-white);
    text-decoration: none;
}

@media (max-width: 768px) {
    .btn-outline { margin-left: 0; }
    .btn { display: inline-block; }

    .cta-strip__actions {
        flex-direction: column;
        align-items: center;
    }

    .cta-strip__actions .btn {
        width: min(100%, 360px);
    }

    .cta-strip:not(.cta-strip--split) .btn {
        display: block;
        margin: 0.5rem auto 0;
    }
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.form-row{
    display: flex;
    gap: var(--space-md);
}

   .form-group{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
        width: 100%;
}

.form-group label{
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-primary);
        width: 100%;
}

.form-group select {
    padding: 0.75rem 1rem;
    border: 2px solid rgba(45,53,240,0.15);
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.2s;
    width: 100%;
    min-height: 48px;
    appearance: none;
    background-color: var(--color-white);
    background-image: linear-gradient(45deg, transparent 50%, var(--color-primary) 50%), linear-gradient(135deg, var(--color-primary) 50%, transparent 50%);
    background-position: calc(100% - 19px) calc(50% - 3px), calc(100% - 13px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.form-group input,
.form-group textarea {
    padding: 0.75rem 1rem;
    border: 2px solid rgba(45,53,240,0.15);
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.2s;
    width: 100%;
    min-height: 48px;
    background: var(--color-white);
}   
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--color-primary);
    outline: none;
}

.form-group textarea {
    min-height: 132px;
    resize: vertical;
}

/* ============================================================
   HERO FULLBLEED
   ============================================================ */

.hero-fullbleed {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--color-dark);
    border-bottom: 5px solid var(--color-primary);
    min-height: clamp(340px, 55vh, 600px);
}

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

/* Gradient over image */
.hero-fullbleed::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,15,0.85) 30%, transparent 100%);
    z-index: 1;
}

.hero-fullbleed-content {
    position: relative;
    z-index: 2;
    padding: var(--space-lg) var(--space-md);
    max-width: 900px;
}

@media (max-width: 768px) {
    .hero-fullbleed-content { padding: var(--space-sm) var(--space-sm); }
}

.hero-fullbleed-content h1 {
    font-size: clamp(2.2rem, 5.8vw, 4.5rem);
    color: var(--color-white);
    font-weight: var(--font-weight-display);
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 0.92;
    margin-bottom: 1.5rem;
}

/* Yellow accent line above h1 */
.hero-fullbleed-content h1::before {
    content: '';
    display: block;
    width: 60px;
    height: 5px;
    margin-bottom: 1.5rem;
    
}

.hero-fullbleed-content p {
    color: rgba(255,255,255,0.75);
    font-size: 1.1rem;
    line-height: 1.65;
    max-width: 560px;
    margin: 0;
    font-weight: 400;
}

/* ============================================================
   ACCORDION
   ============================================================ */

.accordion-section {
    margin: 0 20%;
    padding: var(--space-lg) 0;
}

.accordion-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 5px solid var(--color-primary);
}

.accordion-item {
    border-top: 5px solid var(--color-primary);
    overflow: hidden;
}

.accordion-trigger {
    width: 100%;
    background: none;
    border: none;
    padding: 2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    gap: 2rem;
    font-family: var(--font-family);
    transition: background 0.15s;
}

.accordion-trigger:hover {
    background: rgba(45, 53, 240, 0.03);
}

.accordion-title {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: var(--font-weight-display);
    color: var(--color-primary);
    line-height: 1.08;
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
}

.accordion-icon {
    font-size: 2rem;
    color: var(--color-primary);
    font-weight: 100;
    flex-shrink: 0;
    transition: transform 0.3s;
    line-height: 1;
    width: 2rem;
    text-align: center;
}

.accordion-item.open .accordion-icon {
    transform: rotate(45deg);
    color: var(--color-secondary);
}

.accordion-item.open .accordion-title {
    color: var(--color-dark);
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.26s ease;
    padding: 0;
    margin-bottom: var(--space-sm);
    will-change: max-height;
}

.accordion-item.open .accordion-body {
    padding: 0 0 var(--space-md);
}

.accordion-body p,
.accordion-body ul {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.75;
    max-width: 680px;
    font-weight: 400;
}

.accordion-body ul {
    padding-left: 0;
    list-style: none;
}

.accordion-body ul li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.accordion-body ul li:last-child { border-bottom: none; }

.employee-testimonials {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    max-width: 100%;
    margin-top: 0.25rem;
    margin-bottom: var(--space-sm);
}

.employee-testimonial {
    border: 1px solid rgba(45,53,240,0.16);
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(245,245,250,0.92) 100%);
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.employee-testimonial-photo {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    object-fit: cover;
    border: 3px solid var(--color-primary);
    background: #e8ebff;
}

.employee-testimonial blockquote {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.96rem;
    line-height: 1.65;
}

.employee-testimonial-name {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

@media (max-width: 1024px) {
    .accordion-section { margin: 0 10%; }
}

@media (max-width: 768px) {
    .accordion-section {
        margin: 0 1.5rem;
        padding: var(--space-sm) 0;
    }

    .accordion-trigger { padding: 1.5rem 0; gap: 1rem; }

    .accordion-title {
        font-size: clamp(1rem, 4vw, 1.3rem);
    }

    .accordion-icon { font-size: 1.6rem; }

    .employee-testimonials {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   TWO-COLUMN LAYOUT (sticky visual — service pages)
   ============================================================ */

.two-col-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

.two-col-content {
    padding: clamp(3rem, 6vw, 6rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-md);
    border-right: 5px solid var(--color-primary);
}

.two-col-visual {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.two-col-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 900px) {
    .two-col-main { grid-template-columns: 1fr; }
    .two-col-content {
        border-right: none;
        border-top: 5px solid var(--color-primary);
        border-bottom: none;
        order: 2;
        padding: var(--space-sm);
    }
    .two-col-visual {
        position: relative;
        height: 70vh;
        min-height: 320px;
        order: 1;
    }
    .landing-main{
        padding: var(--space-sm) var(--space-sm) !important;
    }
}

/* ============================================================
   SERVICE / INDUSTRY PAGES
   ============================================================ */

.service-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: 1rem;
}

.service-header {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
}

.service-header h1 {
    font-size: clamp(1.9rem, 4.4vw, 3.1rem);
    font-weight: var(--font-weight-display);
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.service-lead {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    max-width: 540px;
    margin-top: 1rem;
    font-weight: 400;
}

.service-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.service-body h2 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--color-primary);
    line-height: 1;
}

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

.capability-list li {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text);
    font-weight: 400;
}

.capability-list li:last-child { border-bottom: none; }

.stat-row {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin: var(--space-sm) 0;
}

.stat {
    flex: 1;
    min-width: 140px;
    padding: var(--space-sm);
    border-left: 5px solid var(--color-tertiary);
    background: rgba(245,245,0,0.04);
}

.stat-number {
    display: block;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 100;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 0.4rem;
    letter-spacing: -0.02em;
}

.stat-label {
    display: block;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    font-weight: 500;
}

.compliance-bar {
    background: var(--color-dark);
    color: var(--color-white);
    padding: var(--space-md);
    margin-top: var(--space-md);
    border-left: 5px solid var(--color-secondary);
}

.compliance-bar h2 {
    color: var(--color-secondary) !important;
    border-bottom-color: rgba(10,191,163,0.3) !important;
    letter-spacing: 0.16em;
    font-size: 0.72rem !important;
}

.compliance-bar p {
    color: rgba(255,255,255,0.65);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    margin: 0;
}

.service-cta {

}

/* Experimental template: single-column focus layout for service pages */
.service-focus-main {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
}

.service-focus-main .service-header {
    margin-bottom: 0;
    padding-bottom: clamp(1rem, 1.8vw, 1.4rem);
    border-bottom: 1px solid rgba(33, 105, 163, 0.18);
}

.service-focus-flow {
    display: grid;
    gap: clamp(0.9rem, 1.6vw, 1.2rem);
}

.service-focus-panel {
    position: relative;
    border: var(--border-light);
    background: linear-gradient(180deg, rgba(33, 105, 163, 0.03) 0%, rgba(255, 255, 255, 0.96) 100%);
    padding: clamp(1.1rem, 2.3vw, 1.6rem);
}

.service-focus-panel::before {
    content: attr(data-part);
    position: absolute;
    top: 0.95rem;
    right: 1rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    color: rgba(33, 105, 163, 0.7);
}

.service-focus-head {
    margin-bottom: 1rem;
}

.service-focus-head h2 {
    margin-bottom: 0.65rem;
}

.service-focus-head p,
.service-focus-copy {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.75;
    color: var(--color-text-muted);
}

.service-step-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.service-step-card {
    background: var(--color-white);
    border-left: 4px solid var(--color-primary);
    padding: 1rem 1rem 1.15rem;
    box-shadow: 0 8px 26px rgba(14, 21, 27, 0.06);
}

.service-step-kicker {
    margin: 0 0 0.45rem;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-secondary);
}

.service-step-title {
    margin: 0;
    font-size: clamp(1.08rem, 2vw, 1.28rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--color-text);
    text-transform: none;
}

.service-step-copy {
    margin: 0.7rem 0 0;
    font-size: 0.94rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.service-insight-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.service-insight-list li {
    display: grid;
    grid-template-columns: minmax(170px, 220px) 1fr;
    gap: 1rem;
    padding: 0.95rem;
    border: 1px solid rgba(12, 12, 12, 0.08);
    background: var(--color-white);
}

.service-insight-title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    line-height: 1.35;
    color: var(--color-primary);
}

.service-insight-copy {
    margin: 0;
    font-size: 0.93rem;
    color: var(--color-text-muted);
    line-height: 1.72;
}

.service-proof-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.service-proof-card {
    border-left: 5px solid var(--color-secondary);
    background: rgba(33, 105, 163, 0.06);
    padding: 1rem;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service-focus-panel--note {
    background: linear-gradient(125deg, rgba(33, 105, 163, 0.95), rgba(25, 80, 130, 0.95));
    color: var(--color-white);
}

.service-focus-panel--note .service-focus-head h2 {
    color: var(--color-secondary);
    border-bottom-color: rgba(121, 175, 217, 0.4);
}

.service-focus-panel--note .service-focus-copy {
    color: rgba(255, 255, 255, 0.87);
}

.service-cta--test {
    margin-top: 0.5rem;
}

/* ============================================================
   SERVICE SCROLL TEST 2 — sticky left heading, scrolling right
   ============================================================ */

.sfx-main {
   
}

.sfx-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: clamp(340px, 46vh, 520px);
    border-bottom: 5px solid var(--color-primary);
}

.sfx-hero-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 3vw, 3rem);
    max-width: none;
}

.sfx-hero-inner .service-lead {
    max-width: 540px;
}

.sfx-hero-img {
    overflow: hidden;
}

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

.sfx-body {
    max-width: 1140px;
    padding: 0 clamp(1.5rem, 3vw, 3rem);
}

.sfx-row {
    display: grid;
    grid-template-columns: clamp(180px, 26%, 280px) 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    padding: clamp(2rem, 4vw, 3.5rem) 0;
    align-items: start;
    border-bottom: 1px solid rgba(33, 105, 163, 0.15);
}

.sfx-row--long {
    min-height: clamp(500px, 82vh, 780px);
}

.sfx-row:last-of-type {
    border-bottom: 1px solid rgba(33, 105, 163, 0.15);
}

.sfx-row--compact {
    min-height: auto;
    padding: clamp(1.5rem, 2.8vw, 2.5rem) 0;
}

.sfx-label {
    position: sticky;
    top: 132px;
    align-self: start;
    height: fit-content;
}

.sfx-num {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    color: var(--color-secondary);
    margin-bottom: 0.6rem;
}

.sfx-label h2 {
    font-size: clamp(1.05rem, 1.8vw, 1.4rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-primary);
}

.sfx-content {
    display: flex;
    flex-direction: column;
    gap: clamp(1.6rem, 3.2vw, 2.8rem);
}

.sfx-content p {
    font-size: 0.97rem;
    line-height: 1.78;
    color: var(--color-text-muted);
    margin: 0;
}

.sfx-content > p {
    max-width: 780px;
    padding-bottom: clamp(1.2rem, 2.8vh, 2.4rem);
    border-bottom: 1px solid rgba(33, 105, 163, 0.12);
}

.sfx-content > p:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sfx-content .service-step-list {
    gap: clamp(1.4rem, 4vh, 3rem);
}

.sfx-content .service-step-card {
    min-height: 160px;
}

.sfx-content .service-insight-list {
    gap: clamp(1rem, 2.6vh, 1.9rem);
}

.sfx-content .service-insight-list li {
    min-height: 130px;
    align-items: start;
}

.sfx-content .service-proof-grid {
    gap: clamp(1rem, 2.6vh, 1.8rem);
}

.sfx-content .service-proof-card {
    min-height: 150px;
}

.sfx-row--compact .sfx-content {
    gap: 1rem;
}

.sfx-row--compact .sfx-content > p {
    min-height: auto;
    padding-bottom: 0;
    border-bottom: none;
}

.sfx-row--compact .service-proof-grid,
.sfx-row--compact .service-step-list,
.sfx-row--compact .service-insight-list {
    gap: 1rem;
}

.sfx-row--compact .service-proof-card,
.sfx-row--compact .service-step-card,
.sfx-row--compact .service-insight-list li {
    min-height: auto;
}

.sfx-cta {
    padding: clamp(2rem, 4vw, 3rem) 0;
}

@media (max-width: 860px) {
    .sfx-hero {
        grid-template-columns: 1fr;
    }

    .sfx-hero-img {
        height: clamp(220px, 48vw, 360px);
    }

    .sfx-row {
        grid-template-columns: 1fr;
        gap: 1.2rem;
        min-height: auto;
    }

    .sfx-label {
        position: static;
    }

    .sfx-content > p {
        min-height: auto;
        padding-bottom: 1rem;
    }

    .sfx-content .service-step-card,
    .sfx-content .service-insight-list li,
    .sfx-content .service-proof-card {
        min-height: auto;
    }
}

@media (max-width: 900px) {
    .service-proof-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .service-insight-list li {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* ── Partners ──────────────────────────────────────────────── */

.partners-section {
    padding: var(--space-lg) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: var(--max-width);
    margin: 0 auto;
}

@media (max-width: 768px) {
    .partners-section { padding: var(--space-sm); gap: var(--space-md); }
}

.partner-block {
    padding-bottom: var(--space-lg);
    border-bottom: 3px solid rgba(45,53,240,0.1);
}

.partner-block:last-child { border-bottom: none; }

.partner-header { margin-bottom: var(--space-md); }

.partner-block h2 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.partner-theme {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
    line-height: 1.4;
}

.partner-proof {
    margin-top: var(--space-md);
    padding: var(--space-sm);
    border-left: 5px solid var(--color-tertiary);
    background: rgba(245,245,0,0.04);
    font-size: 0.95rem;
    font-weight: 600;
}

/* ── Contact ───────────────────────────────────────────────── */

.landing-main {
    min-height: 70vh;
    padding: var(--space-lg) var(--space-md);
}

.landing-content { max-width: 900px; }

.contact-hero {
    margin-bottom: var(--space-lg);
}

.contact-hero h1 {
    font-size: clamp(1.9rem, 5.2vw, 4rem);
    font-weight: var(--font-weight-display);
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

@media (max-width: 768px) {
    .contact-grid { grid-template-columns: 1fr; }
    .stat-row { flex-direction: column; }
}

/* ============================================================
   LEADERSHIP PAGE
   ============================================================ */

.leadership-main {
    min-height: 70vh;
}

.leadership-intro {
    background: var(--color-dark);
    color: var(--color-white);
    padding: var(--space-lg) var(--space-md) var(--space-md);
    border-bottom: 5px solid var(--color-primary);
}

.leadership-intro-inner {
    width: min(92vw, 1280px);
    margin: 0 auto;
}

.leadership-intro h1 {
    font-size: clamp(2.2rem, 6vw, 4.8rem);
    font-weight: var(--font-weight-display);
    text-transform: uppercase;
    line-height: 0.94;
    letter-spacing: -0.02em;
    color: var(--color-white);
    margin: 0.5rem 0 1rem;
}

.leadership-intro .service-eyebrow {
    color: var(--color-tertiary);
}

.leadership-intro__sub {
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-weight: 300;
    color: rgba(255,255,255,0.75);
    margin: 0 0 0.75rem;
    max-width: 760px;
}

.leadership-intro__body {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.65);
    max-width: 680px;
    margin: 0;
}

/* ── Cards section ──────────────────────────────────── */

.leadership-cards-section {
    padding: var(--space-lg) var(--space-md);
    background: var(--color-light);
}

.leadership-cards-inner {
    width: min(92vw, 1280px);
    margin: 0 auto;
}

/* ── Grid ───────────────────────────────────────────── */

.leadership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-md);
}

/* ── Bio card ────────────────────────────────────────── */

.bio-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: 2px;
    box-shadow: 0 2px 12px rgba(8,12,20,0.07);
    overflow: hidden;
    transition: box-shadow 0.18s, transform 0.18s;
}

.bio-card:hover {
    box-shadow: 0 6px 28px rgba(8,12,20,0.13);
    transform: translateY(-2px);
}

.bio-card__photo-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.bio-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.bio-card__photo-wrap--placeholder {
    background: rgba(45,53,240,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bio-card__initials {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.03em;
}

.bio-card__body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.bio-card__meta {
    padding-bottom: 0.75rem;
}

.bio-card__name {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: var(--font-weight-display);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--color-text);
    line-height: 1.05;
    margin: 0 0 0.3rem;
}

.bio-card__role {
    margin: 0;
}

.bio-card__bio {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--color-text-muted);
    margin: 0;
    flex: 1;
}

.bio-card__linkedin {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 2px solid rgba(45,53,240,0.12);
    transition: color 0.15s;
}

.bio-card__linkedin:hover {
    color: var(--color-secondary);
    text-decoration: none;
}

.bio-card__linkedin-icon {
    flex-shrink: 0;
}

/* ── Optional extra body content ────────────────────── */

.leadership-body-content {
    padding: var(--space-lg) var(--space-md);
    max-width: 900px;
    margin: 0 auto;
}

/* ── Responsive ─────────────────────────────────────── */

@media (max-width: 768px) {
    .leadership-grid {
        grid-template-columns: 1fr;
    }

    .leadership-intro {
        padding: var(--space-sm) var(--space-sm);
    }

    .leadership-cards-section { padding: var(--space-sm); }

    .bio-card__body { padding: var(--space-sm); }

    .leadership-body-content { padding: var(--space-sm); }
}

/* ============================================================
   LOCATION CARDS (Our Story)
   ============================================================ */

.locations {
    display: flex;
    gap: var(--space-md);
    margin: var(--space-md) 0;
}

.location {
    flex: 1;
    padding: var(--space-sm);
    border-left: 5px solid var(--color-secondary);
    background: rgba(10,191,163,0.04);
}

.location h4 {
    color: var(--color-primary);
    margin-bottom: 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    line-height: 1;
}

.location p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

.contact-offices{
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.contact-form-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: start;
}

.contact-form-container,
.contact-offices {
    padding: var(--space-md);
    border: 5px solid var(--color-primary);
    background: rgba(45,53,240,0.02);
}

.contact-offices {
    padding: 0;
    border: none;
    background: linear-gradient(135deg, #1e5f96 0%, #2169A3 55%, #2e7ab5 100%);
    margin-top: clamp(1.5rem, 4vw, 2.6rem);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(1.2rem, 3vw, 2rem) 0;
}

.contact-form-container h2 {
    font-size: clamp(1.15rem, 2.4vw, 1.6rem);
    line-height: 1.2;
    margin-bottom: var(--space-sm);
}

/* Office two-column layout */
.contact-offices h2 {
    color: var(--color-white);
    width: min(92vw, 1240px);
    margin-left: auto;
    margin-right: auto;
}

.office-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.4rem, 3vw, 2.4rem);
    align-items: start;
    width: min(92vw, 1240px);
    margin: 0 auto;
}

.office-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.office-col--usa {
    padding-right: clamp(0.2rem, 0.8vw, 0.8rem);
    gap: 1rem;
}

.office-col--india {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: clamp(0.2rem, 0.8vw, 0.8rem);
}

/* Column header: country name + big clock */
.office-col-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.86);
    margin-bottom: 0.9rem;
    gap: 0.75rem;
}

.office-country {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-white);
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
}

.office-clock--big {
    font-size: 1.35rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.92);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
}

.office-card {
    position: relative;
    border: 1px solid rgba(33, 105, 163, 0.18);
    padding: 1rem 1.2rem;
    background: var(--color-white);
}

.office-col--usa .office-card {
    height: 100%;
    box-sizing: border-box;
}

.office-role {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 0.55rem;
}

.office-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 0.18rem;
    line-height: 1.25;
}

.office-city {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin: 0 0 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.office-addr {
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--color-text);
    margin: 0;
}

.contact-form-status {
    margin-top: 1rem;
    font-size: 0.95rem;
    min-height: 1.4em;
}
.contact-form-status--loading { color: #666; }
.contact-form-status--success { color: #1a7a4a; font-weight: 600; }
.contact-form-status--error   { color: #c0392b; font-weight: 600; }

@media (max-width: 768px) {
    .locations { flex-direction: column; }

    .contact-form-section {
        grid-template-columns: 1fr;
    }

    .office-cols {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .office-col--usa,
    .office-col--india {
        padding-left: 0;
        padding-right: 0;
    }

    .office-col--india {
        border-left: none;
    }

    .office-country {
        font-size: 1.15rem;
    }

    .office-clock--big {
        font-size: 1.05rem;
    }
}

/* ============================================================
   IMAGE-TEXT LAYOUT (image-text.njk)
   ============================================================ */

/* 1. Banner */
.it-banner {
    background: var(--color-white);
    color: var(--color-text);
    padding: clamp(5.5rem, 10vw, 8rem) 0 clamp(3rem, 6vw, 4.5rem);
}

.it-banner-inner {
    width: min(92vw, 1280px);
    margin: 0 auto;
}

.it-banner h1 {
    font-size: clamp(2.35rem, 6vw, 5rem);
    font-weight: var(--font-weight-display);
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 0.94;
    margin-bottom: 1.5rem;
    color: var(--color-dark);
    max-width: 13ch;
}

.it-banner .service-eyebrow {
    margin-bottom: 0.8rem;
}

.it-banner-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 2rem;
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(45,53,240,0.25);
    padding-bottom: 0.3rem;
    transition: color 0.15s, border-color 0.15s, gap 0.15s;
}

.it-banner-link::after {
    content: ">";
    font-size: 0.9em;
}

.it-banner-link:hover {
    color: var(--color-dark);
    border-color: var(--color-dark);
    gap: 0.7rem;
}

.it-banner-sub {
    font-size: clamp(1.05rem, 1.7vw, 1.2rem);
    line-height: 1.8;
    color: var(--color-text-muted);
    max-width: 720px;
    margin: 0;
}

/* 2. Intro */
.it-intro {
    background: linear-gradient(180deg, rgba(45,53,240,0.03) 0%, rgba(45,53,240,0) 100%);
}

.it-intro-inner {
    width: min(92vw, 1280px);
    margin: 0 auto;
    padding: clamp(4rem, 7vw, 1.8rem) 0 clamp(3.5rem, 6vw, 5rem);
}

.it-intro h2 {
    font-size: clamp(1.5rem, 3.2vw, 2.5rem);
    font-weight: var(--font-weight-display);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.02;
    margin-bottom: 1rem;
    color: var(--color-dark);
}

.it-intro p {
    font-size: clamp(1rem, 1.45vw, 1.08rem);
    color: var(--color-text-muted);
    line-height: 1.8;
    max-width: 760px;
}

/* 3. Alternating blocks */
.it-blocks {
    width: min(92vw, 1280px);
    margin: 0 auto;
    padding: clamp(3rem, 5vw, 4rem) 0 clamp(5rem, 9vw, 8rem);
}

.it-block {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(3rem, 6vw, 7rem);
    align-items: center;
    min-height: 0;
    margin-bottom: clamp(5rem, 9vw, 8rem);
}

/* Reverse: text left, image right */
.it-block--reverse {
    direction: rtl;
}

.it-block--reverse > * {
    direction: ltr;
}

.it-block-image {
    overflow: hidden;
    background: #eef1ff;
    aspect-ratio: 1 / 1;
}

.it-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1;
    transition: transform 0.4s ease;
}

.it-block:hover .it-block-image img {
    transform: scale(1.03);
}

.it-block-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}

.it-block-text h3 {
    font-size: clamp(1.3rem, 2.4vw, 1.95rem);
    font-weight: var(--font-weight-display);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.04;
    margin-bottom: 1.35rem;
    color: var(--color-dark);
    max-width: 18ch;
}

.it-block-copy {
    max-width: 40rem;
    margin-bottom: 1.5rem;
}

.it-block-copy p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text-muted);
}

.it-block-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.it-block-links li a {
    display: inline-block;
    padding: 0.15rem 0;
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(45,53,240,0.16);
    transition: color 0.15s, border-color 0.15s, padding-left 0.15s;
}

.it-block-links li a:hover {
    color: var(--color-dark);
    border-color: var(--color-dark);
    padding-left: 0.5rem;
}

.it-accordion.accordion-section {
    width: min(92vw, 1280px);
    margin: 0 auto;
    padding: 0 0 clamp(5rem, 9vw, 8rem);
}

.it-accordion-intro {
    max-width: 760px;
    margin-bottom: 2rem;
}

.it-accordion-intro h2 {
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: var(--font-weight-display);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.02;
    margin-bottom: 0.9rem;
    color: var(--color-dark);
}

.it-accordion-intro p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text-muted);
}

.it-logo-bar {
    width: min(92vw, 1280px);
    margin: 0 auto;
    padding: 0 0 clamp(4rem, 8vw, 6.5rem);
}

.it-logo-bar-track-wrap {
    overflow: hidden;
    position: relative;
}

.it-logo-bar-track {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 3.2vw, 3.2rem);
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: itLogoMarquee 34s linear infinite;
}

.it-logo-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(90px, 9vw, 120px);
}

.it-logo-item img {
    max-height: clamp(28px, 3vw, 42px);
    width: auto;
    filter: grayscale(100%);
    opacity: 0.5;
}

@keyframes itLogoMarquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .it-logo-bar-track {
        animation: none;
    }
}

@media (max-width: 768px) {
    .it-blocks {
        width: calc(100% - 3rem);
        padding: 2rem 0 4rem;
    }

    .it-block {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: 1.75rem;
        margin-bottom: 3.5rem;
    }

    .it-block--reverse {
        direction: ltr;
    }

    .it-block-image {
        aspect-ratio: 4 / 3;
        min-height: 0;
    }

    .it-accordion.accordion-section {
        width: calc(100% - 3rem);
        padding-bottom: 4rem;
    }

    .it-logo-bar {
        width: calc(100% - 3rem);
        padding-bottom: 3.5rem;
    }

    .it-banner {
        padding: 4rem 0 2.5rem;
    }

    .it-intro-inner {
        width: calc(100% - 3rem);
        padding: 3rem 0 2rem;
    }

    .it-banner-inner {
        width: calc(100% - 3rem);
    }
}

/* ============================================================
   PAGE LAYOUT (page.njk)
   ============================================================ */

.lp-main {
    background: linear-gradient(180deg, rgba(33, 105, 163, 0.03) 0%, rgba(255, 255, 255, 1) 28%);
}

.lp-hero-fullbleed {
    min-height: clamp(340px, 58vh, 620px);
}

.lp-hero-fullbleed .hero-fullbleed-content {
    max-width: 980px;
}

.lp-hero-fullbleed .service-eyebrow {
    color: var(--color-secondary);
}

.lp-banner {
    padding-bottom: clamp(2.4rem, 4vw, 3.4rem);
}

.lp-intro-copy {
    margin-top: 1.2rem;
    max-width: 860px;
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.82;
    color: var(--color-text-muted);
}

.lp-intro-only {
    padding-top: clamp(2rem, 4.2vw, 3.2rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

.lp-section {
    padding: 0 0 clamp(3rem, 6vw, 5rem);
}

.lp-inner {
    width: min(92vw, 1280px);
    margin: 0 auto;
}

.lp-stats-wrap {
    padding-bottom: clamp(2.4rem, 4.5vw, 3.4rem);
}

.lp-stats-wrap .stat {
    border-left-color: var(--color-primary);
    background: linear-gradient(180deg, rgba(33, 105, 163, 0.08) 0%, rgba(255, 255, 255, 0.94) 100%);
}

.lp-simple-header {
    margin-bottom: 1rem;
}

.lp-simple-header h2 {
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    text-transform: uppercase;
    margin-bottom: 0.9rem;
}

.lp-simple-header .service-lead {
    max-width: 860px;
}

.lp-value-list {
    margin-top: 0.8rem;
}

.lp-locations-grid {
    margin-top: 0.8rem;
}

.lp-callout {
    margin-top: 1.35rem;
}

.lp-image-section {
    padding-bottom: clamp(1.6rem, 3.5vw, 2.5rem);
}

.lp-image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.2vw, 1.8rem);
}

.lp-image-card {
    margin: 0;
    border: 1px solid rgba(33, 105, 163, 0.16);
    background: var(--color-white);
}

.lp-image-card img {
    width: 100%;
    height: clamp(220px, 30vw, 360px);
    object-fit: cover;
    display: block;
}

.lp-image-card figcaption {
    padding: 0.7rem 0.85rem;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.lp-culture-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.lp-culture-image .lp-image-card img {
    height: clamp(300px, 40vw, 520px);
}

@media (max-width: 768px) {
    .lp-inner {
    width: calc(100% - 3rem);
    }

    .lp-section {
        padding-bottom: 2.7rem;
    }

    .lp-image-grid {
        grid-template-columns: 1fr;
    }

    .lp-culture-split {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PARTNERS PAGE
   ============================================================ */

.partners-section {
    padding: clamp(3rem, 6vw, 5rem) 0;
}

@media (max-width: 768px) {
    .partners-section {
        padding: clamp(2rem, 5vw, 3rem) var(--space-sm);
    }
}

.partner-block {
    padding: clamp(2rem, 4vw, 3rem) 0;
    border-bottom: 1px solid rgba(33, 105, 163, 0.1);
}

.partner-block:last-child {
    border-bottom: none;
}

.partner-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

.partner-content {
    flex: 1;
}

.partner-image {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
}

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

.partner-header {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.partner-header p.service-eyebrow {
    margin-bottom: 0.5rem;
}

.partner-header h2 {
    margin-bottom: 0.5rem;
    color: var(--color-primary);
}

.partner-header h2 a {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 2px solid var(--color-secondary);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.partner-header h2 a:hover {
    color: var(--color-secondary);
    border-bottom-color: var(--color-primary);
}

.partner-theme {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 1rem;
}

.partner-proof {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin: 1.5rem 0;
}

.partners-logo-band {
    background: #f8f8f8;
    padding: clamp(3rem, 6vw, 5rem) 0;
    border-top: 1px solid rgba(33, 105, 163, 0.1);
    border-bottom: 1px solid rgba(33, 105, 163, 0.1);
}

.partners-logo-title {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.partners-logo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: center;
}

.partners-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    padding: 1rem;
}

.partners-logo-item img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.partners-logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

@media (max-width: 1024px) {
    .partners-logo-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .partners-logo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .partners-logo-item {
        min-height: 60px;
        padding: 0.75rem;
    }

    .partners-logo-item img {
        max-height: 60px;
    }
}

.home-capabilities-block {

}

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 5px solid var(--color-primary);
    border-left: 5px solid var(--color-primary);
    margin-bottom: var(--space-lg);
    margin-top: var(--space-lg);
}

.capability-card {
    display: block;
    text-decoration: none;
    border-right: 5px solid var(--color-primary);
    border-bottom: 5px solid var(--color-primary);
    transition: background 0.15s;
    color: var(--color-text);
}

.capability-card:hover { background: var(--color-brand-gradient); text-decoration: none; }
.capability-card:hover .service-eyebrow { color: var(--color-tertiary); }
.capability-card:hover h2,
.capability-card:hover p,
.capability-card:hover .capability-card-link { color: var(--color-white); }
.capability-card:hover .capability-card-link { border-top-color: rgba(255,255,255,0.2); }

.capability-card-inner {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    min-height: 220px;
}

.capability-card h2 {
    font-size: clamp(1rem, 1.8vw, 1.3rem);
    font-weight: var(--font-weight-display);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--color-text);
    line-height: 1;
}

.capability-card p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    flex: 1;
    margin: 0;
    font-weight: 400;
}

.capability-card-link {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 2px solid rgba(45,53,240,0.12);
}

/* Keep CTA tile visually consistent when reused inside capabilities grid. */
.capabilities-grid .cta-card {
    display: block;
    grid-column: span 2;
    padding: 0;
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
    border-right: 5px solid var(--color-primary);
    border-bottom: 5px solid var(--color-primary);
    background: var(--color-brand-gradient);
    color: var(--color-white);
    text-decoration: none;
}

.capabilities-grid .cta-card .capability-card-link {
    border-top-color: rgba(255,255,255,0.25);
}

.capabilities-grid .cta-card:hover {
    background: var(--color-dark);
    color: var(--color-white);
}

@media (max-width: 900px) {
    .capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .capabilities-grid .cta-card {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .capabilities-grid {
        grid-template-columns: 1fr;
        border-left: none;
    }

    .capabilities-grid .cta-card {
        grid-column: auto;
    }

    .capability-card,
    .capabilities-grid .cta-card {
        border-left: 5px solid var(--color-primary);
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }
}

/* ============================================================
   INDUSTRIES INDEX
   ============================================================ */

.industries-list { 
    display: flex; flex-direction: column;
    padding: 0 var(--space-lg);

}

.industry-block {
    display: block;
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 5px solid var(--color-primary);
    transition: background 0.15s;
}

.industry-block:hover { background: rgba(45,53,240,0.02); text-decoration: none; }

.industry-block-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 420px;
}

.industry-block--alt .industry-block-inner { direction: rtl; }
.industry-block--alt .industry-block-content,
.industry-block--alt .industry-block-image { direction: ltr; }

.industry-block-content {
    padding: var(--space-lg) var(--space-md);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.2rem;
}

.industry-block-content h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: var(--font-weight-display);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.industry-block-content p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    max-width: 440px;
    margin: 0;
    font-weight: 400;
}

.industry-stats { display: flex; gap: var(--space-md); margin: 0.5rem 0; }
.industry-stat { flex: 1; }

.industry-stat .stat-number {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 100;
    color: var(--color-primary);
    display: block;
    line-height: 1;
    margin-bottom: 0.3rem;
    letter-spacing: -0.02em;
}

.industry-stat .stat-label {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    display: block;
    font-weight: 500;
}

.industry-block-image {
    position: relative;
    overflow: hidden;
    min-height: 300px;
}

.industry-block-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.industry-block:hover .industry-block-image img { transform: scale(1.03); }

@media (max-width: 768px) {
    .industry-block-inner { grid-template-columns: 1fr; direction: ltr !important; }
    .industry-block-image { min-height: 240px; }
    .industry-stats { flex-direction: column; gap: var(--space-sm); }
    .industry-block-content { padding: var(--space-sm); }
    .industries-list { padding: 0 var(--space-sm); }
}

/* ============================================================
   UTILITY
   ============================================================ */

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

/* ============================================================
   INSIGHTS — single article page
   ============================================================ */

.insight-body {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-md) var(--space-md);
}

@media (max-width: 768px) {
    .insight-body { padding: var(--space-sm); }
}

.insight-stat-banner {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: var(--space-md);
    border-left: 5px solid var(--color-tertiary);
    background: rgba(245,245,0,0.04);
    margin-bottom: var(--space-lg);
}

.insight-stat-number {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
    letter-spacing: -0.03em;
}

.insight-stat-label {
    font-size: 1rem;
    color: var(--color-text-muted);
    font-weight: 500;
    max-width: 280px;
    line-height: 1.4;
}

.insight-content p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text);
    margin-bottom: 1.5rem;
}

.insight-partner-tag {
    margin-top: var(--space-lg);
    padding: var(--space-sm);
    border-left: 5px solid var(--color-secondary);
    background: rgba(10,191,163,0.04);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.insight-partner-tag strong {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.insight-cta {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 3px solid var(--color-primary);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ============================================================
   INSIGHTS INDEX PAGE
   ============================================================ */

.insights-intro {
    border-bottom: 5px solid var(--color-primary);
    background: linear-gradient(180deg, rgba(45,53,240,0.04) 0%, transparent 100%);
}

.insights-intro-inner {
    width: min(92vw, 1280px);
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md) var(--space-md);
}

@media (max-width: 768px) {
    .insights-intro-inner { padding: var(--space-sm); }
    .insight-grid-card-body { padding: var(--space-sm); }
}

.insights-intro-inner h1 {
    font-size: clamp(1.8rem, 4.4vw, 3.5rem);
    font-weight: var(--font-weight-display);
    text-transform: uppercase;
    line-height: 0.94;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.insights-intro-inner p {
    max-width: 760px;
    color: var(--color-text-muted);
    font-size: 1.02rem;
    line-height: 1.7;
    margin: 0;
}

.insights-page-wrap {
    width: min(92vw, 1280px);
    margin: 0 auto var(--space-lg);
}

.insights-filters {
    display: flex;
    gap: 0;
    padding: var(--space-md) 0 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: var(--space-md);
}

.insights-filters::-webkit-scrollbar {
    display: none;
}

.filter-pill {
    display: block;
    flex: 0 0 auto;
    padding: 0.75rem 1.25rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.filter-pill:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.filter-pill--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-radius: 0;
    border-top: 5px solid var(--color-primary);
    border-left: 5px solid var(--color-primary);
}

.insight-grid-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-text);
    border-right: 5px solid var(--color-primary);
    border-bottom: 5px solid var(--color-primary);
    border-radius: 0;
    overflow: hidden;
    transition: background 0.15s;
}

.insight-grid-card:hover {
    background: rgba(45,53,240,0.02);
    text-decoration: none;
}

.insight-grid-card-image {
    height: 200px;
    overflow: hidden;
    border-radius: 0;
    background: var(--color-dark);
}

.insight-grid-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: opacity 0.3s, transform 0.4s;
}

.insight-grid-card:hover .insight-grid-card-image img {
    opacity: 0.55;
    transform: scale(1.03);
}

.insight-grid-card-body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.insight-grid-card-meta {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.insight-grid-card-industry {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.insight-grid-stat {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
    letter-spacing: -0.02em;
}

.insight-grid-card h2 {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.insight-grid-card p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    flex: 1;
    margin: 0;
}

.insight-grid-card-link {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 2px solid rgba(45,53,240,0.12);
}

.insight-grid-card:hover .insight-grid-card-link {
    color: var(--color-secondary);
}

@media (max-width: 900px) {
    .insights-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .insights-intro-inner {
        width: 100%;
    }

    .insights-page-wrap {
        width: 100%;
    }

    .insights-grid { grid-template-columns: 1fr; }
    .insight-cta { flex-direction: column; }
    .insight-stat-banner { flex-direction: column; gap: 0.5rem; }
}
@media (max-width: 768px) {
    .partner-content-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   VIEW TRANSITIONS — cross-document MPA → SPA feel
   Requires Chrome 126+ / Edge 126+. Degrades gracefully in
   all other browsers (normal instant navigation, no errors).
   Zero JS required. Zero SEO impact — pages stay static HTML.
   ============================================================ */

@view-transition {
    navigation: auto;
}

/* Header has the same fixed position on every page.
   Give it its own capture group so it stays frozen in place
   rather than crossfading with the rest of the page. */
.site-header {
    view-transition-name: site-header;
}

::view-transition-old(site-header),
::view-transition-new(site-header) {
    animation: none;
    mix-blend-mode: normal;
}

/* Main content: outgoing page fades+slides up, incoming slides
   up from below with a spring-like ease. */
main {
    view-transition-name: page-main;
}

::view-transition-old(page-main) {
    animation: vt-slide-out 0.2s ease forwards;
}

::view-transition-new(page-main) {
    animation: vt-slide-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Root layer handles footer + anything outside main */
::view-transition-old(root) {
    animation: vt-fade-out 0.18s ease forwards;
}

::view-transition-new(root) {
    animation: vt-fade-in 0.18s ease forwards;
}

@keyframes vt-slide-out {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes vt-slide-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
}

@keyframes vt-fade-out {
    to { opacity: 0; }
}

@keyframes vt-fade-in {
    from { opacity: 0; }
}

/* Respect reduced-motion preference — skip all animations */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(page-main),
    ::view-transition-new(page-main),
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/* ============================================================
   SITEMAP PAGE
   ============================================================ */

.sitemap-main {
    min-height: 70vh;
}

.sitemap-hero {
    background: var(--color-dark);
    color: var(--color-white);
    padding: clamp(5rem, 10vw, 8rem) var(--space-md) clamp(3rem, 5vw, 4.5rem);
    border-bottom: 5px solid var(--color-primary);
}

.sitemap-hero .service-eyebrow {
    color: var(--color-tertiary);
}

.sitemap-hero h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: var(--font-weight-display);
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 0.94;
    color: var(--color-white);
    margin-bottom: 1rem;
}

.sitemap-lead {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 580px;
    line-height: 1.65;
    margin: 0;
}

.sitemap-body {
    padding: clamp(3rem, 6vw, 5rem) var(--space-md);
    max-width: var(--max-width);
    margin: 0 auto;
}

.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

.sitemap-col {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3rem);
}

.sitemap-section {
    border-top: 3px solid var(--color-primary);
    padding-top: 1.25rem;
}

.sitemap-section-title {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.sitemap-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.sitemap-link-list li {
    border-bottom: 1px solid rgba(33, 105, 163, 0.08);
}

.sitemap-link-list li:last-child {
    border-bottom: none;
}

.sitemap-link-list a {
    display: block;
    padding: 0.55rem 0;
    font-size: 0.92rem;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}

.sitemap-link-list a:hover {
    color: var(--color-secondary);
}

.sitemap-insight-item {
    border-bottom: 1px solid rgba(33, 105, 163, 0.08);
}

.sitemap-insight-item:last-child {
    border-bottom: none;
}

.sitemap-insight-link {
    display: flex;
    flex-direction: column;
    padding: 0.7rem 0;
    text-decoration: none;
    gap: 0.2rem;
}

.sitemap-insight-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.35;
    transition: color 0.15s;
}

.sitemap-insight-link:hover .sitemap-insight-title {
    color: var(--color-secondary);
}

.sitemap-insight-meta {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-weight: 500;
    line-height: 1.4;
}

.sitemap-see-all {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 2px solid var(--color-secondary);
    padding-bottom: 0.1rem;
    transition: color 0.15s, border-color 0.15s;
}

.sitemap-see-all:hover {
    color: var(--color-secondary);
    border-bottom-color: var(--color-primary);
    text-decoration: none;
}

@media (max-width: 900px) {
    .sitemap-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .sitemap-grid {
        grid-template-columns: 1fr;
    }

    .sitemap-body {
        padding: var(--space-md) var(--space-sm);
    }

    .sitemap-hero {
        padding: clamp(4rem, 8vw, 6rem) var(--space-sm) clamp(2rem, 4vw, 3rem);
    }
}