:root {
    --ink: #02070d;
    --panel: #071521;
    --panel-2: #0a1c2a;
    --white: #f2f8ff;
    --muted: #8fa7be;
    --cyan: #31dcff;
    --cyan-soft: #86eaff;
    --blue: #1769ff;
    --line: rgba(73,205,238,.28);
    --line-strong: rgba(92,222,250,.55);
    --pad: clamp(1rem,3.6vw,4.5rem);
    --max: 1540px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--white);
    font-family: Inter,"Segoe UI",Arial,sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    overflow-x: hidden;
    background-image: linear-gradient(rgba(31,121,157,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(31,121,157,.035) 1px,transparent 1px);
    background-size: 42px 42px
}

    body:before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 50;
        opacity: .13;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E")
    }

a {
    color: inherit
}

.skip-link {
    position: fixed;
    left: 1rem;
    top: -5rem;
    z-index: 99;
    background: #fff;
    color: #000;
    padding: .75rem 1rem
}

    .skip-link:focus {
        top: 1rem
    }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}

.site-header {
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    right: 0;
    height: 82px;
    padding: 0 var(--pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid transparent;
    transition: .3s;
    background: linear-gradient(to bottom,rgba(2,7,13,.9),rgba(2,7,13,.25))
}

    .site-header.scrolled {
        height: 68px;
        background: rgba(2,7,13,.92);
        backdrop-filter: blur(18px);
        border-color: var(--line)
    }

.brand img {
    display: block;
    width: clamp(165px,16vw,230px);
    height: auto
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.2rem,2.5vw,2.8rem)
}

    .primary-nav a {
        text-decoration: none;
        color: #bbccdb;
        font: 650 .72rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
        text-transform: uppercase;
        letter-spacing: .13em
    }

        .primary-nav a:hover, .primary-nav a:focus-visible {
            color: var(--cyan)
        }

    .primary-nav .nav-cta {
        border: 1px solid var(--line-strong);
        padding: .7rem 1rem;
        background: rgba(23,105,255,.08)
    }

.menu-toggle {
    display: none;
    background: none;
    border: 0;
    padding: .5rem
}

    .menu-toggle span:not(.sr-only) {
        display: block;
        width: 25px;
        height: 1px;
        background: white;
        margin: 6px
    }

.hero {
    min-height: 100svh;
    padding: 7rem var(--pad) 1.2rem;
    display: flex;
    align-items: stretch
}

.hero-console {
    width: 100%;
    max-width: var(--max);
    margin: auto;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: linear-gradient(135deg,rgba(9,29,43,.96),rgba(2,10,17,.95));
    border: 1px solid var(--line-strong);
    min-height: calc(100svh - 8.2rem);
    position: relative;
    box-shadow: 0 24px 100px rgba(0,0,0,.45)
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0,1.03fr) minmax(380px,.97fr);
    min-height: 0
}

.hero-content {
    padding: clamp(3rem,7vw,7rem) clamp(1.5rem,5vw,6rem);
    display: flex;
    flex-direction: column;
    justify-content: center
}

.eyebrow, .section-label {
    font: 650 .7rem/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--cyan)
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-wrap: nowrap;
}

    .eyebrow:before {
        content: "";
        width: 38px;
        height: 1px;
        background: var(--cyan);
        box-shadow: 0 0 10px var(--cyan)
    }

.hero h1 {
    font-size: clamp(3.5rem,7vw,7.8rem);
    line-height: .86;
    letter-spacing: -.06em;
    margin: 1.3rem 0 2rem;
    font-weight: 720
}

    .hero h1 span {
        color: transparent;
        -webkit-text-stroke: 1px rgba(119,223,255,.75);
        text-shadow: 0 0 32px rgba(0,125,255,.22)
    }

.hero-copy {
    max-width: 620px;
    color: #b2c2d1;
    font-size: clamp(1rem,1.35vw,1.22rem);
    line-height: 1.7
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 2.3rem
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 1.4rem;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: .15em;
    font: 650 .7rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;
    padding: 1.1rem 1.35rem;
    border: 0;
    cursor: pointer;
    transition: .2s
}

.button-primary {
    background: linear-gradient(110deg,var(--blue),#1bbfff);
    color: #fff;
    box-shadow: 0 10px 40px rgba(0,104,255,.23)
}

    .button-primary:hover {
        filter: brightness(1.13);
        transform: translateY(-1px)
    }

.text-link {
    font: 600 .7rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: #aebfd0
}

.hero-media {
    position: relative;
    margin: 1rem 1rem 1rem 0;
    min-height: 480px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #03101a
}

    .hero-media:before, .hero-media:after {
        content: "";
        position: absolute;
        z-index: 2;
        width: 24px;
        height: 24px
    }

    .hero-media:before {
        left: 8px;
        top: 8px;
        border-top: 2px solid var(--cyan);
        border-left: 2px solid var(--cyan)
    }

    .hero-media:after {
        right: 8px;
        bottom: 8px;
        border-right: 2px solid var(--cyan);
        border-bottom: 2px solid var(--cyan)
    }

    .hero-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(.68) contrast(1.13) brightness(.72);
        opacity: .9
    }

.signal-strip {
    border-top: 1px solid var(--line);
    padding: .8rem 1rem;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
    color: #7291a7;
    font: 600 .62rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: rgba(4,18,29,.8)
}

.section {
    max-width: var(--max);
    margin: auto;
    padding: clamp(5.5rem,9vw,9rem) var(--pad)
}

@media(max-width:560px) {
    .section {
        padding: clamp(2.75rem,9vw,9rem) var(--pad)
    }
}

.section-label {
    display: flex;
    align-items: center;
    gap: .8rem
}

    .section-label span {
        color: #5f8097
    }

.statement {
    position: relative
}

    .statement:after {
        content: "";
        position: absolute;
        left: var(--pad);
        right: var(--pad);
        bottom: 0;
        border-bottom: 1px solid var(--line)
    }

.statement-grid {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr);
    gap: clamp(3rem,9vw,10rem);
    align-items: end;
    margin-top: 3rem
}

.statement h2, .section-heading h2, .process h2, .contact h2 {
    font-size: clamp(2.7rem,5.3vw,5.6rem);
    line-height: 1.02;
    letter-spacing: -.045em;
    margin: 0;
    font-weight: 620
}

    .statement h2 em {
        font-style: normal;
        color: var(--cyan)
    }

.statement-copy {
    color: #a3b5c6;
    font-size: 1.04rem;
    border-left: 1px solid var(--line-strong);
    padding: 1.4rem 0 1.4rem 2rem;
    background: linear-gradient(90deg,rgba(24,106,255,.07),transparent)
}

    .statement-copy p:first-child {
        margin-top: 0
    }

.section-heading {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 2rem;
    margin: 3rem 0 4rem
}

    .section-heading p {
        margin: 0;
        color: #91a7ba;
        max-width: 320px
    }

.capability-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem
}

.capability {
    position: relative;
    display: grid;
    grid-template-columns: 52px 1fr 30px;
    gap: 1.2rem;
    align-items: start;
    padding: 2rem;
    border: 1px solid var(--line);
    background: linear-gradient(145deg,rgba(8,29,44,.86),rgba(4,14,24,.76));
    transition: .25s
}

    .capability:before, .capability:after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px
    }

    .capability:before {
        top: -1px;
        left: -1px;
        border-top: 1px solid var(--cyan);
        border-left: 1px solid var(--cyan)
    }

    .capability:after {
        right: -1px;
        bottom: -1px;
        border-right: 1px solid var(--cyan);
        border-bottom: 1px solid var(--cyan)
    }

    .capability:hover {
        border-color: var(--line-strong);
        background: linear-gradient(145deg,rgba(13,45,67,.92),rgba(6,19,32,.8));
        transform: translateY(-2px)
    }

.capability-number {
    font: 500 .68rem/1 monospace;
    color: var(--cyan)
}

.capability h3 {
    margin: 0;
    font-size: clamp(1.25rem,1.8vw,1.8rem);
    font-weight: 520
}

.capability p {
    grid-column: 2/4;
    margin: 0;
    color: #93a9bb
}

.capability-mark {
    font-size: 1.1rem;
    color: #4e8fb2
}

.process {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.process-glow {
    position: absolute;
    right: -10rem;
    top: 4rem;
    width: 40rem;
    height: 40rem;
    border: 1px solid rgba(50,147,255,.14);
    border-radius: 50%;
    box-shadow: 0 0 100px rgba(0,83,255,.1),inset 0 0 90px rgba(0,206,255,.04)
}

    .process-glow:after {
        content: "";
        position: absolute;
        inset: 22%;
        border: 1px dashed rgba(40,220,255,.2);
        border-radius: 50%
    }

.process-intro {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 5rem;
    align-items: end;
    margin: 3rem 0 5rem
}

    .process-intro p {
        max-width: 460px;
        color: #96aabd
    }

.process-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border: 1px solid var(--line)
}

    .process-track li {
        position: relative;
        padding: 2rem;
        min-height: 170px;
        border-right: 1px solid var(--line);
        background: rgba(6,23,36,.62)
    }

        .process-track li:last-child {
            border-right: 0
        }

        .process-track li:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 34px;
            height: 2px;
            background: var(--cyan);
            box-shadow: 0 0 15px var(--cyan)
        }

    .process-track strong {
        display: block;
        font-size: 1.28rem;
        margin-bottom: .65rem
    }

    .process-track span {
        color: #8399ad;
        font-size: .9rem
    }

.contact {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: clamp(4rem,9vw,10rem)
}

.contact-copy h2 {
    margin: 2.5rem 0 1.5rem
}

.contact-copy p {
    max-width: 500px;
    color: #97aabd
}

.contact-copy > a {
    display: inline-block;
    margin-top: 1.3rem;
    color: var(--cyan);
    text-underline-offset: .4rem
}

.contact-form {
    position: relative;
    display: grid;
    gap: 1.4rem;
    padding: clamp(1.5rem,4vw,3.5rem);
    background: linear-gradient(145deg,rgba(10,35,52,.9),rgba(4,14,24,.83));
    border: 1px solid var(--line-strong);
    box-shadow: 0 30px 100px rgba(0,0,0,.3)
}

    .contact-form:before, .contact-form:after {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px
    }

    .contact-form:before {
        left: -1px;
        top: -1px;
        border-left: 2px solid var(--cyan);
        border-top: 2px solid var(--cyan)
    }

    .contact-form:after {
        right: -1px;
        bottom: -1px;
        border-right: 2px solid var(--cyan);
        border-bottom: 2px solid var(--cyan)
    }

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem
}

.contact-form label {
    display: grid;
    gap: .55rem;
    font: 650 .68rem/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #b8ccdc
}

    .contact-form label span {
        color: #637e93
    }

.contact-form input, .contact-form textarea {
    width: 100%;
    border: 1px solid rgba(73,205,238,.2);
    background: rgba(1,8,14,.5);
    color: #fff;
    padding: .88rem .75rem;
    font: 1rem/1.5 Inter,"Segoe UI",sans-serif;
    border-radius: 0;
    outline: none
}

    .contact-form input:focus, .contact-form textarea:focus {
        border-color: var(--cyan);
        box-shadow: 0 0 0 2px rgba(40,220,255,.09)
    }

.contact-form textarea {
    resize: vertical
}

.contact-form .button {
    justify-self: start
}

.form-note, .form-status {
    margin: 0;
    color: #6f879b;
    font-size: .78rem
}

.form-status {
    color: var(--cyan);
    min-height: 1.2em
}

.site-footer {
    border-top: 1px solid var(--line);
    padding: 2.2rem var(--pad);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    color: #6f879b;
    font: 600 .67rem/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;
    text-transform: uppercase;
    letter-spacing: .12em
}

    .site-footer img {
        width: 180px;
        height: auto
    }

    .site-footer p:nth-child(2) {
        text-align: center
    }

    .site-footer p:last-child {
        text-align: right
    }

.js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .65s ease,transform .65s ease
}

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

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

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

    .button-primary:hover, .capability:hover {
        transform: none
    }
}

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

    .hero-media {
        min-height: 380px;
        margin: 0 1rem 1rem
    }

    .hero-content {
        padding-bottom: 3rem
    }

    .capability-list {
        grid-template-columns: 1fr
    }
}

@media(max-width:850px) {
    .site-header {
        height: 68px
    }

    .menu-toggle {
        display: block;
        z-index: 2
    }

    .primary-nav {
        position: absolute;
        inset: 0 0 auto;
        height: 100vh;
        background: rgba(2,7,13,.98);
        display: flex;
        flex-direction: column;
        justify-content: center;
        transform: translateX(100%);
        transition: .3s
    }

        .primary-nav.open {
            transform: none
        }

        .primary-nav a {
            font-size: .95rem
        }

    .hero {
        padding-top: 5.4rem
    }

    .hero-console {
        min-height: calc(100svh - 6.6rem)
    }

    .statement-grid, .process-intro, .contact {
        grid-template-columns: 1fr
    }

    .section-heading {
        grid-template-columns: 1fr
    }

    .process-track {
        grid-template-columns: 1fr 1fr
    }

        .process-track li:nth-child(2) {
            border-right: 0
        }

        .process-track li {
            border-bottom: 1px solid var(--line)
        }

            .process-track li:nth-child(3), .process-track li:nth-child(4) {
                border-bottom: 0
            }

    .site-footer {
        grid-template-columns: 1fr;
        text-align: left;
        gap: 1rem
    }

        .site-footer p:nth-child(2), .site-footer p:last-child {
            text-align: left;
            margin: 0
        }
}

@media(max-width:560px) {
    .hero h1 {
        font-size: clamp(3.1rem,16vw,5rem)
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 1.4rem
    }

    .hero-media {
        min-height: 290px
    }

    .signal-strip {
        grid-template-columns: 1fr 1fr
    }

    .field-row {
        grid-template-columns: 1fr
    }

    .process-track {
        grid-template-columns: 1fr
    }

        .process-track li {
            min-height: 120px;
            border-right: 0;
            border-bottom: 1px solid var(--line) !important
        }

            .process-track li:last-child {
                border-bottom: 0 !important
            }

    .capability {
        padding: 1.4rem
    }

    .statement-copy {
        padding-left: 1rem
    }

    .contact-form {
        padding: 1.2rem
    }

    .site-footer img {
        width: 160px;
        height: auto
    }
}

/* Editorial work gallery. */
.work-gallery {
    padding-top: 2rem
}

.work-grid {
    display: grid;
    grid-template-columns: 1.06fr .94fr;
    gap: 1rem;
    margin-top: 2rem
}

.work-card {
    position: relative;
    margin: 0;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--panel)
}

    .work-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: saturate(.84) contrast(1.06)
    }

    .work-card:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top,rgba(2,8,14,.86),transparent 45%);
        pointer-events: none
    }

    .work-card figcaption {
        position: absolute;
        z-index: 2;
        left: 1.4rem;
        right: 1.4rem;
        bottom: 1.2rem;
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 1rem
    }

    .work-card strong {
        font-size: 1.25rem;
        font-weight: 580
    }

    .work-card span {
        font: 600 .65rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
        letter-spacing: .11em;
        text-transform: uppercase;
        color: var(--cyan-soft);
        text-align: right
    }

@media(max-width:980px) {
    .work-card {
        min-height: 350px
    }
}

@media(max-width:700px) {
    .work-grid {
        grid-template-columns: 1fr
    }

    .work-card {
        min-height: 320px
    }
}

@media(max-width:560px) {
    .work-card figcaption {
        align-items: flex-start;
        flex-direction: column
    }

    .work-card span {
        text-align: left
    }
}

/* Full-bleed hero shell. */
.hero {
    min-height: auto;
    padding: 82px 0 0;
    display: block
}

.hero-console {
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: auto;
    border: 0;
    background: var(--ink);
    box-shadow: none
}

@media(max-width:850px) {
    .hero {
        padding-top: 68px
    }
}

/* Overlay the complete message panel on the full-bleed hero photograph. */
.hero-console {
    position: relative;
    overflow: hidden;
    border: 0
}

.hero-grid {
    position: relative;
    display: block;
    height: clamp(680px,72vw,900px);
    min-height: 0
}

.hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0
}

    .hero-media:before, .hero-media:after {
        display: none
    }

    .hero-media img {
        object-position: center 42%;
        filter: saturate(.82) contrast(1.07) brightness(.9)
    }

.hero-content {
    position: absolute;
    z-index: 3;
    right: var(--pad);
    bottom: 5rem;
    left: auto;
    display: block;
    width: min(620px,46vw);
    max-width: none;
    margin: 0;
    padding: clamp(2rem,3.5vw,3.5rem);
    background: rgba(3,12,21,.9);
    border: 1px solid var(--line-strong);
    box-shadow: 0 26px 80px rgba(0,0,0,.42);
    backdrop-filter: blur(12px)
}

    .hero-content:before, .hero-content:after {
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        pointer-events: none
    }

    .hero-content:before {
        left: -1px;
        top: -1px;
        border-left: 2px solid var(--cyan);
        border-top: 2px solid var(--cyan)
    }

    .hero-content:after {
        right: -1px;
        bottom: -1px;
        border-right: 2px solid var(--cyan);
        border-bottom: 2px solid var(--cyan)
    }

    .hero-content h1 {
        margin: 1rem 0 1.4rem;
        font-size: clamp(3.2rem,5.4vw,6rem)
    }

    .hero-content .hero-copy {
        margin: 0
    }

    .hero-content .hero-actions {
        margin-top: 2rem
    }

.signal-strip {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(3,12,21,.92);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

@media(max-width:900px) {
    .hero-grid {
        height: clamp(720px,105vw,860px)
    }

    .hero-content {
        right: 1rem;
        left: 1rem;
        bottom: 5rem;
        width: auto;
        padding: 2rem
    }

        .hero-content h1 {
            font-size: clamp(3.1rem,10vw,5rem)
        }
}

@media(max-width:560px) {
    .hero-grid {
        height: 780px
    }

    .hero-media img {
        object-position: 42% center
    }

    .hero-content {
        bottom: 3rem;
        padding: 1.5rem
    }

        .hero-content .hero-actions {
            gap: 1rem
        }

    .signal-strip {
        grid-template-columns: 1fr 1fr;
        row-gap: .65rem
    }
}

/* Pair the approach statement with an editorial view of artful interface work. */
.statement-grid {
    grid-template-columns: minmax(0,1fr) minmax(420px,1fr);
    align-items: center;
    gap: clamp(2rem,4vw,4.5rem);
    padding: clamp(1.5rem,3vw,3rem);
    border: 1px solid var(--line);
    background: linear-gradient(145deg,rgba(8,29,44,.6),rgba(4,14,24,.46))
}

.statement-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(.5rem,2vw,2rem)
}

    .statement-content h2 {
        max-width: 720px;
        font-size: clamp(2.6rem,4.4vw,4.9rem);
        line-height: .94
    }

.statement-copy {
    position: relative;
    grid-column: 1/-1;
    max-width: none;
    margin-top: 0;
    padding: clamp(1.75rem,3vw,2.5rem);
    border: 1px solid var(--line);
    background: linear-gradient(145deg,rgba(8,29,44,.86),rgba(4,14,24,.76))
}

    .statement-copy:before, .statement-copy:after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px
    }

    .statement-copy:before {
        top: -1px;
        left: -1px;
        border-top: 1px solid var(--cyan);
        border-left: 1px solid var(--cyan)
    }

    .statement-copy:after {
        right: -1px;
        bottom: -1px;
        border-right: 1px solid var(--cyan);
        border-bottom: 1px solid var(--cyan)
    }

    .statement-copy .statement-lead {
        margin: 0 0 1.35rem;
        padding-bottom: 1.1rem;
        color: var(--cyan);
        border-bottom: 1px solid var(--cyan);
        font-size: clamp(1.15rem,1.5vw,1.4rem);
        line-height: 1.55
    }

.statement-media {
    position: relative;
    aspect-ratio: auto;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    background: #050b14
}

    .statement-media:after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        box-shadow: inset 0 0 0 1px rgba(0,217,255,.06)
    }

    .statement-media img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
        object-position: center;
        filter: saturate(.92) contrast(1.04)
    }

@media(max-width:900px) {
    .statement-grid {
        grid-template-columns: 1fr;
        gap: 3rem
    }

    .statement-copy {
        grid-column: auto
    }

    .statement-media {
        min-height: 0
    }
}

.work-gallery {
    padding-bottom: clamp(2.75rem,4.5vw,4.5rem)
}

.solution-feature {
    display: block;
    border-top: 0;
    padding-top: clamp(2.75rem,4.5vw,4.5rem)
}

.solution-feature-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(420px,1fr);
    align-items: center;
    gap: clamp(2rem,4vw,4.5rem);
    margin-top: 3rem;
    padding: clamp(1.5rem,3vw,3rem);
    border: 1px solid var(--line);
    background: linear-gradient(145deg,rgba(8,29,44,.6),rgba(4,14,24,.46))
}

.solution-feature-media {
    aspect-ratio: auto;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    background: #050b14
}

    .solution-feature-media img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
        object-position: center;
        filter: saturate(.92) contrast(1.04)
    }

.solution-feature-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(.5rem,2vw,2rem)
}

    .solution-feature-copy h2 {
        margin: 0;
        font-size: clamp(2.7rem,4.4vw,5rem);
        line-height: .86;
        letter-spacing: -.055em
    }

        .solution-feature-copy h2 em {
            color: var(--cyan);
            font-style: normal
        }

.solution-feature-description {
    position: relative;
    grid-column: 1/-1;
    padding: clamp(1.75rem,3vw,2.5rem);
    border: 1px solid var(--line);
    background: linear-gradient(145deg,rgba(8,29,44,.86),rgba(4,14,24,.76))
}

    .solution-feature-description:before, .solution-feature-description:after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px
    }

    .solution-feature-description:before {
        top: -1px;
        left: -1px;
        border-top: 1px solid var(--cyan);
        border-left: 1px solid var(--cyan)
    }

    .solution-feature-description:after {
        right: -1px;
        bottom: -1px;
        border-right: 1px solid var(--cyan);
        border-bottom: 1px solid var(--cyan)
    }

    .solution-feature-description p {
        max-width: none;
        margin: 0;
        color: var(--muted);
        font-size: clamp(1rem,1.3vw,1.2rem);
        line-height: 1.8
    }

@media(max-width:900px) {
    .solution-feature-grid {
        grid-template-columns: 1fr;
        gap: 3rem
    }

    .solution-feature-media {
        min-height: 0;
        aspect-ratio: auto
    }

    .solution-feature-description {
        grid-column: auto
    }

    .statement-media {
        aspect-ratio: auto
    }
}

.form-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important
}

/* Wide, bottom-anchored hero message panel with the photo framed from the top. */
.hero-media img {
    object-position: center top
}

.hero-grid {
    height: clamp(580px,calc(72vw - 100px),800px)
}

    .hero-grid:after {
        display: block;
        content: "";
        position: absolute;
        z-index: 2;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        height: 64%;
        pointer-events: none;
        background: linear-gradient(to top,rgba(5,9,16,1) 0%,rgba(5,9,16,.9) 50%,rgba(5,9,16,0) 100%)
    }

.hero-content {
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none
}

    .hero-content:before, .hero-content:after {
        display: none
    }

.signal-strip {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr
}

    .signal-strip span {
        text-align: center
    }

    .signal-strip .signal-arrow {
        color: transparent;
        background: linear-gradient(90deg,rgba(49,220,255,.22),rgba(49,220,255,.6),var(--cyan));
        background-clip: text;
        -webkit-background-clip: text;
        font-size: .8rem;
        line-height: .6;
        letter-spacing: .08em;
        filter: drop-shadow(0 0 5px rgba(49,220,255,.55))
    }

.eyebrow:after {
    content: "";
    width: 38px;
    height: 1px;
    background: var(--cyan);
    box-shadow: 0 0 10px var(--cyan)
}

.process-track li:before {
    transition: box-shadow .25s ease,background-color .25s ease
}

.process-track li:hover:before {
    background: #c8f8ff;
    box-shadow: 0 0 10px 2px #c8f8ff,0 0 26px 5px var(--cyan),0 0 52px 10px rgba(40,220,255,.9)
}

.contact-form label {
    display: block
}

.contact-form .field-label {
    display: block;
    margin-bottom: .55rem;
    color: inherit
}

.contact-form .required-marker {
    color: var(--cyan)
}

.text-cyan {
    color: var(--cyan)
}

@media(min-width:901px) {
    .hero-content {
        left: 50%;
        right: auto;
        bottom: 2.4rem;
        width: min(calc(100% - 2 * var(--pad)),calc(var(--max) - 2 * var(--pad)));
        transform: translateX(-50%);
        display: grid;
        grid-template-columns: minmax(0,1.08fr) minmax(340px,.92fr);
        grid-template-rows: auto auto auto;
        column-gap: clamp(3rem,7vw,8rem);
        row-gap: .8rem;
        padding: clamp(1.75rem,2.8vw,3rem)
    }

        .hero-content .eyebrow {
            grid-column: 2;
            grid-row: 1;
            margin: 0
        }

        .hero-content h1 {
            grid-column: 1;
            grid-row: 1 / span 3;
            font-size: clamp(3.2rem,5vw,5.8rem)
        }

        .hero-content .hero-copy {
            grid-column: 2;
            grid-row: 2;
            align-self: end;
            margin: 0
        }

        .hero-content .hero-actions {
            grid-column: 2;
            grid-row: 3;
            align-self: start;
            margin-top: 1rem
        }
}

@media(max-width:900px) {
    .hero-grid {
        height: clamp(620px,calc(105vw - 100px),760px)
    }

    .hero-media img {
        object-position: 42% top
    }

    .hero-grid:after {
        height: 100%;
        background: linear-gradient( to top, rgba(5,9,16,1) 0%, rgba(5,9,16,.92) 35%, rgba(5,9,16,.72) 65%, rgba(5,9,16,.12) 100% );
    }
}

@media(max-width:560px) {
    .hero-grid {
        height: 680px
    }

    .signal-strip {
        grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
        gap: .35rem;
        padding-inline: .5rem
    }
}