/* =========================================================
ROOT
========================================================= */

:root{
    --black:#070707;
    --white:#f5f5f2;
    --muted:#a5a5a0;
    --line:#242424;
    --max:1240px;
}

*{
    box-sizing:border-box;
    cursor:none !important;
}

/* =========================================================
   SHINANX STUDIO — LUXURY AD POPUP
   ========================================================= */

.sx-ad-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;

    z-index: 999999;

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

    padding: 20px;

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

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}


/* OPEN */

.sx-ad-overlay.sx-ad-show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   POPUP CONTAINER
   ========================================================= */

.sx-ad-popup {
    position: relative;

    width: min(1100px, 100%);

    min-height: 500px;

    display: grid;

    grid-template-columns: 1.15fr .85fr;

    overflow: hidden;

    background: #090909;

    color: #fff;

    border:
        1px solid
        rgba(255,255,255,.15);

    box-shadow:
        0 40px 120px
        rgba(0,0,0,.75);

    transform:
        translateY(35px)
        scale(.94);

    transition:
        transform .5s
        cubic-bezier(.16,1,.3,1);
}


/* OPEN ANIMATION */

.sx-ad-show .sx-ad-popup {
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.sx-ad-content {
    position: relative;
    z-index: 5;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        55px
        clamp(30px, 5vw, 65px);
}


/* BRAND */

.sx-ad-brand {
    display: block;

    margin-bottom: 40px;

    color: #fff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .2em;
}


/* EYEBROW */

.sx-ad-eyebrow {
    margin-bottom: 18px;

    color: #777;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .2em;
}


/* TITLE */

.sx-ad-content h2 {
    max-width: 570px;

    margin: 0;

    font-family:
        Manrope,
        Inter,
        sans-serif;

    font-size:
        clamp(42px, 5vw, 67px);

    line-height: .94;

    letter-spacing: -.07em;
}

.sx-ad-content h2 span {
    display: block;

    color: #777;
}


/* DESCRIPTION */

.sx-ad-description {
    max-width: 500px;

    margin:
        25px 0;

    color: #aaa;

    font-size: 13px;

    line-height: 1.75;
}


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

.sx-ad-services {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 28px;
}

.sx-ad-services span {
    padding:
        7px 9px;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius: 50px;

    color: #777;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .12em;
}


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

.sx-ad-button {
    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 22px;

    padding:
        15px 20px;

    border-radius: 100px;

    background: #fff;

    color: #000;

    font-size: 11px;

    font-weight: 800;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.sx-ad-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 35px
        rgba(255,255,255,.15);
}

.sx-ad-button span {
    font-size: 17px;
}


/* FOOTER */

.sx-ad-footer {
    margin:
        20px 0 0;

    color: #444;

    font-size: 8px;
}


/* =========================================================
   RIGHT SIDE VIDEO
   ========================================================= */

.sx-ad-video {

    position: relative;

    min-height: 800px;

    overflow: hidden;

    background: #111;

}


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

.sx-ad-video-element {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    filter:
        brightness(.72)
        contrast(1.05);

    transform: scale(1.01);

}


/* =========================================================
   VIDEO OVERLAY
   ========================================================= */

.sx-ad-video-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05) 0%,
            rgba(0,0,0,.15) 40%,
            rgba(0,0,0,.78) 100%
        );

}


/* =========================================================
   VIDEO TEXT
   ========================================================= */

.sx-ad-video-text {

    position: absolute;

    z-index: 3;

    left: 25px;
    bottom: 25px;

    display: flex;

    flex-direction: column;

    color: #fff;

    pointer-events: none;

}


.sx-ad-video-text span {

    color: #aaa;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .25em;

}


.sx-ad-video-text strong {

    margin-top: 2px;

    font-family:
        Manrope,
        Inter,
        sans-serif;

    font-size: 32px;

    line-height: 1;

    letter-spacing: -.05em;

}

/* IMAGE */

.sx-ad-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    filter:
        grayscale(15%)
        contrast(1.05)
        brightness(.72);

    transition:
        transform .8s
        cubic-bezier(.16,1,.3,1);
}


/* IMAGE ZOOM */

.sx-ad-popup:hover
.sx-ad-image img {
    transform: scale(1.04);
}


/* IMAGE OVERLAY */

.sx-ad-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05),
            rgba(0,0,0,.75)
        );

    pointer-events: none;
}


/* IMAGE TEXT */

.sx-ad-image-text {
    position: absolute;

    left: 25px;
    bottom: 25px;

    display: flex;

    flex-direction: column;

    color: #fff;
}

.sx-ad-image-text span {
    font-size: 9px;

    letter-spacing: .25em;

    color: #aaa;
}

.sx-ad-image-text strong {
    font-family:
        Manrope,
        sans-serif;

    font-size: 30px;

    letter-spacing: -.05em;
}


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

.sx-ad-close {
    position: absolute;

    top: 16px;
    right: 16px;

    z-index: 30;

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.25);

    border-radius: 50%;

    background:
        rgba(0,0,0,.45);

    cursor: pointer;

    transition:
        .25s ease;
}

.sx-ad-close span {
    position: absolute;

    width: 15px;
    height: 1px;

    background: #fff;
}

.sx-ad-close span:first-child {
    transform: rotate(45deg);
}

.sx-ad-close span:last-child {
    transform: rotate(-45deg);
}

.sx-ad-close:hover {
    background: #fff;

    transform: rotate(90deg);
}

.sx-ad-close:hover span {
    background: #000;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 750px) {

    .sx-ad-popup {

        grid-template-columns: 1fr;

        width: min(
            600px,
            100%
        );

    }


    .sx-ad-video {

        min-height: 480px;

        height: 480px;

        order: -1;

    }


    .sx-ad-video-element {

        object-position: center;

    }


    .sx-ad-content {

        padding:
            35px 30px 30px;

    }

}


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

@media (max-width: 500px) {

    .sx-ad-overlay {

        padding: 12px;

    }


    .sx-ad-popup {

        width: 100%;

        max-height: 94vh;

        overflow-y: auto;

    }


    .sx-ad-video {

        min-height: 800px;

        height: 800px;


    }


    .sx-ad-video-element {

        object-fit: cover;

        object-position: center;


    }


    .sx-ad-video-text {

        left: 18px;

        bottom: 18px;

    }


    .sx-ad-video-text strong {

        font-size: 25px;

    }


    .sx-ad-content {

        padding:
            30px 22px 25px;

    }


    .sx-ad-content h2 {

        font-size: 40px;

    }


    .sx-ad-button {

        width: 100%;

        justify-content: center;

    }

}

/* =========================================================
   HIDE POPUP SCROLLBAR ON MOBILE
   ========================================================= */

@media (max-width: 500px) {

    .sx-ad-popup {
        overflow-y: auto;

        /* Firefox */
        scrollbar-width: none;

        /* IE / Edge */
        -ms-overflow-style: none;
    }

    /* Chrome / Safari / Edge */
    .sx-ad-popup::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

}


@media (max-width: 750px) {

    .sx-ad-popup {
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .sx-ad-popup::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

}

/* =========================================================
   DEFAULT CURSOR WHEN POPUP IS OPEN
   ========================================================= */

body.sx-ad-open,
body.sx-ad-open * {
    cursor: auto !important;
}

body.sx-ad-open
.sx-ad-close,
body.sx-ad-open
.sx-ad-button {
    cursor: pointer !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 750px) {

    .sx-ad-popup {
        grid-template-columns: 1fr;

        width: min(600px, 100%);

        min-height: auto;
    }

    .sx-ad-image {
        min-height: 230px;

        order: -1;
    }

    .sx-ad-content {
        padding: 35px 30px 30px;
    }

    .sx-ad-brand {
        margin-bottom: 25px;
    }

    .sx-ad-content h2 {
        font-size:
            clamp(
                40px,
                10vw,
                58px
            );
    }

}


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

@media (max-width: 500px) {

    .sx-ad-overlay {
        padding: 12px;
    }

    .sx-ad-popup {
        max-height: 94vh;

        overflow-y: auto;
    }

    .sx-ad-image {
        min-height: 190px;
    }

    .sx-ad-content {
        padding:
            30px 22px 25px;
    }

    .sx-ad-content h2 {
        font-size: 40px;
    }

    .sx-ad-description {
        font-size: 12px;
    }

    .sx-ad-button {
        width: 100%;

        justify-content: center;
    }

    .sx-ad-image-text {
        left: 18px;
        bottom: 18px;
    }

    .sx-ad-image-text strong {
        font-size: 25px;
    }

}

/* =========================================================
   SHOW DEFAULT CURSOR WHILE AD POPUP IS VISIBLE
   ========================================================= */

body.sx-ad-open,
body.sx-ad-open * {
    cursor: auto !important;
}

/* Keep the popup close button clickable */
body.sx-ad-open .sx-ad-close,
body.sx-ad-open .sx-ad-button {
    cursor: pointer !important;
}


/* =========================================================
SCROLL PROGRESS
========================================================= */

.scroll-progress{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:3px;
    z-index:9999;
    background:rgba(255,255,255,.10);
    pointer-events:none;
}

.scroll-progress span{
    display:block;
    width:0%;
    height:100%;
    background:#fff;
    box-shadow:0 0 14px rgba(255,255,255,.45);
    transform-origin:left center;
    will-change:width;
}


html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--white);
    color:#111;
    font-family:Inter,Arial,sans-serif;
}

a{
    text-decoration:none;
    color:inherit;
}

button,
input,
textarea,
select{
    font:inherit;
}


/* =========================================================
NAVIGATION
========================================================= */

.nav{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:20;

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

    padding:22px 4vw;

    color:#fff;

    transition:.3s;
}

.nav.scrolled{
    background:rgba(7,7,7,.82);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    padding-block:16px;

    border-bottom:1px solid #222;
}

.brand{
    display:flex;
    align-items:center;
    gap:11px;

    font-weight:700;
    letter-spacing:-.04em;
}

.brand b{
    font-weight:400;
}

.brand-mark{
    width:34px;
    height:34px;

    border:2px solid currentColor;
    border-radius:50%;

    display:grid;
    place-items:center;

    font-size:10px;
    letter-spacing:-.05em;

    overflow:hidden;
}

.brand-mark img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:28px;
    font-size:13px;
}

.nav-links a{
    opacity:.8;
    display:inline-flex;
    align-items:center;
    gap:7px;
    white-space:nowrap;
    transition:opacity .2s ease, transform .2s ease;
}

.nav-links a svg{
    width:14px;
    height:14px;
    stroke-width:1.7;
    flex:none;
}

.nav-links a:hover{
    opacity:1;
    transform:translateY(-1px);
}

.nav-cta{
    border:1px solid rgba(255,255,255,.45);
    padding:12px 18px;
    border-radius:100px;
    opacity:1!important;
    gap:8px!important;
}

.nav-cta svg{
    width:15px!important;
    height:15px!important;
}

.menu-btn{
    display:none;
    background:none;
    border:0;
    color:#fff;
    width:42px;
    height:42px;
    align-items:center;
    justify-content:center;
    padding:0;
}

.menu-btn svg{
    width:23px;
    height:23px;
}


/* =========================================================
HERO
========================================================= */

.hero{
    height:100svh;
    min-height:680px;

    position:relative;

    background:#111;
    color:#fff;

    display:flex;
    align-items:center;

    overflow:hidden;
}

.hero-video{
    position:absolute;

    width:100%;
    height:100%;

    object-fit:cover;

    filter:brightness(.55);

    z-index:0;
}

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

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.7),
            rgba(0,0,0,.15) 70%
        ),
        linear-gradient(
            0deg,
            rgba(0,0,0,.55),
            transparent 45%
        );

    z-index:1;
}

.hero-content{
    position:relative;
    z-index:2;

    max-width:900px;

    margin-left:8vw;
    padding-top:50px;
}

.eyebrow{
    font-size:11px;
    letter-spacing:.18em;
    font-weight:700;

    margin:0 0 25px;

    color:#bbb;
}

.hero h1{
    font-family:Manrope,sans-serif;

    font-size:clamp(48px,7.2vw,105px);

    line-height:.94;
    letter-spacing:-.07em;

    margin:0;
}

.hero h1 span{
    color:#aaa;
}

.hero-copy{
    max-width:600px;

    color:#ccc;

    line-height:1.7;

    margin:30px 0;
}

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

.btn{
    display:inline-flex;
    align-items:center;
    gap:24px;

    border:0;
    border-radius:100px;

    padding:16px 21px;

    cursor:pointer;

    font-weight:700;
}

.btn.primary{
    background:#fff;
    color:#000;
}

.btn.primary span{
    font-size:18px;
}

.btn svg{
    width:17px;
    height:17px;
    flex:none;
    stroke-width:1.8;
}

.text-link,
.under-link{
    border-bottom:1px solid currentColor;
    padding-bottom:5px;
    font-size:13px;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.text-link svg,
.under-link svg{
    width:15px;
    height:15px;
}

.hero-bottom{
    position:absolute;

    z-index:2;

    bottom:28px;
    left:4vw;
    right:4vw;

    display:flex;
    justify-content:space-between;

    font-size:11px;
    color:#bbb;
}


.hero-bottom span,
.hero-bottom{
    align-items:center;
}

.hero-bottom > span:last-child{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.hero-bottom svg{
    width:14px;
    height:14px;
}

.service-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.service-top svg{
    width:22px;
    height:22px;
    color:#aaa;
    transition:transform .3s ease, color .3s ease;
}

.service:hover .service-top svg{
    transform:translateY(-3px) rotate(-4deg);
    color:#fff;
}

.process-number{
    display:flex;
    align-items:center;
    gap:13px;
}

.process-number svg{
    width:17px;
    height:17px;
    color:#999;
}

.point-icon{
    width:17px;
    height:17px;
    margin-left:8px;
    vertical-align:middle;
    color:#777;
}

.eyebrow-with-icon{
    display:flex;
    align-items:center;
    gap:8px;
}

.eyebrow-with-icon svg{
    width:14px;
    height:14px;
}

.heading-icon{
    width:30px;
    height:30px;
    margin-bottom:12px;
    display:block;
}

.feedback-rating-label{
    display:flex;
    align-items:center;
    gap:7px;
}

.feedback-rating-label svg{
    width:14px;
    height:14px;
}

.footer-col h4{
    display:flex;
    align-items:center;
    gap:7px;
}

.footer-col h4 svg{
    width:13px;
    height:13px;
}

.footer-col a{
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.footer-col a svg{
    width:13px;
    height:13px;
}

.footer-mail{
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.footer-mail svg{
    width:13px;
    height:13px;
}

.feedback-close{
    display:inline-flex;
    align-items:center;
}

.feedback-close svg{
    width:16px;
    height:16px;
}

/* =========================================================
TICKER
========================================================= */

.ticker{
    background:#111;
    color:#fff;

    overflow:hidden;
    white-space:nowrap;

    padding:19px 0;

    font-size:12px;
    letter-spacing:.18em;
}

.ticker div{
    animation:marquee 24s linear infinite;
}

@keyframes marquee{
    to{
        transform:translateX(-30%);
    }
}


/* =========================================================
COMMON SECTIONS
========================================================= */

.section{
    max-width:var(--max);
    margin:auto;
    padding:130px 4vw;
}

.section-label{
    font-size:11px;
    font-weight:800;

    letter-spacing:.16em;

    margin-bottom:45px;
}

.dark{
    max-width:none;

    background:var(--black);
    color:var(--white);

    padding-left:max(
        4vw,
        calc((100% - var(--max))/2 + 4vw)
    );

    padding-right:max(
        4vw,
        calc((100% - var(--max))/2 + 4vw)
    );
}


/* =========================================================
ABOUT
========================================================= */

.intro{
    display:grid;
    grid-template-columns:28% 1fr;

    gap:5vw;
}

.intro h2,
.contact h2,
.founder h2,
.why h2{
    font:
        700 clamp(38px,5vw,72px)/.98
        Manrope,sans-serif;

    letter-spacing:-.06em;

    margin:0;
}

.intro em,
.contact em,
.founder em,
.why em{
    font-style:normal;
    color:#999;
}

.large-copy{
    font-size:clamp(19px,2vw,27px);
    line-height:1.5;

    max-width:800px;

    color:#444;

    margin:35px 0;
}

.under-link{
    display:inline-block;
}


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

.service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    border-top:1px solid var(--line);
}

.service{
    padding:38px 25px 45px 0;
    border-bottom:1px solid var(--line);
}

.service:nth-child(3n+2),
.service:nth-child(3n+3){
    padding-left:30px;
    border-left:1px solid var(--line);
}

.service span{
    font-size:11px;
    color:#777;
}

.service h3{
    font:
        700 29px Manrope,sans-serif;

    margin:65px 0 15px;

    letter-spacing:-.04em;
}

.service p{
    color:#999;
    line-height:1.7;
    max-width:320px;
}


/* =========================================================
WORK
========================================================= */

.section-head{
    display:flex;
    justify-content:space-between;
    gap:20px;
}

.section-head p{
    color:#777;
}

.work-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.project{
    min-height:520px;

    position:relative;
    overflow:hidden;

    background:#ddd;
}

.project::before{
    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(135deg,#222,#777);

    transition:.5s;
}

.project:hover::before{
    transform:scale(1.04);
}

.p2::before{
    background:linear-gradient(135deg,#d6d2ca,#47443f);
}

.p3::before{
    background:linear-gradient(135deg,#bbb,#222);
}

.p4::before{
    background:linear-gradient(135deg,#eee,#555);
}

.project-inner{
    position:absolute;
    inset:0;

    padding:30px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    color:#fff;

    background:
        linear-gradient(
            0deg,
            rgba(0,0,0,.65),
            transparent 55%
        );
}

.project-inner small{
    font-size:10px;
    letter-spacing:.15em;
}

.project h3{
    font:
        700 40px Manrope,sans-serif;

    letter-spacing:-.05em;

    margin:12px 0;
}

.project-inner span{
    font-size:12px;
}


/* =========================================================
PROCESS
========================================================= */

.process-list{
    border-top:1px solid #ddd;
}

.process-list>div{
    display:grid;

    grid-template-columns:10% 25% 1fr;

    align-items:center;

    padding:30px 0;

    border-bottom:1px solid #ddd;
}

.process-list b{
    font-size:11px;
}

.process-list h3{
    font:
        700 30px Manrope,sans-serif;

    margin:0;

    letter-spacing:-.04em;
}

.process-list p{
    margin:0;
    color:#777;
}


/* =========================================================
FOUNDER
========================================================= */

.founder-grid{
    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:8vw;

    align-items:center;
}

.founder-photo{
    aspect-ratio: 9/14;

    background:linear-gradient(145deg,#333,#0b0b0b);

    display:flex;
    align-items:flex-end;

    padding:25px;

    overflow:hidden;
}

.founder-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.founder-name{
    margin:14px 0 0;

    color:#fff;

    font:
        700 26px/1 Manrope,sans-serif;
}

.founder .large-copy{
    color:#ddd;
}

.muted{
    color:#777;
    line-height:1.7;
}


/* =========================================================
TEAM
========================================================= */

.team-grid{
    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:15px;
}

.person{
    border:1px solid #ddd;

    padding:20px;

    min-height:350px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.avatar{
    height: 100%;
    margin-bottom:auto;
    overflow:hidden;
}

.avatar img{
    height: 100%;
    width: 100%;

    object-fit:cover;

    background:linear-gradient(135deg,#eee,#aaa);
}

.badge{
    align-self:flex-start;

    background:#111;
    color:#fff;

    padding:6px 9px;

    font-size:9px;

    letter-spacing:.12em;

    border-radius:20px;

    margin-top:20px;
}

.person h3{
    font:
        700 25px Manrope,sans-serif;

    margin:14px 0 4px;

    letter-spacing:-.04em;
}

.person p{
    color:#777;
    font-size:13px;
    margin:0;
}


/* =========================================================
WHY
========================================================= */

.why-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8vw;
}

.points p{
    border-bottom:1px solid #292929;

    padding:20px 0;

    color:#bbb;

    margin:0;
}

.points b{
    display:inline-block;

    width:50px;

    color:#666;

    font-size:11px;
}


/* =========================================================
FORMS
========================================================= */

.contact-wrap{
    max-width:900px;
}

.contact-wrap>p{
    color:#777;

    font-size:17px;

    margin:25px 0 45px;
}

form{
    display:grid;
    gap:14px;
}

input,
textarea,
select{
    width:100%;

    border:1px solid #ccc;

    background:transparent;

    padding:18px;

    border-radius:2px;

    outline:none;
}

input:focus,
textarea:focus,
select:focus{
    border-color:#111;
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.form-status{
    min-height:20px;

    font-size:13px;

    color:#555;
}


/* =========================================================
WEB3FORMS HONEYPOT
========================================================= */

.web3forms-honeypot{
    display:none!important;

    position:absolute!important;

    left:-9999px!important;

    opacity:0!important;

    height:0!important;
    width:0!important;

    pointer-events:none!important;
}


/* =========================================================
FEEDBACK
========================================================= */

.feedback-section{
    background:#f5f5f2;
}

.feedback-layout{
    display:grid;

    grid-template-columns:.8fr 1.2fr;

    gap:7vw;

    align-items:start;
}

.feedback-intro h2{
    font:
        700 clamp(40px,5vw,72px)/.98
        Manrope,sans-serif;

    letter-spacing:-.06em;

    margin:0;
}

.feedback-intro h2 em{
    color:#999;
    font-style:normal;
}

.feedback-intro p{
    max-width:470px;

    color:#777;

    line-height:1.75;

    margin:28px 0 0;
}

.feedback-form{
    display:grid;
    gap:14px;
}

.feedback-form input,
.feedback-form textarea,
.feedback-form select{
    background:#fff;
    border:1px solid #d7d7d2;
}

.feedback-form textarea{
    resize:vertical;
    min-height:145px;
}

.feedback-rating{
    display:grid;
    gap:9px;
}

.feedback-rating-label{
    font-size:11px;
    font-weight:800;
    letter-spacing:.14em;
    color:#555;
}

.rating-options{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.rating-options label{
    position:relative;
}

.rating-options input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.rating-options span{
    display:inline-flex;

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

    min-width:46px;
    height:42px;

    padding:0 12px;

    border:1px solid #d2d2cd;

    background:#fff;

    border-radius:999px;

    font-size:13px;

    transition:.2s ease;
}

.rating-options label:hover span{
    border-color:#111;
    transform:translateY(-1px);
}

.rating-options input:checked+span{
    background:#111;
    color:#fff;
    border-color:#111;
}

.feedback-status{
    min-height:20px;

    margin:0;

    font-size:13px;

    color:#777;
}

.feedback-submit{
    width:max-content;
}

.feedback-note{
    font-size:11px;
    color:#888;
    margin:0;
}


/* =========================================================
FEEDBACK MODAL
========================================================= */

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

    z-index:10000;

    display:grid;
    place-items:center;

    padding:25px;

    background:rgba(0,0,0,.62);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transition:.3s ease;
}

.feedback-modal.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.feedback-modal-card{
    width:min(470px,100%);

    background:#fff;
    color:#111;

    border-radius:22px;

    padding:38px;

    text-align:center;

    box-shadow:0 25px 80px rgba(0,0,0,.25);

    transform:translateY(18px) scale(.97);

    transition:.3s ease;
}

.feedback-modal.show .feedback-modal-card{
    transform:translateY(0) scale(1);
}

.feedback-success-icon{
    width:62px;
    height:62px;

    margin:0 auto 20px;

    border-radius:50%;

    display:grid;
    place-items:center;

    background:#111;
    color:#fff;

    font-size:27px;
}

.feedback-modal-card h3{
    font:
        700 30px/1 Manrope,sans-serif;

    letter-spacing:-.04em;

    margin:0 0 12px;
}

.feedback-modal-card p{
    color:#777;
    line-height:1.6;
    margin:0 0 25px;
}

.feedback-close{
    width:100%;
    justify-content:center;
}


/* =========================================================
REVIEWS
========================================================= */

.reviews-section{
    background:#080808;
    color:#fff;

    max-width:none;

    overflow:hidden;

    padding-left:0;
    padding-right:0;
}

.reviews-head{
    max-width:var(--max);

    margin:auto;

    padding:0 4vw 45px;

    display:flex;

    justify-content:space-between;

    align-items:end;

    gap:25px;
}

.reviews-head .section-label{
    margin-bottom:0;
}

.reviews-head p{
    color:#777;
    margin:0;
    font-size:13px;
}

.review-viewport{
    overflow:hidden;
    cursor:grab;

    padding-bottom:10px;
}

.review-viewport:active{
    cursor:grabbing;
}

.review-track{
    display:flex;

    gap:16px;

    width:max-content;

    padding:0 4vw;

    animation:reviewMarquee 42s linear infinite;
}

.review-viewport:hover .review-track{
    animation-play-state:paused;
}

.review-card{
    width:min(410px,78vw);

    min-height:245px;

    padding:28px;

    border:1px solid #2a2a2a;

    background:#101010;

    border-radius:18px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    flex-shrink:0;
}

.review-stars{
    letter-spacing:3px;

    font-size:13px;

    margin-bottom:22px;
}

.review-card blockquote{
    margin:0;

    color:#d5d5d5;

    font:
        500 19px/1.55 Manrope,sans-serif;

    letter-spacing:-.02em;
}

.review-person{
    display:flex;

    align-items:center;

    gap:12px;

    margin-top:25px;
}

.review-avatar{
    width:40px;
    height:40px;

    border-radius:50%;

    display:grid;
    place-items:center;

    background:#252525;
    color:#fff;

    font-size:12px;
    font-weight:800;
}

.review-person strong{
    display:block;
    font-size:13px;
}

.review-person span{
    display:block;

    color:#666;

    font-size:11px;

    margin-top:4px;
}

@keyframes reviewMarquee{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}


/* =========================================================
FOOTER
========================================================= */

.site-footer{
    background:#080808;
    color:#fff;

    padding:78px 4vw 25px;

    font-size:12px;

    border-top:1px solid #222;
}

.footer-top{
    max-width:var(--max);

    margin:auto;

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:50px;

    padding-bottom:70px;
}

.footer-brand{
    margin-bottom:24px;
}

.footer-brand-col>p{
    max-width:350px;

    color:#777;

    line-height:1.75;

    margin:0 0 22px;
}

.footer-mail{
    display:inline-block;

    color:#fff;

    border-bottom:1px solid #555;

    padding-bottom:5px;
}

.footer-col{
    display:flex;

    flex-direction:column;

    gap:13px;
}

.footer-col h4{
    margin:0 0 10px;

    font-size:10px;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:#666;
}

.footer-col a,
.footer-col span{
    color:#999;
    transition:.2s;
}

.footer-col a:hover{
    color:#fff;
}

.footer-bottom{
    max-width:var(--max);

    margin:auto;

    padding-top:22px;

    border-top:1px solid #242424;

    display:flex;

    justify-content:space-between;

    gap:25px;

    color:#666;
}

.footer-bottom div{
    display:flex;
    gap:25px;
}

.footer-bottom a:hover{
    color:#fff;
}


/* =========================================================
CUSTOM CURSOR
========================================================= */

.cursor-dot,
.cursor-ring{
    position:fixed;

    pointer-events:none;

    z-index:100;

    width:7px;
    height:7px;

    background:#fff;

    border-radius:50%;

    mix-blend-mode:difference;

    transform:translate(-50%,-50%);
}

.cursor-ring{
    width:32px;
    height:32px;

    background:transparent;

    border:1px solid #fff;

    transition:.12s;

    mix-blend-mode:difference;
}


/* =========================================================
TABLET
========================================================= */

@media(max-width:800px){

    .nav{
        padding:18px 5vw;
    }

    .menu-btn{
        display:flex;

        flex-direction:column;

        gap:5px;
    }

    .menu-btn span{
        width:24px;
        height:1px;
        background:#fff;
    }

    .nav-links{
        position:fixed;

        top:0;
        left:0;
        bottom:0;

        width:min(82vw,360px);

        height:100svh;

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        justify-content:center;

        gap:24px;

        background:rgba(10,10,10,.96);

        backdrop-filter:blur(22px);

        padding:90px 32px 40px;

        border-right:1px solid #292929;

        transform:translateX(-105%);

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transition:
            transform .42s cubic-bezier(.22,1,.36,1),
            opacity .28s ease,
            visibility .42s;

        overflow-y:auto;

        z-index:25;
    }

    .nav-links.open{
        transform:translateX(0);

        opacity:1;

        visibility:visible;

        pointer-events:auto;
    }

    .nav-links a{
        font-size:18px;
        letter-spacing:-.02em;
        opacity:.88;
        gap:11px;
    }

    .nav-links a svg{
        width:18px;
        height:18px;
    }

    .nav-links .nav-cta{
        margin-top:10px;
        padding:13px 20px;
        font-size:13px;
    }

    .nav-links::before{
        content:"MENU";

        position:absolute;

        top:30px;
        left:32px;

        color:#666;

        font-size:10px;

        font-weight:800;

        letter-spacing:.18em;
    }

    .menu-btn{
        position:relative;
        z-index:30;
    }

    .hero-content{
        margin:0 5vw;
    }

    .hero h1{
        font-size:clamp(48px,14vw,76px);
    }

    .hero-bottom span:last-child{
        display:none;
    }

    .section{
        padding:90px 5vw;
    }

    .intro,
    .founder-grid,
    .why-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .service-grid,
    .team-grid{
        grid-template-columns:1fr 1fr;
    }

    .service:nth-child(3n+2),
    .service:nth-child(3n+3){
        padding-left:0;
        border-left:0;
    }

    .service:nth-child(even){
        padding-left:20px;
        border-left:1px solid var(--line);
    }

    .work-grid{
        grid-template-columns:1fr;
    }

    .project{
        min-height:400px;
    }

    .process-list>div{
        grid-template-columns:15% 1fr;
    }

    .process-list p{
        grid-column:2;
    }

    .process-list h3{
        font-size:25px;
    }

    .form-row{
        grid-template-columns:1fr;
    }

    .footer-top{
        grid-template-columns:1fr 1fr;

        gap:40px;

        padding-bottom:45px;
    }

    .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
    }

    .footer-bottom div{
        gap:18px;
    }

    .cursor-dot,
    .cursor-ring{
        display:none;
    }

    .feedback-layout{
        grid-template-columns:1fr;
        gap:45px;
    }

    .feedback-submit{
        width:100%;
        justify-content:center;
    }

    .feedback-modal-card{
        padding:30px 22px;
    }

    .reviews-head{
        display:block;
        padding:0 5vw 35px;
    }

    .reviews-head p{
        margin-top:12px;
    }

    .review-track{
        padding:0 5vw;
    }
}


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

@media(max-width:500px){

    .service-grid,
    .team-grid{
        grid-template-columns:1fr;
    }

    .service:nth-child(even){
        padding-left:0;
        border-left:0;
    }

    .project{
        min-height:340px;
    }

    .hero{
        min-height:650px;
    }

    .hero-actions{
        align-items:flex-start;

        flex-direction:column;

        gap:20px;
    }

    .section-head{
        display:block;
    }
}


/* =========================================================
REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after{
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }

}




/* =========================================================
   DEVELOPER TOOLS DETECTED SCREEN
   SHINANX STUDIO
   ========================================================= */

.devtools-screen {
    position: fixed;
    inset: 0;
    z-index: 999999999;

    width: 100%;
    min-height: 100svh;

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

    padding: 30px;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(255,255,255,.055),
            transparent 32%
        ),
        #050505;

    color: #fff;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    overflow: hidden;
}


/* Subtle background grid */

.devtools-screen::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 25%,
            #000 75%,
            transparent
        );

    pointer-events: none;
}


/* Main card */

.devtools-card {
    position: relative;
    z-index: 2;

    width: min(620px, 100%);

    padding: 58px 55px;

    text-align: center;

    border: 1px solid rgba(255,255,255,.11);

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.018)
        );

    box-shadow:
        0 40px 120px rgba(0,0,0,.65),
        inset 0 1px 0 rgba(255,255,255,.07);

    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

    animation:
        devtoolsCardIn .7s
        cubic-bezier(.22,1,.36,1)
        both;
}


/* Security icon */

.devtools-icon {
    width: 72px;
    height: 72px;

    margin: 0 auto 25px;

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

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.16);

    background: rgba(255,255,255,.045);

    box-shadow:
        0 0 0 8px rgba(255,255,255,.018),
        0 15px 40px rgba(0,0,0,.35);
}


.devtools-icon span {
    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    background: #fff;

    color: #050505;

    font-size: 22px;
    font-weight: 800;

    font-family: Arial, sans-serif;
}


/* Small label */

.devtools-label {
    margin-bottom: 18px;

    color: #777;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .2em;

    text-transform: uppercase;
}


/* Heading */

.devtools-card h1 {
    margin: 0;

    font-family:
        Manrope,
        Inter,
        sans-serif;

    font-size: clamp(42px, 7vw, 68px);

    line-height: .98;

    letter-spacing: -.055em;

    font-weight: 700;
}


.devtools-card h1 em {
    color: #777;

    font-style: normal;
}


/* Description */

.devtools-card p {
    max-width: 470px;

    margin: 28px auto 0;

    color: #929292;

    font-size: 14px;

    line-height: 1.75;

    letter-spacing: -.01em;
}


/* Divider */

.devtools-line {
    width: 100%;
    height: 1px;

    margin: 38px 0 22px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.16),
            transparent
        );
}


/* Footer */

.devtools-footer {
    display: flex;

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

    gap: 20px;

    color: #555;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;
}


/* Entrance animation */

@keyframes devtoolsCardIn {

    from {
        opacity: 0;
        transform:
            translateY(25px)
            scale(.96);
    }

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

}


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

@media (max-width: 600px) {

    .devtools-screen {
        padding: 20px;
    }

    .devtools-card {
        padding: 45px 25px;

        border-radius: 22px;
    }

    .devtools-icon {
        width: 62px;
        height: 62px;

        margin-bottom: 22px;
    }

    .devtools-icon span {
        width: 36px;
        height: 36px;

        font-size: 19px;
    }

    .devtools-card h1 {
        font-size: clamp(
            39px,
            12vw,
            54px
        );
    }

    .devtools-card p {
        font-size: 13px;

        line-height: 1.7;
    }

    .devtools-footer {
        flex-direction: column;

        gap: 8px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .devtools-card {
        animation: none;
    }

}