:root {
    --ink: #e8f1ef;
    --muted: #a1b6b8;
    --red: #f26e57;
    --line: #ffffff18;
    --pale: #10282d
}

body {
    background: #08191e;
    color: var(--ink)
}

body:before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 85% 10%, #20594b38, transparent 55%);
    z-index: -1
}

.topbar {
    background: #061318;
    border-bottom: 1px solid var(--line);
    color: #a5b8ba
}

.topbar .wrap {
    padding-block: 10px
}

header {
    position: relative;
    z-index: 5;
    height: 110px
}

header .brand {
    font-size: 17px;
    letter-spacing: 1px
}

.brand-icon {
    background: #f26e5715;
    border: 1px solid #f26e5730;
    border-radius: 12px;
    padding: 9px;
    font-size: 27px
}

.brand small {
    font-size: 9px;
    letter-spacing: 2.7px
}

nav {
    font-size: 12px;
    gap: 35px
}

nav a[aria-current],
nav a:hover {
    color: #91d4bd;
    border-color: #91d4bd
}

.button {
    border-radius: 40px;
    padding: 16px 26px;
    transition: transform .25s, box-shadow .25s, background .25s
}

.primary {
    background: #ed735b;
    color: #101d21;
    box-shadow: 0 5px 25px #ed735b14
}

.primary:hover {
    background: #ff8b72;
    box-shadow: 0 8px 35px #ed735b35
}

.secondary {
    border-color: #78918e66;
    color: #d4e5df;
    background: #ffffff03
}

.secondary:hover {
    background: #ffffff0b
}

.hero {
    position: relative;
    min-height: 680px;
    padding-top: 30px;
    padding-bottom: 80px;
    grid-template-columns: 1.05fr 1fr;
    gap: 65px
}

.hero-copy {
    position: relative;
    z-index: 2
}

.hero .eyebrow {
    font-size: 10px;
    letter-spacing: 2px;
    color: #b2d0c5
}

.hero-kicker {
    display: none
}

.hero h1 {
    font-size: clamp(60px, 6.8vw, 94px);
    letter-spacing: -5px;
    line-height: 1.02;
    font-weight: 500;
    margin-bottom: 28px
}

.hero h1 em {
    color: #91d4bd;
    font-weight: 500
}

.hero-copy>p {
    font-size: 14px;
    max-width: 435px;
    line-height: 1.9
}

.hero .actions {
    gap: 14px
}

.hero-note {
    border-top: 1px solid var(--line);
    padding-top: 22px;
    max-width: 430px;
    margin-top: 30px
}

.hero-note strong {
    font-weight: 500
}

.pulse {
    background: #91d4bd10;
    color: #91d4bd
}

.hero-image {
    height: 510px;
    border-radius: 180px 180px 18px 18px;
    border: 1px solid #a3ccba35;
    box-shadow: 0 30px 90px #0005;
    overflow: visible;
    isolation: isolate;
    background: #16312f
}

.hero-image>img {
    border-radius: inherit;
    filter: saturate(.72) brightness(.82);
    object-position: 48%;
    transition: filter .5s, transform .7s
}

.hero-image:hover>img {
    filter: saturate(.95) brightness(.95)
}

.hero-image:after {
    border-radius: 0 0 18px 18px;
    z-index: 0
}

.image-tag {
    top: 45px;
    left: -25px;
    background: #16332eed;
    border: 1px solid #8bb6a740;
    color: #c0e4d5;
    backdrop-filter: blur(15px);
    border-radius: 40px;
    padding: 13px 20px;
    font-size: 9px;
    box-shadow: 0 10px 25px #0003
}

.image-caption {
    bottom: 30px
}

.image-caption b {
    font-weight: 500;
    font-size: 17px
}

.image-caption span {
    font-size: 12px
}

.orbit-label {
    position: absolute;
    right: -22px;
    top: 55%;
    z-index: 3;
    background: #a5d7c2;
    color: #16332c;
    border: 7px solid #0b1e22;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    font-size: 35px;
    font-weight: 500;
    letter-spacing: -2px;
    line-height: 1.1;
    transform: rotate(8deg)
}

.orbit-label span {
    font-size: 16px;
    letter-spacing: 0;
    text-align: center
}

.scan-line {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 1
}

.scan-line:before {
    content: '';
    position: absolute;
    top: -20%;
    height: 20%;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, #9ce7d10c);
    border-bottom: 1px solid #b7f4dc18;
    animation: scan 8s linear infinite
}

@keyframes scan {
    to {
        top: 120%
    }
}

.ambient {
    position: absolute;
    left: 0;
    right: 0;
    top: 130px;
    height: 760px;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
    opacity: .65
}

#three-scene {
    width: 100%;
    height: 100%
}

#three-scene canvas {
    display: block
}

.motion-toggle {
    position: fixed;
    right: 17px;
    bottom: 20px;
    z-index: 15;
    border: 1px solid #91d4bd38;
    border-radius: 30px;
    padding: 9px 15px;
    background: #10292fe8;
    color: #b7d1c8;
    font-size: 10px;
    backdrop-filter: blur(12px)
}

.trust {
    padding: 35px 0;
    background: transparent
}

.trust b {
    font-size: 23px;
    font-weight: 500;
    color: #b9dccd
}

.trust span {
    font-size: 11px
}

.section {
    padding-top: 60px
}

.eyebrow {
    color: #91c9b4;
    font-size: 10px;
    letter-spacing: 2.7px
}

h2 {
    font-weight: 500;
    letter-spacing: -1.5px;
    font-size: clamp(32px, 3.5vw, 48px)
}

h3 {
    font-weight: 500
}

p {
    font-size: 15px;
    line-height: 1.9
}

.section-top {
    margin-bottom: 40px
}

.service {
    border: 1px solid #b1dbcc1c;
    border-radius: 12px;
    background: linear-gradient(135deg, #163333, #0d2329);
    padding: 35px;
    transition: transform .35s, border-color .35s, box-shadow .35s;
    position: relative;
    overflow: hidden
}

.service:after {
    content: '↗';
    position: absolute;
    right: 26px;
    top: 25px;
    color: #7faf9d;
    font-size: 25px
}

.service:hover {
    transform: translateY(-8px);
    border-color: #91d4bd66;
    box-shadow: 0 20px 50px #0003
}

.number {
    font-size: 12px;
    color: #92b8aa;
    margin-bottom: 45px
}

.service h3 {
    max-width: 260px;
    font-size: 24px
}

.service p {
    font-size: 13px
}

.arrow {
    color: #c0d8cd;
    font-size: 11px
}

.split>img,
.photo-stack {
    border-radius: 12px
}

.split>img,
.photo-stack>img {
    filter: saturate(.7);
    height: 450px
}

.photo-stack>span {
    background: #102c29e8;
    color: #c3e2d5;
    backdrop-filter: blur(10px);
    border: 1px solid #ffffff20;
    border-radius: 30px;
    font-size: 9px;
    bottom: 22px;
    left: 22px;
    padding: 12px 18px
}

.checks li {
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
    font-size: 13px
}

.checks li:before {
    color: #91d4bd
}

.gallery img {
    height: 320px;
    border-radius: 100px 100px 10px 10px;
    filter: saturate(.65);
    transition: filter .4s, transform .4s
}

.gallery img:hover {
    filter: saturate(1);
    transform: translateY(-6px)
}

.gallery img:nth-child(2) {
    border-radius: 10px;
    margin-top: 30px
}

.text-link {
    color: #b7d9c9
}

.cta {
    background: radial-gradient(ellipse at right, #275347, #13322f 65%);
    border: 1px solid #91d4bd25;
    border-radius: 15px;
    padding: 55px;
    margin-top: 110px
}

.cta h2 {
    font-size: 43px
}

.cta .eyebrow {
    color: #a5cdbb
}

footer {
    background: #061418;
    border-top: 1px solid var(--line)
}

.copyright {
    border-color: var(--line)
}

.pagehead {
    padding-block: 75px 60px
}

.pagehead h1 {
    font-weight: 500;
    letter-spacing: -3px;
    font-size: clamp(45px, 5.8vw, 76px)
}

.pagehead p {
    font-size: 16px
}

.contact-panel {
    background: linear-gradient(150deg, #1a3e36, #10282d);
    border: 1px solid #93d0b830;
    padding: 40px
}

.contact-panel hr {
    border-color: #ffffff20
}

.contact-panel .big-phone {
    color: #ace0c8
}

.enquiry h2 {
    font-size: 35px
}

input,
textarea,
select {
    background: #10282d;
    border-color: #ffffff24;
    color: #deece5;
    border-radius: 7px;
    padding: 14px
}

input::placeholder,
textarea::placeholder {
    color: #7d9798
}

input:focus,
textarea:focus,
select:focus {
    outline: 1px solid #91d4bd
}

.partner,
.team .cards,
#result {
    background: #10282d;
    border: 1px solid #b3dfc91c
}

.scroll-progress {
    position: fixed;
    left: 0;
    top: 0;
    height: 2px;
    background: #96d7bd;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    z-index: 30
}

.reveal {
    transition: opacity .8s ease, translate .8s cubic-bezier(.2, .7, .2, 1)
}

.reveal.pending {
    opacity: 0;
    translate: 0 30px
}

.motion-paused *,
.motion-paused *:before {
    animation-play-state: paused !important
}

.skip:focus {
    background: #10282d
}

.hero-copy {
    animation: arrive .9s ease both
}

.hero-image {
    animation: arrive 1.2s ease both
}

@keyframes arrive {
    from {
        opacity: 0;
        translate: 0 24px
    }

    to {
        opacity: 1;
        translate: 0 0
    }
}

@media(max-width: 1000px) {
    .hero {
        gap: 35px
    }

    .hero h1 {
        font-size: 68px
    }

    .hero-image {
        height: 490px
    }

    .hero .button {
        font-size: 12px;
        padding: 14px 18px
    }

    .orbit-label {
        right: -12px
    }

    .service {
        padding: 26px
    }

    .cta {
        padding: 40px
    }
}

@media(max-width: 700px) {
    header {
        height: 85px
    }

    .menu {
        color: inherit;
    }

    .hero {
        padding-top: 20px;
        gap: 35px;
        min-height: 0;
        padding-bottom: 40px
    }

    .hero h1 {
        font-size: 65px;
        letter-spacing: -3px
    }

    .hero .eyebrow {
        font-size: 8px;
        letter-spacing: 1.4px
    }

    .hero-copy>p {
        font-size: 14px
    }

    .hero-image {
        height: 420px;
        max-width: 480px;
        width: 94%;
        margin-inline: auto;
        border-radius: 160px 160px 15px 15px
    }

    .image-tag {
        left: -10px;
        top: 35px;
        font-size: 8px
    }

    .orbit-label {
        width: 86px;
        height: 86px;
        right: -12px;
        font-size: 28px
    }

    .trust {
        padding-block: 25px
    }

    .trust b {
        font-size: 19px
    }

    .section {
        padding-top: 65px
    }

    .section-top {
        margin-bottom: 25px
    }

    .split>img,
    .photo-stack>img {
        height: 350px
    }

    .gallery img {
        height: 230px
    }

    .gallery img:last-child {
        height: 290px;
        border-radius: 10px
    }

    .cta {
        padding: 30px;
        margin-top: 65px
    }

    .cta h2 {
        font-size: 33px
    }

    .pagehead {
        padding-block: 45px
    }

    .pagehead h1 {
        font-size: 48px;
        letter-spacing: -2px
    }

    .motion-toggle {
        bottom: 65px;
        right: 10px;
        font-size: 9px
    }

    .contact-panel {
        padding: 28px
    }

    .ambient {
        height: 900px
    }

    .mobile-call {
        background: #ed735b;
        color: #10232a
    }

    .header-call {
        display: none
    }
}

@media(prefers-reduced-motion:reduce) {
    .reveal.pending {
        opacity: 1;
        translate: none
    }

    *,
    *:before {
        animation: none !important;
        transition: none !important
    }

    .ambient {
        opacity: .35
    }
}