:root {

            --bg: #090909;

            --surface: #101010;

            --line: #303030;

            --text: #f1f1f1;

            --muted: #929292

        }



        * {

            box-sizing: border-box

        }



        html {

            scroll-behavior: smooth

        }



        body {

            margin: 0;

            background: var(--bg);

            color: var(--text);

            font-family: 'DM Sans', sans-serif

        }



        a {

            color: inherit;

            text-decoration: none

        }



        button {

            font: inherit

        }



        header {

            height: 78px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            border-bottom: 1px solid var(--line);

            padding: 0 5vw;

            position: sticky;

            top: 0;

            background: #090909ed;

            backdrop-filter: blur(15px);

            z-index: 5

        }



        .logo {

            font: 800 23px Manrope, sans-serif;

            letter-spacing: -1.5px

        }



        .logo span {

            color: #777

        }



        .nav {

            display: flex;

            gap: 30px;

            font-size: 12px;

            letter-spacing: .12em;

            text-transform: uppercase

        }



        .nav a:hover,

        .social a:hover {

            color: #aaa

        }



        .lang {

            border: 1px solid #555;

            background: transparent;

            color: white;

            padding: 9px 13px;

            cursor: pointer

        }



        .wrap {

            max-width: 1450px;

            margin: auto;

            padding: 0 5vw

        }



        .eyebrow {

            color: #aaa;

            letter-spacing: .18em;

            font-size: 11px;

            text-transform: uppercase

        }



        .hero {

            min-height: 690px;

            display: grid;

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

            border-bottom: 1px solid var(--line)

        }



        .hero-copy {

            padding: 120px 5vw 100px 0;

            display: flex;

            flex-direction: column;

            justify-content: center

        }



        .hero h1 {

            font: 700 clamp(44px, 6.1vw, 98px)/1.08 Manrope, sans-serif;

            letter-spacing: -.065em;

            margin: 30px 0

        }



        .hero p {

            color: #999;

            line-height: 1.8;

            max-width: 510px

        }



        .actions {

            display: flex;

            gap: 24px;

            align-items: center;

            margin-top: 36px;

            flex-wrap: wrap

        }



        .primary {

            background: #f3f3f3;

            color: #111;

            padding: 16px 23px;

            font-size: 13px;

            font-weight: 700

        }



        .subtle {

            font-size: 13px;

            border-bottom: 1px solid #777;

            padding-bottom: 6px

        }



        .hero-art {

            position: relative;

            overflow: hidden;

            background: linear-gradient(140deg, #161616, #070707);

            border-left: 1px solid var(--line);

            display: flex;

            align-items: center;

            justify-content: center

        }



        .hero-art:before {

            content: '';

            position: absolute;

            inset: 0;

            background: linear-gradient(90deg, transparent 49.8%, #343434 50%, transparent 50.2%), linear-gradient(0deg, transparent 49.8%, #343434 50%, transparent 50.2%);

            background-size: 120px 120px;

            opacity: .25

        }



        .screen {

            width: 76%;

            aspect-ratio: 1.28;

            border: 1px solid #555;

            background: #111;

            box-shadow: 28px 30px 80px #000;

            transform: perspective(900px) rotateY(-13deg) rotateX(6deg);

            padding: 18px

        }



        .screen-top {

            display: flex;

            gap: 6px;

            border-bottom: 1px solid #333;

            padding-bottom: 14px

        }



        .screen-top i {

            width: 6px;

            height: 6px;

            border-radius: 50%;

            background: #666

        }



        .screen-body {

            padding: 36px 15px

        }



        .screen-body strong {

            font: 700 clamp(22px, 3vw, 44px)/1.15 Manrope;

            letter-spacing: -.06em

        }



        .screen-body p {

            font-size: 12px

        }



        .screen-grid {

            display: grid;

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

            gap: 8px;

            margin-top: 30px

        }



        .screen-grid div {

            height: 70px;

            background: linear-gradient(140deg, #292929, #0a0a0a);

            border: 1px solid #333

        }



        .section {

            padding: 110px 0

        }



        .section-head {

            display: flex;

            align-items: end;

            justify-content: space-between;

            gap: 20px;

            margin-bottom: 45px

        }



        .section h2 {

            font: 700 clamp(35px, 5vw, 68px)/1.1 Manrope;

            letter-spacing: -.06em;

            margin: 12px 0

        }



        .section-desc {

            color: #999;

            max-width: 420px;

            line-height: 1.7

        }



        .projects {

            display: grid;

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

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

            border-left: 1px solid var(--line)

        }



        .project {

            border-right: 1px solid var(--line);

            border-bottom: 1px solid var(--line);

            padding: 22px;

            min-width: 0

        }



        .visual {

            aspect-ratio: 1.35;

            background: #151515;

            display: flex;

            align-items: center;

            justify-content: center;

            overflow: hidden;

            position: relative;

            border: 1px solid #252525

        }



        .visual:before {

            content: '';

            position: absolute;

            inset: 0;

            background: repeating-linear-gradient(90deg, transparent 0 75px, #ffffff07 76px), repeating-linear-gradient(0deg, transparent 0 75px, #ffffff07 76px)

        }



        .mock {

            width: 76%;

            height: 70%;

            background: #0a0a0a;

            border: 1px solid #515151;

            box-shadow: 14px 18px 50px #000;

            transform: rotate(-5deg);

            padding: 16px;

            position: relative

        }



        .mock b {

            font: 800 clamp(18px, 3vw, 39px) Manrope;

            letter-spacing: -.07em

        }



        .mock small {

            display: block;

            color: #999;

            margin-top: 10px

        }



        .mock hr {

            border: 0;

            border-top: 1px solid #444;

            margin: 18px 0

        }



        .mock .blocks {

            display: flex;

            gap: 8px

        }



        .mock .blocks i {

            background: #272727;

            display: block;

            flex: 1;

            height: 65px

        }



        .project:nth-child(even) .mock {

            transform: rotate(5deg)

        }



        .project-meta {

            display: flex;

            justify-content: space-between;

            align-items: center;

            gap: 12px;

            margin-top: 20px

        }



        .project h3 {

            font: 700 22px Manrope;

            margin: 0

        }



        .project p {

            color: #999;

            font-size: 13px;

            line-height: 1.6

        }



        .arrow {

            font-size: 26px

        }



        .about {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 9vw;

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

        }



        .about p {

            color: #aaa;

            line-height: 1.9

        }



        .tags {

            display: flex;

            gap: 9px;

            flex-wrap: wrap;

            margin-top: 25px

        }



        .tags span {

            border: 1px solid #444;

            padding: 10px 13px;

            font-size: 12px

        }



        .services {

            display: grid;

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

            border-left: 1px solid var(--line);

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

        }



        .service {

            padding: 30px;

            border-right: 1px solid var(--line);

            border-bottom: 1px solid var(--line);

            min-height: 215px

        }



        .service .num {

            color: #777;

            font-size: 12px

        }



        .service h3 {

            font: 700 23px Manrope;

            margin-top: 40px

        }



        .service p {

            color: #999;

            line-height: 1.6;

            font-size: 13px

        }



        .contact {

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

            padding: 110px 0

        }



        .contact h2 {

            font: 700 clamp(45px, 7vw, 105px)/1.1 Manrope;

            letter-spacing: -.07em;

            margin: 20px 0 35px

        }



        .social {

            display: flex;

            gap: 28px;

            flex-wrap: wrap;

            margin-top: 35px;

            color: #bbb;

            font-size: 13px

        }



        footer {

            padding: 28px 5vw;

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

            display: flex;

            justify-content: space-between;

            color: #777;

            font-size: 12px;

            gap: 20px

        }



        @media(max-width:850px) {

            .nav {

                gap: 12px;

                font-size: 10px

            }



            .hero {

                grid-template-columns: 1fr

            }



            .hero-copy {

                padding: 90px 0

            }



            .hero-art {

                min-height: 390px;

                border-left: 0;

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

            }



            .section {

                padding: 75px 0

            }



            .about {

                grid-template-columns: 1fr;

                gap: 10px

            }



            .services {

                grid-template-columns: 1fr

            }



            .section-head {

                align-items: start;

                flex-direction: column

            }

        }



        @media(max-width:560px) {

            header {

                height: 66px

            }



            .nav a:nth-child(2),

            .nav a:nth-child(3) {

                display: none

            }



            .projects {

                grid-template-columns: 1fr

            }



            .hero h1 {

                font-size: 44px

            }



            .hero-art {

                min-height: 310px

            }



            .screen {

                width: 80%

            }



            .contact {

                padding: 75px 0

            }



            .contact h2 {

                font-size: 48px

            }



            footer {

                flex-direction: column

            }



            .section h2 {

                font-size: 40px

            }

        }

    
/* Enhancements without altering original visual */
.project a.project-link{display:block;color:inherit}.project img.project-image{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}.project .visual:has(img){background:#151515}.form-field{width:100%;padding:14px;background:#101010;border:1px solid #444;color:#eee;margin:8px 0 18px}.form-label{display:block;color:#bbb;font-size:13px}.admin-table{width:100%;border-collapse:collapse}.admin-table td,.admin-table th{border-bottom:1px solid #333;padding:13px;text-align:left}.admin-panel{background:#141414;border:1px solid #333;padding:25px;margin:20px 0}.notice{padding:14px;border:1px solid #555;margin:15px 0}.admin-nav{display:flex;gap:18px;flex-wrap:wrap}.page-intro{padding:90px 0 45px}.page-intro h1{font:700 clamp(42px,6vw,85px)/1.1 Manrope;letter-spacing:-.06em}.project-detail img{width:100%;max-height:620px;object-fit:contain;background:#151515;border:1px solid #333}.content-prose{max-width:850px;color:#bbb;line-height:1.9;white-space:pre-line}.form-button{cursor:pointer;border:0}.inline-actions{display:flex;gap:12px;flex-wrap:wrap}.muted{color:#999}.admin-small{font-size:12px;color:#aaa}.project-card-link{display:block}.project-card-link:hover .arrow{transform:translate(4px,-4px)}.arrow{transition:transform .2s}.admin-wrap{max-width:1100px;margin:40px auto;padding:0 20px}