/* LCG SKIP LINK */
.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2000;
    padding: 0.75rem 1rem;
    color: var(--black);
    background: var(--white);
    border: 2px solid var(--blue);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 160ms ease;
}

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

:root {
    --black: #000000;
    --soft-black: #0b0c0e;
    --charcoal: #17191d;
    --white: #ffffff;
    --warm-white: #f6f7f5;
    --light-gray: #d9e1ea;
    --middle-gray: #9ca7b3;
    --rule-gray: #30343b;
    --blue: #075fea;
    --deep-blue: #0638a8;
    --cyan: #09dff2;
    --content-width: 1240px;
    --page-padding: clamp(1.25rem, 4vw, 4rem);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--black);
    background: var(--white);
    font-family:
        Inter, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2 {
    font-family:
        Georgia, "Times New Roman", serif;
    font-weight: 500;
    letter-spacing: -0.04em;
}

h1 {
    max-width: 970px;
    margin-bottom: 2rem;
    font-size: clamp(3.2rem, 8vw, 7.75rem);
    line-height: 0.95;
}

h2 {
    max-width: 900px;
    margin-bottom: 3rem;
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 1.02;
}

h3 {
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1.2;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    color: var(--white);
    background: rgba(0, 0, 0, 0.95);
    border-bottom: 0;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.site-header::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    pointer-events: none;
    background:
        linear-gradient(
            to right,
            #5f6670 0%,
            #aeb4bc 18%,
            #f2f4f7 38%,
            #ffffff 50%,
            #d8dde3 62%,
            #8a929c 82%,
            #565d66 100%
        );
    box-shadow:
        0 0 5px rgba(255, 255, 255, 0.22),
        0 1px 0 rgba(0, 0, 0, 0.7);
}

.site-header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -30px;
    left: 0;
    height: 30px;
    pointer-events: none;
    opacity: 0.7;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.42) 0%,
        rgba(0, 0, 0, 0.2) 45%,
        rgba(0, 0, 0, 0) 100%
    );
    transition: opacity 180ms ease;
}

.site-header.is-scrolled {
    background: rgba(0, 0, 0, 0.96);
    border-bottom-color: rgba(255, 255, 255, 0.07);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.24),
        0 2px 8px rgba(0, 0, 0, 0.18);
}

.site-header.is-scrolled::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header::after {
        transition: none;
    }
}


.site-header__inner {
    width: min(
        calc(100% - (2 * var(--page-padding))),
        var(--content-width)
    );
    min-height: 96px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.site-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.site-brand img {
    display: block;
    width: min(330px, 42vw);
    max-height: 68px;
    object-fit: contain;
    object-position: left center;
}

.primary-navigation {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.primary-navigation a {
    color: #b9c0c8;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 160ms ease;
}

.primary-navigation a:hover {
    color: var(--cyan);
}

.primary-navigation .navigation-cta {
    color: var(--white);
}

.primary-navigation .navigation-cta:hover {
    color: var(--cyan);
}

.menu-toggle {
    display: none;
    color: var(--white);
    background: none;
    border: 0;
    font: inherit;
    font-weight: 700;
    text-transform: uppercase;
}

.hero {
    position: relative;
    min-height: calc(100vh - 96px);
    padding:
        clamp(5.5rem, 10vw, 9.5rem)
        var(--page-padding)
        clamp(5rem, 8vw, 8rem);
    overflow: hidden;
    color: var(--white);
    background:
        radial-gradient(
            circle at 72% 18%,
            rgba(24, 92, 179, 0.24),
            transparent 34%
        ),
        radial-gradient(
            circle at 18% 78%,
            rgba(61, 103, 166, 0.11),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.018) 0%,
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #07090d 0%,
            #0b0e14 58%,
            #080a0e 100%
        );
}

.hero h1 {
    max-width: 11ch;
    margin-bottom: 2.25rem;
    font-size: clamp(3.6rem, 7.2vw, 7rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.hero::before {
    content: "";
    position: absolute;
    top: 6%;
    right: -8%;
    width: min(44vw, 680px);
    aspect-ratio: 1;
    pointer-events: none;
    opacity: 0.55;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0) 36%
        );
    border: 1px solid rgba(255, 255, 255, 0.035);
    transform: rotate(12deg);
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.16;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        );
    background-size: 72px 72px;
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.9),
        transparent 82%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.9),
        transparent 82%
    );
}

.hero .section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
}

.hero .section-label::before {
    content: "";
    width: 44px;
    height: 2px;
    background: linear-gradient(
        to right,
        #1d66c2,
        #4b8fe3
    );
    box-shadow: 0 0 10px rgba(45, 112, 198, 0.35);
}


.hero__grid {
    position: relative;
    z-index: 1;
    width: min(100%, var(--content-width));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: clamp(3rem, 8vw, 8rem);
}

.section-label {
    margin-bottom: 1.5rem;
    color: var(--cyan);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.hero__summary {
    max-width: 680px;
    margin-bottom: 2.75rem;
    color: var(--light-gray);
    font-size: clamp(1.08rem, 1.55vw, 1.28rem);
    line-height: 1.72;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 1.75rem;
}

.action-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.4rem;
    color: var(--white);
    border-bottom: 1px solid var(--middle-gray);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
}

.action-link--primary {
    border-color: var(--cyan);
}

.hero__focus {
    padding-left: 2rem;
    border-left: 1px solid var(--rule-gray);
}

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

.hero__focus li {
    padding: 0.75rem 0;
    color: var(--light-gray);
    border-bottom: 1px solid var(--rule-gray);
}

.content-width,
.section-block {
    width: min(100%, var(--content-width));
    margin-inline: auto;
}

.positioning {
    padding:
        clamp(5rem, 10vw, 10rem)
        var(--page-padding);
    background: var(--warm-white);
    border-radius: 8px;
}

.positioning__statement {
    max-width: 1100px;
    margin-bottom: 3rem;
    font-family:
        Georgia, "Times New Roman", serif;
    font-size: clamp(2.4rem, 5vw, 5rem);
    line-height: 1.06;
    letter-spacing: -0.04em;
}

.positioning__copy {
    max-width: 690px;
    margin-left: auto;
    color: #454a52;
    font-size: 1.15rem;
}

.section-block {
    padding:
        clamp(5rem, 10vw, 9rem)
        var(--page-padding);
}

.section-heading {
    display: grid;
    grid-template-columns: minmax(180px, 0.3fr) minmax(0, 1fr);
    gap: 3rem;
}

.service-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    background: #bfc5cc;
    border: 1px solid #bfc5cc;
}

.service-row {
    position: relative;
    min-height: 285px;
    padding: clamp(2.5rem, 4vw, 3.5rem);
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 1.75rem;
    overflow: hidden;
    background: var(--warm-white);
    border-radius: 8px;
    transition:
        color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.service-row:hover {
    z-index: 1;
    color: var(--white);
    background: #090c11;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
    transform: translateY(-2px);
}

.service-row:hover h3 {
    color: var(--white);
}

.service-row h3::before {
    content: "";
    display: block;
    width: 42px;
    height: 2px;
    margin-bottom: 1.25rem;
    background: linear-gradient(
        to right,
        #1d66c2,
        #74a9ea
    );
}

.service-row h3 {
    margin-bottom: 1rem;
    font-size: clamp(1.4rem, 2vw, 2rem);
}

.service-row p {
    max-width: 620px;
    margin-bottom: 0;
    color: #555d67;
    line-height: 1.7;
    transition: color 180ms ease;
}

.service-row:hover p {
    color: #c7cdd5;
}

.section-block--dark {
    width: 100%;
    max-width: none;
    color: var(--white);
    background: var(--black);
}

.section-block--dark > * {
    width: min(100%, var(--content-width));
    margin-inline: auto;
}

.section-block--dark h2 {
    color: var(--white);
}

.experience__heading {
    width: min(100%, var(--content-width));
    margin-inline: auto;
}

.experience__heading h2 {
    max-width: 900px;
    margin-bottom: 2rem;
}

.experience__intro {
    max-width: 820px;
    margin: 0 0 clamp(3rem, 6vw, 5rem) auto;
    color: var(--light-gray);
    font-size: clamp(1.08rem, 1.6vw, 1.25rem);
    line-height: 1.75;
}

.experience__pillars {
    width: min(100%, var(--content-width));
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--rule-gray);
    border-left: 1px solid var(--rule-gray);
}

.experience__pillar {
    min-height: 280px;
    padding: clamp(2rem, 4vw, 3.25rem);
    border-right: 1px solid var(--rule-gray);
    border-bottom: 1px solid var(--rule-gray);
}

.experience__pillar h3 {
    margin-bottom: 1.25rem;
    color: var(--white);
}

.experience__pillar h3::before {
    content: "";
    width: 42px;
    height: 2px;
    margin-bottom: 1.25rem;
    display: block;
    background: linear-gradient(
        to right,
        #1d66c2,
        #74a9ea
    );
}

.experience__pillar p {
    margin-bottom: 0;
    color: var(--light-gray);
    line-height: 1.75;
}

.experience__statement {
    width: min(100%, var(--content-width));
    max-width: 980px;
    margin: clamp(3rem, 6vw, 5rem) auto 0;
    padding-top: clamp(2rem, 4vw, 3rem);
    color: var(--white);
    border-top: 1px solid var(--rule-gray);
    font-family:
        Georgia, "Times New Roman", serif;
    font-size: clamp(1.65rem, 3vw, 2.75rem);
    line-height: 1.25;
    letter-spacing: -0.035em;
    text-align: center;
}

.technology-statement {
    padding:
        clamp(5rem, 10vw, 9rem)
        var(--page-padding);
    color: var(--white);
    background:
        radial-gradient(
            circle at 78% 35%,
            rgba(29, 102, 194, 0.22),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #0b0e14,
            #111722
        );
}

.technology-statement h2 {
    max-width: 900px;
    margin-bottom: 2rem;
    color: var(--white);
}

.technology-statement p:last-child {
    max-width: 760px;
    margin: 0 0 0 auto;
    color: var(--light-gray);
    font-size: clamp(1.08rem, 1.6vw, 1.25rem);
    line-height: 1.75;
}

.work-list {
    border-top: 1px solid #bfc5cc;
}

.work-item {
    display: grid;
    grid-template-columns: 220px minmax(240px, 0.8fr) minmax(280px, 1fr);
    gap: 2rem;
    padding: 3rem 0;
    border-bottom: 1px solid #bfc5cc;
}

.work-category {
    color: var(--blue);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.work-item p:last-child {
    color: #555d67;
}

.section-block--light {
    width: 100%;
    max-width: none;
    background: var(--warm-white);
}

.section-block--light > * {
    width: min(100%, var(--content-width));
    margin-inline: auto;
}

.about__copy {
    max-width: 760px;
    margin-left: auto;
    font-size: 1.15rem;
}

.about__pull-quote {
    position: relative;
    margin:
        clamp(3rem, 6vw, 5rem)
        0
        0;
    padding:
        clamp(2rem, 4vw, 3rem)
        0
        0;
    border-top: 1px solid #bfc5cc;
}

.about__pull-quote::before {
    content: "";
    width: 52px;
    height: 2px;
    margin-bottom: 1.5rem;
    display: block;
    background: linear-gradient(
        to right,
        #1d66c2,
        #74a9ea
    );
}

.about__pull-quote p {
    max-width: 760px;
    margin: 0;
    color: #171b21;
    font-family:
        Georgia, "Times New Roman", serif;
    font-size: clamp(1.75rem, 3.5vw, 3.25rem);
    line-height: 1.18;
    letter-spacing: -0.04em;
}

.section-block--blue {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 4rem;
    color: var(--white);
    background:
        linear-gradient(135deg, var(--deep-blue), var(--blue));
}

.section-block--blue h2 {
    color: var(--white);
}

.section-block--blue > div {
    max-width: 900px;
}

.section-block--light .section-label,
.positioning .section-label,
.services .section-label,
.selected-work .section-label {
    color: #1d66c2;
}

.contact__action {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--cyan);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.site-footer {
    padding:
        2rem var(--page-padding)
        2rem;
    color: var(--light-gray);
    background: var(--black);
    font-size: 0.95rem;
}

.site-footer__grid,
.site-footer__legal {
    width: min(100%, var(--content-width));
    margin-inline: auto;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 4rem;
}

.footer-brand,
.footer-heading {
    color: var(--white);
    font-weight: 800;
}

.footer-summary {
    max-width: 470px;
}

.site-footer a {
    display: block;
    margin-bottom: 0.65rem;
    color: var(--light-gray);
    text-decoration: none;
    transition: color 160ms ease;
}

.site-footer a:hover {
    color: var(--cyan);
}

.site-footer__legal {
    margin-top: 2%;
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    color: var(--middle-gray);
    border-top: 1px solid var(--rule-gray);
    font-size: 0.8rem;
}

@media (max-width: 900px) {
    .menu-toggle {
        display: block;
    }

    .primary-navigation {
        position: absolute;
        top: 96px;
        right: 0;
        left: 0;
        padding: 1.5rem var(--page-padding);
        display: none;
        align-items: flex-start;
        flex-direction: column;
        background: var(--black);
        border-bottom: 1px solid var(--rule-gray);
    }

    .primary-navigation.is-open {
        display: flex;
    }

    .hero__grid,
    .section-heading,
    .section-block--blue {
        grid-template-columns: 1fr;
    }

    .hero__focus {
        padding-top: 2rem;
        padding-left: 0;
        border-top: 1px solid var(--rule-gray);
        border-left: 0;
    }

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

    .metrics article:nth-child(2) {
        border-right: 0;
    }

    .metrics article {
        border-bottom: 1px solid var(--rule-gray);
    }

    .work-item {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
    }

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

    .experience__pillar {
        min-height: auto;
    }

    .experience__intro {
        margin-left: 0;
    }
}

@media (max-width: 580px) {
    .site-header__inner {
        width: calc(100% - (2 * var(--page-padding)));
        min-height: 76px;
    }

    .site-brand img {
        width: 235px;
        max-height: 52px;
    }

    .primary-navigation {
        top: 76px;
    }

    .hero {
        min-height: auto;
    }

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

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

    .metrics article {
        border-right: 0;
    }

    .site-footer__legal {
        flex-direction: column;
    }
}


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

    .service-row {
        min-height: auto;
    }

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

    .experience__pillar {
        min-height: auto;
    }

    .experience__intro {
        margin-left: 0;
    }
}

@media (max-width: 580px) {
    .service-row {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.75rem;
    }
}