/* CSS Variables for easy tweaking */
:root {
    --bg-gradient-start: #ffefef;
    /* Soft Pastel Pink */
    --bg-gradient-end: #eaf6ff;
    /* Soft Pastel Blue */
    --text-color: #dcb3b3;
    /* Dusty Rose / Muted Pink text */
    --font-main: 'Playfair Display', serif;
}

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

body,
html {
    width: 100%;
    /* Remove fixed height to allow scrolling */
    min-height: 100%;
    /* overflow: hidden;  <-- Caused the issue */
    overflow-x: hidden;
    /* Prevent horizontal scroll only */
    font-family: var(--font-main);
}

/* Background Gradients */
body {
    background: linear-gradient(120deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    position: relative;
    /* Removed flex centering from body to allow document flow */
}

/* Noise Texture Overlay */
.noise-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Header */
.site-header {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 2rem 3rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 10;
}

.nav-link {
    text-decoration: none;
    color: #4a4a4a;
    /* Dark grey for premium look */
    font-family: var(--font-main);
    font-size: 1.2rem;
    font-weight: 400;
    /* Match brand name weight */
    letter-spacing: 0.05em;
    transition: opacity 0.3s ease;
    opacity: 0.8;
}

.nav-link {
    position: relative;
    /* Container for absolute blob */
    text-decoration: none;
    color: #4a4a4a;
    /* Dark grey for premium look */
    font-family: var(--font-main);
    font-size: 1.2rem;
    font-weight: 400;
    /* Match brand name weight */
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
    /* Animate color only */
    padding: 0.5rem 1rem;
    /* Add padding for the blob area */
    border-radius: 8px;
    /* Soft edges */
}

.nav-link span {
    position: relative;
    z-index: 2;
    /* Ensure text is above blob */
}

.nav-link .blob {
    /* Specific adjustments for the small button */
    top: -50%;
    left: -20%;
    width: 140%;
    height: 200%;
    opacity: 0;
    transform: scale(0.5);
    /* Start smaller */
    background: radial-gradient(circle at center, rgba(220, 179, 179, 0.3) 0%, rgba(200, 230, 255, 0.3) 50%, transparent 70%);
    /* Slightly stronger for small area */
}

.nav-link:hover .blob {
    opacity: 1;
    transform: scale(1);
}

.nav-link:hover {
    color: #000;
    /* Darker text on hover */
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Hero Section */
/* Hero Section */
.hero {
    position: relative;
    z-index: 2;
    text-align: center;
    /* Make Hero take up full viewport and center content */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Brand Name Wrapper */
.brand-wrapper {
    position: relative;
    display: inline-block;
    cursor: default;
}

.brand-wrapper .blob {
    /* Adjust blob for text */
    width: 120%;
    height: 150%;
    top: -25%;
    left: -10%;
    filter: blur(20px);
    /* Softer blur for the background */
    opacity: 0;
    /* Hidden by default */
    transform: scale(0.8) rotate(0deg);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.brand-wrapper:hover .blob {
    opacity: 0.6;
    /* Subtle visibility */
    transform: scale(1) rotate(15deg);
}

.brand-name {
    font-size: 15vw;
    /* Large fluid typography */
    font-weight: 400;
    /* Regular weight for elegance */
    color: var(--text-color);
    letter-spacing: -0.02em;
    /* Slight tight tracking */
    line-height: 1;
    position: relative;
    z-index: 2;
    /* Ensure text is above blob */
    mix-blend-mode: multiply;
    /* Helps integrate text with background slightly */

    /* "Feel Alive" Animation */
    animation: breathe 6s ease-in-out infinite;
    transition: transform 0.5s ease;
}

.brand-wrapper:hover .brand-name {
    transform: scale(1.02);
    /* Slight pop on hover */
    color: #d4a5a5;
    /* Slightly darker shade on hover */
}

@keyframes breathe {

    0%,
    100% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    50% {
        transform: scale(1.01);
        /* Very subtle expansion */
        text-shadow: 0 10px 20px rgba(220, 179, 179, 0.2);
        /* Soft shadow pulse */
    }
}

/* Responsive Adjustments */
@media (min-width: 1200px) {
    .brand-name {
        font-size: 180px;
    }
}

@media (max-width: 768px) {
    .brand-name {
        font-size: 20vw;
    }
}

/* Services Section */
#services {
    position: relative;
    z-index: 5;
    padding: 10vh 5vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Glassmorphic background for the section itself slightly? No, let's keep it clean */
    overflow: hidden;
    /* Hide scrollbar for carousel */
    flex-direction: column;
}

.carousel-wrapper {
    width: 100%;
    position: relative;
    /* Fade masks on the edges for premium feel */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.carousel-track {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: scroll 120s linear infinite;
    /* Slowed down for longer track */
}

/* Pause animation on hover for readability */
.carousel-track:hover {
    animation-play-state: paused;
}

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

    100% {
        transform: translateX(-50%);
        /* Move half the length (the first set) */
    }
}

.service-card {
    /* Fixed width for carousel items */
    width: 400px;
    flex-shrink: 0;

    position: relative;
    background: rgba(255, 255, 255, 0.15);
    /* Slightly more opaque for visibility */
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 3rem;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

    /* Initial state logic handled by parent now, or kept?
       Actually, animating 'opacity' on scroll for the whole track is better.
       Removing individual scroll transform for now to avoid conflict with marquee.
    */
}

/* Removed .service-card.visible transform logic since it's now a carousel */

/* Search Bar Styles */
.search-container {
    position: sticky;
    top: 20px;
    z-index: 100;
    max-width: 600px;
    margin: 0 auto 3rem auto;
    padding: 0 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

#serviceSearch {
    width: 100%;
    padding: 1.2rem 3rem 1.2rem 1.5rem;
    font-size: 1.1rem;
    font-family: var(--font-main);
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    outline: none;
}

#serviceSearch:focus {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: #fff;
}

.search-icon {
    position: absolute;
    right: 30px;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

#serviceSearch:focus+.search-icon {
    opacity: 0.8;
}

/* Services Page Grid - Refined */
.services-grid-page {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2.5rem;
    padding: 2rem 5% 6rem 5%;
    max-width: 1600px;
    margin: 0 auto;
}

/* Hidden state for filtering */
.service-card.hidden {
    display: none;
}

/* Expand Button */
.view-all-container {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    padding-bottom: 4rem;
}

.expand-btn {
    position: relative;
    text-decoration: none;
    color: #4a4a4a;
    font-family: var(--font-main);
    font-size: 1.1rem;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.expand-btn span {
    position: relative;
    z-index: 2;
}

.btn-blob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(255, 182, 193, 0.6) 0%, rgba(173, 216, 230, 0.6) 100%);
    border-radius: 50%;
    transition: transform 0.5s ease;
    z-index: 1;
    opacity: 0;
}

.expand-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.8);
}

.expand-btn:hover .btn-blob {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.service-card h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #4a4a4a;
    font-weight: 500;
    position: relative;
    z-index: 2;
}

.service-card p {
    font-family: sans-serif;
    /* Clean contrast to the serif header */
    color: #666;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

/* Liquid Blob Effect */
.blob {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255, 200, 200, 0.4) 0%, rgba(200, 230, 255, 0.4) 50%, transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    z-index: 1;
    pointer-events: none;
    transform: scale(0.8);
}

.service-card:hover .blob {
    opacity: 1;
    transform: scale(1) rotate(10deg);
}

/* Footer Styles */
.site-footer {
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.02));
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 6rem 5% 2rem 5%;
    margin-top: 4rem;
    font-family: var(--font-main);
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 2fr;
    gap: 4rem;
    max-width: 1400px;
    margin: 0 auto;
    margin-bottom: 4rem;
}

.footer-brand p {
    color: #666;
    line-height: 1.6;
    margin: 1.5rem 0;
    max-width: 300px;
}

.brand-name-footer {
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--text-color);
}

.social-links {
    display: flex;
    gap: 1.5rem;
}

.social-links a {
    text-decoration: none;
    color: #4a4a4a;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #000;
}

.footer-links h3,
.footer-services h3 {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    color: #333;
}

.footer-links ul,
.footer-services ul {
    list-style: none;
}

.footer-links li,
.footer-services li {
    margin-bottom: 0.8rem;
}

.footer-links a,
.footer-services a {
    text-decoration: none;
    color: #666;
    transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-services a:hover {
    color: var(--text-color);
}

.service-list-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 2rem;
    color: #888;
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .footer-brand p {
        margin: 1.5rem auto;
    }

    .social-links {
        justify-content: center;
    }

    .service-list-cols {
        text-align: left;
        /* Keep lists readable */
        max-width: 400px;
        margin: 0 auto;
    }
}