/* =========================
   SpuitHuys Purmerend — Base
   ========================= */

/* Theme */
:root{
    --bg:#FFFFFF;
    --text:#496367;            /* donkergroen/blauw */
    --muted:#E5DED1;           /* zandbeige */
    --accent:#E8B949;          /* okergeel */
    --ink:#333333;
    --ink-2:#444444;
    --surface:#FFFFFF;
    --surface-2:#fafafa;
    --shadow:0 2px 10px rgba(0,0,0,.08);
    --radius:8px;

    --container:1200px;
    --space-1:8px;
    --space-2:12px;
    --space-3:16px;
    --space-4:20px;
    --space-5:24px;
    --space-6:30px;
    --space-7:40px;
    --space-8:60px;
}

/* Reset-ish */
html{
    box-sizing:border-box;
    max-width:100%;
    overflow-x:hidden; /* voorkom horizontaal scrollen */
}
*,*::before,*::after{ box-sizing:inherit; }

body{
    font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    margin:0;
    color:var(--text);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

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

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

:focus-visible{
    outline:3px solid rgba(232,185,73,.5);
    outline-offset:2px;
}

/* Containers */
.container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 var(--space-4);
}
.minw0{ min-width:0; } /* helper als flex-child overflowt */

/* Utils */
.no-scroll{ overflow:hidden; }

/* =========================
   Header & Nav
   ========================= */
#mobile-menu .menu-close{ display:none; }
header{
    background:#fff;
    box-shadow:0 2px 4px rgba(0,0,0,.1);
    padding:var(--space-4) 0;
}
.header-content{
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
}
.logo{ font-size:24px; font-weight:700; color:var(--ink); text-decoration:none; }

nav ul{ display:flex; list-style:none; margin:0; padding:0; gap:20px; }
nav a{ color:var(--ink); font-weight:600; }
nav a:hover{ color:var(--accent); text-decoration:none; }

/* Hamburger menu (SVG) */
.hamburger-menu {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: none; /* alleen mobiel */
    align-items: center;
    justify-content: center;
    z-index: 1002;
}
.hamburger-menu .icon {
    width: 28px;
    height: 28px;
    stroke: var(--ink);
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: all 0.4s ease;
}
.hamburger-menu.white .icon { stroke: #fff; }

.hamburger-menu .line {
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Animatie naar kruis */
.hamburger-menu.active .line1 {
    transform: translateY(6px) rotate(45deg);
}
.hamburger-menu.active .line2 {
    opacity: 0;
}
.hamburger-menu.active .line3 {
    transform: translateY(-6px) rotate(-45deg);
}
/* Desktop dropdown submenu */
.has-sub{ position:relative; }
.caret{ margin-left:6px; transition:transform .2s ease; fill:none; stroke:currentColor; stroke-width:2; }

/* Base dropdown panel */
.submenu{
    position:absolute; top:100%; left:0; min-width:220px;
    margin:0; padding:8px 0; /* remove top margin to avoid hover gap */
    background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:8px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    list-style:none; display:block;
    opacity:0; visibility:hidden; transform:translateY(6px);
    transition:opacity .15s ease, transform .15s ease, visibility .15s;
    z-index:1002;
}
.submenu::before{
    content:"";
    position:absolute; left:0; right:0; top:-8px; height:8px;
}
.submenu li{ margin:0; }
.submenu a{ display:block; padding:10px 14px; font-weight:600; color:var(--ink); white-space:nowrap; }
.submenu a:hover{ background:var(--surface-2); color:var(--accent); text-decoration:none; }

/* Show on hover or keyboard focus */
.has-sub:hover > .submenu,
.has-sub:focus-within > .submenu{
    opacity:1; visibility:visible; transform:translateY(0);
}
.has-sub:hover > a .caret,
.has-sub:focus-within > a .caret{ transform:rotate(180deg); }

/* Prevent dropdown from going off-screen on the right edge */
nav ul{ position:relative; }
.has-sub .submenu{ right:auto; }

/* Mobile nav */
.overlay{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000;
}
.overlay.active{ display:block; }

@media (max-width:768px){
    .hamburger-menu{ display:flex; }

    #mobile-menu{
        display:block;
        position:fixed; top:0; right:-100%;
        width:80%; max-width:320px; height:100vh;
        background:#fff;
        box-shadow:-2px 0 5px rgba(0,0,0,.1);
        transition:right .3s ease;
        z-index:1001;
        overflow-y:auto;
        padding:80px 20px 20px;
    }
    #mobile-menu.active{ right:0; }

    #mobile-menu ul{
        display:flex; flex-direction:column; gap:15px;
        margin:0; padding:0;
    }
    #mobile-menu a{
        display:block; padding:10px 0; font-size:18px; line-height:1.2;
    }

    /* Submenu als accordion */
    #mobile-menu .submenu {
        position: static;
        border: 0;
        box-shadow: none;
        padding: 0;
        margin: 6px 0 10px 0;
        display: none;
    }
    #mobile-menu .submenu::before{ display:none; }
    #mobile-menu .submenu li a{ padding:10px 0 10px 12px; }
    #mobile-menu .has-sub.open > .submenu{ display:block; }
    #mobile-menu .has-sub > a{ display:flex; align-items:center; justify-content:space-between; }
}

/* =========================
   Main & Footer
   ========================= */
.main-content{
    min-height:calc(100vh - 200px);
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    margin:3px 0;
}
/* CBW Logo sectie */
.footer-logo {
    text-align: center;
}
.reviews {
    background: #fafafa;
    border-radius: 8px;
    padding: 30px;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.review {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.review .stars {
    color: #E8B949; /* jouw accentkleur (okergeel) */
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.review p {
    margin: 0 0 6px;
    color: #333;
}

.review .author {
    font-weight: 600;
    font-size: 0.95rem;
    color: #496367; /* jouw tekstkleur */
}

.footer-logo img.cbw-logo {
    max-width: 140px;
    height: auto;
    display: block;
    margin: 0 auto 10px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
    transition: transform .2s ease;
}

.footer-logo img.cbw-logo:hover {
    transform: scale(1.05);
}

.footer-logo .cbw-text {
    font-size: 0.9rem;
    color: #ddd;
    margin: 0;
}
footer{
    background:var(--text);
    color:#fff;
    padding:30px 0;
}
.footer-content{
    display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between;
}
.footer-section{ flex:1 1 200px; }
.footer-section h3{ margin:0 0 20px; font-size:18px; color:var(--accent); }
.footer-section p,.footer-section a{ color:#fff; margin:0 0 10px; display:block; text-decoration:none; }
.footer-section a:hover{ color:var(--accent); }
.copyright{
    width:100%; text-align:center; padding-top:20px; margin-top:20px;
    border-top:1px solid var(--text);
}

/* =========================
   Page / Hero headers
   ========================= */
.page-header,
.hero{
    background:var(--text);
    color:#fff;
    position:relative;
    overflow:hidden;
    text-align:center;
}
.page-header{ padding:60px 0; margin-bottom:60px; min-height:300px; display:flex; align-items:center; justify-content:center; }
.hero{ padding:60px 0; margin-bottom:40px; min-height:400px; display:flex; align-items:center; justify-content:center; }

.page-header::before,
.hero::before{
    content:''; position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--accent);
}

.page-header .header-content,
.hero .hero-content{ width:100%; padding:20px; display:block; }

.page-header h1,.hero h1{ font-size:2.5rem; margin:0 0 20px; color:#fff; }
.page-header p,.hero p{ font-size:1.2rem; max-width:800px; margin:0 auto; opacity:.9; }

@media (max-width:768px){
    .page-header{ min-height:200px; padding:40px 0; margin-bottom:40px; }
    .hero{ min-height:300px; padding:40px 0; }
    .page-header h1,.hero h1{ font-size:2rem; }
    .page-header p,.hero p{ font-size:1rem; }
}

/* =========================
   Buttons
   ========================= */
.btn{
    display:inline-block; border:none; cursor:pointer; user-select:none;
    background:var(--accent); color:#fff; padding:12px 24px; border-radius:4px; font-weight:700;
    transition:background-color .2s,color .2s,transform .05s;
}
.btn:hover{ background:#d9a836; color:#fff; text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:3px solid rgba(232,185,73,.45); outline-offset:2px; }

.btn-white{ background:#fff; color:var(--text); }
.btn-white:hover{ background:var(--accent); color:#fff; }

.btn-featured{ background:#fff; color:var(--text); }
.btn-featured:hover{ background:var(--text); color:#fff; }

/* =========================
   Sections (features, about, etc.)
   ========================= */
.features{
    display:flex; flex-wrap:wrap; gap:20px; justify-content:center; margin-bottom:60px;
}
.feature{
    flex:1 1 250px; max-width:calc(33.333% - 14px);
    padding:20px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
    text-align:center; border-top:3px solid var(--accent);
}
.feature h3{ margin:0 0 15px; color:var(--text); }
.feature p{ margin:0; line-height:1.6; color:var(--text); }

@media (max-width:768px){
    .features{ flex-direction:column; align-items:stretch; }
    .feature{ max-width:100%; opacity:0; transform:translateX(-30px); transition:transform .9s ease,opacity .9s ease; will-change:transform,opacity; }
    .feature:nth-child(2){ transform:translateX(30px); }
    .feature:nth-child(3){ transform:translateX(-30px); }
    .feature.is-visible{ opacity:1; transform:translateX(0); }
    .pricing-content .feature{ opacity:1 !important; transform:none !important; transition:none !important; }
}
@media (prefers-reduced-motion:reduce){
    .feature{ transition:none !important; transform:none !important; opacity:1 !important; }
}

/* About */
.about-section{ margin-bottom:60px; }
.about-section h2{
    font-size:2rem; margin:0 0 20px; color:var(--text); text-align:center; position:relative; padding-bottom:15px;
}
.about-section h2::after{
    content:''; position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:80px; height:3px; background:var(--accent);
}
.about-content{ display:flex; align-items:center; gap:40px; }
.about-text{ flex:1 1 0; }
.about-text p{ margin:0 0 15px; line-height:1.6; }
.about-image{ flex:1 1 0; border-radius:var(--radius); overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,.1); }
.about-image img{ width:100%; height:auto; display:block; }

@media (max-width:768px){
    .about-content{ flex-direction:column; }
    .about-image{ order:-1; margin-bottom:20px; }
}

/* CTA */
.cta-section{
    background:var(--text); color:#fff; padding:var(--space-8) 0; text-align:center; border-radius:var(--radius); margin-bottom:60px; position:relative; overflow:hidden;
}
.cta-section::before{ content:''; position:absolute; top:0; left:0; right:0; height:5px; background:var(--accent); }
.cta-section h2{ font-size:2rem; margin:0 0 20px; }
.cta-section p{ max-width:800px; margin:0 auto 30px; font-size:1.1rem; }
.cta-buttons{ display:flex; justify-content:center; gap:15px; flex-wrap:wrap; }
@media (max-width:768px){
    .cta-buttons{ flex-direction:column; align-items:center; }
    .cta-buttons .btn{ width:80%; }
}

/* Diverse secties */
.team-section,.values-section,.process-section,.faq-section,
.contact-section,.quote-section,.testimonials,.sample-section,
.sample-box-preview,.appointment-section,.appointment-types,
.calculation-section,.business-hours,.map-section,.intro-section{
    margin-bottom:60px;
}
.values-section,.testimonials,.sample-box-preview,.appointment-types,.calculation-section,.business-hours{
    background:var(--muted); padding:var(--space-8) 0; border-radius:var(--radius);
}

.section-title{
    font-size:1.8rem; margin:0 0 30px; color:var(--text); text-align:center; position:relative; padding-bottom:15px;
}
.section-title::after{
    content:''; position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:80px; height:3px; background:var(--accent);
}

/* Cards */
.card{
    background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:20px; border-top:3px solid var(--accent);
}

/* Tables */
.hours-table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.hours-table tr{ border-bottom:1px solid var(--muted); }
.hours-table td{ padding:12px 0; color:var(--text); word-break:break-word; }
.hours-table td:first-child{ font-weight:600; }

/* Forms */
.form-group{ margin-bottom:20px; }
label{ display:block; margin-bottom:8px; font-weight:600; color:var(--text); }
.form-control{
    width:100%; padding:12px 15px; border:1px solid var(--muted); border-radius:4px; font-size:16px;
    transition:border-color .2s, box-shadow .2s; color:var(--text); background:var(--surface);
}
.form-control:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 2px rgba(232,185,73,.2);
    outline:0;
}
textarea.form-control{ min-height:150px; resize:vertical; }

/* Calendly / Map */
.map-container{ height:400px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:3px solid var(--muted); }
.calendly-container{
    flex:2; min-width:300px; height:700px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:3px solid var(--muted);
}
.calendly-container .calendly-inline-widget,
.calendly-container .calendly-inline-widget iframe{ width:100% !important; height:100% !important; min-height:100% !important; }

/* Brands strip */
.brands-strip{
    background:var(--surface-2);
    border-block:1px solid #eee;
    padding:14px 0;
}
.brands-strip__inner{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.brands-strip__title{ font-weight:700; color:var(--ink); margin-right:6px; }
.brands-strip__list{ display:flex; flex-wrap:wrap; gap:10px 18px; list-style:none; margin:0; padding:0; }
.brands-strip__list li{ color:var(--ink-2); font-weight:700; letter-spacing:.4px; font-size:14px; white-space:nowrap; }
@media (max-width:640px){
    .brands-strip__title{ width:100%; margin-bottom:6px; }
    .brands-strip__list li{ font-size:13px; }
}

/* Responsive helpers */
@media (max-width:768px){
    .team-members,.preview-container,.testimonial-container,.types-container,
    .appointment-container,.sample-container,.quote-container,.contact-container{
        flex-direction:column;
    }
    .feature,.testimonial,.team-member,.preview-image,.preview-content,
    .quote-info,.quote-form,.sample    .quote-info,.quote-form,.sample-info,.sample-form,.appointment-info,.calendly-container{
        min-width:100%; max-width:100%;
    }
    .calendly-container{ height:100vh; max-height:100vh; }
}

/* Safe-guards tegen overflow op formulieren/contact */
.contact-container,.contact-info,.contact-form{ min-width:0; }
.contact-section,.contact-container,.contact-form{ overflow-x:hidden; }
.contact-form .form-control,.contact-form .btn{ max-width:100%; width:100%; }
.contact-form,.contact-form label,.contact-form .form-control,
.contact-info p,.contact-info a{
    overflow-wrap:anywhere; word-break:break-word;
}

/* Desktop-only page-header height */
@media (min-width:992px){
    .page-header{ min-height:800px; }
}

/* Basis voor submenu (desktop) */
nav ul li { position: relative; }
nav .has-sub > .caret { margin-left: 6px; display:inline-block; transform: translateY(2px); fill: currentColor; }
nav .submenu {
    position: absolute;
    left: 0; top: 100%;
    min-width: 220px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 8px 0;
    list-style: none;
    margin: 8px 0 0;
    display: none;
    z-index: 1003;
}
nav .submenu li a {
    display: block;
    padding: 10px 14px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}
nav .submenu li a:hover { background: #f6f6f6; }

/* Desktop: tonen op hover/focus */
@media (min-width: 769px){
    nav .has-sub:hover > .submenu,
    nav .has-sub:focus-within > .submenu { display: block; }
}

/* Mobiel: submenu als accordion in het paneel */
@media (max-width: 768px){
    #mobile-menu .submenu {
        position: static;
        border: 0;
        box-shadow: none;
        margin: 6px 0 10px 0;
        padding: 0;
    }
    #mobile-menu .submenu li a { padding: 10px 0 10px 12px; }
    #mobile-menu .has-sub.open > .submenu { display: block; }
    #mobile-menu .has-sub > a { display:flex; align-items:center; justify-content:space-between; }
}

/* Contact page layout improvements */
.contact-container{
    display:flex;
    gap:40px;
    align-items:flex-start;
}
.contact-info,.contact-form{ flex:1 1 0; }
.contact-info .info-item{
    background:var(--surface);
    border-top:3px solid var(--accent);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:16px;
    margin-bottom:16px;
}
.contact-info .info-item h3{
    display:flex; align-items:center; gap:10px;
    margin:0 0 8px; color:var(--text);
}
.contact-info .info-item svg{
    width:22px; height:22px; fill:currentColor; color:var(--accent); flex:0 0 auto;
}
.contact-form h2{ margin-top:0; }
@media (max-width:768px){
    .contact-container{ gap:20px; }
}


/* =========================
   Quote page, Testimonials, FAQ (scoped)
   ========================= */
.quote-section h2,
.testimonials h2,
.faq-section h2,
.sample-section h2,
.sample-box-preview h2{
    font-size:1.8rem; margin:0 0 20px; color:var(--text); text-align:center; position:relative; padding-bottom:12px;
}
.quote-section h2::after,
.testimonials h2::after,
.faq-section h2::after,
.sample-section h2::after,
.sample-box-preview h2::after{
    content:''; position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:80px; height:3px; background:var(--accent);
}

/* Quote layout */
.quote-container{ display:flex; gap:30px; align-items:flex-start; }
.quote-info,.quote-form{
    flex:1 1 0; min-width:300px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:24px; border-top:3px solid var(--accent);
}
.quote-info h2,.quote-form h2{ margin-top:0; text-align:left; }
.info-box{ background:var(--surface-2); border-left:4px solid var(--accent); padding:12px 16px; border-radius:6px; margin:16px 0 20px; }
.text-small{ font-size:.9rem; color:var(--ink-2); display:block; margin-top:6px; }
.link-primary{ color:var(--accent); font-weight:700; }
.link-primary:hover{ text-decoration:underline; }

/* Form helpers */
.form-check{ display:flex; align-items:flex-start; gap:10px; }
.form-check-input{ margin-top:4px; }
.quote-form .btn{ width:100%; }

/* Testimonials */
.testimonial-container{ display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
.testimonial{ flex:1 1 280px; max-width:calc(33.333% - 14px); }
.testimonial-content{ background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; border-top:3px solid var(--accent); height:100%; display:flex; flex-direction:column; }
.testimonial-text p{ margin:0 0 14px; }
.testimonial-author{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.testimonial-author img{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.author-info h4{ margin:0; color:var(--ink); }
.author-info p{ margin:0; color:var(--ink-2); font-size:.95rem; }

/* FAQ */
.faq-item{ background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); margin:0 0 12px 0; overflow:hidden; border-left:4px solid var(--accent); }
.faq-question{ padding:14px 16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; padding:0 16px; }
.faq-item.active .faq-answer{ max-height:500px; padding:0 16px 16px; }

@media (max-width:768px){
    .quote-info,.quote-form{ min-width:100%; }
}


/* Sample page layout */
.sample-container{ display:flex; gap:30px; align-items:flex-start; }
.sample-info,.sample-form{
    flex:1 1 0; min-width:300px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:24px; border-top:3px solid var(--accent);
}
.sample-info h2,.sample-form h2{ margin-top:0; text-align:left; }
.sample-form .btn{ width:100%; }

/* Color options grid */
.color-options{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px;
}
.color-option{
    display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--muted); border-radius:6px; background:var(--surface-2);
}
.color-option input[type="checkbox"]{ flex:0 0 auto; }
.color-option label{ margin:0; font-weight:600; }
.color-swatch{ width:22px; height:22px; border-radius:4px; border:1px solid rgba(0,0,0,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); flex:0 0 22px; }

/* Preview section */
.preview-container{ display:flex; gap:30px; align-items:flex-start; }
.preview-image{ flex:1 1 0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:3px solid var(--muted); }
.preview-image img{ width:100%; height:auto; display:block; }
.preview-content{ flex:1 1 0; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; border-top:3px solid var(--accent); }
.preview-content h3{ margin-top:0; }
.preview-content ul{ padding-left:18px; }
.preview-content li{ margin-bottom:8px; }

@media (max-width:768px){
    .sample-info,.sample-form{ min-width:100%; }
    .color-options{ grid-template-columns:1fr; }
}


/* =========================
   Mobile Menu (Full-screen overlay redesign)
   ========================= */
@media (max-width:768px){
    /* Make the mobile menu a full-screen overlay that drops from the top */
    #mobile-menu{
        left:0; right:0; top:0; bottom:0;
        width:100%; max-width:none; height:100vh;
        inset:0;
        position:fixed;
        background:#1F2937; /* donkerblauw */
        box-shadow:none;
        transform:translateY(-100%);
        transition:transform .35s ease;
        padding:100px 24px 40px; /* ruimte voor header */
        z-index:1001;
    }
    #mobile-menu.active{ transform:translateY(0); }

    /* Close button */
    #mobile-menu .menu-close{
        position:absolute; top:18px; right:18px;
        width:44px; height:44px;
        display:flex; align-items:center; justify-content:center;
        background:transparent; border:0; color:#fff; cursor:pointer;
        border-radius:8px;
    }
    #mobile-menu .menu-close:hover{ color:var(--accent); background:rgba(255,255,255,.06); }
    #mobile-menu .menu-close:focus-visible{ outline:3px solid rgba(232,185,73,.5); outline-offset:2px; }

    /* Centered vertical list */
    #mobile-menu ul{
        display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
        gap:18px; margin:0; padding:0;
    }

    #mobile-menu a{ color:#fff; font-size:22px; font-weight:700; letter-spacing:.2px; }
    #mobile-menu a:hover{ color:var(--accent); text-decoration:none; }

    /* Submenu as accordion with subtle contrast */
    #mobile-menu .submenu{
        background:transparent; border:0; box-shadow:none; margin:8px 0 6px 0; padding:0;
    }
    #mobile-menu .submenu a{ font-size:18px; font-weight:600; opacity:.9; padding:10px 0 10px 12px; }

    #mobile-menu .has-sub > a{ width:100%; display:flex; align-items:center; justify-content:space-between; }
    #mobile-menu .has-sub.open > a .caret{ transform:rotate(180deg); }

    /* Dark overlay already exists; ensure visibility sits below menu */
    .overlay{ background:rgba(0,0,0,.6); z-index:1000; }
}