.home-page {
    background:#fff
}

.hero {
    position:relative;
    min-height:100svh;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background:#111
}

.hero video {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover
}

.hero:after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.47) 43%,rgba(0,0,0,.12) 76%),linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.48))
}

.hero-grid {
    position:absolute;
    inset:0;
    z-index:1;
    opacity:.09;
    background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);
    background-size:120px 120px;
    mask-image:linear-gradient(90deg,#000,transparent 78%)
}

.hero-copy {
    position:relative;
    z-index:2;
    width:min(920px,88%);
    padding:0 var(--x) clamp(90px,11vh,135px);
    color:#fff
}

.hero-eyebrow {
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:20px;
    font-size:10px;
    font-weight:600;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:#ddd
}

.hero-eyebrow:before {
    content:'';
    width:34px;
    height:2px;
    background:var(--red)
}

.hero h1 {
    margin:0;
    font-size:clamp(58px,7.4vw,125px);
    font-weight:650;
    line-height:.84;
    letter-spacing:-.067em
}

.hero h1 span {
    display:block;
    font-weight:300
}

.hero-copy p {
    max-width:650px;
    margin:30px 0 0;
    color:rgba(255,255,255,.75);
    font-size:clamp(15px,1.2vw,19px);
    line-height:1.7
}

.hero-actions {
    display:flex;
    align-items:center;
    gap:28px;
    margin-top:36px
}

.hero-side {
    position:absolute;
    z-index:3;
    right:38px;
    top:50%;
    transform:translateY(-50%);
    color:#fff;
    font-size:10px;
    letter-spacing:.12em
}

.hero-side:before {
    content:'';
    display:block;
    width:1px;
    height:58px;
    margin:0 auto 10px;
    background:rgba(255,255,255,.5)
}

.portfolio {
    position:relative;
    overflow:hidden;
    padding:clamp(100px,10vw,155px) var(--x);
    background:#f5f5f5
}

.portfolio-head {
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:1.2fr .65fr;
    gap:80px;
    align-items:end;
    margin-bottom:62px
}

.portfolio h2 {
    margin:18px 0 0;
    font-size:clamp(47px,5vw,82px);
    line-height:.96;
    letter-spacing:-.055em
}

.portfolio h2 span {
    display:block;
    color:#929397;
    font-weight:300
}

.portfolio-head p {
    margin:0;
    color:#686b70;
    line-height:1.8
}

.portfolio-tech {
    position:absolute;
    width:620px;
    height:620px;
    right:-175px;
    top:-185px;
    opacity:.16;
    animation:spin 42s linear infinite;
    pointer-events:none
}

.portfolio-tech svg {
    width:100%;
    height:100%;
    fill:none;
    stroke:var(--red);
    stroke-width:.7
}

.portfolio-wheel-arrow {
    position:absolute;
    z-index:2;
    right:235px;
    top:165px;
    width:210px;
    pointer-events:none
}

.portfolio-wheel-arrow path {
    fill:none;
    stroke:var(--red);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round
}

.portfolio-doodles {
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none
}

.portfolio-doodles svg {
    position:absolute;
    overflow:visible
}

.portfolio-doodles path {
    fill:none;
    stroke:rgba(17,18,20,.30);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:650;
    stroke-dashoffset:650
}

.portfolio-doodles .red path {
    stroke:var(--red)
}

.portfolio-doodles.visible path {
    animation:draw 1.5s ease forwards
}

.doodle-a {
    left:-45px;
    top:42px;
    width:420px
}

.doodle-b {
    left:210px;
    top:285px;
    width:400px
}

.doodle-c {
    left:520px;
    top:240px;
    width:270px
}

.portfolio-grid {
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    border-top:1px solid #d4d4d5;
    border-bottom:1px solid #d4d4d5
}

.portfolio-card {
    position:relative;
    min-height:285px;
    padding:28px 25px;
    display:flex;
    flex-direction:column;
    color:#17181a;
    text-decoration:none;
    border-right:1px solid #d4d4d5;
    overflow:hidden;
    isolation:isolate
}

.portfolio-card:first-child {
    border-left:1px solid #d4d4d5
}

.portfolio-card:before {
    content:'';
    position:absolute;
    z-index:-1;
    inset:auto 0 0;
    height:0;
    background:#151618;
    transition:.45s
}

.portfolio-card:hover:before {
    height:100%
}

.portfolio-card:hover {
    color:#fff
}

.portfolio-icon {
    width:58px;
    height:58px;
    margin-bottom:35px
}

.portfolio-icon img {
    width:100%;
    height:100%;
    object-fit:contain;
    filter:brightness(0) saturate(100%) invert(14%) sepia(95%) saturate(5024%) hue-rotate(350deg) brightness(91%) contrast(101%);
    transition:.45s
}

.portfolio-card:hover .portfolio-icon img {
    filter:brightness(0) invert(1)
}

.portfolio-card h3 {
    margin:auto 0 10px;
    font-size:20px;
    letter-spacing:-.025em
}

.portfolio-card p {
    margin:0;
    color:#73767b;
    font-size:13px;
    line-height:1.65
}

.portfolio-card:hover p {
    color:#c4c5c7
}

.portfolio-arrow {
    position:absolute;
    right:23px;
    top:24px;
    font-size:18px;
    opacity:.5
}

.portfolio-card:hover .portfolio-arrow {
    color:var(--red);
    opacity:1
}

.capabilities {
    position:relative;
    overflow:hidden;
    padding:110px var(--x);
    background:#fff
}

.cap-bg {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.84),rgba(255,255,255,.96)),url('assets/images/extrusion-line.png') center/cover no-repeat;
    opacity:.42
}

.cap-inner {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:.8fr 1.3fr .68fr;
    gap:55px;
    align-items:center;
    max-width:1600px;
    margin:auto
}

.cap-copy h2 {
    margin:20px 0 23px;
    font-size:clamp(47px,4.7vw,76px);
    line-height:.94;
    letter-spacing:-.055em
}

.cap-copy h2 span {
    display:block;
    color:#7a7c80;
    font-weight:300
}

.cap-copy p {
    color:#64676b;
    line-height:1.82
}

.cap-orbit {
    position:relative;
    width:min(650px,47vw);
    aspect-ratio:1;
    margin:auto
}

.cap-ring {
    position:absolute;
    left:16%;
    top:16%;
    width:68%;
    height:68%;
    border:1px solid rgba(20,20,20,.14);
    border-radius:50%;
    animation:spin 45s linear infinite
}

.cap-ring:before {
    content:'';
    position:absolute;
    left:50%;
    top:-4px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--red)
}

.cap-center {
    position:absolute;
    z-index:10;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:166px;
    height:166px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    box-shadow:0 22px 60px rgba(0,0,0,.14)
}

.cap-center img {
    width:118px
}

.cap-card {
    position:absolute;
    width:205px;
    height:158px;
    border-radius:16px;
    overflow:hidden;
    background:#111;
    color:#fff;
    text-decoration:none;
    box-shadow:0 16px 40px rgba(0,0,0,.16);
    transition:.42s
}

.cap-card img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s
}

.cap-card:after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.74))
}

.cap-card strong {
    position:absolute;
    z-index:2;
    left:17px;
    right:14px;
    bottom:15px;
    font-size:13px;
    letter-spacing:.04em;
    text-transform:uppercase;
    text-shadow:0 2px 10px #000
}

.cap-card:hover,.cap-card.active {
    box-shadow:0 28px 70px rgba(0,0,0,.25)
}

.cap-card:hover img,.cap-card.active img {
    transform:scale(1.08)
}

.c1 {
    left:50%;
    top:0;
    transform:translateX(-50%)
}

.c1:hover,.c1.active {
    transform:translateX(-50%) translateY(-8px) scale(1.04)
}

.c2 {
    right:0;
    top:29%;
    transform:translateY(-50%)
}

.c2:hover,.c2.active {
    transform:translate(8px,-50%) scale(1.04)
}

.c3 {
    right:10%;
    bottom:0
}

.c3:hover,.c3.active {
    transform:translate(7px,7px) scale(1.04)
}

.c4 {
    left:10%;
    bottom:0
}

.c4:hover,.c4.active {
    transform:translate(-7px,7px) scale(1.04)
}

.c5 {
    left:0;
    top:29%;
    transform:translateY(-50%)
}

.c5:hover,.c5.active {
    transform:translate(-8px,-50%) scale(1.04)
}

.cap-detail {
    padding:31px 0;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc
}

.cap-detail small {
    display:block;
    margin-bottom:20px;
    color:#9a9a9a;
    font-size:9px;
    letter-spacing:.18em
}

.cap-detail h3 {
    margin:0 0 14px;
    font-size:25px;
    text-transform:uppercase
}

.cap-detail p {
    color:#6e7175;
    font-size:13px;
    line-height:1.7
}

.cap-detail a {
    display:inline-flex;
    gap:15px;
    margin-top:22px;
    text-decoration:none;
    font-size:13px;
    font-weight:600
}

.photo-banner {
    position:relative;
    min-height:76vh;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    padding:100px var(--x) 65px;
    color:#fff;
    background:#111
}

.photo-banner img {
    position:absolute;
    inset:-3%;
    width:106%;
    height:106%;
    object-fit:cover
}

.photo-banner:after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(5,6,7,.88),rgba(5,6,7,.38) 65%,rgba(5,6,7,.18)),linear-gradient(180deg,transparent,rgba(0,0,0,.45))
}

.photo-banner-content {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.2fr .6fr;
    gap:90px;
    align-items:end;
    width:100%
}

.photo-banner h2 {
    margin:20px 0 0;
    font-size:clamp(52px,6.2vw,102px);
    line-height:.9;
    letter-spacing:-.06em
}

.photo-banner p {
    color:#ddd;
    line-height:1.8
}

.global {
    display: grid;
    grid-template-columns: 0.58fr 1.18fr 0.54fr;
    gap: 45px;
    align-items: center;
    min-height: 760px;
    padding: 105px var(--x);
    background: #090c10;
    color: #fff;
}

.global h2 {
    margin: 18px 0 24px;
    font-size: clamp(45px, 4.8vw, 76px);
    line-height: 0.95;
    letter-spacing: -0.05em;
}

.global p {
    color: #90959b;
    line-height: 1.75;
}

.global-copy .presence-summary {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid #2d3239;
}

.presence-summary strong {
    display: block;
    font-size: 44px;
    font-weight: 300;
}

.presence-summary span {
    color: #aaa;
    font-size: 12px;
}

.earth-stage {
    position: relative;
    display: grid;
    min-height: 600px;
    place-items: center;
}

.earth-canvas {
    max-width: 100%;
    cursor: grab;
    touch-action: none;
}

.earth-canvas.is-dragging {
    cursor: grabbing;
}

.earth-loading {
    position: absolute;
    color: #7f848c;
}

.earth-loading.hidden {
    display: none;
}

.country-card {
    position: absolute;
    z-index: 5;
    width: 235px;
    padding: 16px;
    border: 1px solid #3a3e44;
    background: rgba(13, 15, 18, 0.94);
    color: #fff;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.country-card b, .country-card span, .country-card em {
    display: block;
}

.country-card b {
    font-size: 16px;
}

.country-card span {
    margin-top: 6px;
    color: #aaa;
    font-size: 11px;
}

.country-card p {
    margin: 10px 0;
    color: #d4d4d4;
    font-size: 12px;
    line-height: 1.5;
}

.country-card em {
    color: var(--red);
    font-size: 11px;
    font-style: normal;
}

.earth-side {
    min-width: 0;
}

.market-list-title {
    display: block;
    margin-bottom: 18px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.market-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid #2d3239;
}

.market-list span {
    padding: 9px 8px 9px 0;
    border-bottom: 1px solid #232830;
    color: #aeb3ba;
    font-size: 11px;
}

.globe-hint {
    margin: 20px 0 0;
    color: #656b73 !important;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-projects {
    padding:105px var(--x);
    background:#f4f4f4
}

.home-projects-head {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:50px;
    margin-bottom:45px
}

.home-projects h2 {
    margin:18px 0 0;
    font-size:clamp(45px,4.7vw,75px);
    letter-spacing:-.05em
}

.home-projects-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}

.home-project {
    position:relative;
    min-height:440px;
    overflow:hidden;
    background:#111;
    color:#fff
}

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

.home-project:after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.82))
}

.home-project div {
    position:absolute;
    z-index:2;
    left:25px;
    bottom:24px
}

.home-project h3 {
    margin:5px 0 0;
    font-size:25px
}

.home-project small {
    color:#b9bbc0
}

@keyframes spin {
    to {
        transform:rotate(360deg)
    }

}

@keyframes draw {
    to {
        stroke-dashoffset:0
    }

}

@media(max-width:1200px) {
    .portfolio-grid {
        grid-template-columns:repeat(3,1fr)
    }

    .cap-inner {
        grid-template-columns:1fr 1.45fr
    }

    .cap-detail {
        grid-column:1/-1
    }

    .global {
        grid-template-columns:1fr 1.4fr
    }

    .earth-side {
        grid-column:1/-1
    }

    .market-list {
        grid-template-columns:repeat(6,minmax(0,1fr))
    }

}

@media(max-width:900px) {
    .hero {
        min-height:820px
    }

    .hero-side {
        display:none
    }

    .portfolio-head,.photo-banner-content {
        grid-template-columns:1fr;
        gap:28px
    }

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

    .portfolio-wheel-arrow,.portfolio-doodles {
        display:none
    }

    .cap-inner {
        display:block
    }

    .cap-orbit {
        width:min(670px,90vw);
        margin:65px auto
    }

    .cap-detail {
        max-width:600px;
        margin:auto
    }

    .global {
        grid-template-columns:1fr;
        padding-top:80px
    }

    .earth-stage {
        min-height:520px
    }

    .earth-side {
        display:block
    }

    .market-list {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }

    .home-projects-grid {
        grid-template-columns:1fr 1fr
    }

}

@media(max-width:650px) {
    .hero h1 {
        font-size:54px
    }

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

    .portfolio-grid {
        grid-template-columns:1fr
    }

    .portfolio-card {
        min-height:245px
    }

    .cap-orbit {
        display:grid;
        gap:12px;
        aspect-ratio:auto
    }

    .cap-card {
        position:relative!important;
        left:auto!important;
        right:auto!important;
        top:auto!important;
        bottom:auto!important;
        transform:none!important;
        width:100%;
        height:180px
    }

    .cap-center,.cap-ring {
        display:none
    }

    .global {
        padding-left:20px;
        padding-right:20px
    }

    .earth-stage {
        min-height:430px
    }

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

    .home-projects-grid {
        grid-template-columns:1fr
    }

    .home-projects-head {
        display:block
    }

}