:root { --black:#0b0b0b; --graphite:#171717; --charcoal:#242424; --silver:#a9aaa8; --mist:#e8e8e4; --paper:#f4f4f1; --lime:#d8ff3e; --line:rgba(11,11,11,.16); font-size:16px; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body { margin:0; font-family:"Manrope",sans-serif; color:var(--black); background:var(--paper); line-height:1.6; }

img { max-width:100%; display:block; }

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

.container { width:min(1180px,calc(100% - 4rem)); margin:0 auto; }

.eyebrow,.service-number,.hero-meta,.project-overlay span { font-family:"DM Mono",monospace; }
.eyebrow { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--silver); margin:0 0 1.1rem; }

h1,h2,h3 { font-weight:800; line-height:1.03; letter-spacing:-.055em; }

h1 { font-size:clamp(4rem,9vw,8.3rem); max-width:850px; margin-bottom:1.5rem; }

h2 { font-size:clamp(2.7rem,5vw,5.4rem); margin-bottom:1.5rem; }

p { margin-top:0; color:#646563; }
.about h2 span { color:#8c8d89; }
em { color:var(--lime); font-style:normal; }

.section-note {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--steel-light);
}

.site-header { position:absolute; width:100%; z-index:5; color:#fff; border-bottom:1px solid rgba(255,255,255,.18); }

.header-flex { display:flex; align-items:center; justify-content:space-between; padding:1.4rem 0; }

.logo { display:inline-flex; align-items:center; gap:.65rem; font-weight:800; }
.logo-mark { display:grid; place-items:center; width:2rem; height:2rem; border:1px solid var(--lime); color:var(--lime); font-size:.9rem; }
.logo-text { font-size:1.05rem; letter-spacing:-.04em; }
.logo-text span { color:var(--lime); }

.logo.small .logo-text { font-size:1rem; }

.primary-nav ul { list-style:none; display:flex; gap:2.1rem; margin:0; padding:0; }

.primary-nav a { font-size:.75rem; font-family:"DM Mono",monospace; text-transform:uppercase; color:#d4d4d1; }

.primary-nav a:hover { color:var(--lime); }

.menu-toggle { display:none; background:none; border:0; cursor:pointer; padding:.4rem; }

.menu-toggle span { display:block; width:24px; height:1px; background:#fff; margin:5px; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.btn.primary {
    background: var(--accent);
    color: var(--ink);
}

.btn.primary:hover {
    background: var(--accent-dark);
    transform: translateY(-1px);
}

.btn.ghost {
    border-color: var(--line);
    color: var(--ink);
    background: transparent;
}

.btn.ghost:hover {
    border-color: var(--steel-light);
}

/* Hero */
.hero {
    padding: 4.5rem 0 3.5rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--paper) 100%);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
}

.hero-ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.hero-visual {
    background: var(--ink);
    border-radius: var(--radius);
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.hero-visual .visual-card {
    text-align: center;
    color: #cbd5e1;
}

.hero-visual .tag {
    display: inline-block;
    background: var(--accent);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}

/* About */
.about {
    padding: 4rem 0;
}

.about-grid {
    max-width: 720px;
}

/* Services */
.services {
    padding: 4rem 0;
    background: var(--panel);
}

.section-heading {
    max-width: 640px;
    margin-bottom: 2.5rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.service-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.75rem;
}

.service-card h3 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.service-card p {
    font-size: 0.9rem;
    margin: 0;
}

/* Projects */
.projects {
    padding: 4rem 0;
}

/* Contact */
.contact {
    padding: 4.5rem 0;
    background: var(--ink);
    color: #e2e8f0;
}

.contact .eyebrow {
    color: var(--accent);
}

.contact h2 {
    color: #fff;
}

.contact-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 3rem;
}

.contact-details {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-weight: 600;
}

.contact-form {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-form label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.contact-form input,
.contact-form textarea {
    font: inherit;
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

.contact-form textarea {
    min-height: 110px;
    resize: vertical;
}

.contact-form .btn.primary {
    align-self: flex-start;
}

/* Footer */
.site-footer {
    padding: 2.5rem 0;
    border-top: 1px solid var(--line);
}

.footer-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-flex p {
    margin: 0.3rem 0 0;
    font-size: 0.82rem;
    color: var(--steel-light);
}

.footer-links {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--steel);
}

/* Responsive */
@media (max-width: 860px) {
    .hero-grid,
    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .menu-toggle {
        display: flex;
    }

    .primary-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease;
    }

    .primary-nav.open {
        max-height: 320px;
    }

    .primary-nav ul {
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 0;
    }

    .primary-nav li {
        padding: 0.75rem var(--container-pad, 1.5rem);
    }
}

/* Premium 2024 visual system */
.hero { min-height:min(800px,100vh); position:relative; display:flex; align-items:flex-end; overflow:hidden; color:#fff; background:var(--black); padding:0; }
.hero-image { position:absolute; inset:0; background:url("https://images.unsplash.com/photo-1564501049412-61c2a3083791?auto=format&fit=crop&w=2000&q=90") center 42%/cover; animation:reveal 1.2s ease both; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.87),rgba(0,0,0,.46) 52%,rgba(0,0,0,.18)),linear-gradient(0deg,rgba(0,0,0,.72),transparent 48%); }
.hero-content { position:relative; width:min(1180px,calc(100% - 4rem)); padding:9rem 0 3.5rem; }
.hero-copy { animation:rise .8s .15s ease both; }
.hero-copy .eyebrow,.services .eyebrow,.contact .eyebrow { color:var(--lime); }
.hero h1 { font-size:clamp(4rem,9vw,8.3rem); max-width:850px; margin-bottom:1.5rem; }
.hero .lead { max-width:510px; font-size:1rem; color:#d1d1cd; }
.hero-ctas { display:flex; align-items:center; gap:2rem; margin-top:2rem; }
.btn { display:inline-flex; align-items:center; gap:1.1rem; padding:1rem 1.25rem; border:1px solid transparent; font-size:.75rem; font-family:"DM Mono",monospace; text-transform:uppercase; cursor:pointer; transition:background .2s,color .2s,transform .2s; }
.btn.primary { background:var(--lime); color:var(--black); }
.btn.primary:hover { background:#fff; transform:translateY(-2px); }
.text-link { color:#fff; font:.75rem "DM Mono",monospace; text-transform:uppercase; border-bottom:1px solid var(--silver); padding-bottom:.4rem; }
.text-link:hover { color:var(--lime); border-color:var(--lime); }
.hero-meta { display:flex; justify-content:space-between; border-top:1px solid rgba(255,255,255,.3); margin-top:7rem; padding-top:.8rem; color:#c9c9c5; font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; }
.about { padding:9rem 0; background:var(--paper); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:7rem; align-items:end; }
.about h2 span { color:#8c8d89; }
.about-intro>p:last-child { max-width:390px; }
.about-statement { max-width:370px; border-top:1px solid var(--line); padding-top:1.1rem; font-size:1.35rem; font-weight:700; line-height:1.2; letter-spacing:-.04em; }
.services { padding:8rem 0; background:var(--graphite); color:#fff; }
.services h2,.contact h2 { color:#fff; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:4rem; background:#454545; border:1px solid #454545; }
.service-card { min-height:230px; padding:1.5rem; background:var(--graphite); border:0; border-radius:0; transition:background .25s,color .25s; }
.service-card:hover { background:var(--lime); color:var(--black); }
.service-number { display:block; color:var(--lime); font-size:.72rem; margin-bottom:4rem; }
.service-card:hover .service-number,.service-card:hover p { color:var(--black); }
.service-card p { max-width:275px; margin:0; font-size:.85rem; color:#aaa; }
.projects { padding:9rem 0; background:var(--paper); }
.projects .eyebrow { color:#777; }
.project-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:1rem; }
.project-card { min-height:370px; position:relative; overflow:hidden; background:var(--charcoal); border-radius:0; }
.project-card-large { min-height:520px; }
.project-card img { width:100%; height:100%; object-fit:cover; filter:grayscale(100%); transition:transform .6s,filter .6s; }
.project-card:hover img { transform:scale(1.05); filter:grayscale(20%); }
.project-overlay { position:absolute; inset:auto 1.4rem 1.3rem; color:#fff; }
.project-overlay:before { content:""; position:absolute; z-index:-1; inset:-6rem -1.4rem -1.3rem; background:linear-gradient(transparent,rgba(0,0,0,.76)); }
.project-overlay span { color:var(--lime); font-size:.65rem; text-transform:uppercase; }
.project-overlay h3 { margin:.35rem 0 0; font-size:1.7rem; }
.contact { padding:8rem 0; background:var(--black); color:#fff; }
.contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:8rem; }
.contact-grid>div p:last-child { max-width:330px; color:#999; }
.contact-form { display:flex; flex-direction:column; gap:1.5rem; background:transparent; border:0; border-radius:0; padding:0; }
.contact-form label { display:flex; flex-direction:column; gap:.45rem; font:.65rem "DM Mono",monospace; text-transform:uppercase; color:#999; }
.contact-form input,.contact-form textarea { width:100%; padding:.8rem 0; border:0; border-bottom:1px solid #555; outline:0; resize:vertical; background:transparent; color:#fff; font:1rem "Manrope",sans-serif; }
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--lime); }
.contact-form textarea { min-height:80px; }
.contact-form .btn { align-self:flex-start; margin-top:.5rem; }
.site-footer { padding:2.2rem 0; background:var(--black); color:#aaa; border-top:1px solid #303030; }
.footer-flex { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.site-footer .logo { color:#fff; }
.footer-flex p { margin:.7rem 0 0; font:.65rem "DM Mono",monospace; color:#777; }
.footer-links { display:flex; gap:1.4rem; font:.65rem "DM Mono",monospace; text-transform:uppercase; }
@keyframes reveal { from { opacity:0; transform:scale(1.08); } to { opacity:1; transform:scale(1.02); } }
@keyframes rise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:860px) {
    .container,.hero-content { width:min(100% - 2.5rem,680px); }
    .about-grid,.contact-grid { grid-template-columns:1fr; gap:3.5rem; }
    .services-grid { grid-template-columns:repeat(2,1fr); }
    .project-grid { grid-template-columns:1fr 1fr; }
    .project-card-large { grid-column:span 2; min-height:430px; }
    .contact-grid { gap:3rem; }
    .menu-toggle { display:block; }
    .primary-nav { position:absolute; top:100%; left:0; right:0; max-height:0; overflow:hidden; background:var(--black); transition:max-height .25s; }
    .primary-nav.open { max-height:280px; }
    .primary-nav ul { flex-direction:column; gap:0; padding:.5rem 1.25rem 1.25rem; }
    .primary-nav li { padding:.7rem 0; }
}
@media (max-width:520px) {
    .hero { min-height:720px; }
    .hero-content { padding-bottom:2rem; }
    .hero-ctas { align-items:flex-start; flex-direction:column; gap:1.4rem; }
    .hero-meta { margin-top:4rem; }
    .about,.services,.projects,.contact { padding:6rem 0; }
    .services-grid,.project-grid { grid-template-columns:1fr; }
    .project-card-large { grid-column:auto; min-height:370px; }
    .project-card { min-height:330px; }
    .footer-flex { align-items:flex-start; flex-direction:column; }
}