/* Google font loaded via HTML preconnect in header.php */

/* Accessible visually-hidden helper (screen-reader only) */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Visible keyboard-focus indicator (only for keyboard nav, not mouse clicks).
   Supports the keyboard operability added to the accordion, FAQ and cards. */
:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 4px;
}

:root {
    --primary-color: #ffffff; /* White */
    --secondary-color: #1a422b; /* Dark Green */
    --accent-color: #2b6b45; /* Lighter Dark Green for hover */
    --black-color: #111111;
    --text-color: #444444; /* Dark gray for text */
    --bg-color: #f4f7f5; /* Very subtle off-white */
    --whatsapp-green: #25D366;
    
    --font-main: 'Outfit', sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    background-color: var(--primary-color);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Page Transition Overlay */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-color);
    z-index: 999999;
    pointer-events: none;
    animation: fadeOutOverlay 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeOutOverlay {
    0% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

/* Sensual Content Entry */
.hero-content {
    animation: sensualContentSlide 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

@keyframes sensualContentSlide {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Typography & General */
h1, h2, h3 {
    font-weight: 800;
    color: var(--black-color);
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.highlight {
    color: var(--secondary-color);
}

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

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.logo {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--black-color);
}

.logo img {
    height: 70px;
    width: auto;
}



.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-links a {
    font-weight: 600;
    color: var(--text-color);
    position: relative;
    transition: color 0.3s;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: var(--secondary-color);
    bottom: -5px;
    left: 0;
    transition: width 0.3s ease;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--secondary-color);
}

.nav-links a:hover::after, .nav-links a.active::after {
    width: 100%;
}

/* Buttons */
.hero-content p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 40px auto;
    text-align: center;
    opacity: 0.9;
}

.highlight-service {
    color: var(--secondary-color);
    font-weight: 700;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--whatsapp-green);
    color: white;
    padding: 12px 30px;
    border: 2px solid transparent;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 30px;
    background-color: transparent;
    color: var(--secondary-color);
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1.1rem;
    border: 2px solid var(--secondary-color);
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: var(--secondary-color);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 66, 43, 0.2);
}

.btn-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
    background: #20bd5a;
}



.massive-btn {
    font-size: 1.2rem;
    padding: 15px 35px;
}

/* Hero Section */
.hero-logo-bg {
    position: absolute;
    top: 50%;
    left: -5%; /* Move it to the left and slightly off-screen for a modern cropped look */
    transform: translateY(-50%);
    opacity: 0.08; /* Slightly more subtle now that it's an edge graphic */
    width: 60%;
    max-width: 800px;
    z-index: 1;
    pointer-events: none;
}

.hero-logo-bg img {
    width: 100%;
    height: auto;
    /* Removed grayscale to keep it visible and branded */
}
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 20px 20px 20px; /* Added top padding to prevent navbar overlap */
    background: var(--primary-color);
    position: relative;
    overflow: hidden; /* To ensure watermark logo doesn't overflow if it's large */
}

.hero-content {
    max-width: 800px;
    z-index: 10;
}

.hero h1 {
    font-size: 4.5rem;
    margin-bottom: 20px;
    line-height: 1.25;
    color: var(--black-color);
}

.hero h1 .highlight {
    display: inline-block;
}

.hero p {
    font-size: 1.3rem;
    color: #555555;
    margin-bottom: 40px;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--secondary-color);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 20;
    opacity: 0.85;
    transition: opacity 0.4s ease, transform 0.3s ease, color 0.3s ease;
    animation: bounceDown 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-indicator:hover {
    opacity: 1;
    color: var(--accent-color);
}

.scroll-indicator svg {
    transition: transform 0.3s ease;
}

@keyframes bounceDown {
    0%, 20%, 50%, 80%, 100% {
        transform: translate(-50%, 0);
    }
    40% {
        transform: translate(-50%, -10px);
    }
    60% {
        transform: translate(-50%, -5px);
    }
}

/* Premium Services */
.premium-services {
    padding: 100px 50px;
    text-align: center;
    background: #ffffff;
}

.premium-services h2 {
    font-size: 3rem;
    margin-bottom: 60px;
}

.services-accordion {
    display: flex;
    gap: 20px;
    height: 600px;
    max-width: 1200px;
    margin: 0 auto;
}

.accordion-item {
    flex: 1;
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: flex 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.accordion-item.active {
    flex: 5;
}

.accordion-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26,66,43,0.9) 0%, rgba(26,66,43,0.3) 100%);
    opacity: 0.8;
    transition: opacity 0.6s ease;
}

.accordion-item.active .accordion-overlay {
    opacity: 0.6;
}

.accordion-title-vertical {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform-origin: 0 50%;
    transform: rotate(-90deg) translateY(50%);
    white-space: nowrap;
    transition: opacity 0.3s ease 0.3s;
    z-index: 2;
}

.accordion-title-vertical h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.accordion-item.active .accordion-title-vertical {
    opacity: 0;
    transition: opacity 0.2s ease 0s;
    pointer-events: none;
}

.accordion-content {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 800px;
    max-width: 90vw;
    padding: 50px 30px;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(20px);
    transition: opacity 0.25s ease 0s, transform 0.25s ease 0s, visibility 0s linear 0.25s;
    z-index: 3;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.accordion-item.active .accordion-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.4s ease 0.35s, transform 0.4s ease 0.35s, visibility 0s linear 0.35s;
    pointer-events: auto;
}

.accordion-icon {
    margin-bottom: 15px;
}

.accordion-content h3 {
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 15px;
    line-height: 1.2;
}

.accordion-content p {
    color: #e0e0e0;
    font-size: 1.1rem;
    max-width: 650px;
    margin: 0 auto 30px auto;
}

.accordion-btn {
    border: 2px solid #fff;
    background: transparent;
    padding: 10px 25px;
    border-radius: 30px;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* View Samples Button for Number Plate Options */
.btn-view-samples {
    margin-top: 20px;
    background: linear-gradient(135deg, var(--secondary-color) 0%, #245c3b 100%);
    color: #fff;
    border: none;
    padding: 12px 26px;
    border-radius: 30px;
    font-size: 1.02rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-shadow: 0 6px 18px rgba(26, 66, 43, 0.2);
    transition: all 0.3s ease;
}

@media (hover: hover) {
    .btn-view-samples:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(26, 66, 43, 0.35);
        background: linear-gradient(135deg, #245c3b 0%, var(--secondary-color) 100%);
    }
}

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

/* Custom Creations Section */
.premium-creations {
    padding: 100px 50px;
    background: #f4f7f5;
}

.premium-creations h2 {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 80px;
}

.creations-container {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: stretch;
}

.creations-container.reverse {
    flex-direction: row-reverse;
}

.creations-showcase {
    flex: 1;
    min-width: 400px;
}

.glass-panel {
    background: var(--primary-color);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
}

/* 7-Image Slider */
.slider-wrapper {
    width: 100%;
    height: 100%;
    min-height: 600px;
}

.slider-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: scale(1);
    z-index: 1;
    animation: fadeCycle7 21s infinite linear;
}



.s-img-1 { animation-delay: 0s; }
.s-img-2 { animation-delay: 3s; }
.s-img-3 { animation-delay: 6s; }
.s-img-4 { animation-delay: 9s; }
.s-img-5 { animation-delay: 12s; }
.s-img-6 { animation-delay: 15s; }
.s-img-7 { animation-delay: 18s; }

@keyframes fadeCycle7 {
    0% { opacity: 0; transform: scale(1.000); }
    3% { opacity: 1; transform: scale(1.010); }
    11% { opacity: 1; transform: scale(1.037); }
    15%, 100% { opacity: 0; transform: scale(1.050); }
}

.creations-lists {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.glass-list-card {
    background: var(--primary-color);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--secondary-color);
    border-radius: 20px;
    padding: 40px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.glass-list-card:hover {
    box-shadow: 0 15px 40px rgba(26, 66, 43, 0.06);
    transform: translateX(5px);
}

.premium-title {
    font-size: 1.8rem;
    margin-bottom: 25px;
    color: var(--secondary-color);
}

.desc {
    color: #666;
    margin-bottom: 20px;
    font-style: italic;
}

.premium-list {
    list-style: none;
}

.premium-list li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--text-color);
    display: flex;
    align-items: center;
    transition: color 0.2s;
    margin: 10px 0;
}

.premium-list li::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--secondary-color);
    border-radius: 50%;
    margin-right: 15px;
}

.premium-list li:hover {
    color: var(--black-color);
    font-weight: 600;
}

/* Reviews Section */
.premium-reviews {
    padding: 100px 5%;
    text-align: center;
    background-color: var(--bg-color);
}

.premium-reviews h2 {
    font-size: 2.5rem;
    color: var(--black-color);
    margin-bottom: 50px;
}

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

@media (max-width: 1100px) {
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.review-card {
    width: 100%;
    max-width: none;
    padding: 25px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: rgba(255, 255, 255, 0.8);
    border-top: 1px solid rgba(255,255,255,0.5);
    border-left: 1px solid rgba(255,255,255,0.5);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.review-card .stars {
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.review-card .review-text {
    font-style: italic;
    color: #333;
    line-height: 1.6;
    font-size: 1.05rem;
}

.reviews-link-container {
    margin-top: 50px;
}

.btn-google-reviews {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px;
    background-color: #ffffff;
    color: #333;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.btn-google-reviews:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Find Us Section */
.premium-find-us {
    padding: 100px 50px;
    background: #ffffff;
}

.find-us-container {
    display: flex;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(26,66,43,0.1);
    border: 1px solid rgba(0,0,0,0.05);
    background: var(--primary-color);
}

.find-us-info {
    flex: 1;
    padding: 80px 60px;
    background: var(--primary-color);
    border-radius: 0;
    border: none;
    border-right: 1px solid rgba(0,0,0,0.05);
}

.find-us-info h2 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.find-us-info > p {
    color: #666;
    margin-bottom: 50px;
    font-size: 1.1rem;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 50px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.contact-item .icon {
    font-size: 2rem;
    background: var(--bg-color);
    padding: 15px;
    border-radius: 15px;
    border: 1px solid rgba(0,0,0,0.05);
}

.contact-text strong {
    display: block;
    color: var(--secondary-color);
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.contact-text p {
    color: var(--text-color);
}

.contact-text small {
    color: #888;
}

.find-us-map {
    flex: 1.2;
    position: relative;
    min-height: 500px;
}

/* Contact/CTA Section */
.cta-section {
    padding: 100px 50px;
    background: var(--primary-color);
    text-align: center;
}

.cta-container {
    max-width: 800px;
    margin: 0 auto;
    background: var(--secondary-color);
    padding: 60px;
    border-radius: 30px;
    box-shadow: 0 20px 50px rgba(26, 66, 43, 0.15);
}

.cta-container h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.cta-container p {
    font-size: 1.2rem;
    color: #e0e0e0;
    margin-bottom: 40px;
}

/* Hardware-accelerated smooth animations (Zero FOUT / Zero Stutter) */
.fade-in-element, .glass-card, .glass-list-card, .find-us-info, .find-us-map, .creations-showcase, .services-accordion, .contact-card {
    opacity: 0;
    transform: translateY(24px);
    will-change: opacity, transform;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-in-element.is-visible, .glass-card.is-visible, .glass-list-card.is-visible, .find-us-info.is-visible, .find-us-map.is-visible, .creations-showcase.is-visible, .services-accordion.is-visible, .contact-card.is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto !important;
}

/* =========================================
   ABOUT PAGE STYLES 
   ========================================= */

.about-section {
    padding: 100px 50px;
    background: var(--primary-color);
}

.about-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.about-section.reverse .about-container {
    flex-direction: row-reverse;
}

.about-text {
    flex: 1;
}

.about-text h2 {
    font-size: 2.5rem;
    margin-bottom: 25px;
}

.about-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 20px;
}

.about-image-wrapper {
    flex: 1;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.about-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 4/3;
}

/* About Specs Section */
.about-specs-section {
    padding: 100px 50px;
    background: var(--bg-color); /* Changed to light background */
    color: var(--black-color); /* Changed to dark text */
}

.specs-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.specs-header h2 {
    font-size: 2.8rem;
    color: var(--black-color); /* Changed to dark */
    margin-bottom: 15px;
}

.specs-header p {
    font-size: 1.2rem;
    color: #555; /* Better readability */
}

.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 60px auto;
}

.spec-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-radius: 20px;
    color: var(--black-color);
    padding: 40px 30px;
    text-align: center;
    transition: all 0.4s ease;
}

@media (hover: hover) {
    .spec-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    }
}

.spec-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.spec-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--secondary-color);
    font-weight: 700;
}

.spec-card p {
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
}

.spec-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.spec-list li {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 8px;
}

.spec-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.specs-hero-image {
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15); /* Lighter shadow */
}

.specs-hero-image img {
    filter: brightness(1.2) contrast(1.1); /* Brighten the dark workshop image */
}

/* =========================================
   CONTACT PAGE STYLES 
   ========================================= */

.contact-hub {
    padding: 80px 50px;
    background: var(--bg-color);
}

.contact-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-card {
    flex: 1 1 200px;
    max-width: 280px; /* Prevents cards from stretching too wide when wrapped */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
    border-radius: 25px;
    background: var(--primary-color);
    text-decoration: none;
    transition: all 0.4s ease;
    border: 1px solid rgba(0,0,0,0.03);
}

.contact-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: transform 0.4s ease;
}

@media (hover: hover) {
    .contact-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    }
    .contact-card:hover .contact-icon {
        transform: scale(1.1);
    }
}

.contact-card h3 {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.contact-card p {
    color: #666;
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.contact-link {
    font-weight: 600;
    color: var(--secondary-color);
    font-size: 1.1rem;
}

/* Contact Page External Layout Classes */
.contact-hero-content { max-width: 900px; }
.premium-find-us { max-width: 1400px; margin: 0 auto; }
.premium-find-us-header { text-align: center; margin-bottom: 40px; }
/* "Visit Us" pill. The text was var(--primary-color) — white — on a 10%-opacity
   green tint sitting on the section's white background: about 1.1:1 of contrast,
   so the label was invisible. The dark green gives ~9.5:1, well past WCAG AA.
   inline-block is needed too: on a plain inline <span> the vertical padding
   overflows instead of shaping the pill. */
.section-label-badge {
    display: inline-block;
    background: rgba(26, 66, 43, 0.1);
    color: var(--secondary-color);
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.premium-find-us-header h2 { font-size: 2.5rem; margin-top: 10px; }
.premium-find-us-header p { color: #666; max-width: 600px; margin: 10px auto 0; }
.contact-details-panel { background: rgba(255, 254, 254, 0.9); border: 1px solid rgba(255, 255, 255, 0.53); box-shadow: 0 20px 40px rgba(0,0,0,0.06); padding: 35px; }
.contact-details-panel h3 { font-size: 1.8rem; color: #000000; margin-bottom: 10px; font-weight: 800; }
.contact-details-panel p.panel-subtitle { color: #555; margin-bottom: 25px; font-size: 0.95rem; }
.contact-list { display: flex; flex-direction: column; gap: 20px; }
.contact-list-item { display: flex; align-items: flex-start; gap: 16px; }
.contact-list-item .contact-list-icon { background: #e8f5e9 !important; width: 50px !important; height: 50px !important; min-width: 50px !important; padding: 0 !important; border-radius: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #1a422b !important; flex-shrink: 0 !important; border: none !important; box-shadow: none !important; }
.contact-list-text { flex: 1; }
.contact-list-text.full-width { width: 100%; }
.contact-list-title { font-size: 1.1rem; color: #222; display: block; }
.contact-list-desc { color: #666; margin-top: 4px; line-height: 1.4; }
.contact-list-desc.spaced { line-height: 1.6; }
.contact-list-desc a { color: #1a422b; font-weight: 600; text-decoration: none; }
.schedule-table { width: 100%; margin-top: 12px; font-size: 0.95rem; border-collapse: collapse; }
.schedule-table tr { border-bottom: 1px solid rgba(0,0,0,0.04); }
.schedule-table th:first-child,
.schedule-table td:first-child { padding: 7px 0; font-weight: 500; color: #333; white-space: nowrap; }
.schedule-table th:last-child,
.schedule-table td:last-child { text-align: right; padding: 7px 0; color: #555; white-space: nowrap; }
.contact-map-wrapper { border-radius: 24px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.08); border: 4px solid #fff; min-height: 520px; position: relative; }
.contact-map-wrapper iframe { min-height: 520px; }

/*
   The framed map is interactive: a drag moved the view and left the red pin
   away from the workshop. This layer sits over it and takes every click and
   touch, so the frame below always shows JEXTUNED, and tapping opens Google
   Maps in a new tab where panning belongs.
*/
.find-us-map .map-cover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 18px;
    text-decoration: none;
    background: transparent;
}

.find-us-map .map-cover-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 30px;
    background: rgba(26, 66, 43, 0.92);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease, transform 0.2s ease;
}

.find-us-map .map-cover:hover .map-cover-hint,
.find-us-map .map-cover:focus-visible .map-cover-hint {
    background: #25d366;
    transform: translateY(-2px);
}

.find-us-map .map-cover:focus-visible {
    outline: 3px solid #25d366;
    outline-offset: -3px;
}

/* FAQ Section */
.faq-section {
    padding: 80px 50px;
    background: #f8faf9;
    text-align: center;
}

.faq-section h2 {
    font-size: 2.8rem;
    margin-bottom: 60px;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}

.faq-item {
    background: var(--primary-color);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.05);
}

.faq-question {
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-color);
}

.faq-question h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    color: var(--black-color);
}

.faq-toggle {
    transition: transform 0.4s ease;
    color: var(--secondary-color);
}

.faq-item.active .faq-toggle {
    transform: rotate(180deg);
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
    opacity: 1;
}

.faq-answer-inner {
    overflow: hidden;
}

.faq-answer-inner p {
    padding: 0 30px 25px 30px;
    color: #555;
    line-height: 1.7;
    margin: 0;
}

/* Map Section */
.contact-map-section {
    width: 100%;
    height: 600px;
}

.map-wrapper {
    width: 100%;
    height: 100%;
}

/* Footer Minimalist Dark */
footer, .site-footer {
    background: #0b1a11;
    color: #e0e0e0;
    padding: 70px 50px 30px 50px;
    border-top: none;
    font-size: 0.95rem;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr;
    gap: 50px;
    padding-bottom: 40px;
    border-bottom: none;
    text-align: left;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-col h4,
.footer-col-title {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 12px 0;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 2px;
}

.footer-logo img {
    height: 38px;
    filter: drop-shadow(0 0 8px rgba(0, 230, 118, 0.3));
}

.footer-logo span {
    font-size: 1.45rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 1px;
}

.footer-desc {
    color: #b0c2b7;
    line-height: 1.6;
    margin: 0;
    font-size: 0.92rem;
    max-width: 400px;
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links-list a {
    color: #b0c2b7;
    text-decoration: none;
    transition: all 0.2s ease;
    width: fit-content;
}

.footer-links-list a:hover {
    color: #00e676;
    transform: translateX(4px);
}

.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-contact-item {
    color: #b0c2b7;
    text-decoration: none;
    transition: color 0.2s ease;
    line-height: 1.5;
}

a.footer-contact-item:hover {
    color: #00e676;
}

.footer-bottom {
    max-width: 1400px;
    margin: 25px auto 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    color: #8fa697;
    font-size: 0.85rem;
}

.footer-legal-links {
    display: flex;
    gap: 20px;
}

.footer-legal-links a {
    color: #8fa697;
    text-decoration: none;
    transition: color 0.2s ease;
}

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

@media (max-width: 900px) {
    footer, .site-footer {
        padding: 45px 25px 25px 25px;
    }
    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* Floating WhatsApp Widget */
.whatsapp-widget-container {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
}

.whatsapp-widget-container > * {
    pointer-events: auto;
}

.wa-popup {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    width: 280px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, visibility 0.6s;
    transform-origin: bottom right;
    border: 1px solid rgba(0,0,0,0.05);
    visibility: hidden;
    pointer-events: none;
    margin-bottom: 15px;
}

.wa-popup.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
}

.wa-popup-header {
    background: #075e54;
    color: #fff;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wa-popup-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.95rem;
}

.wa-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: contain;
    background: #fff;
    padding: 2px;
}

.wa-popup-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.wa-popup-close:hover {
    color: #fff;
}

.wa-popup-body {
    padding: 15px;
    font-size: 0.9rem;
    color: #444;
    background: #e5ddd5;
}

.wa-popup-body p {
    margin: 0;
    background: #fff;
    padding: 10px 14px;
    border-radius: 0 10px 10px 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    display: inline-block;
    position: relative;
    line-height: 1.4;
}

.wa-popup-body p::before {
    content: '';
    position: absolute;
    top: 0;
    left: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 10px 0;
    border-color: transparent #fff transparent transparent;
}

.wa-popup-footer {
    padding: 12px 15px;
    background: #fff;
    text-align: center;
}

.wa-reply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #25D366;
    color: #fff;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.3s;
}

.wa-reply-btn:hover {
    background: #1da851;
}

.floating-whatsapp {
    position: relative;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: whatsapp-pulse 2s ease-in-out infinite;
}

.floating-whatsapp:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
}

@keyframes whatsapp-pulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4); }
    50% { box-shadow: 0 4px 30px rgba(37, 211, 102, 0.8), 0 0 60px rgba(37, 211, 102, 0.3); }
}

/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 100px; /* Placed exactly above the WhatsApp button (25px + 60px + 15px gap) */
    right: 33px; /* Centered above the WhatsApp button */
    left: auto;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.95); /* White background */
    color: var(--secondary-color); /* Dark green arrow */
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 12px; /* Rounded square instead of circle */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

.scroll-to-top:hover {
    background: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Responsive */
@media (max-width: 992px) {
    .creations-container, 
    .find-us-container {
        flex-direction: column;
    }
    
    .creations-container.reverse {
        flex-direction: column-reverse;
    }
    
    .services-accordion {
        flex-direction: column;
        height: 800px;
    }

    .accordion-title-vertical {
        bottom: 20px;
        left: 20px;
        transform: none;
        white-space: normal;
    }

    .accordion-content {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        transform: translateY(20px) !important;
        padding: 30px 20px;
    }

    .accordion-item.active .accordion-content {
        transform: translateY(0) !important;
    }

    .accordion-content h3 {
        font-size: 1.8rem;
    }
    
    .creations-showcase, .creations-lists {
        min-width: unset;
        width: 100%;
    }
    
    .find-us-info {
        border-right: none;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    
    .slider-wrapper {
        min-height: unset;
        height: 300px; /* Force a fixed height on mobile so it doesn't take up the whole screen */
    }
}

@media (max-width: 768px) {
    /* Fix for mobile parallax (iOS) performance issues */
    .hero, .premium-services, .premium-creations, .premium-find-us {
        background-attachment: scroll;
    }

    /* Header Optimization */
    .navbar {
        padding: 10px 15px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
    }
    
    .logo img {
        height: 30px;
    }
    
    .logo {
        font-size: 1.1rem;
        gap: 8px;
    }
    
    .nav-links {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 20px; /* Added vertical gap so active underline doesn't overlap when wrapped */
        font-size: 0.95rem;
        width: 100%;
        justify-content: center;
    }

    /* Typography & Spacing Optimization */
    .hero {
        padding: 70px 20px 60px 20px; /* Increased bottom padding for scroll indicator */
        min-height: 100svh; /* Small viewport height prevents mobile address bars from hiding bottom elements */
    }
    
    .scroll-indicator {
        bottom: 15px;
        font-size: 0.75rem;
    }
    
    .hero h1 {
        font-size: 2rem;
        margin-top: 0; /* Removed margin completely */
    }
    
    .hero-logo-bg {
        width: 100%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.05;
    }
    
    .hero p {
        font-size: 1.1rem;
    }
    
    .premium-services h2, .premium-creations h2, .find-us-info h2 {
        font-size: 2.2rem;
        margin-bottom: 30px;
    }
    
    .premium-services, .premium-creations, .premium-find-us, .cta-section {
        padding: 40px 15px;
    }
    
    /* Photos / Slider Optimization */
    .slider-wrapper {
        min-height: 300px;
        height: 300px;
    }
    
    .glass-panel {
        border-radius: 15px;
    }
    
    .hero-buttons {
        justify-content: center;
        flex-direction: column;
        width: 100%;
    }
    
    .btn-secondary, .btn-whatsapp {
        width: 100%;
        justify-content: center;
    }

    .glass-card {
        width: 100%;
        padding: 30px 20px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, 0.95);
    }
    
    .glass-list-card, .find-us-info {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, 0.95);
    }
    
    .find-us-container {
        flex-direction: column;
        border-radius: 0;
        margin: 0 -15px 0 -15px;
        width: calc(100% + 30px);
    }
    
    /* Map Optimization — fill the rest of the section */
    .find-us-map {
        width: 100%;
        height: 500px;
        min-height: 500px;
    }
    
    .find-us-map iframe {
        width: 100% !important;
        height: 500px !important;
        min-height: 500px !important;
    }
    
    .find-us-info {
        padding: 40px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .find-us-info h2 {
        text-align: center;
    }
    
    .find-us-info > p {
        text-align: center;
    }
    
    .contact-details {
        align-items: center;
        width: 100%;
        gap: 25px;
    }
    
    .contact-item {
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 15px !important;
        width: 100% !important;
    }
    
    .contact-item .icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0 !important;
        flex-shrink: 0;
    }
    
    .schedule-table {
        font-size: 0.78rem !important;
        width: 100% !important;
        display: table !important;
        table-layout: auto !important;
    }
    .schedule-table th,
    .schedule-table td {
        padding: 6px 0 !important;
    }
    .schedule-table th:first-child,
    .schedule-table td:first-child {
        white-space: normal !important;
        width: 38% !important;
        padding-right: 6px !important;
        line-height: 1.3 !important;
    }
    .schedule-table th:last-child,
    .schedule-table td:last-child {
        white-space: nowrap !important;
        width: 62% !important;
        text-align: right !important;
    }
    
    .cta-container {
        padding: 30px 15px;
    }
    
    .cta-container h2 {
        font-size: 1.8rem;
    }
    
    /* WhatsApp Buttons Resize */
    .btn-whatsapp {
        padding: 8px 15px;
        font-size: 0.9rem;
        width: 100%;
        justify-content: center;
    }
    
    .btn-whatsapp svg {
        width: 18px;
        height: 18px;
        margin-right: 5px !important;
    }
    
    .massive-btn {
        padding: 12px 20px !important;
        font-size: 1rem !important;
    }
    
    /* Hide header WhatsApp on mobile — replaced by floating button */
    .navbar .nav-btn,
    .navbar .btn-whatsapp.nav-btn {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        position: absolute !important;
    }
    
    .nav-btn-text {
        display: none;
    }
    
    /* Floating WhatsApp sizing on mobile */
    .whatsapp-widget-container {
        bottom: 15px !important;
        right: 15px !important;
    }
    .floating-whatsapp {
        width: 52px;
        height: 52px;
    }
    
    .scroll-to-top {
        bottom: 78px;
        right: 19px;
        width: 44px;
        height: 44px;
        left: auto;
        z-index: 9998;
    }
    
    /* Contact Page Mobile */
    .contact-hub, .faq-section {
        padding: 50px 15px;
    }
    
    .faq-section h2 {
        font-size: 2.2rem;
        margin-bottom: 30px;
    }
    
    .faq-question {
        padding: 20px 15px;
    }
    
    .faq-question h3 {
        font-size: 1.1rem;
    }
    
    .faq-answer-inner p {
        padding: 0 15px 20px 15px;
    }
    
    .contact-map-section {
        height: 400px;
    }
    
    /* About Page Mobile */
    .about-section, .about-specs-section {
        padding: 60px 15px;
    }
    
    .about-container, .about-section.reverse .about-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .about-text h2 {
        font-size: 2rem;
    }
    
    .specs-header h2 {
        font-size: 2.2rem;
    }
    
    .specs-grid {
        grid-template-columns: 1fr;
    }
    
    /* Master Mobile Layout Safeguards */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative;
    }

    * {
        -webkit-tap-highlight-color: transparent !important;
    }

    .fade-in-element.is-visible, .glass-card.is-visible, .glass-list-card.is-visible, .find-us-info.is-visible, .find-us-map.is-visible, .creations-showcase.is-visible, .services-accordion.is-visible, .contact-card.is-visible, .master-card-wrapper, .option-card {
        will-change: auto !important;
        transform: none !important;
    }

    .contact-grid, .creations-grid, .reviews-grid, .services-grid, .master-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    .contact-card, .glass-card, .review-card, .service-card {
        max-width: 100% !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .master-card-wrapper {
        width: 100% !important;
        height: 250px !important;
        min-height: 250px !important;
        aspect-ratio: auto !important;
        margin-bottom: 10px !important;
    }

    .category-modal-backdrop {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(0, 0, 0, 0.9) !important;
        will-change: opacity !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
    }

    .master-card {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 24px !important;
    }

    /* Global Responsive Lightbox Zoom Viewer */
    #lightbox-fullscreen {
        padding: 10px !important;
        justify-content: center !important;
        will-change: opacity !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
    }
    .lightbox-content-wrap {
        max-width: 100% !important;
        max-height: 85vh !important;
    }
    #lightbox-fullscreen img {
        max-height: 75vh !important;
    }
    .lightbox-nav {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 44px !important;
        height: 44px !important;
        background: rgba(0,0,0,0.6) !important;
    }
    .lightbox-prev { left: 10px !important; }
    .lightbox-next { right: 10px !important; }
    .lightbox-close { top: 15px !important; right: 15px !important; width: 44px !important; height: 44px !important; }
    .lightbox-caption { font-size: 0.95rem !important; padding: 6px 16px !important; }

    .card-tiktok {
        order: -1 !important;
    }

    table {
        width: 100% !important;
        max-width: 100% !important;
        display: table !important;
    }

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

@media (max-width: 480px) {
    .hero {
        padding: 80px 15px 65px 15px !important;
        min-height: 100svh !important;
    }
    .hero h1 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
    }
    .hero p {
        font-size: 0.98rem !important;
        line-height: 1.5 !important;
    }
    .premium-services h2, .premium-creations h2, .find-us-info h2, .specs-header h2, .faq-section h2, .contact-hub h1 {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
    }
    .services-modal-content {
        width: 95% !important;
        padding: 22px 14px !important;
        max-height: 86vh !important;
        border-radius: 20px !important;
    }
    .services-modal-close {
        top: 10px !important;
        right: 10px !important;
        width: 36px !important;
        height: 36px !important;
    }
    .massive-btn {
        padding: 14px 20px !important;
        font-size: 0.95rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
    .contact-card {
        padding: 25px 15px !important;
        border-radius: 20px !important;
    }
    .find-us-info {
        padding: 25px 15px !important;
    }
}

/* --- Premium Badges (Popular & Fitness Approved) --- */
.badge-popular-glow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 14px;
    border-radius: 30px;
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(255, 65, 108, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.4);
    animation: pulse-popular 2.5s infinite ease-in-out;
    vertical-align: middle;
}

@keyframes pulse-popular {
    0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 4px 15px rgba(255, 65, 108, 0.45); }
    50% { transform: translateY(-1px) scale(1.03); box-shadow: 0 8px 22px rgba(255, 65, 108, 0.7); }
}

.badge-fitness-glow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 14px;
    border-radius: 30px;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #062312;
    box-shadow: 0 4px 15px rgba(56, 239, 125, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.5);
    vertical-align: middle;
}

.card-popular-highlight {
    position: relative;
    border: 2px transparent solid !important;
    background: linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.95)) padding-box,
                linear-gradient(135deg, #ff416c, #ff4b2b) border-box !important;
    box-shadow: 0 20px 40px rgba(255, 65, 108, 0.12) !important;
}


/* Global Modal & Lightbox Overscroll Containment */
.category-modal-backdrop,
.category-modal-box,
.modal-gallery-grid,
#lightbox-fullscreen {
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
}

.hidden {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE NAVIGATION (hamburger menu)
   Desktop keeps the exact same layout via display:contents on .nav-menu.
   Placed at the end of the file so these rules win the cascade over the
   older wrapped-navbar rules in the 768px block above.
   ══════════════════════════════════════════════════════════════════════ */

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    border-radius: 10px;
}

.nav-toggle-bar {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--secondary-color);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Desktop: the wrapper is transparent to the flex layout */
.nav-menu {
    display: contents;
}

@media (max-width: 992px) {
    .navbar {
        flex-wrap: wrap;
        padding: 10px 16px;
        gap: 0;
    }

    .nav-toggle {
        display: flex;
    }

    /* Collapsed by default — one compact row: logo + burger */
    .nav-menu {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 12px 4px 10px 4px;
        border-top: 1px solid rgba(26, 66, 43, 0.10);
        margin-top: 10px;
    }

    .navbar.menu-open .nav-menu {
        display: flex;
        animation: navMenuIn 0.22s ease;
    }

    @keyframes navMenuIn {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Burger → X */
    .navbar.menu-open .nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .navbar.menu-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
    .navbar.menu-open .nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* Vertical links with comfortable touch targets */
    .nav-menu .nav-links {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0;
        font-size: 1.05rem;
    }

    .nav-menu .nav-links li {
        width: 100%;
    }

    .nav-menu .nav-links a {
        display: block;
        width: 100%;
        padding: 13px 12px;
        border-radius: 10px;
        text-align: center;
    }

    .nav-menu .nav-links a:hover,
    .nav-menu .nav-links a.active {
        background: rgba(26, 66, 43, 0.07);
    }

    /* Hide the underline effect inside the dropdown (block links instead) */
    .nav-menu .nav-links a::after {
        display: none;
    }

    /* Search inside the dropdown: full width, no iOS focus-zoom */
    .nav-menu .nav-search-container {
        width: 100% !important;
        max-width: none !important;
        margin: 6px 0 2px 0 !important;
        order: 0 !important;
    }

    .nav-menu .nav-search-input {
        font-size: 16px; /* ≥16px prevents iOS Safari from zooming on focus */
    }

    .nav-menu .nav-search-results {
        position: static;
        width: 100%;
        margin-top: 8px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

    /* Compact single-row header (logo left, burger right) */
    .navbar .logo img {
        height: 46px;
    }
    .navbar .logo {
        font-size: 1.35rem;
        gap: 10px;
    }
}

@media (max-width: 768px) {
    .navbar .logo img {
        height: 36px;
    }
    .navbar .logo {
        font-size: 1.15rem;
    }
}

/* ========================================================================
   Navbar search — moved out of the inline <style> block that layout/header.php
   printed on every single page. As part of styles.css it is downloaded once
   and cached, instead of adding ~2 KB to every HTML response.
   ======================================================================== */

.nav-search-container {
    position: relative;
    display: inline-block;
    width: 240px;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 30px;
    padding: 7px 16px;
    gap: 10px;
    transition: background .3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color .3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow .3s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-input-wrapper:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.search-input-wrapper:focus-within {
    border-color: #94a3b8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    background: #ffffff;
}

.search-icon { flex-shrink: 0; }

.nav-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: #1e293b;
    font-size: 0.88rem;
    font-weight: 500;
    font-family: inherit;
    width: 100%;
}

.nav-search-input::placeholder {
    color: #6b7280; /* WCAG AA contrast on white */
    font-weight: 400;
}

.nav-search-results {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 300px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08), 0 5px 15px rgba(0, 0, 0, 0.04);
    border: 1px solid #f1f5f9;
    z-index: 10000;
    overflow: hidden;
}

.nav-search-results.is-open { display: block; }

.search-result-item {
    display: block;
    padding: 12px 18px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #334155;
    text-decoration: none;
    border-bottom: 1px solid #f8fafc;
    transition: background .2s ease, color .2s ease, padding-left .2s ease;
    text-align: left;
}

.search-result-item:last-child { border-bottom: none; }

.search-result-item:hover,
.search-result-item:focus-visible {
    background: #f8fafc;
    color: #0f172a;
    padding-left: 22px;
}

.search-empty {
    padding: 12px 16px;
    color: #595959; /* WCAG AA on white */
    font-size: 0.88rem;
    font-weight: 500;
}

@media (max-width: 992px) {
    .nav-search-container {
        width: 100%;
        max-width: 320px;
        margin: 10px auto 5px auto;
        order: 3;
    }

    .search-input-wrapper { width: 100%; }
}

/* ========================================================================
   Skip link — lets keyboard and screen-reader users jump past the navbar.
   ======================================================================== */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 12px 20px;
    background: var(--secondary-color, #1a422b);
    color: #fff;
    font-weight: 700;
    border-radius: 0 0 10px 0;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* ========================================================================
   Modal blur. The services page used to wrap the whole page in a
   #main-site-content div and set element.style.filter from JavaScript, which
   nested <main> and the footer incorrectly. A body-level class does the same
   job without the wrapper.
   ======================================================================== */

body.modal-open > main,
body.modal-open > .site-footer {
    filter: blur(14px) brightness(0.65);
    transition: filter 0.4s ease;
}

@media (max-width: 768px) {
    body.modal-open > main,
    body.modal-open > .site-footer {
        filter: none;
    }
}

/* Respect users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* The opening-hours day cell is a row header; keep it visually identical
   to the old <td> (normal weight, left aligned). */
.schedule-table th { font-weight: 500; text-align: left; }

/* ------------------------------------------------------------------------
   Inline SVG icons (App\Core\Icon), which replaced the emojis.
   ------------------------------------------------------------------------ */
.jex-icon {
    vertical-align: -0.18em;
    flex-shrink: 0;
}

/* Review stars: five solid SVGs in a row instead of repeated ⭐ characters,
   so they take the brand amber rather than each platform's own artwork. */
.stars {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #f5a524;
}

/* Badge pills on the plate cards: the emoji used to supply its own colour,
   the SVG inherits the pill's. */
.badge-icon-pill {
    line-height: 0;
}

.badge-icon-pill.popular { color: #ffffff; }
.badge-icon-pill.fitness { color: #062312; }

.plate-legend-icon {
    display: inline-flex;
    vertical-align: -0.2em;
}

/* Technical-sheet cards on the About page: the icon was an emoji sized by
   font-size; an SVG needs a box and a colour. */
.spec-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(26, 66, 43, 0.08);
    color: var(--secondary-color);
    margin-bottom: 16px;
}

.spec-icon .jex-icon {
    width: 26px;
    height: 26px;
    vertical-align: 0;
}

/* ------------------------------------------------------------------------
   Legal Mentions / Privacy Policy.
   Both pages used to carry their layout in inline style attributes on the
   template; the markup is generated from the database now, so the rules live
   here instead.
   ------------------------------------------------------------------------ */
.legal-hero {
    min-height: 40vh;
    padding-top: 150px;
    padding-bottom: 50px;
}

.legal-hero-content { max-width: 900px; }

.legal-section { padding-top: 50px; }

.legal-container {
    flex-direction: column;
    align-items: flex-start;
    max-width: 1000px;
    margin: 0 auto;
    gap: 40px;
}

.legal-text { width: 100%; }

/* Space between one clause and the next. */
.legal-heading-spaced { margin-top: 40px; }

.legal-text p { margin-bottom: 12px; }

.legal-list {
    margin: 15px 0 15px 0;
    padding-left: 22px;
    list-style: disc;
}

.legal-list li {
    margin-bottom: 8px;
    line-height: 1.6;
}