:root {
            --bg: #f7f5f1;
            --paper: #fffefa;
            --ink: #282725;
            --muted: #716c66;
            --accent: #967761;
            --line: #e4ded6;
            --serif: 'Yu Mincho', 'Hiragino Mincho ProN', Georgia, serif
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

        body {
            margin: 0;
            background: var(--bg);
            color: var(--ink);
            font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', sans-serif;
            line-height: 1.8
        }

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

        button {
            font: inherit
        }

        .wrap {
            max-width: 1180px;
            margin: auto;
            padding: 0 32px
        }

        header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(247, 245, 241, .95);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--line)
        }

        .nav {
            height: 78px;
            display: flex;
            align-items: center;
            justify-content: space-between
        }

        .logo {
            font-family: Georgia, serif;
            letter-spacing: .24em;
            font-size: 23px
        }

        .logo small {
            display: block;
            font: 9px Arial;
            letter-spacing: .25em;
            margin-top: -5px
        }

        .links {
            display: flex;
            gap: 27px;
            align-items: center;
            font-size: 12px
        }

        .pill {
            background: var(--ink);
            color: white;
            border-radius: 100px;
            padding: 12px 23px;
            display: inline-block;
            font-size: 12px;
            border: 1px solid var(--ink);
            cursor: pointer
        }

        .pill.alt {
            background: transparent;
            color: var(--ink)
        }

        .menu {
            display: none
        }

        .hero {
            padding: 110px 0 95px;
            overflow: hidden
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 65px;
            align-items: center
        }

        .eyebrow {
            color: var(--accent);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .23em
        }

        .hero h1 {
            font-family: var(--serif);
            font-size: clamp(43px, 5vw, 74px);
            font-weight: 500;
            letter-spacing: .04em;
            line-height: 1.45;
            margin: 24px 0
        }

        .hero h1 em {
            font-style: normal;
            color: var(--accent)
        }

        .lead {
            max-width: 470px;
            font-size: 14px;
            color: var(--muted)
        }

        .actions {
            display: flex;
            gap: 12px;
            margin-top: 30px;
            flex-wrap: wrap
        }

        .art {
            height: 490px;
            position: relative;
            background: #ded4c7;
            border-radius: 220px 220px 8px 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 45px
        }

        .browser {
            background: #fff;
            box-shadow: 0 25px 65px #5c463c38;
            border-radius: 10px;
            width: 100%;
            transform: rotate(-4deg);
            overflow: hidden
        }

        .browser-top {
            height: 28px;
            background: #f1eee9;
            border-bottom: 1px solid #e7e1db;
            display: flex;
            gap: 5px;
            align-items: center;
            padding: 0 12px
        }

        .dot {
            width: 6px;
            height: 6px;
            background: #b6a99d;
            border-radius: 50%
        }

        .browser-inner {
            padding: 32px;
            background: #fffdf9;
            text-align: center
        }

        .browser-inner span {
            font-size: 9px;
            letter-spacing: .25em;
            color: #9e8777
        }

        .browser-inner h3 {
            font: 32px var(--serif);
            margin: 14px 0
        }

        .mini-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-top: 25px
        }

        .mini-grid div {
            height: 90px;
            background: linear-gradient(135deg, #e5d8cb, #b8a18c);
            border-radius: 3px
        }

        .mini-grid div:nth-child(2) {
            background: linear-gradient(135deg, #f2e9dc, #d0c4b4)
        }

        .mini-grid div:nth-child(3) {
            background: linear-gradient(135deg, #cbb9a7, #eee5da)
        }

        .float-label {
            position: absolute;
            right: -25px;
            bottom: 45px;
            background: #fff;
            padding: 15px 22px;
            box-shadow: 0 8px 30px #0001;
            font-size: 11px;
            letter-spacing: .1em
        }

        .strip {
            background: var(--ink);
            color: #f9f6f2;
            padding: 23px 0
        }

        .strip .wrap {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            font-size: 12px;
            letter-spacing: .05em
        }

        .section {
            padding: 105px 0
        }

        .section.white {
            background: var(--paper)
        }

        .section-head {
            display: flex;
            justify-content: space-between;
            align-items: end;
            margin-bottom: 36px;
            gap: 30px
        }

        .section h2 {
            font: normal clamp(30px, 3.2vw, 44px) var(--serif);
            line-height: 1.5;
            margin: 12px 0
        }

        .sub {
            color: var(--muted);
            font-size: 13px;
            max-width: 570px
        }

        .service-grid,
        .work-grid,
        .price-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px
        }

        .service-card {
            padding: 32px;
            background: #fff;
            border: 1px solid var(--line);
            min-height: 230px
        }

        .service-card .num {
            color: var(--accent);
            font: 16px Georgia
        }

        .service-card h3 {
            font: normal 23px var(--serif);
            margin: 22px 0 12px
        }

        .service-card p {
            font-size: 12px;
            color: var(--muted)
        }

        .work {
            background: #fff;
            border: 1px solid var(--line);
            overflow: hidden
        }

        .work-visual {
            height: 230px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 25px;
            background: #e7dcd1
        }

        .work:nth-child(2) .work-visual {
            background: #d9dfd7
        }

        .work:nth-child(3) .work-visual {
            background: #e2ddd6
        }

        .work-screen {
            width: 90%;
            height: 155px;
            background: #fffefa;
            box-shadow: 0 15px 30px #0002;
            padding: 20px;
            text-align: center;
            transform: rotate(-3deg)
        }

        .work-screen strong {
            font: 22px var(--serif)
        }

        .work-screen p {
            font-size: 10px
        }

        .work-screen .bar {
            height: 36px;
            background: #d5c0ad;
            margin-top: 18px
        }

        .work:nth-child(2) .bar {
            background: #a7b8a5
        }

        .work:nth-child(3) .bar {
            background: #bbb1a4
        }

        .work-caption {
            padding: 22px
        }

        .work-caption h3 {
            margin: 0;
            font: 20px var(--serif)
        }

        .work-caption p {
            font-size: 12px;
            color: var(--muted)
        }

        .notice {
            font-size: 11px;
            color: var(--muted);
            margin-top: 18px
        }

        .price-card {
            background: #fff;
            border: 1px solid var(--line);
            padding: 32px;
            display: flex;
            flex-direction: column
        }

        .price-card.featured {
            border: 2px solid var(--accent);
            position: relative
        }

        .price-card.featured:before {
            content: 'POPULAR';
            position: absolute;
            top: -15px;
            left: 28px;
            background: var(--accent);
            color: white;
            font-size: 10px;
            padding: 4px 13px
        }

        .price-card h3 {
            font: 22px var(--serif);
            margin: 0
        }

        .price {
            font: 38px Georgia;
            margin: 18px 0
        }

        .price small {
            font: 11px sans-serif
        }

        .price-card ul {
            padding-left: 20px;
            font-size: 12px;
            color: var(--muted);
            flex: 1;
            line-height: 2.5
        }

        .price-card .pill {
            text-align: center
        }

        .flow {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px
        }

        .step {
            border-top: 1px solid var(--accent);
            padding-top: 18px
        }

        .step b {
            font: 28px Georgia;
            color: var(--accent)
        }

        .step h3 {
            font: 19px var(--serif)
        }

        .step p {
            font-size: 12px;
            color: var(--muted)
        }

        details {
            border-bottom: 1px solid var(--line);
            padding: 18px 0
        }

        summary {
            cursor: pointer;
            font-size: 14px;
            font-weight: 600
        }

        details p {
            font-size: 13px;
            color: var(--muted)
        }

        .cta {
            background: var(--ink);
            color: white;
            text-align: center;
            padding: 90px 20px
        }

        .cta h2 {
            font: normal 38px var(--serif);
            margin: 15px 0
        }

        .cta p {
            font-size: 13px;
            color: #d5cec7
        }

        .cta .pill {
            background: #f7f5f1;
            color: var(--ink);
            margin-top: 22px
        }

        footer {
            padding: 40px 0;
            font-size: 11px;
            color: var(--muted)
        }

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

        #menu-toggle {
            display: none
        }

        @media(max-width:800px) {
            .wrap {
                padding: 0 22px
            }

            .nav {
                height: 68px
            }

            .links {
                display: none;
                position: absolute;
                top: 68px;
                left: 0;
                right: 0;
                background: var(--bg);
                padding: 22px;
                flex-direction: column;
                align-items: stretch;
                border-bottom: 1px solid var(--line)
            }

            #menu-toggle:checked~.links {
                display: flex
            }

            .menu {
                display: block;
                cursor: pointer;
                font-size: 22px
            }

            .hero {
                padding: 62px 0
            }

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

            .hero h1 {
                font-size: 43px
            }

            .art {
                height: 360px;
                padding: 36px;
                border-radius: 180px 180px 8px 8px
            }

            .float-label {
                right: 0;
                bottom: 15px
            }

            .strip .wrap {
                display: grid;
                grid-template-columns: 1fr 1fr;
                font-size: 10px
            }

            .section {
                padding: 70px 0
            }

            .section-head {
                display: block
            }

            .service-grid,
            .work-grid,
            .price-grid {
                grid-template-columns: 1fr
            }

            .service-card {
                min-height: unset
            }

            .flow {
                grid-template-columns: 1fr 1fr
            }

            .cta h2 {
                font-size: 30px
            }

            footer .wrap {
                display: block
            }
        }

        /* Pricing redesign — V2 */
        .pricing-section {
            background: #f3f0eb
        }

        .pricing-section .section-head {
            margin-bottom: 52px
        }

        .pricing-section .price-grid {
            align-items: stretch;
            gap: 16px
        }

        .pricing-section .price-card {
            padding: 35px 28px 30px;
            box-shadow: 0 15px 45px rgba(49, 39, 31, .035);
            border-radius: 5px
        }

        .pricing-section .price-card.featured {
            border-color: #967761;
            box-shadow: 0 18px 50px rgba(75, 55, 42, .10)
        }

        .price-card.featured:before {
            content: 'RECOMMENDED';
            top: -14px;
            left: 26px;
            letter-spacing: .15em
        }

        .plan-top {
            min-height: 145px
        }

        .plan-top span {
            font-size: 10px;
            color: #967761;
            letter-spacing: .16em;
            font-weight: 700
        }

        .plan-top h3 {
            font: normal 32px var(--serif);
            margin: 16px 0 6px
        }

        .plan-top p {
            font-size: 12px;
            color: var(--muted);
            margin: 0
        }

        .pricing-section .price {
            font-size: clamp(29px, 2.8vw, 39px);
            white-space: nowrap;
            margin: 6px 0 20px;
            letter-spacing: -.03em
        }

        .pricing-section .price small {
            display: block;
            color: var(--muted);
            letter-spacing: 0;
            margin-top: 2px
        }

        .plan-divider {
            height: 1px;
            background: var(--line)
        }

        .pricing-section .price-card ul {
            padding: 12px 0 20px;
            list-style: none;
            line-height: 2.2
        }

        .pricing-section .price-card li {
            position: relative;
            padding-left: 21px
        }

        .pricing-section .price-card li:before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #967761
        }

        .pricing-section .price-card .pill {
            font-size: 11px;
            padding: 12px 10px
        }

        .maintenance {
            display: grid;
            grid-template-columns: 1fr 1.3fr;
            gap: 60px;
            margin-top: 95px;
            padding: 55px 0;
            border-top: 1px solid #d9d0c7;
            border-bottom: 1px solid #d9d0c7
        }

        .maintenance h3 {
            font: normal 32px/1.5 var(--serif);
            margin: 14px 0
        }

        .maintenance p {
            font-size: 12px;
            color: var(--muted)
        }

        .maintenance-options>div {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 0 12px;
            padding: 18px 0;
            border-bottom: 1px solid #d9d0c7
        }

        .maintenance-options>div:first-child {
            padding-top: 0
        }

        .maintenance-options>div:last-child {
            border: 0
        }

        .maintenance-options strong {
            font-size: 14px
        }

        .maintenance-options span {
            font: 22px Georgia
        }

        .maintenance-options small {
            font: 11px sans-serif;
            color: var(--muted)
        }

        .maintenance-options p {
            grid-column: 1/-1;
            margin: 5px 0 0
        }

        .extras {
            margin-top: 65px
        }

        .extras h3 {
            font: normal 30px var(--serif);
            margin: 10px 0 20px
        }

        .extras-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px
        }

        .extras-grid span {
            background: #fff;
            padding: 15px 20px;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            gap: 12px
        }

        .extras-grid b {
            font-weight: 600;
            white-space: nowrap
        }

        .preview-tag {
            margin-left: 12px;
            color: #967761
        }

        @media(max-width:800px) {
            .pricing-section .price-grid {
                gap: 22px
            }

            .plan-top {
                min-height: 0
            }

            .pricing-section .price-card {
                padding: 30px 26px
            }

            .pricing-section .price {
                font-size: 38px;
                margin-top: 24px
            }

            .maintenance {
                grid-template-columns: 1fr;
                gap: 20px;
                margin-top: 60px;
                padding: 40px 0
            }

            .extras-grid {
                grid-template-columns: 1fr
            }

            .pricing-section .section-head {
                margin-bottom: 30px
            }
        }

        /* V4: trust, mobile and launch-readiness */
        html {
            scroll-padding-top: 86px
        }

        a:focus-visible,
        summary:focus-visible,
        label:focus-visible {
            outline: 3px solid #967761;
            outline-offset: 4px
        }

        .works-v3 {
            grid-template-columns: minmax(0, 420px);
            justify-content: start
        }

        .works-v3 .work-caption p {
            min-height: 0
        }

        .about-note {
            display: grid;
            grid-template-columns: 1fr 1.25fr;
            gap: 70px;
            border-top: 1px solid var(--line);
            padding-top: 38px;
            margin-top: 45px
        }

        .about-note h3 {
            font: normal 30px/1.5 var(--serif);
            margin: 16px 0
        }

        .about-note p {
            font-size: 13px;
            color: var(--muted);
            margin-top: 0
        }

        .contact-actions {
            max-width: 530px;
            margin: 30px auto 0
        }

        .contact-label {
            font-size: 10px !important;
            letter-spacing: .2em;
            color: #c6b39e !important
        }

        .contact-pending {
            background: #f4eee6;
            color: #635247;
            border-radius: 100px;
            padding: 14px 25px;
            display: inline-block;
            font-size: 12px
        }

        .contact-note {
            font-size: 11px !important;
            color: #bdb5ac !important;
            margin-top: 20px
        }

        .cta {
            padding-bottom: 100px
        }

        .mobile-contact {
            display: none
        }

        .works-v3 .work-link {
            min-height: 36px;
            display: inline-flex;
            align-items: center
        }

        @media(max-width:800px) {
            html {
                scroll-padding-top: 75px
            }

            .works-v3 {
                grid-template-columns: 1fr
            }

            .about-note {
                grid-template-columns: 1fr;
                gap: 10px;
                margin-top: 30px
            }

            .about-note h3 {
                font-size: 26px
            }

            .section {
                padding: 65px 0
            }

            .hero h1 {
                font-size: clamp(35px, 10vw, 43px)
            }

            .price-card .price {
                font-size: clamp(30px, 9vw, 38px)
            }

            .mobile-contact {
                display: block;
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                background: rgba(247, 245, 241, .97);
                border-top: 1px solid var(--line);
                z-index: 18;
                padding: 10px 20px calc(10px + env(safe-area-inset-bottom))
            }

            .mobile-contact a {
                display: block;
                background: var(--ink);
                color: #fff;
                text-align: center;
                padding: 10px;
                border-radius: 50px;
                font-size: 12px
            }

            body {
                padding-bottom: 65px
            }

            .float-label {
                font-size: 9px
            }
        }

        @media(prefers-reduced-motion:reduce) {
            html {
                scroll-behavior: auto
            }

            *,
            *:before,
            *:after {
                transition: none !important;
                animation: none !important
            }
        }

        /* V5 brand artwork */
        .art {
            padding: 0;
            overflow: hidden;
            background: #e9e3db;
            box-shadow: 0 24px 65px rgba(70, 52, 40, .10)
        }

        .hero-logo {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .footer-logo {
            display: block;
            width: 205px;
            height: auto;
            mix-blend-mode: multiply
        }

        @media(max-width:800px) {
            .art {
                height: min(86vw, 440px);
                border-radius: 180px 180px 8px 8px
            }

            .footer-logo {
                width: 180px;
                margin-bottom: 18px
            }
        }
    


        .works-v3 .work {
            transition: transform .25s ease, box-shadow .25s ease
        }

        .works-v3 .work:hover {
            transform: translateY(-5px);
            box-shadow: 0 16px 35px #00000012
        }

        .works-v3 .work-visual {
            height: 270px;
            padding: 30px
        }

        .works-v3 .work-screen {
            width: 95%;
            height: 185px;
            padding: 28px 16px;
            transform: rotate(-2deg);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center
        }

        .works-v3 .work-screen strong {
            font-size: clamp(16px, 1.8vw, 23px);
            line-height: 1.3
        }

        .works-v3 .work-screen p {
            font-size: 10px;
            margin: 12px 0
        }

        .works-v3 .work-screen .bar {
            width: 78%;
            height: 19px;
            margin-top: 8px
        }

        .works-v3 .mini-label {
            font-size: 8px;
            letter-spacing: .18em;
            color: #967761;
            margin-bottom: 14px
        }

        .works-v3 .concept-hair {
            background: linear-gradient(135deg, #e1d0c1, #b49c88)
        }

        .works-v3 .concept-beauty {
            background: linear-gradient(135deg, #e9dfda, #d4b8b0)
        }

        .works-v3 .concept-cafe {
            background: linear-gradient(135deg, #e0dfcf, #9ea78e)
        }

        .works-v3 .work-caption {
            padding: 26px
        }

        .works-v3 .work-tag {
            font-size: 10px;
            letter-spacing: .08em;
            color: #967761
        }

        .works-v3 .work-caption h3 {
            margin: 8px 0 10px
        }

        .works-v3 .work-caption p {
            min-height: 80px
        }

        .works-v3 .work-link {
            display: inline-block;
            margin-top: 12px;
            font-size: 12px;
            font-weight: 600;
            border-bottom: 1px solid #967761;
            padding-bottom: 3px
        }

        .works-v3 .work-link:hover {
            color: #967761
        }

        @media(max-width:800px) {
            .works-v3 .work-caption p {
                min-height: 0
            }

            .works-v3 .work-screen strong {
                font-size: 23px
            }
        }

/* Gentle scroll entrance for content; the page remains readable without JavaScript. */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease, transform .65s ease;
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.pill {
    transition: transform .2s ease, box-shadow .2s ease;
}

.pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(40, 39, 37, .15);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .pill {
        transition: none;
    }
}

.contact-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.cta .contact-email {
    background: transparent;
    color: #f7f5f1;
    border-color: #f7f5f1;
}

.contact-address {
    margin-top: 18px;
    font-size: 12px;
    letter-spacing: .04em;
}