*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#08090d;color:#f5f6f8;font-family:"DM Sans",sans-serif}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:80px 80px;opacity:.16;z-index:-2}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}.site-header{height:82px;position:fixed;top:0;left:0;right:0;z-index:20;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;background:rgba(8,9,13,.82);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}.brand img{width:105px}.nav{display:flex;align-items:center;gap:24px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#aeb4bd}.nav a:hover,.nav a[aria-current=page]{color:#fff}.nav-cta{border:1px solid rgba(255,255,255,.2);padding:12px 14px;color:#fff}.menu-toggle{display:none;background:none;border:0}.menu-toggle span{display:block;width:25px;height:1px;background:#fff;margin:6px}.section{max-width:1280px;margin:auto;padding:125px 5vw}.page-hero{min-height:100vh;padding-top:155px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px}.eyebrow,.kicker{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9097a3}.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:#70ff45;box-shadow:0 0 15px #70ff45;margin-right:10px}.page-hero h1,.page-title h1{font:700 clamp(4rem,8vw,8rem)/.87 "Space Grotesk";letter-spacing:-.07em;margin:25px 0}.page-title{padding-top:180px;min-height:75vh}.lead{max-width:590px;color:#9da4ae;font-size:17px;line-height:1.7}.actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}.btn{display:inline-flex;padding:15px 20px;border:1px solid rgba(255,255,255,.16);text-transform:uppercase;letter-spacing:.1em;font-size:10px;font-weight:700}.btn.primary{background:#f5f5f5;color:#08090d}.hero-visual{height:600px;position:relative;display:grid;place-items:center}.hero-card{width:70%;height:75%;transform:rotate(2deg);border:1px solid rgba(255,255,255,.18);position:relative;box-shadow:30px 30px 90px #000}.hero-photo{height:100%;background:linear-gradient(120deg,rgba(240,0,216,.25),transparent 45%),url("") center/cover}.hero-tag{position:absolute;bottom:-35px;left:0;background:#08090d;border:1px solid rgba(255,255,255,.15);padding:13px;font-size:9px;letter-spacing:.15em}.orbit{position:absolute;width:80%;height:55%;border:1px solid rgba(240,0,216,.18);border-radius:50%;transform:rotate(35deg)}em{font-style:normal;background:linear-gradient(100deg,#f000d8,#50eaff,#70ff45);background-clip:text;-webkit-background-clip:text;color:transparent}.intro{display:grid;grid-template-columns:1fr 2fr;gap:60px;border-top:1px solid rgba(255,255,255,.1)}.display{font:600 clamp(2.8rem,5.7vw,6rem)/.98 "Space Grotesk";letter-spacing:-.06em;margin:0}.muted{color:#9da4ae;line-height:1.8;max-width:620px}.text-link{display:inline-block;margin-top:30px;border-bottom:1px solid #f000d8;padding-bottom:7px;font-size:11px;text-transform:uppercase;letter-spacing:.12em}.cards{display:grid;gap:12px}.cards.three{grid-template-columns:repeat(3,1fr);margin-top:35px}.feature{padding:30px;border:1px solid rgba(255,255,255,.1);min-height:240px;background:#0d1016;transition:.25s}.feature:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.28)}.feature b,.service-list b,.process-grid b{color:#f000d8;font-size:11px}.feature h2{font:700 22px "Space Grotesk";margin:70px 0 10px}.feature p{color:#858d99;line-height:1.6}.cta{padding:120px 5vw;text-align:center;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);background:radial-gradient(circle,rgba(240,0,216,.08),transparent 45%)}.cta p{font:600 clamp(3rem,7vw,7rem)/.9 "Space Grotesk";letter-spacing:-.06em;margin:0 0 40px}.service-list{border-top:1px solid rgba(255,255,255,.1)}.service-list article{display:grid;grid-template-columns:100px 1fr;gap:30px;padding:40px 0;border-bottom:1px solid rgba(255,255,255,.1)}.service-list h2{font:700 clamp(1.8rem,3vw,3.5rem) "Space Grotesk";margin:0 0 10px}.service-list p{color:#929aa6;max-width:650px;line-height:1.7}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.product{border:1px solid rgba(255,255,255,.1);background:#0e1118;color:#fff;text-align:left;padding:0 0 20px}.material{height:320px;background-size:cover;background-position:center}.acrylic{background-image:linear-gradient(120deg,rgba(80,234,255,.35),rgba(240,0,216,.18)),url("https://images.unsplash.com/photo-1586023492125-27b2c045efd7?auto=format&fit=crop&w=800&q=80")}.aluminium{background-image:url("https://images.unsplash.com/photo-1511818966892-d7d671e672a2?auto=format&fit=crop&w=800&q=80")}.steel{background-image:url("https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=800&q=80")}.foam{background-image:url("https://images.unsplash.com/photo-1513694203232-719a280e022f?auto=format&fit=crop&w=800&q=80")}.product b,.product h2,.product p{margin-left:20px}.product b{display:block;margin-top:18px;color:#777}.product h2{font:700 18px "Space Grotesk";margin-bottom:5px}.product p{color:#777;margin-top:0;font-size:12px}.filters{display:flex;gap:8px;margin-bottom:25px;flex-wrap:wrap}.filter{background:none;color:#888;border:1px solid rgba(255,255,255,.15);padding:10px 14px;text-transform:uppercase;font-size:9px;letter-spacing:.13em}.filter.active{color:#fff;border-color:#fff}.portfolio{display:grid;grid-template-columns:1.2fr .8fr;gap:12px}.portfolio-item{height:380px;border:0;background:#111;position:relative;overflow:hidden;color:#fff;text-align:left}.portfolio-item.large{height:580px;grid-row:span 2}.work-photo{height:100%;background-size:cover;background-position:center;transition:.5s}.photo1{background-image:url("https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1600&q=85")}.photo2{background-image:url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1200&q=85")}.photo3{background-image:url("https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=1200&q=85")}.photo4{background-image:url("https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=1600&q=85")}.portfolio-item:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.8))}.portfolio-item span{position:absolute;bottom:20px;left:20px;z-index:2;font-size:9px;letter-spacing:.16em}.portfolio-item:hover .work-photo{transform:scale(1.05)}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.1)}.process-grid>div{padding:30px 20px;border-right:1px solid rgba(255,255,255,.1);min-height:250px}.process-grid h2{font:700 22px "Space Grotesk";margin-top:70px}.process-grid p{color:#8f97a3;line-height:1.65}.manifesto{text-align:center;padding:160px 5vw;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}.manifesto p{font:600 clamp(3rem,7vw,7rem)/.9 "Space Grotesk";letter-spacing:-.06em}.contact{display:grid;grid-template-columns:1fr 1fr;gap:100px}.phone{display:block;font:600 32px "Space Grotesk";margin:25px 0;border-bottom:1px solid #f000d8;width:max-content}.whatsapp{display:inline-block;margin-top:25px;border:1px solid #70ff45;padding:14px 18px;font-size:10px;text-transform:uppercase;letter-spacing:.1em}form{display:grid;gap:22px}label{display:grid;gap:8px;font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:#888}input,textarea,select{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.15);padding:12px 0;color:#fff;outline:0}select{background:#08090d}.footer{border-top:1px solid rgba(255,255,255,.1);padding:55px 5vw;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:35px;color:#7e8692;font-size:10px}.footer>div{display:grid;gap:10px;align-content:start}.footer-logo{width:95px}.footer span{font-size:9px;letter-spacing:.15em;color:#606873}.footer a{color:#c3c7cd}.modal{display:none;position:fixed;inset:0;z-index:50;align-items:center;justify-content:center}.modal.open{display:flex}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(10px)}.modal-box{position:relative;z-index:2;background:#0e1118;border:1px solid rgba(255,255,255,.15);padding:45px;width:min(650px,90vw)}.modal-close{position:absolute;right:15px;top:10px;background:none;border:0;color:#fff;font-size:30px}.modal-content h2{font:700 42px "Space Grotesk"}.modal-content p{color:#9aa2ad;line-height:1.8}
@media(max-width:900px){.nav{display:none;position:absolute;top:82px;left:0;right:0;background:#08090d;padding:20px 5vw 30px;flex-direction:column;align-items:stretch;border-bottom:1px solid #222}.nav.open{display:flex}.nav-cta{text-align:center}.menu-toggle{display:block}.page-hero{grid-template-columns:1fr}.hero-visual{height:430px}.intro,.contact{grid-template-columns:1fr}.cards.three,.product-grid,.process-grid{grid-template-columns:1fr 1fr}.portfolio{grid-template-columns:1fr 1fr}.portfolio-item.large{grid-column:span 2;grid-row:auto;height:450px}.portfolio-item{height:300px}.footer{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.site-header{height:70px;padding:0 20px}.nav{top:70px}.section{padding:85px 20px}.page-hero{padding:120px 20px 70px}.page-title{padding-top:125px;min-height:65vh}.page-hero h1,.page-title h1{font-size:clamp(3.5rem,17vw,5rem)}.hero-visual{height:350px}.hero-card{width:80%;height:80%}.cards.three,.product-grid,.process-grid,.portfolio,.footer{grid-template-columns:1fr}.portfolio-item.large{grid-column:auto;height:360px}.portfolio-item{height:280px}.service-list article{grid-template-columns:45px 1fr}.manifesto{padding:110px 20px}.contact{gap:45px}.footer{padding:45px 20px}.cta{padding:100px 20px}}









.services-section {
    padding: 120px 6vw;
    background: #6e09b1bb;
    color: #ffffff;
}









/* =========================================
   SERVICES
========================================= */

.services-section {
    position: relative;
}

.service-list {
    width: 100%;
}

.service-item {
    position: relative;

    display: grid;
    grid-template-columns: 80px 1fr 60px;
    align-items: center;

    padding: 38px 0;

    border-top: 1px solid rgba(0,0,0,0.12);

    cursor: pointer;

    transition:
        padding 0.4s ease,
        background 0.4s ease;
}

.service-item:last-child {
    border-bottom: 1px solid rgba(0,0,0,0.12);
}

.service-item:hover {
    padding-left: 20px;
    padding-right: 20px;
    background: rgba(0,0,0,0.025);
}

.service-item b {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.service-item h2 {
    margin: 0 0 10px;

    font-size: clamp(28px, 4vw, 58px);
    line-height: 0.95;

    font-weight: 600;
    letter-spacing: -0.04em;
}

.service-item p {
    max-width: 650px;

    margin: 0;

    font-size: 15px;
    line-height: 1.7;

    color: #666;
}

.service-arrow {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 50%;

    font-size: 20px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.service-item:hover .service-arrow {
    background: #000;
    color: #fff;
    transform: rotate(45deg);
}


/* =========================================
   SERVICE MODAL
========================================= */

.service-modal {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 30px;
}

.service-modal.active {
    display: flex;
}

.modal-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,0.75);

    backdrop-filter: blur(12px);
}


/* =========================================
   MODAL CONTAINER
========================================= */

.modal-container {
    position: relative;

    z-index: 2;

    width: min(1200px, 100%);
    max-height: 90vh;

    overflow-y: auto;

    background: #fff;

    padding: 45px;

    border-radius: 4px;

    box-shadow: 0 30px 100px rgba(0,0,0,0.35);

    animation: modalOpen 0.45s ease;
}

@keyframes modalOpen {

    from {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


/* =========================================
   CLOSE BUTTON
========================================= */

.modal-close {

    position: absolute;

    top: 20px;
    right: 20px;

    width: 45px;
    height: 45px;

    border: 1px solid #ddd;
    border-radius: 50%;

    background: #fff;

    font-size: 27px;

    cursor: pointer;

    z-index: 10;

    transition: all 0.3s ease;
}

.modal-close:hover {
    background: #000;
    color: #fff;
}


/* =========================================
   MODAL HEADER
========================================= */

.modal-header {

    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 30px;

    margin-bottom: 35px;

    padding-right: 55px;
}

.modal-label {

    display: block;

    margin-bottom: 12px;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.18em;

    color: #777;
}

.modal-header h2 {

    margin: 0;

    font-size: clamp(32px, 5vw, 65px);

    line-height: 0.95;

    letter-spacing: -0.05em;
}


/* =========================================
   IMAGE / VIDEO TOGGLE
========================================= */

.gallery-toggle {

    display: flex;

    border: 1px solid #ddd;
}

.toggle-btn {

    padding: 13px 22px;

    border: 0;

    background: #fff;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.12em;

    cursor: pointer;

    transition: all 0.3s ease;
}

.toggle-btn.active {

    background: #000;

    color: #fff;
}

.toggle-btn:hover {
    background: #111;
    color: #fff;
}


/* =========================================
   GALLERY
========================================= */

.gallery-content {
    display: none;
}

.gallery-content.active {
    display: block;
}

.gallery-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


/* =========================================
   IMAGE CARD
========================================= */

.gallery-card {

    position: relative;

    overflow: hidden;

    aspect-ratio: 4 / 3;

    background: #eee;

    cursor: pointer;
}

.gallery-card img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.7s ease;
}

.gallery-card:hover img {
    transform: scale(1.06);
}

.gallery-card-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    padding: 20px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.65),
            transparent 50%
        );

    opacity: 0;

    transition: opacity 0.3s ease;
}

.gallery-card:hover .gallery-card-overlay {
    opacity: 1;
}

.gallery-card-overlay span {

    color: #fff;

    font-size: 12px;

    letter-spacing: 0.12em;
}


/* =========================================
   VIDEO CARDS
========================================= */

.video-card {

    position: relative;

    background: #111;

    overflow: hidden;

    aspect-ratio: 16 / 9;
}

.video-card video {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

.video-card-label {

    position: absolute;

    left: 15px;
    bottom: 15px;

    padding: 8px 12px;

    background: rgba(0,0,0,0.75);

    color: #fff;

    font-size: 10px;

    letter-spacing: 0.12em;
}


/* =========================================
   IMAGE FULLSCREEN VIEWER
========================================= */

.image-viewer {

    position: fixed;

    inset: 0;

    z-index: 10000;

    display: none;

    align-items: center;
    justify-content: center;

    background: rgba(0,0,0,0.95);

    padding: 50px;
}

.image-viewer.active {
    display: flex;
}

.image-viewer img {

    max-width: 90vw;
    max-height: 85vh;

    object-fit: contain;

    animation: viewerImage 0.35s ease;
}

@keyframes viewerImage {

    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}

.viewer-close {

    position: absolute;

    top: 25px;
    right: 30px;

    width: 50px;
    height: 50px;

    border: 1px solid rgba(255,255,255,0.4);

    border-radius: 50%;

    background: transparent;

    color: #fff;

    font-size: 30px;

    cursor: pointer;
}

.viewer-prev,
.viewer-next {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 55px;
    height: 55px;

    border: 1px solid rgba(255,255,255,0.4);

    border-radius: 50%;

    background: transparent;

    color: #fff;

    font-size: 25px;

    cursor: pointer;

    transition: all 0.3s ease;
}

.viewer-prev {
    left: 25px;
}

.viewer-next {
    right: 25px;
}

.viewer-prev:hover,
.viewer-next:hover {

    background: #fff;

    color: #000;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .service-item {

        grid-template-columns:
            45px 1fr 40px;

        padding: 28px 0;
    }

    .service-item:hover {

        padding-left: 8px;
        padding-right: 8px;
    }

    .service-item h2 {

        font-size: 27px;

        line-height: 1;
    }

    .service-item p {

        font-size: 13px;

        line-height: 1.6;
    }

    .service-arrow {

        width: 35px;
        height: 35px;

        font-size: 16px;
    }

    .modal-container {

        padding: 25px 18px;

        max-height: 94vh;
    }

    .modal-header {

        flex-direction: column;

        align-items: flex-start;

        padding-right: 45px;

        margin-bottom: 25px;
    }

    .modal-header h2 {

        font-size: 38px;
    }

    .gallery-toggle {

        width: 100%;
    }

    .toggle-btn {

        flex: 1;
    }

    .gallery-grid {

        grid-template-columns: 1fr;

        gap: 12px;
    }

    .image-viewer {

        padding: 20px;
    }

    .viewer-prev,
    .viewer-next {

        width: 42px;
        height: 42px;

        font-size: 18px;
    }

    .viewer-prev {
        left: 10px;
    }

    .viewer-next {
        right: 10px;
    }

}