/* ======================= Global Styles & Variables ======================= */
:root {
    --dark-blue: #0B3954;
    --teal: #087E8B;
    --light-blue: #BFD7EA;
    --off-white: #f8f9fa;
    --text-color: #333;
    
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Roboto', sans-serif;
    
    --header-height: 80px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--text-color);
    background-color: var(--off-white);
    line-height: 1.6;
    font-weight: 300;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    color: var(--dark-blue);
    font-weight: 700;
}

section
{
    overflow-x: hidden;
}

.section-title {
    font-size: 2.8rem;
    text-align: center;
    margin-bottom: 1.5rem;
    position: relative;
}
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--teal);
    margin: 1rem auto 0;
}

.section-intro {
    max-width: 700px;
    margin: 0 auto 3rem auto;
    text-align: center;
    font-size: 1.1rem;
    color: #555;
}

.full-width-section {
    width: 100%;
    position: relative;
    overflow: hidden;
}

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

a {
    color: var(--teal);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: var(--dark-blue);
}

/* ======================= Reusable Components ======================= */
.btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    border: 2px solid transparent;
    border-radius: 5px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
}
.btn-primary {
    background-color: var(--teal);
    color: white;
    border-color: var(--teal);
}
.btn-primary:hover {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
    color: white;
    transform: translateY(-3px);
}
.btn-secondary {
    background-color: transparent;
    color: var(--dark-blue);
    border-color: var(--dark-blue);
}
.btn-secondary:hover {
    background-color: var(--dark-blue);
    color: white;
}

/* ======================= Header ======================= */
.site-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    height: var(--header-height);
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.logo {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--dark-blue);
    font-weight: 700;
}
.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}
.nav-links a {
    color: var(--dark-blue);
    font-weight: 400;
    position: relative;
    padding: 0.5rem 0;
}
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--teal);
    transition: width 0.3s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}
.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: var(--dark-blue);
    transition: all 0.3s ease-in-out;
}

/* ======================= Section 1: Hero ======================= */
#hero {
    height: calc(100vh - var(--header-height));
    min-height: 600px;
    display: flex;
    align-items: center;
    color: white;
}
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/hero-bg.webp') no-repeat center center/cover;
    filter: brightness(0.6);
    z-index: -1;
}
.hero-content {
    text-align: left;
}
.glass-box {
    background: rgba(11, 57, 84, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 3rem;
    max-width: 600px;
}
.hero-title {
    font-size: 4.5rem;
    margin-bottom: 1rem;
    color: white;
}
.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    font-weight: 300;
}

/* ======================= Section 2: Featured Products ======================= */
#featured-products {
    padding: 6rem 0;
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.product-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.card-image-wrapper {
    overflow: hidden;
    height: 400px;
}
.product-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.product-card:hover img {
    transform: scale(1.05);
}
.product-card h3 {
    margin: 1.5rem 1.5rem 0.5rem;
    font-size: 1.4rem;
}
.product-card p {
    padding: 0 1.5rem;
    margin-bottom: 1rem;
    color: #666;
    font-size: 0.9rem;
}
.product-card .price {
    font-weight: 400;
    color: var(--teal);
    font-size: 1.2rem;
    display: block;
    margin-bottom: 1.5rem;
}

/* ======================= Section 3: Our Philosophy ======================= */
#philosophy {
    padding: 6rem 0;
    background-color: #fff;
}
.philosophy-container {
    display: flex;
    align-items: center;
    gap: 4rem;
}
.philosophy-image-container {
    flex: 1 1 45%;
    border-radius: 10px;
    overflow: hidden;
}
.philosophy-image-container img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}
.philosophy-text {
    flex: 1 1 55%;
}
.philosophy-text .section-title {
    text-align: left;
}
.philosophy-text .section-title::after {
    margin-left: 0;
}
.philosophy-text p {
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

/* ======================= Section 4: Process Spotlight ======================= */
#process {
    padding: 8rem 0;
    color: white;
}
.parallax-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/parallax-bg.webp') no-repeat center center/cover;
    background-attachment: fixed; /* Parallax effect */
    z-index: -1;
}
#process::before { /* Dark overlay for text readability */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 57, 84, 0.6);
    z-index: -1;
}
.process-content {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.process-text-box {
    max-width: 700px;
    background: rgba(8, 126, 139, 0.1);
    padding: 2.5rem;
    border: 1px solid rgba(191, 215, 234, 0.3);
    border-radius: 10px;
}
.process-text-box .section-title {
    color: white;
}
.process-text-box .section-title::after {
    background-color: var(--light-blue);
}

/* ======================= Section 5: Collections ======================= */
#collections {
    padding: 6rem 0;
}
.collections-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.collection-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}
.collection-card img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.collection-card:hover img {
    transform: scale(1.1);
}
.collection-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to top, rgba(11, 57, 84, 0.8) 0%, rgba(11, 57, 84, 0) 60%);
    transition: background 0.4s ease;
}
.collection-card:hover .collection-overlay {
    background: linear-gradient(to top, rgba(11, 57, 84, 0.9) 0%, rgba(11, 57, 84, 0.1) 70%);
}
.collection-overlay h3 {
    color: white;
    font-size: 1.8rem;
    transform: translateY(calc(50% + 2rem));
    transition: transform 0.4s ease-out;
}
.collection-card:hover .collection-overlay h3 {
    transform: translateY(0);
}

/* ======================= Section 6: Testimonials ======================= */
#testimonials {
    padding: 6rem 0;
    background-color: var(--light-blue);
}
.testimonial-container {
    text-align: center;
}
.testimonial-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 2rem;
    border: 4px solid white;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.testimonial-content blockquote {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    line-height: 1.5;
    max-width: 800px;
    margin: 0 auto 1.5rem;
    color: var(--dark-blue);
    font-style: italic;
    border: none;
}
.testimonial-content cite {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 400;
    color: var(--teal);
}

/* ======================= Section 7: Newsletter CTA ======================= */
#newsletter {
    padding: 5rem 0;
    background-color: white;
}
.newsletter-container {
    text-align: center;
}
.newsletter-content {
    max-width: 600px;
    margin: 0 auto;
}
.newsletter-form {
    display: flex;
    margin-top: 2rem;
    gap: 0.5rem;
}
.newsletter-form input {
    flex-grow: 1;
    padding: 0.8rem 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    font-family: var(--font-body);
}
.newsletter-form input:focus {
    outline: 2px solid var(--teal);
    border-color: var(--teal);
}

/* ==========================================================================
   PRODUCTS PAGE STYLES
   ========================================================================== */

/* ======================= Section 1: Product Page Hero ======================= */
#product-hero {
    height: 60vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}
.product-hero-background {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('images/product-bg.webp') no-repeat center center/cover;
    filter: brightness(0.5) contrast(1.1);
    z-index: -1;
}
.page-title {
    font-size: 4rem;
    color: white;
}
.page-subtitle {
    font-size: 1.2rem;
    font-weight: 300;
    max-width: 600px;
    margin: 1rem auto 0;
}

/* ======================= Section 2: Filterable Product Gallery ======================= */
#product-gallery {
    padding: 6rem 0;
}
.filter-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
}
.filter-btn {
    background: none;
    border: 1px solid var(--light-blue);
    color: var(--teal);
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.filter-btn:hover {
    background-color: var(--light-blue);
    border-color: var(--light-blue);
}
.filter-btn.active {
    background-color: var(--teal);
    border-color: var(--teal);
    color: white;
}
.product-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}
.gallery-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.gallery-card.hide {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(11, 57, 84, 0.9) 0%, transparent 100%);
    color: white;
    transform: translateY(100%);
    transition: transform 0.4s ease;
}
.gallery-card:hover .card-info {
    transform: translateY(0);
}
.card-info h3 {
    color: white;
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
}
.card-info .price {
    color: var(--light-blue);
}

/* ======================= Section 3: Featured Product Spotlight ======================= */
#featured-spotlight {
    padding: 6rem 0;
    background-color: white;
}
.spotlight-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.spotlight-image img {
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    width: 100%;
    height: 400px;
    object-fit: cover;
}
.spotlight-details .section-title {
    text-align: left;
}
.spotlight-details .section-title::after {
    margin: 1rem 0 0 0;
}
.spotlight-details p {
    margin: 2rem 0;
}
.details-list {
    list-style: none;
    margin-bottom: 2rem;
}
.details-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}

/* ======================= Section 4: The Crafting Journey ======================= */
/* ==========================================================================
   SOPHISTICATED ARTISAN'S JOURNEY SECTION
   ========================================================================== */

#artisan-journey {
    padding: 6rem 0;
    background-color: var(--off-white);
    position: relative;
}

.journey-wrapper {
    position: relative;
    max-width: 900px;
    margin: 4rem auto 0;
}

/* The central timeline */
.journey-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    background-color: var(--light-blue);
    z-index: 0;
}

.process-step-sophisticated {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    position: relative;
    margin-bottom: 5rem;
}

.process-step-sophisticated:last-child {
    margin-bottom: 0;
}

/* Step Number Typography */
.step-number-deco {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-size: 6rem;
    font-weight: 700;
    color: #eef2f5; /* A very light, subtle color */
    z-index: 1;
}

.step-image-sophisticated {
    position: relative;
    z-index: 2;
}

.step-image-sophisticated img {
    border-radius: 8px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.step-text-sophisticated {
    position: relative;
    z-index: 2;
}

.step-content {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.step-content h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--teal);
}

/* Layout for the second step (image on the right) */
.step-right-image .step-image-sophisticated {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.step-right-image .step-text-sophisticated {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    text-align: right;
}

/* Responsive adjustments for the sophisticated layout */
@media (max-width: 768px) {
    .journey-wrapper::before {
        left: 20px; /* Move line to the side */
    }
    
    .process-step-sophisticated {
        /* grid-template-columns: 1fr; */
        display: block;
        gap: 1.5rem;
    }
    
    .step-number-deco {
        left: 20px;
        top: -1.5rem; /* Position above the content */
        font-size: 4rem;
        transform: translateX(-50%);
    }

    /* Stack image and text vertically, always in the same order */
    .step-left-image .step-image-sophisticated,
    .step-right-image .step-image-sophisticated {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        padding-left: 40px;
        margin-bottom: 20px;
    }

    .step-content
    {
        margin-bottom: 20px;
    }

    .step-left-image .step-text-sophisticated,
    .step-right-image .step-text-sophisticated {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        text-align: left; /* Reset text alignment */
        padding-left: 40px;
    }
}

/* ======================= Section 5: Materials & Finishes ======================= */
#materials-finishes {
    padding: 6rem 0;
    background-color: var(--off-white);
}
.materials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.material-card {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    border-top: 4px solid var(--teal);
}
.material-card h3 {
    margin-bottom: 1rem;
}

/* ======================= Section 6: Bespoke Creations ======================= */
/* ==========================================================================
   UNIFIED PERSONAL TOUCH SECTION (BESPOKE & CARE)
   ========================================================================== */

#personal-touch {
    padding: 6rem 0;
    background-color: white; /* Clean background to make the cards stand out */
}

.personal-touch-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

.touch-column {
    background-color: var(--off-white);
    border-radius: 8px;
    overflow: hidden; /* Important for the image's border-radius */
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.touch-column:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.touch-column img {
    width: 100%;
    height: 250px; /* Consistent image height */
    object-fit: cover;
}

.touch-content {
    padding: 2rem;
    flex-grow: 1; /* Ensures content below fills the space */
    display: flex;
    flex-direction: column;
}

.touch-content h3 {
    font-size: 1.6rem;
    color: var(--dark-blue);
    margin-bottom: 1rem;
}

.touch-content p {
    flex-grow: 1; /* Pushes the button to the bottom */
    margin-bottom: 1.5rem;
}

/* A sophisticated link style for the care guide */
.link-arrow {
    color: var(--teal);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    align-self: flex-start; /* Aligns the link to the left */
    position: relative;
    padding-right: 1.5rem; /* Space for the arrow */
}

.link-arrow::after {
    content: '→';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.link-arrow:hover::after {
    transform: translateY(-50%) translateX(5px);
}

/* Responsive adjustments for the unified section */
@media (max-width: 768px) {
    .personal-touch-wrapper {
        grid-template-columns: 1fr; /* Stack the columns on smaller screens */
    }
}


/* ======================= Products Page Responsive ======================= */
@media (max-width: 992px) {
    .spotlight-container {
        grid-template-columns: 1fr;
    }
    .materials-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-title { font-size: 3rem; }
    .process-step, .process-step:nth-child(even) {
        flex-direction: column;
    }
    .product-gallery-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .product-gallery-grid {
        grid-template-columns: 1fr;
    }
    .filter-controls {
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .filter-btn {
        padding: 0.4rem 1rem;
        font-size: 0.9rem;
    }
}

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

/* ======================= Section 1: About Hero ======================= */
#about-hero {
    background-color: white;
    padding: 6rem 0;
    overflow: hidden;
}
.about-hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
}
.about-hero-text .page-title {
    text-align: left;
}
.about-hero-text .page-title::after {
    margin-left: 0;
}
.about-hero-text p {
    font-size: 1.2rem;
    color: #555;
    margin-top: 1.5rem;
}
.about-hero-image img {
    border-radius: 10px;
    height: 100%;
    max-height: 500px;
    width: 100%;
    object-fit: cover;
}

/* ======================= Section 2: The Founder's Story ======================= */
#founder-story {
    padding: 6rem 0;
}
.founder-container {
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: center;
    gap: 4rem;
}
.founder-images {
    position: relative;
    height: 500px;
}
.founder-portrait {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: auto;
    border-radius: 8px;
    z-index: 2;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
.founder-action {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60%;
    border-radius: 8px;
    border: 5px solid white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    z-index: 3;
}
.founder-text .section-title {
    text-align: left;
}
.founder-text .section-title::after {
    margin-left: 0;
}
.founder-quote {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--teal);
    margin: 1.5rem 0;
    padding-left: 1.5rem;
    border-left: 3px solid var(--light-blue);
}

/* ======================= Section 3: The Studio Tour ======================= */
#studio-tour {
    padding: 6rem 0;
    background-color: var(--light-blue);
}
.studio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 250px);
    gap: 1rem;
    margin-top: 3rem;
}
.grid-item {
    overflow: hidden;
    border-radius: 8px;
}
.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.grid-item:hover img {
    transform: scale(1.05);
}
.grid-item.large {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
.grid-item.small:first-of-type {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}
.grid-item.small:last-of-type {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

/* ======================= Section 4: Our Guiding Principles ======================= */
#our-principles {
    padding: 6rem 0;
    background-color: white;
}
.principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: center;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 4rem 0;
}
.principle-card h3 {
    margin-bottom: 1rem;
}

/* ======================= Section 5: Our Journey (Timeline) ======================= */
/* ==========================================================================
   ADAPTIVE & RESPONSIVE TABS SECTION
   ========================================================================== */

#story-tabs {
    padding: clamp(3rem, 8vw, 6rem) 0; /* Fluid padding for different screen sizes */
    background-color: var(--off-white);
}

.tabs-wrapper {
    display: grid;
    /* On mobile, it will be 1fr. On desktop, it's defined in the media query. */
    grid-template-columns: 1fr; 
    gap: 1.5rem;
    background: white;
    padding: clamp(1rem, 4vw, 2rem); /* Fluid padding inside the component */
    border-radius: 12px; /* Slightly larger radius for a modern feel */
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    margin-top: 3rem;
    transition: box-shadow 0.3s ease;
}

.tabs-wrapper:hover {
    box-shadow: 0 15px 50px rgba(0,0,0,0.12);
}

/* Tab Navigation Styling */
.tabs-nav {
    list-style: none;
    display: flex;
    /* Mobile-first: Horizontal scrollable navigation */
    border-bottom: 1px solid #eee;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem; /* Space for scrollbar */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Hiding the default scrollbar for a cleaner look */
.tabs-nav::-webkit-scrollbar {
    height: 4px;
}
.tabs-nav::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.tabs-nav::-webkit-scrollbar-thumb {
    background: var(--light-blue);
    border-radius: 2px;
}
.tabs-nav::-webkit-scrollbar-thumb:hover {
    background: var(--teal);
}

.tab-button {
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    white-space: nowrap; /* Prevents years from wrapping on mobile */
    border-bottom: 3px solid transparent; /* Mobile-first indicator */
    text-align: center;
    font-family: var(--font-heading);
    /* Fluid typography: scales between 1.1rem and 1.5rem */
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: #aaa;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-button:hover {
    color: var(--dark-blue);
    background-color: #f8f9fa;
}

.tab-button.active {
    color: var(--teal);
    border-bottom-color: var(--teal);
    font-weight: 700;
}

/* Tab Content Styling */
.tabs-content {
    position: relative;
    overflow: hidden; /* Important for hiding non-active panels */
    /* Height will be set by JS for smooth transitions */
    transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tab-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, visibility 0.4s;
    
    /* Mobile-first: Stacked layout */
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
}

.tab-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    position: relative; /* Change from absolute to relative to dictate parent height */
}

.panel-image img {
    width: 100%;
    height: 400px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 8px;
}

.panel-text h3 {
    /* Fluid typography for headings */
    font-size: clamp(1.5rem, 5vw, 2rem);
    margin-bottom: 1rem;
}

/* ================== Larger Screen Adaptations ================== */

@media (min-width: 769px) {
    .tabs-wrapper {
        /* Switch to vertical nav layout */
        grid-template-columns: 150px 1fr;
        gap: 2rem;
    }

    .tabs-nav {
        /* Revert mobile styles and apply vertical styles */
        flex-direction: column;
        overflow-x: visible;
        border-bottom: none;
        border-right: 1px solid #eee;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .tab-button {
        border-bottom: none;
        border-left: 3px solid transparent; /* Switch indicator to the left */
        text-align: left;
        padding: 1rem 1.5rem;
    }
    
    .tab-button.active {
        border-bottom-color: transparent;
        border-left-color: var(--teal);
    }

    .tab-panel {
        /* Desktop: Side-by-side image and text */
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        position: absolute; /* Revert to absolute for fade transitions */
    }

    .tab-panel.active {
        position: absolute; /* Active panel should also be absolute */
    }
}

@media (min-width: 1024px) {
    .tabs-wrapper {
        grid-template-columns: 200px 1fr; /* Wider nav for large desktops */
        gap: 3rem;
    }
}
/* ======================= Section 6: Meet The Team ======================= */
/* ==========================================================================
   MODERN TEAM SLIDER SECTION
   ========================================================================== */

#meet-the-team-slider {
    padding: 6rem 0;
    background-color: var(--off-white);
}

.team-slider-container {
    position: relative;
    max-width: 400px; /* Controls the width of the focused slide */
    margin: 3rem auto 0;
}

.team-slider-wrapper {
    overflow: hidden; /* This is the magic that creates the slider effect */
}

.team-slider-track {
    display: flex;
    /* The JS will handle movement via transform */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.team-slide {
    flex: 0 0 100%; /* Each slide takes up the full width of the wrapper */
    min-width: 100%;
    text-align: center;
    padding: 0 1rem; /* Padding to prevent content touching edges */
    opacity: 0.5;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.team-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.team-slide img {
    width: 100%;
    max-width: 280px; /* Control image size within the slide */
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 1.5rem auto;
    filter: grayscale(1);
    transition: filter 0.4s ease;
}

.team-slide.is-active img {
    filter: grayscale(0);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.team-slide h4 {
    font-size: 1.6rem;
    color: var(--dark-blue);
}

.team-slide p {
    color: var(--teal);
    font-size: 1rem;
}

/* Navigation Buttons Styling */
.slider-nav-btn {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background: white;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark-blue);
    transition: all 0.3s ease;
    z-index: 10;
}

.slider-nav-btn:hover {
    background-color: var(--teal);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.slider-nav-btn.prev-btn {
    left: -22px; /* Position half-out */
}

.slider-nav-btn.next-btn {
    right: -22px; /* Position half-out */
}

.slider-nav-btn svg {
    width: 24px;
    height: 24px;
}

/* Pagination Dots Styling */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--light-blue);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-dot:hover {
    background-color: var(--teal);
}

.slider-dot.is-active {
    background-color: var(--dark-blue);
    transform: scale(1.2);
}

/* Responsive adjustments for the slider */
@media (max-width: 500px) {
    .team-slider-container {
        max-width: 100%;
        width: 85%; /* Let the slider be slightly smaller than the viewport */
    }
    .slider-nav-btn {
        top: 35%;
    }
    .slider-nav-btn.prev-btn {
        left: -15px;
    }
    .slider-nav-btn.next-btn {
        right: -15px;
    }
}

/* ======================= Section 7: CTA ======================= */
#about-cta {
    color: white;
    padding: 6rem 0;
    text-align: center;
}
.parallax-background-about {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url('images/parallaz-about-bg.webp') no-repeat center center/cover;
    background-attachment: fixed;
    filter: brightness(0.4);
    z-index: -1;
}
#about-cta .section-title { color: white; }
#about-cta .section-title::after { background-color: var(--light-blue); }
#about-cta p { max-width: 600px; margin: 1rem auto 2rem; }
.cta-buttons { display: flex; justify-content: center; gap: 1rem; }
#about-cta .btn-secondary {
    color: white; border-color: white;
}
#about-cta .btn-secondary:hover {
    background-color: white; color: var(--dark-blue);
}

/* ======================= About Page Responsive ======================= */
@media (max-width: 992px) {
    .about-hero-container { grid-template-columns: 1fr; }
    .about-hero-image { grid-row: 1; }
    .founder-container { grid-template-columns: 1fr; }
    .founder-images { max-width: 500px; margin: 0 auto 3rem; display: none; }
    .studio-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 250px 250px;
    }
    .grid-item.large { grid-column: 1 / 3; grid-row: 1 / 2; }
    .grid-item.small:first-of-type { grid-column: 1 / 2; grid-row: 2 / 3; }
    .grid-item.small:last-of-type { grid-column: 2 / 3; grid-row: 2 / 3; }
    .principles-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .timeline-container::before { left: 8px; }
    .timeline-item, .timeline-item:nth-child(even) { width: 100%; left: 0; padding-left: 3rem; }
    .timeline-item:nth-child(odd)::after, .timeline-item:nth-child(even)::after { left: 0; }
}

@media (max-width: 480px) {
    .founder-images { height: 400px; }
    .studio-grid { grid-template-columns: 1fr; grid-template-rows: 300px 200px 200px; }
    .grid-item.large, .grid-item.small:first-of-type, .grid-item.small:last-of-type {
        grid-column: auto; grid-row: auto;
    }
    .cta-buttons { flex-direction: column; }
}

/* ==========================================================================
   SHIPPING PAGE STYLES
   ========================================================================== */

/* ======================= Section 1: Shipping Hero ======================= */
#shipping-hero {
    height: 50vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}
.shipping-hero-background {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('images/shipping-bg.webp') no-repeat center center/cover;
    filter: brightness(0.6);
    z-index: -1;
}

/* ======================= Section 2: Policy Summary ======================= */
/* ==========================================================================
   UNIQUE SHIPPING PROMISE SECTION
   ========================================================================== */

#shipping-promise {
    padding: 6rem 0;
    background-color: var(--off-white);
}

.promise-steps-container {
    display: grid;
    /* Mobile-first: stacked layout */
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-top: 4rem;
    position: relative;
}

.promise-step {
    display: flex;
    /* Mobile: icon on the left, text on the right */
    align-items: flex-start;
    gap: 1.5rem;
    position: relative;
    transition: transform 0.3s ease;
}

.promise-icon-wrapper {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: white;
    border: 1px solid var(--light-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal);
    transition: all 0.3s ease;
}

.promise-icon-wrapper svg {
    width: 32px;
    height: 32px;
}

.promise-text h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--dark-blue);
}

.promise-text p {
    color: #555;
    line-height: 1.7;
}

.promise-step:hover .promise-icon-wrapper {
    background-color: var(--teal);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(8, 126, 139, 0.2);
}

/* ================== Desktop Layout with Connecting Line ================== */
@media (min-width: 992px) {
    .promise-steps-container {
        /* Desktop: horizontal layout */
        grid-template-columns: repeat(3, 1fr);
        gap: 4rem;
    }

    /* The decorative connecting line */
    .promise-steps-container::before {
        content: '';
        position: absolute;
        top: 30px; /* Aligns with the vertical center of the icons */
        left: 5%;
        right: 5%;
        height: 2px;
        background-image: linear-gradient(to right, var(--light-blue) 50%, transparent 50%);
        background-size: 10px 2px;
        background-repeat: repeat-x;
        z-index: 0;
    }

    .promise-step {
        /* Desktop: icon on top, text below */
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.5rem;
        background-color: var(--off-white); /* To sit on top of the dashed line */
        z-index: 1;
    }
}
/* ======================= Section 3: Shipping Rates & Times ======================= */
#shipping-rates {
    padding: 6rem 0;
}
.rates-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}
.rates-column {
    border: 1px solid #eee;
    padding: 2rem;
    border-radius: 8px;
}
.rates-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

/* ======================= Section 4: Our Packaging ======================= */
#packaging-section {
    padding: 6rem 0;
    background-color: white;
    overflow: hidden;
}
.packaging-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
}
.packaging-images {
    position: relative;
    height: 550px;
}
.packaging-images .img-main {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
}
.packaging-images .img-secondary {
    position: absolute;
    bottom: -20px;
    right: -40px;
    width: 45%;
    border-radius: 8px;
    border: 5px solid white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.packaging-text .section-title { text-align: left; }
.packaging-text .section-title::after { margin-left: 0; }

/* ======================= Section 5: Returns Policy ======================= */
#returns-policy {
    padding: 6rem 0;
    background-color: var(--off-white);
}
.returns-process {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 3rem;
    position: relative;
}
.returns-process::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 10%;
    right: 10%;
    height: 2px;
    background-color: var(--light-blue);
    z-index: 0;
}
.step {
    flex: 1;
    text-align: center;
    position: relative;
}
.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--teal);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    border: 4px solid var(--off-white);
    z-index: 1;
    position: relative;
}

/* ======================= Section 6: FAQ ======================= */
#shipping-faq {
    padding: 6rem 0;
}
.faq-container {
    max-width: 800px;
    margin: 3rem auto 0;
    border-top: 1px solid #eee;
}
.faq-item {
    border-bottom: 1px solid #eee;
}
.faq-question {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 1.5rem 0;
    font-size: 1.2rem;
    font-family: var(--font-heading);
    color: var(--dark-blue);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-question::after {
    content: '+';
    font-size: 2rem;
    color: var(--teal);
    transition: transform 0.3s ease;
}
.faq-item.active .faq-question::after {
    transform: rotate(45deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}
.faq-answer p {
    padding: 0 0 1.5rem 0;
}
.faq-item.active .faq-answer {
    max-height: 250px; /* Adjust if answers are longer */
}

/* ======================= Section 7: Contact CTA ======================= */
/* ==========================================================================
   INTERESTING & DYNAMIC CONTACT CTA SECTION
   ========================================================================== */

#contact-cta {
    padding: 6rem 0;
    background-color: var(--off-white);
}

.cta-wrapper {
    display: grid;
    /* Mobile-first: stacked layout */
    grid-template-columns: 1fr;
    background: var(--dark-blue);
    border-radius: 12px;
    position: relative;
    overflow: hidden; /* Hide anything that pokes out */
}

/* Text Column */
.cta-text-content {
    position: relative;
    padding: clamp(2rem, 8vw, 4rem); /* Fluid padding */
    color: white;
    z-index: 2; /* Sits on top of the image on desktop */
}

.cta-text-content h2 {
    font-size: clamp(2rem, 6vw, 2.8rem); /* Fluid font size */
    color: white;
    margin-bottom: 1rem;
}

.cta-text-content p {
    color: var(--light-blue);
    max-width: 500px;
    margin-bottom: 2rem;
}

/* Decorative SVG Styling */
.cta-decoration {
    position: absolute;
    top: -20px;
    right: -30px;
    width: 150px;
    height: 150px;
    color: var(--teal);
    opacity: 0.1;
    transform: rotate(45deg);
    z-index: -1;
}

/* Image Column */
.cta-image-content {
    /* On mobile, this will be the bottom part of the card */
    min-height: 250px;
}

.cta-image-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%; /* Focus on the upper part of the image */
}

/* ================== Desktop Layout with Overlapping Columns ================== */
@media (min-width: 992px) {
    .cta-wrapper {
        grid-template-columns: 1.2fr 1fr; /* Give text more space */
        align-items: center;
        overflow: visible; /* Allow image to overflow visually */
        background: transparent; /* Wrapper is now just a positioning context */
    }

    .cta-text-content {
        grid-row: 1 / 2;
        grid-column: 1 / 2;
        background: var(--dark-blue);
        border-radius: 12px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    }
    
    .cta-image-content {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
        
        /* THE KEY TO THE OVERLAP EFFECT */
        margin-left: -5rem; 

        height: 450px; /* Give it a fixed height */
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 20px 50px rgba(0,0,0,0.2);
        transition: transform 0.4s ease;
    }

    .cta-wrapper:hover .cta-image-content {
        transform: scale(1.03) translateX(10px);
    }
}
/* ======================= Shipping Page Responsive ======================= */
@media (max-width: 992px) {
    .summary-grid { grid-template-columns: 1fr; }
    .rates-container { grid-template-columns: 1fr; }
    .packaging-container { grid-template-columns: 1fr; }
    .packaging-images { grid-row: 1; height: auto; margin-bottom: 3rem; }
}
@media (max-width: 768px) {
    .returns-process { flex-direction: column; }
    .returns-process::before { display: none; }
    .packaging-images .img-secondary { display: none; }
}

/* ==========================================================================
   JOURNAL PAGE STYLES
   ========================================================================== */

/* ======================= Section 1: Journal Hero ======================= */
#journal-hero {
    padding: 6rem 0;
    background-color: white;
    overflow: hidden;
}
.journal-hero-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}
.hero-post-image img {
    border-radius: 8px;
    height: 400px;
    width: 100%;
    object-fit: cover;
}
.hero-post-content .page-title {
    text-align: left;
    font-size: 3.5rem;
}
.hero-post-content .page-title::after {
    margin-left: 0;
}
.featured-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background-color: var(--light-blue);
    color: var(--teal);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    margin-bottom: 1rem;
}
.hero-post-content p {
    margin: 1.5rem 0 2rem;
    font-size: 1.1rem;
}

/* ======================= Section 2: Latest Posts Grid ======================= */
#latest-posts {
    padding: 6rem 0;
    background-color: var(--off-white);
}
.posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
.post-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.post-card.large-card {
    grid-column: 1 / 3;
}
.post-card a {
    display: block;
    color: var(--text-color);
}
.large-card a {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.post-card img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}
.post-card .card-content {
    padding: 2rem;
}
.post-card .category {
    font-size: 0.8rem;
    color: var(--teal);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    display: block;
}
.post-card h3 {
    font-size: 1.6rem;
    line-height: 1.3;
}
.large-card h3 { font-size: 2rem; }
.large-card p {
    margin-top: 1rem;
    color: #555;
}

/* ======================= Section 3: Browse by Category ======================= */
#journal-categories {
    padding: 6rem 0;
}
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}
.category-card {
    background: var(--light-blue);
    padding: 2rem;
    border-radius: 8px;
    color: var(--dark-blue);
    transition: all 0.3s ease;
}
.category-card:hover {
    background: var(--teal);
    color: white;
    transform: scale(1.03);
}
.category-card h4 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: inherit;
}

/* ======================= Section 4: Artisan Spotlight ======================= */
#artisan-spotlight {
    padding: 6rem 0;
    background: white;
}
.spotlight-container-journal {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}
.spotlight-image-journal img {
    border-radius: 8px;
    width: 100%;
    height: 400px;
    object-fit: cover;
}
.spotlight-text-journal .section-title {
    text-align: left;
}
.spotlight-text-journal .section-title::after { margin-left: 0; }
.spotlight-text-journal blockquote {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-style: italic;
    margin: 2rem 0;
    padding-left: 1.5rem;
    border-left: 3px solid var(--teal);
    color: var(--dark-blue);
}
.spotlight-text-journal p { margin-bottom: 2rem; }

/* ======================= Section 5: Visual Inspiration Gallery ======================= */
#inspiration-gallery {
    padding: 6rem 0;
    background-color: var(--off-white);
}
.gallery-collage {
    position: relative;
    height: 600px;
    max-width: 900px;
    margin: 4rem auto 0;
}
.collage-item {
    position: absolute;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    border: 5px solid white;
}
.collage-item img {
    width: 100%; height: 100%; object-fit: cover;
}
.item-1 { width: 350px; height: 500px; top: 0; left: 0; z-index: 1; transform: rotate(-5deg); }
.item-2 { width: 500px; height: 350px; top: 120px; left: 50%; transform: translateX(-40%) rotate(3deg); z-index: 2; }
.item-3 { width: 300px; height: 300px; bottom: 0; right: 0; z-index: 3; transform: rotate(8deg); }

/* ======================= Section 6: From Our Sketchbook ======================= */
/* ==========================================================================
   SOPHISTICATED CONCEPT-TO-CREATION SECTION
   ========================================================================== */

#concept-to-creation {
    padding: 8rem 0; /* More whitespace for a premium feel */
    background: white;
    overflow: hidden; /* Prevents overflow from rotated elements */
}

.concept-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}

/* Text Column Styling */
.concept-text .section-title {
    text-align: left;
}
.concept-text .section-title::after {
    margin-left: 0;
}
.concept-subtitle {
    display: block;
    color: var(--teal);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

/* Image Composition Styling */
.sketchbook-composition {
    position: relative;
    height: 500px; /* Define a height for the positioning context */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.composition-sketch, .composition-product {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* The Sketchbook (Bottom Layer) */
.composition-sketch {
    top: 0;
    left: 0;
    width: 90%;
    z-index: 1;
}

.composition-sketch img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: -15px 15px 40px rgba(0,0,0,0.15);
    transform: rotate(-3deg);
}

/* The Final Product (Top Layer) */
.composition-product {
    top: -10%;
    right: -20%;
    width: 60%;
    z-index: 2;
}

.composition-product img {
    width: 100%;
    height: auto;
    /* This filter creates a realistic shadow for transparent PNGs */
    filter: drop-shadow(10px 10px 25px rgba(0,0,0,0.2));
}

/* Interactive Hover Effect */
.sketchbook-composition:hover .composition-product {
    transform: scale(1.08) translate(-10px, -10px) rotate(3deg);
}

.sketchbook-composition:hover .composition-sketch {
    transform: scale(0.98) rotate(-3deg);
    opacity: 0.8;
}

/* Responsive adjustments for the composition */
@media (max-width: 992px) {
    .concept-container {
        grid-template-columns: 1fr; /* Stack the columns */
        gap: 2rem;
    }
    .concept-text {
        text-align: center;
    }
    .concept-text .section-title {
        text-align: center;
    }
    .concept-text .section-title::after {
        margin: 1rem auto 0;
    }
    .sketchbook-composition {
        margin-top: 3rem;
        height: 400px; /* Reduce height on smaller screens */
    }
}
/* ======================= Section 7: Journal Newsletter CTA ======================= */
#journal-cta {
    padding: 6rem 0;
    background: var(--dark-blue);
}
#journal-cta .section-title, #journal-cta p {
    color: white;
}
#journal-cta .section-title::after {
    background: var(--teal);
}
.journal-cta-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

/* ======================= Journal Page Responsive ======================= */
@media (max-width: 992px) {
    .journal-hero-container { grid-template-columns: 1fr; }
    .hero-post-content .page-title { font-size: 2.8rem; }
    .posts-grid { display: block; }
    .large-card a { grid-template-columns: 1fr; }
    .spotlight-container-journal { grid-template-columns: 1fr; }
    .spotlight-image-journal { grid-row: 1; }
    .sketchbook-container { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .gallery-collage { height: 450px; }
    .item-1 { width: 200px; height: 300px; }
    .item-2 { width: 300px; height: 210px; }
    .item-3 { width: 180px; height: 180px; }
}
@media (max-width: 480px) {
    .gallery-collage { display: none; } /* Collage is too complex for small screens */
}

/* ==========================================================================
   CLIENTS PAGE STYLES
   ========================================================================== */

/* ======================= Section 1: Clients Hero ======================= */
#clients-hero {
    height: 50vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}
.clients-hero-background {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('images/clients-bg.webp') no-repeat center center/cover;
    filter: brightness(0.5);
    z-index: -1;
}

/* ======================= Section 2 & 5: Logos ======================= */
#client-logos, #press-features {
    padding: 6rem 0;
    background-color: var(--off-white);
}
#press-features {
    background-color: white;
    padding-top: 0;
}
.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    align-items: center;
    margin-top: 3rem;
}
.logo-item {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: #999;
    filter: grayscale(1);
    opacity: 0.7;
    transition: all 0.3s ease;
}
.logo-item:hover {
    filter: grayscale(0);
    opacity: 1;
    color: var(--dark-blue);
}
.press-logos .logo-item {
    font-style: italic;
}

/* ======================= Section 3: Case Study Spotlight ======================= */
#case-study {
    padding: 6rem 0;
    background-color: white;
    overflow: hidden;
}
.case-study-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.case-study-label {
    display: inline-block;
    color: var(--teal);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}
.case-study-text .section-title {
    text-align: left;
    margin-bottom: 2rem;
}
.case-study-text .section-title::after { margin-left: 0; }
.case-study-text blockquote {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--dark-blue);
    margin: 2rem 0 0.5rem;
    padding-left: 1.5rem;
    border-left: 3px solid var(--light-blue);
}
.case-study-text cite {
    display: block;
    font-style: normal;
    font-weight: 700;
    color: #555;
    padding-left: 1.5rem;
}
.case-study-images {
    position: relative;
    height: 500px;
}
.case-study-images .img-main {
    width: 85%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
.case-study-images .img-secondary {
    position: absolute;
    width: 50%;
    bottom: -30px;
    right: 0;
    border-radius: 8px;
    border: 6px solid white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* ======================= Section 4: Testimonials Grid ======================= */
/* ==========================================================================
   MODERN TESTIMONIAL SLIDER SECTION
   ========================================================================== */

#testimonial-rotator {
    padding: 6rem 0;
    background: var(--light-blue);
    overflow: hidden; /* Prevent elements from poking out on small screens */
}

.testimonial-slider-container {
    max-width: 900px;
    margin: 3rem auto 0;
}

/* This is the 3D space for the animation */
.testimonial-slider-stage {
    position: relative;
    height: 450px; /* Fixed height is important for positioning */
    perspective: 1200px; /* The 3D depth */
}

.testimonial-slider-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.testimonial-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 60%; /* Active slide width */
    max-width: 450px;
    height: 100%;
    
    background: white;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    text-align: center;

    /* The core animation transition */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

/* Define states for slides based on JS classes */
.testimonial-slide.is-active {
    transform: translateX(0) scale(1);
    opacity: 1;
    z-index: 2;
}

.testimonial-slide.is-prev {
    transform: translateX(-60%) scale(0.8) rotateY(45deg);
    opacity: 0.4;
    z-index: 1;
}

.testimonial-slide.is-next {
    transform: translateX(60%) scale(0.8) rotateY(-45deg);
    opacity: 0.4;
    z-index: 1;
}

/* Inactive slides are hidden far away */
.testimonial-slide:not(.is-active):not(.is-prev):not(.is-next) {
    transform: translateX(0) scale(0.7);
    opacity: 0;
    z-index: 0;
}

.testimonial-slide img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
}
.testimonial-slide p { font-style: italic; color: #555; margin-bottom: 1.5rem; }
.testimonial-slide h4 { color: var(--dark-blue); font-size: 1.2rem; }
.testimonial-slide span { color: var(--teal); font-size: 0.9rem; }


/* Navigation Styling */
.testimonial-slider-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 1.5rem;
}

.slider-btn {
    background: none;
    border: 1px solid var(--dark-blue);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: var(--dark-blue);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.slider-btn:hover { background-color: var(--dark-blue); color: white; }
.slider-btn svg { width: 24px; height: 24px; }

.slider-dots-container {
    display: flex;
    gap: 0.75rem;
}
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(11, 57, 84, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}
.dot.is-active { background: var(--dark-blue); transform: scale(1.2); }
/* ======================= Section 6: UGC Gallery ======================= */
#ugc-gallery {
    padding: 6rem 0;
}
.ugc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 300px 300px;
    grid-auto-flow: dense;
    gap: 1rem;
    margin-top: 3rem;
}
.ugc-item {
    overflow: hidden;
    border-radius: 8px;
}
.ugc-item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}
.ugc-item:nth-child(2) {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
}
.ugc-item:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}
.ugc-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.ugc-item:hover img {
    transform: scale(1.05);
}

/* ======================= Section 7: Collaboration CTA ======================= */
#collaboration-cta {
    padding: 6rem 0;
    background-color: var(--dark-blue);
    color: white;
}
.collaboration-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}
#collaboration-cta .section-title {
    color: white;
}
#collaboration-cta .section-title::after {
    background-color: var(--teal);
}
#collaboration-cta p {
    color: var(--light-blue);
    margin: 1rem auto 2rem;
}

/* ======================= Clients Page Responsive ======================= */
@media (max-width: 992px) {
    .case-study-container {
        grid-template-columns: 1fr;
    }
    .case-study-images {
        grid-row: 1;
        margin-bottom: 2rem;
        height: 400px;
    }
}
@media (max-width: 768px) {
    .ugc-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .ugc-item:nth-child(1), .ugc-item:nth-child(2), .ugc-item:nth-child(3) {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 1/1.2;
    }

    .testimonial-slider-stage
    {
        height: 580px;
    }
}
@media (max-width: 480px) {
    .ugc-grid {
        grid-template-columns: 1fr;
    }

    .testimonial-slider-stage
    {
        height: 950px;
    }
    .case-study-images { height: 300px; }
}

/* ==========================================================================
   GALLERY PAGE STYLES
   ========================================================================== */

/* ======================= Section 1: Gallery Hero ======================= */
@keyframes kenburns {
    0% { transform: scale(1.1) translate(0, 0); }
    100% { transform: scale(1) translate(-2%, 2%); }
}

#gallery-hero {
    height: 60vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}
.gallery-hero-background {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('images/gallery-bg.webp') no-repeat center center/cover;
    animation: kenburns 20s ease-out forwards;
    filter: brightness(0.5);
    z-index: -1;
}

/* ======================= Section 2: Asymmetrical Curated Grid ======================= */
#curated-grid {
    padding: 6rem 0;
}
.asymmetrical-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 250px;
    grid-auto-flow: dense;
    gap: 1rem;
    margin-top: 3rem;
}
.grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}
.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.grid-item:hover img {
    transform: scale(1.05);
}
.grid-item.tall { grid-row: span 2; }
.grid-item.wide { grid-column: span 2; }
.item-overlay {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(11, 57, 84, 0.8) 0%, transparent 80%);
    color: white;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}
.grid-item:hover .item-overlay {
    opacity: 1;
    transform: translateY(0);
}
.item-overlay h3 { color: white; }

/* ======================= Section 3: In Situ Showcase ======================= */
#in-situ {
    padding: 8rem 0;
    color: var(--dark-blue);
    position: relative;
}
.parallax-background-gallery {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('images/parallax-gallery-bg.webp') no-repeat center center/cover;
    background-attachment: fixed;
    filter: grayscale(0.5) brightness(1.2);
    z-index: -1;
}
.in-situ-box {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    padding: 3rem;
    max-width: 550px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.in-situ-box .section-title { text-align: left; }
.in-situ-box .section-title::after { margin-left: 0; }

/* ======================= Section 4: Detail Spotlight ======================= */
/* ==========================================================================
   SOPHISTICATED DETAIL SLIDER SECTION
   ========================================================================== */

#detail-slider {
    padding: 6rem 0;
    background: var(--dark-blue);
    overflow: hidden; /* Important for slider elements */
}
#detail-slider .section-title { color: white; }
#detail-slider .section-title::after { background-color: var(--teal); }
#detail-slider .section-intro { color: var(--light-blue); }

.detail-slider-container {
    margin-top: 3rem;
}

.slider-viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.slider-track {
    display: flex;
    gap: 2rem;
    /* The JS handles movement, CSS provides the smooth transition */
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.slider-slide {
    /* Mobile-first: One large slide is visible */
    flex: 0 0 85%;
    min-width: 85%;
    opacity: 0.7;
    transform: scale(0.9);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.slider-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.slider-slide img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 8px;
}

/* Slider Controls */
.slider-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 2.5rem;
}

.slider-controls .slider-btn {
    background: transparent;
    border: 1px solid var(--teal);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    color: var(--light-blue);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.slider-controls .slider-btn:hover:not(:disabled) {
    background: var(--teal);
    color: white;
}
.slider-controls .slider-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.slider-controls .slider-btn svg { width: 24px; height: 24px; }

.slider-pagination {
    color: white;
    font-size: 1.2rem;
    font-family: var(--font-heading);
    /* Ensures numbers don't jump around when changing */
    font-variant-numeric: tabular-nums;
}
.slider-pagination .total-slides {
    color: var(--light-blue);
    opacity: 0.7;
}

/* ================== Desktop Layout with Multi-Item View ================== */
@media (min-width: 992px) {
    .slider-slide {
        /* On desktop, show multiple slides */
        flex: 0 0 30%;
        min-width: 30%;
    }
}
/* ======================= Section 5: Color Palette Story ======================= */
#color-palette {
    padding: 6rem 0;
}
.palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.palette-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.palette-card img {
    border-radius: 50%;
    width: 400px;
    height: 400px;
    aspect-ratio: 1/1;
    object-fit: cover;
    margin-bottom: 1.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.palette-card h3 { margin-bottom: 0.5rem; }

/* ======================= Section 6: The Making Of ======================= */
#making-of {
    padding: 6rem 0;
    background: var(--off-white);
}
.making-of-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}
.making-of-card {
    position: relative;
    text-align: center;
}
.making-of-card img {
    border-radius: 8px;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    filter: grayscale(1);
    transition: all 0.3s ease;
}
.making-of-card:hover img {
    filter: grayscale(0);
    transform: scale(1.03);
}
.making-of-card h4 {
    margin-top: 1rem;
    color: var(--dark-blue);
}

/* ======================= Section 7: Gallery CTA ======================= */
#gallery-cta {
    padding: 6rem 0;
    text-align: center;
}
.gallery-cta-content {
    max-width: 600px;
    margin: 0 auto;
}
.gallery-cta-content h2 {
    font-size: 2.5rem;
}

/* ======================= Gallery Page Responsive ======================= */
@media (max-width: 992px) {
    .asymmetrical-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 250px;
    }
    .grid-item.wide { grid-column: span 1; }
    .palette-grid { grid-template-columns: 1fr; }
    .making-of-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .asymmetrical-grid { grid-template-columns: 1fr; }
    .grid-item.tall { grid-row: span 1; height: 350px; }
}
@media (max-width: 480px) {
    .making-of-grid { grid-template-columns: 1fr; }
}

/* ======================= Footer ======================= */
.site-footer-main {
    background-color: var(--dark-blue);
    color: var(--light-blue);
    padding-top: 4rem;
}
.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    padding-bottom: 3rem;
}
.footer-column h4 {
    font-family: var(--font-heading);
    color: white;
    margin-bottom: 1rem;
}
.footer-column p, .footer-column ul {
    font-size: 0.9rem;
    list-style: none;
}
.footer-column ul li {
    margin-bottom: 0.5rem;
}
.footer-column a {
    color: var(--light-blue);
}
.footer-column a:hover {
    color: white;
}
.social-links {
    display: flex;
    gap: 1rem;
}
.social-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--light-blue);
    border-radius: 50%;
    transition: all 0.3s ease;
}
.social-links a:hover {
    background-color: var(--teal);
    border-color: var(--teal);
    color: white;
}
.footer-bottom {
    border-top: 1px solid rgba(191, 215, 234, 0.2);
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.8rem;
}

/* ======================= Animation Classes ======================= */
[data-animation] {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in { transform: translateY(20px); }
.fade-in-up { transform: translateY(40px); }
.fade-in-left { transform: translateX(-40px); }
.fade-in-right { transform: translateX(40px); }
.zoom-in { transform: scale(0.9); }

.visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* ======================= Responsive Design ======================= */
@media (max-width: 992px) {
    .philosophy-container {
        flex-direction: column;
    }
    .collections-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    :root { --header-height: 70px; }
    .section-title { font-size: 2.2rem; }
    .hero-title { font-size: 3.5rem; }

    .nav-links {
        position: fixed;
        top: var(--header-height);
        left: -100%;
        width: 100%;
        height: calc(100vh - var(--header-height));
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: white;
        transition: left 0.3s ease-in-out;
    }
    .nav-links.active {
        left: 0;
    }
    .menu-toggle {
        display: block;
    }
    .menu-toggle.active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    
    .product-grid { grid-template-columns: 1fr; }
    .collections-grid { grid-template-columns: 1fr; }
    .footer-container { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .container { padding: 0 1rem; }
    .hero-title { font-size: 2.5rem; }
    .glass-box { padding: 2rem; }
    #philosophy, #featured-products, #collections, #testimonials, #newsletter { padding: 4rem 0; }
    .newsletter-form { flex-direction: column; }
    .footer-container { grid-template-columns: 1fr; text-align: center; }
    .social-links { justify-content: center; }
}

/* ==========================================================================
   LEGAL PAGE STYLES (Privacy Policy, Terms, etc.)
   ========================================================================== */

/* Hero Section */
.legal-hero {
    padding: 4rem 0;
    background-color: var(--dark-blue);
    text-align: center;
    color: white;
}

.legal-page-title {
    font-size: 3rem;
    color: white;
}

.legal-page-title::after { /* No underline for legal titles */
    display: none;
}

.legal-page-subtitle {
    font-size: 1.1rem;
    color: var(--light-blue);
    margin-top: 0.5rem;
}

/* Main Content Section */
.legal-content {
    padding: 4rem 0;
}

.legal-content-container {
    max-width: 800px; /* Optimal width for readability */
    margin: 0 auto;
}

.last-updated {
    font-style: italic;
    color: #777;
    margin-bottom: 3rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}

.legal-content article {
    margin-bottom: 3rem;
}

.legal-content h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--dark-blue);
}

.legal-content p, .legal-content li {
    line-height: 1.8;
    color: #444;
}

.legal-content ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.legal-content li {
    margin-bottom: 0.75rem;
}

.legal-content strong {
    color: var(--dark-blue);
}

@media (max-width: 768px) {
    .legal-page-title {
        font-size: 2.2rem;
    }
}

/* ==========================================================================
   UTILITY & THANK YOU PAGE STYLES
   ========================================================================== */

.utility-page-body {
    background-color: var(--off-white);
}

.thank-you-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
}

.thank-you-box {
    background: white;
    padding: clamp(2rem, 8vw, 4rem); /* Fluid padding */
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    text-align: center;
    max-width: 550px;
    width: 100%;
}

.thank-you-box h1 {
    font-size: clamp(2.5rem, 8vw, 3.5rem); /* Fluid font size */
    color: var(--dark-blue);
    margin: 1.5rem 0 1rem;
}

.thank-you-box p {
    color: #555;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}


/* ================== Checkmark SVG Animation ================== */
.checkmark-container {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

.checkmark-svg {
    width: 100%;
    height: 100%;
}

.checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--teal);
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 3;
    stroke: var(--teal);
    fill: none;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}


/* ================== Page Load Animation ================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-on-load {
    /* Apply the animation to the box */
    animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
}