:root {
    --bg-color: #FDFBF8;
    --primary-color: #C06014;
    --secondary-color: #F3EFEA;
    --text-color: #423A3A;
    --text-light-color: #706666;
    --accent-color: #EAAA79;
    --white-color: #FFFFFF;
    --border-color: #EAE0D8;
    --dark-bg-color: #423A3A;
    --shadow-color: rgba(66, 58, 58, 0.08);
    --required-color: #C06014;

    --font-heading: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
    --font-body: 'Noto Sans JP', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-body);
    line-height: 1.8;
    color: var(--text-color);
    background-color: var(--bg-color);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--accent-color);
}

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

ul {
    list-style: none;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.section-title,
.service-item h3,
.feature-item h3,
.pricing-item h4,
.flow-step__title,
.faq-question {
    font-family: var(--font-heading);
    font-weight: 700;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    /* Reverted gap */
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 60px;
}

.section-title i {
    color: var(--accent-color);
    font-size: 2rem;
}

.section-subtitle {
    text-align: center;
    margin-bottom: 60px;
    color: var(--text-light-color);
}

/* Header */
.header {
    background-color: rgba(253, 251, 248, 0.85);
    backdrop-filter: blur(10px);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border-color);
}

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

.header__left {
    display: flex;
    align-items: center;
}

.header__right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-logo {
    margin: 0;
    line-height: 1;
}

.header-logo a {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--primary-color);
    /* Restored to orange */
    text-decoration: none;
    /* Ensure no underline */
}

.header-logo i {
    margin-right: 10px;
    font-size: 1.5rem;
}

/* Global Menu (Desktop) */
.header-nav>ul {
    display: flex;
    align-items: center;
}

/* Spring Seasonal Message */
.seasonal-message-section {
    background: #fdf1f8;
    /* Spring Lite Pink (User Requested) */
    padding: 20px 0;
    text-align: center;
    border: none !important;
    /* Force removal */
    box-shadow: none !important;
    /* Force removal */
}

.seasonal-message-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    font-weight: bold;
    color: #db7093;
    /* PaleVioletRed */
    font-size: 1.1rem;
}

.seasonal-message-box .icon {
    font-size: 1.5rem;
    animation: bounce 2s infinite;
}

.header-nav li {
    position: relative;
    padding: 0 10px;
}

.header-nav li:not(:last-child)::after {
    content: none;
    /* content: '|'; removed to fix dropdown artifact and alignment */
    position: absolute;
    right: -2px;
    color: var(--text-light-color);
}

.header-nav a {
    font-weight: bold;
    font-size: 0.9rem;
    padding: 5px 0;
    color: var(--text-color);
    display: inline-block;
    /* Ensure links behave well */
}

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

.header-nav a i {
    display: none;
}

/* === Submenu Dropdown === */
.header-nav li {
    position: relative;
    padding: 0 10px;
}

/* Remove divider for nested items or keep it only for top level? */
/* Separator removed as it causes alignment issues with dropdowns */
.header-nav>ul>li:not(:last-child)::after {
    content: none;
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(253, 251, 248, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 10px 0;
    min-width: 180px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    flex-direction: column;
    z-index: 200;
    border: 1px solid var(--border-color);
}

.has-submenu:hover .submenu {
    display: flex;
}

.submenu li {
    padding: 0;
    width: 100%;
}

.submenu li::after {
    content: none !important;
}

.submenu a {
    display: block;
    padding: 10px 20px;
    font-size: 0.9rem;
    color: var(--text-color);
    white-space: nowrap;
    text-align: center;
}

.submenu a:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

/* Hide icons on desktop */
.hamburger {
    display: none;
}

/* Call Button */
.btn-tel {
    background-color: var(--accent-color);
    color: var(--text-color);
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-tel:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn-tel i {
    font-size: 1.2rem;
}

/* Drawer Overlay */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.drawer-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* Other sections... (styles are identical to previous version) */
main>section {
    padding: 90px 0;
}

main>section:nth-of-type(even) {
    background-color: var(--secondary-color);
}

.fade-in-target {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-target.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.hero {
    position: relative;
    height: 600px;
    padding: 0;
    color: var(--white-color);
    overflow: hidden;
    /* Hide slides that are outside the hero area */
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Align text to the left */
    padding: 0 5%;
    /* Add some padding to keep the text box from the edge */
    overflow: hidden;
}

.slide.active {
    opacity: 1;
}

.slide__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

.slide__text {
    position: relative;
    z-index: 2;
    max-width: 550px;
    padding: 2.5rem 3rem;
    background: rgba(253, 251, 248, 0.92);
    /* Gentle semi-transparent background from var(--bg-color) */
    border-radius: 25px;
    box-shadow: 0 10px 35px rgba(66, 58, 58, 0.15);
    backdrop-filter: blur(8px);
}

.slide__text h2 {
    color: #333;
    /* Explicitly dark color for readability */
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.5;
    text-shadow: none;
    font-family: var(--font-heading);
}

.slide__text p {
    color: var(--text-light-color);
    font-size: 1rem;
    margin-bottom: 2rem;
}

.btn {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: bold;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

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

.btn-primary:hover {
    background-color: var(--accent-color);
    color: var(--text-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn-secondary {
    background-color: var(--text-light-color);
    color: var(--white-color);
}

.btn-secondary:hover {
    background-color: var(--text-color);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.feature-item {
    text-align: center;
}

.feature-icon-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.feature-img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.feature-item h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.feature-item p {
    font-size: 0.95rem;
    line-height: 1.7;
    text-align: left;
    background-color: var(--white-color);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px var(--shadow-color);
    margin-top: 15px;
    border: 1px solid var(--border-color);
}

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

.service-item {
    background-color: var(--white-color);
    border-radius: 20px;
    box-shadow: 0 5px 25px var(--shadow-color);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px var(--shadow-color);
}

.service-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.service-text {
    padding: 25px;
}

.service-item h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.service-item p {
    font-size: 0.95rem;
}

.flow-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    text-align: center;
}

.flow-step {
    position: relative;
}



.flow-step__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background-color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--primary-color);
    border: 2px solid var(--border-color);
}

.flow-step__number {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    background: var(--primary-color);
    color: var(--white-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 2px solid var(--white-color);
}

.flow-step__title {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.flow-step__text {
    font-size: 0.9rem;
    text-align: left;
    background-color: var(--white-color);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px var(--shadow-color);
    margin-top: 15px;
    position: relative;
    border: 1px solid var(--border-color);
}

.pricing-table {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.pricing-item {
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    width: 350px;
}

.pricing-item.main {
    background-color: var(--white-color);
    box-shadow: 0 5px 25px var(--shadow-color);
}

.pricing-item:not(.main) {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
}

.pricing-item h4 {
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.pricing-item .price {
    font-size: 2.8rem;
    font-weight: bold;
    color: var(--primary-color);
}

.pricing-item .price span {
    font-size: 1rem;
    font-weight: normal;
    margin-left: 5px;
}

.pricing-note {
    font-size: 0.9rem;
    color: var(--text-light-color);
}

.pricing-caution {
    text-align: center;
    font-size: 0.9rem;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background-color: var(--white-color);
    border-radius: 15px;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
}

.faq-question {
    padding: 20px;
    cursor: pointer;
    font-size: 1.1rem;
    position: relative;
}

.faq-question::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
}

.faq-item[open]>.faq-question::after {
    transform: translateY(-50%) rotate(180deg);
}

.faq-answer {
    padding: 0 20px 20px;
    line-height: 1.7;
}

.contact-form {
    max-width: 800px;
    margin: 0 auto;
    background: var(--white-color);
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 10px 30px var(--shadow-color);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.form-group .required {
    color: var(--required-color);
    font-size: 0.8rem;
    margin-left: 5px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    font-size: 1rem;
    background-color: var(--bg-color);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--accent-color);
}

.zip-input {
    display: flex;
    gap: 10px;
}

.zip-input input {
    width: 160px;
}

.form-required-note {
    font-size: 0.9rem;
    text-align: right;
}

.form-submit {
    text-align: center;
    margin-top: 30px;
}

.footer {
    background-color: var(--dark-bg-color);
    color: var(--secondary-color);
    padding: 60px 0;
    text-align: center;
}

.footer-contact {
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
    /* To wrap content so image can position relative to it */
}

.footer-contact p {
    margin-bottom: 15px;
    font-size: 1rem;
    color: var(--white-color);
}

.footer__tel-btn {
    background-color: var(--accent-color);
    color: var(--text-color);
}

.footer__tel-btn:hover {
    background-color: var(--white-color);
}

.footer-info {
    margin-bottom: 30px;
}

.footer-info h3 {
    color: var(--white-color);
    margin-bottom: 10px;
    font-family: var(--font-heading);
}

.footer-info p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 5px;
    color: var(--white-color);
}

.footer-nav {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 30px 0;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    gap: 15px 30px;
    flex-wrap: wrap;
}

.footer-nav a {
    font-weight: bold;
    color: var(--white-color);
    padding: 10px 25px;
    /* Adjusted padding */
    background-color: transparent;
    border: 2px solid var(--accent-color);
    /* Added border */
    border-radius: 50px;
    /* Added border-radius for pill shape */
    transition: all 0.3s ease;
    /* Added transition */
}

.footer-nav a:hover {
    background-color: var(--accent-color);
    color: var(--dark-bg-color);
    /* Changed text color for contrast */
    transform: translateY(-2px);
    /* Added subtle lift effect */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* Added subtle shadow */
}

.copyright {
    font-size: 0.9rem;
    color: var(--white-color);
}

/* === Floating Back to Top Button (Updated) === */
.floating-back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    color: var(--white-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    z-index: 50;
}

.floating-back-to-top:hover {
    background-color: var(--accent-color);
    color: var(--text-color);
}

.floating-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* === Video Banner === */
.video-banner-wrapper {
    background-color: var(--white-color);
    padding: 90px 0;
}

.video-banner {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
    box-shadow: 0 5px 25px var(--shadow-color);
    border: 2px dotted var(--accent-color);
}

/* === Video Banner Text Box === */
.video-banner-text {
    text-align: center;
    margin-top: 30px;
    padding: 25px 30px;
    background-color: rgba(253, 251, 248, 0.92);
    /* Matches slide text background */
    backdrop-filter: blur(8px);
    /* Matches slide text background */
    border-radius: 20px;
    /* Rounded corners */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 5px 25px var(--shadow-color);
    border: 1px solid var(--border-color);
}

.video-banner-text p {
    color: var(--text-light-color);
    /* Lighter text for the body */
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.8;
    margin: 0;
}

.video-banner-text p:first-child {
    margin-bottom: 15px;
    /* Space between headline and text */
}

.video-banner-text p strong {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    /* Make the headline bigger */
    font-weight: 700;
    color: var(--primary-color);
    display: block;
    /* Make it a block element */
}

/* === Christmas Message === */
.christmas-message-section {
    padding: 30px 0;
    background-color: transparent;
    /* Sits on the default body background */
}

.christmas-message-box {
    background-color: #D9534F;
    /* Festive Red */
    color: var(--white-color);
    border-radius: 15px;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 5px 20px rgba(217, 83, 79, 0.3);
    /* Reddish shadow */
}

.christmas-message-box p {
    margin: 0;
    font-weight: bold;
    font-size: 1.1rem;
    font-family: var(--font-heading);
}

.christmas-message-box .icon {
    font-size: 1.8rem;
    line-height: 1;
    /* Aligns emojis better */
}

/* === Responsive === */
@media (max-width: 1024px) {

    .header-nav,
    .nav-tel-mobile {
        display: none;
    }

    .header__tel-btn {
        display: none;
    }

    .hamburger {
        display: block;
        cursor: pointer;
        background: none;
        border: none;
        z-index: 201;
        position: relative;
    }

    .hamburger-bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        background-color: var(--text-color);
        transition: all 0.3s ease-in-out;
    }

    .hamburger.is-active .hamburger-bar {
        background-color: var(--text-color);
    }

    .hamburger.is-active .hamburger-bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.is-active .hamburger-bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.is-active .hamburger-bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Drawer Menu Styles */
    .drawer-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 300px;
        height: 100%;
        background: var(--bg-color);
        box-shadow: 3px 0 15px rgba(0, 0, 0, 0.1);
        transform: translateX(-100%);
        transition: transform 0.4s ease;
        z-index: 200;
        display: block;
        padding: 30px 0 40px;
        overflow-y: auto;
    }

    .drawer-nav.is-active {
        transform: translateX(0);
    }

    .drawer-nav ul {
        display: block;
    }

    .drawer-nav li {
        padding: 0;
    }

    .drawer-nav a {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 15px 30px;
        font-size: 1.1rem;
        color: var(--text-color);
        text-decoration: none;
    }

    .drawer-nav a:hover {
        background-color: var(--secondary-color);
        color: var(--primary-color);
    }

    .drawer-nav a i {
        display: inline-block;
        font-size: 1.1rem;
        width: 20px;
        text-align: center;
        color: var(--primary-color);
    }

    .nav-tel-mobile {
        display: block;
        margin-top: 20px;
        padding: 0 30px 20px;
        text-align: center;
    }

    .nav-tel-mobile__text {
        color: var(--text-color);
        margin-bottom: 10px;
        font-weight: bold;
    }

    .nav-tel-mobile a {
        justify-content: center;
        font-size: 1.1rem;
        color: var(--text-color);
        border-radius: 0;
        padding: 12px 30px;
        font-weight: bold;
        box-shadow: none;
        border: 2px dashed var(--accent-color);
        margin: 0 auto;
        display: block;
        max-width: fit-content;
    }

    .nav-tel-mobile a:hover {
        background-color: var(--secondary-color);
        color: var(--primary-color);
    }

    .nav-tel-mobile a i {
        color: var(--primary-color);
    }

    .hero {
        height: 500px;
    }

    .slide__text h1 {
        font-size: 2.2rem;
    }

    .slide__text p {
        font-size: 1rem;
    }

    .feature-grid,
    .service-grid {
        grid-template-columns: 1fr;
    }

    .flow-steps {
        display: grid;
        grid-template-columns: 1fr;
    }


}

@media (max-width: 480px) {
    .flow-step {
        padding-bottom: 40px;
    }

    .drawer-nav {
        width: 100%;
    }

    .nav-tel-mobile {
        padding: 0 20px 20px;
    }
}

body.no-scroll {
    overflow: hidden;
}

@media (min-width: 1025px) {

    .drawer-nav,
    .hamburger {
        display: none;
    }
}

/* ========== 対応エリアセクションのスタイル ========== */
.area {
    padding: 90px 0;
    background-color: var(--secondary-color);
}

.area .section-title {
    margin-bottom: 15px;
}

.area .section-subtitle {
    margin-bottom: 60px;
}

.area-box {
    background-color: var(--white-color);
    border: 2px dotted var(--accent-color);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 5px 25px var(--shadow-color);
    max-width: 900px;
    margin: 0 auto;
}

.area-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.area-list li {
    background-color: var(--secondary-color);
    color: var(--text-color);
    padding: 10px 25px;
    border-radius: 50px;
    box-shadow: none;
    font-weight: bold;
    white-space: nowrap;
    transition: background-color 0.3s;
}

.area-list li:hover {
    background-color: var(--accent-color);
    color: var(--white-color);
    transform: none;
    box-shadow: none;
}

@media (max-width: 768px) {
    .area-box {
        padding: 30px 20px;
    }

    .area-list {
        gap: 15px;
    }
}

/* ========== お知らせセクション (Google Business Profile) ========== */
.news-section {
    background-color: var(--secondary-color);
    /* Use secondary background */
}

/* Carousel Wrapper for Buttons */
.carousel-wrapper {
    position: relative;
    padding: 0 50px;
    /* Space for buttons */
}

.news-grid {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 20px;
    /* Scrollbar space */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
}

.news-grid::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar Chrome/Safari */
}

.news-item {
    background-color: var(--white-color);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 15px var(--shadow-color);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    /* 3 columns calculation: (100% - total_gap) / 3 */
    /* Gap is 20px * 2 = 40px in visible area */
    flex: 0 0 calc((100% - 40px) / 3);
    scroll-snap-align: start;
}

.news-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.news-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-item:hover .news-image img {
    transform: scale(1.05);
}

.news-image.no-image {
    color: #ccc;
    font-size: 3rem;
}

.news-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.news-date {
    font-size: 0.85rem;
    color: var(--text-light-color);
    margin-bottom: 10px;
    font-weight: bold;
}

.news-text {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.news-btn {
    align-self: flex-start;
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.news-btn:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/* Nav Buttons */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    color: var(--primary-color);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 10;
}

.nav-btn:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.nav-btn.prev {
    left: 0;
}

.nav-btn.next {
    right: 0;
}

.loading-spinner,
.error-msg,
.no-posts {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--text-light-color);
}


/* Responsive for News */
@media (max-width: 768px) {
    .carousel-wrapper {
        padding: 0;
        /* Remove side padding on mobile */
    }

    .nav-btn {
        display: none;
        /* Hide buttons on mobile, swipe is better */
    }

    .news-grid {
        /* Keep horizontal scroll on mobile */
        max-width: 100%;
        margin: 0;
        padding-right: 20px;
        /* Hint at more content */
    }

    .news-item {
        /* Revert to slightly smaller fixed width on mobile for peek effect */
        flex: 0 0 85%;
    }
}

/* === Repair Cases Section === */
.cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.case-item {
    background-color: var(--white-color);
    border-radius: 20px;
    box-shadow: 0 5px 25px var(--shadow-color);
    padding: 30px;
    border: 1px solid var(--border-color);
}

.case-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.case-images {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.case-image-box {
    flex: 1;
    text-align: center;
}

.case-image-box img {
    border-radius: 10px;
    border: 1px solid var(--border-color);
    margin-bottom: 10px;
    height: 150px;
    object-fit: cover;
    width: 100%;
}

.case-label {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--text-light-color);
    display: block;
}

.case-label.before {
    color: #888;
}

.case-label.after {
    color: var(--primary-color);
}

.case-desc {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* === Testimonials Section === */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.testimonial-item {
    background-color: var(--white-color);
    border-radius: 20px;
    padding: 0;
    /* Remove padding from container to let header fill */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Softer, deeper shadow */
    position: relative;
    border: 2px solid var(--border-color);
    /* Thicker border */
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Align heights if grid allows */
    overflow: hidden;
    /* Ensure header radius clips */
}

/* Remove old speech bubble arrows */
.testimonial-item::after,
.testimonial-item::before {
    display: none;
}

.testimonial-rating {
    color: #FFD700;
    /* Gold */
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.testimonial-text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-color);
    font-style: normal;
    /* Remove italic for better readability */
    margin-bottom: 0;
}

.testimonial-author {
    background-color: var(--secondary-color);
    /* Header background */
    padding: 20px;
    border-bottom: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 0;
    /* Reset margin */
}

.testimonial-content-body {
    padding: 25px;
}

.testimonial-avatar {
    width: 50px;
    height: 50px;
    background-color: var(--secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.testimonial-info h4 {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 2px;
}

.testimonial-info span {
    font-size: 0.8rem;
    color: var(--text-light-color);
}

/* === Local Appeal & Comparison Table === */
/* === Local Appeal & Comparison Table === */
.local-appeal {
    margin-top: 80px;
    background-color: var(--white-color);
    border-radius: 20px;
    padding: 40px;
    border: 2px dashed var(--accent-color);
    text-align: center;
}

.local-appeal-title {
    font-size: 1.8rem;
    color: var(--primary-color);
    font-family: var(--font-heading);
    margin-bottom: 10px;
    /* Prevent cutoff */
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

.local-appeal-subtitle {
    font-size: 1.1rem;
    color: var(--text-color);
    font-weight: bold;
    margin-bottom: 25px;
}

.local-appeal-text {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    /* Improved readability for long text */
}

@media (max-width: 768px) {
    .local-appeal {
        padding: 20px;
        /* Reduced padding on mobile */
    }

    .local-appeal-title {
        font-size: 1.4rem;
        /* Smaller font on mobile */
    }

    .local-appeal-subtitle {
        font-size: 1rem;
    }

    .local-appeal-text {
        text-align: left;
    }
}

.comparison-container {
    margin: 0 auto;
    max-width: 900px;
    border-radius: 20px;
    /* Rounded outer corners */
    border: 2px solid var(--accent-color);
    /* Outer frame */
    overflow: hidden;
    /* Clip corners */
    overflow-x: auto;
    /* Allow horizontal scrolling */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    /* Fix for WebKit border-radius clipping */
    transform: translateZ(0);
}

.comparison-table {
    width: 100%;
    border-collapse: separate;
    /* Changed to separate for better border radius control if needed, but we rely on container clipping */
    border-spacing: 0;
    /* Simulates collapse */
    min-width: 600px;
}

.comparison-table th,
.comparison-table td {
    padding: 15px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #e0e0e0;
    /* Inner horizontal lines */
    border-right: 1px solid #e0e0e0;
    /* Inner vertical lines */
}

/* Remove right border from last column */
.comparison-table th:last-child,
.comparison-table td:last-child {
    border-right: none;
}

/* Remove bottom border from last row */
.comparison-table tr:last-child td {
    border-bottom: none;
}

.comparison-table th {
    font-size: 1.1rem;
    font-family: var(--font-heading);
}

.competitor-th {
    background-color: #f0f0f0;
    color: var(--text-light-color);
}

.our-shop-th {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    font-size: 1.2rem;
    position: relative;
}

.our-shop-th span {
    font-size: 0.9rem;
    display: block;
    margin-top: 5px;
}

/* Specificity fix: .comparison-table .row-header */
.comparison-table .row-header {
    background-color: var(--primary-color);
    color: var(--white-color);
    width: 20%;
    font-weight: bold;
}

.comparison-table td {
    background-color: var(--white-color);
    font-size: 0.95rem;
}

.comparison-table .our-shop-td {
    background-color: #fff8e1;
    font-weight: bold;
    color: var(--text-color);
}

.comparison-table .our-shop-td span {
    font-size: 0.85rem;
    font-weight: normal;
    display: block;
    margin-top: 5px;
    color: var(--text-light-color);
}

/* === Local Scenery Gallery === */
.local-gallery {
    margin-top: 50px;
}

.local-gallery-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 20px;
    display: inline-block;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 5px;
}

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

.gallery-item {
    border-radius: 15px;
    overflow: hidden;
    background-color: var(--white-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
}

.gallery-item img {
    width: 100%;
    height: 180px;
    /* Fixed height for uniformity */
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-caption {
    font-size: 0.85rem;
    color: var(--text-color);
    padding: 10px;
    font-weight: bold;
    background-color: #fafafa;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .local-appeal {
        padding: 25px;
    }

    .local-appeal-title {
        font-size: 1.5rem;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile */
        gap: 15px;
    }

    .gallery-item img {
        height: 200px;
        /* Slightly taller on mobile */
    }

    .cases-grid,
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .case-images {
        flex-direction: row;
        /* Keep side by side even on mobile if possible, or adjust */
    }
}

#flow {
    position: relative;
    overflow: hidden;
    color: var(--white-color);
    /* Make text white for background */
    background-color: transparent;
    padding: 80px 0;
}

/* Background Slider Container */
.flow-bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

/* Slide Items */
.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Parallax effect */
    opacity: 0;
    animation: fadeSlide 18s infinite;
}

/* Animation Timing */
.slide-item:nth-child(1) {
    animation-delay: 0s;
}

.slide-item:nth-child(2) {
    animation-delay: 6s;
}

.slide-item:nth-child(3) {
    animation-delay: 12s;
}

.slide-caption {
    position: absolute;
    top: 30px;
    left: 30px;
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(5px);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #333;
    font-weight: bold;
    z-index: 10;
    pointer-events: none;
    /* Allow clicks to pass through */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

@keyframes fadeSlide {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    /* Fade in */
    33% {
        opacity: 1;
    }

    /* Show */
    43% {
        opacity: 0;
    }

    /* Fade out */
    100% {
        opacity: 0;
    }
}

/* Overlay for readability */
#flow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    /* Lighter overlay (was 0.6) */
    z-index: -1;
}

.relative-content {
    position: relative;
    z-index: 1;
}

/* Adjust text colors in Flow section */
#flow .section-title {
    color: var(--white-color);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.flow-step {
    background-color: rgba(255, 255, 255, 0.2);
    /* Top glass part */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    padding: 0;
    /* Remove container padding for full-width text */
    text-align: center;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Clip the bottom text background */
}

/* Icon Wrapper */
.flow-step__header-icon {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 35px auto 15px;
    /* Center horizontally, space from top */
}

.flow-step__number {
    position: absolute;
    top: -10px;
    /* Overlap top border */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-color);
    color: var(--white-color);
    width: 30px;
    height: 30px;
    line-height: 30px;
    /* Center text vertically */
    border-radius: 50%;
    font-weight: bold;
    font-size: 1rem;
    z-index: 2;
    /* Ensure above icon */
    border: 2px solid white;
    /* Optional: adds a crisp border like the badge */
    margin: 0;
    /* Override previous margin */
}

.flow-step__icon {
    width: 100%;
    height: 100%;
    background-color: var(--white-color);
    /* White circle background */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Slight shadow for 3D effect */
    margin: 0;
    /* Remove old margin */
}

.flow-step__icon i {
    color: var(--primary-color);
    font-size: 2rem;
    /* Adjust icon size inside circle */
    text-shadow: none;
    /* Clean icon */
}

.flow-step__title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 20px;
    padding: 0 15px;
    color: var(--white-color);
    /* White text */
    border-bottom: none;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    /* Strong shadow for visibility */
}

.flow-step__text {
    background-color: rgba(255, 255, 255, 0.85);
    /* White bottom block */
    color: var(--text-color);
    padding: 20px 15px;
    margin: 0;
    width: 100%;
    flex-grow: 1;
    /* Extend to bottom */
    text-align: left;
    /* Easier reading for body text */
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    text-shadow: none;
}

/* Mobile Parallel Adjustment */
@media (max-width: 768px) {
    .slide-item {
        background-attachment: scroll;
        /* Disable fixed attachment on mobile for performance */
    }
}

/* === Seasonal Message === */
.seasonal-message-section {
    padding: 30px 0;
    background-color: var(--white-color);
    text-align: center;
}

.seasonal-message-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-color);
    background: #FFFEF5;
    padding: 20px 40px;
    border-radius: 50px;
    border: 2px dashed var(--accent-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.seasonal-message-box .icon {
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    .seasonal-message-box {
        flex-direction: column;
        gap: 10px;
        border-radius: 20px;
        width: 100%;
    }
}

/* === Mobile Fixed Footer === */
.mobile-fixed-footer {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--white-color);
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding-bottom: env(safe-area-inset-bottom);
}

.footer-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    color: var(--white-color);
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
    border: none;
    transition: background-color 0.3s;
}

.footer-btn i {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.footer-btn-tel {
    background-color: var(--accent-color);
}

.footer-btn-tel:hover {
    background-color: var(--primary-color);
}

.footer-btn-contact {
    background-color: var(--text-color);
}

.footer-btn-contact:hover {
    background-color: var(--dark-bg-color);
}

@media (max-width: 768px) {
    .mobile-fixed-footer {
        display: flex;
    }

    .footer {
        padding-bottom: 80px;
        /* Add padding to footer to avoid overlap */
    }

    .floating-back-to-top {
        bottom: 90px;
    }
}

/* === Windows 10 Section === */
.win10-section {
    padding: 60px 0;
    background-color: var(--secondary-color);
    /* Matches site gentle background */
}

.win10-box {
    background-color: var(--white-color);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 40px;
    border: 3px solid var(--accent-color);
    /* Soft Orange Accent */
    box-shadow: 0 10px 30px rgba(192, 96, 20, 0.1);
    /* Soft shadow using primary color tone */
    position: relative;
    overflow: hidden;
}

.win10-icon {
    font-size: 5rem;
    color: var(--primary-color);
    /* Brand Primary Color (Warm Orange/Brown) */
    flex-shrink: 0;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

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

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

.win10-content {
    flex-grow: 1;
}

.win10-content h2 {
    font-size: 1.8rem;
    font-family: var(--font-heading);
    margin-bottom: 10px;
    color: var(--text-color);
    /* Standard Text Color */
}

.win10-date {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-weight: bold;
    padding: 5px 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.win10-text {
    margin-bottom: 25px;
    line-height: 1.8;
}

.win10-text strong {
    color: var(--primary-color);
    /* Brand Primary Color */
    background: linear-gradient(transparent 70%, #FFE0B2 70%);
    /* Soft Orange Underline */
}

.btn-warning {
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 1.1rem;
    padding: 15px 50px;
    box-shadow: 0 4px 15px rgba(192, 96, 20, 0.3);
}

.btn-warning:hover {
    background-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(192, 96, 20, 0.4);
    color: var(--text-color);
}

.sp-only {
    display: none;
}

@media (max-width: 768px) {
    .win10-box {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
        gap: 20px;
    }

    .win10-icon {
        font-size: 4rem;
    }

    .win10-content h2 {
        font-size: 1.5rem;
    }

    .sp-only {
        display: block;
        /* Show line break on mobile */
    }

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

/* === Advisor Profile Section === */
.profile-section {
    padding-bottom: 60px;
    /* Space before contact form */
    background-color: var(--white-color);
    /* Clean background */
}

.profile-card {
    background-color: #EFEBE9;
    /* Very light warm gray/brown */
    border-radius: 15px;
    padding: 30px;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 2px solid #D7CCC8;
    /* Soft border */
}

.profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.profile-icon {
    width: 120px;
    height: 120px;
    /* Removed background/circle styles as we now use a transparent character image */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.profile-titles h3 {
    font-size: 1.4rem;
    color: var(--text-color);
    margin: 5px 0 0;
}

.profile-role {
    font-size: 0.9rem;
    color: var(--primary-color);
    font-weight: bold;
    letter-spacing: 0.05em;
    background-color: var(--white-color);
    padding: 5px 15px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 5px;
}

.profile-message {
    line-height: 1.8;
    color: #5D4037;
    /* Dark Brown Text */
}

.profile-message strong {
    color: #D84315;
    /* Accent Color */
    font-weight: bold;
    margin: 0 5px;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .profile-card {
        flex-direction: row;
        text-align: left;
        gap: 30px;
        padding: 40px;
    }

    .profile-header {
        margin-bottom: 0;
        width: 30%;
        border-right: 1px solid #D7CCC8;
        padding-right: 20px;
    }

    .profile-body {
        width: 70%;
    }
}

/* === Character Images & Animations === */

/* Wrapper Generic */
.char-wrapper {
    display: inline-block;
    position: relative;
    /* Wrapper handles the interaction transform (tilt/parallax) */
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
    /* Smooth JS follow */
    perspective: 1000px;
}

/* Hero Character (char-welcome) */
.char-welcome-wrapper {
    position: absolute;
    bottom: -0px;
    right: 20px;
    z-index: 10;
    pointer-events: auto;
    /* Allow interaction */
    /* char-entry animation affects this wrapper. 
       Note: JS interaction might overwrite transform after interaction starts. 
       Ideally we wrap THIS again, but for now let's hope the entry finishes fast. */
    animation: char-entry 2s ease-out forwards;

    /* Ensure sizing */
    width: 280px;
    max-width: 35vw;
    height: auto;
}

.char-welcome {
    width: 100%;
    /* Fill wrapper */
    height: auto;
    display: block;
    animation: sway 3s ease-in-out infinite alternate;
    filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.3));
    /* Initial state needs to match start of animation */
    transform: scaleX(-1) rotate(-3deg);
    cursor: pointer;
}

@keyframes char-entry {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sway {
    from {
        transform: scaleX(-1) rotate(-3deg);
    }

    to {
        transform: scaleX(-1) rotate(3deg);
    }
}

/* Section Title Icons (char-repair, char-guide) */
.char-section-icon-wrapper {
    display: inline-block;
    vertical-align: middle;
    margin-left: 25px;
    position: relative;
    top: -5px;
    width: 130px;
    height: auto;
}

.char-section-icon {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
    display: block;
    /* margin/position moved to wrapper */
}

/* Repair Robot: Tightening/Working Motion */
.char-repair {
    transform-origin: bottom center;
    animation: repair-work 4s infinite;
}

@keyframes repair-work {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    10% {
        transform: rotate(-12deg) scale(1.05);
    }

    20% {
        transform: rotate(0deg) scale(1);
    }

    30% {
        transform: rotate(-12deg) scale(1.05);
    }

    40% {
        transform: rotate(0deg) scale(1);
    }
}

/* Guide Robot: Happy Bounce/Attention Motion */
.char-guide {
    animation: guide-pop 3s ease-in-out infinite;
    transform-origin: center center;
    /* Wrapper handles parallax/tilt, this handles bounce */
}

@keyframes guide-pop {

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

    15% {
        transform: translateY(-15px) scale(1.1);
    }

    30% {
        transform: translateY(0) scale(0.95);
    }

    45% {
        transform: translateY(-5px) scale(1.05);
    }

    60% {
        transform: translateY(0) scale(1);
    }
}

/* Contact CTA Section (char-tel) */
/* char-tel was in a flex container, so it doesn't need absolute positioning. 
   We can just wrap it in a div that handles the tilt. 
   Existing structure: .contact-cta-wrapper > img.char-tel.
   We will change to: .contact-cta-wrapper > div.char-tel-wrapper > img.char-tel
*/
.char-tel-wrapper {
    width: 180px;
    height: auto;
    flex-shrink: 0;
}

.char-tel {
    width: 100%;
    height: auto;
    animation: ring 5s ease-in-out infinite;
    transform-origin: center bottom;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
    display: block;
}

@keyframes ring {

    0%,
    90% {
        transform: scale(1) rotate(0deg);
    }

    92% {
        transform: scale(1.1) rotate(5deg);
    }

    94% {
        transform: scale(1.1) rotate(-5deg);
    }

    96% {
        transform: scale(1.1) rotate(5deg);
    }

    98% {
        transform: scale(1.1) rotate(-5deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

.contact-cta-wrapper {
    /* ... existing ... */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 50px;
    padding: 35px 30px;
    background-color: #fffbf5;
    border-radius: 25px;
    border: 3px dashed var(--accent-color);
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* Footer Character */
.char-footer-wrapper {
    position: absolute;
    bottom: -15px;
    right: -100px;
    width: 120px;
    height: auto;
    z-index: 5;
}

.char-footer-tel {
    /* Removed absolute positioning, moved to wrapper */
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    /* Flip horizontally and apply new animation */
    transform: scaleX(-1);
    animation: footer-wiggle 4s ease-in-out infinite;
    transform-origin: bottom center;
    display: block;
}

@keyframes footer-wiggle {

    0%,
    100% {
        transform: scaleX(-1) rotate(0deg) translateY(0);
    }

    10% {
        transform: scaleX(-1) rotate(-5deg) translateY(-5px);
    }

    20% {
        transform: scaleX(-1) rotate(5deg) translateY(-5px);
    }

    30% {
        transform: scaleX(-1) rotate(-5deg) translateY(0);
    }

    40% {
        transform: scaleX(-1) rotate(0deg) translateY(0);
    }
}

/* Profile Character Animation */
/* Profile also flex, just wrap it */
.char-profile-wrapper {
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.char-profile {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
    animation: profile-float 3s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes profile-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@media (max-width: 768px) {

    /* Hero */
    .char-welcome-wrapper {
        right: 15px;
        bottom: 10px;
        width: 160px;
        /* Resize wrapper */
    }



    /* Section Icons */
    .char-section-icon-wrapper {
        width: 100px;
        margin-left: 0;
        margin-top: 5px;
    }

    /* Contact CTA */
    .contact-cta-wrapper {
        flex-direction: column;
        gap: 20px;
        padding: 30px 20px;
    }

    .char-tel-wrapper {
        width: 150px;
    }

    /* Footer char on mobile */
    .char-footer-wrapper {
        right: -10px;
        bottom: 60px;
        width: 90px;
    }



    .char-footer-wrapper {
        /* Let's tilt the wrapper for the mobile placement */
        transform: rotate(15deg);
        /* Wait, this might conflict with JS tilt! 
           JS tilt sets 'transform'. 
           We can add the 15deg to the JS logic or just accept that on mobile touch interactions are rare so mouse follow isn't huge.
           Or use an inner wrapper.
           Let's just leave the rotation off or put it in the animation?
           Actually, the previous CSS had it on the img.
           Let's put `transform: rotate(15deg)` on the WRAPPER, and let JS overwrite it?
           No, if JS overwrites, we lose 15deg.
           Safe bet: Put 15deg on the IMG, but ensure animation includes it? 
           The animation `footer-wiggle` resets rotation to 0/-5/5. So the 15deg was likely ignored if animation was running!
           So it probably didn't matter.
        */
    }
}

/* === Character Interactions === */

/* Tooltip (Speech Bubble) */
.char-tooltip {
    position: absolute;
    background: var(--white-color);
    border: 2px solid var(--primary-color);
    border-radius: 15px;
    padding: 10px 15px;
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--text-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    /* Let clicks pass through */
    transition: opacity 0.3s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy pop */
    z-index: 9999;
    /* Ensure on top of everything */
    white-space: nowrap;

    /* Default state for body-relative positioning: Centered horizontally (-50%), entirely above anchor (-100%), plus offset (10px) */
    transform: translate(-50%, -100%) translateY(10px) scale(0.9);
    transform-origin: bottom center;
}

.char-tooltip.show {
    opacity: 1;
    transform: translate(-50%, -100%) translateY(0) scale(1);
}

/* Windows 10 Warning Character */
.win10-icon .char-warning-wrapper {
    width: 150px;
    /* Adjust size larger than original icon */
    height: auto;
    display: inline-block;
}

.char-warning {
    width: 100%;
    height: auto;
    animation: shake 2s infinite ease-in-out;
    /* Nervous sway */
}

@keyframes shake {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-5deg);
    }

    75% {
        transform: rotate(5deg);
    }
}


/* Arrow for the bubble */
.char-tooltip::after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 10px 10px 0;
    border-color: var(--primary-color) transparent;
    display: block;
    width: 0;
    z-index: 1;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.char-tooltip::before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 9px 9px 0;
    border-color: var(--white-color) transparent;
    display: block;
    width: 0;
    z-index: 2;
    bottom: -7px;
    /* Adjusted to overlay the border */
    left: 50%;
    transform: translateX(-50%);
}

/* Animations */
@keyframes charBounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-20px);
    }

    60% {
        transform: translateY(-10px);
    }
}

@keyframes charWave {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(-10deg);
    }

    40% {
        transform: rotate(10deg);
    }

    60% {
        transform: rotate(-5deg);
    }

    80% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes charShake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px) rotate(-5deg);
    }

    50% {
        transform: translateX(5px) rotate(5deg);
    }

    75% {
        transform: translateX(-5px) rotate(-5deg);
    }

    100% {
        transform: translateX(0);
    }
}

/* Apply animations (will be added by JS) */
.anim-bounce {
    animation: charBounce 1s ease;
}

.anim-wave {
    animation: charWave 1s ease;
}

.anim-shake {
    animation: charShake 0.5s ease;
}

/* === PC Diagnosis Tool === */
.diagnosis-section {
    background-color: #f0f8ff;
    /* Light AliceBlue */
    padding: 60px 0;
}

.diagnosis-card-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Center vertically */
    gap: 30px;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding-left: 20px;
    /* Space for char on mobile if needed */
}

/* Character Styling */
.diagnosis-char {
    flex-shrink: 0;
    width: 150px;
}

.diagnosis-char .char-img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
    transition: opacity 0.2s ease;
    /* Smooth fade switch */
}

.anim-bounce-slow {
    animation: charBounce 3s infinite ease-in-out;
}

/* Wizard Card */
.diagnosis-wizard {
    background: var(--white-color);
    border-radius: 20px;
    padding: 30px;
    width: 100%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    min-height: 300px;
    /* Stable height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Steps Transition */
.diagnosis-step {
    display: none;
    /* Hidden by default */
    width: 100%;
    animation: fadeIn 0.5s ease;
}

.diagnosis-step.active {
    display: block;
    /* Show active step */
}

.diagnosis-step h3 {
    margin-bottom: 20px;
    color: var(--primary-color);
    font-size: 1.5rem;
}

.diagnosis-step .highlight {
    background: linear-gradient(transparent 60%, #fffacd 60%);
}

.diagnosis-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.diagnosis-options .btn {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    text-align: center;
    border-radius: 50px;
    /* Pill shape */
    transition: transform 0.2s, box-shadow 0.2s;
}

.diagnosis-options .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.diagnosis-options .btn-outline {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background: transparent;
}

.diagnosis-options .btn-outline:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

/* Result Styles */
.result-title {
    font-size: 1.8rem;
    color: #e74c3c;
    /* Red for alert/impact */
    margin-bottom: 15px;
}

.result-desc {
    margin-bottom: 20px;
    line-height: 1.6;
}

.result-price-box {
    background: #fff8e1;
    /* Light yellow */
    border: 2px solid #ffecb3;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 25px;
    display: inline-block;
}

.result-price-box .label {
    display: block;
    font-size: 0.9rem;
    color: #f39c12;
    font-weight: bold;
}

.result-price-box .price {
    font-size: 2rem;
    font-weight: bold;
    color: #e67e22;
}

.result-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.result-actions .note {
    font-size: 0.8rem;
    color: #7f8c8d;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .diagnosis-card-wrapper {
        flex-direction: column;
        padding-left: 0;
    }

    .diagnosis-char {
        width: 100px;
        order: -1;
        /* Char on top */
    }

    .diagnosis-wizard {
        padding: 20px;
        min-height: auto;
    }
}

/* === Advanced Interactions === */

/* Hero Character */
.char-welcome {
    /* Enable 3D space */
    transform-style: preserve-3d;
    perspective: 1000px;
    /* Use variables for dynamic transform, with defaults */
    --rotateX: 0deg;
    --rotateY: 0deg;
    transform: perspective(1000px) rotateX(var(--rotateX)) rotateY(var(--rotateY));
    transition: transform 0.1s ease-out;
    /* Quick response for mouse */
    will-change: transform;
}

/* Diagnosis Character */
.diagnosis-char .char-img {
    transform-style: preserve-3d;
    perspective: 1000px;
    --rotateX: 0deg;
    --rotateY: 0deg;
    --translateY: 0px;
}

.char-welcome,
.char-footer-tel,
.diagnosis-char .char-img {
    /* Use independent transform properties if supported, else fallback to vars in transform */
    rotate: x var(--rotateX) y var(--rotateY);
}

/* Specific adjustments */
.diagnosis-char .char-img {
    /* Parallax effect via translate property */
    translate: 0 var(--translateY);
}

/* Ensure smooth transitions */
.char-welcome,
.char-footer-tel,
.diagnosis-char .char-img {
    transition: rotate 0.1s ease-out, translate 0.1s ease-out;
}

/* Walking Character */
.walking-char-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    /* Moved from right to avoid overlap */
    z-index: 9998;
    /* Below mobile footer (9999) if exists, else high */
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    /* Let clicks pass through unless on bubble/img */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hide on mobile to avoid clutter, or adjust position */
@media screen and (max-width: 768px) {
    .walking-char-container {
        display: none;
    }
}

.walking-char-img {
    width: 120px;
    height: auto;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
    transition: transform 0.1s linear;
    /* Responsive to walk/bob */
}

/* Walking Bobbing Animation applied via JS class */
.walking-char-container.is-walking .walking-char-img {
    animation: walkBob 0.4s infinite alternate ease-in-out;
}

@keyframes walkBob {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(-10px) rotate(2deg);
    }
}

.walking-char-bubble {
    background: white;
    padding: 10px 15px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
    white-space: nowrap;
}

/* Show bubble */
.walking-char-container.show-bubble .walking-char-bubble {
    opacity: 1;
    transform: translateY(0);
}

/* Arrow */
.walking-char-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

/* === Fix for Overlap between AI Chat and Back to Top (PC) === */
@media screen and (min-width: 769px) {
    .floating-back-to-top {
        bottom: 90px !important;
        /* Raise above AI Chat bubble */
    }
}

/* === MicroCMS / Topics / Column Styles === */
.news-grid-cms {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.news-card {
    background-color: var(--white-color);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.news-card__image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: #f0f0f0;
}

.news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card:hover .news-card__image img {
    transform: scale(1.05);
}

.news-card__content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.news-card__date {
    font-size: 0.85rem;
    color: var(--text-light-color);
    margin-bottom: 10px;
    display: block;
}

.news-card__title {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-color);
    line-height: 1.5;
    margin: 0;
}

/* List Page Styles */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.news-list-item {
    display: flex;
    background-color: var(--white-color);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

.news-list-item:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.news-list-item__image {
    width: 300px;
    flex-shrink: 0;
    height: 200px;
}

.news-list-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-list-item__content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-list-item__date {
    font-size: 0.9rem;
    color: var(--text-light-color);
    margin-bottom: 10px;
}

.news-list-item__title {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 15px;
    line-height: 1.4;
}

.news-list-item__excerpt {
    font-size: 0.95rem;
    color: var(--primary-color);
    font-weight: bold;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Responsive for CMS elements */
@media (max-width: 768px) {
    .news-grid-cms {
        grid-template-columns: 1fr;
    }

    .news-list-item {
        flex-direction: column;
    }

    .news-list-item__image {
        width: 100%;
        height: 200px;
    }

    .news-list-item__title {
        font-size: 1.2rem;
    }
}


/* === Dropdown Menu (Desktop) === */
.has-dropdown {
    position: relative;
    padding-bottom: 0;
    /* Align correctly */
}

.has-dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.dropdown-icon {
    font-size: 0.8em;
    transition: transform 0.3s ease;
}

.has-dropdown:hover .dropdown-icon {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: var(--white-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 10px 0;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--white-color);
}

.dropdown-menu li {
    display: block;
    margin: 0;
}

.dropdown-menu a {
    display: block;
    padding: 12px 20px;
    color: var(--text-color);
    font-size: 0.95rem;
    white-space: nowrap;
    transition: background-color 0.2s;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dropdown-menu a:hover {
    background-color: #f5f7fa;
    color: var(--primary-color);
}

.dropdown-menu a i {
    width: 20px;
    text-align: center;
    color: var(--accent-color);
}

/* === Mobile Drawer Accordion === */
.drawer-has-dropdown {
    /* No special style on list item main level */
}

.drawer-dropdown-toggle {
    display: flex;
    align-items: center;
    position: relative;
    /* justification removed to keep icon and text together */
}

/* Push the arrow to the far right */
.drawer-dropdown-icon {
    margin-left: auto;
    /* Pushes icon to the right in a flex container */
    transition: transform 0.3s ease;
}

.drawer-dropdown-toggle.is-active .drawer-dropdown-icon {
    transform: rotate(180deg);
}

.drawer-dropdown-menu {
    background-color: #f9f9f9;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    border-left: 4px solid var(--accent-color);
    /* Visual indicator of nesting */
}

.drawer-dropdown-menu li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.drawer-dropdown-menu li:last-child {
    border-bottom: none;
}

.drawer-dropdown-menu a {
    padding: 15px 20px 15px 40px;
    /* Indent more */
    font-size: 1rem;
}

/* === Multi-Column Footer === */
.footer {
    padding: 60px 0 20px;
    background-color: #333;
    color: #fff;
    font-size: 0.9rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
    margin-bottom: 40px;
    text-align: left;
    /* Default left alignment */
}

.footer-col h4 {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--accent-color);
    display: inline-block;
    padding-bottom: 5px;
}

.footer-logo {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-desc {
    color: #ccc;
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.footer-contact-info p {
    margin: 5px 0;
    color: #ddd;
    display: flex;
    align-items: center;
    gap: 8px;
}

.links-col ul {
    list-style: none;
    padding: 0;
}

.links-col ul li {
    margin-bottom: 10px;
}

.links-col ul li a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s, transform 0.3s;
    display: inline-block;
}

.links-col ul li a:hover {
    color: var(--accent-color);
    transform: translateX(5px);
}

.action-col {
    text-align: center;
}

.action-col .call-text {
    font-size: 0.85rem;
    color: #ddd;
    margin-bottom: 10px;
}

.footer-bottom {
    border-top: 1px solid #444;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.footer-legal a {
    color: #999;
    margin: 0 10px;
    font-size: 0.8rem;
    text-decoration: none;
}

.footer-legal a:hover {
    color: #fff;
}

/* Responsive Footer */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-col h4 {
        margin: 0 auto 20px;
    }

    .footer-logo {
        justify-content: center;
    }

    .footer-contact-info p {
        justify-content: center;
    }

    .char-footer-tel {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 20px;
    }
}

/* === Fix for Mobile Drawer Overflow === */
@media (max-width: 1024px) {
    .drawer-nav {
        overflow-y: auto;
        /* Enable vertical scrolling */
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling on iOS */
        max-height: 100vh;
        /* Ensure it doesn't exceed viewport */
        padding-bottom: 50px;
        /* Extra space at bottom for safe scrolling */
    }
}