/* Lenis owns smooth scrolling; native smooth scroll fights its rAF loop.
   `scroll-padding-top: auto` also breaks Lenis' element targeting, because it
   parses the computed value with parseFloat and gets NaN. */
html {
    scroll-padding-top: 0
}

html.lenis,
html.lenis body {
    height: auto
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain
}

.lenis.lenis-stopped {
    overflow: hidden
}

.skware-hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    background: #08080a;
    color: #f4f4f7;
    font-family: Inter, system-ui, sans-serif
}

.skware-hero__media,
.skware-hero__media video,
.skware-hero__media img,
.skware-hero__scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.skware-hero__media video,
.skware-hero__media img {
    object-fit: cover
}

.skware-hero__scrim {
    background: linear-gradient(90deg, rgba(8, 8, 10, .86), rgba(8, 8, 10, .38) 58%, rgba(8, 8, 10, .15)), linear-gradient(0deg, rgba(8, 8, 10, .62), transparent 38%)
}

.skware-hero__content {
    position: relative;
    z-index: 1;
    min-height: 100svh
}

.skware-hero__intro {
    max-width: 40rem
}

.skware-hero__eyebrow {
    display: inline-block;
    border: 1px solid #496ed6;
    border-radius: 4px;
    padding: .4rem .8rem;
    color: #6f8ee7;
    font: 700 .7rem/1 'Space Grotesk', sans-serif;
    letter-spacing: .08em
}

.skware-hero h1 {
    margin: 0;
    font: 400 var(--type-display-xl, clamp(2.5rem, 3.25vw, 3.5rem))/1.1 'Space Grotesk', sans-serif;
    letter-spacing: -.02em
}

.skware-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem
}

.skware-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 999px;
    /* Matches .skware-button-widget__control so a hand-rolled .skware-button
       and a Button widget hit the same 44px touch minimum. */
    min-height: 44px;
    padding: .9rem 1.45rem;
    text-decoration: none;
    font: 700 .8rem/1 'Space Grotesk', sans-serif;
    letter-spacing: .03em
}

.skware-button--primary {
    background: #496ed6;
    color: #f4f4f7
}

.skware-button--secondary {
    border: 1px solid #c2aaf9;
    color: #c2aaf9
}

.skware-button--secondary svg {
    height: 12px;
    width: 12px
}

.skware-button--outline {
    border: 1px solid #c2aaf9;
    color: #c2aaf9
}

.skware-button--lilac {
    background: #c2aaf9;
    color: #121319
}

.skware-button--ghost {
    color: #f4f4f7
}

.skware-button--custom {
    border: 1px solid transparent;
    color: #f4f4f7
}

.skware-button-widget {
    display: flex
}

.skware-button-widget__control {
    min-height: 44px;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease
}

.skware-button-widget__control svg {
    height: 16px;
    flex: 0 0 16px;
    width: 16px
}

.elementor-editor-active .skware-button-widget__control {
    pointer-events: none
}

@media(hover:hover) {
    .skware-button-widget__control:hover {
        transform: translateY(-2px)
    }

    .skware-button-widget__control.skware-button--outline:hover {
        background: rgba(194, 170, 249, .12)
    }
}

.skware-hero__metrics {
    position: absolute;
    top: 54%;
    width: min(20rem, calc(100% - 2.5rem));
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    background: rgba(18, 19, 25, .8);
    padding: 1.5rem;
    backdrop-filter: blur(16px)
}

.skware-hero__live {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #c2aaf9;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em
}

.skware-hero__live i {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #c2aaf9
}

.skware-hero__metrics p {
    font-size: .9rem
}

.skware-hero__metrics dl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 1rem
}

.skware-hero__metrics dt {
    color: #496ed6;
    font-size: .75rem
}

.skware-hero__metrics dd {
    margin: .25rem 0 0;
    font-size: .8rem
}

@media(max-width:767px) {
    .skware-hero__content {
        padding-top: 8rem
    }

    .skware-hero__metrics {
        position: absolute;
        top: auto;
        bottom: 7.5rem;
        left: 1.25rem;
        right: 1.25rem;
        width: auto
    }

}

.skware-solutions {
    background: #08080a;
    color: #f4f4f7;
    padding: clamp(2.5rem, 6vw, 4rem) var(--site-gutter-right) clamp(2.5rem, 6vw, 4rem) var(--site-gutter-left);
    position: relative;
    z-index: 30
}

.skware-solutions__heading {
    margin-bottom: 32px
}

.skware-solutions__eyebrow {
    background: #0c1020;
    border: 1px solid rgba(43, 58, 103, .8);
    border-radius: 4px;
    color: #496ed6;
    display: inline-block;
    font: 700 .72rem/1 'Space Grotesk', sans-serif;
    letter-spacing: .06em;
    padding: 6px 14px
}

.skware-solutions__track {
    display: flex;
    gap: 16px;
    margin: 0 -16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0 16px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory
}

.skware-solutions__track::-webkit-scrollbar {
    display: none
}

.skware-solutions__card {
    background: #08080a;
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
    flex: 0 0 88%;
    height: clamp(25rem, 68svh, 32rem);
    isolation: isolate;
    overflow: hidden;
    position: relative;
    scroll-snap-align: start
}

.skware-solutions__card-link {
    border-radius: inherit;
    inset: 0;
    position: absolute;
    z-index: 3
}

.skware-solutions__card-link:focus-visible {
    outline: 2px solid #c2aaf9;
    outline-offset: -4px
}

.skware-solutions__card--linked {
    cursor: pointer;
    transition: transform .35s ease, box-shadow .35s ease
}

.skware-solutions__card--linked:hover,
.skware-solutions__card--linked:focus-within {
    box-shadow: inset 0 0 0 1px rgba(194, 170, 249, .45), 0 18px 48px rgba(0, 0, 0, .55);
    transform: translateY(-4px)
}

@media (prefers-reduced-motion: reduce) {
    .skware-solutions__card--linked {
        transition: none
    }

    .skware-solutions__card--linked:hover,
    .skware-solutions__card--linked:focus-within {
        transform: none
    }
}

.skware-solutions__card-glow {
    background-position: center;
    background-size: cover;
    filter: blur(40px) saturate(1.5);
    inset: 0;
    opacity: .6;
    position: absolute;
    transform: scale(1.1)
}

img.skware-solutions__card-image {
    height: 100%;
    inset: 0;
    object-fit: contain;
    object-position: center;
    position: absolute;
    width: 100%
}

.skware-solutions__card-overlay {
    background: linear-gradient(180deg, rgba(12, 13, 18, .3), transparent, rgba(12, 13, 18, .9));
    inset: 0;
    position: absolute
}

.skware-solutions__card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    padding: 24px;
    position: relative
}

.skware-solutions__card-category {
    background: rgba(0, 0, 0, .7);
    border-radius: 999px;
    color: rgba(255, 255, 255, .9);
    display: inline-block;
    font: 700 .68rem/1 'Space Grotesk', sans-serif;
    letter-spacing: .12em;
    padding: 6px 12px;
    text-transform: uppercase;
    width: fit-content
}

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

.skware-solutions__card-footer h2 {
    color: #f4f4f7;
    font: 400 var(--type-heading, 2.375rem)/1.1 Inter, sans-serif;
    letter-spacing: -.02em;
    margin: 0
}

.skware-solutions__card-status {
    background: rgba(0, 0, 0, .5);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    color: rgba(255, 255, 255, .8);
    display: inline-block;
    font: 700 .68rem/1 'Space Grotesk', sans-serif;
    padding: 6px 12px
}

.skware-solutions__controls {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-top: 24px
}

.skware-solutions__button {
    align-items: center;
    background: transparent;
    border: 1px solid rgba(194, 170, 249, .7);
    border-radius: 999px;
    color: #c2aaf9;
    cursor: pointer;
    display: inline-flex;
    height: 48px;
    justify-content: center;
    transition: background-color .2s, border-color .2s;
    width: 64px
}

.skware-solutions__button svg {
    height: 15px;
    width: 15px
}

.skware-solutions__button:hover {
    background: rgba(194, 170, 249, .1);
    border-color: #c2aaf9
}

@media (min-width:640px) {
    .skware-solutions__card {
        flex-basis: 52%;
        height: 540px
    }

    .skware-solutions__card-body {
        padding: 32px
    }

    .skware-solutions__track {
        gap: 20px;
        margin: 0 -20px;
        padding: 0 20px
    }

    .skware-solutions__button {
        width: 68px
    }
}

@media (min-width:1024px) {
    .skware-solutions__card {
        border-radius: 24px;
        flex-basis: 50%;
        height: 580px
    }

    .skware-solutions__card-body {
        padding: 40px
    }

    .skware-solutions__track {
        gap: 24px;
        margin: 0 -24px;
        padding: 0 24px
    }
}

.skware-activations {
    height: calc(var(--skware-slide-count, 6) * 100svh);
    position: relative
}

.skware-activations__sticky {
    height: 100svh;
    overflow: hidden;
    position: sticky;
    top: 0
}

.skware-activations__heading {
    left: var(--site-edge-left);
    pointer-events: none;
    position: absolute;
    top: clamp(32px, 7vw, 112px);
    z-index: 20
}

.skware-activations__heading p {
    color: #6f8ee7;
    font: 500 var(--type-subheading, 1.5rem)/1.1 'Space Grotesk', sans-serif;
    margin: 0 0 12px
}

.skware-activations__heading h2 {
    font: 400 var(--type-display-lg, clamp(2.125rem, 2.8vw, 3rem))/1.15 'Space Grotesk', sans-serif;
    margin: 0;
    max-width: 520px
}

.skware-activations__nav {
    display: flex;
    flex-direction: column;
    gap: 7px;
    position: absolute;
    right: var(--site-edge-right);
    top: 50%;
    transform: translateY(-50%);
    z-index: 20
}

.skware-activations__nav button {
    background: transparent;
    border: 0;
    cursor: pointer;
    height: 44px;
    padding: 0;
    width: 44px
}

.skware-activations__nav i {
    background: #f4f4f7;
    border-radius: 50%;
    display: block;
    height: 7px;
    margin: auto;
    opacity: .3;
    transition: .2s;
    width: 7px
}

.skware-activations__nav button[aria-current=true] i {
    opacity: 1;
    transform: scale(1.5)
}

.skware-activations__panels,
.skware-activations__panel,
.skware-activations__panel video,
.skware-activations__panel img,
.skware-activations__shade {
    inset: 0;
    position: absolute
}

.skware-activations__panel {
    background: #08080a;
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease;
    z-index: 0
}

.skware-activations__panel.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1
}

.skware-activations__panel video,
.skware-activations__panel img {
    height: 100%;
    object-fit: cover;
    width: 100%
}

.skware-activations__shade {
    background: linear-gradient(0deg, rgba(8, 8, 10, .82), rgba(8, 8, 10, .1) 54%, rgba(8, 8, 10, .68))
}

.skware-activations__card {
    background: rgba(18, 19, 25, .8);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    bottom: 64px;
    left: var(--site-edge-left);
    max-width: 402px;
    padding: 24px;
    position: absolute;
    z-index: 2;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px)
}

.skware-activations__card h3 {
    font: 500 1.5rem/1.1 'Space Grotesk', sans-serif;
    margin: 0 0 84px
}

.skware-activations__card p {
    color: #e2e2e8;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0
}

@media(max-width:767px) {
    .skware-activations__heading {
        left: var(--site-edge-left);
        right: var(--site-edge-right);
        top: 34px
    }

    .skware-activations__nav {
        bottom: 16px;
        flex-direction: row;
        left: 50%;
        right: auto;
        top: auto;
        transform: translateX(-50%)
    }

    .skware-activations__card {
        bottom: 68px;
        left: var(--site-edge-left);
        right: var(--site-edge-right);
        max-width: none
    }

    .skware-activations__card h3 {
        margin-bottom: 42px
    }
}

.skware-technology {
    align-items: center;
    background: #08080a;
    color: #f4f4f7;
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 448px);
    margin: 0 auto;
    max-width: var(--site-max-width);
    min-height: 100svh;
    padding: clamp(4rem, 5vw, 5rem) var(--site-gutter-right) clamp(4rem, 5vw, 5rem) var(--site-gutter-left)
}

.skware-technology__copy {
    max-width: 580px
}

.skware-technology__copy>span {
    background: transparent;
    border: 1px solid #ff7bac;
    border-radius: 99px;
    color: #ff7bac;
    display: inline-block;
    font: 700 .75rem/1 'Space Grotesk', sans-serif;
    letter-spacing: .06em;
    padding: 6px 16px
}

.skware-technology__copy h2 {
    font: 700 clamp(2rem, 3.06vw, 2.75rem)/1.2 'Space Grotesk', sans-serif;
    letter-spacing: -.02em;
    margin: 24px 0
}

.skware-technology__copy>p {
    color: #9797a3;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0
}

.skware-technology__copy ul {
    display: grid;
    gap: 16px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0
}

.skware-technology__copy li {
    align-items: center;
    color: #f4f4f7;
    display: flex;
    font: 400 .875rem/1.4 Inter, sans-serif;
    gap: 12px
}

.skware-technology__copy li svg {
    color: #c2aaf9;
    flex: none;
    height: 16px;
    width: 16px
}

.skware-technology__visual {
    aspect-ratio: 448/480;
    border-radius: 20px;
    isolation: isolate;
    justify-self: end;
    max-width: 448px;
    overflow: hidden;
    position: relative;
    width: 100%
}

.skware-technology__visual:after {
    background: rgba(8, 8, 10, .4);
    border-radius: inherit;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1
}

.skware-technology .skware-technology__visual>img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%
}

.skware-technology__annotation {
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, .09);
    border-radius: 4px;
    display: flex;
    font: 700 .6875rem/1 'Space Grotesk', sans-serif;
    gap: 6px;
    letter-spacing: .02em;
    max-width: calc(100% - 32px);
    padding: 4px 8px;
    position: absolute;
    white-space: nowrap;
    z-index: 2
}

.skware-technology__annotation i {
    background: #c2aaf9;
    border-radius: 50%;
    flex: none;
    height: 8px;
    width: 8px
}

.skware-technology__annotation--top-right {
    left: 54.5%;
    top: 38.3%
}

.skware-technology__annotation--middle-left {
    left: 33.5%;
    top: 56.9%
}

.skware-technology__annotation--bottom-right {
    left: 68.5%;
    top: 71.7%
}

.skware-technology__caption {
    bottom: 0;
    left: 0;
    padding: 24px;
    position: absolute;
    right: 0;
    z-index: 2
}

.skware-technology__caption p {
    color: #ff7bac;
    font: 700 .6875rem/1 'Space Grotesk', sans-serif;
    letter-spacing: .08em;
    margin: 0 0 12px
}

.skware-technology__caption h3 {
    font: 700 1.25rem/1.2 'Space Grotesk', sans-serif;
    letter-spacing: -.01em;
    margin: 0
}

@media(max-width:767px) {
    .skware-technology {
        display: flex;
        flex-direction: column;
        min-height: 0
    }

    .skware-technology__visual {
        justify-self: auto;
        margin-inline: auto;
        width: 100%
    }

    .skware-technology__annotation {
        font-size: 11px;
        gap: 4px;
        padding: 4px 6px
    }

    .skware-technology__annotation i {
        height: 6px;
        width: 6px
    }
}

.skware-contact {
    background: #496ed6;
    color: #08080a;
    padding: clamp(72px, 9vw, 120px) var(--site-edge-right) clamp(72px, 9vw, 120px) var(--site-edge-left)
}

.skware-contact__inner {
    display: grid;
    gap: clamp(44px, 8vw, 110px);
    grid-template-columns: minmax(220px, .8fr) minmax(0, 2fr)
}

.skware-contact header>span {
    background: #17171d;
    border-radius: 6px;
    color: #496ed6;
    display: inline-block;
    font: 700 .72rem/1 'Space Grotesk', sans-serif;
    letter-spacing: .07em;
    padding: 8px 12px
}

.skware-contact h2 {
    font: 400 var(--type-display-xl, clamp(2.5rem, 3.25vw, 3.5rem))/1.1 'Space Grotesk', sans-serif;
    letter-spacing: -.02em;
    margin: 38px 0;
    max-width: 12ch
}

.skware-contact__locations {
    display: grid;
    gap: 32px
}

.skware-contact h3 {
    font: 700 .72rem/1 'Space Grotesk', sans-serif;
    letter-spacing: .07em;
    margin: 0 0 16px
}

.skware-contact__locations p {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0
}

.skware-contact form {
    min-width: 0
}

.skware-contact__topics {
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0
}

.skware-contact__topics label {
    position: relative
}

.skware-contact__topics input {
    clip-path: inset(50%);
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px
}

.skware-contact__topics span {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    color: #f4f4f7;
    cursor: pointer;
    display: block;
    font: 600 .85rem/1.2 Inter, sans-serif;
    padding: 15px 24px
}

.skware-contact__topics input:checked+span {
    background: #ff7bac;
    border-color: #ff7bac
}

.skware-contact__fields {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 40px
}

.skware-contact__fields label {
    display: grid;
    font: 600 .85rem/1.2 Inter, sans-serif;
    gap: 9px
}

.skware-contact__fields input,
.skware-contact__fields textarea {
    background: #f4f4f7;
    border: 0;
    border-radius: 10px;
    color: #08080a;
    font: 400 1rem/1.4 Inter, sans-serif;
    padding: 16px;
    width: 100%
}

.skware-contact__fields input {
    height: 56px
}

.skware-contact__fields textarea {
    resize: vertical
}

.skware-contact__wide {
    grid-column: 1/-1
}

.skware-contact button {
    background: #c2aaf9;
    border: 0;
    border-radius: 999px;
    color: #08080a;
    cursor: pointer;
    font: 700 .9rem/1 Inter, sans-serif;
    margin-top: 34px;
    padding: 18px 36px
}

.skware-contact__status {
    font-weight: 600;
    margin: 18px 0 0
}

@media(max-width:767px) {
    .skware-contact__inner {
        display: block
    }

    .skware-contact__locations {
        grid-template-columns: 1fr 1fr;
        margin-bottom: 44px
    }

    .skware-contact__fields {
        grid-template-columns: 1fr
    }

    .skware-contact__wide {
        grid-column: auto
    }

    .skware-contact__topics {
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    .skware-contact__topics label:last-child {
        grid-column: 1/-1
    }

    .skware-contact__topics span {
        text-align: center
    }
}

.skware-statement {
    background: #05070b;
    isolation: isolate;
    min-height: min(860px, 88svh);
    overflow: hidden;
    position: relative
}

.skware-statement>video,
.skware-statement__shade {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%
}

.skware-statement>video {
    filter: blur(1.5px);
    object-fit: cover;
    opacity: .8;
    transform: scale(1.12)
}

.skware-statement__shade {
    background: radial-gradient(circle at center, rgba(10, 14, 22, .18), rgba(4, 7, 12, .76) 58%, rgba(1, 2, 4, .9)), linear-gradient(180deg, rgba(2, 5, 11, .75), rgba(4, 8, 13, .2), rgba(2, 5, 11, .8))
}

.skware-statement__trigger {
    align-items: center;
    background: transparent;
    border: 0;
    color: #f4f4f7;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    inset: 0;
    justify-content: center;
    padding: 40px;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 1
}

.skware-statement__trigger span {
    background: rgba(15, 21, 44, .55);
    border: 1px solid rgba(194, 170, 249, .6);
    border-radius: 999px;
    color: rgba(194, 170, 249, .8);
    font: 500 .65rem/1 Inter, sans-serif;
    letter-spacing: .14em;
    padding: 8px 14px
}

.skware-statement__trigger strong {
    font: 400 clamp(2.4rem, 4.5vw, 4.5rem)/1.08 'Space Grotesk', sans-serif;
    letter-spacing: -.045em;
    max-width: 740px
}

.skware-statement__trigger em {
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    color: rgba(255, 255, 255, .8);
    font: 600 .68rem/1 Inter, sans-serif;
    font-style: normal;
    letter-spacing: .2em;
    padding: 11px 18px
}

.skware-statement__dialog {
    --skware-player-controls-height: 60px;
    background: #090b10;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    max-height: 90vh;
    max-height: 90dvh;
    max-width: 90vw;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: min(1200px, 90vw, calc((90vh - var(--skware-player-controls-height)) * 16 / 9));
    width: min(1200px, 90vw, calc((90dvh - var(--skware-player-controls-height)) * 16 / 9))
}

/* showModal() promotes the dialog to the top layer, but the `position: relative`
   above cancels the UA's centering. Restore it so the dialog overlays the page
   from inside any section, including the clipped page hero. */
.skware-statement__dialog[open] {
    position: fixed;
    inset: 0;
    margin: auto
}

.skware-statement__dialog::backdrop {
    background: rgba(0, 0, 0, .8);
    backdrop-filter: blur(6px)
}

.skware-statement__dialog video {
    aspect-ratio: auto 16/9;
    background: #000;
    display: block;
    object-fit: contain;
    width: 100%
}

.skware-statement__close {
    background: rgba(0, 0, 0, .5);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 1.5rem;
    height: 44px;
    line-height: 1;
    position: absolute;
    right: 14px;
    top: 14px;
    width: 44px;
    z-index: 1
}

.skware-page-hero {
    background: #08080a;
    display: flex;
    isolation: isolate;
    min-height: 680px;
    overflow: hidden;
    position: relative
}

.skware-page-hero>img,
.skware-page-hero__shade {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%
}

.skware-page-hero>img {
    object-fit: cover
}

.skware-page-hero__shade {
    background: rgba(8, 8, 10, .5)
}

.skware-page-hero__copy {
    align-self: flex-start;
    margin: calc(var(--safe-top, 0px) + 7rem) var(--site-edge-right) 0 var(--site-edge-left);
    max-width: 800px;
    position: relative;
    z-index: 1
}

.skware-page-hero__copy>span {
    border: 1px solid #c2aaf9;
    border-radius: 4px;
    color: #c2aaf9;
    display: inline-block;
    font: 700 .7rem/1 'Space Grotesk', sans-serif;
    letter-spacing: .06em;
    margin-bottom: 18px;
    padding: 6px 9px
}

.skware-page-hero__copy h1 {
    color: #f4f4f7;
    font: 400 clamp(2.5rem, 3.25vw, 3.5rem)/1.1 'Space Grotesk', sans-serif;
    letter-spacing: -.02em;
    margin: 0;
    text-wrap: balance
}

.skware-page-hero__copy p {
    color: #d0d0d8;
    font: 400 1.1rem/1.55 Inter, sans-serif;
    margin: 24px 0 0;
    max-width: 600px
}

.skware-page-hero__cta {
    align-items: center;
    background: none;
    border: 1px solid #c2aaf9;
    border-radius: 999px;
    color: #c2aaf9;
    cursor: pointer;
    display: inline-flex;
    font: 700 .875rem/1 'Space Grotesk', sans-serif;
    gap: 8px;
    height: 40px;
    margin-top: 24px;
    padding: 0 24px;
    text-decoration: none
}

.skware-page-hero__cta:hover {
    background: #c2aaf9;
    color: #08080a
}

.skware-page-hero__cta-icon {
    align-items: center;
    display: flex;
    height: 24px;
    justify-content: center;
    width: 24px
}

.skware-page-hero__cta-icon img {
    display: block;
    height: 14px;
    width: 14px
}

.skware-page-hero__cta-icon--play img {
    height: 13px;
    width: 10.4px
}

.skware-page-hero__metrics {
    bottom: 80px;
    display: flex;
    gap: 38px;
    margin: 0;
    position: absolute;
    right: var(--site-edge-right);
    z-index: 1
}

.skware-page-hero__metrics dd {
    color: #c2aaf9;
    font: 500 1.7rem/1 'Space Grotesk', sans-serif;
    margin: 0
}

.skware-page-hero__metrics dt {
    color: #d0d0d8;
    font: 400 .7rem/1.35 Inter, sans-serif;
    margin-top: 8px
}

@media(max-width:767px) {
    .skware-page-hero {
        min-height: 680px
    }

    .skware-page-hero__copy p {
        font-size: .95rem
    }

    .skware-page-hero__metrics {
        bottom: 34px;
        left: var(--site-edge-left);
        right: var(--site-edge-right)
    }

    .skware-page-hero__metrics dd {
        font-size: 1.3rem
    }
}

@media(max-width:1023px) {
    .skware-page-hero--metrics-corner .skware-page-hero__metrics {
        bottom: 3.5rem;
        left: auto;
        right: var(--site-edge-right)
    }
}

@media(max-width:639px) {
    .skware-page-hero--mobile-short {
        min-height: var(--skware-page-hero-mobile-min-height, 640px)
    }

}

@media(min-width:640px) and (max-width:1023px) {
    .skware-page-hero {
        min-height: 760px
    }

    .skware-page-hero__copy h1 {
        font-size: 56px
    }
}

@media(min-width:1024px) {
    .skware-page-hero {
        min-height: 820px
    }

    .skware-page-hero__copy {
        bottom: 80px;
        left: var(--site-edge-left);
        margin: 0;
        position: absolute
    }

    .skware-page-hero__copy h1 {
        font-size: 56px;
        white-space: nowrap
    }

    .skware-page-hero__metrics {
        bottom: 80px;
        right: var(--site-edge-right)
    }

    .skware-page-hero--copy-top .skware-page-hero__copy {
        bottom: auto;
        top: 280px
    }

    .skware-page-hero--nowrap-off .skware-page-hero__copy h1 {
        white-space: normal
    }
}

.skware-media-grid {
    background: #08080a;
    color: #f4f4f7;
    padding: clamp(72px, 9vw, 120px) var(--site-edge-right) clamp(72px, 9vw, 120px) var(--site-edge-left)
}

.skware-media-grid header {
    margin: 0 0 56px
}

.skware-media-grid header>p {
    color: #496ed6;
    font: 500 var(--type-subheading, 1.5rem)/1.1 'Space Grotesk', sans-serif;
    margin: 0
}

.skware-media-grid header h2 {
    font: 400 var(--type-heading, 2.375rem)/1.1 Inter, sans-serif;
    letter-spacing: -.02em;
    margin: 24px 0 0;
    max-width: 700px
}

.skware-media-grid header span {
    color: #9797a3;
    display: block;
    font: 400 1rem/1.55 Inter, sans-serif;
    margin-top: 24px;
    max-width: 520px
}

.skware-media-grid__items {
    display: grid;
    gap: 24px
}

.skware-media-grid__items article {
    background: #121319;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 16px;
    display: flex;
    isolation: isolate;
    min-height: 360px;
    overflow: hidden;
    position: relative
}

/* Direct children only: as a descendant selector this also matched the drone
   icon nested in .skware-media-grid__icon, absolutely positioning it into the
   card corner and leaving its 28px box empty. Canonical uses .format-card>img. */
.skware-media-grid__items article>img,
.skware-media-grid__items article>video {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%
}

.skware-media-grid__shade {
    inset: 0;
    position: absolute
}

.skware-media-grid--format .skware-media-grid__shade {
    background: rgba(8, 8, 10, .4)
}

.skware-media-grid--moment .skware-media-grid__shade {
    background: linear-gradient(180deg, transparent 35%, rgba(8, 8, 10, .78))
}

.skware-media-grid__copy {
    align-self: flex-end;
    padding: 32px;
    position: relative;
    z-index: 1
}

.skware-media-grid--format .skware-media-grid__copy {
    display: flex;
    /* The card is a row flex container, so without flex:1 this block shrinks to
       its content and the top row's space-between pulls the icon into the
       middle of the card instead of its right edge. */
    flex: 1;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
    min-height: 100%;
    padding: 32px
}

.skware-media-grid__top {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between
}

.skware-media-grid__top>span:first-child {
    background: rgba(255, 255, 255, .1);
    border-radius: 4px;
    color: #f4f4f7;
    display: inline-block;
    /* No letter-spacing: the source sets only font 700 11px Space Grotesk. */
    font: 700 11px/1 'Space Grotesk', sans-serif;
    padding: 4px 8px
}

.skware-media-grid__icon {
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 6px;
    display: flex;
    height: 28px;
    justify-content: center;
    width: 28px
}

.skware-media-grid__icon img {
    display: block;
    height: 14px;
    width: 14px
}

.skware-media-grid--format .skware-media-grid__copy h3 {
    font: 700 24px/1.2 'Space Grotesk', sans-serif;
    margin: 0
}

.skware-media-grid--moment .skware-media-grid__copy {
    padding: 24px
}

.skware-media-grid--moment .skware-media-grid__copy p {
    background: transparent;
    color: rgba(244, 244, 247, .6);
    font: 400 11px/1 'Space Grotesk', sans-serif;
    margin: 0 0 8px;
    padding: 0
}

.skware-media-grid--moment .skware-media-grid__copy h3 {
    color: #f4f4f7;
    font: 700 20px/1.2 'Space Grotesk', sans-serif;
    margin: 0
}

.skware-media-grid__items a {
    border-radius: 16px;
    inset: 0;
    position: absolute;
    z-index: 2
}

.skware-media-grid__items a:focus-visible {
    outline: 2px solid #c2aaf9;
    outline-offset: 4px
}

.skware-media-grid--format .skware-media-grid__items,
.skware-media-grid--moment .skware-media-grid__items {
    grid-template-columns: minmax(0, 1fr)
}

.skware-media-grid--proof .skware-media-grid__items {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.skware-media-grid--proof .skware-media-grid__items article {
    min-height: 280px
}

.skware-media-grid--proof .skware-media-grid__shade {
    background: linear-gradient(180deg, rgba(8, 8, 10, .08), rgba(8, 8, 10, .75))
}

.skware-media-grid--proof .skware-media-grid__copy p {
    background: rgba(255, 255, 255, .1);
    border-radius: 4px;
    color: #f4f4f7;
    display: inline-block;
    font: 700 .65rem/1 'Space Grotesk', sans-serif;
    letter-spacing: .06em;
    margin: 0 0 12px;
    padding: 5px 8px
}

.skware-media-grid--proof .skware-media-grid__copy h3 {
    font: 600 1.55rem/1.2 'Space Grotesk', sans-serif;
    margin: 0
}

.skware-media-grid--proof .skware-media-grid__copy span {
    color: #d0d0d8;
    display: block;
    font-size: .9rem;
    line-height: 1.5;
    margin-top: 12px
}

@media(min-width:768px) {

    .skware-media-grid--format .skware-media-grid__items,
    .skware-media-grid--moment .skware-media-grid__items {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .skware-media-grid--proof .skware-media-grid__items {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(min-width:1280px) {

    .skware-media-grid--format .skware-media-grid__items,
    .skware-media-grid--moment .skware-media-grid__items {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .skware-media-grid--format .skware-media-grid__items article {
        height: 520px
    }

    .skware-media-grid--moment .skware-media-grid__items article {
        height: 480px
    }
}

.skware-loader {
    background: #08080a;
    clip-path: inset(0);
    color: #f4f4f7;
    display: grid;
    inset: 0;
    overflow: hidden;
    place-items: center;
    position: fixed;
    transition: clip-path 560ms cubic-bezier(.7, 0, .3, 1), opacity 140ms linear 380ms;
    z-index: 9999
}

.skware-loader:before {
    animation: skware-ambient-in 800ms 160ms cubic-bezier(.16, 1, .3, 1) forwards;
    background: radial-gradient(circle at 76% 50%, rgba(73, 110, 214, .09), transparent 30%), #08080a;
    content: "";
    inset: 0;
    opacity: 0;
    position: absolute
}

.skware-loader[data-state=exiting] {
    clip-path: inset(0 0 0 100%);
    opacity: .98;
    pointer-events: none
}

.skware-loader__field {
    position: relative;
    transition: opacity 240ms ease-out, transform 420ms cubic-bezier(.7, 0, .3, 1);
    width: min(72vw, 600px)
}

.skware-loader[data-state=exiting] .skware-loader__field {
    opacity: 0;
    transform: translateX(12px)
}

.skware-loader__brand {
    aspect-ratio: 2113/522;
    position: relative;
    width: 100%
}

.skware-loader__wordmark {
    inset: 0 24% 0 0;
    overflow: hidden;
    position: absolute
}

.skware-loader__wordmark img {
    display: block;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: left center;
    width: calc(100% / .76)
}

.skware-loader__wordmark--ghost {
    opacity: .06
}

.skware-loader__wordmark--fill {
    animation: skware-wordmark-reveal 1100ms 140ms cubic-bezier(.16, 1, .3, 1) forwards;
    clip-path: inset(0 100% 0 0);
    filter: blur(3px)
}

.skware-loader__dots {
    height: 100%;
    overflow: visible;
    position: absolute;
    right: 0;
    top: 0;
    width: 23.4%
}

.skware-loader__dots circle {
    animation: skware-dot-build 800ms calc(240ms + var(--dot-delay)) cubic-bezier(.16, 1, .3, 1) forwards;
    fill: #f4f4f7;
    opacity: 0;
    transform: translate3d(-10px, 0, 0) scale(.55);
    transform-box: fill-box;
    transform-origin: center
}

@keyframes skware-ambient-in {
    to {
        opacity: 1
    }
}

@keyframes skware-wordmark-reveal {
    to {
        clip-path: inset(0);
        filter: blur(0)
    }
}

@keyframes skware-dot-build {
    0% {
        fill: #c2aaf9;
        opacity: 0;
        transform: translate3d(-10px, 0, 0) scale(.55)
    }

    68% {
        fill: #c2aaf9;
        opacity: .92
    }

    100% {
        fill: #f4f4f7;
        opacity: 1;
        transform: translateZ(0) scale(1)
    }
}

@media(max-width:640px) {
    .skware-loader__field {
        width: min(80vw, 400px)
    }
}

@media(prefers-reduced-motion:reduce) {
    .skware-loader {
        transition: opacity 80ms linear
    }

    .skware-loader[data-state=exiting] {
        clip-path: none;
        opacity: 0
    }

    .skware-loader:before,
    .skware-loader__wordmark--fill,
    .skware-loader__dots circle {
        animation: none
    }

    .skware-loader__wordmark--fill {
        clip-path: none
    }

    .skware-loader__dots circle {
        opacity: 1;
        transform: none
    }
}

.home>.skware-shell>.skware-header {
    display: none
}

.skware-hero-scroll {
    height: 260svh;
    position: relative
}

.skware-hero {
    height: 100svh;
    min-height: 34rem;
    position: sticky;
    top: 0
}

/* Must match .skware-header in the theme stylesheet: both render the canonical
   site header. This copy exists only because the hero animates its header
   alongside the scroll timeline. */
.skware-hero__header {
    align-items: center;
    display: flex;
    height: calc(var(--skware-header-height, 72px) + var(--safe-top, 0px));
    justify-content: space-between;
    padding-top: var(--safe-top, 0px)
}

.skware-hero__header a {
    color: #f4f4f7;
    font: 700 .75rem/1.2 'Space Grotesk', sans-serif;
    letter-spacing: .06em;
    text-decoration: none;
    text-transform: uppercase
}

.skware-hero__header a:hover {
    color: #c2aaf9
}

.skware-hero__header [data-skware-hero-utility] {
    color: #496ed6
}

.skware-hero__actions {
    align-items: center;
    display: flex;
    gap: 1rem
}

.skware-hero__header [data-skware-hero-brand] {
    display: inline-flex
}

.skware-hero__header [data-skware-hero-brand] img {
    display: block;
    height: 24px;
    width: auto
}

.skware-hero__header nav {
    display: flex;
    gap: 32px
}

.skware-hero__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 var(--site-edge-right) 0 var(--site-edge-left);
    position: relative
}

.skware-hero__intro {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 24px;
    left: var(--site-edge-left);
    position: absolute;
    top: clamp(120px, 20vh, 180px)
}

.skware-hero__intro h1 {
    max-width: 560px
}

.skware-hero__metrics {
    right: var(--site-edge-right);
    top: clamp(240px, 42vh, 420px)
}

.skware-hero__description {
    bottom: clamp(48px, 8vh, 88px);
    left: var(--site-edge-left);
    position: absolute;
    max-width: 360px;
    color: #b8b8c2;
    font: 500 var(--type-subheading, 1.5rem)/1.1 Inter, sans-serif
}

.skware-hero__cue {
    align-items: center;
    bottom: clamp(48px, 8vh, 88px);
    color: #496ed6;
    display: none;
    font: 700 .7rem/1 'Space Grotesk', sans-serif;
    gap: 12px;
    position: absolute;
    right: var(--site-edge-right)
}

@media(min-width:640px) {
    .skware-hero__cue {
        display: flex
    }
}

.skware-hero__cue-pill {
    align-items: flex-start;
    border: 2px solid #496ed6;
    border-radius: 999px;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    padding: 4px;
    width: 20px
}

.skware-hero__cue-dot {
    background: #496ed6;
    border-radius: 50%;
    height: 6px;
    margin-top: 2px;
    width: 6px;
    animation: skware-hero-cue-dot 1.7s cubic-bezier(.16, 1, .3, 1) infinite
}

@media (prefers-reduced-motion: reduce) {
    .skware-hero__cue-dot {
        animation: none
    }
}

@keyframes skware-hero-cue-dot {
    0%, 100% { opacity: .35; transform: translateY(0) }
    45% { opacity: 1; transform: translateY(.55rem) }
}

.skware-hero__final {
    align-items: center;
    display: flex;
    flex-direction: column;
    inset: 0;
    justify-content: center;
    opacity: 0;
    padding: 20px;
    pointer-events: none;
    position: absolute;
    text-align: center;
    z-index: 4
}

.skware-hero__final span {
    border: 1px solid #496ed6;
    border-radius: 4px;
    color: #6f8ee7;
    font-size: .72rem;
    padding: 8px 14px
}

.skware-hero__final h2 {
    font: 400 var(--type-display-lg, clamp(2.125rem, 2.8vw, 3rem))/1.15 'Space Grotesk', sans-serif;
    margin: 20px 0;
    max-width: 760px
}

.skware-hero__final p {
    color: #b8b8c2;
    max-width: 720px
}

@media(min-width:640px) {
    .skware-hero__header [data-skware-hero-brand] img {
        height: 30px
    }
}

@media(min-width:1024px) {
    .skware-hero-scroll {
        height: 300vh
    }
}

@media(max-width:1023px) {
    .skware-hero__intro {
        top: clamp(2rem, 8svh, 4rem)
    }

    .skware-hero__metrics {
        bottom: 24px;
        left: var(--site-edge-left);
        right: var(--site-edge-right);
        top: auto
    }

    .skware-hero__description {
        bottom: max(4rem, calc(var(--safe-bottom, 0px) + 3rem));
        font: 500 clamp(1rem, 4.4vw, 1.25rem)/1.3 Inter, sans-serif
    }

    .skware-hero__cue {
        bottom: max(2rem, var(--safe-bottom, 0px))
    }
}

@media(max-width:767px) {
    .skware-hero__header nav {
        display: none
    }

    .skware-hero__intro {
        left: var(--site-edge-left);
        right: var(--site-edge-right)
    }
}

@media(max-width:639px) {
    .skware-hero__intro {
        gap: 20px;
        top: clamp(2rem, 6svh, 3.5rem)
    }

    .skware-hero__description {
        bottom: max(7rem, calc(var(--safe-bottom, 0px) + 6rem));
        max-width: 30ch;
        font-size: var(--type-body, 1rem);
        line-height: 1.45
    }
}

.skware-activations.is-gsap-stack {
    height: 100svh;
    overflow: hidden
}

.skware-activations.is-gsap-stack .skware-activations__sticky {
    height: 100svh;
    position: relative
}

.skware-activations.is-gsap-stack .skware-activations__panel {
    opacity: 1;
    transition: none
}

.skware-activations.is-gsap-stack .skware-activations__panel:not(.is-active) {
    pointer-events: none
}

.skware-mobile-nav {
    display: none;
    position: relative
}

.skware-mobile-nav summary {
    align-items: center;
    background: rgba(18, 19, 25, .8);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    height: 44px;
    justify-content: center;
    list-style: none;
    width: 44px
}

.skware-mobile-nav summary::-webkit-details-marker {
    display: none
}

.skware-mobile-nav nav {
    background: rgba(18, 19, 25, .95);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    display: none;
    flex-direction: column;
    /* Hangs off the summary, so it has to clear the same header height and land
       on the site gutter instead of flush against the screen edge. */
    inset: calc(var(--skware-header-height, 72px) + var(--safe-top, 0px) + 8px) var(--site-edge-right) auto auto;
    max-height: calc(100svh - var(--skware-header-height, 72px) - var(--safe-top, 0px) - var(--safe-bottom, 0px) - 24px);
    min-width: 260px;
    overflow: hidden auto;
    padding: 8px;
    position: fixed;
    z-index: 60
}

.skware-mobile-nav[open] nav {
    animation: skware-mobile-panel 260ms cubic-bezier(.16, 1, .3, 1) both;
    display: flex
}

.skware-mobile-nav nav a {
    border-radius: 10px;
    color: #f4f4f7;
    font: 600 .9rem/1 Inter, sans-serif;
    padding: 18px;
    text-decoration: none;
    /* Set here rather than inherited: the hero header uppercases its links, the
       theme header does not, and the hamburger renders inside both. */
    text-transform: uppercase
}

.skware-mobile-nav nav .skware-menu {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    width: 100%
}

.skware-mobile-nav nav .skware-menu>li {
    width: 100%
}

.skware-mobile-nav nav .skware-menu>li>a {
    width: 100%
}

.skware-mobile-nav__backdrop {
    background: rgba(8, 8, 10, .66);
    border: 0;
    display: none;
    inset: 0;
    position: fixed;
    z-index: 50
}

.skware-mobile-nav[open] .skware-mobile-nav__backdrop {
    animation: skware-mobile-backdrop 220ms ease-out both;
    display: block
}

@keyframes skware-mobile-panel {
    from {
        filter: blur(6px);
        opacity: 0;
        transform: translateY(-.75rem) scale(.985)
    }

    to {
        filter: blur(0);
        opacity: 1;
        transform: none
    }
}

@keyframes skware-mobile-backdrop {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@media(max-width:767px) {
    .skware-mobile-nav {
        display: block
    }

    .skware-hero__actions>[data-skware-hero-utility] {
        display: none
    }
}

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

    .skware-mobile-nav[open] nav,
    .skware-mobile-nav[open] .skware-mobile-nav__backdrop {
        animation: none
    }
}

.skware-solutions__counter {
    color: #9797a3;
    font: 600 .78rem/1 'Space Grotesk', sans-serif;
    font-variant-numeric: tabular-nums;
    margin: 0 0 0 auto
}

.skware-solutions__counter span:first-child {
    color: #f4f4f7
}

.skware-solutions__fade {
    height: 160px;
    inset-inline: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1
}

.skware-solutions__fade--top {
    background: linear-gradient(to top, #08080a, transparent);
    top: 0;
    transform: translateY(-100%)
}

.skware-solutions__fade--bottom {
    background: linear-gradient(to bottom, #08080a, transparent);
    bottom: 0;
    transform: translateY(100%)
}

.skware-player-controls {
    align-items: center;
    background: rgba(9, 11, 16, .94);
    display: flex;
    gap: 10px;
    min-height: var(--skware-player-controls-height, 60px);
    padding: 12px
}

.skware-player-controls button,
.skware-player-controls select {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    color: #f4f4f7;
    cursor: pointer;
    font: 600 .7rem/1 Inter, sans-serif;
    padding: 9px 12px
}

.skware-player-controls input[type=range] {
    accent-color: #c2aaf9;
    min-width: 0
}

.skware-player-controls [data-skware-player-seek] {
    flex: 1
}

@media(max-width:640px) {
    .skware-statement__dialog {
        --skware-player-controls-height: 132px
    }

    .skware-player-controls {
        flex-wrap: wrap
    }

    .skware-player-controls [data-skware-player-seek] {
        flex-basis: 100%;
        order: -1
    }
}

.skware-case-studies {
    background: #08080a;
    color: #f4f4f7;
    padding: 0 var(--site-edge-right) clamp(96px, 10vw, 160px) var(--site-edge-left)
}

.skware-case-row {
    align-items: center;
    display: grid;
    gap: clamp(48px, 5vw, 80px);
    min-width: 0;
    padding-block: clamp(64px, 6vw, 80px)
}

.skware-case-media {
    background: #111219;
    border: 1px solid #262833;
    border-radius: 20px;
    margin: 0;
    overflow: hidden;
    position: relative;
    width: 100%
}

.skware-case-media>img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%
}

.skware-case-media--skyline {
    min-height: 560px
}

.skware-case-media--tech {
    aspect-ratio: 1;
    min-height: 0
}

.skware-case-media--projection {
    min-height: 500px
}

.skware-campaign-banner,
.skware-projection-banner {
    border: 1px solid #2b2d37;
    color: #f4f4f7;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: absolute;
    z-index: 1
}

.skware-campaign-banner {
    background: rgba(12, 12, 16, .94);
    border-radius: 16px;
    bottom: 32px;
    left: 24px;
    padding: 24px;
    right: 24px
}

.skware-projection-banner {
    background: rgba(12, 12, 16, .94);
    border-radius: 12px;
    left: 24px;
    padding: 24px;
    right: 24px;
    top: 24px
}

.skware-campaign-banner span,
.skware-projection-banner span {
    font: 700 12px/1.2 'Space Grotesk', sans-serif
}

.skware-campaign-banner span {
    color: #c2aaf9
}

.skware-projection-banner span {
    color: #496ed6
}

.skware-campaign-banner strong,
.skware-projection-banner strong {
    font: 600 clamp(1rem, 1.5vw, 1.25rem)/1.3 'Space Grotesk', sans-serif
}

.skware-case-copy {
    max-width: 575px
}

.skware-case-kicker {
    align-items: center;
    color: #496ed6;
    display: flex;
    font: 700 12px/1 'Space Grotesk', sans-serif;
    gap: 8px;
    margin: 0 0 44px
}

.skware-case-kicker img {
    flex: none;
    height: 12px;
    width: 12px
}

.skware-case-copy h2 {
    color: #f4f4f7;
    font: 400 clamp(2rem, 3.25vw, 2.4rem)/1.1 'Space Grotesk', sans-serif;
    letter-spacing: -.02em;
    margin: 0
}

.skware-case-body {
    color: #9797a3;
    font: 400 16px/1.6 Inter, sans-serif;
    margin: 24px 0 0
}

.skware-landmark-grid {
    display: grid;
    gap: 12px 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 38px 0 0;
    padding: 0
}

.skware-landmark-grid li {
    align-items: center;
    color: #f4f4f7;
    display: flex;
    font: 700 14px/1.2 'Space Grotesk', sans-serif;
    gap: 10px
}

.skware-landmark-grid li img {
    flex: none;
    height: 6px;
    width: 6px
}

/* The solution detail page also uses `.skware-metric-card` for full-height
   image cards. Reset its sizing/alignment here so this overlay remains a
   content-sized pill, matching the original scoped component. */
.skware-case-media .skware-metric-card {
    align-items: flex-start;
    background: rgba(38, 38, 45, .92);
    border: 1px solid #464650;
    border-radius: 14px;
    color: #f4f4f7;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: auto;
    left: 28px;
    min-height: 0;
    overflow: visible;
    padding: 20px;
    position: absolute;
    top: 28px;
    z-index: 1
}

.skware-case-media .skware-metric-card span {
    align-items: center;
    display: flex;
    font: 700 11px/1.2 'Space Grotesk', sans-serif;
    gap: 6px
}

.skware-case-media .skware-metric-card span img {
    flex: none;
    height: 8px;
    width: 8px
}

.skware-case-media .skware-metric-card strong {
    font: 600 24px/1 'Space Grotesk', sans-serif
}

.skware-media-caption {
    bottom: 28px;
    color: #f4f4f7;
    display: flex;
    flex-direction: column;
    gap: 10px;
    left: 28px;
    position: absolute;
    right: 28px;
    z-index: 1
}

.skware-media-caption strong {
    font: 700 clamp(1.75rem, 3vw, 2.5rem)/1.1 'Space Grotesk', sans-serif;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-wrap: balance
}

.skware-media-caption span {
    color: #d0d0d8;
    font: 400 15px/1.45 Inter, sans-serif;
    max-width: 440px
}

.skware-premium-label {
    color: #c2aaf9;
    font: 700 12px/1.2 'Space Grotesk', sans-serif;
    margin: 42px 0 18px
}

.skware-premium-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.skware-premium-tags span {
    background: #1e1e26;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 8px;
    color: #f4f4f7;
    font: 500 13px/1.2 Inter, sans-serif;
    padding: 8px 16px
}

@media(min-width:1024px) {
    .skware-case-row {
        grid-template-columns: minmax(0, 656px) minmax(0, 560px)
    }

    .skware-case-row--tech {
        grid-template-columns: minmax(0, 575px) minmax(0, 641px);
        min-height: 810px
    }

    .skware-case-row--projection {
        grid-template-columns: minmax(0, 641px) minmax(0, 575px);
        min-height: 780px
    }

    .skware-case-media--skyline {
        height: 560px
    }

    .skware-case-media--tech {
        height: 650px
    }

    .skware-case-media--projection {
        height: 500px
    }
}

@media(max-width:1023px) {
    .skware-case-row--tech .skware-case-copy {
        order: 2
    }

    .skware-case-row--tech .skware-case-media {
        order: 1
    }

    .skware-landmark-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:639px) {
    .skware-case-row {
        padding-block: 48px
    }

    .skware-case-media {
        border-radius: 16px
    }

    .skware-case-media--skyline,
    .skware-case-media--tech {
        min-height: 0
    }

    .skware-case-media--projection {
        min-height: 420px
    }

    .skware-media-caption {
        bottom: 20px;
        left: 20px;
        right: 20px
    }

    .skware-media-caption strong {
        font-size: clamp(1.75rem, 8vw, 2.25rem)
    }

    .skware-campaign-banner,
    .skware-projection-banner {
        left: 16px;
        padding: 18px;
        right: 16px
    }

    .skware-campaign-banner {
        bottom: 16px
    }

    .skware-projection-banner {
        top: 16px
    }

    .skware-landmark-grid {
        grid-template-columns: 1fr
    }

    .skware-case-kicker {
        margin-bottom: 28px
    }
}

.skware-stories-intro {
    background: #08080a;
    color: #f4f4f7;
    padding: 0 var(--site-edge-right) 0 var(--site-edge-left)
}

.skware-stories-intro header {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    max-width: 1300px;
    min-height: clamp(42rem, 78svh, 64rem);
    text-align: center
}

.skware-stories-intro h2 {
    color: #f4f4f7;
    font: 400 clamp(2.5rem, 3.25vw, 3.5rem)/1.1 'Space Grotesk', sans-serif;
    letter-spacing: -.02em;
    margin: 0;
    max-width: 22ch;
    text-wrap: balance
}

.skware-stories-intro p {
    color: #9797a3;
    font: 400 clamp(1rem, 1.05vw, 1.125rem)/1.5 Inter, sans-serif;
    margin: 40px 0 0;
    max-width: 38ch
}

@media(max-width:639px) {
    .skware-stories-intro header {
        min-height: 75svh
    }

    .skware-stories-intro p {
        margin-top: 24px
    }
}

.skware-mission {
    background: #08080a;
    color: #f4f4f7;
    display: flex;
    justify-content: space-between;
    min-height: 620px;
    padding: var(--section-space) var(--site-gutter-right) var(--section-space) var(--site-gutter-left);
    position: relative
}

.skware-mission__copy {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 680px;
    position: relative;
    z-index: 1
}

.skware-mission__eyebrow {
    color: #496ed6;
    font: 500 var(--type-subheading, 1.5rem)/1.1 'Space Grotesk', sans-serif;
    margin: 0
}

.skware-mission__copy h2 {
    color: #f4f4f7;
    font: 400 var(--type-heading, 2.375rem)/1.1 Inter, sans-serif;
    letter-spacing: -.02em;
    margin: 0;
    text-wrap: balance
}

.skware-mission__copy p:last-child {
    color: #9797a3;
    font: 400 var(--type-body, 1rem)/1.6 Inter, sans-serif;
    margin: 0;
    max-width: 580px
}

img.skware-mission__media {
    border-radius: 16px;
    bottom: 4rem;
    height: 220px;
    object-fit: cover;
    position: absolute;
    right: max(clamp(1.25rem, 4vw, 5rem), 8vw);
    width: min(34vw, 440px)
}

@media(min-width:640px) {
    .skware-mission {
        min-height: 710px
    }

    img.skware-mission__media {
        height: 320px
    }
}

.skware-proof {
    background: #08080a;
    color: #f4f4f7;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    justify-content: space-between;
    padding: var(--section-space) var(--site-gutter-right) var(--section-space) var(--site-gutter-left)
}

.skware-proof__header {
    border-top: 1px solid #9797a3;
    display: grid;
    gap: 2rem;
    padding-top: 3rem
}

.skware-proof__header h2 {
    color: #f4f4f7;
    font: 400 var(--type-heading, 2.375rem)/1.1 Inter, sans-serif;
    letter-spacing: -.02em;
    margin: 0;
    max-width: 600px;
    text-wrap: balance
}

.skware-proof__header p {
    color: #9797a3;
    font: 400 var(--type-body, 1rem)/1.6 Inter, sans-serif;
    margin: 0
}

.skware-proof__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr
}

.skware-proof__grid img {
    border-radius: 12px;
    height: 14rem;
    object-fit: cover;
    width: 100%
}

@media(min-width:640px) {
    .skware-proof {
        min-height: 840px
    }

    .skware-proof__header {
        align-items: end;
        grid-template-columns: 1fr 480px
    }

    .skware-proof__grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width:1024px) {
    .skware-proof__grid {
        grid-template-columns: repeat(4, 1fr)
    }

    .skware-proof__grid img {
        height: 18rem
    }
}

.skware-principles {
    background: #2e3192;
    color: #f4f4f7;
    display: grid;
    gap: 3rem;
    grid-template-columns: 1fr;
    padding: var(--section-space) var(--site-gutter-right) var(--section-space) var(--site-gutter-left)
}

.skware-principles__intro h2 {
    color: #f4f4f7;
    font: 400 var(--type-heading, 2.375rem)/1.1 Inter, sans-serif;
    letter-spacing: -.02em;
    margin: 0
}

.skware-principles__intro p {
    color: rgba(229, 228, 255, .7);
    font: 400 var(--type-body, 1rem)/1.6 Inter, sans-serif;
    margin: 1.5rem 0 0
}

.skware-principles__list {
    width: 100%
}

.skware-principles__item {
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    padding: 1.25rem 0
}

.skware-principles__item summary {
    align-items: center;
    color: #f4f4f7;
    cursor: pointer;
    display: flex;
    font: 700 18px/1 'Space Grotesk', sans-serif;
    gap: 1rem;
    justify-content: space-between;
    list-style: none
}

.skware-principles__item summary::-webkit-details-marker {
    display: none
}

.skware-principles__label {
    align-items: center;
    display: flex;
    gap: 1rem
}

.skware-principles__label img {
    flex: none;
    height: 24px;
    width: 24px
}

.skware-principles__indicator {
    background: #111116;
    border-radius: 999px;
    color: #c2aaf9;
    display: grid;
    font: 500 1rem/1 'Space Grotesk', sans-serif;
    height: 32px;
    place-items: center;
    width: 32px
}

.skware-principles__item[open] .skware-principles__indicator {
    background: #c2aaf9;
    color: #111116
}

.skware-principles__item p {
    color: rgba(229, 228, 255, .7);
    font: 400 var(--type-body, 1rem)/1.6 Inter, sans-serif;
    margin: 1rem 0 0 2.5rem;
    max-width: 620px
}

@media(min-width:1024px) {
    .skware-principles {
        grid-template-columns: 400px 1fr;
        justify-content: space-between
    }

    .skware-principles__list {
        justify-self: end;
        max-width: 720px
    }
}

.skware-founders {
    background: #08080a;
    color: #f4f4f7;
    padding: var(--section-space) var(--site-gutter-right) var(--section-space) var(--site-gutter-left)
}

.skware-founders__header {
    margin-bottom: 3rem
}

.skware-founders__header p {
    color: #496ed6;
    font: 500 var(--type-subheading, 1.5rem)/1.1 'Space Grotesk', sans-serif;
    margin: 0
}

.skware-founders__header h2 {
    color: #f4f4f7;
    font: 400 var(--type-heading, 2.375rem)/1.1 Inter, sans-serif;
    letter-spacing: -.02em;
    margin: 1.5rem 0 0;
    max-width: 440px
}

.skware-founders__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr
}

.skware-founders__card {
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 420px;
    overflow: hidden;
    padding: 2rem;
    position: relative
}

.skware-founders__card:after {
    background: linear-gradient(180deg, transparent 45%, rgba(8, 8, 10, .8));
    content: "";
    inset: 0;
    position: absolute
}

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

img.skware-founders__mark {
    height: 45px;
    margin-bottom: auto;
    object-fit: contain;
    position: relative;
    width: 45px;
    z-index: 1
}

.skware-founders__meta {
    position: relative;
    z-index: 1
}

.skware-founders__meta h3 {
    color: #f4f4f7;
    font: 700 24px/1 'Space Grotesk', sans-serif;
    margin: 0
}

.skware-founders__meta p {
    color: #c2aaf9;
    font: 600 14px/1.2 Inter, sans-serif;
    margin: .25rem 0 0
}

.skware-founders__note {
    background: #c2aaf9;
    border-radius: 24px;
    color: #08080a;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: flex-end;
    min-height: 420px;
    padding: 2rem
}

.skware-founders__note p {
    margin: 0
}

.skware-founders__note-body {
    font: 400 var(--type-body, 1rem)/1.6 Inter, sans-serif
}

.skware-founders__note-quote {
    font: 500 18px/1.5 'Space Grotesk', sans-serif
}

@media(min-width:1024px) {
    .skware-founders__grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.skware-partners {
    background: #08080a;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 4rem var(--site-gutter-right) 4rem var(--site-gutter-left);
    text-align: center
}

.skware-partners__heading {
    border-top: 1px solid #9797a3;
    padding-top: 4rem
}

.skware-partners__heading h2 {
    color: #f4f4f7;
    font: 400 var(--type-heading, 2.375rem)/1.1 Inter, sans-serif;
    letter-spacing: -.02em;
    margin: 0 auto;
    max-width: 800px;
    text-align: center;
    text-wrap: balance
}

.skware-partners__row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
    justify-content: center;
    margin-top: 3rem;
    min-height: 60px
}

.skware-partners__row span {
    color: #9797a3;
    font: 700 20px/1 'Space Grotesk', sans-serif
}

@media(min-width:640px) {
    .skware-partners {
        padding-bottom: 5rem;
        padding-top: 5rem
    }

    .skware-partners__heading {
        padding-top: 6rem
    }
}

.skware-careers {
    background: #08080a;
    padding: 4rem var(--site-gutter-right) clamp(5rem, 10vw, 9.375rem) var(--site-gutter-left)
}

.skware-careers__card {
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 24px;
    display: grid;
    grid-template-columns: 1fr;
    min-height: 220px;
    overflow: hidden
}

.skware-careers__panel {
    padding: 2rem
}

.skware-careers__panel:first-child {
    align-items: flex-start;
    background: #1e1e26;
    display: flex
}

.skware-careers__panel:last-child {
    align-items: flex-start;
    background: #17171d;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center
}

.skware-careers__panel h2 {
    color: #f4f4f7;
    font: 400 var(--type-heading, 2.375rem)/1.1 Inter, sans-serif;
    letter-spacing: -.02em;
    margin: 0;
    max-width: 510px
}

.skware-careers__panel p {
    color: #9797a3;
    font: 400 var(--type-body, 1rem)/1.6 Inter, sans-serif;
    margin: 0;
    max-width: 500px
}

.skware-careers__cta {
    align-items: center;
    border: 1px solid #c2aaf9;
    border-radius: 999px;
    color: #c2aaf9;
    display: inline-flex;
    /* .type-ui sets no weight in the source, so this inherits the 400 body
       weight; it was rendering bold here. */
    font: 400 var(--type-ui, .875rem)/1.2 'Space Grotesk', sans-serif;
    gap: .5rem;
    padding: .5rem 1.5rem;
    text-decoration: none
}

.skware-careers__cta img {
    height: 20px;
    width: 20px
}

.skware-careers__cta:hover {
    background: #c2aaf9;
    color: #08080a
}

@media(min-width:640px) {
    .skware-careers {
        padding-top: 5rem
    }

    .skware-careers__panel {
        padding: 3rem
    }
}

@media(min-width:768px) {
    .skware-careers__card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 248px
    }
}

.skware-glass-card {
    background: rgba(18, 19, 25, .76);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    position: absolute;
    z-index: 2
}

.skware-tech-hero {
    height: 820px;
    overflow: hidden;
    position: relative
}

.skware-tech-hero>img,
.skware-tech-hero__shade {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%
}

.skware-tech-hero>img {
    object-fit: cover;
    /* Same 16:9 image as the solutions hero in an 820px-tall box: centring
       crops the illuminated city off the bottom above ~1435px wide. */
    object-position: center bottom
}

.skware-tech-hero__shade {
    background: linear-gradient(90deg, rgba(8, 8, 10, .78), rgba(8, 8, 10, .12) 58%, rgba(8, 8, 10, .28)), linear-gradient(0deg, rgba(8, 8, 10, .72), transparent 40%)
}

.skware-tech-hero__copy {
    bottom: 90px;
    /* The technology hero uses its own gutter, wider than --site-edge-*. */
    left: max(5vw, 80px);
    max-width: 660px;
    position: absolute;
    z-index: 1
}

.skware-tech-hero__copy h1 {
    color: #f4f4f7;
    font: 400 clamp(2.5rem, 4.25vw, 64px)/1.04 'Space Grotesk', sans-serif;
    letter-spacing: -.03em;
    margin: 0
}

.skware-tech-hero__copy p {
    color: #d3d3dc;
    font: 400 18px/1.55 Inter, sans-serif;
    margin: 24px 0 0;
    max-width: 650px
}

.skware-tech-hero__specs {
    bottom: 80px;
    display: flex;
    gap: 36px;
    margin: 0;
    position: absolute;
    right: max(5vw, 80px);
    z-index: 1
}

.skware-tech-hero__specs div {
    min-width: 120px
}

.skware-tech-hero__specs dt {
    color: #c2aaf9;
    font: 500 28px/1 'Space Grotesk', sans-serif;
    margin: 0
}

.skware-tech-hero__specs dd {
    color: #d3d3dc;
    font: 400 11px/1.35 Inter, sans-serif;
    margin: 8px 0 0
}

@media(max-width:1050px) {
    .skware-tech-hero__copy {
        bottom: 190px
    }

    .skware-tech-hero__specs {
        bottom: 42px;
        left: max(5vw, 40px);
        right: auto
    }
}

@media(max-width:700px) {
    .skware-tech-hero {
        height: 760px
    }

    .skware-tech-hero__copy {
        bottom: 235px;
        left: var(--site-edge-left);
        right: var(--site-edge-right)
    }

    .skware-tech-hero__copy p {
        font-size: 15px
    }

    .skware-tech-hero__specs {
        bottom: 34px;
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(3, 1fr);
        left: var(--site-edge-left);
        right: var(--site-edge-right)
    }

    /* The 120px floor from the desktop flex row forces 388px of tracks into a
       335px grid, so the third spec was clipped by the hero's overflow. */
    .skware-tech-hero__specs div {
        min-width: 0
    }

    .skware-tech-hero__specs dt {
        font-size: 20px
    }

    .skware-tech-hero__specs dd {
        font-size: 12px
    }
}

.skware-tech-anatomy {
    padding-block: 0;
    padding-inline: 0;
    position: relative
}

/* Title sits over the image rather than above it on the page background. */
.skware-tech-anatomy>h2 {
    color: #f4f4f7;
    font: 400 clamp(2rem, 3.2vw, 46px)/1.15 'Space Grotesk', sans-serif;
    left: 50%;
    letter-spacing: -.02em;
    margin: 0;
    max-width: min(950px, calc(100% - 80px));
    position: absolute;
    text-align: center;
    /* Centred on the reference's title position so a second line does not
       push the block off-mark. */
    top: 31%;
    transform: translate(-50%, -50%);
    width: max-content;
    z-index: 2
}

.skware-tech-anatomy>h2 {
    color: #f4f4f7;
    font: 400 clamp(2rem, 3.2vw, 46px)/1.04 'Space Grotesk', sans-serif;
    letter-spacing: -.03em;
    margin: 0 auto 64px;
    /* The rule above positions this absolutely with width:max-content, so the
       cap has to stay viewport-relative or the title is clipped on phones. */
    max-width: min(850px, calc(100% - 40px));
    text-align: center
}

.skware-tech-anatomy__stage {
    aspect-ratio: 1248 / 832;
    min-height: 650px;
    position: relative
}

.skware-tech-anatomy__stage>img {
    display: block;
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%
}

.skware-tech-anatomy__card {
    padding: 22px;
    width: 290px
}

/* Proportional so the cards keep their place over the image as it scales.
   Percentages measured off the reference design. */
.skware-tech-anatomy__card--emitter {
    left: 21%;
    top: 42%
}

.skware-tech-anatomy__card--vector {
    bottom: 11%;
    right: 21%
}

/* Card reads title -> label -> list; the square icon is the list bullet rather
   than a 22px mark at the top of the card. */
.skware-tech-anatomy__card h3 {
    color: #f4f4f7;
    font: 500 20px/1.2 'Space Grotesk', sans-serif;
    margin: 0
}

.skware-tech-anatomy__card>span {
    color: #496ed6;
    display: block;
    font: 700 10px/1.2 'Space Grotesk', sans-serif;
    letter-spacing: .06em;
    margin: 6px 0 14px;
    text-transform: uppercase
}

.skware-tech-anatomy__card ul {
    color: #b9b9c4;
    display: grid;
    font: 400 12px/1.35 Inter, sans-serif;
    gap: 7px;
    list-style: none;
    margin: 0;
    padding: 0
}

.skware-tech-anatomy__card li {
    align-items: center;
    display: flex
}

/* Bullet is the square.svg icon in the markup, not a generated pink dot. */
.skware-tech-anatomy__card li img {
    flex: none;
    height: 8px;
    margin-right: 8px;
    width: 8px
}

@media(max-width:700px) {
    .skware-tech-anatomy {
        padding-block: 72px
    }

    .skware-tech-anatomy__stage,
    .skware-tech-anatomy__stage>img {
        height: 720px;
        min-height: 720px
    }

    /* A definite height plus the 1248/832 ratio resolved the auto width to
       1080px, so the stage and the cards inside it ran off the screen. Drop the
       ratio once the height is pinned. */
    .skware-tech-anatomy__stage {
        aspect-ratio: auto;
        width: 100%
    }

    .skware-tech-anatomy__card {
        width: calc(100% - 40px)
    }

    .skware-tech-anatomy__card--emitter {
        left: 20px;
        top: 20px
    }

    .skware-tech-anatomy__card--vector {
        bottom: 20px;
        right: 20px
    }
}

.skware-tech-swarm {
    height: 1016px;
    overflow: hidden;
    position: relative
}

.skware-tech-swarm>img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%
}

/* The overlay is a complete composition (drone + suspended screen on a night
   sky), so it sits on top normally. Screen-blending it let the underlying
   swarm.png city/streaks show through its dark sky and muddied the whole frame. */
.skware-tech-swarm__overlay {
    object-position: center
}

/* Restrained glass surface: the image supplies the colour variation while the
   blur softens it, keeping facade cards lighter and swarm cards naturally dark. */
.skware-info-card {
    -webkit-backdrop-filter: blur(20px) saturate(105%);
    aspect-ratio: 2 / 1;
    backdrop-filter: blur(20px) saturate(105%);
    background: rgba(25, 38, 54, .52);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: clamp(16px, 1.7vw, 24px);
    width: min(320px, 40vw)
}

.skware-info-card h3 {
    color: #f4f4f7;
    font: 600 clamp(16px, 1.2vw, 18px)/1.2 'Space Grotesk', sans-serif;
    letter-spacing: -.02em;
    margin: 0
}

.skware-info-card p {
    color: rgba(244, 244, 247, .68);
    font: 400 11px/1.45 Inter, sans-serif;
    margin: auto 0 0
}

/* Four staggered cards over the swarm image, proportional so they hold their
   place as the section scales. */
.skware-tech-swarm .skware-info-card {
    position: absolute;
    z-index: 2
}

.skware-tech-swarm .skware-info-card--one {
    left: 18%;
    top: 15%
}

.skware-tech-swarm .skware-info-card--two {
    right: 14%;
    top: 36%
}

.skware-tech-swarm .skware-info-card--three {
    left: 18%;
    top: 61%
}

.skware-tech-swarm .skware-info-card--four {
    right: 14%;
    top: 77%
}

@media(max-width:700px) {
    .skware-tech-swarm {
        height: 720px
    }

    .skware-tech-swarm .skware-info-card {
        left: 20px;
        min-height: 124px;
        padding: 22px;
        right: 20px;
        width: auto
    }

    .skware-tech-swarm .skware-info-card--one {
        top: 3%
    }

    .skware-tech-swarm .skware-info-card--two {
        top: 27%
    }

    .skware-tech-swarm .skware-info-card--three {
        top: 51%
    }

    .skware-tech-swarm .skware-info-card--four {
        top: 75%
    }
}

/* Full-bleed image with the title and a centred card grid layered over it. */
.skware-tech-facade {
    aspect-ratio: 1440 / 1104;
    min-height: 800px;
    overflow: hidden;
    padding: 0;
    position: relative
}

.skware-tech-facade>img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%
}

.skware-tech-facade__cards {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    left: 50%;
    position: absolute;
    top: 35%;
    transform: translateX(-50%);
    width: min(74%, 1060px);
    z-index: 2
}

/* .skware-glass-card is absolutely positioned; these are grid items, so they
   have to return to flow or they size to content instead of filling a column. */
.skware-tech-facade .skware-info-card {
    position: static;
    width: auto
}

.skware-tech-facade>h2 {
    color: #f4f4f7;
    font: 400 clamp(2rem, 3.2vw, 46px)/1.15 'Space Grotesk', sans-serif;
    left: 50%;
    letter-spacing: -.02em;
    margin: 0;
    max-width: min(1000px, calc(100% - 80px));
    position: absolute;
    text-align: center;
    top: 24%;
    transform: translate(-50%, -50%);
    width: max-content;
    z-index: 2
}



@media(max-width:1050px) {
    .skware-tech-facade__cards {
        gap: 16px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(86%, 720px)
    }
}

@media(max-width:700px) {
    /* Stacked below the image rather than layered over it: six cards will not
       fit legibly on top of the facade at phone widths. */
    .skware-tech-facade {
        aspect-ratio: auto;
        min-height: 0;
        padding-bottom: 72px
    }

    .skware-tech-facade>img {
        height: 420px;
        position: relative
    }

    .skware-tech-facade>h2 {
        left: auto;
        max-width: none;
        padding: 32px var(--site-edge-right) 0 var(--site-edge-left);
        position: relative;
        text-align: left;
        top: auto;
        transform: none;
        width: auto
    }

    .skware-tech-facade__cards {
        grid-template-columns: minmax(0, 1fr);
        left: auto;
        margin-top: 32px;
        padding-inline: var(--site-edge-left) var(--site-edge-right);
        position: relative;
        top: auto;
        transform: none;
        width: auto
    }
}

.skware-tech-principles {
    display: flex;
    flex-direction: column;
    min-height: 754px;
    padding-block: 86px 80px;
    padding-inline: var(--site-gutter-left) var(--site-gutter-right)
}

.skware-tech-principles__header {
    display: block;
    margin: 0
}

.skware-tech-principles__kicker {
    color: #496ed6;
    font: 400 clamp(18px, 1.65vw, 24px)/1.2 'Space Grotesk', sans-serif;
    margin: 0 0 18px
}

.skware-tech-principles__header h2 {
    color: #f4f4f7;
    font: 400 clamp(32px, 2.65vw, 40px)/1.1 Inter, sans-serif;
    letter-spacing: -.03em;
    margin: 0;
    max-width: none
}

.skware-tech-principles__description {
    color: #9797a3;
    font: 600 clamp(15px, 1.3vw, 18px)/1.45 Inter, sans-serif;
    margin: 18px 0 0;
    max-width: 980px
}

.skware-tech-principles__grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: auto
}

.skware-tech-principles__grid article {
    background: #1c1d20;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    min-height: 192px;
    padding: clamp(22px, 2.2vw, 32px)
}

.skware-tech-principles__grid h3 {
    color: #f4f4f7;
    font: 600 clamp(18px, 1.55vw, 23px)/1.2 'Space Grotesk', sans-serif;
    letter-spacing: -.02em;
    margin: 0
}

.skware-tech-principles__grid p {
    color: #85858f;
    font: 400 13px/1.48 Inter, sans-serif;
    margin: auto 0 0
}

@media(max-width:1050px) {
    .skware-tech-principles {
        min-height: 0
    }

    .skware-tech-principles__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 72px
    }
}

@media(max-width:700px) {
    .skware-tech-principles {
        padding-block: 72px
    }

    .skware-tech-principles__grid {
        gap: 16px;
        grid-template-columns: 1fr;
        margin-top: 48px
    }

    .skware-tech-principles__grid article {
        min-height: 220px
    }
}

.skware-tech-specs {
    min-height: 857px;
    padding-block: 60px 96px;
    padding-inline: max(var(--site-gutter-left), 5.55vw) max(var(--site-gutter-right), 5.55vw)
}

.skware-tech-specs__header {
    display: block
}

.skware-tech-specs__kicker {
    color: #496ed6;
    font: 400 clamp(18px, 1.65vw, 24px)/1.2 'Space Grotesk', sans-serif;
    margin: 0 0 18px
}

.skware-tech-specs__header h2 {
    color: #f4f4f7;
    font: 400 clamp(32px, 2.65vw, 40px)/1.1 Inter, sans-serif;
    letter-spacing: -.03em;
    margin: 0
}

.skware-tech-specs__description {
    color: #9797a3;
    font: 400 clamp(15px, 1.3vw, 18px)/1.45 Inter, sans-serif;
    margin: 22px 0 0;
    max-width: 920px
}

.skware-tech-specs__table {
    background: #0c0c14;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 16px;
    margin-top: 52px;
    overflow: hidden;
    width: 100%
}

.skware-tech-specs__row {
    border-top: 1px solid rgba(255, 255, 255, .09);
    display: grid;
    grid-template-columns: 1.15fr repeat(3, 1fr)
}

.skware-tech-specs__row:first-child {
    border-top: 0
}

.skware-tech-specs__row span {
    align-items: center;
    color: #9797a3;
    display: flex;
    font: 400 14px/1.35 Inter, sans-serif;
    justify-content: center;
    min-width: 0;
    padding: 19px 24px;
    text-align: center
}

.skware-tech-specs__row span:first-child {
    color: #f4f4f7;
    font-weight: 600;
    justify-content: flex-start;
    text-align: left
}

.skware-tech-specs__row--head {
    background: #1c1d28
}

.skware-tech-specs__row--head span {
    color: #c2aaf9;
    font: 700 12px/1.2 'Space Grotesk', sans-serif;
    min-height: 38px;
    text-transform: uppercase
}

.skware-tech-specs__row--head span:first-child {
    color: #f4f4f7
}

@media(max-width:700px) {
    .skware-tech-specs {
        min-height: 0;
        padding-block: 72px 96px
    }

    .skware-tech-specs__table {
        margin-top: 40px;
        overflow-x: auto
    }

    .skware-tech-specs__row {
        min-width: 820px
    }
}

.skware-contact-page {
    background: #496ed6;
    color: #f4f4f7;
    min-height: 760px;
    padding-block: 148px 120px;
    padding-inline: var(--site-gutter-left) var(--site-gutter-right)
}

.skware-contact-page__grid {
    display: grid;
    gap: 80px;
    grid-template-columns: 420px minmax(0, 1fr);
    margin: 0 auto;
    max-width: 1280px
}

.skware-contact-page__offices {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.skware-contact-page__offices>h1 {
    font: 500 24px/1.1 'Space Grotesk', sans-serif;
    margin: 0
}

.skware-contact-page__office {
    background: rgba(255, 255, 255, .09);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    height: 200px;
    justify-content: space-between;
    padding: 24px
}

.skware-contact-page__office h2 {
    font: 700 18px/1.2 'Space Grotesk', sans-serif;
    margin: 0
}

.skware-contact-page__office address {
    font: 400 14px/1.5 Inter, sans-serif;
    font-style: normal
}

.skware-contact-page__office a {
    color: inherit;
    text-decoration: none
}

.skware-contact-page__coverage {
    background: #2e3192;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    min-height: 157px;
    padding: 24px;
    width: 322px
}

.skware-contact-page__coverage img {
    height: 24px;
    margin-bottom: 12px;
    width: 24px
}

.skware-contact-page__coverage h2 {
    font: 700 14px/1.2 'Space Grotesk', sans-serif;
    margin: 0
}

.skware-contact-page__coverage p {
    font: 400 12px/1.4 Inter, sans-serif;
    margin: auto 0 0;
    opacity: .7
}

.skware-contact-page__form {
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 40px
}

.skware-contact-page__form>h2 {
    font: 500 24px/1.1 'Space Grotesk', sans-serif;
    margin: 0
}

.skware-contact-page__form fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

.skware-contact-page__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.skware-contact-page__topic {
    cursor: pointer;
    position: relative
}

/* Clipped rather than just transparent: the input inherits the form's
   width:100% and, without a positioned parent, was laid out against the page
   and pushed the document 260px wider than the viewport on phones. */
.skware-contact-page__form .skware-contact-page__topic input {
    clip-path: inset(50%);
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px
}

.skware-contact-page__topic span {
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 8px;
    display: block;
    font: 700 13px/1.2 'Space Grotesk', sans-serif;
    padding: 8px 16px
}

.skware-contact-page__topic--selected span,
.skware-contact-page__topic:has(input:checked) span {
    background: #ff7bac
}

.skware-contact-page__row {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr 1fr
}

.skware-contact-page__form>label,
.skware-contact-page__row label {
    color: #08080a;
    display: flex;
    flex-direction: column;
    font: 700 12px/1.2 'Space Grotesk', sans-serif;
    gap: 6px
}

.skware-contact-page__form input,
.skware-contact-page__form textarea {
    background: #f4f4f7;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 8px;
    color: #08080a;
    font: 400 14px/1.3 'Space Grotesk', sans-serif;
    padding: 12px;
    width: 100%
}

.skware-contact-page__form textarea {
    height: 100px;
    resize: vertical
}

.skware-contact-page__submit {
    align-items: center;
    background: #c2aaf9;
    border: 0;
    border-radius: 999px;
    color: #08080a;
    cursor: pointer;
    display: flex;
    font: 700 14px/1.2 'Space Grotesk', sans-serif;
    gap: 8px;
    padding: 14px 28px;
    width: max-content
}

.skware-contact-page__submit svg {
    height: 14px;
    width: 14px
}

.skware-contact-page__submit:hover,
.skware-contact-page__submit:focus-visible {
    background: #08080a;
    color: #f4f4f7
}

.skware-contact-page__status {
    font: 700 13px/1.3 'Space Grotesk', sans-serif;
    margin: 0
}

@media(max-width:900px) {
    .skware-contact-page__grid {
        gap: 56px;
        grid-template-columns: 1fr
    }

    .skware-contact-page__offices {
        display: grid;
        grid-template-columns: repeat(2, 1fr)
    }

    .skware-contact-page__offices>h1 {
        grid-column: 1/-1
    }

    .skware-contact-page__coverage {
        grid-column: 1/-1;
        width: 100%
    }
}

@media(max-width:620px) {
    .skware-contact-page {
        padding-block: 120px 72px
    }

    .skware-contact-page__grid {
        gap: 40px
    }

    .skware-contact-page__offices {
        grid-template-columns: 1fr
    }

    .skware-contact-page__office {
        height: auto;
        min-height: 190px
    }

    .skware-contact-page__form {
        gap: 22px;
        padding: 22px
    }

    .skware-contact-page__row {
        grid-template-columns: 1fr
    }
}

.skware-glass-card--flow {
    position: relative;
    z-index: auto
}

.skware-solution-detail {
    background: #08080a;
    color: #f4f4f7
}

.skware-solution-detail__hero {
    align-items: center;
    display: flex;
    height: 810px;
    justify-content: center;
    overflow: hidden;
    position: relative
}

.skware-solution-detail__hero>img,
.skware-solution-detail__hero-shade {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%
}

.skware-solution-detail__hero>img {
    object-fit: cover
}

.skware-solution-detail__hero-shade {
    background: linear-gradient(180deg, #08080a 2%, transparent 49%), rgba(0, 0, 0, .38)
}

.skware-solution-detail__hero-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    text-align: center;
    z-index: 1
}

.skware-solution-detail__hero-content span {
    border: 1px solid #c2aaf9;
    border-radius: 4px;
    color: #c2aaf9;
    font: 700 11px/1 'Space Grotesk', sans-serif;
    padding: 4px 8px
}

.skware-solution-detail__hero-content h1 {
    font: 700 44px/1.2 'Space Grotesk', sans-serif;
    margin: 0
}

.skware-solution-detail__section,
.skware-solution-detail__problem,
.skware-solution-detail__results {
    padding: 100px var(--site-gutter-right) 100px var(--site-gutter-left)
}

.skware-solution-detail__copy {
    max-width: 720px
}

.skware-solution-detail__copy h2,
.skware-solution-detail__problem>h2,
.skware-solution-detail__results>h2 {
    font: 400 clamp(2rem, 3vw, 38px)/1.1 'Space Grotesk', sans-serif;
    letter-spacing: -.02em;
    margin: 0
}

.skware-solution-detail__copy p {
    color: #9797a3;
    font: 400 16px/1.6 Inter, sans-serif;
    margin: 16px 0 0
}

.skware-solution-detail__copy--center {
    margin: 0 auto 56px;
    text-align: center
}

.skware-solution-detail__value {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 768px
}

.skware-solution-detail__value-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.skware-solution-detail__value-grid .skware-glass-card {
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 16px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 270px;
    padding: 24px
}

.skware-solution-detail__value-grid h3,
.skware-solution-detail__problem-grid h3 {
    font: 700 24px/1.2 'Space Grotesk', sans-serif;
    margin: 0
}

.skware-solution-detail__value-grid p,
.skware-solution-detail__problem-grid p {
    color: rgba(244, 244, 247, .7);
    font: 400 14px/1.5 Inter, sans-serif;
    margin: 0
}

.skware-solution-detail__how>img {
    border-radius: 24px;
    height: 500px;
    object-fit: cover;
    width: 100%
}

.skware-solution-detail__stats {
    background: #2e3192;
    min-height: 818px;
    padding: 100px var(--site-gutter-right) 100px var(--site-gutter-left);
    position: relative
}

.skware-solution-detail__stats .skware-solution-detail__copy {
    max-width: 580px
}

.skware-solution-detail__stats>img {
    border-radius: 20px;
    bottom: 97px;
    height: 380px;
    object-fit: cover;
    position: absolute;
    right: 80px;
    width: 480px
}

.skware-solution-detail__swarm {
    height: 1016px;
    overflow: hidden;
    position: relative
}

.skware-solution-detail__swarm>img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%
}

.skware-solution-detail__swarm-overlay {
    mix-blend-mode: screen
}

.skware-solution-detail__problem,
.skware-solution-detail__credibility {
    background: #1e1e26
}

.skware-solution-detail__problem>h2 {
    margin-bottom: 56px
}

.skware-solution-detail__problem-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.skware-solution-detail__problem-grid article {
    background: #c2aaf9;
    border-radius: 16px;
    color: #1e1e26;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 270px;
    padding: 24px
}

.skware-solution-detail__problem-grid img {
    height: 24px;
    width: 24px
}

.skware-solution-detail__problem-grid h3 {
    margin-top: 12px
}

.skware-solution-detail__problem-grid p {
    color: rgba(30, 30, 38, .7)
}

.skware-solution-detail__credibility {
    align-items: center;
    display: grid;
    gap: 0;
    grid-template-columns: 480px minmax(0, 580px);
    justify-content: space-between;
    min-height: 837px;
    padding: 100px var(--site-gutter-right) 100px var(--site-gutter-left)
}

.skware-solution-detail__credibility>img {
    border-radius: 24px;
    height: 500px;
    object-fit: cover;
    width: 480px
}

.skware-solution-detail__credibility ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0
}

.skware-solution-detail__credibility li {
    font: 400 15px/1.5 Inter, sans-serif
}

.skware-solution-detail__credibility li::before {
    background: #c2aaf9;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 6px;
    margin-right: 10px;
    width: 6px
}

.skware-solution-detail__results>h2 {
    margin-bottom: 56px
}

.skware-solution-detail__results-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.skware-metric-card {
    align-items: flex-end;
    border-radius: 16px;
    display: flex;
    min-height: 634px;
    overflow: hidden;
    padding: 32px;
    position: relative
}

.skware-metric-card>img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    opacity: .2;
    position: absolute;
    width: 100%
}

.skware-metric-card__shade {
    background: rgba(7, 7, 41, .3);
    inset: 0;
    position: absolute
}

.skware-metric-card__content {
    position: relative;
    z-index: 1
}

.skware-metric-card h3 {
    font: 700 28px/1.2 'Space Grotesk', sans-serif;
    margin: 0
}

.skware-metric-card p {
    color: #9797a3;
    font: 400 14px/1.5 Inter, sans-serif;
    margin: 0
}

.skware-metric-card dl {
    display: flex;
    gap: 24px;
    margin: 24px 0 0
}

.skware-metric-card dl div {
    display: flex;
    flex-direction: column-reverse
}

.skware-metric-card dt {
    color: #9797a3;
    font: 400 11px/1.2 Inter, sans-serif
}

.skware-metric-card dd {
    color: #ff7bac;
    font: 700 20px/1.2 'Space Grotesk', sans-serif;
    margin: 0
}

@media(max-width:1023px) {
    .skware-solution-detail__value-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .skware-solution-detail__stats>img {
        right: 5vw
    }

    .skware-solution-detail__credibility {
        gap: 48px;
        grid-template-columns: 1fr
    }

    .skware-solution-detail__credibility>img {
        width: 100%
    }
}

@media(max-width:639px) {
    .skware-solution-detail__hero {
        height: 680px
    }

    .skware-solution-detail__hero-content h1 {
        font-size: 38px
    }

    .skware-solution-detail__section,
    .skware-solution-detail__problem,
    .skware-solution-detail__results,
    .skware-solution-detail__stats,
    .skware-solution-detail__credibility {
        padding-bottom: 72px;
        padding-top: 72px
    }

    .skware-solution-detail__value,
    .skware-solution-detail__stats {
        gap: 48px;
        min-height: auto
    }

    .skware-solution-detail__value {
        gap: 56px
    }

    .skware-solution-detail__value-grid,
    .skware-solution-detail__problem-grid,
    .skware-solution-detail__results-grid {
        grid-template-columns: 1fr
    }

    .skware-solution-detail__stats {
        display: flex;
        flex-direction: column
    }

    .skware-solution-detail__stats>img {
        height: 320px;
        position: static;
        width: 100%
    }

    .skware-solution-detail__swarm {
        height: 640px
    }

    .skware-solution-detail__credibility {
        min-height: auto
    }

    .skware-solution-detail__credibility>img {
        height: 360px
    }

    .skware-metric-card {
        min-height: 480px
    }
}

/* Reusable solution-page building blocks. Presets keep editors inside the
   Skware visual system while allowing new pages to be composed in Elementor. */
.skware-content-cards {
    background: #08080a;
    color: #f4f4f7;
    padding: clamp(72px, 8vw, 112px) var(--site-edge-right) clamp(80px, 9vw, 128px) var(--site-edge-left)
}

.skware-content-cards--lavender {
    background: var(--skware-surface-2, #1c1d28)
}

.skware-content-cards__header {
    margin-bottom: clamp(40px, 5vw, 72px);
    max-width: 780px
}

.skware-content-cards--center .skware-content-cards__header {
    margin-inline: auto;
    text-align: center
}

.skware-content-cards__eyebrow,
.skware-media-feature__eyebrow {
    color: #496ed6;
    font: 500 var(--type-subheading, 1.5rem)/1.1 'Space Grotesk', sans-serif;
    margin: 0 0 20px
}

.skware-content-cards__header h2,
.skware-media-feature__copy h2 {
    color: #f4f4f7;
    font: 400 var(--type-heading, 2.375rem)/1.1 Inter, sans-serif;
    letter-spacing: -.02em;
    margin: 0;
    text-wrap: balance
}

.skware-content-cards__description {
    color: #9797a3;
    font: 400 var(--type-body, 1rem)/1.6 Inter, sans-serif;
    margin: 20px 0 0;
    max-width: 680px
}

.skware-content-cards--center .skware-content-cards__description {
    margin-inline: auto
}

.skware-content-cards__grid {
    display: grid;
    gap: clamp(16px, 1.7vw, 24px);
    grid-template-columns: minmax(0, 1fr)
}

.skware-content-card {
    --skware-card-bg: var(--skware-surface-1, #121319);
    --skware-card-fg: var(--skware-text, #f4f4f7);
    --skware-card-copy: var(--skware-text-dim, #9797a3);
    --skware-card-accent: var(--skware-blue, #496ed6);
    background: var(--skware-card-bg);
    border: 1px solid var(--skware-border-strong, rgba(255, 255, 255, .09));
    border-radius: var(--skware-radius-m, 18px);
    display: flex;
    isolation: isolate;
    min-height: 220px;
    overflow: hidden;
    position: relative
}

.skware-content-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(22px, 2.2vw, 32px);
    position: relative;
    z-index: 2
}

.skware-content-card__tag {
    color: var(--skware-card-accent);
    font: 700 11px/1.2 'Space Grotesk', sans-serif;
    letter-spacing: .04em;
    margin: 0 0 12px;
    text-transform: uppercase
}

.skware-content-card h3 {
    color: var(--skware-card-fg);
    font: 600 clamp(18px, 1.55vw, 23px)/1.2 'Space Grotesk', sans-serif;
    letter-spacing: -.02em;
    margin: 0
}

.skware-content-card__description {
    color: var(--skware-card-copy);
    font: 400 13px/1.5 Inter, sans-serif;
    margin: auto 0 0
}

.skware-content-card__metrics {
    display: flex;
    gap: 24px;
    margin: auto 0 0
}

.skware-content-card__metrics div {
    min-width: 0
}

.skware-content-card__metrics dt {
    color: #ff7bac;
    font: 600 18px/1.1 'Space Grotesk', sans-serif
}

.skware-content-card__metrics dd {
    color: #9797a3;
    font: 400 10px/1.35 Inter, sans-serif;
    margin: 5px 0 0
}

.skware-content-card__link {
    border-radius: inherit;
    inset: 0;
    position: absolute;
    z-index: 3
}

.skware-content-card__link:focus-visible {
    outline: 2px solid #c2aaf9;
    outline-offset: -4px
}

.skware-content-card__mark {
    color: var(--skware-card-fg);
    display: block;
    height: 16px;
    margin-bottom: 10px;
    width: 16px
}

.skware-content-card--white {
    --skware-card-bg: #f4f4f7;
    --skware-card-fg: #121319;
    --skware-card-copy: #565865;
    --skware-card-accent: #283185;
    border-color: rgba(18, 19, 25, .09)
}

.skware-content-card--blue {
    --skware-card-bg: #496ed6;
    --skware-card-fg: #f4f4f7;
    --skware-card-copy: rgba(244, 244, 247, .78);
    --skware-card-accent: #f4f4f7
}

.skware-content-card--navy {
    --skware-card-bg: #283185;
    --skware-card-fg: #f4f4f7;
    --skware-card-copy: rgba(244, 244, 247, .78);
    --skware-card-accent: #c2aaf9
}

.skware-content-card--lavender {
    --skware-card-bg: #c2aaf9;
    --skware-card-fg: #121319;
    --skware-card-copy: rgba(18, 19, 25, .72);
    --skware-card-accent: #283185;
    border-color: rgba(18, 19, 25, .09)
}

.skware-content-card--pink {
    --skware-card-bg: #ff7bac;
    --skware-card-fg: #121319;
    --skware-card-copy: rgba(18, 19, 25, .72);
    --skware-card-accent: #283185;
    border-color: rgba(18, 19, 25, .09)
}

.skware-content-cards--media .skware-content-card {
    min-height: clamp(380px, 38vw, 520px)
}

.skware-content-card__media,
.skware-content-card__shade {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%
}

.skware-content-card__media {
    object-fit: cover;
    transition: transform 600ms cubic-bezier(.22, 1, .36, 1)
}

.skware-content-card__shade {
    background: linear-gradient(180deg, rgba(8, 8, 10, .06) 26%, rgba(8, 8, 10, .88) 100%);
    z-index: 1
}

.skware-content-cards--media .skware-content-card__body {
    justify-content: flex-end
}

.skware-content-cards--media .skware-content-card__description {
    color: #d0d0d8;
    margin: 12px 0 0
}

@media(hover:hover) {
    .skware-content-card:has(.skware-content-card__link):hover .skware-content-card__media {
        transform: scale(1.025)
    }
}

@media(min-width:640px) {
    .skware-content-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(min-width:1024px) {
    .skware-content-cards__grid {
        grid-template-columns: repeat(var(--skware-content-columns, 4), minmax(0, 1fr))
    }
}

.skware-media-feature {
    background: #08080a;
    color: #f4f4f7;
    padding: clamp(72px, 8vw, 112px) var(--site-edge-right) clamp(80px, 9vw, 128px) var(--site-edge-left)
}

.skware-media-feature__copy {
    max-width: 680px
}

.skware-media-feature__body {
    color: #9797a3;
    font: 400 var(--type-body, 1rem)/1.6 Inter, sans-serif;
    margin-top: 24px
}

.skware-media-feature__body>:first-child {
    margin-top: 0
}

.skware-media-feature__body>:last-child {
    margin-bottom: 0
}

.skware-media-feature__media {
    border-radius: var(--skware-radius-m, 18px);
    min-height: 320px;
    overflow: hidden;
    position: relative
}

.skware-media-feature__media img,
.skware-media-feature__media video {
    display: block;
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%
}

.skware-media-feature--banner .skware-media-feature__copy {
    margin: 0 auto clamp(40px, 5vw, 64px);
    max-width: 820px;
    text-align: center
}

.skware-media-feature--banner .skware-media-feature__media {
    height: clamp(380px, 48vw, 680px)
}

.skware-media-feature--split-left,
.skware-media-feature--split-right,
.skware-media-feature--accent {
    align-items: center;
    display: grid;
    gap: clamp(40px, 8vw, 120px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 620px
}

.skware-media-feature--split-left .skware-media-feature__copy {
    order: 2
}

.skware-media-feature--split-left .skware-media-feature__media {
    order: 1
}

.skware-media-feature--split-left .skware-media-feature__media,
.skware-media-feature--split-right .skware-media-feature__media,
.skware-media-feature--accent .skware-media-feature__media {
    height: clamp(360px, 38vw, 540px)
}

.skware-media-feature--accent {
    background: #283185
}

.skware-media-feature--accent .skware-media-feature__eyebrow,
.skware-media-feature--accent .skware-media-feature__body {
    color: rgba(244, 244, 247, .76)
}

.skware-media-feature--full {
    padding: 0
}

.skware-media-feature--full .skware-media-feature__media {
    border-radius: 0;
    height: clamp(620px, 74vw, 1080px)
}

@media(max-width:767px) {
    .skware-media-feature--split-left,
    .skware-media-feature--split-right,
    .skware-media-feature--accent {
        display: flex;
        flex-direction: column;
        min-height: 0
    }

    .skware-media-feature--split-left .skware-media-feature__copy,
    .skware-media-feature--split-left .skware-media-feature__media {
        order: initial
    }

    .skware-media-feature--split-left .skware-media-feature__media,
    .skware-media-feature--split-right .skware-media-feature__media,
    .skware-media-feature--accent .skware-media-feature__media {
        height: 360px;
        width: 100%
    }

    .skware-media-feature--full .skware-media-feature__media {
        height: 72svh
    }
}

@media(prefers-reduced-motion:reduce) {
    .skware-content-card__media {
        transition: none
    }
}

/* Standalone card: each instance is directly selectable in Elementor and can
   participate in native Container/Grid layouts while retaining Skware presets. */
.elementor-widget-skware-card,
.elementor-widget-skware-card>.elementor-widget-container {
    height: 100%
}

.skware-card-widget__card {
    height: 100%;
    min-height: 240px
}

.skware-card-widget__card--media {
    min-height: 420px
}

.skware-card-widget__card--media .skware-content-card__body {
    justify-content: flex-end
}

.skware-card-widget__card--media .skware-content-card__description {
    color: rgba(244, 244, 247, .78)
}

.skware-card-widget__card--stack .skware-content-card__body {
    justify-content: flex-start
}

.skware-card-widget__card--stack .skware-content-card__description,
.skware-card-widget__card--stack .skware-content-card__metrics {
    margin-top: 0
}

.skware-card-widget__card--custom {
    --skware-card-bg: var(--skware-surface-1, #121319);
    --skware-card-fg: var(--skware-text, #f4f4f7);
    --skware-card-copy: var(--skware-text-dim, #9797a3)
}

.elementor-editor-active .skware-card-widget__card .skware-content-card__link {
    pointer-events: none
}

/* ==========================================================================
   Mobile polish
   Cross-cutting phone corrections that don't belong to any single component:
   touch-target minimums, the small-screen type floor, safe-area insets, and
   the iOS focus-zoom threshold. Breakpoints reuse the two the rest of this
   sheet already works in — 767px (where the nav becomes the hamburger) and
   639px (where the theme switches to the mobile type scale).
   ========================================================================== */

@media(max-width:767px) {

    /* The intro was anchored at 6svh, which put the h1's first line 23px
       inside the 72px header row. Clear the header explicitly instead. */
    .skware-hero__intro {
        top: calc(var(--skware-header-height, 72px) + var(--safe-top, 0px) + 1.5rem)
    }

    /* Bottom-anchored overlays sit above the home indicator, not under it. */
    .skware-hero__metrics {
        bottom: max(24px, calc(var(--safe-bottom, 0px) + 16px))
    }

    /* Anchored on the left only, so its 30ch cap ran into the right edge on
       narrow phones instead of stopping at the gutter. */
    .skware-hero__description {
        right: var(--site-edge-right)
    }

    .skware-activations__nav {
        bottom: max(16px, calc(var(--safe-bottom, 0px) + 8px))
    }

    /* --- 44px touch minimum --- */
    .skware-brand,
    .skware-hero__header [data-skware-hero-brand] {
        align-items: center;
        min-height: 44px
    }

    .skware-language-switch a {
        align-items: center;
        display: flex;
        min-height: 44px
    }

    .skware-footer__group {
        gap: 4px
    }

    .skware-footer__group a {
        align-items: center;
        display: inline-flex;
        min-height: 44px
    }

    .skware-page-hero__cta,
    .skware-careers__cta,
    .skware-principles__item summary,
    .skware-player-controls button,
    .skware-player-controls select {
        min-height: 44px
    }

    .skware-contact__topics span,
    .skware-contact-page__topic span {
        align-items: center;
        display: flex;
        min-height: 44px
    }

    .skware-contact-page__office a,
    .skware-contact-page__coverage a {
        align-items: center;
        display: inline-flex;
        min-height: 44px
    }

    /* iOS Safari zooms the page on focus for any field under 16px. */
    .skware-contact-page__form input,
    .skware-contact-page__form textarea,
    .skware-player-controls select {
        font-size: 16px
    }

    /* The hero header's own `nav { gap: 32px }` also matches the hamburger
       panel it contains, so the home drawer was spaced 32px while every other
       page's drawer — built from .skware-menu — was spaced 0. */
    .skware-mobile-nav nav,
    .skware-mobile-nav nav .skware-menu {
        gap: 4px
    }
}

@media(max-width:639px) {

    /* The authored line break lands mid-phrase once the h1 wraps on its own;
       let it rewrap and balance the lines instead. */
    .skware-hero__intro h1 br {
        display: none
    }

    .skware-hero__intro h1 {
        text-wrap: balance
    }

    /* --- Type floor: 12px for uppercase micro-labels, 13px for prose. --- */
    .skware-hero__eyebrow,
    .skware-hero__live,
    .skware-hero__final span,
    .skware-solutions__eyebrow,
    .skware-solutions__card-category,
    .skware-solutions__card-status,
    .skware-technology__annotation,
    .skware-technology__caption p,
    .skware-contact header>span,
    .skware-contact h3,
    .skware-page-hero__copy>span,
    .skware-media-grid__top>span:first-child,
    .skware-media-grid--proof .skware-media-grid__copy p,
    .skware-case-media .skware-metric-card span,
    .skware-tech-anatomy__card>span,
    .skware-solution-detail__hero-content span,
    .skware-metric-card dt,
    .skware-content-card__tag {
        font-size: 12px
    }

    .skware-statement__trigger span,
    .skware-statement__trigger em,
    .skware-page-hero__metrics dt,
    .skware-tech-hero__specs dd,
    .skware-content-card__metrics dd,
    .skware-media-grid--moment .skware-media-grid__copy p,
    .skware-info-card p,
    .skware-contact-page__coverage p {
        font-size: 13px
    }

    /* Do not restyle .skware-hero__scrim here. The scroll timeline fades it to
       opacity .42 to reveal the drone footage; anything opaque over the middle
       of the frame flattens that reveal. Lift the copy's own colour instead. */
    .skware-hero__description {
        color: #d4d4dd
    }

    /* The caption keeps its desktop pixel height while the visual scales with
       the viewport, so it grew into the lowest annotation. Trim the caption and
       lift the annotation clear of it. */
    .skware-technology__caption {
        background: linear-gradient(0deg, rgba(8, 8, 10, .9), rgba(8, 8, 10, .6) 60%, transparent);
        padding: 40px 16px 16px
    }

    .skware-technology__annotation--bottom-right {
        top: 66%
    }

    /* Was 40px of block padding against 64-72px on every neighbouring section. */
    .skware-solutions {
        padding-block: var(--section-space, 4rem)
    }
}