main {
    overflow: clip;
}

.hero {
    min-height: 100svh;
    position: relative;
    display: grid;
    align-items: end;
    padding-block: clamp(6rem, 12vh, 9rem) var(--sp-4);
    color: #fff;
}

.hero-video {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 20%, rgba(126, 181, 210, 0.26) 0%, rgba(126, 181, 210, 0) 42%),
        radial-gradient(circle at 78% 72%, rgba(220, 243, 255, 0.12) 0%, rgba(220, 243, 255, 0) 48%),
        linear-gradient(148deg, #0c2234 0%, #0f2c43 42%, #174a69 100%);
}

.hero-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 18, 30, 0.45) 0%, rgba(7, 17, 29, 0.68) 62%, rgba(6, 17, 28, 0.88) 100%);
}

.hero-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background:
        radial-gradient(circle at 22% 12%, rgba(140, 190, 220, 0.22) 0%, rgba(140, 190, 220, 0) 48%),
        linear-gradient(150deg, #0e2436 0%, #13324a 52%, #1a4f6d 100%);
}

.hero-video.media-missing video {
    opacity: 0.26;
}

.hero-layout {
    display: grid;
    gap: var(--sp-3);
}

.split {
    display: grid;
    gap: var(--sp-4);
    align-items: center;
}

.split.alt .reel-shell {
    order: 2;
}

.feature-stack {
    display: grid;
    gap: var(--sp-4);
}

.feature-item {
    display: grid;
    gap: var(--sp-2);
    border-top: 1px solid var(--line);
    padding-top: var(--sp-3);
}

.process-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--line);
}

.process-list li {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line);
}

.process-list h3 {
    margin-bottom: 0.35rem;
}

.process-layout {
    display: grid;
    gap: var(--sp-3);
}

.process-reel {
    align-self: start;
}

.process-content {
    display: grid;
    gap: var(--sp-3);
}

.services-grid {
    display: grid;
    gap: var(--sp-3);
}

.services-tabs {
    display: grid;
    gap: var(--sp-3);
}

.services-mobile-toggle {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 999px;
    padding: 0.72rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--heading);
    cursor: pointer;
}

.services-tabs-list {
    display: grid;
    gap: 0.7rem;
}

.services-tabs.is-collapsed .services-tab:not(.is-active) {
    display: none;
}

.services-tab {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 16px;
    padding: 0.65rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.8rem;
    align-items: center;
    text-align: left;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.services-tab:hover {
    transform: translateY(-1px);
}

.services-tab.is-active {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    background: color-mix(in srgb, var(--surface-soft) 55%, var(--surface));
}

.services-tab-copy {
    display: grid;
    gap: 0.2rem;
}

.services-tab-copy strong {
    font-size: 1rem;
    color: var(--heading);
}

.services-tab-copy small {
    font-size: 0.84rem;
    color: var(--text-muted);
}

.services-tab-link {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--accent);
}

.services-panels {
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--surface);
    padding: var(--sp-2);
}

.services-panel {
    display: none;
    gap: var(--sp-2);
}

.services-panel.is-active {
    display: grid;
}

.services-panel-copy {
    display: grid;
    gap: 0.7rem;
    align-content: start;
}

.services-panel-media {
    box-shadow: none;
}

.service-block {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    padding: var(--sp-3);
    display: grid;
    gap: var(--sp-2);
}

.infra-grid {
    display: grid;
    gap: var(--sp-3);
}

.gallery-photo {
    border-radius: var(--radius-m);
    overflow: hidden;
    min-height: 16rem;
    background: linear-gradient(120deg, #d4e5ef 0%, #b7d6e4 100%);
}

.map-shell {
    display: grid;
    gap: var(--sp-3);
}

.map-card {
    border-radius: var(--radius-m);
    overflow: hidden;
    border: 1px solid var(--line);
    min-height: 320px;
}

.cta-band {
    display: grid;
    gap: var(--sp-3);
    text-align: center;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
}

.page-hero {
    padding-top: clamp(8rem, 15vh, 11rem);
    padding-bottom: var(--sp-5);
}

.page-content {
    display: grid;
    gap: var(--sp-5);
}

@media (min-width: 900px) {
    .split {
        grid-template-columns: 1.03fr 0.97fr;
    }

    .split.alt {
        grid-template-columns: 0.97fr 1.03fr;
    }

    .feature-item {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-4);
    }

    .process-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        gap: var(--sp-4);
    }

    .services-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .services-tabs {
        grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
        align-items: start;
    }

    .services-mobile-toggle {
        display: none;
    }

    .services-tabs-list {
        position: sticky;
        top: 110px;
        max-height: 540px;
        overflow-y: auto;
        padding-right: 0.3rem;
    }

    .services-tab {
        grid-template-columns: 1fr auto;
        min-height: 90px;
    }

    .services-panels {
        min-height: 540px;
    }

    .services-panel.is-active {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
        align-items: center;
        gap: var(--sp-3);
        min-height: 500px;
    }

    .service-block:nth-child(1),
    .service-block:nth-child(4) {
        grid-column: span 7;
    }

    .service-block:nth-child(2),
    .service-block:nth-child(3),
    .service-block:nth-child(5) {
        grid-column: span 5;
    }

    .infra-grid {
        grid-template-columns: 1.15fr 0.85fr;
    }
}