:root {
    /* Colors - Pastoral / Sky & Earth Theme */
    --color-bg: #f0f6f9;
    /* Faint Sky Blue - "The Sky" */
    --color-surface: rgba(255, 255, 255, 0.6);
    /* Semi-transparent white for airy feel */
    --color-text: #555555;
    /* Soft grey-black */
    --color-text-muted: #7a8c99;
    /* Slightly bluish grey for muted text */
    --color-primary: #877D73;
    /* Warm Taupe/Grey - "The Earth" */
    --color-primary-hover: #6e655c;
    --color-accent-blue: #a4c2d1;
    /* Soft blue for subtle highlights */
    --color-border: rgba(135, 125, 115, 0.2);
    /* Soft earth tone border */

    /* Typography */
    --font-main: 'Zen Kaku Gothic New', sans-serif;
    --font-display: 'Cormorant Garamond', serif;

    /* Spacing - Airy & Spacious */
    --spacing-xs: 1rem;
    --spacing-sm: 2rem;
    --spacing-md: 4rem;
    --spacing-lg: 8rem;
    --spacing-xl: 12rem;

    /* Layout */
    --container-width: 1100px;
    --header-height: 100px;
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-main);
    line-height: 2.0;
    letter-spacing: 0.05em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    background-image: linear-gradient(to bottom, #f0f6f9 0%, #f7fbfd 100%);
    /* Subtle gradient */
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.4s ease;
}

ul {
    list-style: none;
}

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

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-primary);
}

.section__header {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.section__title {
    font-size: 3.5rem;
    margin-bottom: var(--spacing-xs);
    font-style: italic;
}

.section__subtitle {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-family: var(--font-main);
}

/* Utilities */
.container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.btn {
    display: inline-block;
    padding: 1rem 3rem;
    border-radius: 4px;
    font-family: var(--font-main);
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    transition: all 0.4s ease;
}

.btn--primary {
    background-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 15px rgba(135, 125, 115, 0.25);
}

.btn--primary:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(135, 125, 115, 0.35);
}

.btn--secondary {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    background-color: transparent;
}

.btn--secondary:hover {
    background-color: var(--color-primary);
    color: #fff;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    display: flex;
    align-items: center;
    z-index: 1000;
    background-color: rgba(240, 246, 249, 0.8);
    /* Matches bg with transparency */
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

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

.logo {
    display: block;
    line-height: 0;
    /* Fix for image spacing */
}

.logo__img {
    height: 50px;
    width: auto;
    mix-blend-mode: multiply;
    /* Blends white background with the header */
}

.nav__list {
    display: flex;
    gap: var(--spacing-md);
}

.nav__link {
    font-size: 0.9rem;
    color: var(--color-text);
    position: relative;
}

.nav__link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 1px;
    background-color: var(--color-accent-blue);
    /* Blue accent for hover */
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav__link:hover {
    color: var(--color-primary);
}

.nav__link:hover::after {
    width: 100%;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 8px;
}

.mobile-menu-btn span {
    display: block;
    width: 30px;
    height: 1px;
    background-color: var(--color-primary);
}

/* Hero */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(240, 246, 249, 0.1) 25%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(240, 246, 249, 0.1) 75%,
            rgba(255, 255, 255, 0.4) 100%);
    background-size: 200% 200%;
    animation: shimmer 15s ease-in-out infinite alternate;
    z-index: -1;
    opacity: 0.8;
    filter: blur(30px);
    /* Soften the edges for "curtain" feel */
}

@keyframes shimmer {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(-20px, -20px) rotate(2deg);
    }
}

/* Add a second layer for "water surface" complexity */
.hero__bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%,
            rgba(255, 255, 255, 0.8) 0%,
            transparent 60%);
    opacity: 0.5;
    animation: breathe 8s ease-in-out infinite;
}

@keyframes breathe {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

.hero__content {
    z-index: 1;
    opacity: 0;
    animation: fadeInSlow 2s ease-out forwards;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__title {
    font-size: 3rem;
    /* Adjusted for Japanese copy */
    margin-bottom: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.6;
    /* More breathing room */
    color: var(--color-primary);
    font-style: normal;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.5);
    /* Soft glow */
}

.hero__title-line {
    display: block;
}

.hero__subtitle {
    font-size: 1rem;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-muted);
    letter-spacing: 0.2em;
    font-family: var(--font-main);
}

/* About */
.section {
    padding: var(--spacing-xl) 0;
}

.about__content {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.about__lead {
    font-size: 2rem;
    margin-bottom: var(--spacing-xs);
    line-height: 1.4;
    font-weight: 400;
    color: var(--color-primary);
    font-family: var(--font-display);
}

.about__text p {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
    font-size: 1rem;
}

.placeholder-box {
    width: 100%;
    height: 500px;
    background-color: rgba(255, 255, 255, 0.5);
    /* Semi-transparent */
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-family: var(--font-display);
    border-radius: 4px;
}

.about__img-real {
    width: 85%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(135, 125, 115, 0.15);
    display: block;
    margin: 0 auto;
}

/* Services */
.services__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.service-card {
    padding: var(--spacing-md);
    background-color: var(--color-surface);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(164, 194, 209, 0.1);
    /* Blue-tinted shadow */
    text-align: center;
    transition: transform 0.5s ease;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.service-card:hover {
    transform: translateY(-10px);
    background-color: #fff;
}

.service-card__title {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary);
    font-weight: 400;
}

.service-card__desc {
    color: var(--color-text);
    font-size: 1rem;
    line-height: 2;
}

/* Works */
.works__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.work-item {
    position: relative;
    aspect-ratio: 16/9;
    /* Changed to 16:9 for video thumbnails */
    background-color: #e6f0f5;
    overflow: hidden;
    cursor: pointer;
    border-radius: 2px;
    display: block;
    /* Ensure anchor tag fills space */
}

.work-item__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensure image covers the area */
    transition: transform 1s ease;
    opacity: 0.9;
}

.work-item:hover .work-item__image {
    transform: scale(1.05);
    opacity: 1;
}

.work-item__info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--spacing-sm);
    background: linear-gradient(to top, rgba(240, 246, 249, 0.95), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    color: var(--color-primary);
    text-align: center;
}

.work-item:hover .work-item__info {
    opacity: 1;
}

.work-item__title {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
}

.work-item__category {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}

.works__more {
    text-align: center;
    margin-top: var(--spacing-lg);
}

/* Contact */
.contact__wrapper {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.contact__form {
    margin-top: var(--spacing-md);
    text-align: left;
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    font-family: var(--font-display);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: 1rem;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    background-color: #fff;
    box-shadow: 0 0 10px rgba(164, 194, 209, 0.2);
}

.btn--submit {
    width: 100%;
}

/* Footer */
.footer {
    background-color: var(--color-primary);
    color: #fff;
    padding: var(--spacing-lg) 0;
    text-align: center;
}

.footer__container {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.footer__logo {
    display: block;
    margin-bottom: var(--spacing-sm);
    line-height: 0;
}

.logo__img--footer {
    height: 80px;
    /* No mix-blend-mode here if footer is dark/primary color, 
       but wait, footer is primary color (#877D73). 
       If logo has white bg, it will show a white box. 
       mix-blend-mode: multiply might make the logo dark on dark bg? 
       Actually, multiply on dark bg makes it darker. 
       Screen makes it lighter. 
       If the logo is dark lines on white bg, and we put it on dark bg:
       - Multiply: White becomes transparent, Dark lines become darker (invisible on dark bg).
       - Screen: White becomes white, Dark lines become transparent (invisible).
       
       The logo is Brown lines on Cream/White bg.
       Footer is Brown (#877D73).
       This is tricky. The logo might need to be inverted or placed in a white box.
       Let's place it in a white circle or box for the footer, or just use mix-blend-mode: normal and let it have a box.
       Given the "Pastoral" feel, a white box/card for the logo might look nice.
       Let's try rounded corners.
    */
    background-color: #f9f8f6;
    /* Match original cream bg */
    padding: 10px;
    border-radius: 12px;
}

.footer__address {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.footer__links {
    justify-content: center;
}

.footer__links a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin: 0 var(--spacing-xs);
}

.footer__links a:hover {
    color: #fff;
}

.footer__copyright {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
}

/* Animations */
@keyframes fadeInSlow {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Responsive */
@media (max-width: 768px) {
    :root {
        --spacing-xl: 6rem;
        --spacing-lg: 4rem;
        --spacing-md: 2rem;
    }

    .hero__title {
        font-size: 2.5rem;
    }

    .about__content,
    .services__grid {
        grid-template-columns: 1fr;
    }

    .section__title {
        font-size: 2.5rem;
    }

    .nav {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }
}

/* Additions for new pages */

/* About Page */
.about__name {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
    line-height: 1.6;
}

.about__history p {
    margin-bottom: var(--spacing-xs);
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

/* Company Page */
.company__list {
    max-width: 800px;
    margin: 0 auto;
    border-top: 1px solid var(--color-border);
}

.company__item {
    display: grid;
    grid-template-columns: 150px 1fr;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border);
    align-items: baseline;
}

.company__item dt {
    font-weight: 500;
    color: var(--color-primary);
    font-family: var(--font-display);
}

.company__item dd {
    color: var(--color-text);
}

@media (max-width: 768px) {
    .company__item {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }
}