:root {
    /* Gold & Black Theme - Metallic Edition */
    --bg-color: #0F0F0F;
    /* Rich Black */
    --surface-color: #1A1A1A;
    /* Dark Charcoal */
    --primary-color: #D4AF37;
    /* Fallback Gold */

    /* Metallic Gradient: Dark Gold -> Light Gold -> Dark Gold */
    --gold-gradient: linear-gradient(135deg, #BF953F 0%, #FCF6BA 50%, #B38728 100%);
    --gold-text-gradient: linear-gradient(to right, #BF953F, #FCF6BA, #BF953F);

    --text-color: #E0E0E0;
    --text-dark: #000000;
    --text-muted: #A0A0A0;

    /* Typography */
    --font-heading: 'Instrument Serif', serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;

    --transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    --border-radius-lg: 20px;
    --border-radius-pill: 50px;
    --border-radius-arch: 200px 200px 0 0;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.7;
    overflow-x: hidden;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    font-weight: 600;
    z-index: 10000;
    border-radius: 0 0 4px 0;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.2;
    /* Metallic Text Effect */
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--primary-color);
    /* Fallback */
    display: inline-block;
    /* Required for gradient text sometimes */
}

/* Ensure headings wrap correctly with inline-block, or revert to block if issues arise */
h1,
h2 {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* Text that shouldn't be metallic (if any) can override this */

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
    object-fit: cover;
    height: 390px;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Top Bar */
.top-bar {
    background-color: #000;
    padding: 10px 0;
    font-size: 0.85rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(191, 149, 63, 0.3);
}

    .top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 600px) {
    .top-bar .container {
        flex-direction: column;
        text-align: center;
    }
    
    .top-bar-info {
        gap: 15px;
    }
}

.top-bar-info {
    display: flex;
    gap: 20px;
}

.top-bar span,
.top-bar a,
.top-bar i {
    /* Use gradient text for icons/links in top bar too? Maybe simpler gold */
    color: #BF953F;
}

.top-bar-info a:hover {
    color: #FCF6BA;
    /* Lighter gold on hover */
}

.route-btn {
    background: rgba(191, 149, 63, 0.2);
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    transition: all 0.3s;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #000;
    /* Text black */
    font-weight: 500;
}

.route-btn:hover {
    background: var(--primary-color);
    color: #000 !important;
}

/* Header & Nav */
/* Header & Nav */
header {
    /* Removed sticky here as it is now in a wrapper */
    width: 100%;
    background-color: var(--bg-color);
    z-index: 1000;
    padding: 8px 0;
    /* Reduced to minimum */
    transition: var(--transition);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

header.scrolled {
    background-color: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #BF953F;
    padding: 5px 0;
    /* Very slim on scroll */
}

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

.logo {
    /* Image Logo Styles */
    display: block;
    width: auto;
    /* Let height dictate width */
    max-width: 150px;
    height: auto;
    /* Remove text styles as it is now an image */
    background: none;
    -webkit-text-fill-color: initial;
    text-shadow: none;
}

.logo img {
    width: auto;
    height: 50px;
    /* Constrain height to keep header slim */
    object-fit: contain;
    /* Transform to Gold Color #D4AF37 using CSS Filter */
    filter: brightness(0) saturate(100%) invert(81%) sepia(21%) saturate(1313%) hue-rotate(358deg) brightness(92%) contrast(86%) drop-shadow(0 0 2px rgba(212, 175, 55, 0.5));
}

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

.nav-links a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-color);
    position: relative;
    padding: 5px 0;
}

.nav-links a:hover {
    color: #FCF6BA;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gold-gradient);
    transition: var(--transition);
}

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

/* Termin Buchen Button im Header */
.nav-links .btn {
    padding: 5px 20px;
    color: #000 !important;
    font-weight: 500;
    font-size: 0.95rem;
    text-align: center;
    line-height: 1.7;
    vertical-align: baseline;
}

.nav-links .btn:hover {
    color: #000 !important;
}

.nav-links .btn::after {
    display: none;
}

.mobile-menu-btn {
    display: none;
    font-size: 1.5rem;
    color: #BF953F;
    cursor: pointer;
}

.mobile-menu-close {
    display: none;
}

/* Buttons - Metallic */
.btn {
    display: inline-block;
    padding: 14px 32px;
    background: var(--gold-gradient);
    background-size: 200% auto;
    /* For hover animation */
    color: #000;
    /* Rich black text for contrast */
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: var(--border-radius-pill);
    border: none;
    transition: 0.5s;
    box-shadow: 0 5px 15px rgba(191, 149, 63, 0.3);
}

.btn:hover {
    background-position: right center;
    /* animate gradient */
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(252, 246, 186, 0.5);
    /* Glowing hover */
}

.btn-outline {
    background: transparent;
    color: #BF953F;
    border: 1px solid #BF953F;
    /* Can't easily put gradient on border without masking, stick to solid gold or complex trick */
    position: relative;
    z-index: 1;
}

/* Optional: Gradient border for outline button */
.btn-outline::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-pill);
    padding: 1px;
    /* border thickness */
    background: var(--gold-gradient);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.btn-outline {
    border: none;
}

/* Remove solid border if using mask trick, or just keep solid for simplicity. Let's stick to gradient border trick above or simple solid. Let's check simplicity. Mask trick is good but solid is safe. Let's use solid for now with gold color */
.btn-outline {
    border: 2px solid #BF953F;
    color: #BF953F;
    background: none;
}

.btn-outline:hover {
    background: var(--gold-gradient);
    color: #000;
    border-color: transparent;
}


/* Sections General */
section {
    padding: 70px 0;
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
}

.section-header h2 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.section-header p {
    font-size: 1.1rem;
    color: var(--text-muted);
}

/* Hero Section */
.hero {
    display: flex;
    align-items: center;
    padding: 40px 0 70px;
    min-height: 85vh;
    background: radial-gradient(circle at top right, rgba(191, 149, 63, 0.1), transparent 40%);
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

/* Fix h1 gradient display block issue */
.hero-content h1 {
    font-size: 5rem;
    line-height: 1.05;
    margin-bottom: 20px;
    display: block;
    /* Override default inline-block from heading generic style */
    background: none;
    -webkit-text-fill-color: initial;
    color: #fff;
    width: 100%;
}

.hero-content h1 span {
    font-style: italic;
    display: block;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 25px;
    max-width: 90%;
    color: var(--text-muted);
}

.hero-subtitle {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 20px;
    opacity: 0.9;
}

.hero-image {
    position: relative;
    height: 600px;
    width: 100%;
    padding: 5px;
    /* Space for gradient border */
    background: var(--gold-gradient);
    /* Gradient Border Effect */
    border-radius: var(--border-radius-arch);
    /* Arch Shape */
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 195px 195px 0 0;
    /* Slightly smaller to fit inside padding */
    display: block;
}

/* About Section */
.about {
    background-color: var(--surface-color);
    border-radius: 40px;
    margin: 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.about-section {
    text-align: center;
    padding: 80px 0;
}

.about-container {
    max-width: 900px;
    margin: 0 auto;
    display: block;
}

.owner-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.owner-intro img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.owner-name {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.owner-quote {
    font-size: 1.15rem;
    color: var(--text-color);
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
}

.stats-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 30px;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    padding-top: 30px;
}

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

.stat-label {
    font-family: var(--font-body);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.stat-value {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--text-color);
}

.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* Subtle gold shimmer line on top */
.about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--gold-gradient);
    opacity: 0.5;
}

.about .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-image {
    padding: 3px;
    background: var(--gold-gradient);
    border-radius: var(--border-radius-lg);
}

.about-image img {
    width: 100%;
    border-radius: 18px;
    /* Inner radius */
    aspect-ratio: 4/5;
    background: #000;
}

.about-text h2 {
    font-size: 3.5rem;
    margin-bottom: 30px;
    display: inline-block;
    /* For gradient */
}

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

/* Services / Price List */
.pricelist {
    background-color: var(--bg-color);
}

.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
}

.price-card {
    background-color: var(--surface-color);
    padding: 15px;
    border-radius: 200px 200px 20px 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transition: var(--transition);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.price-card:hover {
    transform: translateY(-10px);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: linear-gradient(45deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
    pointer-events: none;
}

/* Service item hover effect */
.service-item:hover .service-name {
    color: var(--primary-color);
    padding-left: 5px;
}

.service-name {
    transition: all 0.3s ease;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Text Gradient Utility */
.text-gradient {
    background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Gradient border on hover using ::after */
.price-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 200px 200px 20px 20px;
    padding: 2px;
    background: var(--gold-gradient);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.price-card:hover::after {
    opacity: 1;
}

.price-card img {
    width: 100%;
    height: 450px;
    border-radius: 190px 190px 10px 10px;
    object-fit: cover;
    background-color: #2a2a2a;
    transition: 0.3s;
}

.price-card h3 {
    text-align: center;
    margin-top: 20px;
    font-size: 1.5rem;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 100%;
}

/* Special styling for "Impressionen" which is maybe not arch shaped? 
   No, sticking to consistency is better. */

/* Contact Section */
.contact {
    padding-bottom: 0;
}

.contact-wrapper {
    background-color: var(--surface-color);
    color: #fff;
    border-radius: 40px 40px 0 0;
    padding: 70px 20px;
    text-align: center;
    border-top: 3px solid transparent;
    border-image: var(--gold-gradient);
    border-image-slice: 1;
}

.contact-wrapper h2 {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 4rem;
    margin-bottom: 40px;
    display: inline-block;
}

.contact-grid {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.contact-item h3 {
    font-family: var(--font-body);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #BF953F;
    margin-bottom: 15px;
}

.contact-item p,
.contact-item a {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: #E0E0E0;
}

/* Footer */
footer {
    background-color: #000;
    color: var(--text-muted);
    text-align: center;
    padding: 30px 0 50px;
    font-size: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-link {
    color: var(--text-muted);
    text-decoration: underline;
    transition: color 0.3s ease;
}

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

/* Mobile Responsive */
@media (max-width: 900px) {
    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 3.5rem;
    }

    .hero-content h1 span {
        width: 100%;
        /* Center gradient text on mobile */
    }

    /* Center buttons on mobile */
    .hero-buttons {
        justify-content: center;
    }
    
    .stats-container {
        flex-direction: column;
        gap: 30px;
    }

    .hero-image {
        height: 400px;
    }

    .about .container {
        grid-template-columns: 1fr;
    }

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

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

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        /* Full Width */
        height: 100vh;
        background-color: rgba(10, 10, 10, 0.98);
        /* Deep dark background */
        backdrop-filter: blur(15px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* Center Items Horizontally */
        text-align: center;
        border-left: none;
        /* Remove border for full screen look */
        transition: right 0.4s ease;
        z-index: 1001;
        gap: 20px;
        /* Reduced gap */
        padding: 0;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links a {
        font-size: 1.5rem;
        margin: 5px 0;
        /* Reduced margin */
    }

    .mobile-menu-close {
        display: block;
        position: absolute;
        top: 30px;
        right: 30px;
        font-size: 2.5rem;
        color: var(--primary-color);
        cursor: pointer;
        z-index: 1002;
    }

    /* Specific style for Termin Buchen button in Mobile Menu */
    .nav-links .btn {
        padding: 15px 40px;
        /* Wider button */
        color: #000 !important;
        /* Force black text */
        width: auto;
        margin-top: 15px;
        font-weight: 600;
        letter-spacing: 1px;
    }
}

/* Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 0 50px rgba(191, 149, 63, 0.2);
    border: 1px solid #BF953F;
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 3rem;
    color: #BF953F;
    cursor: pointer;
    font-family: var(--font-heading);
}

/* Text-Based Price List Styles */
.price-content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.service-category {
    background-color: var(--surface-color);
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    padding: 0;
    /* Let header/content handle padding */
    overflow: hidden;
}

.accordion-header {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.02);
    transition: background-color 0.3s ease;
}

.accordion-header:hover {
    background-color: rgba(212, 175, 55, 0.05);
}

.accordion-header h3 {
    margin-bottom: 10px;
}

/* Specific Hero Buttons */
.btn-hero {
    padding: 12px 30px;
    /* Uniform larger padding */
    font-size: 1rem;
    /* Uniform larger font */
    text-transform: none;
    /* Title Case */
    font-weight: 500;
}

/* WhatsApp gold button specific */
.btn-whatsapp-gold {
    background: var(--primary-color);
    color: #000;
    padding: 12px 30px;
    /* Matched padding */
    font-size: 1rem;
    /* Matched font */
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);

    /* Typography match */
    text-transform: none;
    /* Title Case */
    font-weight: 500;
    letter-spacing: 0.5px;
}

.btn-whatsapp-gold:hover {
    background: #E5C565;
    /* Lighter gold */
    transform: translateY(-2px);
}

/* Footer Route Button */
/* Footer Route Button */
.btn-footer-route {
    background: var(--gold-gradient);
    color: #000 !important;
    /* Force black text always */
    border: none;
    font-weight: 600;
    padding: 5px 15px;
    /* Even smaller padding */
    font-size: 0.8rem;
    /* Smaller font */
    margin-top: 10px;
    display: inline-block;
    border-radius: 50px;
    text-transform: none;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(191, 149, 63, 0.2);
}

.btn-footer-route:hover {
    transform: scale(1.05);
    color: #000 !important;
    /* Ensure black on hover */
}

/* Floating WhatsApp Button */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #BF953F;
    color: #000;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 5px 15px rgba(191, 149, 63, 0.4);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background-color: #AA771C;
    color: #000;
}

.accordion-header i {
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

.service-category.active .accordion-header i {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background-color: rgba(0, 0, 0, 0.1);
}

/* Add padding inside content wrapper for styling */
.accordion-content .service-list {
    padding: 15px 20px 20px 20px;
}

.accordion-content .service-subcategory {
    padding: 0 20px;
    margin-top: 20px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.service-category h3 {
    font-size: 1.8rem;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--primary-color);
    padding-bottom: 8px;
    display: block;
}

.service-subcategory {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--primary-color);
    margin: 15px 0 8px;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

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

.service-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
}

.service-name {
    font-weight: 500;
    color: var(--text-color);
}

.service-price {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--primary-color);
    white-space: nowrap;
    margin-left: 10px;
}

.service-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 5px;
    font-style: italic;
}

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

.reveal-text.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.fade-in.visible {
    opacity: 1;
}

/* Staggered delays */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

/* --- REFINED TYPOGRAPHY --- */
h1,
h2,
h3 {
    letter-spacing: -0.02em;
    /* Tighter for elegance */
}

h2 {
    font-size: 3rem;
    /* Larger headings */
    margin-bottom: 30px;
}

/* --- GALLERY SECTION --- */
.gallery-section {
    padding: 70px 0;
    background-color: var(--bg-color);
    position: relative;
    border-top: 1px solid rgba(212, 175, 55, 0.1);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 35px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    /* Minimal radius */
    aspect-ratio: 4/5;
    /* Portrait orientation for elegance */
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
    filter: grayscale(20%);
    /* Artistic touch */
}

.gallery-item:hover img {
    transform: scale(1.05);
    filter: grayscale(0%);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-item {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gallery-item:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
}

.gallery-item:focus:not(:focus-visible) {
    outline: none;
}