:root {
            --bg: #171917;
            --panel: #20231f;
            --gold: #d9bd79;
            --text: #f1f0e9;
            --muted: #b0b6aa
        }

        * {
            box-sizing: border-box
        }

        [hidden] {
            display: none !important
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 90px
        }

        body {
            margin: 0;
            background: var(--bg);
            color: var(--text);
            font: 16px/1.65 Arial, sans-serif
        }

        a {
            color: inherit;
            text-decoration: none
        }

        button,
        input,
        select,
        textarea {
            font: inherit
        }

        button,
        a,
        input,
        select,
        textarea {
            outline-offset: 5px
        }

        header {
            position: sticky;
            top: 0;
            background: #171917f5;
            border-bottom: 1px solid #34382f;
            z-index: 10
        }

        .wrap {
            width: min(1180px, 90%);
            margin: auto
        }

        nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 86px
        }

        .brand-logo {
            display: block;
            width: 64px;
            height: 64px;
            object-fit: contain;
            flex-shrink: 0
        }

        .brand-name {
            white-space: nowrap
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-size: 25px;
            font-weight: 800;
            letter-spacing: -1px
        }

        .brand span {
            color: var(--gold)
        }

        .navlinks {
            display: flex;
            gap: 32px;
            align-items: center;
            font-size: 14px
        }

        .navlinks a:hover {
            color: var(--gold)
        }

        .nav-cta {
            border: 1px solid #71684e;
            padding: 9px 18px
        }

        .menu {
            display: none;
            background: none;
            border: 1px solid #6b705f;
            color: var(--text);
            padding: 7px 12px
        }

        .hero {
            padding: 95px 0 75px;
            display: grid;
            grid-template-columns: 1.25fr 1fr;
            gap: 65px;
            align-items: center
        }

        .eyebrow {
            color: var(--gold);
            font-size: 12px;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            font-weight: bold
        }

        h1 {
            font-size: clamp(42px, 5.2vw, 72px);
            line-height: 1.08;
            letter-spacing: -3px;
            font-weight: 500;
            margin: 22px 0
        }

        h1 em {
            font-family: Georgia, serif;
            color: var(--gold);
            font-weight: 400
        }

        p {
            color: var(--muted)
        }

        .intro {
            max-width: 490px;
            font-size: 17px
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 25px;
            padding: 14px 24px;
            background: var(--gold);
            color: #1b2118;
            border: 0;
            cursor: pointer;
            font-weight: bold;
            font-size: 14px
        }

        .btn:hover {
            background: #ecd49a
        }

        .hero .btn {
            margin-top: 20px
        }

        .visual {
            position: relative;
            background: #262b23;
            aspect-ratio: 1.05;
            border-radius: 180px 180px 4px 4px;
            overflow: hidden;
            border: 1px solid #444b3b
        }

        .visual svg {
            width: 100%;
            height: 100%;
            display: block
        }

        .visual-caption {
            position: absolute;
            bottom: 22px;
            left: 26px;
            font-size: 12px;
            letter-spacing: 1px;
            color: #e3e5d9
        }

        .strip {
            display: flex;
            justify-content: space-between;
            gap: 25px;
            padding: 25px 0;
            border-top: 1px solid #34382f;
            border-bottom: 1px solid #34382f;
            color: #c8cdbf;
            font-size: 13px
        }

        .strip span:before {
            content: '✦';
            color: var(--gold);
            margin-right: 12px
        }

        section {
            padding: 85px 0
        }

        .section-head {
            display: flex;
            justify-content: space-between;
            gap: 30px;
            align-items: end;
            margin-bottom: 35px
        }

        h2 {
            font-size: clamp(30px, 3.5vw, 46px);
            font-weight: 500;
            line-height: 1.18;
            letter-spacing: -1.5px;
            margin: 12px 0
        }

        .section-head p {
            max-width: 340px;
            margin: 0
        }

        .services {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px
        }

        .card {
            background: var(--panel);
            border: 1px solid #373d31;
            padding: 30px;
            transition: transform .2s, border-color .2s
        }

        .card:hover {
            transform: translateY(-4px);
            border-color: var(--gold)
        }

        .service-photo {
            display: block;
            width: calc(100% + 60px);
            max-width: none;
            height: auto;
            aspect-ratio: 3/2;
            object-fit: cover;
            margin: -30px -30px 25px
        }

        .card-top {
            display: flex;
            justify-content: space-between;
            color: var(--gold);
            font-size: 12px
        }

        .icon {
            font-size: 30px;
            line-height: 1
        }

        .card h3 {
            font-size: 24px;
            font-weight: 500;
            margin: 28px 0 10px
        }

        .card p {
            margin: 0;
            max-width: 440px;
            font-size: 15px
        }

        .card a {
            display: inline-block;
            margin-top: 25px;
            font-size: 13px;
            color: var(--gold)
        }

        .about {
            background: #dddccc;
            color: #242a20
        }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 90px
        }

        .about .eyebrow {
            color: #65603f
        }

        .about p {
            color: #545b4f
        }

        .steps {
            margin-top: 16px
        }

        .step {
            padding: 18px 0;
            border-bottom: 1px solid #b5baab;
            display: flex;
            gap: 22px
        }

        .step b {
            color: #7b7049;
            font-size: 13px
        }

        .step h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 500
        }

        .step p {
            margin: 5px 0 0;
            font-size: 14px
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 90px
        }

        .contact-copy {
            max-width: 380px
        }

        .contact-note {
            font-size: 13px;
            border-left: 2px solid var(--gold);
            padding-left: 18px;
            margin-top: 30px
        }

        form {
            display: grid;
            gap: 18px
        }

        label {
            display: grid;
            gap: 7px;
            font-size: 13px;
            color: #d4d8ca
        }

        input,
        select,
        textarea {
            width: 100%;
            border: 1px solid #4a5141;
            background: #20251e;
            color: var(--gold);
            padding: 12px;
            border-radius: 0
        }

        textarea {
            min-height: 110px;
            resize: vertical
        }

        form .btn {
            justify-self: start
        }

        #status {
            font-size: 13px;
            margin: 0;
            color: var(--gold)
        }

        footer {
            border-top: 1px solid #34382f;
            padding: 28px 0
        }

        .footer-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px
        }

        footer p {
            font-size: 12px
        }

        .footer-links {
            display: flex;
            gap: 20px;
            font-size: 12px
        }

        @media(max-width:760px) {
            nav {
                height: 72px
            }

            .brand-logo {
                width: 50px;
                height: 50px
            }

            .brand {
                font-size: 22px;
                gap: 9px
            }

            .menu {
                display: block
            }

            .navlinks {
                display: none;
                position: absolute;
                top: 72px;
                left: 0;
                right: 0;
                background: var(--bg);
                padding: 25px 5%;
                border-bottom: 1px solid #444b3b;
                flex-direction: column;
                align-items: start
            }

            .navlinks.open {
                display: flex
            }

            .hero {
                padding: 48px 0;
                grid-template-columns: 1fr;
                gap: 35px
            }

            h1 {
                letter-spacing: -2px
            }

            .visual {
                max-width: 440px;
                width: 100%;
                margin: auto;
                aspect-ratio: 1.4;
                border-radius: 140px 140px 4px 4px
            }

            .strip {
                flex-wrap: wrap;
                justify-content: start;
                gap: 12px 28px
            }

            .strip span {
                font-size: 12px
            }

            section {
                padding: 55px 0
            }

            .section-head {
                display: block
            }

            .section-head p {
                margin-top: 18px
            }

            .services,
            .about-grid,
            .contact-grid {
                grid-template-columns: 1fr;
                gap: 25px
            }

            .card {
                padding: 25px
            }

            .service-photo {
                width: calc(100% + 50px);
                margin: -25px -25px 25px
            }

            .footer-row {
                align-items: start;
                flex-direction: column
            }

            .footer-row p {
                margin: 0
            }
        }

        @media(prefers-reduced-motion:reduce) {
            html {
                scroll-behavior: auto
            }

            .card {
                transition: none
            }
        }

        .social-block {
            margin-top: 28px
        }

        .social-block h3 {
            font-size: 18px;
            font-weight: 500;
            margin: 0 0 14px
        }

        .social-links {
            display: flex;
            flex-wrap: wrap;
            gap: 10px
        }

        .social-links a {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            min-height: 44px;
            padding: 10px 13px;
            border: 1px solid #565c49;
            color: var(--gold);
            font-size: 13px;
            transition: background .2s, border-color .2s
        }

        .social-links a:hover {
            background: #2c3226;
            border-color: var(--gold)
        }

        .social-links svg {
            width: 19px;
            height: 19px;
            flex-shrink: 0
        }

        .social-note {
            font-size: 12px;
            margin: 12px 0;
            color: var(--muted)
        }

        .skip-link {
            position: absolute;
            top: -80px;
            left: 15px;
            z-index: 100;
            background: var(--gold);
            color: #171917;
            padding: 10px 18px
        }

        .skip-link:focus {
            top: 10px
        }