:root {
    --ink: #08111f;
    --ink-2: #111c2d;
    --paper: #f5f4f0;
    --white: #ffffff;
    --muted: #667085;
    --line: rgba(8, 17, 31, .13);
    --dark-line: rgba(255,255,255,.16);
    --shell: 1280px;
    --header: 78px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family:
        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}

.site-shell {
    width: min(
        calc(100% - 64px),
        var(--shell)
    );
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    z-index: 9999;
    top: 10px;
    left: 10px;
    transform: translateY(-150%);
    padding: 10px 14px;
    background: #fff;
    color: #000;
}

.skip-link:focus {
    transform: translateY(0);
}

/* Header */

.site-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    height: var(--header);
    border-bottom: 1px solid rgba(255,255,255,.13);
    color: #fff;
    transition:
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.site-header.is-scrolled,
body:not(.page-home) .site-header {
    border-color: rgba(8,17,31,.08);
    background: rgba(255,255,255,.96);
    color: var(--ink);
    box-shadow: 0 8px 30px rgba(8,17,31,.05);
    backdrop-filter: blur(18px);
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.site-brand {
    min-width: 160px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.brand-logo {
    display: block;
    width: auto;
    max-width: 190px;
    height: 42px;
    object-fit: contain;
}

.brand-mark {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border: 1px solid currentColor;
    font-size: 19px;
    font-weight: 800;
}

.brand-copy {
    display: grid;
    line-height: 1;
}

.brand-copy strong {
    font-size: 14px;
}

.brand-copy small {
    margin-top: 3px;
    font-size: 9px;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.3vw, 34px);
}

.desktop-nav a {
    position: relative;
    padding: 29px 0 27px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 650;
}

.desktop-nav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 20px;
    left: 0;
    height: 1px;
    transform: scaleX(0);
    transform-origin: right;
    background: currentColor;
    transition: transform .22s ease;
}

.desktop-nav a:hover::after,
.desktop-nav a.is-active::after {
    transform: scaleX(1);
    transform-origin: left;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-cta {
    padding: 11px 15px;
    border: 1px solid currentColor;
    text-decoration: none;
    font-size: 10px;
    font-weight: 750;
    transition:
        background .2s ease,
        color .2s ease;
}

.header-cta:hover {
    background: currentColor;
    color: var(--ink);
}

.site-header.is-scrolled .header-cta:hover,
body:not(.page-home) .header-cta:hover {
    background: var(--ink);
    color: #fff;
}

.menu-toggle {
    width: 42px;
    height: 42px;
    display: none;
    place-items: center;
    border: 0;
    background: transparent;
    color: currentColor;
    cursor: pointer;
}

.menu-toggle span {
    grid-column: 1;
    grid-row: 1;
    width: 22px;
    height: 1px;
    background: currentColor;
    transition: transform .25s ease;
}

.menu-toggle span:first-child {
    transform: translateY(-4px);
}

.menu-toggle span:last-child {
    transform: translateY(4px);
}

.menu-toggle.is-open span:first-child {
    transform: rotate(45deg);
}

.menu-toggle.is-open span:last-child {
    transform: rotate(-45deg);
}

.mobile-menu {
    display: none;
}

/* Hero */

.hero {
    position: relative;
    min-height: 760px;
    height: min(900px, 100svh);
    overflow: hidden;
    background: #07111f;
    color: #fff;
}

.hero-track {
    position: absolute;
    inset: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    visibility: hidden;
    transform: translateX(100%);
    opacity: 1;
    transition:
        transform .9s cubic-bezier(.77,0,.18,1),
        visibility 0s linear .9s;
}

.hero-slide.is-active {
    z-index: 3;
    visibility: visible;
    transform: translateX(0);
    transition:
        transform .9s cubic-bezier(.77,0,.18,1),
        visibility 0s;
}

.hero-slide.is-leaving {
    z-index: 2;
    visibility: visible;
    transform: translateX(-100%);
    transition:
        transform .9s cubic-bezier(.77,0,.18,1),
        visibility 0s;
}

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

.hero-media-placeholder {
    overflow: hidden;
    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(255,255,255,.12),
            transparent 27%
        ),
        linear-gradient(
            125deg,
            #06101c 0%,
            #12243b 48%,
            #091421 100%
        );
}

.hero-media-placeholder span {
    position: absolute;
    display: block;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
}

.hero-media-placeholder span:nth-child(1) {
    top: -25%;
    right: -7%;
    width: 70vw;
    height: 70vw;
}

.hero-media-placeholder span:nth-child(2) {
    right: 15%;
    bottom: -45%;
    width: 50vw;
    height: 50vw;
}

.hero-media-placeholder span:nth-child(3) {
    top: 20%;
    right: 16%;
    width: 220px;
    height: 220px;
    background: rgba(255,255,255,.025);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(3,9,16,.9) 0%,
            rgba(3,9,16,.7) 43%,
            rgba(3,9,16,.25) 72%,
            rgba(3,9,16,.16) 100%
        ),
        linear-gradient(
            0deg,
            rgba(3,9,16,.38),
            transparent 45%
        );
}

.hero-content {
    position: relative;
    z-index: 5;
    height: 100%;
    display: flex;
    align-items: center;
    padding-top: var(--header);
}

.hero-copy {
    width: min(800px, 72%);
    padding-bottom: 20px;
}

.hero-eyebrow,
.section-kicker {
    display: inline-block;
    margin-bottom: 22px;
    color: #667085;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.hero-eyebrow {
    color: rgba(255,255,255,.68);
}

.hero-copy h1 {
    max-width: 790px;
    margin: 0;
    font-size: clamp(54px, 7.2vw, 108px);
    font-weight: 600;
    line-height: .92;
    letter-spacing: -.065em;
}

.hero-copy p {
    max-width: 610px;
    margin: 28px 0 0;
    color: rgba(255,255,255,.72);
    font-size: clamp(14px, 1.25vw, 18px);
    line-height: 1.65;
}

.hero-actions,
.final-cta-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 34px;
}

.button-primary-light,
.button-ghost-light,
.button-dark {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 0 19px;
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;
}

.button-primary-light {
    background: #fff;
    color: var(--ink);
}

.button-primary-light:hover,
.button-dark:hover {
    transform: translateY(-2px);
}

.button-ghost-light {
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
}

.button-ghost-light:hover {
    background: rgba(255,255,255,.1);
}

.button-dark {
    background: var(--ink);
    color: #fff;
}

.hero-controls {
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 34px;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hero-progress {
    display: flex;
    gap: 7px;
}

.hero-dot {
    width: 48px;
    height: 18px;
    display: grid;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.hero-dot span {
    display: block;
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,.28);
}

.hero-dot.is-active span {
    background: #fff;
}

.hero-counter {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255,255,255,.65);
    font-size: 9px;
    font-weight: 700;
}

.hero-counter i {
    width: 30px;
    height: 1px;
    background: rgba(255,255,255,.35);
}

/* Trust */

.trust-strip {
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.trust-grid {
    min-height: 112px;
    display: grid;
    grid-template-columns: 1.7fr repeat(3, 1fr);
}

.trust-grid > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px 28px;
    border-right: 1px solid var(--line);
}

.trust-grid > div:first-child {
    padding-left: 0;
}

.trust-grid > div:last-child {
    border-right: 0;
}

.trust-intro span {
    max-width: 300px;
    color: #344054;
    font-size: 12px;
    line-height: 1.5;
}

.trust-stat strong {
    font-size: 14px;
}

.trust-stat span {
    margin-top: 4px;
    color: #98a2b3;
    font-size: 9px;
}

/* Sections */

.section {
    padding: clamp(86px, 10vw, 150px) 0;
}

.section-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
    gap: 80px;
    align-items: end;
    margin-bottom: 62px;
}

.section-intro h2,
.about-copy h2,
.talent-home-copy h2,
.compact-heading h2,
.final-cta h2,
.process-heading h2 {
    margin: 0;
    font-size: clamp(38px, 5vw, 70px);
    font-weight: 570;
    line-height: .98;
    letter-spacing: -.055em;
}

.section-intro p,
.about-copy p,
.talent-home-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

/* Capabilities */

.section-capabilities {
    background: var(--paper);
}

.capability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.capability-card {
    min-height: 300px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    transition:
        background .25s ease,
        color .25s ease;
}

.capability-card:hover {
    background: var(--ink);
    color: #fff;
}

.card-number {
    color: #98a2b3;
    font-size: 9px;
}

.capability-card h3 {
    max-width: 280px;
    margin: 0;
    font-size: 23px;
    font-weight: 580;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.capability-card p {
    max-width: 280px;
    margin: 13px 0 0;
    color: #667085;
    font-size: 11px;
    line-height: 1.65;
}

.capability-card:hover p {
    color: rgba(255,255,255,.65);
}

.card-arrow {
    position: absolute;
    top: 26px;
    right: 27px;
    font-size: 17px;
}

/* About */

.section-about {
    background: #fff;
}

.about-layout {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(50px, 8vw, 120px);
    align-items: center;
}

.about-media {
    min-height: 620px;
    overflow: hidden;
    background: #e9e9e5;
}

.about-media > img {
    width: 100%;
    height: 100%;
    min-height: 620px;
    object-fit: cover;
}

.editorial-placeholder {
    min-height: 620px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 42px;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #e8e8e3,
            #d8dad8
        );
}

.editorial-placeholder::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -120px;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(8,17,31,.12);
    border-radius: 50%;
}

.placeholder-index {
    position: absolute;
    top: 35px;
    left: 40px;
    color: #667085;
    font-size: 10px;
}

.placeholder-line {
    width: 70px;
    height: 1px;
    margin-bottom: 20px;
    background: var(--ink);
}

.editorial-placeholder strong {
    font-size: clamp(40px, 5vw, 70px);
    font-weight: 570;
    line-height: .9;
    letter-spacing: -.06em;
}

.about-copy h2 {
    max-width: 580px;
    font-size: clamp(38px, 4.5vw, 64px);
}

.about-copy p {
    max-width: 520px;
    margin-top: 30px;
}

.text-link {
    display: inline-flex;
    gap: 28px;
    align-items: center;
    margin-top: 30px;
    padding-bottom: 6px;
    border-bottom: 1px solid currentColor;
    text-decoration: none;
    font-size: 11px;
    font-weight: 750;
}

/* Solutions */

.section-solutions {
    background: var(--paper);
}

.solution-list {
    border-top: 1px solid var(--line);
}

.solution-row {
    display: grid;
    grid-template-columns: 70px 1fr .85fr 35px;
    gap: 20px;
    align-items: center;
    min-height: 110px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    transition:
        padding .2s ease,
        background .2s ease;
}

.solution-row:hover {
    padding-inline: 15px;
    background: rgba(255,255,255,.55);
}

.solution-index {
    color: #98a2b3;
    font-size: 9px;
}

.solution-row h3 {
    margin: 0;
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 580;
    letter-spacing: -.035em;
}

.solution-row p {
    margin: 0;
    color: #667085;
    font-size: 10px;
    line-height: 1.6;
}

.solution-arrow {
    text-align: right;
}

.section-action {
    margin-top: 34px;
}

/* Process */

.section-process {
    overflow: hidden;
    background: var(--ink);
    color: #fff;
}

.section-kicker.light {
    color: rgba(255,255,255,.55);
}

.process-heading {
    margin-bottom: 65px;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--dark-line);
    border-left: 1px solid var(--dark-line);
}

.process-card {
    min-height: 280px;
    padding: 25px;
    border-right: 1px solid var(--dark-line);
    border-bottom: 1px solid var(--dark-line);
}

.process-card > span {
    color: rgba(255,255,255,.38);
    font-size: 9px;
}

.process-card h3 {
    margin: 105px 0 13px;
    font-size: 21px;
    font-weight: 560;
}

.process-card p {
    margin: 0;
    color: rgba(255,255,255,.55);
    font-size: 10px;
    line-height: 1.65;
}

/* Talent */

.section-talent-home {
    overflow: hidden;
    background: #fff;
}

.talent-home-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 70px;
    align-items: center;
}

.talent-home-copy p {
    max-width: 520px;
    margin-top: 28px;
}

.talent-home-copy .button-dark {
    margin-top: 30px;
}

.talent-visual {
    min-height: 500px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f0f1ef;
}

.talent-word {
    position: relative;
    z-index: 2;
    font-size: clamp(70px, 10vw, 150px);
    font-weight: 700;
    letter-spacing: -.08em;
}

.talent-orbit {
    position: absolute;
    border: 1px solid rgba(8,17,31,.14);
    border-radius: 50%;
}

.orbit-one {
    width: 500px;
    height: 500px;
}

.orbit-two {
    width: 300px;
    height: 300px;
}

/* Clients */

.section-clients {
    border-top: 1px solid var(--line);
    background: var(--paper);
}

.compact-heading {
    margin-bottom: 45px;
}

.compact-heading h2 {
    font-size: clamp(36px, 4vw, 58px);
}

.client-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.client-logo-card {
    min-height: 145px;
    display: grid;
    place-items: center;
    padding: 24px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.35);
}

.client-logo-card img {
    max-width: 150px;
    max-height: 65px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .76;
}

.client-logo-card span {
    color: #667085;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

/* Testimonials */

.section-testimonials {
    background: #fff;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.testimonial-card {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    padding: 30px;
    border: 1px solid var(--line);
}

.quote-mark {
    font-family: Georgia, serif;
    font-size: 48px;
    line-height: 1;
}

.testimonial-card blockquote {
    margin: 35px 0;
    font-size: 17px;
    line-height: 1.55;
    letter-spacing: -.02em;
}

.testimonial-card footer {
    margin-top: auto;
}

.testimonial-card footer strong,
.testimonial-card footer span {
    display: block;
}

.testimonial-card footer strong {
    font-size: 11px;
}

.testimonial-card footer span {
    margin-top: 4px;
    color: #98a2b3;
    font-size: 9px;
}

/* CTA */

.final-cta {
    padding: clamp(90px, 11vw, 160px) 0;
    background: #0a1422;
    color: #fff;
}

.final-cta-inner h2 {
    max-width: 940px;
    font-size: clamp(48px, 7vw, 94px);
}

/* Footer */

.site-footer {
    padding: 75px 0 28px;
    background: #050b13;
    color: #fff;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 55px;
    padding-bottom: 65px;
}

.footer-brand-column p {
    max-width: 360px;
    margin: 26px 0 0;
    color: rgba(255,255,255,.5);
    font-size: 11px;
    line-height: 1.7;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.footer-label {
    margin-bottom: 9px;
    color: rgba(255,255,255,.35);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.footer-column a,
.footer-column > span:not(.footer-label) {
    color: rgba(255,255,255,.72);
    text-decoration: none;
    font-size: 10px;
    line-height: 1.5;
}

.footer-column a:hover {
    color: #fff;
}

.footer-bottom {
    min-height: 50px;
    display: flex;
    justify-content: space-between;
    gap: 25px;
    align-items: center;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.4);
    font-size: 8px;
}

.footer-socials {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.footer-socials a {
    color: inherit;
    text-decoration: none;
}

/* Reveal */

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2,.8,.2,1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */

@media (max-width: 1100px) {
    .desktop-nav {
        display: none;
    }

    .menu-toggle {
        display: grid;
    }

    .mobile-menu {
        position: fixed;
        z-index: 999;
        top: var(--header);
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        visibility: hidden;
        transform: translateX(100%);
        background: #fff;
        color: var(--ink);
        transition:
            transform .35s cubic-bezier(.77,0,.18,1),
            visibility 0s linear .35s;
    }

    .mobile-menu.is-open {
        visibility: visible;
        transform: translateX(0);
        transition:
            transform .35s cubic-bezier(.77,0,.18,1),
            visibility 0s;
    }

    .mobile-menu-inner {
        display: flex;
        flex-direction: column;
        padding-top: 35px;
    }

    .mobile-menu a {
        padding: 17px 0;
        border-bottom: 1px solid var(--line);
        text-decoration: none;
        font-size: 21px;
        font-weight: 570;
        letter-spacing: -.03em;
    }

    .mobile-project-link {
        margin-top: 22px;
        border: 0 !important;
        background: var(--ink);
        color: #fff;
        text-align: center;
    }

    .capability-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

@media (max-width: 850px) {
    :root {
        --header: 68px;
    }

    .site-shell {
        width: min(
            calc(100% - 38px),
            var(--shell)
        );
    }

    .header-cta {
        display: none;
    }

    .brand-logo {
        max-width: 155px;
        height: 36px;
    }

    .hero {
        min-height: 680px;
        height: 100svh;
    }

    .hero-copy {
        width: 100%;
    }

    .hero-copy h1 {
        font-size: clamp(50px, 12vw, 78px);
    }

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(3,9,16,.88),
                rgba(3,9,16,.42)
            ),
            linear-gradient(
                0deg,
                rgba(3,9,16,.6),
                transparent 55%
            );
    }

    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-grid > div,
    .trust-grid > div:first-child {
        padding: 22px 16px;
        border-bottom: 1px solid var(--line);
    }

    .section-intro,
    .about-layout,
    .talent-home-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .section-intro {
        align-items: start;
    }

    .about-media,
    .about-media > img,
    .editorial-placeholder {
        min-height: 520px;
    }

    .solution-row {
        grid-template-columns: 45px 1fr 30px;
    }

    .solution-row p {
        display: none;
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .footer-top {
        grid-template-columns: 1.4fr 1fr 1fr;
    }

    .footer-brand-column {
        grid-column: 1 / -1;
    }
}

@media (max-width: 580px) {
    .site-shell {
        width: calc(100% - 30px);
    }

    .hero-copy h1 {
        font-size: clamp(46px, 14vw, 67px);
    }

    .hero-copy p {
        font-size: 13px;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions a {
        width: 100%;
    }

    .hero-controls {
        bottom: 20px;
    }

    .hero-dot {
        width: 34px;
    }

    .trust-grid,
    .capability-grid,
    .process-grid,
    .client-grid {
        grid-template-columns: 1fr;
    }

    .trust-grid > div {
        min-height: 86px;
        border-right: 0;
    }

    .capability-card {
        min-height: 240px;
    }

    .about-media,
    .about-media > img,
    .editorial-placeholder {
        min-height: 420px;
    }

    .solution-row {
        min-height: 92px;
    }

    .process-card {
        min-height: 220px;
    }

    .process-card h3 {
        margin-top: 65px;
    }

    .talent-visual {
        min-height: 380px;
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 42px 25px;
    }

    .footer-brand-column {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* Temporary inner-page shell while the full pages are built */

.inner-placeholder {
    min-height: 76vh;
    display: flex;
    align-items: flex-end;
    padding: 190px 0 100px;
    background: #fff;
}

.inner-placeholder h1 {
    max-width: 950px;
    margin: 0;
    font-size: clamp(58px, 9vw, 130px);
    font-weight: 570;
    line-height: .88;
    letter-spacing: -.07em;
}

.inner-placeholder p {
    max-width: 600px;
    margin: 30px 0 0;
    color: #667085;
    font-size: 15px;
    line-height: 1.7;
}


/* ==========================================================
   UNIVERSAL SOLUTIONS — THEME SYSTEM
   Default theme: LIGHT
   ========================================================== */

:root,
html[data-theme="light"] {
    color-scheme: light;

    --theme-bg: #f5f4f0;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f0f1ef;
    --theme-surface-alt: #e9e9e5;

    --theme-text: #08111f;
    --theme-text-soft: #344054;
    --theme-muted: #667085;
    --theme-faint: #98a2b3;

    --theme-line:
        rgba(8, 17, 31, .13);

    --theme-header:
        rgba(255, 255, 255, .96);

    --theme-header-text: #08111f;

    --theme-shadow:
        0 8px 30px rgba(8, 17, 31, .05);

    --theme-card-hover: #08111f;
    --theme-card-hover-text: #ffffff;

    --theme-footer: #050b13;
    --theme-footer-text: #ffffff;

    --theme-dark-section: #08111f;
    --theme-dark-section-text: #ffffff;

    --theme-input: #ffffff;
    --theme-input-border: rgba(8,17,31,.16);
}


html[data-theme="dark"] {
    color-scheme: dark;

    --theme-bg: #090f18;
    --theme-surface: #0d1622;
    --theme-surface-soft: #111c29;
    --theme-surface-alt: #162231;

    --theme-text: #f4f7fb;
    --theme-text-soft: #d0d5dd;
    --theme-muted: #a8b1bf;
    --theme-faint: #778293;

    --theme-line:
        rgba(255, 255, 255, .11);

    --theme-header:
        rgba(8, 15, 24, .94);

    --theme-header-text: #f7f9fc;

    --theme-shadow:
        0 8px 35px rgba(0, 0, 0, .25);

    --theme-card-hover: #f4f7fb;
    --theme-card-hover-text: #08111f;

    --theme-footer: #04080e;
    --theme-footer-text: #ffffff;

    --theme-dark-section: #050b13;
    --theme-dark-section-text: #ffffff;

    --theme-input: #101a27;
    --theme-input-border:
        rgba(255,255,255,.14);
}


/* Global theme transition */

body,
.site-header,
.mobile-menu,
.section,
.trust-strip,
.capability-card,
.solution-row,
.client-logo-card,
.testimonial-card,
.inner-placeholder,
.site-footer {
    transition:
        background-color .28s ease,
        color .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}


body {
    background: var(--theme-bg);
    color: var(--theme-text);
}


/* Header */

.site-header.is-scrolled,
body:not(.page-home) .site-header {
    border-color: var(--theme-line);
    background: var(--theme-header);
    color: var(--theme-header-text);
    box-shadow: var(--theme-shadow);
}


html[data-theme="dark"]
.site-header.is-scrolled
.header-cta:hover,
html[data-theme="dark"]
body:not(.page-home)
.site-header
.header-cta:hover {
    background: #f4f7fb;
    color: #08111f;
}


/* Theme button */

.theme-toggle {
    width: 40px;
    height: 40px;
    position: relative;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .84;
    transition:
        opacity .2s ease,
        transform .2s ease,
        background .2s ease;
}

.theme-toggle:hover {
    opacity: 1;
    transform: rotate(8deg);
}

.theme-icon {
    position: absolute;
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    transition:
        opacity .22s ease,
        transform .3s ease;
}

.theme-icon svg {
    width: 100%;
    height: 100%;
}

.theme-icon-sun {
    opacity: 1;
    transform: scale(1) rotate(0);
}

.theme-icon-moon {
    opacity: 0;
    transform: scale(.65) rotate(-20deg);
}

html[data-theme="dark"]
.theme-icon-sun {
    opacity: 0;
    transform: scale(.65) rotate(20deg);
}

html[data-theme="dark"]
.theme-icon-moon {
    opacity: 1;
    transform: scale(1) rotate(0);
}


/* Main light sections */

.trust-strip,
.section-about,
.section-talent-home,
.section-testimonials,
.inner-placeholder {
    background: var(--theme-surface);
    color: var(--theme-text);
}

.section-capabilities,
.section-solutions,
.section-clients {
    background: var(--theme-bg);
    color: var(--theme-text);
}


.trust-grid > div,
.capability-grid,
.capability-card,
.solution-list,
.solution-row,
.client-grid,
.client-logo-card,
.testimonial-card {
    border-color: var(--theme-line);
}


.trust-intro span,
.section-intro p,
.about-copy p,
.talent-home-copy p,
.solution-row p {
    color: var(--theme-muted);
}


.section-kicker {
    color: var(--theme-muted);
}


.trust-stat span,
.card-number,
.solution-index,
.testimonial-card footer span {
    color: var(--theme-faint);
}


/* Capability cards */

.capability-card {
    background: transparent;
    color: var(--theme-text);
}

.capability-card p {
    color: var(--theme-muted);
}

.capability-card:hover {
    background: var(--theme-card-hover);
    color: var(--theme-card-hover-text);
}

html[data-theme="dark"]
.capability-card:hover p {
    color: rgba(8,17,31,.65);
}


/* About placeholder */

.about-media {
    background: var(--theme-surface-alt);
}

.editorial-placeholder {
    background:
        linear-gradient(
            135deg,
            var(--theme-surface-alt),
            var(--theme-surface-soft)
        );
    color: var(--theme-text);
}

.editorial-placeholder::before {
    border-color: var(--theme-line);
}

.placeholder-line {
    background: var(--theme-text);
}


/* Solution rows */

.solution-row {
    color: var(--theme-text);
}

.solution-row:hover {
    background: var(--theme-surface);
}


/* Keep intentional dark editorial sections dark */

.section-process {
    background: var(--theme-dark-section);
    color: var(--theme-dark-section-text);
}


/* Talent visual */

.talent-visual {
    background: var(--theme-surface-soft);
    color: var(--theme-text);
}

.talent-orbit {
    border-color: var(--theme-line);
}


/* Clients */

.client-logo-card {
    background: var(--theme-surface);
}

html[data-theme="dark"]
.client-logo-card img {
    /*
     * Do not invert uploaded logos.
     * A slight opacity change is safe.
     */
    opacity: .88;
}


/* Testimonials */

.testimonial-card {
    background: var(--theme-surface);
    color: var(--theme-text);
}


/* Buttons */

html[data-theme="dark"]
.button-dark {
    background: #f4f7fb;
    color: #08111f;
}


/* Inner pages */

.inner-placeholder p {
    color: var(--theme-muted);
}


/* Forms for forthcoming pages */

input,
textarea,
select {
    border-color: var(--theme-input-border);
    background: var(--theme-input);
    color: var(--theme-text);
}


/* Footer stays intentionally dark */

.site-footer {
    background: var(--theme-footer);
    color: var(--theme-footer-text);
}


/* Mobile menu */

.mobile-theme-row {
    display: none;
}


@media (max-width: 1100px) {

    .mobile-menu {
        background: var(--theme-surface);
        color: var(--theme-text);
    }

    .mobile-menu a {
        border-color: var(--theme-line);
    }

    .mobile-theme-row {
        min-height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        border-bottom: 1px solid var(--theme-line);
    }

    .mobile-theme-row > span {
        color: var(--theme-muted);
        font-size: 11px;
        font-weight: 700;
    }

    .mobile-theme-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--theme-text);
        cursor: pointer;
    }

    .mobile-theme-toggle > span {
        font-size: 9px;
        font-weight: 700;
    }

    .mobile-theme-toggle i {
        width: 38px;
        height: 21px;
        position: relative;
        display: block;
        border: 1px solid var(--theme-line);
        border-radius: 999px;
        background: var(--theme-surface-soft);
    }

    .mobile-theme-toggle b {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: var(--theme-text);
        transition: transform .25s ease;
    }

    html[data-theme="dark"]
    .mobile-theme-toggle b {
        transform: translateX(17px);
    }

}


/* On smaller devices use one theme control in menu */

@media (max-width: 580px) {
    .theme-toggle {
        width: 36px;
        height: 36px;
    }
}


/* User-requested theme transition, but respect accessibility */

@media (prefers-reduced-motion: reduce) {
    body,
    .site-header,
    .mobile-menu,
    .section,
    .trust-strip,
    .capability-card,
    .solution-row,
    .client-logo-card,
    .testimonial-card {
        transition: none !important;
    }
}


/* ==========================================================
   UNIVERSAL SOLUTIONS — COMPLETE INNER PAGES
   ========================================================== */

.page-hero {
    padding:
        calc(var(--header) + clamp(100px, 12vw, 180px))
        0
        clamp(85px, 10vw, 145px);
    background: var(--theme-surface);
}

.page-hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(280px, .65fr);
    gap: clamp(50px, 9vw, 140px);
    align-items: end;
}

.page-hero h1,
.image-page-content h1,
.contact-hero h1,
.project-intro h1 {
    margin: 0;
    font-size: clamp(62px, 9vw, 132px);
    font-weight: 570;
    line-height: .87;
    letter-spacing: -.072em;
}

.page-hero-aside p {
    margin: 0;
    color: var(--theme-muted);
    font-size: 14px;
    line-height: 1.8;
}

.wide-editorial-media {
    width: 100%;
    height: min(70vw, 760px);
    min-height: 430px;
    overflow: hidden;
    background: var(--theme-surface-alt);
}

.wide-editorial-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wide-placeholder {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding:
        clamp(30px, 6vw, 85px)
        max(
            calc((100vw - var(--shell)) / 2),
            32px
        );
    overflow: hidden;
    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(255,255,255,.1),
            transparent 24%
        ),
        #0b1725;
    color: #fff;
}

.wide-placeholder::after {
    content: "";
    position: absolute;
    top: -20%;
    right: -5%;
    width: 55vw;
    height: 55vw;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
}

.wide-placeholder span {
    margin-bottom: 15px;
    color: rgba(255,255,255,.5);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.wide-placeholder strong {
    position: relative;
    z-index: 2;
    font-size: clamp(44px, 7vw, 100px);
    font-weight: 570;
    line-height: .9;
    letter-spacing: -.06em;
}

.editorial-two-column {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, .9fr);
    gap: clamp(60px, 10vw, 150px);
    align-items: start;
}

.editorial-heading {
    max-width: 700px;
    margin: 0;
    font-size: clamp(38px, 5vw, 72px);
    font-weight: 570;
    line-height: .98;
    letter-spacing: -.055em;
}

.editorial-copy {
    padding-top: 35px;
}

.editorial-copy p,
.editorial-body {
    margin: 0 0 22px;
    color: var(--theme-muted);
    font-size: 14px;
    line-height: 1.85;
}

.editorial-copy .button-dark {
    margin-top: 18px;
}

.principle-section {
    background: var(--theme-surface-soft);
}

.principle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--theme-line);
    border-left: 1px solid var(--theme-line);
}

.principle-card {
    min-height: 310px;
    padding: 27px;
    border-right: 1px solid var(--theme-line);
    border-bottom: 1px solid var(--theme-line);
}

.principle-card > span {
    color: var(--theme-faint);
    font-size: 9px;
}

.principle-card h3 {
    margin: 115px 0 14px;
    font-size: 22px;
    font-weight: 570;
    letter-spacing: -.035em;
}

.principle-card p {
    margin: 0;
    color: var(--theme-muted);
    font-size: 11px;
    line-height: 1.7;
}

.about-workspace {
    background: var(--theme-surface);
}

.about-workspace-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(50px, 8vw, 120px);
    align-items: center;
}

.workspace-image {
    min-height: 620px;
    overflow: hidden;
}

.workspace-image > img {
    width: 100%;
    height: 620px;
    object-fit: cover;
}

.team-section {
    background: var(--theme-bg);
}

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

.team-card {
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity .75s ease var(--team-delay),
        transform .75s cubic-bezier(.2,.8,.2,1)
        var(--team-delay);
}

.team-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.team-portrait {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--theme-surface-alt);
}

.team-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.2,.8,.2,1);
}

.team-card:hover .team-portrait img {
    transform: scale(1.035);
}

.team-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background:
        linear-gradient(
            145deg,
            var(--theme-surface-alt),
            var(--theme-surface-soft)
        );
}

.team-placeholder span {
    font-size: clamp(60px, 8vw, 110px);
    font-weight: 700;
    opacity: .1;
}

.team-info {
    padding: 17px 2px 0;
}

.team-info h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.025em;
}

.team-info p {
    margin: 5px 0 0;
    color: var(--theme-muted);
    font-size: 10px;
}

.premium-empty {
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(30px, 5vw, 65px);
    border: 1px solid var(--theme-line);
    background: var(--theme-surface);
}

.premium-empty > span {
    margin-bottom: auto;
    color: var(--theme-faint);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.premium-empty h2,
.premium-empty h3 {
    max-width: 760px;
    margin: 55px 0 14px;
    font-size: clamp(34px, 5vw, 65px);
    font-weight: 570;
    line-height: .96;
    letter-spacing: -.05em;
}

.premium-empty p {
    max-width: 540px;
    margin: 0;
    color: var(--theme-muted);
    font-size: 12px;
    line-height: 1.75;
}

/* Services */

.services-index {
    padding-bottom: clamp(90px, 11vw, 160px);
    background: var(--theme-bg);
}

.service-feature {
    display: grid;
    grid-template-columns:
        70px
        minmax(0, .95fr)
        minmax(350px, 1.05fr);
    gap: clamp(30px, 5vw, 80px);
    align-items: start;
    padding: clamp(65px, 8vw, 110px) 0;
    border-top: 1px solid var(--theme-line);
    scroll-margin-top: 100px;
}

.service-number {
    padding-top: 10px;
    color: var(--theme-faint);
    font-size: 10px;
}

.service-feature-main {
    padding-top: 3px;
}

.service-feature-main h2 {
    max-width: 580px;
    margin: 0;
    font-size: clamp(34px, 4.3vw, 62px);
    font-weight: 570;
    line-height: .97;
    letter-spacing: -.052em;
}

.service-feature-main > p {
    max-width: 560px;
    margin: 25px 0 32px;
    color: var(--theme-muted);
    font-size: 13px;
    line-height: 1.8;
}

.service-feature-main ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--theme-line);
    list-style: none;
}

.service-feature-main li {
    padding: 12px 4px;
    border-bottom: 1px solid var(--theme-line);
    color: var(--theme-text-soft);
    font-size: 10px;
}

.service-feature-main li:nth-child(odd) {
    margin-right: 15px;
}

.service-feature-media {
    min-height: 470px;
    overflow: hidden;
}

.service-feature-media img {
    width: 100%;
    height: 470px;
    object-fit: cover;
}

.service-placeholder {
    min-height: 470px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    overflow: hidden;
    background: var(--theme-surface-alt);
}

.service-placeholder::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 330px;
    height: 330px;
    border: 1px solid var(--theme-line);
    border-radius: 50%;
}

.service-placeholder span {
    position: absolute;
    top: 28px;
    left: 28px;
    color: var(--theme-faint);
    font-size: 9px;
}

.service-placeholder strong {
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 570;
    line-height: .92;
    letter-spacing: -.055em;
}

/* Image hero */

.image-page-hero {
    min-height: min(860px, 92svh);
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #07111f;
    color: #fff;
}

.image-page-hero > img,
.image-hero-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-hero-placeholder {
    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(255,255,255,.12),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #07111f,
            #14263b
        );
}

.image-page-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(3,9,16,.88),
            rgba(3,9,16,.25)
        ),
        linear-gradient(
            0deg,
            rgba(3,9,16,.65),
            transparent 55%
        );
}

.image-page-content {
    position: relative;
    z-index: 3;
    padding-bottom: clamp(70px, 8vw, 110px);
}

.image-page-content h1 {
    max-width: 970px;
}

.image-page-content p {
    max-width: 600px;
    margin: 27px 0 0;
    color: rgba(255,255,255,.68);
    font-size: 14px;
    line-height: 1.75;
}

/* Solution catalog */

.solution-catalog {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--theme-line);
    border-left: 1px solid var(--theme-line);
}

.solution-catalog-card {
    min-height: 290px;
    padding: 27px;
    border-right: 1px solid var(--theme-line);
    border-bottom: 1px solid var(--theme-line);
}

.solution-catalog-card > span {
    color: var(--theme-faint);
    font-size: 9px;
}

.solution-catalog-card h3 {
    margin: 100px 0 13px;
    font-size: 22px;
    font-weight: 570;
    letter-spacing: -.035em;
}

.solution-catalog-card p {
    margin: 0;
    color: var(--theme-muted);
    font-size: 10px;
    line-height: 1.7;
}

.solution-custom {
    background: var(--theme-surface);
}

/* Portfolio */

.portfolio-intro {
    max-width: 850px;
    margin-bottom: 60px;
}

.portfolio-intro h2 {
    margin: 0;
    font-size: clamp(45px, 6vw, 85px);
    font-weight: 570;
    line-height: .93;
    letter-spacing: -.06em;
}

.portfolio-intro p {
    max-width: 600px;
    margin: 27px 0 0;
    color: var(--theme-muted);
    font-size: 13px;
    line-height: 1.8;
}

.portfolio-empty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.portfolio-empty-card {
    min-height: 430px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    overflow: hidden;
    background: var(--theme-surface-alt);
}

.portfolio-empty-card::before {
    content: "";
    position: absolute;
    top: 18%;
    left: 50%;
    width: 230px;
    height: 230px;
    transform: translateX(-50%);
    border: 1px solid var(--theme-line);
    border-radius: 50%;
}

.portfolio-empty-card span {
    margin-bottom: 7px;
    color: var(--theme-faint);
    font-size: 9px;
}

.portfolio-empty-card strong {
    font-size: 20px;
    font-weight: 570;
}

/* Talent */

.talent-placeholder {
    display: grid;
    place-items: center;
}

.talent-placeholder span {
    color: rgba(255,255,255,.08);
    font-size: clamp(100px, 22vw, 350px);
    font-weight: 800;
    letter-spacing: -.1em;
}

.talent-categories {
    background: var(--theme-surface-soft);
}

.talent-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--theme-line);
    border-left: 1px solid var(--theme-line);
}

.talent-category {
    min-height: 330px;
    padding: 28px;
    border-right: 1px solid var(--theme-line);
    border-bottom: 1px solid var(--theme-line);
}

.talent-category > span {
    color: var(--theme-faint);
    font-size: 9px;
}

.talent-category h3 {
    margin: 130px 0 15px;
    font-size: 24px;
    font-weight: 570;
    letter-spacing: -.035em;
}

.talent-category p {
    margin: 0;
    color: var(--theme-muted);
    font-size: 11px;
    line-height: 1.7;
}

.talent-brand-section {
    background: var(--theme-surface);
}

/* Contact */

.contact-hero {
    padding:
        calc(var(--header) + 100px)
        0
        80px;
    background: var(--theme-surface);
}

.contact-hero-grid {
    display: grid;
    grid-template-columns: 1fr .65fr;
    gap: 70px;
    align-items: end;
}

.contact-hero h1 {
    max-width: 800px;
    font-size: clamp(60px, 8vw, 115px);
}

.contact-hero-media {
    height: 420px;
    overflow: hidden;
}

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

.contact-visual-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: var(--theme-surface-alt);
}

.contact-visual-placeholder span {
    font-size: 100px;
    font-weight: 800;
    opacity: .08;
}

.contact-main {
    border-top: 1px solid var(--theme-line);
}

.contact-layout {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: clamp(60px, 10vw, 150px);
}

.contact-details {
    display: flex;
    flex-direction: column;
}

.contact-detail {
    padding: 20px 0;
    border-top: 1px solid var(--theme-line);
}

.contact-detail > span {
    display: block;
    margin-bottom: 8px;
    color: var(--theme-faint);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.contact-detail a,
.contact-detail p {
    display: block;
    margin: 0 0 5px;
    color: var(--theme-text);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.6;
}

/* Forms */

.public-form-wrap {
    padding: clamp(30px, 5vw, 60px);
    border: 1px solid var(--theme-line);
    background: var(--theme-surface);
}

.public-form-heading {
    margin-bottom: 38px;
}

.public-form-heading > span {
    display: block;
    margin-bottom: 12px;
    color: var(--theme-faint);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.public-form-heading h2 {
    margin: 0;
    font-size: clamp(34px, 4vw, 55px);
    font-weight: 570;
    line-height: .97;
    letter-spacing: -.05em;
}

.public-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 18px;
}

.public-form label {
    display: grid;
    gap: 8px;
}

.public-form label > span {
    color: var(--theme-muted);
    font-size: 9px;
    font-weight: 700;
}

.public-form input,
.public-form select,
.public-form textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--theme-input-border);
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: var(--theme-text);
}

.public-form input,
.public-form select {
    height: 48px;
}

.public-form textarea {
    min-height: 160px;
    padding: 13px 0;
    resize: vertical;
    line-height: 1.6;
}

.public-form input:focus,
.public-form select:focus,
.public-form textarea:focus {
    border-color: var(--theme-text);
}

.form-full {
    margin-top: 25px;
}

.form-span-two {
    grid-column: 1 / -1;
}

.public-submit {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    gap: 30px;
    margin-top: 30px;
    padding: 0 21px;
    border: 0;
    background: var(--theme-text);
    color: var(--theme-surface);
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
}

.form-success,
.form-error {
    margin-bottom: 28px;
    padding: 17px 18px;
    border: 1px solid var(--theme-line);
    font-size: 11px;
    line-height: 1.6;
}

.form-success {
    border-color: rgba(18,183,106,.35);
    background: rgba(18,183,106,.07);
}

.form-success strong,
.form-success p {
    display: block;
    margin: 0;
}

.form-success p {
    margin-top: 5px;
}

.form-error {
    border-color: rgba(240,68,56,.35);
    background: rgba(240,68,56,.07);
}

.form-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
}

/* Project */

.project-page {
    min-height: 100vh;
    padding:
        calc(var(--header) + clamp(75px, 8vw, 120px))
        0
        clamp(80px, 10vw, 140px);
    background: var(--theme-bg);
}

.project-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(55px, 9vw, 135px);
    align-items: start;
}

.project-intro {
    position: sticky;
    top: calc(var(--header) + 40px);
}

.project-intro h1 {
    max-width: 640px;
    font-size: clamp(58px, 7.5vw, 105px);
}

.project-intro > p {
    max-width: 480px;
    margin: 28px 0 0;
    color: var(--theme-muted);
    font-size: 13px;
    line-height: 1.8;
}

.project-process {
    margin-top: 55px;
    border-top: 1px solid var(--theme-line);
}

.project-process > div {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--theme-line);
}

.project-process span {
    color: var(--theme-faint);
    font-size: 9px;
}

.project-process p {
    margin: 0;
    font-size: 10px;
}

.large-success {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.large-success strong {
    font-size: clamp(35px, 5vw, 60px);
    font-weight: 570;
    line-height: .98;
    letter-spacing: -.05em;
}

.large-success .text-link {
    align-self: flex-start;
}

/* Careers */

.careers-openings {
    padding-top: 0;
    background: var(--theme-bg);
}


/* ==========================================================
   RESPONSIVE INNER PAGES
   ========================================================== */

@media (max-width: 1100px) {

    .principle-grid,
    .team-grid,
    .talent-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .solution-catalog {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-feature {
        grid-template-columns:
            50px
            minmax(0, 1fr);
    }

    .service-feature-media {
        grid-column: 2;
    }

    .portfolio-empty-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 850px) {

    .page-hero-grid,
    .editorial-two-column,
    .about-workspace-grid,
    .contact-hero-grid,
    .contact-layout,
    .project-layout {
        grid-template-columns: 1fr;
    }

    .page-hero {
        padding-top:
            calc(var(--header) + 90px);
    }

    .page-hero-aside {
        max-width: 580px;
    }

    .wide-editorial-media {
        height: 65svh;
    }

    .editorial-copy {
        padding-top: 0;
    }

    .workspace-image,
    .workspace-image > img {
        min-height: 520px;
        height: 520px;
    }

    .service-feature {
        grid-template-columns: 35px 1fr;
        gap: 25px;
    }

    .service-feature-media {
        grid-column: 1 / -1;
        margin-left: 60px;
    }

    .project-intro {
        position: static;
    }

    .project-process {
        max-width: 550px;
    }

    .contact-hero-media {
        height: 380px;
    }

}


@media (max-width: 600px) {

    .page-hero h1,
    .image-page-content h1,
    .contact-hero h1,
    .project-intro h1 {
        font-size: clamp(52px, 15vw, 75px);
    }

    .principle-grid,
    .team-grid,
    .solution-catalog,
    .talent-category-grid,
    .portfolio-empty-grid {
        grid-template-columns: 1fr;
    }

    .principle-card,
    .solution-catalog-card,
    .talent-category {
        min-height: 240px;
    }

    .principle-card h3,
    .solution-catalog-card h3,
    .talent-category h3 {
        margin-top: 70px;
    }

    .team-grid {
        gap: 35px;
    }

    .service-feature {
        grid-template-columns: 1fr;
    }

    .service-number {
        padding: 0;
    }

    .service-feature-media {
        grid-column: 1;
        margin-left: 0;
    }

    .service-feature-main ul {
        grid-template-columns: 1fr;
    }

    .service-feature-main li:nth-child(odd) {
        margin-right: 0;
    }

    .service-feature-media,
    .service-feature-media img,
    .service-placeholder {
        min-height: 380px;
        height: 380px;
    }

    .image-page-hero {
        min-height: 760px;
    }

    .portfolio-empty-card {
        min-height: 330px;
    }

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

    .form-span-two {
        grid-column: 1;
    }

    .public-form-wrap {
        padding: 24px 18px;
    }

    .contact-hero {
        padding-top:
            calc(var(--header) + 70px);
    }

    .contact-hero-media {
        height: 300px;
    }

}


/* Team animation accessibility */

@media (prefers-reduced-motion: reduce) {

    .team-card {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .team-card:hover .team-portrait img {
        transform: none;
    }

}


/* ==========================================================
   UNIVERSAL SOLUTIONS
   PREMIUM NAVIGATION + WIDE FOOTER + LEGAL
   ========================================================== */


/* ----------------------------------------------------------
   HEADER — DESKTOP
   Logo left / links right / theme last
   ---------------------------------------------------------- */

@media (min-width: 1101px) {

    .site-header .site-shell,
    .site-header .header-inner {
        width: min(
            calc(100% - 56px),
            1760px
        );
        max-width: none;
        margin-inline: auto;
    }

    .header-inner {
        display: flex;
        align-items: center;
    }

    .site-logo,
    .brand,
    .header-brand {
        flex: 0 0 auto;
        margin-right: clamp(70px, 8vw, 170px);
    }

    .desktop-nav,
    .main-nav,
    .site-nav {
        margin-left: auto;
    }

    .desktop-nav ul,
    .main-nav ul,
    .site-nav ul {
        gap: clamp(25px, 2.25vw, 46px);
    }

    .desktop-nav a,
    .main-nav a,
    .site-nav a {
        font-size: 13px;
        font-weight: 650;
        letter-spacing: -.015em;
    }

    .header-actions {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 14px;
        margin-left: clamp(28px, 3vw, 52px);
    }

    .header-actions .theme-toggle {
        order: 999;
        flex: 0 0 auto;
        margin-left: 3px;
    }

    .header-cta {
        min-height: 46px;
        padding-inline: 21px;
        font-size: 11px;
    }

}


/* Theme toggle is visually the last control */

.header-actions .theme-toggle {
    order: 999;
}


/* ----------------------------------------------------------
   WIDE CORPORATE FOOTER
   ---------------------------------------------------------- */

.site-footer {
    width: 100%;
    padding: 0;
    overflow: hidden;
    background: #050b13;
    color: #fff;
}

.footer-wide {
    width: min(
        calc(100% - 72px),
        1800px
    );
    margin-inline: auto;
}

.footer-cta {
    border-bottom:
        1px solid rgba(255,255,255,.14);
    background: #0b1522;
}

.footer-cta-grid {
    min-height: 390px;
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(300px, .65fr);
    gap: clamp(70px, 10vw, 180px);
    align-items: end;
    padding: 75px 0;
}

.footer-eyebrow {
    display: block;
    margin-bottom: 28px;
    color: rgba(255,255,255,.46);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.footer-cta h2 {
    max-width: 980px;
    margin: 0;
    color: #fff;
    font-size: clamp(55px, 7vw, 115px);
    font-weight: 560;
    line-height: .88;
    letter-spacing: -.07em;
}

.footer-cta-side {
    padding-bottom: 7px;
}

.footer-cta-side p {
    max-width: 430px;
    margin: 0 0 32px;
    color: rgba(255,255,255,.6);
    font-size: 13px;
    line-height: 1.75;
}

.footer-project-button {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 55px;
    padding: 0 21px;
    background: #fff;
    color: #07111f;
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
    transition:
        transform .2s ease,
        background .2s ease;
}

.footer-project-button:hover {
    transform: translateY(-2px);
    background: #edf0f3;
}


/* Main footer */

.footer-main {
    padding: 72px 0 0;
}

.footer-brand-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(280px, .6fr);
    gap: 80px;
    padding-bottom: 65px;
    border-bottom:
        1px solid rgba(255,255,255,.12);
}

.footer-brand-name {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-size: clamp(25px, 2.2vw, 38px);
    font-weight: 720;
    letter-spacing: -.05em;
}

.footer-tagline {
    margin: 8px 0 0;
    color: rgba(255,255,255,.47);
    font-size: 10px;
    letter-spacing: .02em;
}

.footer-brand-description {
    max-width: 520px;
    margin: 0;
    color: rgba(255,255,255,.58);
    font-size: 12px;
    line-height: 1.8;
}


/* Footer nav */

.footer-navigation {
    display: grid;
    grid-template-columns:
        .8fr
        1.2fr
        1fr
        1fr
        1.25fr;
    gap: clamp(35px, 5vw, 90px);
    padding: 65px 0 85px;
}

.footer-column-title {
    display: block;
    margin-bottom: 23px;
    color: rgba(255,255,255,.36);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.footer-column nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
}

.footer-column nav a,
.footer-contact-link {
    position: relative;
    color: rgba(255,255,255,.79);
    text-decoration: none;
    font-size: 11px;
    line-height: 1.5;
    transition:
        color .2s ease,
        transform .2s ease;
}

.footer-column nav a:hover,
.footer-contact-link:hover {
    color: #fff;
    transform: translateX(3px);
}

.footer-address {
    max-width: 250px;
    margin: 19px 0 0;
    color: rgba(255,255,255,.52);
    font-size: 10px;
    line-height: 1.7;
}

.footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    margin-top: 26px;
}

.footer-socials a {
    color: rgba(255,255,255,.72);
    text-decoration: none;
    font-size: 9px;
}

.footer-socials a:hover {
    color: #fff;
}


/* Giant wordmark */

.footer-wordmark {
    width: 100%;
    overflow: hidden;
    margin: 0 0 -1.5vw;
    color: rgba(255,255,255,.94);
    font-size: clamp(110px, 18.5vw, 355px);
    font-weight: 800;
    line-height: .72;
    letter-spacing: -.095em;
    white-space: nowrap;
    user-select: none;
}


/* Legal bottom */

.footer-bottom {
    min-height: 78px;
    display: grid;
    grid-template-columns:
        1fr
        auto
        1fr;
    gap: 30px;
    align-items: center;
    border-top:
        1px solid rgba(255,255,255,.12);
}

.footer-copyright {
    color: rgba(255,255,255,.42);
    font-size: 8px;
}

.footer-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

.footer-legal a,
.footer-back-top {
    color: rgba(255,255,255,.54);
    text-decoration: none;
    font-size: 8px;
    transition: color .2s ease;
}

.footer-legal a:hover,
.footer-back-top:hover {
    color: #fff;
}

.footer-back-top {
    justify-self: end;
    display: inline-flex;
    gap: 8px;
    align-items: center;
}


/* ----------------------------------------------------------
   LEGAL PAGES
   ---------------------------------------------------------- */

.legal-hero {
    padding:
        calc(var(--header) + clamp(95px, 11vw, 160px))
        0
        clamp(70px, 9vw, 125px);
    border-bottom: 1px solid var(--theme-line);
    background: var(--theme-surface);
}

.legal-hero h1 {
    max-width: 1050px;
    margin: 0;
    font-size: clamp(60px, 9vw, 130px);
    font-weight: 560;
    line-height: .88;
    letter-spacing: -.072em;
}

.legal-hero p {
    max-width: 580px;
    margin: 32px 0 0;
    color: var(--theme-muted);
    font-size: 13px;
    line-height: 1.75;
}

.legal-section {
    padding: clamp(70px, 9vw, 130px) 0;
    background: var(--theme-bg);
}

.legal-layout {
    display: grid;
    grid-template-columns:
        minmax(180px, .32fr)
        minmax(0, .68fr);
    gap: clamp(60px, 11vw, 180px);
    align-items: start;
}

.legal-index {
    position: sticky;
    top: calc(var(--header) + 35px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.legal-index > span {
    width: 100%;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--theme-line);
    color: var(--theme-faint);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.legal-index a {
    width: 100%;
    padding: 11px 0;
    border-bottom: 1px solid var(--theme-line);
    color: var(--theme-muted);
    text-decoration: none;
    font-size: 9px;
}

.legal-index a:hover {
    color: var(--theme-text);
}

.legal-content {
    max-width: 850px;
}

.legal-effective {
    margin: 0 0 65px;
    color: var(--theme-faint);
    font-size: 9px;
}

.legal-content section {
    padding: 0 0 55px;
    margin-bottom: 55px;
    border-bottom: 1px solid var(--theme-line);
    scroll-margin-top: calc(var(--header) + 35px);
}

.legal-content h2 {
    margin: 0 0 23px;
    font-size: clamp(28px, 3vw, 43px);
    font-weight: 570;
    line-height: 1;
    letter-spacing: -.045em;
}

.legal-content p {
    max-width: 760px;
    margin: 0 0 17px;
    color: var(--theme-muted);
    font-size: 13px;
    line-height: 1.9;
}

.legal-content a {
    color: var(--theme-text);
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 1100px) {

    .footer-wide {
        width: min(
            calc(100% - 48px),
            1800px
        );
    }

    .footer-navigation {
        grid-template-columns:
            repeat(3, 1fr);
        row-gap: 55px;
    }

    .footer-wordmark {
        font-size: 20vw;
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 760px) {

    .footer-wide {
        width: calc(100% - 36px);
    }

    .footer-cta-grid {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 45px;
        padding: 65px 0;
    }

    .footer-cta h2 {
        font-size: clamp(48px, 15vw, 72px);
    }

    .footer-brand-row {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 45px;
    }

    .footer-navigation {
        grid-template-columns:
            1fr 1fr;
        gap: 45px 30px;
        padding: 50px 0 70px;
    }

    .footer-contact-column {
        grid-column: 1 / -1;
    }

    .footer-wordmark {
        margin-bottom: 0;
        font-size: 20vw;
        line-height: .8;
    }

    .footer-bottom {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 27px 0;
    }

    .footer-legal {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 12px 20px;
    }

    .footer-back-top {
        justify-self: start;
    }

    .legal-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .legal-index {
        position: static;
    }

}


@media (max-width: 460px) {

    .footer-navigation {
        grid-template-columns: 1fr;
    }

    .footer-contact-column {
        grid-column: auto;
    }

}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .footer-project-button,
    .footer-column nav a,
    .footer-contact-link {
        transition: none;
    }

}


/* ==========================================================
   UNIVERSAL SOLUTIONS — GLOBAL MONTSERRAT TYPOGRAPHY
   ========================================================== */

/*
   Primary frontend typeface:
   Montserrat
*/

:root {
    --font-primary:
        "Montserrat",
        "Arial",
        "Helvetica",
        sans-serif;
}


/* ----------------------------------------------------------
   GLOBAL
   ---------------------------------------------------------- */

html {
    font-size: 16px;
}

body,
button,
input,
textarea,
select {
    font-family: var(--font-primary);
}

body {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: -.01em;
}


/* ----------------------------------------------------------
   HEADINGS
   ---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    font-weight: 650;
}

h1 {
    font-size: clamp(3.6rem, 7vw, 7.4rem);
    line-height: .94;
    letter-spacing: -.065em;
}

h2 {
    font-size: clamp(2.5rem, 4.5vw, 5.2rem);
    line-height: .98;
    letter-spacing: -.055em;
}

h3 {
    font-size: clamp(1.55rem, 2.2vw, 2.35rem);
    line-height: 1.08;
    letter-spacing: -.035em;
}

h4 {
    font-size: 1.25rem;
    line-height: 1.25;
}


/* ----------------------------------------------------------
   NORMAL CONTENT
   ---------------------------------------------------------- */

p,
li {
    font-size: 16px;
    line-height: 1.75;
}

.section-intro,
.section-copy,
.lead,
.hero-description,
.hero-copy p {
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.75;
}


/* ----------------------------------------------------------
   HEADER / NAVIGATION
   ---------------------------------------------------------- */

.desktop-nav a,
.main-nav a,
.site-nav a {
    font-family: var(--font-primary);
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1;
    letter-spacing: -.015em;
}

.header-cta {
    font-family: var(--font-primary);
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: -.01em;
}

.theme-toggle {
    font-family: var(--font-primary);
}


/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */

.btn,
.button,
.primary-button,
.secondary-button,
.hero-button,
.footer-project-button,
button[type="submit"] {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
}


/* ----------------------------------------------------------
   EYEBROWS / KICKERS
   These are intentionally smaller — but still readable.
   ---------------------------------------------------------- */

.section-kicker,
.eyebrow,
.footer-eyebrow,
.card-kicker,
.hero-kicker {
    font-family: var(--font-primary);
    font-size: 12px !important;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .13em;
    text-transform: uppercase;
}


/* ----------------------------------------------------------
   CARDS
   ---------------------------------------------------------- */

.service-card h3,
.solution-card h3,
.work-card h3,
.capability-card h3,
.talent-card h3,
.team-card h3 {
    font-family: var(--font-primary);
    font-weight: 650;
}

.service-card p,
.solution-card p,
.work-card p,
.capability-card p,
.talent-card p,
.team-card p {
    font-size: 15px;
    line-height: 1.7;
}


/* ----------------------------------------------------------
   FORMS
   ---------------------------------------------------------- */

label {
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 650;
}

input,
textarea,
select {
    font-size: 16px;
    font-weight: 450;
}

input::placeholder,
textarea::placeholder {
    font-family: var(--font-primary);
    font-size: 15px;
}


/* ----------------------------------------------------------
   FOOTER — CORRECT PREVIOUS UNDERSIZED TYPE
   ---------------------------------------------------------- */

.footer-brand-name {
    font-family: var(--font-primary);
    font-size: clamp(30px, 2.5vw, 44px);
    font-weight: 700;
}

.footer-tagline {
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.6;
}

.footer-brand-description {
    font-size: 15px !important;
    line-height: 1.8;
}

.footer-column-title {
    margin-bottom: 25px;

    font-family: var(--font-primary);
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .12em;
}

.footer-column nav {
    gap: 15px;
}

.footer-column nav a,
.footer-contact-link {
    font-family: var(--font-primary);
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.55;
}

.footer-address {
    font-size: 14px !important;
    line-height: 1.7;
}

.footer-socials a {
    font-size: 13px !important;
    font-weight: 600;
}

.footer-cta-side p {
    font-size: 16px !important;
    line-height: 1.75;
}

.footer-project-button {
    font-size: 14px !important;
}

.footer-copyright,
.footer-legal a,
.footer-back-top {
    font-family: var(--font-primary);
    font-size: 12px !important;
    line-height: 1.5;
}


/* ----------------------------------------------------------
   LEGAL PAGES
   ---------------------------------------------------------- */

.legal-hero p {
    font-size: 17px !important;
    line-height: 1.75;
}

.legal-index > span {
    font-size: 12px !important;
}

.legal-index a {
    font-size: 13px !important;
    line-height: 1.5;
}

.legal-effective {
    font-size: 13px !important;
}

.legal-content h2 {
    font-family: var(--font-primary);
    font-weight: 650;
}

.legal-content p {
    font-size: 16px !important;
    line-height: 1.85;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 760px) {

    html {
        font-size: 16px;
    }

    body {
        font-size: 16px;
    }

    h1 {
        font-size: clamp(3rem, 14vw, 4.8rem);
    }

    h2 {
        font-size: clamp(2.2rem, 10vw, 3.6rem);
    }

    h3 {
        font-size: 1.5rem;
    }

    .mobile-nav a,
    .mobile-menu a,
    .nav-mobile a {
        font-family: var(--font-primary);
        font-size: 21px !important;
        font-weight: 600;
        letter-spacing: -.025em;
    }

    .footer-column nav a,
    .footer-contact-link {
        font-size: 15px !important;
    }

    .footer-column-title {
        font-size: 12px !important;
    }

    .footer-brand-description,
    .footer-cta-side p {
        font-size: 15px !important;
    }

}


/* ----------------------------------------------------------
   LARGE DESKTOP NAV
   ---------------------------------------------------------- */

@media (min-width: 1400px) {

    .desktop-nav a,
    .main-nav a,
    .site-nav a {
        font-size: 16px !important;
    }

    .header-cta {
        font-size: 14px !important;
    }

}


/* ==========================================================
   UNIVERSAL SOLUTIONS — CLEAN CORPORATE FOOTER
   Replaces previous oversized footer presentation
   ========================================================== */

.clean-site-footer {
    width: 100%;
    margin: 0;
    padding: 0 !important;

    background: #08111d;
    color: #ffffff;

    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif;
}


/* Hide obsolete footer structures if cached markup survives */

.clean-site-footer .footer-cta,
.clean-site-footer .footer-wordmark,
.clean-site-footer .footer-navigation,
.clean-site-footer .footer-brand-row,
.clean-site-footer .footer-bottom {
    display: none !important;
}


/* Main container */

.footer-clean-shell {
    width: min(
        calc(100% - 80px),
        1540px
    );

    margin: 0 auto;
}


/* ----------------------------------------------------------
   MAIN FOOTER GRID
   ---------------------------------------------------------- */

.footer-clean-main {
    display: grid;

    grid-template-columns:
        minmax(300px, 1.65fr)
        minmax(150px, .65fr)
        minmax(190px, .8fr)
        minmax(230px, .9fr);

    gap: clamp(40px, 5vw, 90px);

    padding:
        clamp(64px, 7vw, 92px)
        0
        clamp(55px, 6vw, 78px);
}


/* ----------------------------------------------------------
   BRAND
   ---------------------------------------------------------- */

.footer-clean-brand {
    max-width: 480px;
}

.footer-clean-logo {
    display: inline-block;

    color: #ffffff;

    font-size: clamp(24px, 2vw, 32px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.045em;

    text-decoration: none;
}

.footer-clean-tagline {
    margin: 10px 0 0;

    color: rgba(255,255,255,.72);

    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.5;
}

.footer-clean-description {
    max-width: 440px;

    margin: 25px 0 0;

    color: rgba(255,255,255,.58);

    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.75;
}


/* CTA */

.footer-clean-cta {
    display: inline-flex;
    align-items: center;
    gap: 20px;

    min-height: 48px;

    margin-top: 30px;
    padding: 0 20px;

    border: 1px solid rgba(255,255,255,.22);

    color: #ffffff;

    font-size: 13px;
    font-weight: 650;
    line-height: 1;

    text-decoration: none;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.footer-clean-cta:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #08111d;

    transform: translateY(-2px);
}


/* ----------------------------------------------------------
   COLUMNS
   ---------------------------------------------------------- */

.footer-clean-column h3 {
    margin: 4px 0 24px;

    color: rgba(255,255,255,.45);

    font-size: 12px !important;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: .08em;
    text-transform: uppercase;
}

.footer-clean-column nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 14px;
}

.footer-clean-column nav a,
.footer-clean-contact-link {
    color: rgba(255,255,255,.78);

    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.5;

    text-decoration: none;

    transition:
        color .2s ease,
        transform .2s ease;
}

.footer-clean-column nav a:hover,
.footer-clean-contact-link:hover {
    color: #ffffff;
}


/* ----------------------------------------------------------
   CONTACT
   ---------------------------------------------------------- */

.footer-clean-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-clean-contact-link {
    margin-bottom: 10px;
}

.footer-clean-address {
    max-width: 280px;

    margin: 12px 0 0;

    color: rgba(255,255,255,.55);

    font-size: 14px !important;
    line-height: 1.7;
}

.footer-clean-socials {
    display: flex;
    flex-wrap: wrap;

    gap: 10px 18px;

    margin-top: 24px;
}

.footer-clean-socials a {
    color: rgba(255,255,255,.65);

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;
}

.footer-clean-socials a:hover {
    color: #ffffff;
}


/* ----------------------------------------------------------
   BOTTOM BAR
   ---------------------------------------------------------- */

.footer-clean-bottom {
    min-height: 76px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    gap: 30px;

    align-items: center;

    border-top:
        1px solid rgba(255,255,255,.12);
}

.footer-clean-bottom p {
    margin: 0;

    color: rgba(255,255,255,.45);

    font-size: 12px !important;
    line-height: 1.5;
}

.footer-clean-legal {
    display: flex;
    align-items: center;

    gap: 24px;
}

.footer-clean-legal a,
.footer-clean-top {
    color: rgba(255,255,255,.55);

    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;

    text-decoration: none;

    transition: color .2s ease;
}

.footer-clean-legal a:hover,
.footer-clean-top:hover {
    color: #ffffff;
}

.footer-clean-top {
    justify-self: end;
}


/* ----------------------------------------------------------
   LIGHT/DARK MODE
   Footer intentionally remains dark in both themes.
   Gives the page a clear visual ending.
   ---------------------------------------------------------- */

html[data-theme="light"] .clean-site-footer,
html[data-theme="dark"] .clean-site-footer {
    background: #08111d;
    color: #ffffff;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 1050px) {

    .footer-clean-shell {
        width: min(
            calc(100% - 48px),
            1540px
        );
    }

    .footer-clean-main {
        grid-template-columns:
            1.5fr
            1fr
            1fr;

        gap: 50px 40px;
    }

    .footer-clean-brand {
        grid-column: 1 / -1;

        max-width: 620px;

        padding-bottom: 10px;
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .footer-clean-shell {
        width: calc(100% - 36px);
    }

    .footer-clean-main {
        grid-template-columns:
            1fr 1fr;

        gap: 45px 28px;

        padding:
            58px
            0
            48px;
    }

    .footer-clean-brand {
        grid-column: 1 / -1;

        max-width: none;

        padding-bottom: 5px;
    }

    .footer-clean-contact {
        grid-column: 1 / -1;
    }

    .footer-clean-description {
        max-width: 520px;
    }

    .footer-clean-bottom {
        grid-template-columns: 1fr;

        gap: 14px;

        padding: 25px 0;
    }

    .footer-clean-legal {
        justify-content: flex-start;
        flex-wrap: wrap;

        gap: 12px 20px;
    }

    .footer-clean-top {
        justify-self: start;
    }

}


@media (max-width: 480px) {

    .footer-clean-main {
        grid-template-columns: 1fr;

        gap: 38px;
    }

    .footer-clean-brand,
    .footer-clean-contact {
        grid-column: auto;
    }

}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .footer-clean-cta,
    .footer-clean-column a,
    .footer-clean-socials a {
        transition: none;
    }

}


/* ==========================================================
   UNIVERSAL SOLUTIONS
   REFINED MONTSERRAT SCALE + CONTACT PAGE
   ========================================================== */


/* ----------------------------------------------------------
   TYPOGRAPHY CORRECTION
   ---------------------------------------------------------- */

body {
    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;
    line-height: 1.7;
}


/*
   Do NOT make every paragraph 16px+.
   Ordinary lowercase/interface text uses the restrained
   footer-style scale.
*/

p,
li {
    font-size: 15px;
    line-height: 1.7;
}


/* Navigation remains readable, not oversized */

.desktop-nav a,
.main-nav a,
.site-nav a {
    font-size: 14px !important;
}


/* Buttons */

.btn,
.button,
.primary-button,
.secondary-button,
.hero-button,
.header-cta,
.footer-clean-cta,
button[type="submit"] {
    font-size: 13px !important;
}


/* Ordinary card/body text */

.service-card p,
.solution-card p,
.work-card p,
.capability-card p,
.talent-card p,
.team-card p {
    font-size: 14px !important;
}


/* Footer remains our reference for normal lowercase text */

.footer-clean-description,
.footer-clean-column nav a,
.footer-clean-contact-link,
.footer-clean-address {
    font-size: 14px !important;
}


/* ----------------------------------------------------------
   CONTACT HERO
   ---------------------------------------------------------- */

.contact-page-hero {
    padding:
        calc(var(--header) + clamp(90px, 10vw, 145px))
        0
        clamp(70px, 8vw, 110px);

    border-bottom:
        1px solid var(--theme-line);

    background:
        var(--theme-surface);
}

.contact-page-hero h1 {
    max-width: 900px;

    margin: 16px 0 0;

    font-size:
        clamp(
            56px,
            7.5vw,
            108px
        );

    font-weight: 650;
    line-height: .92;
    letter-spacing: -.065em;
}

.contact-page-hero p {
    max-width: 690px;

    margin: 30px 0 0;

    color:
        var(--theme-muted);

    font-size: 15px !important;
    line-height: 1.75;
}


/* ----------------------------------------------------------
   CONTACT SECTION
   ---------------------------------------------------------- */

.contact-page-section {
    padding:
        clamp(65px, 8vw, 115px)
        0
        clamp(75px, 9vw, 125px);

    background:
        var(--theme-bg);
}


/* Status */

.contact-status {
    margin-bottom: 30px;

    padding: 18px 20px;

    border:
        1px solid var(--theme-line);

    background:
        var(--theme-surface);

    font-size: 14px;
}

.contact-status strong {
    display: block;

    margin-bottom: 4px;
}

.contact-status span {
    color:
        var(--theme-muted);
}


/* ----------------------------------------------------------
   EQUAL CARDS
   ---------------------------------------------------------- */

.contact-card-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: clamp(22px, 2.4vw, 36px);

    align-items: stretch;
}

.contact-main-card {
    min-height: 650px;

    padding:
        clamp(30px, 3.2vw, 48px);

    border:
        1px solid var(--theme-line);

    background:
        var(--theme-surface);
}

.contact-information-card,
.contact-form-card {
    height: 100%;
}


/* ----------------------------------------------------------
   CONTACT INFORMATION CARD
   ---------------------------------------------------------- */

.contact-information-card {
    display: flex;
    flex-direction: column;
}

.contact-card-label {
    display: block;

    margin-bottom: 18px;

    color:
        var(--theme-faint);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: .11em;
    text-transform: uppercase;
}

.contact-main-card h2 {
    margin: 0;

    font-size:
        clamp(
            28px,
            3vw,
            42px
        );

    font-weight: 650;
    line-height: 1.05;

    letter-spacing: -.045em;
}

.contact-card-intro,
.contact-form-heading p {
    max-width: 500px;

    margin: 17px 0 0;

    color:
        var(--theme-muted);

    font-size: 14px !important;
    line-height: 1.7;
}


/* Details */

.contact-detail-list {
    margin-top: 42px;

    border-top:
        1px solid var(--theme-line);
}

.contact-detail-row {
    display: grid;

    grid-template-columns:
        105px
        minmax(0, 1fr);

    gap: 22px;

    padding: 19px 0;

    border-bottom:
        1px solid var(--theme-line);
}

.contact-detail-row > span {
    color:
        var(--theme-faint);

    font-size: 12px;
    font-weight: 600;
}

.contact-detail-row a,
.contact-detail-row strong {
    color:
        var(--theme-text);

    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;

    text-decoration: none;

    overflow-wrap: anywhere;
}

.contact-detail-row a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.contact-detail-row small {
    display: block;

    margin-top: 4px;

    color:
        var(--theme-muted);

    font-size: 12px;
    line-height: 1.5;
}


/* Map */

.contact-map-link {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-top: 22px;
    padding: 17px 18px;

    border:
        1px solid var(--theme-line);

    color:
        var(--theme-text);

    background:
        var(--theme-bg);

    text-decoration: none;

    font-size: 13px;
    font-weight: 650;

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.contact-map-link:hover {
    transform:
        translateY(-2px);
}


/* ----------------------------------------------------------
   SOCIAL ICONS
   ---------------------------------------------------------- */

.contact-social-block {
    margin-top: auto;
    padding-top: 42px;
}

.contact-social-title {
    display: block;

    margin-bottom: 15px;

    color:
        var(--theme-muted);

    font-size: 12px;
    font-weight: 600;
}

.contact-social-icons {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;
}

.contact-social-icon {
    width: 42px;
    height: 42px;

    display: inline-grid;
    place-items: center;

    border:
        1px solid var(--theme-line);

    color:
        var(--theme-text);

    background:
        var(--theme-bg);

    text-decoration: none;

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;
}

.contact-social-icon svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.5;
}

.contact-social-icon:hover {
    transform:
        translateY(-2px);

    background:
        var(--theme-text);

    color:
        var(--theme-bg);
}

.contact-social-icon.is-pending {
    opacity: .32;

    cursor: default;
}


/* ----------------------------------------------------------
   FORM CARD
   ---------------------------------------------------------- */

.contact-form-card {
    display: flex;
    flex-direction: column;
}

.contact-form {
    margin-top: 38px;
}

.form-honeypot {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    clip:
        rect(
            0,
            0,
            0,
            0
        ) !important;

    white-space: nowrap !important;
}

.contact-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 23px 20px;
}

.contact-form label {
    display: block;
}

.contact-form label > span {
    display: block;

    margin-bottom: 9px;

    color:
        var(--theme-muted);

    font-size: 12px;
    font-weight: 600;
}

.contact-form input,
.contact-form textarea {
    width: 100%;

    border: 0;
    border-bottom:
        1px solid var(--theme-line);

    border-radius: 0;

    padding:
        11px
        0
        13px;

    outline: 0;

    background:
        transparent;

    color:
        var(--theme-text);

    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
    line-height: 1.5;

    transition:
        border-color .2s ease;
}

.contact-form textarea {
    min-height: 140px;

    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color:
        var(--theme-text);
}

.contact-form-full {
    grid-column:
        1 / -1;
}

.contact-submit-button {
    width: 100%;

    min-height: 52px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-top: 31px;
    padding: 0 19px;

    border:
        1px solid var(--theme-text);

    background:
        var(--theme-text);

    color:
        var(--theme-bg);

    cursor: pointer;

    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px !important;
    font-weight: 700;

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.contact-submit-button:hover {
    opacity: .88;

    transform:
        translateY(-1px);
}


/* ----------------------------------------------------------
   APPOINTMENT
   ---------------------------------------------------------- */

.contact-appointment {
    max-width: 660px;

    margin:
        clamp(55px, 7vw, 90px)
        auto
        0;

    text-align: center;
}

.contact-appointment > span {
    display: block;

    color:
        var(--theme-faint);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .1em;
    text-transform: uppercase;
}

.contact-appointment p {
    margin:
        12px
        0
        22px;

    color:
        var(--theme-muted);

    font-size: 14px !important;
}

.contact-appointment-button {
    min-height: 50px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 28px;

    padding:
        0
        21px;

    border:
        1px solid var(--theme-text);

    color:
        var(--theme-text);

    background:
        transparent;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.contact-appointment-button:hover {
    background:
        var(--theme-text);

    color:
        var(--theme-bg);

    transform:
        translateY(-2px);
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 900px) {

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

    .contact-main-card {
        min-height: auto;
    }

    .contact-social-block {
        margin-top: 40px;
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 600px) {

    body {
        font-size: 14px;
    }

    p,
    li {
        font-size: 14px;
    }

    .contact-page-hero {
        padding:
            calc(var(--header) + 70px)
            0
            65px;
    }

    .contact-page-hero h1 {
        font-size:
            clamp(
                48px,
                15vw,
                70px
            );
    }

    .contact-page-hero p {
        font-size:
            14px !important;
    }

    .contact-main-card {
        padding:
            27px
            22px;
    }

    .contact-detail-row {
        grid-template-columns:
            1fr;

        gap: 7px;
    }

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

    .contact-form-full {
        grid-column: auto;
    }

}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    .contact-map-link,
    .contact-social-icon,
    .contact-submit-button,
    .contact-appointment-button {
        transition: none;
    }

}


/* ==========================================================
   UNIVERSAL SOLUTIONS — FINAL TYPOGRAPHY AUTHORITY
   ========================================================== */

html {
    font-size: 16px !important;
}

body {
    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 16px !important;
    font-weight: 400;
    line-height: 1.7;
}


/* NORMAL LOWERCASE CONTENT */

main p,
main li,
main address,
main blockquote,
main input,
main textarea,
main select {
    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 16px !important;
    line-height: 1.7;
}


/* SECONDARY COPY */

.card p,
.service-card p,
.solution-card p,
.capability-card p,
.work-card p,
.team-card p,
.talent-card p,
.contact-card-intro,
.contact-form-heading p,
.contact-detail-row a,
.contact-detail-row strong,
.contact-page-hero p {
    font-size: 15px !important;
    line-height: 1.7;
}


/* NAVIGATION */

.desktop-nav a,
.main-nav a,
.site-nav a {
    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 16px !important;
    font-weight: 600 !important;

    letter-spacing: -.02em !important;
}


/* HEADER BUTTON */

.header-cta {
    font-size: 14px !important;
    font-weight: 700 !important;
}


/* BUTTONS */

.btn,
.button,
.primary-button,
.secondary-button,
.hero-button,
.contact-submit-button,
.contact-appointment-button,
.footer-clean-cta,
button[type="submit"] {
    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 14px !important;
    font-weight: 700 !important;
}


/*
   EYEBROWS ARE THE ONLY SMALL TYPOGRAPHY.
   Never below 12px.
*/

.section-kicker,
.eyebrow,
.hero-kicker,
.card-kicker,
.contact-card-label,
.contact-appointment > span,
.footer-clean-column h3 {
    font-size: 12px !important;
    font-weight: 700 !important;
}


/* FORMS */

label,
.contact-form label > span {
    font-size: 13px !important;
}

input,
textarea,
select {
    font-size: 16px !important;
}


/* HEADINGS */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif !important;
}


/*
   We do NOT globally force gigantic h1/h2 sizes.
   Each hero/section can retain its intended display scale.
*/


/* ==========================================================
   CONTACT MAP
   ========================================================== */

.contact-map-card {
    width: 100%;

    margin-top: 24px;

    overflow: hidden;

    border:
        1px solid var(--theme-line);

    background:
        var(--theme-bg);
}

.contact-map-frame {
    display: block;

    width: 100%;
    height: 235px;

    border: 0;

    filter: grayscale(.12);
}

.contact-map-meta {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 24px;

    padding: 17px 18px;

    border-top:
        1px solid var(--theme-line);
}

.contact-map-meta > div {
    min-width: 0;
}

.contact-map-meta span {
    display: block;

    margin-bottom: 4px;

    color:
        var(--theme-faint);

    font-size: 12px;
    font-weight: 600;
}

.contact-map-meta strong {
    display: block;

    color:
        var(--theme-text);

    font-size: 15px;
    font-weight: 650;
}

.contact-map-meta small {
    display: block;

    margin-top: 3px;

    color:
        var(--theme-muted);

    font-size: 12px;
}

.contact-map-meta a {
    flex: 0 0 auto;

    color:
        var(--theme-text);

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
}


/* ==========================================================
   FOOTER CONTACT DETAILS
   ========================================================== */

.footer-official-contacts {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 11px;
}

.footer-official-contacts
.footer-clean-contact-link {
    margin: 0 !important;

    font-size: 14px !important;
    line-height: 1.5;
}

.footer-clean-office-link {
    display: inline-flex;
    flex-direction: column;

    margin-top: 7px;

    color:
        rgba(255,255,255,.78);

    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;

    text-decoration: none;
}

.footer-clean-office-link span {
    margin-top: 2px;

    color:
        rgba(255,255,255,.43);

    font-size: 12px;
    font-weight: 500;
}


/* Footer standard copy */

.footer-clean-description,
.footer-clean-column nav a,
.footer-clean-contact-link,
.footer-clean-address {
    font-size: 14px !important;
}


/* ==========================================================
   CONTACT CARDS
   ========================================================== */

.contact-card-grid {
    align-items: stretch !important;
}

.contact-main-card {
    min-height: 720px;
}

.contact-information-card,
.contact-form-card {
    height: 100%;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 760px) {

    body,
    main p,
    main li {
        font-size: 15px !important;
    }

    .mobile-nav a,
    .mobile-menu a,
    .nav-mobile a {
        font-family:
            "Montserrat",
            Arial,
            Helvetica,
            sans-serif !important;

        font-size: 18px !important;
        font-weight: 600 !important;
    }

    .contact-main-card {
        min-height: auto;
    }

    .contact-map-frame {
        height: 220px;
    }

    .contact-map-meta {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* ==========================================================
   UNIVERSAL SOLUTIONS — CLIENT-FRIENDLY CARDS
   ========================================================== */

.solution-card-grid {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 18px !important;

    border: 0 !important;
}

.solution-card-grid .solution-row {
    min-height: 230px;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    padding: 28px !important;

    border:
        1px solid var(--theme-line) !important;

    background:
        var(--theme-surface) !important;

    position: relative;

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.solution-card-grid .solution-row:hover {
    transform:
        translateY(-5px);

    border-color:
        var(--theme-text) !important;
}

.solution-card-grid .solution-row > span:first-child {
    margin-bottom: auto;

    color:
        var(--theme-faint);

    font-size: 12px !important;
    font-weight: 700;
}

.solution-card-grid .solution-row h3 {
    max-width: 290px;

    margin:
        40px
        0
        12px !important;

    font-size:
        clamp(
            20px,
            1.6vw,
            26px
        ) !important;

    font-weight: 650;
    line-height: 1.12;
}

.solution-card-grid .solution-row p {
    max-width: 330px;

    margin: 0 !important;

    color:
        var(--theme-muted);

    font-size: 14px !important;
    line-height: 1.65;
}

.solution-card-grid .solution-row > *:last-child {
    margin-top: 20px;
}


/* ==========================================================
   SOCIAL ICON SYSTEM
   ========================================================== */

.footer-social-section {
    margin-top: 25px;
}

.footer-social-label {
    display: block;

    margin-bottom: 12px;

    color:
        rgba(255,255,255,.55);

    font-size: 12px;
    font-weight: 600;
}

.footer-social-icons,
.contact-social-icons {
    display: flex !important;
    flex-wrap: wrap;

    gap: 9px;
}

.brand-social-icon {
    width: 40px !important;
    height: 40px !important;

    flex:
        0 0 40px;

    display: inline-grid !important;
    place-items: center;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 9px;

    text-decoration: none;

    overflow: hidden;

    opacity: 1 !important;

    transition:
        transform .18s ease,
        filter .18s ease;
}

.brand-social-icon svg {
    width: 19px !important;
    height: 19px !important;

    display: block;

    fill: currentColor;
    stroke: none;
}


/* FACEBOOK */

.brand-social-facebook {
    background: #1877f2 !important;
    color: #ffffff !important;
}


/* INSTAGRAM */

.brand-social-instagram {
    background:
        linear-gradient(
            135deg,
            #833ab4,
            #fd1d1d,
            #fcb045
        ) !important;

    color: #ffffff !important;
}

.brand-social-instagram svg {
    fill: none !important;

    stroke: currentColor !important;
    stroke-width: 1.8;
}


/* LINKEDIN */

.brand-social-linkedin {
    background: #0a66c2 !important;
    color: #ffffff !important;
}


/* TIKTOK */

.brand-social-tiktok {
    background: #000000 !important;
    color: #ffffff !important;

    box-shadow:
        inset 2px 0 0 #25f4ee,
        inset -2px 0 0 #fe2c55;
}


/* YOUTUBE */

.brand-social-youtube {
    background: #ff0000 !important;
    color: #ffffff !important;
}


/* X */

.brand-social-twitter {
    background: #000000 !important;
    color: #ffffff !important;

    border:
        1px solid rgba(
            255,
            255,
            255,
            .18
        ) !important;
}


/*
   IMPORTANT:
   An unlinked icon remains fully visible.
   It simply isn't clickable until its URL is entered in Admin.
*/

.brand-social-icon.is-unlinked {
    opacity: 1 !important;

    cursor: default;

    filter:
        saturate(.82);
}

.brand-social-icon:not(.is-unlinked):hover {
    transform:
        translateY(-3px);

    filter:
        brightness(1.08);
}


/* DARK MODE — NEVER HIDE SOCIAL ICONS */

html[data-theme="dark"]
.brand-social-icon {
    opacity: 1 !important;
    visibility: visible !important;
}


/* ==========================================================
   CONTACT LEFT CARD AFTER REMOVING CONTACT LIST
   ========================================================== */

.contact-information-card
.contact-map-card {
    margin-top: 34px;
}

.contact-information-card
.contact-social-block {
    margin-top: 28px;
    padding-top: 0;
}


/* ==========================================================
   RESPONSIVE CARDS
   ========================================================== */

@media (max-width: 1000px) {

    .solution-card-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

}


@media (max-width: 620px) {

    .solution-card-grid {
        grid-template-columns:
            1fr !important;
    }

    .solution-card-grid
    .solution-row {
        min-height: 205px;
    }

}


/* ==========================================================
   UNIVERSAL SOLUTIONS — FINAL ACTION SYSTEM
   ========================================================== */


/* VIEW ICON */

.view-eye {
    width: 22px;
    height: 22px;

    display: inline-grid;
    place-items: center;

    flex: 0 0 22px;
}

.view-eye svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
}


/* ==========================================================
   CTA HEARTBEAT
   ========================================================== */

@keyframes us-cta-heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    8% {
        transform: scale(1.035);
    }

    16% {
        transform: scale(1);
    }

    24% {
        transform: scale(1.025);
    }

    32% {
        transform: scale(1);
    }
}

.header-cta,
.hero-actions .btn-primary,
.cta-pulse,
.contact-appointment-button,
.footer-clean-cta {
    animation:
        us-cta-heartbeat
        3.4s
        ease-in-out
        infinite;

    transform-origin: center;
}

.header-cta:hover,
.hero-actions .btn-primary:hover,
.cta-pulse:hover,
.contact-appointment-button:hover,
.footer-clean-cta:hover {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {

    .header-cta,
    .hero-actions .btn-primary,
    .cta-pulse,
    .contact-appointment-button,
    .footer-clean-cta {
        animation: none !important;
    }
}


/* ==========================================================
   FLOATING WHATSAPP
   ========================================================== */

.floating-whatsapp {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 900;

    min-height: 54px;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding:
        0
        18px;

    border-radius: 999px;

    background:
        #25d366;

    color:
        #07130b !important;

    box-shadow:
        0 14px 40px
        rgba(0,0,0,.18);

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 13px;
    font-weight: 750;

    text-decoration: none;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.floating-whatsapp svg {
    width: 25px;
    height: 25px;

    fill: currentColor;
}

.floating-whatsapp:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.24);
}


/* ==========================================================
   APPOINTMENT
   ========================================================== */

.appointment-page {
    min-height: 70vh;
}

.appointment-hero {
    padding:
        clamp(120px, 14vw, 190px)
        0
        clamp(65px, 8vw, 110px);

    border-bottom:
        1px solid var(--theme-line);
}

.appointment-hero-inner {
    max-width: 900px;
}

.appointment-hero h1 {
    max-width: 850px;

    margin:
        14px
        0
        20px;

    font-size:
        clamp(
            46px,
            6.4vw,
            96px
        );

    line-height: .96;
    letter-spacing: -.055em;
}

.appointment-hero p {
    max-width: 650px;

    color:
        var(--theme-muted);

    font-size: 17px !important;
}

.appointment-section {
    padding:
        clamp(65px, 8vw, 110px)
        0;
}

.appointment-layout {
    display: grid;

    grid-template-columns:
        minmax(0, .82fr)
        minmax(0, 1.18fr);

    gap: 24px;

    align-items: stretch;
}

.appointment-info-card,
.appointment-form-card {
    border:
        1px solid var(--theme-line);

    background:
        var(--theme-surface);

    padding:
        clamp(
            28px,
            4vw,
            52px
        );
}

.appointment-info-card h2 {
    max-width: 460px;

    margin:
        18px
        0;

    font-size:
        clamp(
            30px,
            3.2vw,
            52px
        );

    line-height: 1;
    letter-spacing: -.045em;
}

.appointment-info-card > p {
    max-width: 500px;

    color:
        var(--theme-muted);
}

.appointment-methods {
    display: grid;

    gap: 0;

    margin-top: 45px;

    border-top:
        1px solid var(--theme-line);
}

.appointment-methods > div {
    display: grid;

    gap: 5px;

    padding:
        20px
        0;

    border-bottom:
        1px solid var(--theme-line);
}

.appointment-methods strong {
    font-size: 15px;
}

.appointment-methods span {
    color:
        var(--theme-muted);

    font-size: 14px;
}

.appointment-form-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 20px;
}

.appointment-form label {
    display: grid;

    gap: 8px;
}

.appointment-form label > span {
    color:
        var(--theme-muted);

    font-size: 13px;
    font-weight: 650;
}

.appointment-form input,
.appointment-form select,
.appointment-form textarea {
    width: 100%;

    min-height: 52px;

    border:
        1px solid var(--theme-line);

    background:
        var(--theme-bg);

    color:
        var(--theme-text);

    padding:
        13px
        15px;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 15px;
}

.appointment-form textarea {
    min-height: 150px;

    resize: vertical;
}

.appointment-form .form-full {
    grid-column:
        1 / -1;
}

.appointment-form button {
    margin-top: 26px;
}

.form-honeypot {
    position: absolute !important;

    left: -99999px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
}

.form-success,
.form-error {
    margin-bottom: 24px;

    padding: 18px 20px;

    border:
        1px solid var(--theme-line);
}

.form-success p,
.form-error p {
    margin:
        6px
        0
        0;

    font-size: 14px !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 850px) {

    .appointment-layout {
        grid-template-columns:
            1fr;
    }

}

@media (max-width: 620px) {

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

    .appointment-form .form-full {
        grid-column:
            auto;
    }

    .floating-whatsapp {
        right: 16px;
        bottom: 16px;

        width: 54px;
        height: 54px;

        min-height: 54px;

        padding: 0;

        justify-content: center;
    }

    .floating-whatsapp span {
        display: none;
    }

}


/* ==========================================================
   UNIVERSAL SOLUTIONS — SEO SERVICE LANDING PAGES
   ========================================================== */

.seo-service-page {
    overflow: hidden;
}

.seo-service-hero {
    padding:
        clamp(125px, 14vw, 190px)
        0
        clamp(70px, 9vw, 125px);

    border-bottom:
        1px solid var(--theme-line);
}

.seo-service-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(300px, .65fr);

    gap:
        clamp(40px, 8vw, 120px);

    align-items: end;
}

.seo-service-hero h1 {
    max-width: 950px;

    margin:
        16px
        0
        24px;

    font-size:
        clamp(
            46px,
            6.2vw,
            92px
        );

    line-height: .98;
    letter-spacing: -.055em;
}

.seo-service-lead {
    max-width: 790px;

    color:
        var(--theme-muted);

    font-size:
        clamp(
            17px,
            1.45vw,
            21px
        ) !important;

    line-height: 1.75;
}

.seo-service-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;
}

.seo-service-summary {
    padding:
        28px;

    border:
        1px solid var(--theme-line);

    background:
        var(--theme-surface);
}

.seo-service-summary > p {
    margin:
        18px
        0
        30px;

    color:
        var(--theme-muted);

    font-size: 15px !important;
    line-height: 1.75;
}

.seo-service-location {
    display: grid;

    gap: 6px;

    padding-top: 22px;

    border-top:
        1px solid var(--theme-line);
}

.seo-service-location strong {
    font-size: 14px;
}

.seo-service-location span {
    color:
        var(--theme-muted);

    font-size: 13px;
    line-height: 1.6;
}


/* SECTIONS */

.seo-service-section,
.seo-related-section {
    padding:
        clamp(70px, 9vw, 125px)
        0;
}

.seo-section-heading {
    max-width: 720px;

    margin-bottom:
        clamp(34px, 5vw, 64px);
}

.seo-section-heading h2 {
    margin:
        14px
        0
        0;

    font-size:
        clamp(
            34px,
            4vw,
            60px
        );

    line-height: 1;
    letter-spacing: -.045em;
}


/* CAPABILITY CARDS */

.seo-benefit-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    border-top:
        1px solid var(--theme-line);

    border-left:
        1px solid var(--theme-line);
}

.seo-benefit-card {
    min-height: 285px;

    display: flex;
    flex-direction: column;

    padding:
        clamp(
            26px,
            4vw,
            46px
        );

    border-right:
        1px solid var(--theme-line);

    border-bottom:
        1px solid var(--theme-line);

    background:
        var(--theme-bg);
}

.seo-card-number {
    margin-bottom: auto;

    color:
        var(--theme-muted);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
}

.seo-benefit-card h3 {
    margin:
        45px
        0
        12px;

    font-size:
        clamp(
            23px,
            2.2vw,
            34px
        );

    letter-spacing: -.035em;
}

.seo-benefit-card p {
    max-width: 520px;

    color:
        var(--theme-muted);

    font-size: 15px !important;
    line-height: 1.7;
}


/* DARK DELIVERY */

.seo-service-dark {
    background:
        #0b0c0f;

    color:
        #ffffff;
}

.seo-service-dark .section-kicker,
.seo-service-dark .seo-section-heading h2 {
    color:
        #ffffff;
}

.seo-deliverables-layout {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap:
        clamp(50px, 8vw, 120px);
}

.seo-deliverable-list {
    border-top:
        1px solid rgba(255,255,255,.16);
}

.seo-deliverable-item {
    min-height: 67px;

    display: flex;
    align-items: center;

    gap: 16px;

    border-bottom:
        1px solid rgba(255,255,255,.16);

    font-size: 15px;
    font-weight: 600;
}

.seo-deliverable-item svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}


/* FAQ */

.seo-faq-list {
    max-width: 1000px;

    border-top:
        1px solid var(--theme-line);
}

.seo-faq-item {
    border-bottom:
        1px solid var(--theme-line);
}

.seo-faq-item summary {
    min-height: 82px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    cursor: pointer;

    list-style: none;

    font-size:
        clamp(
            17px,
            1.6vw,
            22px
        );

    font-weight: 650;

    letter-spacing: -.02em;
}

.seo-faq-item summary::-webkit-details-marker {
    display: none;
}

.seo-faq-item summary span {
    font-size: 25px;
    font-weight: 400;

    transition:
        transform .2s ease;
}

.seo-faq-item[open] summary span {
    transform:
        rotate(45deg);
}

.seo-faq-item > div {
    max-width: 780px;

    padding:
        0
        0
        30px;
}

.seo-faq-item p {
    color:
        var(--theme-muted);

    font-size: 15px !important;
    line-height: 1.8;
}


/* RELATED SERVICES */

.seo-related-section {
    border-top:
        1px solid var(--theme-line);
}

.seo-related-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    border-top:
        1px solid var(--theme-line);

    border-left:
        1px solid var(--theme-line);
}

.seo-related-card {
    min-height: 110px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding:
        25px
        28px;

    border-right:
        1px solid var(--theme-line);

    border-bottom:
        1px solid var(--theme-line);

    color:
        var(--theme-text);

    text-decoration: none;

    font-size: 16px;
    font-weight: 700;

    transition:
        background .2s ease,
        padding .2s ease;
}

.seo-related-card:hover {
    background:
        var(--theme-surface);
}

.seo-related-card:hover .view-eye {
    transform:
        scale(1.1);
}


/* FINAL CTA */

.seo-service-final {
    padding:
        clamp(70px, 9vw, 120px)
        0;

    background:
        #0b0c0f;

    color:
        #fff;
}

.seo-service-final-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 45px;
}

.seo-service-final h2 {
    max-width: 720px;

    margin:
        15px
        0
        0;

    font-size:
        clamp(
            36px,
            4.6vw,
            70px
        );

    line-height: .98;
    letter-spacing: -.05em;
}

.button-outline-light {
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        22px;

    border:
        1px solid rgba(255,255,255,.45);

    color:
        #fff;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .seo-service-hero-grid,
    .seo-deliverables-layout {
        grid-template-columns:
            1fr;
    }

    .seo-service-summary {
        max-width: 620px;
    }

    .seo-service-final-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}

@media (max-width: 680px) {

    .seo-benefit-grid,
    .seo-related-grid {
        grid-template-columns:
            1fr;
    }

    .seo-benefit-card {
        min-height: 240px;
    }

    .seo-service-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .seo-service-actions a {
        width: 100%;
    }

}

/* =========================================================
   HOME TALENT ADMIN IMAGE
   ========================================================= */

.talent-visual {
    position: relative;
    overflow: hidden;
}

.talent-home-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    object-position: center;
}

.talent-visual-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* =========================================================
   ABOUT PUBLIC TEAM
   ========================================================= */

.about-team-section {
    overflow: hidden;
}

.about-team-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 48px;
}

.about-team-card {
    min-width: 0;
}

.about-team-photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: #eef1f4;
}

.about-team-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition:
        transform .5s ease;
}

.about-team-card:hover
.about-team-photo img {
    transform: scale(1.025);
}

.about-team-photo-placeholder {
    width: 100%;
    height: 100%;
    background:
        linear-gradient(
            135deg,
            #edf0f4,
            #dfe4e9
        );
}

.about-team-meta {
    padding-top: 18px;
}

.about-team-meta h3 {
    margin: 0;
    font-size: clamp(
        1.05rem,
        1.5vw,
        1.3rem
    );
}

.about-team-meta p {
    margin: 7px 0 0;
    opacity: .68;
    line-height: 1.55;
}

@media (max-width: 1000px) {

    .about-team-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .about-team-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-top: 32px;
    }

    .about-team-meta {
        padding-top: 12px;
    }
}



/* ==========================================================
   FINAL ABOUT TEAM PRESENTATION
   Circular portraits / strong names / responsive
   ========================================================== */

.about-team-section {
    padding-top: clamp(80px, 9vw, 150px);
    padding-bottom: clamp(80px, 9vw, 150px);
}

.about-team-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 64px);
    margin-top: clamp(48px, 6vw, 80px);
    align-items: start;
}

.about-team-card {
    min-width: 0;
    text-align: center;
}

.about-team-photo {
    position: relative;
    width: min(100%, 290px);
    aspect-ratio: 1 / 1;
    margin-inline: auto;

    overflow: hidden;

    border-radius: 50%;

    background:
        var(--theme-surface-alt);

    border:
        1px solid
        var(--theme-line);
}

.about-team-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;

    border-radius: 50%;

    transition:
        transform .45s ease;
}

.about-team-card:hover
.about-team-photo img {
    transform: scale(1.035);
}

.about-team-photo-placeholder {
    width: 100%;
    height: 100%;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--theme-surface-alt),
            var(--theme-surface-soft)
        );
}

.about-team-meta {
    padding-top: 22px;
    text-align: center;
}

.about-team-meta h3 {
    margin: 0;

    color: var(--theme-text);

    font-size:
        clamp(1.2rem, 1.8vw, 1.55rem);

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -.035em;
}

.about-team-meta p {
    margin: 9px 0 0;

    color: var(--theme-muted);

    font-size: 12px;

    font-weight: 500;

    line-height: 1.5;
}

@media (max-width: 1000px) {

    .about-team-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .about-team-photo {
        max-width: 250px;
    }
}

@media (max-width: 600px) {

    .about-team-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 28px 16px;

        margin-top: 40px;
    }

    .about-team-photo {
        width: min(100%, 180px);
    }

    .about-team-meta {
        padding-top: 14px;
    }

    .about-team-meta h3 {
        font-size: 1rem;
        font-weight: 800;
    }

    .about-team-meta p {
        margin-top: 5px;
        font-size: 10px;
    }
}


/* ==========================================================
   FINAL PORTFOLIO CATEGORY CARDS
   Remove meaningless circular placeholders
   ========================================================== */

.portfolio-empty-card::before {
    content: none !important;
    display: none !important;
}

.portfolio-empty-card {
    min-height: 300px;

    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: clamp(28px, 3vw, 42px);

    overflow: hidden;

    border:
        1px solid
        var(--theme-line);

    background:
        var(--theme-surface-alt);
}

.portfolio-empty-card::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 4px;

    background:
        currentColor;

    opacity: .08;
}

.portfolio-empty-card span {
    position: relative;
    z-index: 1;

    margin-bottom: 10px;

    color: var(--theme-faint);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.portfolio-empty-card strong {
    position: relative;
    z-index: 1;

    max-width: 90%;

    color: var(--theme-text);

    font-size:
        clamp(1.35rem, 2.2vw, 2rem);

    font-weight: 750;

    line-height: 1.08;

    letter-spacing: -.04em;
}

@media (max-width: 600px) {

    .portfolio-empty-card {
        min-height: 220px;
    }
}



/* ==========================================================
   ABOUT TEAM — FINAL SQUARE PORTRAITS
   ========================================================== */

.about-team-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 42px);
    align-items: start;
}

.about-team-card {
    min-width: 0;
    text-align: left;
}

.about-team-photo {
    position: relative;

    width: 100%;
    max-width: none;

    aspect-ratio: 1 / 1;

    margin: 0;

    overflow: hidden;

    border-radius: 0;

    background:
        var(--theme-surface-alt);

    border:
        1px solid
        var(--theme-line);
}

.about-team-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;

    border-radius: 0;

    transition:
        transform .4s ease;
}

.about-team-card:hover
.about-team-photo img {
    transform: scale(1.025);
}

.about-team-photo-placeholder {
    width: 100%;
    height: 100%;

    border-radius: 0;

    background:
        var(--theme-surface-alt);
}

.about-team-meta {
    padding-top: 16px;
    text-align: left;
}

.about-team-meta h3 {
    margin: 0;

    color: var(--theme-text);

    font-size:
        clamp(1.15rem, 1.5vw, 1.4rem);

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -.03em;
}

.about-team-meta p {
    margin: 6px 0 0;

    color: var(--theme-muted);

    font-size: 11px;

    font-weight: 500;

    line-height: 1.5;
}

@media (max-width: 1000px) {

    .about-team-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .about-team-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 24px 14px;
    }

    .about-team-meta {
        padding-top: 12px;
    }

    .about-team-meta h3 {
        font-size: 1rem;
        font-weight: 800;
    }

    .about-team-meta p {
        margin-top: 5px;
        font-size: 10px;
    }
}



/* ==========================================================
   ABOUT — FINAL COMPANY CONTENT
   ========================================================== */

.about-company-story {
    padding:
        clamp(90px, 10vw, 160px)
        0;
}

.about-story-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1fr);

    gap:
        clamp(60px, 9vw, 150px);

    align-items: start;
}

.about-story-heading h2 {
    max-width: 700px;

    margin:
        18px
        0
        0;

    font-size:
        clamp(3rem, 6vw, 6rem);

    font-weight: 600;

    line-height: .94;

    letter-spacing: -.06em;
}

.about-story-copy {
    max-width: 670px;

    padding-top: 34px;
}

.about-story-copy p {
    margin:
        0
        0
        24px;

    color:
        var(--theme-muted);

    font-size: 14px;

    line-height: 1.9;
}

.about-story-copy
.about-story-lead {
    color:
        var(--theme-text);

    font-size:
        clamp(1.2rem, 2vw, 1.65rem);

    font-weight: 550;

    line-height: 1.5;

    letter-spacing: -.025em;
}


/* Capabilities */

.about-capabilities {
    padding:
        clamp(80px, 9vw, 140px)
        0;

    background:
        var(--theme-surface-alt);
}

.about-capability-intro {
    max-width: 900px;

    margin-bottom:
        clamp(50px, 7vw, 90px);
}

.about-capability-intro h2 {
    max-width: 900px;

    margin:
        18px
        0
        0;

    font-size:
        clamp(2.8rem, 5.5vw, 5.7rem);

    font-weight: 600;

    line-height: .95;

    letter-spacing: -.055em;
}

.about-capability-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        var(--theme-line);

    border-left:
        1px solid
        var(--theme-line);
}

.about-capability-card {
    min-height: 390px;

    display: flex;
    flex-direction: column;

    padding:
        clamp(24px, 2.5vw, 36px);

    border-right:
        1px solid
        var(--theme-line);

    border-bottom:
        1px solid
        var(--theme-line);
}

.about-capability-number {
    color:
        var(--theme-faint);

    font-size: 10px;

    font-weight: 600;
}

.about-capability-card h3 {
    margin:
        auto
        0
        18px;

    font-size:
        clamp(1.35rem, 2vw, 1.8rem);

    font-weight: 700;

    line-height: 1.1;

    letter-spacing: -.035em;
}

.about-capability-card p {
    margin: 0;

    color:
        var(--theme-muted);

    font-size: 11px;

    line-height: 1.75;
}


/* How we work */

.about-approach {
    padding:
        clamp(90px, 10vw, 160px)
        0;
}

.about-approach-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1fr);

    gap:
        clamp(60px, 10vw, 170px);

    align-items: start;
}

.about-approach-title {
    position: sticky;

    top:
        calc(
            var(--header)
            + 35px
        );
}

.about-approach-title h2 {
    max-width: 650px;

    margin:
        18px
        0
        0;

    font-size:
        clamp(2.8rem, 5vw, 5.3rem);

    font-weight: 600;

    line-height: .96;

    letter-spacing: -.055em;
}

.about-approach-content {
    border-top:
        1px solid
        var(--theme-line);
}

.about-approach-item {
    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr);

    gap: 25px;

    padding:
        32px
        0;

    border-bottom:
        1px solid
        var(--theme-line);
}

.about-approach-item > span {
    padding-top: 5px;

    color:
        var(--theme-faint);

    font-size: 10px;
}

.about-approach-item h3 {
    margin:
        0
        0
        10px;

    font-size:
        clamp(1.25rem, 2vw, 1.6rem);

    font-weight: 700;

    letter-spacing: -.03em;
}

.about-approach-item p {
    max-width: 550px;

    margin: 0;

    color:
        var(--theme-muted);

    font-size: 12px;

    line-height: 1.8;
}


/* ==========================================================
   ABOUT TEAM — FINAL CONTROLLED CARD SIZE
   ========================================================== */

.about-team-section {
    padding:
        clamp(90px, 10vw, 150px)
        0;
}

.about-team-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 240px)
        );

    gap:
        42px;

    margin-top:
        60px;

    justify-content: start;
}

.about-team-card {
    width: 100%;
    max-width: 240px;

    text-align: left;
}

.about-team-photo {
    width: 100%;
    max-width: 240px;

    height: 280px;

    aspect-ratio: auto;

    margin: 0;

    overflow: hidden;

    border-radius: 0;

    border:
        1px solid
        var(--theme-line);

    background:
        var(--theme-surface-alt);
}

.about-team-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        center top;

    border-radius: 0;
}

.about-team-meta {
    padding-top: 15px;

    text-align: left;
}

.about-team-meta h3 {
    margin: 0;

    font-size: 1.15rem;

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -.025em;
}

.about-team-meta p {
    margin:
        6px
        0
        0;

    color:
        var(--theme-muted);

    font-size: 11px;

    font-weight: 500;
}


/* ==========================================================
   ABOUT RESPONSIVE
   ========================================================== */

@media (max-width: 1050px) {

    .about-capability-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .about-team-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 220px)
            );
    }

    .about-team-card,
    .about-team-photo {
        max-width: 220px;
    }

    .about-team-photo {
        height: 260px;
    }
}


@media (max-width: 850px) {

    .about-story-grid,
    .about-approach-grid {
        grid-template-columns:
            1fr;
    }

    .about-story-grid,
    .about-approach-grid {
        gap: 45px;
    }

    .about-story-copy {
        padding-top: 0;
    }

    .about-approach-title {
        position: static;
    }
}


@media (max-width: 650px) {

    .about-capability-grid {
        grid-template-columns:
            1fr;
    }

    .about-capability-card {
        min-height: 260px;
    }

    .about-team-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            30px
            16px;

        margin-top: 40px;
    }

    .about-team-card,
    .about-team-photo {
        width: 100%;
        max-width: 180px;
    }

    .about-team-photo {
        height: 210px;
    }
}


@media (max-width: 390px) {

    .about-team-grid {
        grid-template-columns:
            1fr;
    }

    .about-team-card,
    .about-team-photo {
        max-width: 230px;
    }

    .about-team-photo {
        height: 270px;
    }
}



/* ==========================================================
   ABOUT — FINAL BRIEF CARDS
   ========================================================== */

.about-brief {
    padding:
        clamp(70px, 8vw, 120px)
        0;
}

.about-brief-head {
    display: grid;

    grid-template-columns:
        minmax(0, .7fr)
        minmax(0, 1fr);

    gap: 50px;

    align-items: end;

    margin-bottom:
        clamp(40px, 5vw, 65px);
}

.about-brief-head h2 {
    max-width: 720px;

    margin: 0;

    font-size:
        clamp(2.5rem, 5vw, 5rem);

    font-weight: 650;

    line-height: .96;

    letter-spacing: -.055em;
}

.about-brief-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top:
        1px solid
        var(--theme-line);

    border-left:
        1px solid
        var(--theme-line);
}

.about-brief-card {
    min-height: 250px;

    display: flex;
    flex-direction: column;

    padding: 28px;

    border-right:
        1px solid
        var(--theme-line);

    border-bottom:
        1px solid
        var(--theme-line);
}

.about-brief-card > span {
    color:
        var(--theme-faint);

    font-size: 10px;

    font-weight: 600;
}

.about-brief-card h3 {
    margin:
        auto
        0
        10px;

    font-size:
        clamp(1.25rem, 1.8vw, 1.6rem);

    font-weight: 750;

    line-height: 1.1;

    letter-spacing: -.035em;
}

.about-brief-card p {
    max-width: 270px;

    margin: 0;

    color:
        var(--theme-muted);

    font-size: 11px;

    line-height: 1.6;
}


/* ==========================================================
   TEAM — ABSOLUTE FINAL RECTANGULAR PORTRAITS
   Overrides every previous circular rule
   ========================================================== */

.about-team-grid {
    display: grid !important;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 220px)
        ) !important;

    gap: 36px !important;

    justify-content: start !important;
    align-items: start !important;
}

.about-team-card {
    width: 220px !important;
    max-width: 220px !important;

    text-align: left !important;
}

.about-team-photo {
    position: relative !important;

    display: block !important;

    width: 220px !important;
    max-width: 220px !important;

    height: 250px !important;

    min-height: 0 !important;

    aspect-ratio: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 0 !important;

    clip-path: none !important;

    -webkit-clip-path: none !important;

    background:
        var(--theme-surface-alt) !important;
}

.about-team-photo img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    max-width: none !important;

    object-fit: cover !important;

    object-position:
        center top !important;

    border-radius: 0 !important;

    clip-path: none !important;

    -webkit-clip-path: none !important;
}

.about-team-photo-placeholder {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    border-radius: 0 !important;

    clip-path: none !important;

    -webkit-clip-path: none !important;
}

.about-team-photo::before,
.about-team-photo::after,
.about-team-photo img::before,
.about-team-photo img::after {
    border-radius: 0 !important;
    clip-path: none !important;
}

.about-team-meta {
    padding-top: 14px !important;

    text-align: left !important;
}

.about-team-meta h3 {
    margin: 0 !important;

    font-size: 18px !important;

    font-weight: 800 !important;

    line-height: 1.15 !important;

    letter-spacing: -.025em !important;
}

.about-team-meta p {
    margin:
        5px
        0
        0 !important;

    font-size: 11px !important;

    font-weight: 500 !important;
}


@media (max-width: 1000px) {

    .about-brief-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .about-team-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 200px)
            ) !important;
    }

    .about-team-card,
    .about-team-photo {
        width: 200px !important;
        max-width: 200px !important;
    }

    .about-team-photo {
        height: 230px !important;
    }
}


@media (max-width: 700px) {

    .about-brief-head {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .about-brief-grid {
        grid-template-columns: 1fr;
    }

    .about-brief-card {
        min-height: 190px;
    }

    .about-team-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap:
            28px
            14px !important;
    }

    .about-team-card,
    .about-team-photo {
        width: 100% !important;
        max-width: 180px !important;
    }

    .about-team-photo {
        height: 205px !important;
    }
}


@media (max-width: 390px) {

    .about-team-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

    .about-team-photo {
        height: 180px !important;
    }
}



/* ==========================================================
   SERVICES + CONTACT — STANDARD IMAGE HERO
   Uses the same visual architecture as other internal heroes.
   ========================================================== */

.services-page-hero,
.contact-page-hero {
    position: relative;
    overflow: hidden;
}

.services-page-hero .image-page-hero-media,
.contact-page-hero .image-page-hero-media {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: 0;
}

.services-page-hero .image-page-overlay,
.contact-page-hero .image-page-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(5, 9, 16, .76) 0%,
            rgba(5, 9, 16, .48) 48%,
            rgba(5, 9, 16, .24) 100%
        );
}

.services-page-hero .image-page-content,
.contact-page-hero .image-page-content {
    position: relative;
    z-index: 2;
}



/* ==========================================================
   PORTFOLIO — FINAL OUR WORK
   ========================================================== */

.portfolio-work-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}

.portfolio-work-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    background:
        var(--theme-surface-alt);

    border:
        1px solid
        var(--theme-line);
}

.portfolio-work-media {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background:
        var(--theme-surface-alt);
}

.portfolio-work-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .55s ease;
}

.portfolio-work-card:hover
.portfolio-work-media img {
    transform: scale(1.035);
}

.portfolio-work-placeholder {
    width: 100%;
    height: 100%;

    background:
        var(--theme-surface-alt);
}

.portfolio-work-copy {
    padding:
        24px
        25px
        27px;
}

.portfolio-work-copy span {
    display: block;

    margin-bottom: 8px;

    color:
        var(--theme-faint);

    font-size: 9px;

    font-weight: 650;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.portfolio-work-copy h3 {
    margin: 0;

    font-size:
        clamp(1.35rem, 2vw, 1.85rem);

    font-weight: 750;

    line-height: 1.05;

    letter-spacing: -.04em;
}


/* ==========================================================
   PORTFOLIO — TESTIMONIALS
   Immediately after Our Work
   ========================================================== */

.portfolio-testimonials {
    padding:
        clamp(90px, 10vw, 150px)
        0
        0;
}

.portfolio-section-heading {
    max-width: 850px;

    margin-bottom:
        clamp(38px, 5vw, 65px);
}

.portfolio-section-heading > span {
    display: block;

    margin-bottom: 16px;

    color:
        var(--theme-faint);

    font-size: 9px;

    font-weight: 650;

    letter-spacing: .1em;

    text-transform: uppercase;
}

.portfolio-section-heading h2 {
    max-width: 760px;

    margin: 0;

    font-size:
        clamp(2.8rem, 5.5vw, 5.8rem);

    font-weight: 600;

    line-height: .94;

    letter-spacing: -.055em;
}

.portfolio-testimonial-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border-top:
        1px solid
        var(--theme-line);

    border-left:
        1px solid
        var(--theme-line);
}

.portfolio-testimonial-card {
    min-height: 330px;

    display: flex;
    flex-direction: column;

    padding:
        clamp(24px, 3vw, 38px);

    border-right:
        1px solid
        var(--theme-line);

    border-bottom:
        1px solid
        var(--theme-line);
}

.portfolio-quote-mark {
    margin-bottom: 30px;

    font-size: 52px;

    font-weight: 500;

    line-height: .8;

    opacity: .2;
}

.portfolio-testimonial-card blockquote {
    margin:
        0
        0
        45px;

    color:
        var(--theme-text);

    font-size:
        clamp(1.05rem, 1.5vw, 1.35rem);

    font-weight: 500;

    line-height: 1.55;

    letter-spacing: -.02em;
}

.portfolio-testimonial-card footer {
    display: flex;

    gap: 13px;

    align-items: center;

    margin-top: auto;
}

.portfolio-testimonial-card footer img {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    object-fit: cover;

    border-radius: 50%;
}

.portfolio-testimonial-card footer strong,
.portfolio-testimonial-card footer span {
    display: block;
}

.portfolio-testimonial-card footer strong {
    font-size: 11px;

    font-weight: 750;
}

.portfolio-testimonial-card footer span {
    margin-top: 4px;

    color:
        var(--theme-muted);

    font-size: 9px;
}


/* ==========================================================
   CLIENTS — TWO ROW CONTINUOUS MARQUEE
   Right -> Left
   ========================================================== */

.portfolio-client-marquee {
    padding:
        clamp(90px, 10vw, 150px)
        0
        clamp(80px, 8vw, 120px);

    overflow: hidden;

    background:
        var(--theme-surface);
}

.portfolio-client-marquee
.portfolio-section-heading {
    margin-bottom: 50px;
}

.client-marquee-row {
    width: 100%;

    overflow: hidden;

    border-top:
        1px solid
        var(--theme-line);

    border-bottom:
        1px solid
        var(--theme-line);
}

.client-marquee-row-two {
    border-top: 0;
}

.client-marquee-track {
    display: flex;

    width: max-content;

    animation:
        universalClientMarquee
        32s
        linear
        infinite;

    will-change: transform;
}

.client-marquee-track-two {
    animation-duration: 38s;
}

.client-marquee-item {
    width:
        clamp(180px, 16vw, 290px);

    height: 135px;

    flex: 0 0 auto;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 28px 38px;

    border-right:
        1px solid
        var(--theme-line);
}

.client-marquee-item img {
    display: block;

    max-width: 155px;
    max-height: 58px;

    width: auto;
    height: auto;

    object-fit: contain;

    filter: grayscale(1);

    opacity: .72;

    transition:
        filter .25s ease,
        opacity .25s ease;
}

.client-marquee-item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

.client-marquee-item span {
    color:
        var(--theme-muted);

    font-size: 13px;

    font-weight: 700;

    text-align: center;
}

@keyframes universalClientMarquee {

    from {
        transform:
            translate3d(0, 0, 0);
    }

    to {
        transform:
            translate3d(-50%, 0, 0);
    }
}


/* ==========================================================
   PORTFOLIO RESPONSIVE
   ========================================================== */

@media (max-width: 1000px) {

    .portfolio-work-grid,
    .portfolio-testimonial-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 650px) {

    .portfolio-work-grid,
    .portfolio-testimonial-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-work-media {
        aspect-ratio: 16 / 10;
    }

    .portfolio-testimonial-card {
        min-height: 270px;
    }

    .client-marquee-item {
        width: 180px;
        height: 105px;

        padding: 20px 28px;
    }

    .client-marquee-item img {
        max-width: 125px;
        max-height: 48px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .client-marquee-track,
    .client-marquee-track-two {
        animation-play-state: paused;
    }
}



/* ==========================================================
   HOME PROOF SECTIONS — FINAL MARQUEE PRESENTATION
   Testimonials: 2 rows RTL
   Clients:      2 rows RTL
   ========================================================== */


/* ----------------------------------------------------------
   SHARED CONTAINED PRESENTATION
   ---------------------------------------------------------- */

.home-proof-section,
.home-client-marquee {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        clamp(78px, 8vw, 125px)
        0;

    background:
        var(--theme-surface);
}

.home-proof-heading,
.home-client-heading {
    width:
        min(
            calc(100% - 40px),
            1180px
        );

    margin:
        0
        auto
        clamp(38px, 5vw, 58px);
}

.home-proof-heading h2,
.home-client-heading h2 {
    max-width: 760px;

    margin:
        14px
        0
        0;

    font-size:
        clamp(2.5rem, 4.8vw, 5rem);

    font-weight: 600;

    line-height: .96;

    letter-spacing: -.055em;
}


/* ==========================================================
   TESTIMONIALS — TWO ROW RTL MARQUEE
   Existing .home-proof-grid becomes the viewport.
   ========================================================== */

.home-proof-grid {
    width:
        min(
            calc(100% - 40px),
            1180px
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    overflow: hidden;

    padding:
        16px;

    border:
        1px solid
        var(--theme-line);

    background:
        var(--theme-surface-alt);
}


/*
 * We cannot create a genuine continuous 2-row marquee from
 * CSS alone when the cards themselves are direct grid
 * children. Convert the grid into two moving tracks using
 * odd/even card groups visually.
 *
 * Cards animate right -> left while remaining in two rows.
 */

.home-proof-card {
    position: relative;

    width: 100%;

    min-height: 260px;

    display: flex;

    flex-direction: column;

    padding:
        clamp(24px, 3vw, 36px);

    overflow: hidden;

    border:
        1px solid
        var(--theme-line);

    background:
        var(--theme-surface);

    animation:
        universalTestimonialRTL
        24s
        linear
        infinite;

    will-change: transform;
}


/*
 * Second row receives a slightly different duration,
 * maintaining the same right -> left direction.
 */

.home-proof-card:nth-child(even) {
    animation-duration: 30s;
}


.home-proof-grid:hover
.home-proof-card {
    animation-play-state: paused;
}


.home-proof-quote {
    margin-bottom: 22px;

    font-size: 48px;

    font-weight: 500;

    line-height: .8;

    opacity: .18;
}


.home-proof-card blockquote {
    margin:
        0
        0
        32px;

    color:
        var(--theme-text);

    font-size:
        clamp(1rem, 1.35vw, 1.2rem);

    font-weight: 500;

    line-height: 1.55;

    letter-spacing: -.02em;
}


.home-proof-card footer {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: auto;
}


.home-proof-card footer img {
    width: 46px;
    height: 46px;

    flex:
        0
        0
        46px;

    border-radius: 50%;

    object-fit: cover;
}


.home-proof-card footer strong {
    display: block;

    font-size: 11px;

    font-weight: 750;
}


.home-proof-card footer span {
    display: block;

    margin-top: 4px;

    color:
        var(--theme-muted);

    font-size: 9px;
}


@keyframes universalTestimonialRTL {

    0% {
        transform:
            translate3d(
                18px,
                0,
                0
            );
    }

    100% {
        transform:
            translate3d(
                -18px,
                0,
                0
            );
    }
}


/* ==========================================================
   CLIENTS & PARTNERS — CONTAINED TWO ROW MARQUEE
   ========================================================== */

.home-client-marquee {
    padding-top:
        clamp(70px, 7vw, 110px);

    border-top:
        1px solid
        var(--theme-line);
}


/*
 * Constrain both scrolling rows rather than letting them
 * occupy the full browser width.
 */

.home-client-row {
    width:
        min(
            calc(100% - 40px),
            1180px
        );

    margin:
        0
        auto;

    overflow: hidden;

    border:
        1px solid
        var(--theme-line);

    background:
        var(--theme-surface-alt);
}


.home-client-row-two {
    border-top: 0;
}


.home-client-track {
    display: flex;

    width: max-content;

    animation:
        universalClientsRTL
        28s
        linear
        infinite;

    will-change: transform;
}


.home-client-track-two {
    animation-duration: 34s;
}


.home-client-row:hover
.home-client-track {
    animation-play-state: paused;
}


.home-client-item {
    width:
        clamp(
            170px,
            15vw,
            245px
        );

    height: 112px;

    flex:
        0
        0 auto;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        22px
        30px;

    border-right:
        1px solid
        var(--theme-line);

    background:
        var(--theme-surface);
}


.home-client-item img {
    display: block;

    width: auto;
    height: auto;

    max-width: 145px;
    max-height: 52px;

    object-fit: contain;

    filter: grayscale(1);

    opacity: .72;

    transition:
        filter .25s ease,
        opacity .25s ease,
        transform .25s ease;
}


.home-client-item:hover img {
    filter: grayscale(0);

    opacity: 1;

    transform: scale(1.04);
}


.home-client-item strong {
    color:
        var(--theme-muted);

    font-size: 12px;

    font-weight: 700;

    text-align: center;
}


@keyframes universalClientsRTL {

    from {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    to {
        transform:
            translate3d(
                -50%,
                0,
                0
            );
    }
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 760px) {

    .home-proof-heading,
    .home-client-heading,
    .home-proof-grid,
    .home-client-row {
        width:
            min(
                calc(100% - 28px),
                1180px
            );
    }

    .home-proof-grid {
        grid-template-columns: 1fr;

        gap: 12px;

        padding: 12px;
    }

    .home-proof-card {
        min-height: 230px;
    }

    .home-client-item {
        width: 165px;
        height: 96px;

        padding:
            18px
            24px;
    }

    .home-client-item img {
        max-width: 115px;
        max-height: 42px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .home-proof-card,
    .home-client-track {
        animation-play-state: paused !important;
    }
}



/* ==========================================================
   UNIVERSAL SOLUTIONS
   TESTIMONIALS — TRUE TWO ROW CONTINUOUS MARQUEE
   ========================================================== */

.home-proof-section {
    position: relative;
    overflow: hidden;
}


/*
 * Old grid is no longer used by the new markup.
 */

.testimonial-marquee-shell {
    width:
        min(
            calc(100% - 40px),
            1180px
        );

    margin:
        0
        auto;

    overflow: hidden;

    padding:
        14px;

    border:
        1px solid
        var(--theme-line);

    background:
        var(--theme-surface-alt);
}


.testimonial-marquee-row {
    position: relative;

    width: 100%;

    overflow: hidden;
}


.testimonial-marquee-row + .testimonial-marquee-row {
    margin-top: 14px;
}


.testimonial-marquee-track {
    display: flex;

    align-items: stretch;

    gap: 14px;

    width: max-content;

    animation:
        universalTestimonialsMarquee
        36s
        linear
        infinite;

    will-change: transform;
}


/*
 * Same direction, slightly different speed.
 */

.testimonial-marquee-track-two {
    animation-duration: 43s;
}


.testimonial-marquee-row:hover
.testimonial-marquee-track {
    animation-play-state: paused;
}


/* ----------------------------------------------------------
   TESTIMONIAL CARD
   ---------------------------------------------------------- */

.testimonial-marquee-card {
    position: relative;

    width:
        clamp(
            300px,
            34vw,
            440px
        );

    min-height: 250px;

    flex:
        0
        0 auto;

    display: flex;

    flex-direction: column;

    padding:
        clamp(
            24px,
            3vw,
            34px
        );

    border:
        1px solid
        var(--theme-line);

    background:
        var(--theme-surface);
}


.testimonial-quote-mark {
    margin-bottom: 20px;

    font-size: 48px;

    font-weight: 600;

    line-height: .65;

    opacity: .16;
}


.testimonial-marquee-card blockquote {
    margin:
        0
        0
        30px;

    color:
        var(--theme-text);

    font-size:
        clamp(
            1rem,
            1.25vw,
            1.15rem
        );

    font-weight: 500;

    line-height: 1.55;

    letter-spacing: -.02em;
}


/* ----------------------------------------------------------
   OPTIONAL TESTIMONIAL IMAGE
   ---------------------------------------------------------- */

.testimonial-marquee-card footer {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: auto;
}


.testimonial-marquee-card footer img {
    width: 48px;
    height: 48px;

    flex:
        0
        0 48px;

    display: block;

    border-radius: 50%;

    object-fit: cover;
}


/*
 * No image = no blank circle, no reserved image column.
 */

.testimonial-marquee-card
.no-testimonial-image {
    gap: 0;
}


.testimonial-person {
    min-width: 0;
}


.testimonial-person strong {
    display: block;

    color:
        var(--theme-text);

    font-size: 12px;

    font-weight: 750;

    line-height: 1.3;
}


.testimonial-person span {
    display: block;

    margin-top: 5px;

    color:
        var(--theme-muted);

    font-size: 10px;

    line-height: 1.4;
}


/* ----------------------------------------------------------
   CONTINUOUS RIGHT -> LEFT
   ---------------------------------------------------------- */

@keyframes universalTestimonialsMarquee {

    from {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    to {
        transform:
            translate3d(
                calc(-50% - 7px),
                0,
                0
            );
    }
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 760px) {

    .testimonial-marquee-shell {
        width:
            calc(100% - 28px);

        padding: 10px;
    }

    .testimonial-marquee-row
    + .testimonial-marquee-row {
        margin-top: 10px;
    }

    .testimonial-marquee-track {
        gap: 10px;

        animation-duration: 30s;
    }

    .testimonial-marquee-track-two {
        animation-duration: 36s;
    }

    .testimonial-marquee-card {
        width:
            min(
                82vw,
                340px
            );

        min-height: 225px;

        padding: 24px;
    }
}


/* ----------------------------------------------------------
   ACCESSIBILITY
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .testimonial-marquee-track {
        animation-play-state:
            paused !important;
    }
}



/* ==========================================================
   TESTIMONIAL MARQUEE — UNIQUE RECORD CORRECTION
   No artificial testimonial duplicates.
   ========================================================== */

.testimonial-marquee-shell {
    position: relative;
}


/*
 * Each row remains horizontally arranged.
 */

.testimonial-marquee-track {
    display: flex !important;

    align-items: stretch;

    gap: 14px;

    width: max-content;

    min-width: 100%;
}


/*
 * Cards remain compact.
 * Do not stretch a single testimonial across the container.
 */

.testimonial-marquee-card {
    width: clamp(300px, 32vw, 410px) !important;

    min-width: clamp(300px, 32vw, 410px);

    max-width: 410px;

    flex: 0 0 auto !important;
}


/*
 * Portrait is genuinely optional.
 */

.testimonial-marquee-card
.no-testimonial-image {
    display: flex;

    align-items: center;

    gap: 0;
}


/*
 * If a row contains only one card there is not enough
 * content for an infinite loop. Keep the real card visible
 * instead of manufacturing a duplicate.
 */

.testimonial-marquee-track:has(
    .testimonial-marquee-card:only-child
) {
    animation: none !important;

    transform: none !important;
}


/*
 * Rows containing multiple real testimonials retain
 * right-to-left movement.
 */

.testimonial-marquee-track:has(
    .testimonial-marquee-card
    + .testimonial-marquee-card
) {
    animation:
        universalTestimonialsUniqueRTL
        32s
        linear
        infinite;
}


.testimonial-marquee-track-two:has(
    .testimonial-marquee-card
    + .testimonial-marquee-card
) {
    animation-duration: 38s;
}


@keyframes universalTestimonialsUniqueRTL {

    0% {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    50% {
        transform:
            translate3d(
                -12%,
                0,
                0
            );
    }

    100% {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }
}


@media (max-width: 760px) {

    .testimonial-marquee-card {
        width: min(82vw, 330px) !important;

        min-width: min(82vw, 330px);

        max-width: 330px;
    }
}



/* ==========================================================
   HOME — FINAL SINGLE ROW MARQUEES
   Testimonials + Clients
   ========================================================== */


/* ----------------------------------------------------------
   TESTIMONIALS
   ---------------------------------------------------------- */

.testimonial-marquee-shell {
    width: min(calc(100% - 40px), 1180px) !important;

    margin: 0 auto !important;

    padding: 14px !important;

    overflow: hidden !important;

    border: 1px solid var(--theme-line);

    background: var(--theme-surface-alt);
}


.testimonial-marquee-row {
    width: 100% !important;

    overflow: hidden !important;
}


.testimonial-marquee-track {
    display: flex !important;

    flex-wrap: nowrap !important;

    align-items: stretch !important;

    gap: 14px !important;

    width: max-content !important;

    min-width: 0 !important;

    transform: none;
}


.testimonial-marquee-track.is-animated {
    animation:
        universalTestimonialsSingleRow
        26s
        linear
        infinite !important;
}


.testimonial-marquee-track.is-static {
    animation: none !important;
}


.testimonial-marquee-row:hover
.testimonial-marquee-track {
    animation-play-state: paused !important;
}


.testimonial-marquee-card {
    width: clamp(300px, 32vw, 400px) !important;

    min-width: clamp(300px, 32vw, 400px) !important;

    max-width: 400px !important;

    min-height: 235px !important;

    flex: 0 0 auto !important;

    display: flex !important;

    flex-direction: column !important;

    padding: 28px !important;

    border: 1px solid var(--theme-line);

    background: var(--theme-surface);
}


.testimonial-marquee-card blockquote {
    margin:
        0
        0
        28px !important;

    font-size: 1rem;

    line-height: 1.55;
}


.testimonial-marquee-card footer {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: auto;
}


.testimonial-marquee-card footer.no-testimonial-image {
    gap: 0 !important;
}


.testimonial-marquee-card footer img {
    width: 46px !important;
    height: 46px !important;

    flex: 0 0 46px !important;

    object-fit: cover;

    border-radius: 50%;
}


@keyframes universalTestimonialsSingleRow {

    0% {
        transform:
            translate3d(
                100vw,
                0,
                0
            );
    }

    100% {
        transform:
            translate3d(
                -100%,
                0,
                0
            );
    }
}


/* ----------------------------------------------------------
   CLIENTS & PARTNERS
   ---------------------------------------------------------- */

.home-client-row {
    width: min(calc(100% - 40px), 1180px) !important;

    margin: 0 auto !important;

    overflow: hidden !important;

    border: 1px solid var(--theme-line);

    background: var(--theme-surface-alt);
}


/*
 * Hide any obsolete second row if older markup somehow
 * remains cached/generated.
 */

.home-client-row-two {
    display: none !important;
}


.home-client-track {
    display: flex !important;

    flex-wrap: nowrap !important;

    align-items: center !important;

    width: max-content !important;

    animation:
        universalClientsSingleRow
        30s
        linear
        infinite !important;

    will-change: transform;
}


.home-client-row:hover
.home-client-track {
    animation-play-state: paused !important;
}


.home-client-item {
    width: clamp(170px, 15vw, 230px) !important;

    height: 110px !important;

    flex: 0 0 auto !important;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 22px 28px;

    border-right: 1px solid var(--theme-line);

    background: var(--theme-surface);
}


.home-client-item img {
    display: block;

    width: auto !important;
    height: auto !important;

    max-width: 145px !important;
    max-height: 52px !important;

    object-fit: contain;
}


@keyframes universalClientsSingleRow {

    from {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    to {
        transform:
            translate3d(
                -50%,
                0,
                0
            );
    }
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 760px) {

    .testimonial-marquee-shell,
    .home-client-row {
        width:
            calc(100% - 28px) !important;
    }

    .testimonial-marquee-shell {
        padding: 10px !important;
    }

    .testimonial-marquee-track {
        gap: 10px !important;
    }

    .testimonial-marquee-card {
        width:
            min(
                82vw,
                330px
            ) !important;

        min-width:
            min(
                82vw,
                330px
            ) !important;

        max-width: 330px !important;

        min-height: 215px !important;

        padding: 23px !important;
    }

    .home-client-item {
        width: 160px !important;
        height: 94px !important;

        padding: 18px 22px;
    }

    .home-client-item img {
        max-width: 115px !important;
        max-height: 42px !important;
    }
}


@media (prefers-reduced-motion: reduce) {

    .testimonial-marquee-track,
    .home-client-track {
        animation-play-state:
            paused !important;
    }
}



/* ==========================================================
   TESTIMONIAL STAR RATINGS
   ========================================================== */

.testimonial-stars {
    display: flex;

    align-items: center;

    gap: 3px;

    margin:
        0
        0
        18px;

    line-height: 1;
}


.testimonial-stars span {
    display: inline-block;

    font-size: 17px;

    line-height: 1;
}


.testimonial-stars .star-filled {
    color: #f5b301;
}


.testimonial-stars .star-empty {
    color: var(--theme-line);
}


.testimonial-stars
+ .testimonial-quote-mark {
    margin-top: 0;
}



/* ==========================================================
   UNIVERSAL SOLUTIONS — INSIGHTS
   ========================================================== */

.insights-grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: 22px;
}

.insight-card {
    overflow: hidden;
    border: 1px solid var(--theme-line);
    background: var(--theme-surface);
}

.insight-card-media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--theme-surface-alt);
}

.insight-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.insight-card:hover
.insight-card-media img {
    transform: scale(1.035);
}

.insight-card-body {
    padding: 26px;
}

.insight-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .68;
}

.insight-card h2 {
    margin: 0 0 14px;
    font-size: clamp(
        1.2rem,
        2vw,
        1.55rem
    );
    line-height: 1.18;
}

.insight-card h2 a {
    color: inherit;
    text-decoration: none;
}

.insight-card p {
    margin: 0 0 20px;
    line-height: 1.65;
}

.insight-article-header {
    padding:
        clamp(90px, 11vw, 150px)
        0
        clamp(45px, 7vw, 90px);
}

.insight-article-heading {
    width: min(850px, 100%);
}

.insight-article-heading h1 {
    margin: 16px 0 22px;
    font-size: clamp(
        2.3rem,
        6vw,
        5.2rem
    );
    line-height: .98;
    letter-spacing: -.045em;
}

.insight-category {
    display: inline-block;
    margin-left: 12px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    opacity: .65;
}

.insight-lead {
    max-width: 760px;
    margin: 0 0 20px;
    font-size: clamp(
        1.05rem,
        2vw,
        1.35rem
    );
    line-height: 1.6;
}

.insight-featured-image {
    width: 100%;
    margin: 0;
    aspect-ratio: 16 / 8;
    overflow: hidden;
    background: var(--theme-surface-alt);
}

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

.insight-content {
    width: min(780px, 100%);
    margin: 0 auto;
}

.insight-content > p {
    margin: 0 0 1.5em;
    font-size: 1.04rem;
    line-height: 1.82;
}

.insight-content > h2 {
    margin:
        2.2em
        0
        .75em;
    font-size: clamp(
        1.65rem,
        3vw,
        2.35rem
    );
    line-height: 1.15;
}

.insight-content > h3 {
    margin:
        1.8em
        0
        .7em;
    font-size: clamp(
        1.3rem,
        2vw,
        1.7rem
    );
}

.insight-service-cta {
    margin-top: 70px;
    padding: clamp(
        28px,
        5vw,
        52px
    );
    border: 1px solid var(--theme-line);
    background: var(--theme-surface-alt);
}

.insight-service-cta h2 {
    margin: 12px 0 14px;
}

@media (max-width: 900px) {

    .insights-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 620px) {

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

    .insight-card-body {
        padding: 22px;
    }

    .insight-featured-image {
        aspect-ratio: 4 / 3;
    }
}


/* ==========================================================
   UNIVERSAL SOLUTIONS — SERVICE INSIGHT INTERNAL LINK
   ========================================================== */

.seo-insight-section {
    padding: clamp(64px, 8vw, 110px) 0;
}

.seo-insight-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
    padding: clamp(32px, 5vw, 64px);
    border: 1px solid var(--theme-line);
    border-radius: 24px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(247, 249, 252, 0.98)
        );
}

.seo-insight-copy {
    max-width: 780px;
}

.seo-insight-copy h2 {
    margin:
        14px
        0
        16px;
    max-width: 760px;
}

.seo-insight-copy p {
    margin: 0;
    max-width: 720px;
    line-height: 1.8;
    color: var(--theme-muted);
}

.seo-insight-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.seo-insight-action .button-outline {
    white-space: nowrap;
}

@media (max-width: 820px) {

    .seo-insight-card {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .seo-insight-action {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {

    .seo-insight-section {
        padding: 52px 0;
    }

    .seo-insight-card {
        padding: 26px 22px;
        border-radius: 18px;
    }

    .seo-insight-action,
    .seo-insight-action .button-outline {
        width: 100%;
    }

    .seo-insight-action .button-outline {
        justify-content: center;
        text-align: center;
    }
}


/* ==========================================================
   UNIVERSAL SOLUTIONS — AUTHORITATIVE MOBILE NAV
   Android + iOS
   ========================================================== */

@media (max-width: 1100px) {

    /*
     * Header remains the topmost interface layer.
     */
    .site-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10000 !important;
        isolation: isolate;
    }


    /*
     * Mobile navigation occupies the viewport beneath
     * the header and is ALWAYS opaque.
     */
    .mobile-menu {
        position: fixed !important;

        top: var(--mobile-menu-top, 80px) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100vw !important;
        max-width: none !important;

        height:
            calc(
                100dvh
                - var(--mobile-menu-top, 80px)
            ) !important;

        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;
        background-color: #ffffff !important;

        opacity: 1 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

        z-index: 9999 !important;

        /*
         * Closed state.
         * Keep the existing slide animation, but explicitly
         * control every state here.
         */
        visibility: hidden !important;
        pointer-events: none !important;

        transform: translate3d(100%, 0, 0) !important;
        -webkit-transform:
            translate3d(100%, 0, 0) !important;

        transition:
            transform .28s ease,
            visibility 0s linear .28s !important;
    }


    /*
     * Open state.
     */
    .mobile-menu.is-open {
        visibility: visible !important;
        pointer-events: auto !important;

        transform: translate3d(0, 0, 0) !important;
        -webkit-transform:
            translate3d(0, 0, 0) !important;

        opacity: 1 !important;

        background: #ffffff !important;
        background-color: #ffffff !important;

        transition:
            transform .28s ease,
            visibility 0s linear 0s !important;
    }


    /*
     * The inner navigation must itself be opaque.
     */
    .mobile-menu-inner {
        position: relative !important;
        z-index: 1 !important;

        width: 100% !important;
        max-width: none !important;

        min-height: 100% !important;

        margin: 0 !important;

        padding-top: 8px !important;
        padding-bottom:
            calc(
                32px
                + env(safe-area-inset-bottom)
            ) !important;

        background: #ffffff !important;
        background-color: #ffffff !important;

        opacity: 1 !important;
    }


    /*
     * Navigation links get their own opaque surface too.
     */
    .mobile-menu-inner > a {
        position: relative !important;
        z-index: 2 !important;

        background-color: #ffffff !important;
    }


    .mobile-theme-row {
        position: relative !important;
        z-index: 2 !important;

        background-color: #ffffff !important;
    }


    .mobile-project-link {
        position: relative !important;
        z-index: 2 !important;
    }


    /*
     * No underlying page scrolling while drawer is open.
     */
    body.menu-open {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }


    /*
     * DARK MODE
     */
    html[data-theme="dark"] .mobile-menu,
    html[data-theme="dark"] .mobile-menu.is-open,
    html[data-theme="dark"] .mobile-menu-inner,
    html[data-theme="dark"]
    .mobile-menu-inner > a,
    html[data-theme="dark"]
    .mobile-theme-row {
        background: #07111f !important;
        background-color: #07111f !important;
    }

}


/*
 * Older browser fallback where dynamic viewport units
 * are unavailable.
 */
@supports not (height: 100dvh) {

    @media (max-width: 1100px) {

        .mobile-menu {
            height:
                calc(
                    100vh
                    - var(--mobile-menu-top, 80px)
                ) !important;
        }

    }

}



/* ==========================================================
   UNIVERSAL SOLUTIONS — CENTERED MOBILE NAV CONTENT
   ========================================================== */

@media (max-width: 1100px) {

    /*
     * Main mobile navigation container
     */
    .mobile-menu-inner {
        text-align: center !important;
    }


    /*
     * Primary navigation links
     */
    .mobile-menu-inner > a:not(.mobile-project-link) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        text-align: center !important;

        padding-left: 24px !important;
        padding-right: 24px !important;
    }


    /*
     * Appearance controls
     */
    .mobile-theme-row {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex-wrap: wrap !important;
        gap: 18px !important;

        width: 100% !important;

        text-align: center !important;

        padding-left: 24px !important;
        padding-right: 24px !important;
    }


    .mobile-theme-toggle {
        justify-content: center !important;
    }


    /*
     * Start a Project CTA
     */
    .mobile-project-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width:
            calc(100% - 48px) !important;

        max-width: 520px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }

}




/* ==========================================================
   UNIVERSAL SOLUTIONS — LIGHT MOBILE HEADER CONTROLS
   ========================================================== */

@media (max-width: 1100px) {

    /*
     * Light-mode hamburger/menu button.
     */
    html:not([data-theme="dark"]) .menu-toggle,
    html[data-theme="light"] .menu-toggle {
        color: #07111f !important;
        border-color: rgba(7, 17, 31, .22) !important;
    }

    html:not([data-theme="dark"]) .menu-toggle span,
    html[data-theme="light"] .menu-toggle span {
        background: #07111f !important;
        background-color: #07111f !important;
        border-color: #07111f !important;
    }


    /*
     * When the hamburger becomes the X/close icon,
     * keep both strokes dark and visible.
     */
    html:not([data-theme="dark"])
    .menu-toggle[aria-expanded="true"] span,
    html[data-theme="light"]
    .menu-toggle[aria-expanded="true"] span {
        background: #07111f !important;
        background-color: #07111f !important;
    }


    /*
     * Light-mode appearance/theme button.
     */
    html:not([data-theme="dark"]) .theme-toggle,
    html[data-theme="light"] .theme-toggle {
        color: #07111f !important;
        border-color: rgba(7, 17, 31, .30) !important;
        background: transparent !important;
    }


    /*
     * SVG icons inherit the dark foreground.
     */
    html:not([data-theme="dark"]) .theme-toggle svg,
    html[data-theme="light"] .theme-toggle svg {
        color: #07111f !important;
        stroke: currentColor !important;
    }

    html:not([data-theme="dark"])
    .theme-toggle svg *,
    html[data-theme="light"]
    .theme-toggle svg * {
        stroke: currentColor !important;
    }


    /*
     * Keep controls above every header/menu layer.
     */
    .header-actions,
    .menu-toggle,
    .theme-toggle {
        position: relative;
        z-index: 10002 !important;
    }

}


/*
 * Explicit dark-mode protection.
 */
@media (max-width: 1100px) {

    html[data-theme="dark"] .menu-toggle {
        color: #ffffff !important;
        border-color: rgba(255,255,255,.28) !important;
    }

    html[data-theme="dark"] .menu-toggle span {
        background: #ffffff !important;
        background-color: #ffffff !important;
    }

    html[data-theme="dark"] .theme-toggle {
        color: #ffffff !important;
        border-color: rgba(255,255,255,.32) !important;
    }

    html[data-theme="dark"] .theme-toggle svg,
    html[data-theme="dark"] .theme-toggle svg * {
        color: #ffffff !important;
        stroke: currentColor !important;
    }

}



/* ==========================================================
   UNIVERSAL SOLUTIONS — GLOBAL STICKY NAVBAR
   Desktop + Laptop + Tablet + Android + iPhone
   ========================================================== */

.site-header {
    position: sticky !important;
    position: -webkit-sticky !important;

    top: 0 !important;
    left: 0;
    right: 0;

    width: 100% !important;

    z-index: 10000 !important;

    isolation: isolate;

    /*
     * Prevent content beneath the sticky header from
     * visually bleeding through after scrolling.
     */
    background-color: #ffffff;
}


/*
 * Light theme — always solid while sticky.
 */
html[data-theme="light"] .site-header,
html:not([data-theme="dark"]) .site-header {
    background-color: #ffffff !important;
}


/*
 * Dark theme.
 */
html[data-theme="dark"] .site-header {
    background-color: #07111f !important;
}


/*
 * Preserve the existing scrolled state while guaranteeing
 * an opaque sticky surface.
 */
html[data-theme="light"] .site-header.is-scrolled,
html:not([data-theme="dark"]) .site-header.is-scrolled {
    background-color: #ffffff !important;
}

html[data-theme="dark"] .site-header.is-scrolled {
    background-color: #07111f !important;
}


/*
 * Header contents remain above the mobile drawer and
 * all page/hero content.
 */
.site-header .header-inner,
.site-header .header-actions,
.site-header .site-brand,
.site-header .desktop-nav {
    position: relative;
    z-index: 10001;
}


/*
 * Mobile drawer remains directly beneath the sticky header.
 */
@media (max-width: 1100px) {

    .site-header {
        position: sticky !important;
        position: -webkit-sticky !important;
        top: 0 !important;
    }

    .mobile-menu {
        z-index: 9999 !important;
    }

}


/* ==========================================================
   UNIVERSAL SOLUTIONS — GUARANTEED MOBILE FIXED NAVBAR
   ========================================================== */

@media (max-width: 1100px) {

    /*
     * Fixed is intentional here.
     * Unlike sticky, it cannot be cancelled by an ancestor
     * overflow/transform/contain rule.
     */
    .site-header {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;

        width: 100% !important;

        margin: 0 !important;

        z-index: 100000 !important;

        transform: none !important;
        -webkit-transform: none !important;

        background: #ffffff !important;
        background-color: #ffffff !important;
    }


    html[data-theme="dark"] .site-header {
        background: #07111f !important;
        background-color: #07111f !important;
    }


    /*
     * Because fixed elements leave normal document flow,
     * JS supplies the exact header height here.
     */
    body {
        padding-top:
            var(--site-header-height, 80px) !important;
    }


    /*
     * Home hero previously began directly beneath the
     * header. The body padding now handles that spacing.
     */
    .mobile-menu {
        position: fixed !important;

        top:
            var(--site-header-height, 80px) !important;

        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        height:
            calc(
                100dvh
                - var(--site-header-height, 80px)
            ) !important;

        z-index: 99999 !important;
    }


    /*
     * Prevent the open drawer from moving the document.
     */
    body.menu-open {
        overflow: hidden !important;
    }

}


@supports not (height: 100dvh) {

    @media (max-width: 1100px) {

        .mobile-menu {
            height:
                calc(
                    100vh
                    - var(--site-header-height, 80px)
                ) !important;
        }

    }

}