body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    color: #334155;
            background-color: #F8FAFC;
            line-height: 1.8;
            -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

:root {
    --brand-navy: #0A142F;
    --brand-dark: #050A18;
    --brand-gray: #475569;
    --brand-light: #F8FAFC;
    --brand-accent: #B8A07E;
    --brand-surface: #111D3E;
}

/* Brand color fallback for local/file preview and CDN timing edge cases. */
.bg-brand-navy { background-color: var(--brand-navy); }
.bg-brand-navy\/95 { background-color: rgba(10, 20, 47, 0.95); }
.bg-brand-navy\/100 { background-color: var(--brand-navy); }
.bg-brand-navy\/60 { background-color: rgba(10, 20, 47, 0.6); }
.bg-brand-navy\/5 { background-color: rgba(10, 20, 47, 0.05); }
.bg-brand-dark { background-color: var(--brand-dark); }
.bg-brand-light { background-color: var(--brand-light); }
.bg-brand-accent { background-color: var(--brand-accent); }
.bg-brand-accent\/5 { background-color: rgba(184, 160, 126, 0.05); }
.bg-brand-surface { background-color: var(--brand-surface); }

.text-brand-navy { color: var(--brand-navy); }
.text-brand-gray { color: var(--brand-gray); }
.text-brand-accent { color: var(--brand-accent); }
.text-white { color: #FFFFFF; }

.border-brand-navy { border-color: var(--brand-navy); }
.border-brand-accent { border-color: var(--brand-accent); }
.border-brand-accent\/30 { border-color: rgba(184, 160, 126, 0.3); }
.border-brand-accent\/50 { border-color: rgba(184, 160, 126, 0.5); }
.border-brand-light { border-color: var(--brand-light); }

.from-brand-navy {
    --tw-gradient-from: var(--brand-navy);
    --tw-gradient-to: rgba(10, 20, 47, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-brand-navy\/95 {
    --tw-gradient-to: rgba(10, 20, 47, 0);
    --tw-gradient-stops: var(--tw-gradient-from), rgba(10, 20, 47, 0.95), var(--tw-gradient-to);
}
.from-brand-dark {
    --tw-gradient-from: var(--brand-dark);
    --tw-gradient-to: rgba(5, 10, 24, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-brand-dark {
    --tw-gradient-to: var(--brand-dark);
}
.from-brand-accent {
    --tw-gradient-from: var(--brand-accent);
    --tw-gradient-to: rgba(184, 160, 126, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.lang-switch {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 2px;
    overflow: hidden;
}

.lang-btn {
    min-width: 2.5rem;
    padding: 0.45rem 0.7rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.7rem;
    line-height: 1;
    letter-spacing: 0.08em;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.lang-btn:hover,
.lang-btn.active {
    background-color: var(--brand-accent);
    color: #FFFFFF;
}

.lang-switch-mobile {
    align-self: flex-start;
    margin-top: 0.5rem;
}

.brand-header-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.brand-header-logo {
    width: 10rem;
    height: 3.35rem;
    object-fit: contain;
}

.brand-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.08em;
    font-family: 'Inter', 'Noto Sans JP', Arial, sans-serif;
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: 0;
}

.brand-wordmark-vna {
    font-weight: 800;
}

.brand-wordmark-agency {
    font-weight: 300;
}
        
        h1, h2, h3, .font-serif {
            font-family: 'Noto Serif JP', serif;
        }
        .font-display {
            font-family: 'Playfair Display', serif;
        }

        /* SPA Transition */
        .page-section {
            display: none;
            opacity: 0;
            transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .page-section.active {
            display: block;
        }
        .page-section.fade-in {
            opacity: 1;
        }

        /* Scroll Reveal Animation */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Components */
        .section-title {
            font-family: 'Playfair Display', serif;
            font-size: 2.5rem;
            font-weight: 500;
            letter-spacing: 0.05em;
            color: #0A142F;
            margin-bottom: 1rem;
        }
        .section-title.light { color: #FFFFFF; }
        
        .section-subtitle {
            font-size: 0.875rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: #B8A07E;
            margin-bottom: 1rem;
            font-family: 'Inter', sans-serif;
        }

        .hero-visual-stage {
            position: relative;
            background:
                radial-gradient(circle at 53% 48%, rgba(42, 99, 155, 0.16), transparent 31%),
                radial-gradient(circle at 50% 50%, rgba(255, 190, 88, 0.06), transparent 22%),
                linear-gradient(135deg, #02050b, #06111f 58%, #030812);
        }

        .hero-visual-stage::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            z-index: 2;
            height: clamp(16rem, 32vh, 28rem);
            pointer-events: none;
            background: linear-gradient(
                to bottom,
                rgba(5, 10, 24, 0) 0%,
                rgba(5, 10, 24, 0.34) 30%,
                rgba(5, 10, 24, 0.78) 66%,
                var(--brand-dark) 100%
            );
        }

        .home-what-we-do {
            margin-top: -1px;
            background:
                linear-gradient(
                    to bottom,
                    var(--brand-dark) 0%,
                    #07102B 30%,
                    #111D3E 72%,
                    var(--brand-dark) 100%
                );
        }

        .home-what-we-do::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            z-index: 1;
            height: clamp(10rem, 22vh, 18rem);
            pointer-events: none;
            background: linear-gradient(
                to bottom,
                var(--brand-dark) 0%,
                rgba(5, 10, 24, 0.88) 20%,
                rgba(17, 29, 62, 0.38) 62%,
                rgba(17, 29, 62, 0) 100%
            );
        }

        .hero-intro-message {
            position: absolute;
            top: 50%;
            left: clamp(1.5rem, 7vw, 7rem);
            z-index: 3;
            max-width: min(46rem, 50vw);
            opacity: 0;
            pointer-events: none;
            transform: translateY(-46%) translateX(-1.25rem);
            animation: heroIntroMessageIn 900ms 2700ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        }

        .hero-intro-kicker {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            margin-bottom: 1.35rem;
            color: var(--brand-accent);
            font-family: 'Inter', 'Noto Sans JP', sans-serif;
            font-size: 0.72rem;
            font-weight: 500;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        .hero-intro-kicker::before {
            content: "";
            width: 2.9rem;
            height: 1px;
            background: linear-gradient(90deg, var(--brand-accent), rgba(184, 160, 126, 0.2));
        }

        .hero-intro-message h1 {
            margin: 0;
            color: #FFFFFF;
            font-family: 'Noto Serif JP', serif;
            font-size: clamp(2.1rem, 4.2vw, 4.85rem);
            font-weight: 300;
            line-height: 1.24;
            letter-spacing: 0;
            white-space: nowrap;
            text-shadow: 0 1.6rem 3.4rem rgba(0, 0, 0, 0.56);
        }

        .hero-intro-message p {
            max-width: 32rem;
            margin: 1.45rem 0 0;
            color: rgba(226, 232, 240, 0.78);
            font-size: clamp(0.95rem, 1.15vw, 1.12rem);
            font-weight: 300;
            line-height: 1.9;
            text-shadow: 0 1rem 2.6rem rgba(0, 0, 0, 0.52);
        }

        @keyframes heroIntroMessageIn {
            to {
                opacity: 1;
                transform: translateY(-46%) translateX(0);
            }
        }

        .hero-background-frame {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
            transform: translateY(clamp(2rem, 6vh, 4.5rem));
        }

        .hero-background-vignette {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at center, rgba(2, 5, 11, 0.02) 0 34%, rgba(0, 0, 0, 0.28) 76%, rgba(0, 0, 0, 0.62) 100%),
                linear-gradient(to bottom, rgba(5, 10, 24, 0.40), transparent 34%, rgba(5, 10, 24, 0.28));
        }

        .hero-title-line {
            display: inline-block;
            white-space: nowrap;
        }

        .hero-logo-frame {
            position: relative;
            z-index: 1;
            width: min(82vw, 52rem);
            aspect-ratio: 2.45 / 1;
            margin: 0;
            overflow: hidden;
        }

        .hero-logo-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transform-origin: center;
            display: block;
            filter: drop-shadow(0 30px 70px rgba(0, 0, 0, 0.48));
        }

        @media (max-width: 640px) {
            .hero-intro-message {
                left: 1.25rem;
                right: 1.25rem;
                top: auto;
                bottom: clamp(4.5rem, 10vh, 7rem);
                max-width: none;
                transform: translateY(0.75rem);
                animation-name: heroIntroMessageInMobile;
            }

            .hero-intro-kicker {
                margin-bottom: 0.85rem;
                font-size: 0.62rem;
            }

            .hero-intro-kicker::before {
                width: 2rem;
            }

            .hero-intro-message h1 {
                font-size: clamp(1.65rem, 8.2vw, 2.55rem);
                line-height: 1.3;
            }

            .hero-intro-message p {
                max-width: 21rem;
                margin-top: 0.9rem;
                font-size: 0.86rem;
                line-height: 1.72;
            }

            @keyframes heroIntroMessageInMobile {
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .hero-title-line {
                white-space: normal;
            }

            .hero-logo-frame {
                width: min(88vw, 24rem);
            }
        }

        .btn-primary {
            display: inline-block;
            background-color: #B8A07E;
            color: #FFFFFF;
            padding: 1rem 2.5rem;
            border-radius: 2px;
            text-decoration: none;
            transition: all 0.4s ease;
            font-weight: 400;
            letter-spacing: 0.05em;
            font-family: 'Inter', 'Noto Sans JP', sans-serif;
        }
        .btn-primary:hover {
            background-color: #9C8566;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px -10px rgba(184, 160, 126, 0.5);
        }
        
        .btn-outline {
            display: inline-block;
            background-color: transparent;
            color: #FFFFFF;
            border: 1px solid rgba(255,255,255,0.3);
            padding: 1rem 2.5rem;
            border-radius: 2px;
            transition: all 0.4s ease;
            font-weight: 400;
            letter-spacing: 0.05em;
        }
        .btn-outline:hover {
            background-color: #FFFFFF;
            color: #0A142F;
        }

        /* Decorative Elements */
        .glass-panel {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 20px 40px -20px rgba(0,0,0,0.1);
        }

        .our-position-card {
            min-height: 32rem;
            background-color: var(--brand-surface);
        }

        .our-position-card__image,
        .for-brands-background-image {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .our-position-card__image {
            filter: brightness(0.72) saturate(0.9);
        }

        .our-position-card__overlay {
            position: absolute;
            inset: 0;
            z-index: 1;
            background:
                linear-gradient(135deg, rgba(5, 10, 24, 0.74), rgba(10, 20, 47, 0.46)),
                rgba(5, 10, 24, 0.22);
        }

        .for-brands-background-image {
            opacity: 0.26;
            filter: brightness(0.62) saturate(0.8);
        }
        
        .watermark-number {
            position: absolute;
            font-family: 'Playfair Display', serif;
            font-size: 12rem;
            font-weight: 600;
            color: rgba(184, 160, 126, 0.05);
            line-height: 1;
            z-index: 0;
            pointer-events: none;
            user-select: none;
        }

        /* Form styling */
        .input-field {
            width: 100%;
            background: transparent;
            border: none;
            border-bottom: 1px solid #E2E8F0;
            padding: 0.75rem 0;
            color: #0A142F;
            transition: border-color 0.3s ease;
        }
        .input-field:focus {
            outline: none;
            border-bottom-color: #B8A07E;
        }
        .input-label {
            font-size: 0.75rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #64748B;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #050A18; }
        ::-webkit-scrollbar-thumb { background: #475569; }
        ::-webkit-scrollbar-thumb:hover { background: #B8A07E; }