/* ======================= IMPORTS & VARIABLES ======================= */

:root {
    --color-dark-blue: #001021;
    --color-teal: #034748;
    --color-bright-blue: #1481BA;
    --color-light-text: #F0F8FF;
    --color-light-text-muted: #cce4ff;

    --font-family: 'Poppins', sans-serif;
    --header-height: 4.5rem;
    --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ======================= BASE STYLES & RESET ======================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    background-color: var(--color-dark-blue);
    color: var(--color-light-text);
    line-height: 1.7;
    font-size: 16px;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    line-height: 1.2;
    color: var(--color-light-text);
    font-weight: 600;
}

ul {
    list-style: none;
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}
section
{
    overflow: hidden;
}

.section {
    padding: 6rem 0;
}

.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.section__title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.section__subtitle {
    font-size: 1.1rem;
    color: var(--color-light-text-muted);
    margin-bottom: 3rem;
    max-width: 600px;
}

.text-center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* ======================= REUSABLE COMPONENTS ======================= */
.btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    transition: var(--transition);
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
}

.btn--primary {
    background-color: var(--color-bright-blue);
    color: #fff;
}

.btn--primary:hover {
    background-color: transparent;
    border-color: var(--color-bright-blue);
    color: var(--color-bright-blue);
    transform: translateY(-3px);
}

.btn--secondary {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--color-dark-blue);
}

.btn--secondary:hover {
    background-color: transparent;
    border-color: #fff;
    color: #fff;
    transform: translateY(-3px);
}

/* ======================= HEADER & NAVIGATION ======================= */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    transition: var(--transition);
}

.header.scrolled {
    background-color: rgba(0, 16, 33, 0.8);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
}

.header__logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

.nav__list {
    display: flex;
    gap: 2rem;
}

.nav__link {
    font-weight: 600;
    position: relative;
    color: var(--color-light-text-muted);
    transition: color 0.3s;
}

.nav__link:hover, .nav__link.active {
    color: var(--color-light-text);
}

.nav__link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-bright-blue);
    transition: width 0.3s;
}

.nav__link:hover::after, .nav__link.active::after {
    width: 100%;
}

.nav__toggle {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.nav__toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: #fff;
    transition: var(--transition);
}

/* ======================= HERO SECTION ======================= */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('images/blueprint.webp') no-repeat center center/cover;
}

.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 20%, var(--color-dark-blue) 80%);
}

.hero__container {
    position: relative;
    z-index: 2;
}

.hero__content {
    max-width: 800px;
    margin: 0 auto;
}

.hero__title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    animation: fadeInDown 1s ease-out;
}

.hero__subtitle {
    font-size: 1.2rem;
    color: var(--color-light-text-muted);
    margin-bottom: 2rem;
    animation: fadeInUp 1s ease-out 0.3s;
    animation-fill-mode: backwards;
}

/* ======================= PHILOSOPHY SECTION ======================= */
/* =================================================================== */
/* ============== PHILOSOPHY SECTION (REIMAGINED) STYLES ============= */
/* =================================================================== */

.philosophy-reimagined {
    background: var(--color-dark-blue);
}

.philosophy-reimagined__container {
    position: relative; /* Context for layering */
}

/* The semi-transparent text box */
.philosophy-reimagined__text-content {
    background: rgba(3, 71, 72, 0.5); /* Semi-transparent teal */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(20, 129, 186, 0.2);
    padding: 2.5rem;
    border-radius: 10px;
    position: relative;
    z-index: 10;
    transition: var(--transition);
}

.philosophy-reimagined__intro {
    color: var(--color-light-text-muted);
    margin-bottom: 1.5rem;
}

/* Styling for the three pillars list */
.philosophy-reimagined__pillars {
    list-style: none;
    margin-bottom: 1.5rem;
}

.philosophy-reimagined__pillars li {
    font-weight: 600;
    font-size: 1.1rem;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.75rem;
}

.philosophy-reimagined__pillars li::before {
    content: '›';
    position: absolute;
    left: 0;
    top: -2px;
    font-size: 1.8rem;
    color: var(--color-bright-blue);
    line-height: 1;
}

/* The image container */
.philosophy-reimagined__image-content {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-top: -2rem; /* Pull image up slightly on mobile */
}

.philosophy-reimagined__img {
    width: 100%;
    object-fit: cover;
    height: 400px;
    transition: transform 0.5s ease-out;
}

/* Decorative frame using a pseudo-element */
.philosophy-reimagined__image-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-bright-blue);
    border-radius: 10px;
    z-index: 5;
    transform: translate(-10px, -10px);
    transition: var(--transition);
    opacity: 0.5;
}

/* --- DESKTOP LAYOUT (where the magic happens) --- */
@media screen and (min-width: 992px) {
    .philosophy-reimagined__container {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        align-items: center;
    }

    .philosophy-reimagined__text-content {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        /* THE OVERLAP: Push the text box to the right */
        transform: translateX(25%);
        box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    }
    
    .philosophy-reimagined__image-content {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        margin-top: 0; /* Reset mobile margin */
    }

    /* --- ENHANCED HOVER INTERACTIONS --- */
    .philosophy-reimagined__container:hover .philosophy-reimagined__text-content {
        transform: translateX(25%) scale(1.02); /* Slight lift */
        box-shadow: 0 25px 60px rgba(20, 129, 186, 0.2);
    }
    
    .philosophy-reimagined__container:hover .philosophy-reimagined__img {
        transform: scale(1.05); /* Zoom image */
    }

    .philosophy-reimagined__container:hover .philosophy-reimagined__image-content::before {
        transform: translate(15px, 15px); /* Animate the frame */
        opacity: 1;
    }
}
/* ======================= FEATURED COLLECTIONS SECTION ======================= */
.featured {
    background: linear-gradient(180deg, var(--color-dark-blue) 0%, var(--color-teal) 100%);
}

.featured__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.card {
    background: rgba(0, 16, 33, 0.5);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    transition: var(--transition);
    border: 1px solid rgba(255,255,255,0.1);
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(20, 129, 186, 0.3);
}

.card__image-wrapper {
    overflow: hidden;
    height: 250px;
}

.card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.card:hover .card__img {
    transform: scale(1.1);
}

.card__content {
    padding: 1.5rem;
}

.card__title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.card__description {
    color: var(--color-light-text-muted);
    margin-bottom: 1rem;
}

.card__link {
    font-weight: 600;
    color: var(--color-bright-blue);
    transition: var(--transition);
}

.card__link:hover {
    padding-left: 5px;
}

/* ======================= THE DIFFERENCE (GLASS MORPHISM) SECTION ======================= */
.difference {
    background:  no-repeat center center/cover;
}

.difference__card {
    background: rgba(0, 16, 33, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 3rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.difference__intro {
    max-width: 800px;
    margin-bottom: 3rem;
}

.difference__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2rem;
}

.difference__item-title {
    font-size: 1rem;
    color: var(--color-bright-blue);
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 25px;
}

.difference__item-title::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-bright-blue);
}

.difference__item p 
{
    font-size: 0.8rem;
}

/* ======================= TESTIMONIALS SECTION ======================= */
/* =================================================================== */
/* ================= TESTIMONIAL SLIDER REIMAGINED =================== */
/* =================================================================== */

.testimonials-reimagined {
    background-color: var(--color-dark-blue);
}

.testimonial-slider {
    position: relative;
    max-width: 900px;
    margin: 3rem auto 0;
    overflow: hidden; /* Crucial for hiding other slides */
}

.slider__wrapper {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Smooth, bouncy transition */
}

.slider__slide {
    flex: 0 0 100%; /* Each slide takes up 100% width and doesn't shrink */
    width: 100%;
    padding: 0 1rem; /* Space for box-shadow */
}

.testimonial-card-reimagined {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 2rem;
    align-items: center;
    background-color: var(--color-teal);
    padding: 2.5rem;
    border-radius: 10px;
    min-height: 250px;
}

.testimonial__image-container {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--color-bright-blue);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.testimonial__img-reimagined {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial__content {
    position: relative;
}

.testimonial__content::before {
    content: '“';
    position: absolute;
    top: -40px;
    left: -20px;
    font-size: 6rem;
    color: rgba(20, 129, 186, 0.1);
    font-weight: 700;
    z-index: 0;
    line-height: 1;
}

.testimonial__text-reimagined,
.testimonial__author-reimagined {
    position: relative;
    z-index: 1;
    opacity: 0; /* Hidden by default for animation */
    transform: translateY(20px);
    transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
}

.testimonial__text-reimagined {
    font-style: italic;
    font-size: 1.1rem;
    color: var(--color-light-text-muted);
    margin-bottom: 1rem;
}

.testimonial__author-reimagined {
    font-weight: 600;
    color: var(--color-light-text);
}

/* --- Animation for active slide --- */
.slider__slide.active-slide .testimonial__text-reimagined,
.slider__slide.active-slide .testimonial__author-reimagined {
    opacity: 1;
    transform: translateY(0);
}

/* --- Navigation Buttons --- */
.slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(20, 129, 186, 0.5);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    z-index: 10;
    transition: var(--transition);
}

.slider__btn:hover {
    background-color: var(--color-bright-blue);
}

.slider__btn--left {
    left: -50px; /* Positioned outside on larger screens */
}

.slider__btn--right {
    right: -50px;
}

/* --- Pagination Dots --- */
.slider__dots-container {
    text-align: center;
    margin-top: 2rem;
}

.slider__dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: var(--color-teal);
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.slider__dot.active-dot {
    background-color: var(--color-bright-blue);
    transform: scale(1.2);
}

/* --- Responsive Design --- */
@media screen and (max-width: 1024px) {
    .slider__btn--left { left: 10px; }
    .slider__btn--right { right: 10px; }
}

@media screen and (max-width: 768px) {
    .testimonial-card-reimagined {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.5rem;
        padding: 2rem;
        min-height: 0;
    }

    .testimonial__image-container {
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }

    .testimonial__content::before {
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
    }
}
/* ======================= PARALLAX CTA SECTION ======================= */
.parallax-cta {
    position: relative;
    background:  no-repeat center center/cover;
    background-attachment: fixed;
    text-align: center;
}

.parallax-cta__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 16, 33, 0.7);
}

.parallax-cta__container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.parallax-cta__content {
    max-width: 700px;
}

.parallax-cta__content p {
    font-size: 1.1rem;
    color: var(--color-light-text-muted);
    margin-bottom: 2rem;
}

/* ======================= NEWSLETTER SECTION ======================= */
.newsletter {
    background-color: var(--color-teal);
}

.newsletter__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    background: var(--color-dark-blue);
    padding: 4rem;
    border-radius: 15px;
}

.newsletter__form {
    display: flex;
    gap: 0.5rem;
}

.newsletter__input {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #034748;
    background-color: #001f3f;
    border-radius: 50px;
    color: #fff;
    font-family: inherit;
}
.newsletter__input::placeholder {
    color: var(--color-light-text-muted);
}
.newsletter__input:focus {
    outline: none;
    border-color: var(--color-bright-blue);
}

/* =================================================================== */
/* ======================= BEDS PAGE STYLES ========================== */
/* =================================================================== */

/* ======================= BEDS HERO SECTION ======================= */
.beds-hero {
    padding-top: calc(var(--header-height) + 4rem);
    padding-bottom: 4rem;
    background: linear-gradient(180deg, var(--color-dark-blue) 0%, #012135 100%);
}
.beds-hero__container {
    text-align: center;
}
.beds-hero__title {
    font-size: 3.5rem;
}
.beds-hero__subtitle {
    max-width: 700px;
    margin: 1rem auto 3rem;
    color: var(--color-light-text-muted);
}
.beds-hero__image-container {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    max-width: 1000px;
    margin: 0 auto;
}

/* =================================================================== */
/* ============= COLLECTIONS OVERVIEW REIMAGINED STYLES ============== */
/* =================================================================== */

/* =================================================================== */
/* ============= EXPANDING ACCORDION SLIDER REIMAGINED =============== */
/* =================================================================== */

.collections-accordion-reimagined .container {
    margin-bottom: 3rem;
}

.accordion-container {
    display: flex;
    flex-direction: column; /* Mobile: Stacked vertically */
    gap: 1rem;
}

.accordion-panel {
        position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    min-height: 400px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: inset -178px -260px 170px -10px rgba(0,16,33,0.9);
    transition: box-shadow 0.6s ease;
}

.accordion-panel h3 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.accordion-content {
    max-width: 400px;
}
.accordion-content p {
    color: var(--color-light-text-muted);
}

/* --- DESKTOP: The Horizontal Expanding Layout --- */
@media screen and (min-width: 992px) {
    .accordion-container {
        flex-direction: row; /* Desktop: Side-by-side */
        width: 100%;
        height: 75vh; /* A tall, dramatic height */
        gap: 1.5rem;
    }

    .accordion-panel {
        /* Default "collapsed" state */
        flex-basis: 15%; 
        border-radius: 20px;
        min-height: 100%;
        box-shadow: inset 0 0 0 2000px rgba(0,16,33,0.7); /* Darker overlay when collapsed */

        /* The key to the smooth expansion animation */
        transition: flex-basis 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), 
                    box-shadow 0.6s ease;
    }

    /* "Expanded" state, toggled by JS */
    .accordion-panel.is-active {
        flex-basis: 60%;
        box-shadow: inset 0 -300px 150px -80px rgba(0,16,33,0.9); /* Lighter overlay when active */
    }

    /* --- Sophisticated Text Styling for Desktop --- */
    .accordion-panel h3 {
        position: absolute;
        bottom: 2rem;
        left: 2rem;
        /* Vertical text for collapsed state */
        writing-mode: vertical-lr;
        transform: rotate(180deg);
        white-space: nowrap;
        font-size: 1.8rem;
        transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), 
                    writing-mode 0.1s step-end 0.1s;
    }
    
    .accordion-panel.is-active h3 {
        writing-mode: horizontal-tb;
        transform: rotate(0deg);
        transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), 
                    writing-mode 0.1s step-start;
    }

    .accordion-content {
        position: absolute;
        bottom: 2rem;
        left: 2rem;
        opacity: 0; /* Hidden by default */
        transform: translateY(20px);
        transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
    }

    .accordion-panel.is-active .accordion-content {
        opacity: 1;
        transform: translateY(-60px);
    }
}
/* ======================= PRODUCT SHOWCASE GRID SECTION ======================= */
.product-showcase {
    background-color: var(--color-dark-blue);
}
.product-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
}
.filter-btn {
    background-color: transparent;
    border: 1px solid var(--color-teal);
    color: var(--color-light-text-muted);
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}
.filter-btn:hover, .filter-btn.active {
    background-color: var(--color-bright-blue);
    border-color: var(--color-bright-blue);
    color: #fff;
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 2rem;
}
.product-card {
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--color-teal);
    position: relative;
    cursor: pointer;
}
.product-card.hide {
    display: none;
}
.product-card__img {
    height: 350px;
    width: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
.product-card:hover .product-card__img {
    transform: scale(1.1);
}
.product-card__info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0,16,33,0.9) 0%, transparent 100%);
    transform: translateY(30%);
    opacity: 0;
    transition: all 0.4s;
}
.product-card:hover .product-card__info {
    transform: translateY(0);
    opacity: 1;
}
.product-card__title {
    font-size: 1.5rem;
    color: #fff;
}
.product-card__collection {
    color: var(--color-light-text-muted);
    font-size: 0.9rem;
}
.product-card__price {
    display: block;
    margin-top: 1rem;
    font-weight: 600;
    color: var(--color-bright-blue);
}

/* ======================= ANATOMY OF A BED SECTION ======================= */
/* =================================================================== */
/* ================== ANATOMY SECTION REIMAGINED STYLES ============== */
/* =================================================================== */

/* The background pattern from the original design is kept */
.anatomy {
    position: relative;
    background-color: var(--color-teal);
    overflow: hidden;
}
.anatomy__bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(45deg, var(--color-dark-blue) 25%, transparent 25%), linear-gradient(-45deg, var(--color-dark-blue) 25%, transparent 25%);
    background-size: 20px 20px; opacity: 0.1;
}

/* --- Mobile First: Stacked Layout --- */
.anatomy-reimagined__container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.anatomy-reimagined__image-focus {
    order: -1; /* Place image on top on mobile */
    border-radius: 10px;
    overflow: hidden;
}

.anatomy-reimagined__image-focus img 
{
    width: 400px;
    height: 400px;
    object-fit: cover;
}

.anatomy-reimagined__text h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-light-text);
}


/* --- The Sophisticated List Styling --- */
.anatomy-reimagined__list {
    list-style: none;
    padding-left: 0;
    counter-reset: anatomy-counter; /* Initialize a counter */
}

.anatomy-reimagined__list li {
    position: relative;
    padding-left: 3.5rem; /* Space for the number */
    margin-bottom: 1.5rem;
}

.anatomy-reimagined__list li::before {
    counter-increment: anatomy-counter; /* Increment the counter */
    content: '0' counter(anatomy-counter); /* Display the counter with a leading zero */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-bright-blue);
    line-height: 1;
}

.anatomy-reimagined__list li strong {
    display: block;
    font-size: 1.1rem;
    color: var(--color-light-text);
}

.anatomy-reimagined__list li span {
    color: var(--color-light-text-muted);
    font-size: 0.95rem;
}


/* --- DESKTOP: The Horizontal "Text-Image-Text" Layout --- */
@media screen and (min-width: 992px) {
    .anatomy-reimagined__container {
        display: grid;
        /* Three columns: text | image | text */
        grid-template-columns: 1fr auto 1fr;
        gap: 3rem;
        align-items: center;
    }

    .anatomy-reimagined__image-focus {
        order: 0; /* Reset mobile order */
        padding: 1.5rem;
        background-color: var(--color-dark-blue);
        border-radius: 15px;
        box-shadow: 0 15px 40px rgba(0,0,0,0.4);
        transition: var(--transition);
    }
    
    .anatomy-reimagined__image-focus:hover {
        transform: scale(1.03);
        box-shadow: 0 20px 50px rgba(20, 129, 186, 0.2);
    }

    .anatomy-reimagined__image-focus img {
        border-radius: 8px;
    }

    .anatomy-reimagined__text--left {
        text-align: right; /* Align text towards the image */
    }

    .anatomy-reimagined__text--right {
        text-align: left; /* Align text away from the image */
    }

    .anatomy-reimagined__text--right h3 {
        text-align: left;
    }

    .anatomy-reimagined__text--right .anatomy-reimagined__list li::before {
        left: 0;
    }
}
/* ======================= CUSTOMIZATION SECTION ======================= */
.customization {
    background-color: var(--color-dark-blue);
}
.customization__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 3rem;
    text-align: left;
}
.customization__category h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}
.swatch-grid {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}
.swatch {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    border: 3px solid var(--color-teal);
    transition: var(--transition);
}
.swatch:hover {
    transform: scale(1.1);
    border-color: var(--color-bright-blue);
}
.swatch--wood {
    background-size: cover;
}
.swatch-name {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: var(--color-light-text-muted);
}

/* ======================= PAIRING SECTION ======================= */
/* =================================================================== */
/* =============== PAIRING SECTION REIMAGINED STYLES ================= */
/* =================================================================== */

.pairing-reimagined {
    position: relative; /* Context for the overlay */
    display: flex;
    align-items: center;
    min-height: 80vh; /* Give the section height */
    padding: 6rem 0;
    background: url('images/pairing.webp') no-repeat center center/cover;
}

/* Dark overlay to ensure text is readable */
.pairing-reimagined__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-dark-blue) 0%, rgba(0, 16, 33, 0.5) 100%);
    z-index: 1;
}

.pairing-reimagined__container {
    position: relative;
    z-index: 2; /* Ensures content is above the overlay */
}

/* The Glass Card */
.pairing-reimagined__card {
    background: rgba(0, 16, 33, 0.55); /* Semi-transparent dark blue */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(20, 129, 186, 0.2);
    border-radius: 15px;
    padding: 3rem;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}

.pairing-reimagined__tagline {
    display: block;
    font-weight: 600;
    color: var(--color-bright-blue);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.pairing-reimagined__card p {
    color: var(--color-light-text-muted);
    margin-bottom: 1rem;
}
.pairing-reimagined__card .btn {
    margin-top: 1.5rem;
}


/* --- DESKTOP: Asymmetrical Layout --- */
@media screen and (min-width: 992px) {
    .pairing-reimagined__card {
        /* On desktop, the card only takes up about half the screen and floats right */
        max-width: 50%;
        margin-left: auto;
        margin-right: 0;
    }
}

/* ======================= FAQ SECTION ======================= */
.faq {
    background-color: var(--color-teal);
}
.faq__accordion {
    max-width: 800px;
    margin: 0 auto;
}
.faq__item {
    border-bottom: 1px solid rgba(20, 129, 186, 0.3);
}
.faq__question {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 1.5rem 1rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-light-text);
    cursor: pointer;
    position: relative;
    padding-right: 2rem;
}
.faq__question::after {
    content: '+';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    transition: transform 0.3s;
}
.faq__item.active .faq__question::after {
    transform: translateY(-50%) 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 1rem 1.5rem;
    color: var(--color-light-text-muted);
}
.faq__item.active .faq__answer {
    max-height: 300px; /* Adjust as needed */
}


/* ======================= BEDS PAGE RESPONSIVE ======================= */
@media screen and (max-width: 992px) {
    .collection-detail, .anatomy__container, .pairing__container {
        grid-template-columns: 1fr;
    }
    .collection-detail__image {
        height: 300px;
    }
    .collection-detail:nth-child(odd) .collection-detail__image {
        order: 0; /* Stack images on top on mobile */
    }
    .anatomy__image-content {
        order: -1;
    }
    .customization__grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    .beds-hero__title { font-size: 2.5rem; }
    .product-filters {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .filter-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    .swatch-grid {
        gap: 1rem;
    }
    .swatch {
        width: 80px;
        height: 80px;
    }
}

/* =================================================================== */
/* ===================== MATERIALS PAGE STYLES ======================= */
/* =================================================================== */

/* ======================= MATERIALS HERO SECTION ======================= */
.materials-hero {
    padding: 8rem 0;
    background-color: var(--color-dark-blue);
}
.materials-hero__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
}
.materials-hero__title {
    font-size: 3.5rem;
}
.materials-hero__subtitle {
    font-size: 1.1rem;
    color: var(--color-light-text-muted);
    margin-top: 1rem;
    max-width: 500px;
}
.materials-hero__image {
    border-radius: 15px;
    overflow: hidden;
}

/* ======================= CORE PHILOSOPHY SECTION ======================= */
/* =================================================================== */
/* ============= CORE PHILOSOPHY REIMAGINED STYLES =================== */
/* =================================================================== */

.core-philosophy-reimagined {
    background: linear-gradient(180deg, var(--color-dark-blue) 0%, #01182a 100%);
}

.philosophy-grid-reimagined {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
    counter-reset: philosophy-counter; /* Initialize a CSS counter for the numbers */
}

.philosophy-item-reimagined {
    position: relative; /* Crucial for positioning the ::before pseudo-element */
    padding: 2.5rem;
    border-radius: 15px;
    background: linear-gradient(145deg, var(--color-teal) 0%, #023a3b 100%);
    border: 1px solid var(--color-teal);
    overflow: hidden; /* Contains the large number */
    text-align: left;
    z-index: 1;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* The giant number in the background */
.philosophy-item-reimagined::before {
    counter-increment: philosophy-counter; /* Add 1 to the counter for each item */
    content: '0' counter(philosophy-counter); /* Display counter with a leading zero */
    position: absolute;
    bottom: -20px;
    right: 10px;
    font-size: 10rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(0, 16, 33, 0.4);
    z-index: -1;
    transition: transform 0.4s ease, color 0.4s ease;
}

.philosophy-item-reimagined h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--color-light-text);
    transition: color 0.4s ease;
}

.philosophy-item-reimagined p {
    color: var(--color-light-text-muted);
}

/* --- The Sophisticated Hover Effect --- */
.philosophy-item-reimagined:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--color-bright-blue);
    /* The "Glow" effect */
    box-shadow: 0 10px 40px rgba(20, 129, 186, 0.25);
}

.philosophy-item-reimagined:hover h3 {
    color: var(--color-bright-blue);
}

.philosophy-item-reimagined:hover::before {
    color: rgba(20, 129, 186, 0.2);
    /* Subtle parallax movement */
    transform: translateY(-10px) translateX(-5px);
}

/* ======================= WOODS SHOWCASE (TABS) SECTION ======================= */
.woods-showcase {
    background-color: #01182a;
}
.woods-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
}
.tab-btn {
    padding: 0.8rem 2rem;
    border: 1px solid transparent;
    border-radius: 50px;
    background: var(--color-teal);
    color: var(--color-light-text);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.tab-btn:hover {
    background: #045f60;
}
.tab-btn.active {
    background: var(--color-bright-blue);
    color: #fff;
}
.woods-content {
    display: none; /* Hidden by default */
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    gap: 3rem;
    background-color: var(--color-dark-blue);
    padding: 3rem;
    border-radius: 15px;
}
.woods-content.active {
    display: grid; /* Shown when active */
}
.woods-content__image {
    border-radius: 10px;
    overflow: hidden;
    height: 300px;
}
.woods-content__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.woods-content__text h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

/* ======================= FABRICS SHOWCASE SECTION ======================= */
/* =================================================================== */
/* ============== FABRICS SHOWCASE REIMAGINED STYLES ================= */
/* =================================================================== */

.fabrics-showcase-reimagined {
    background-color: var(--color-teal);
}

.fabric-grid-reimagined {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.fabric-card-reimagined {
    position: relative; /* Context for absolute positioning of content */
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    min-height: 450px; /* Give the card a consistent height */
}

.fabric-card__visual {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.fabric-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.4s ease;
}

.fabric-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    padding: 1.5rem;
    
    /* Elegant reveal using max-height */
    max-height: 100%; /* Default state for mobile */
    overflow: hidden;
    
    background: rgba(0, 16, 33, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    
    transition: max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.fabric-card__content h3 {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

.fabric-card__content p {
    color: var(--color-light-text-muted);
    /* Hidden by default on desktop */
    opacity: 1; /* Visible on mobile */
    transition: opacity 0.4s ease 0.2s;
}

.fabric-card__prompt {
    display: none; /* Hidden on mobile */
    font-weight: 600;
    color: var(--color-bright-blue);
    margin-top: 0.5rem;
    transition: opacity 0.4s ease;
}

/* --- DESKTOP: Interactive Hover Effect --- */
@media screen and (min-width: 992px) {
    .fabric-card__content {
        /* On desktop, the card is collapsed by default */
        max-height: 100px; /* Only enough height for the title and prompt */
    }

    .fabric-card__content p {
        opacity: 0; /* Hide the paragraph text */
    }

    .fabric-card__prompt {
        display: block; /* Show the "Learn More" prompt */
    }

    /* The Hover State Interaction */
    .fabric-card-reimagined:hover .fabric-card__content {
        max-height: 50%; /* Expand to reveal the text */
    }
    
    .fabric-card-reimagined:hover .fabric-card__content p {
        opacity: 1; /* Fade in the paragraph */
    }

    .fabric-card-reimagined:hover .fabric-card__prompt {
        opacity: 0; /* Fade out the prompt */
    }

    .fabric-card-reimagined:hover .fabric-card__visual img {
        transform: scale(1.05); /* Zoom the background image */
        filter: brightness(0.8);
    }
}

/* ======================= UNSEEN COMPONENTS SECTION ======================= */
/* =================================================================== */
/* ============= UNSEEN COMPONENTS REIMAGINED STYLES ================= */
/* =================================================================== */

.unseen-components-reimagined {
    background-color: #000a14;
}

.unseen-reimagined__container {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: Single column */
    gap: 3rem;
    align-items: center;
}

.unseen-reimagined__features p {
    color: var(--color-light-text-muted);
}

.feature-list {
    margin-top: 2rem;
}

.feature-item {
    padding: 1.5rem;
    border-left: 3px solid var(--color-teal);
    margin-bottom: 1rem;
    cursor: pointer;
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

.feature-item h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-light-text);
}

.feature-item p {
    margin-bottom: 0;
}

/* --- The Visuals Container --- */
.unseen-reimagined__visuals {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    min-height: 400px; /* Give it a consistent height */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.unseen-reimagined__visuals img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Smooth cross-fade effect */
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}


/* --- The "is-active" state (controlled by JS) --- */

.feature-item.is-active {
    background-color: var(--color-dark-blue);
    border-left-color: var(--color-bright-blue);
}

.unseen-reimagined__visuals img.is-active {
    opacity: 1;
    transform: scale(1);
}

/* --- DESKTOP: Interactive Two-Column Layout --- */
@media screen and (min-width: 992px) {
    .unseen-reimagined__container {
        grid-template-columns: 1.2fr 1fr; /* Text gets a bit more space */
        gap: 5rem;
    }

    .feature-item:hover {
        background-color: var(--color-dark-blue);
    }
}

/* ======================= SUSTAINABILITY PARALLAX SECTION ======================= */
.sustainability-parallax {
    position: relative;
    background:  no-repeat center center/cover;
    background-attachment: fixed;
    text-align: center;
}
.sustainability__container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}
.sustainability__content {
    max-width: 800px;
    background: rgba(0, 16, 33, 0.7);
    padding: 2rem;
    border-radius: 10px;
    backdrop-filter: blur(5px);
}

/* ======================= SWATCH ORDER CTA SECTION ======================= */
.swatch-cta {
    background-color: var(--color-dark-blue);
}
.swatch-cta__container {
    background-color: var(--color-teal);
    padding: 4rem;
    border-radius: 15px;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: center;
    gap: 3rem;
}
.swatch-cta__form form {
    display: flex;
}
.swatch-cta__form input {
    width: 100%;
    padding: 0.8rem 1rem;
    border: none;
    border-radius: 50px 0 0 50px;
    background-color: #001f3f;
    color: #fff;
}
.swatch-cta__form input:focus {
    outline: 2px solid var(--color-bright-blue);
}
.swatch-cta__form button {
    border-radius: 0 50px 50px 0;
    white-space: nowrap;
}

/* ======================= MATERIALS PAGE RESPONSIVE ======================= */
@media screen and (max-width: 992px) {
    .materials-hero__container, .unseen__container, .swatch-cta__container {
        grid-template-columns: 1fr;
    }
    .materials-hero__text {
        text-align: center;
    }
    .woods-content {
        grid-template-columns: 1fr;
        padding: 2rem;
    }
}
@media screen and (max-width: 768px) {
    .materials-hero__title { font-size: 2.8rem; }
    .woods-tabs {
        flex-wrap: wrap;
    }
    .swatch-cta__form form {
        flex-direction: column;
        gap: 1rem;
    }
    .swatch-cta__form input, .swatch-cta__form button {
        border-radius: 50px;
    }
    .swatch-cta__container {
        text-align: center;
        padding: 2.5rem;
    }
}

/* =================================================================== */
/* ===================== PRODUCTION PAGE STYLES ====================== */
/* =================================================================== */

/* ======================= PRODUCTION HERO SECTION ======================= */
.production-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    color: #fff;
}
.production-hero__bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 16, 33, 0.9) 0%, rgba(0, 16, 33, 0.4) 100%),  no-repeat center center/cover;
    z-index: -1;
}
.production-hero__content {
    max-width: 600px;
}
.production-hero__title {
    font-size: 3.5rem;
}

/* ======================= BLUEPRINT & DESIGN SECTION ======================= */
/* =================================================================== */
/* ============= GENESIS SECTION REIMAGINED STYLES =================== */
/* =================================================================== */

.genesis-reimagined {
    background-color: var(--color-teal);
}

.genesis-reimagined__container {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: Single column */
    gap: 3rem;
    align-items: center;
}

.genesis-reimagined__text p {
    color: var(--color-light-text-muted);
    margin-bottom: 1rem;
}

/* The container for the interactive part */
.genesis-visuals {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    aspect-ratio: 16 / 10; /* Maintain a consistent shape */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Base styles for both images */
.genesis-visuals__reality,
.genesis-visuals__blueprint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The blueprint image needs a wrapper for the clip-path to work smoothly */
.genesis-visuals__blueprint-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* This will be controlled by JS */
    clip-path: inset(0 50% 0 0);
}

.genesis-visuals__blueprint {
    filter: grayscale(1) contrast(200%) brightness(0.7); /* Stylize the blueprint */
    mix-blend-mode: screen; /* Cool blend mode for a technical look */
}

/* --- The Interactive Slider --- */

/* Hide the default slider */
.genesis-slider {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    cursor: ew-resize; /* East-West resize cursor */
    z-index: 10;
    margin: 0;
}
.genesis-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 40px; /* Large invisible clickable area */
    height: 100%;
}
.genesis-slider::-moz-range-thumb {
    width: 40px;
    height: 100%;
}

/* Custom visual handle */
.genesis-slider__handle {
    position: absolute;
    top: 50%;
    left: 50%; /* Initial position, controlled by JS */
    transform: translate(-50%, -50%);
    width: 3px;
    height: 100%;
    background-color: rgba(255,255,255,0.7);
    pointer-events: none; /* Can't be clicked */
    z-index: 5;
    box-shadow: 0 0 10px rgba(20, 129, 186, 0.5);
}

.genesis-slider__arrows {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-bright-blue);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: white;
}
.genesis-slider__arrows::before,
.genesis-slider__arrows::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
}
.genesis-slider__arrows::before { /* Left arrow */
    border-width: 6px 8px 6px 0;
    border-color: transparent white transparent transparent;
}
.genesis-slider__arrows::after { /* Right arrow */
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent white;
}

/* --- DESKTOP: Two-Column Layout --- */
@media screen and (min-width: 992px) {
    .genesis-reimagined__container {
        grid-template-columns: 1fr 1.2fr; /* Give visuals slightly more space */
    }
}

/* ======================= PROCESS TIMELINE SECTION ======================= */
.process-timeline {
    background-color: var(--color-dark-blue);
}
.timeline {
    position: relative;
    max-width: 800px;
    margin: 3rem auto;
}
.timeline::after {
    content: '';
    position: absolute;
    width: 3px;
    background-color: var(--color-teal);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1.5px;
}
.timeline__item {
    padding: 1rem 3rem;
    position: relative;
    width: 50%;
}
.timeline__item::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    background-color: var(--color-bright-blue);
    border: 3px solid var(--color-dark-blue);
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}
.timeline__item:nth-child(odd) {
    left: 0;
}
.timeline__item:nth-child(even) {
    left: 50%;
}
.timeline__item:nth-child(even)::after {
    left: -10px;
}
.timeline__content {
    padding: 1.5rem;
    background-color: var(--color-teal);
    border-radius: 8px;
    position: relative;
}
.timeline__image {
    margin-top: 1rem;
    border-radius: 5px;
}

/* ======================= CRAFTSMANSHIP SPOTLIGHT SECTION ======================= */
.craftsmanship-spotlight {
    background: linear-gradient(180deg, var(--color-dark-blue) 0%, #012135 100%);
}
.craft__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.craft__image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.craft__image-grid img {
    border-radius: 8px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.craft__image-grid img:nth-child(2) {
    margin-top: 2rem;
}

/* ======================= THE FINISHING TOUCH SECTION ======================= */
.finishing-touch {
    background-color: #012135;
}
.finishing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.finishing-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
.finishing-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}
.finishing-item__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem 1.5rem;
    background: linear-gradient(to top, rgba(0,16,33,1) 0%, transparent 100%);
    opacity: 0;
    transform: translateY(20px);
    transition: var(--transition);
}
.finishing-item:hover .finishing-item__overlay {
    opacity: 1;
    transform: translateY(0);
}
.finishing-item:hover img {
    transform: scale(1.1);
}

/* ======================= QUALITY CONTROL SECTION ======================= */
/* =================================================================== */
/* ============== QUALITY CONTROL REIMAGINED STYLES ================== */
/* =================================================================== */

.quality-control-reimagined {
    background-color: var(--color-dark-blue);
}

/* The main "clipboard" or "report" element */
.qc-reimagined__report {
    background-color: #000a14;
    border: 1px solid var(--color-teal);
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    overflow: hidden; /* Important for containing the child elements */
}

.qc-reimagined__image-header {
    height: 300px;
}
.qc-reimagined__image-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qc-reimagined__content {
    padding: 2rem;
}

/* --- The sophisticated checklist styling --- */
.qc-reimagined__checklist {
    list-style: none;
    padding-left: 0;
    margin: 2rem 0;
}

.qc-reimagined__checklist li {
    position: relative;
    padding: 1rem 1rem 1rem 2.5rem;
    border-bottom: 1px solid var(--color-teal);
    color: var(--color-light-text-muted);
    transition: background-color 0.3s ease;
}
.qc-reimagined__checklist li:last-child {
    border-bottom: none;
}

/* Custom-styled checkmark */
.qc-reimagined__checklist li::before {
    content: '✓';
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-bright-blue);
    font-size: 1.5rem;
    font-weight: bold;
}

.qc-reimagined__checklist li:hover {
    background-color: rgba(3, 71, 72, 0.3);
}


/* --- The "Seal of Approval" stamp --- */
.qc-reimagined__seal {
    margin-top: 2rem;
    padding: 1.5rem;
    border: 2px dashed var(--color-bright-blue);
    border-radius: 10px;
    text-align: center;
    background-color: rgba(20, 129, 186, 0.05);
}
.qc-reimagined__seal p {
    margin: 0;
    color: var(--color-light-text-muted);
}
.qc-reimagined__seal strong {
    color: var(--color-light-text);
}
.qc-reimagined__seal-icon {
    display: block;
    font-size: 2rem;
    color: var(--color-bright-blue);
    margin-bottom: 0.5rem;
}


/* --- DESKTOP: Sophisticated Two-Column Report Layout --- */
@media screen and (min-width: 992px) {
    .qc-reimagined__report {
        display: grid;
        grid-template-columns: 1fr 1.5fr; /* Image column | Text column */
    }

    .qc-reimagined__image-header {
        grid-column: 1 / 2;
        height: 100%; /* Image takes full height of the grid cell */
    }

    .qc-reimagined__content {
        grid-column: 2 / 3;
        padding: 3rem;
    }
}

/* ======================= ARTISANS CTA SECTION ======================= */
/* =================================================================== */
/* =============== ARTISANS CTA REIMAGINED STYLES ==================== */
/* =================================================================== */

.artisans-cta-reimagined {
    background: var(--color-teal);
    padding: 6rem 0;
}

.artisan-card {
    position: relative; /* Context for the gradient border pseudo-element */
    display: flex;
    flex-direction: column; /* Mobile: Stack vertically */
    align-items: center;
    text-align: center;
    
    background-color: var(--color-dark-blue);
    padding: 2rem;
    border-radius: 15px;
    text-decoration: none;
    z-index: 1;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* --- The Modern Gradient Border --- */
.artisan-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
    /* Create a 1px border by slightly enlarging the pseudo-element */
    padding: 1px; 
    background: linear-gradient(135deg, var(--color-teal), var(--color-bright-blue));
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out; 
    mask-composite: exclude; 
    z-index: -1;
}

.artisan-card__image-wrapper {
    margin-bottom: 2rem;
}

.artisan-card__portrait {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--color-dark-blue); /* Creates a cutout effect */
}

.artisan-card .section__title {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.artisan-card p {
    color: var(--color-light-text-muted);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.artisan-card__action {
    margin-top: 1.5rem;
    font-weight: 600;
    color: var(--color-bright-blue);
    transition: transform 0.3s ease;
}


/* --- Hover Effect --- */
.artisan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(20, 129, 186, 0.2);
}
.artisan-card:hover .artisan-card__action {
    transform: translateX(5px);
}


/* --- DESKTOP: Sophisticated "Punch-Out" Layout --- */
@media screen and (min-width: 992px) {
    .artisan-card {
        display: grid;
        grid-template-columns: auto 1fr; /* Image size | Remaining space */
        align-items: center;
        text-align: left;
        padding: 3rem 4rem;
    }

    /* The key to the "punch-out" effect */
    .artisan-card__image-wrapper {
        margin-right: 4rem;
        margin-left: -7rem; /* Pulls the image outside the card's padding */
        margin-bottom: 0;
    }

    .artisan-card__portrait {
        width: 180px;
        height: 180px;
    }

    .artisan-card p {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ======================= PRODUCTION PAGE RESPONSIVE ======================= */
@media screen and (max-width: 992px) {
    .blueprint__container, .craft__container, .qc__container {
        grid-template-columns: 1fr;
    }
    .blueprint__text {
        order: 0;
    }
}

@media screen and (max-width: 768px) {
    .production-hero { min-height: 60vh; }
    .production-hero__title { font-size: 2.8rem; }
    
    .timeline::after {
        left: 20px;
    }
    .timeline__item {
        width: 100%;
        padding-left: 50px;
        padding-right: 1rem;
    }
    .timeline__item:nth-child(even) {
        left: 0;
    }
    .timeline__item::after {
        left: 10px;
    }
    .craft__image-grid
    {
        display: block;
    }
}

/* =================================================================== */
/* ======================== SIZING PAGE STYLES ======================= */
/* =================================================================== */

/* ======================= SIZING HERO SECTION ======================= */
.sizing-hero {
    background: linear-gradient(rgba(0,16,33,0.7), rgba(0,16,33,0.7)),  no-repeat center center/cover;
    text-align: center;
    color: #fff;
    padding: 8rem 0;
}
.sizing-hero__content {
    max-width: 800px;
    margin: 0 auto;
}
.sizing-hero__title {
    font-size: 3.5rem;
}

/* ======================= SIZE CHART SECTION ======================= */
/* =================================================================== */
/* ============= INFINITE TICKER SLIDER REIMAGINED STYLES ============ */
/* =================================================================== */

.size-chart-reimagined {
    background-color: var(--color-dark-blue);
    padding-bottom: 6rem;
}

.size-ticker-slider {
    position: relative;
    width: 100%;
    overflow: hidden; /* This hides the parts of the track that are off-screen */
    margin-top: 3rem;
    -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);
}

.ticker-track {
    display: flex;
    /* The width will be set by JS, but this ensures it has room */
    width: fit-content; 
    /* The animation will be applied here by JS */
    will-change: transform;
}

/* The pause on hover is a critical UX feature */
.size-ticker-slider:hover .ticker-track {
    animation-play-state: paused;
}

@keyframes ticker-scroll {
    from {
        transform: translateX(0);
    }
    to {
        /* This moves the track exactly the width of the original set of slides */
        transform: translateX(-50%);
    }
}

.ticker-slide {
    flex-shrink: 0;
    width: 340px; /* Fixed width for each card */
    padding: 0 1rem;
}

/* --- Card Styling --- */
.size-card-reimagined {
    height: 400px;
    background-color: var(--color-teal);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid transparent;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    transition: var(--transition);
}

.size-card-reimagined:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(20, 129, 186, 0.2);
    border-color: var(--color-bright-blue);
}

/* Card Content (same as before) */
.size-card__img { height: 200px; width: 100%; object-fit: cover; }
.size-card__info { padding: 1.5rem; }
.size-card__info h3 { font-size: 1.5rem; color: var(--color-light-text); }
.size-card__dims { font-weight: 600; color: var(--color-bright-blue); margin: 0.5rem 0; }
.size-card__desc { color: var(--color-light-text-muted); font-size: 0.9rem; }

@media screen and (max-width: 768px) {
    .ticker-slide { width: 300px; }
}
/* ======================= MEASURE YOUR SPACE SECTION ======================= */
.measure-guide {
    background-color: var(--color-teal);
}
.measure-guide__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.measure-steps {
    list-style-type: decimal;
    padding-left: 1.5rem;
    margin-top: 1.5rem;
}
.measure-steps li {
    margin-bottom: 1rem;
    color: var(--color-light-text-muted);
}
.measure-guide__image img {
    border-radius: 10px;
    width: 100%;
    height: 400px;
    object-fit: cover;
}

/* ======================= BEYOND DIMENSIONS SECTION ======================= */
.beyond-dimensions {
    background: linear-gradient(180deg, var(--color-teal) 0%, var(--color-dark-blue) 100%);
}
.beyond-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
}
.beyond-card {
    background: rgba(0, 16, 33, 0.5);
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
}
.beyond-card img {
    border-radius: 8px;
    width: 100%;
    height: 250px;
    object-fit: cover;
    margin-bottom: 1.5rem;
}
.beyond-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* ======================= VISUAL COMPARISON SECTION ======================= */
.visual-comparison {
    position: relative;
    background:  no-repeat center center/cover;
    background-attachment: fixed;
    text-align: center;
    color: #fff;
}
.visual-comparison__container {
    position: relative;
    z-index: 2;
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.visual-comparison__content {
    max-width: 700px;
    background: rgba(0, 16, 33, 0.7);
    padding: 2rem;
    border-radius: 10px;
    backdrop-filter: blur(5px);
}

/* ======================= INTERNATIONAL SIZING SECTION ======================= */
.international-sizing {
    background-color: var(--color-dark-blue);
}
.international-table-container {
    overflow-x: auto;
    margin-top: 3rem;
}
.international-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    text-align: center;
}
.international-table th, .international-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--color-teal);
}
.international-table th {
    color: var(--color-bright-blue);
    font-size: 1.1rem;
}
.international-table td {
    color: var(--color-light-text-muted);
}
.international-table tbody tr:hover {
    background-color: rgba(3, 71, 72, 0.3);
}
.table-note {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--color-light-text-muted);
}

/* ======================= SIZING HELP CTA SECTION ======================= */
.sizing-cta {
    background-color: var(--color-teal);
}
.sizing-cta__container {
    padding: 4rem 2rem;
    text-align: center;
}
.sizing-cta__content {
    max-width: 700px;
    margin: 0 auto;
}
.sizing-cta__content p {
    margin: 1rem 0 2rem;
    color: var(--color-light-text-muted);
}

/* ======================= SIZING PAGE RESPONSIVE ======================= */
@media screen and (max-width: 992px) {
    .measure-guide__container {
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width: 768px) {
    .sizing-hero__title { font-size: 2.8rem; }
    .size-chart__grid { grid-template-columns: 1fr; }
    .beyond-grid { grid-template-columns: 1fr; }
}

/* =================================================================== */
/* ======================= COMPANY PAGE STYLES ======================= */
/* =================================================================== */

/* ======================= COMPANY HERO SECTION ======================= */
.company-hero {
    background: var(--color-dark-blue);
    padding: 8rem 0;
    text-align: center;
}
.company-hero__container {
    max-width: 800px;
    margin: 0 auto;
    border-left: 3px solid var(--color-bright-blue);
    border-right: 3px solid var(--color-bright-blue);
    padding: 0 2rem;
}
.company-hero__title {
    font-size: 3.5rem;
}

/* ======================= FOUNDER'S STORY SECTION ======================= */
/* =================================================================== */
/* ======== FOUNDER'S STORY REIMAGINED STYLES (SPLIT LAYOUT) ========= */
/* =================================================================== */

.founder-story-reimagined-split {
    /* No padding on the section itself to allow for full-bleed layout */
    padding: 0;
    background-color: var(--color-dark-blue);
}

.split-container {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: Single column */
}

/* --- The Image Side --- */
.split-image-side {
    min-height: 400px;
    background-image: linear-gradient(to top, var(--color-dark-blue) 0%, rgba(0, 16, 33, 0.3) 100%), 
                      ;
    background-size: cover;
    background-position: center 30%; /* Focus on the upper part of the image */
}

/* --- The Text Side --- */
.split-text-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.split-text-content {
    max-width: 500px;
}

.split-subtitle {
    display: block;
    font-weight: 600;
    color: var(--color-bright-blue);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.split-text-content p {
    color: var(--color-light-text-muted);
    margin-bottom: 1rem;
}


/* --- DESKTOP: The Dramatic Split-Screen Layout --- */
@media screen and (min-width: 992px) {
    .founder-story-reimagined-split {
        /* Ensure the section takes up a significant portion of the screen height */
        min-height: 90vh;
    }

    .split-container {
        grid-template-columns: 1fr 1fr; /* Two equal columns */
        min-height: 90vh;
    }

    .split-image-side {
        min-height: 100%; /* Image side takes the full height of the container */
        /* Change gradient direction for side-by-side layout */
        background-image: linear-gradient(to right, transparent 0%, var(--color-dark-blue) 100%), 
                          url('images/founder.webp');
    }

    .split-text-side {
        padding: 4rem;
    }
}

/* ======================= MEET THE TEAM SECTION ======================= */
.team-section {
    background-color: var(--color-teal);
}
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}
.team-member {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}
.team-member img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    transition: var(--transition);
}
.team-member:hover img {
    transform: scale(1.05);
    filter: brightness(0.7);
}
.team-member__info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem;
    color: #fff;
    transform: translateY(100%);
    transition: var(--transition);
    background: linear-gradient(to top, var(--color-dark-blue) 0%, transparent 100%);
}
.team-member__info h3 {
    font-size: 1.3rem;
}
.team-member__info p {
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.team-member:hover .team-member__info {
    transform: translateY(0);
}
.team-member:hover .team-member__info p {
    opacity: 1;
}

/* ======================= WORKSHOP PARALLAX SECTION ======================= */
.workshop-studio {
    position: relative;
    background:  no-repeat center center/cover;
    background-attachment: fixed;
    text-align: center;
}
.workshop-studio__container {
    min-height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}
.workshop-studio__content {
    max-width: 700px;
}

/* ======================= CORE VALUES SECTION ======================= */
/* =================================================================== */
/* ================== SMOOTH TABS REIMAGINED STYLES ================== */
/* =================================================================== */

.core-values-reimagined {
    background-color: var(--color-dark-blue);
}

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

/* --- Tab Navigation --- */
.tabs__nav {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-bottom: 1px solid var(--color-teal);
}

.tabs__btn {
    flex: 1;
    padding: 1rem 1.5rem;
    background: none;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-light-text-muted);
    cursor: pointer;
    transition: color 0.3s ease;
}

.tabs__btn.active {
    color: var(--color-light-text);
}

/* The smooth sliding active line */
.tabs__active-line {
    position: absolute;
    bottom: -1px; /* Sits on top of the border */
    height: 3px;
    background-color: var(--color-bright-blue);
    transition: left 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), width 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}


/* --- Tab Content --- */
.tabs__content {
    margin-top: 3rem;
    position: relative;
    min-height: 350px; /* Prevent layout shift during transitions */
}

.tabs__pane {
    position: absolute; /* Stack all panes on top of each other */
    top: 0;
    left: 0;
    width: 100%;
    
    display: grid;
    grid-template-columns: 1fr; /* Mobile: Single column */
    gap: 2rem;
    align-items: center;
    
    /* Smooth fade and slide transition */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    visibility: hidden;
}

.tabs__pane.active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.tabs__pane-image {
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
}

.tabs__pane-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tabs__pane-text h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
}
.tabs__pane-text p {
    color: var(--color-light-text-muted);
}


/* --- Responsive Design --- */
@media screen and (min-width: 768px) {
    .tabs__pane {
        grid-template-columns: 1.5fr 1fr; /* Image | Text */
        gap: 4rem;
    }
    .tabs__pane:nth-child(even) .tabs__pane-image {
        order: 1; /* Alternate image position */
    }
}
/* ======================= SUSTAINABILITY COMMITMENT SECTION ======================= */
.sustainability-focus {
    background-color: var(--color-teal);
}
.sustainability-focus__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
}
.sustainability-focus__image img {
    border-radius: 10px;
    height: 400px;
    object-fit: cover;
    width: 100%;
}
.sustainability-focus__text {
    border-left: 3px solid var(--color-bright-blue);
    padding-left: 2rem;
}

/* ======================= CAREERS & FUTURE CTA SECTION ======================= */
.company-future {
    background:  no-repeat center center/cover;
}
.company-future__container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.company-future__card {
    background: rgba(0, 16, 33, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 3rem;
    text-align: center;
    max-width: 700px;
}
.company-future__card p {
    margin: 1rem 0 2rem;
}

/* ======================= COMPANY PAGE RESPONSIVE ======================= */
@media screen and (max-width: 992px) {
    .founder-story__container, .sustainability-focus__container {
        grid-template-columns: 1fr;
    }
    .founder-story__image {
        max-width: 400px;
        margin: 0 auto;
    }
    .founder-story__text {
        text-align: center;
    }
    .split-image-side
    {
        display: none   ;
    }
}
@media screen and (max-width: 768px) {
    .company-hero__title { font-size: 2.8rem; }
}

/* =================================================================== */
/* ======================== PHOTOS PAGE STYLES ======================= */
/* =================================================================== */

/* ======================= PHOTOS HERO SECTION ======================= */
.photos-hero {
    background: linear-gradient(rgba(0,16,33,0.7), rgba(0,16,33,0.7)),  no-repeat top center/cover;
    min-height: 80vh;
    display: flex;
    align-items: center;
    text-align: center;
}
.photos-hero__container {
    max-width: 800px;
    margin: 0 auto;
}
.photos-hero__title {
    font-size: 3.5rem;
}

/* ======================= MASONRY GALLERY SHOWCASE ======================= */
.gallery-showcase {
    background-color: var(--color-dark-blue);
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-auto-rows: 250px;
    gap: 1rem;
    margin-top: 3rem;
}
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s, filter 0.4s;
}
.gallery-item:hover img {
    transform: scale(1.05);
    filter: brightness(0.6);
}
.gallery-item--tall {
    grid-row: span 2;
}
.gallery-item--large {
    grid-column: span 2;
}
.gallery-item__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    color: #fff;
    font-weight: 600;
    opacity: 0;
    transform: translateY(20px);
    transition: var(--transition);
}
.gallery-item:hover .gallery-item__overlay {
    opacity: 1;
    transform: translateY(0);
}

/* ======================= COLLECTION FOCUS SECTION ======================= */
.collection-focus {
    background: linear-gradient(180deg, var(--color-dark-blue) 0%, var(--color-teal) 100%);
}
.collection-focus__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}
.collection-focus__image-sticky {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
    border-radius: 10px;
    overflow: hidden;
}

/* ======================= DETAIL SPOTLIGHT (HORIZONTAL SCROLL) ======================= */
.detail-spotlight {
    background-color: var(--color-teal);
}
.detail-scroller {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 1.5rem; /* For scrollbar */
    scroll-snap-type: x mandatory;
}
/* Subtle scrollbar styling */
.detail-scroller::-webkit-scrollbar {
    height: 8px;
}
.detail-scroller::-webkit-scrollbar-track {
    background: var(--color-dark-blue);
    border-radius: 10px;
}
.detail-scroller::-webkit-scrollbar-thumb {
    background: var(--color-bright-blue);
    border-radius: 10px;
}
.detail-card {
    flex: 0 0 300px; /* Don't grow, don't shrink, base width */
    scroll-snap-align: start;
}
.detail-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
}
.detail-card__caption {
    margin-top: 1rem;
    font-size: 0.9rem;
    text-align: center;
    color: var(--color-light-text-muted);
}

/* ======================= CUSTOMER HOMES SECTION ======================= */
.customer-homes {
    background-color: var(--color-dark-blue);
}
.customer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
}
.customer-photo {
    background-color: #000a14;
    padding: 1rem;
    border-radius: 5px;
    border: 1px solid var(--color-teal);
}
.customer-photo img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 3px;
}
.customer-photo blockquote {
    margin-top: 1rem;
    font-style: italic;
    color: var(--color-light-text-muted);
    border-left: 3px solid var(--color-bright-blue);
    padding-left: 1rem;
}

/* ======================= BEHIND THE SCENES PARALLAX ======================= */
.bts-parallax {
    position: relative;
    background:  no-repeat center center/cover;
    background-attachment: fixed;
    text-align: center;
}
.bts-parallax__container {
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}
.bts-parallax__content {
    max-width: 700px;
}

/* ======================= SHARE YOUR STYLE CTA ======================= */
.share-style-cta {
    background-color: var(--color-teal);
    text-align: center;
}
.share-style-cta__container p {
    font-size: 1.2rem;
    color: var(--color-light-text-muted);
}
.share-style-cta__hashtag {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-bright-blue);
    margin: 2rem 0;
    border: 2px dashed var(--color-bright-blue);
    display: inline-block;
    padding: 0.5rem 1.5rem;
}

/* ======================= PHOTOS PAGE RESPONSIVE ======================= */
@media screen and (max-width: 992px) {
    .collection-focus__container {
        grid-template-columns: 1fr;
    }
    .collection-focus__image-sticky {
        position: static; /* Unstick the image */
    }
    .collection-focus__image-sticky img 
    {
        width: 100%;
        height: 400px;
        object-fit: cover;
    }
    .customer-grid {
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width: 768px) {
    .photos-hero__title { font-size: 2.8rem; }
    .gallery-grid {
        grid-auto-rows: 200px;
    }
    .gallery-item--large {
        grid-column: span 1; /* Stack large items on mobile */
    }
    .share-style-cta__hashtag {
        font-size: 1rem;
    }
}

/* ======================= FOOTER ======================= */
.footer {
    background-color: #000a14;
    padding-top: 5rem;
    font-size: 0.9rem;
}

.footer__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    padding-bottom: 3rem;
}

.footer__logo {
    font-size: 1.5rem;
    font-weight: 700;
    display: block;
    margin-bottom: 1rem;
}

.footer__title {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: #fff;
}

.footer__list li {
    margin-bottom: 0.5rem;
}

.footer__list a {
    color: var(--color-light-text-muted);
    transition: var(--transition);
}

.footer__list a:hover {
    color: var(--color-bright-blue);
    padding-left: 5px;
}

.footer__bottom {
    border-top: 1px solid var(--color-teal);
    padding: 1.5rem 0;
    text-align: center;
    color: var(--color-light-text-muted);
}

/* ======================= SCROLL-TRIGGERED ANIMATIONS ======================= */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in {
    transform: translateY(30px);
}
.slide-up {
    transform: translateY(50px);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

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

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ======================= RESPONSIVE DESIGN ======================= */
@media screen and (max-width: 992px) {
    .section__title { font-size: 1.5rem; }
    .hero__title { font-size: 2.8rem; }
    
    .philosophy__container { grid-template-columns: 1fr; }
    .philosophy__image-content { margin-bottom: 2rem; }
    .testimonials__grid { grid-template-columns: 1fr; }
    .newsletter__container { grid-template-columns: 1fr; text-align: center; }
}

@media screen and (max-width: 880px) {
    body { font-size: 15px; }
    .section { padding: 4rem 0; }
    
    .nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 60%;
        height: 100vh;
        background-color: var(--color-teal);
        transition: var(--transition);
        padding: 6rem 2rem 2rem;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }
    .nav.active {
        right: 0;
    }
    .nav__list {
        flex-direction: column;
        gap: 2.5rem;
    }
    .nav__toggle {
        display: flex;
        z-index: 101;
    }
    .nav__toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .nav__toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .nav__toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .hero__title { font-size: 2.2rem; }
    .newsletter__form { flex-direction: column; }
    .footer__container { text-align: center; }
    .footer__col { margin-bottom: 2rem; }
}

/* =================================================================== */
/* ================== LEGAL & GENERIC PAGE STYLES ==================== */
/* =================================================================== */

/* --- Simple Page Hero for secondary pages --- */
.page-hero {
    background-color: var(--color-teal);
    text-align: center;
    padding: 6rem 0;
}
.page-hero__title {
    font-size: 3rem;
}
.page-hero__subtitle {
    font-size: 1.1rem;
    color: var(--color-light-text-muted);
    margin-top: 0.5rem;
}

/* --- Content Styling for Legal Pages --- */
.legal-content {
    background-color: var(--color-dark-blue);
}
.legal-content__wrapper {
    max-width: 800px; /* Optimal width for readability */
    margin: 0 auto;
    background-color: #000a14;
    padding: 2rem 3rem;
    border-radius: 10px;
    border: 1px solid var(--color-teal);
}
.legal-content__last-updated {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--color-light-text-muted);
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--color-teal);
    padding-bottom: 1rem;
}

.legal-content article {
    margin-bottom: 2.5rem;
}
.legal-content h2 {
    font-size: 1.8rem;
    color: var(--color-bright-blue);
    margin-bottom: 1rem;
}
.legal-content p, .legal-content li {
    line-height: 1.8;
    color: var(--color-light-text-muted);
}
.legal-content ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-top: 1rem;
}
.legal-content li {
    margin-bottom: 0.75rem;
}
.legal-content .btn {
    margin-top: 1rem;
}

@media screen and (max-width: 768px) {
    .page-hero__title { font-size: 2.5rem; }
    .legal-content__wrapper { padding: 1.5rem; }
    .legal-content h2 { font-size: 1.5rem; }
}

/* =================================================================== */
/* ====================== THANK YOU PAGE STYLES ====================== */
/* =================================================================== */

.thank-you__main {
    background-color: var(--color-dark-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    /* Ensure it takes up vertical space between header and footer */
    min-height: calc(100vh - var(--header-height) - 180px); /* Adjust 180px if footer height changes */
    padding: 4rem 1.5rem;
}

.thank-you__box {
    max-width: 600px;
    padding: 3rem;
    text-align: center;
    background: rgba(3, 71, 72, 0.4); /* Semi-transparent teal */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--color-teal);
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.thank-you__title {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 1rem;
}

.thank-you__text {
    color: var(--color-light-text-muted);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.thank-you__box .btn {
    margin-top: 1rem;
}

/* --- Animated SVG Checkmark --- */
.thank-you__checkmark-container {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem auto;
}

.checkmark__svg {
    width: 100%;
    height: 100%;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3;
    stroke-miterlimit: 10;
    stroke: var(--color-teal);
    fill: none;
    animation: stroke-draw 0.8s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 4;
    stroke: var(--color-bright-blue);
    stroke-linecap: round;
    fill: none;
    animation: stroke-draw 0.6s cubic-bezier(0.65, 0, 0.45, 1) 0.5s forwards;
}

@keyframes stroke-draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .thank-you__box {
        padding: 2rem;
    }
    .thank-you__title {
        font-size: 2rem;
    }
}