/* ========================================
   LUMIÈRE — Interior Design & Textiles
   Multi-Page Stylesheet
   ======================================== */

:root {
    --color-cream: #FAF7F2;
    --color-warm-white: #FFFDF9;
    --color-gold: #C9A96E;
    --color-gold-light: #E8D5B0;
    /* --color-gold is only ~2.1:1 on cream, so it fails as text however large.
       This darker gold clears AA at 4.5:1 and still reads as the same accent.
       Use --color-gold for borders, rules, and anything on the dark footer. */
    --color-gold-text: #8A6D3B;
    --color-charcoal: #2C2C2C;
    --color-dark: #1A1A1A;
    --color-muted: #6B6B6B;
    --color-light-gray: #E8E4DF;
    --color-blush: #F0E6DC;
    /* --color-muted only reaches 2.4:1 on the dark footer, so the footer has
       its own muted tone that clears AA. */
    --color-muted-on-dark: #A8A29A;
    --color-error: #9B2C2C;
    --color-success: #2F6B4F;

    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Montserrat', sans-serif;

    --transition: all 0.3s ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--color-charcoal);
    background-color: var(--color-warm-white);
    line-height: 1.7;
}

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

/* Keyboard users get a visible ring; mouse users don't. */
:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: var(--color-dark);
    color: var(--color-cream);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 1rem;
}

/* ========================================
   Typography
   ======================================== */

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 400;
}

.section-title {
    font-size: 2.8rem;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--color-dark);
    letter-spacing: 0.02em;
}

.section-subtitle {
    text-align: center;
    color: var(--color-muted);
    font-size: 1.05rem;
    margin-bottom: 3rem;
    font-weight: 300;
}

.lead {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-style: italic;
    color: var(--color-gold-text);
    margin-bottom: 1.2rem;
}

/* ========================================
   Navigation
   ======================================== */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(250, 247, 242, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(201, 169, 110, 0.1);
    transition: var(--transition);
}

.navbar.scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.2rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--color-dark);
    text-decoration: none;
    letter-spacing: 0.05em;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2.5rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--color-charcoal);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: var(--transition);
    position: relative;
}

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

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

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

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.nav-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--color-charcoal);
    transition: var(--transition);
}

/* ========================================
   Buttons
   ======================================== */

.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary {
    background: var(--color-charcoal);
    color: var(--color-cream);
    border: 1px solid var(--color-charcoal);
}

/* Inverts to gold rather than tinting white-on-gold, which only managed
   2.2:1. Charcoal on this gold is 6.2:1. */
.btn-primary:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-dark);
}

.btn-outline {
    background: transparent;
    color: var(--color-charcoal);
    border: 1px solid var(--color-charcoal);
}

.btn-outline:hover {
    background: var(--color-charcoal);
    color: var(--color-cream);
}

/* ========================================
   Hero Section (Home)
   ======================================== */

.hero {
    position: relative;
    height: 100vh;
    /* Mobile browsers shrink 100vh as their toolbar hides, which makes the
       hero jump mid-scroll. svh is the stable viewport height. */
    height: 100svh;
    min-height: 34rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The hero copy sits on a frosted panel, but drapery photography is bright
   enough that the panel alone doesn't guarantee contrast. */
.hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(250, 247, 242, 0.35) 0%, rgba(250, 247, 242, 0.15) 45%, rgba(44, 44, 44, 0.18) 100%);
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 2rem;
    background: rgba(250, 247, 242, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(201, 169, 110, 0.2);
    max-width: 600px;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 300;
    color: var(--color-dark);
    letter-spacing: 0.08em;
    margin-bottom: 0.8rem;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(0.85rem, 1.5vw, 1.1rem);
    font-weight: 300;
    color: var(--color-muted);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    /* Without this the line breaks after "TEXTILE &", orphaning "DESIGN". */
    text-wrap: balance;
}

.hero-tagline {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--color-gold-text);
    margin-bottom: 2rem;
}

/* ========================================
   Page Header (Non-home pages)
   ======================================== */

.page-header {
    padding: 10rem 2rem 4rem;
    text-align: center;
    background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-blush) 100%);
}

.page-header h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: var(--color-dark);
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.page-header-sub {
    font-size: 1.1rem;
    color: var(--color-muted);
    font-style: italic;
    font-family: var(--font-heading);
}

/* ========================================
   Sections
   ======================================== */

.section {
    padding: 6rem 0;
}

.alt-bg {
    background: var(--color-cream);
}

.section-cta {
    text-align: center;
    margin-top: 3rem;
}

/* ========================================
   Home: Intro Grid
   ======================================== */

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

.intro-text h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--color-dark);
}

.intro-text p {
    color: var(--color-muted);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

/* ========================================
   Services Grid
   ======================================== */

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

.service-card {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--color-warm-white);
    border: 1px solid var(--color-light-gray);
    transition: var(--transition);
}

.service-card:hover {
    border-color: var(--color-gold-light);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(201, 169, 110, 0.1);
}

.service-icon {
    font-size: 2.5rem;
    color: var(--color-gold-text);
    margin-bottom: 1.5rem;
}

.service-card h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: var(--color-dark);
}

.service-card p {
    color: var(--color-muted);
    font-size: 0.95rem;
}

/* ========================================
   3D Viewer Containers
   ======================================== */

/* Every photograph on the site is 3:2, so one ratio keeps the grids even and
   reserves the right space before the image loads (no layout shift). */
.media {
    margin: 0;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--color-cream);
    border: 1px solid var(--color-light-gray);
}

.media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-caption {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* The site is fully photographic now — there is no WebGL canvas left to
   style. js/scenes.js is still on disk but nothing loads it. */

/* ========================================
   Showcase Preview (Home)
   ======================================== */

.showcase-preview {
    background: var(--color-cream);
}

/* ========================================
   CTA Section
   ======================================== */

.cta-section {
    background: linear-gradient(135deg, var(--color-blush), var(--color-gold-light));
}

.cta-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-dark);
}

.cta-content p {
    color: var(--color-muted);
    margin-bottom: 2rem;
    font-size: 1.05rem;
}

/* ========================================
   About Page
   ======================================== */

.about-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-story-text h2 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    color: var(--color-dark);
}

.about-story-text p {
    color: var(--color-muted);
    margin-bottom: 1.2rem;
}

/* Values */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem;
    margin-top: 2rem;
}

.value-card {
    padding: 2.5rem;
    background: var(--color-warm-white);
    border: 1px solid var(--color-light-gray);
    text-align: center;
}

.value-card h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: var(--color-dark);
}

.value-card p {
    color: var(--color-muted);
    font-size: 0.95rem;
}

/* Process */
.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 3rem;
    margin-top: 2rem;
}

.process-step {
    text-align: center;
}

.step-number {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--color-gold-light);
    margin-bottom: 0.5rem;
}

.process-step h3 {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    color: var(--color-dark);
}

.process-step p {
    color: var(--color-muted);
    font-size: 0.9rem;
}

/* ========================================
   Services Page — Detail Layout
   ======================================== */

.service-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* `direction: rtl` would also flip punctuation and list markers inside, so
   swap the columns with grid order instead. The copy is always first in the
   markup, which is the order that should survive when this stacks on mobile. */
.service-detail-grid.reverse > :first-child {
    order: 2;
}

.service-detail-text h2 {
    font-size: 2.2rem;
    margin-bottom: 0.8rem;
    color: var(--color-dark);
}

.service-detail-text p {
    color: var(--color-muted);
    margin-bottom: 1rem;
}

.service-list {
    list-style: none;
    margin-top: 1.5rem;
}

.service-list li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--color-muted);
    font-size: 0.95rem;
}

.service-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--color-gold-text);
}

/* ========================================
   Portfolio Page
   ======================================== */

.portfolio-project {
    padding: 5rem 0;
}

.project-header {
    margin-bottom: 2rem;
}

.project-header h2 {
    font-size: 2.2rem;
    color: var(--color-dark);
    margin-bottom: 0.3rem;
}

.project-type {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gold-text);
}

.portfolio-project .media {
    margin-bottom: 2.5rem;
}

/* The first direction already brings its own 5rem of top padding. */
.section-tight {
    padding-bottom: 0;
}

.lookbook-intro {
    max-width: 44rem;
}

.lookbook-intro p {
    color: var(--color-muted);
}

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

.project-detail-item h4 {
    font-family: var(--font-body);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-muted);
    margin-bottom: 0.5rem;
    font-weight: 400;
}

.project-detail-item p {
    color: var(--color-charcoal);
    font-size: 0.95rem;
}

.color-swatches {
    display: flex;
    gap: 0.5rem;
}

.swatch {
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-light-gray);
}

/* ========================================
   Contact Page
   ======================================== */

.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
    align-items: start;
}

.contact-form-wrapper h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--color-dark);
}

.contact-form-wrapper > p {
    color: var(--color-muted);
    margin-bottom: 2rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.9rem 1rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 300;
    border: 1px solid var(--color-light-gray);
    background: var(--color-warm-white);
    color: var(--color-charcoal);
    transition: var(--transition);
    outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-gold);
}

.form-group textarea {
    resize: vertical;
}

.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 1px;
}

/* Hidden field that real people leave empty and bots fill in. */
.form-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.form-status {
    font-size: 0.9rem;
    line-height: 1.6;
}

.form-status:empty {
    display: none;
}

.form-status.is-pending {
    color: var(--color-muted);
}

.form-status.is-success {
    color: var(--color-success);
}

.form-status.is-error {
    color: var(--color-error);
}

.contact-direct {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--color-muted);
}

.contact-direct a {
    color: var(--color-charcoal);
    text-decoration: underline;
    text-decoration-color: var(--color-gold);
    text-underline-offset: 3px;
}

.contact-direct a:hover {
    color: var(--color-gold-text);
}

/* Contact Info Sidebar */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-info-card {
    padding: 2rem;
    background: var(--color-cream);
    border: 1px solid var(--color-light-gray);
}

.contact-info-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    color: var(--color-dark);
}

.contact-detail {
    margin-bottom: 1.2rem;
}

.contact-detail h4 {
    font-family: var(--font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-muted);
    margin-bottom: 0.3rem;
    font-weight: 400;
}

.contact-detail p {
    color: var(--color-charcoal);
    font-size: 0.95rem;
}

.expect-list {
    padding-left: 1.2rem;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.expect-list li {
    margin-bottom: 0.8rem;
}

/* ========================================
   Footer
   ======================================== */

.footer {
    background: var(--color-dark);
    color: var(--color-cream);
    padding: 4rem 0 2rem;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-brand h3 {
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.footer-brand p {
    color: var(--color-muted-on-dark);
    font-size: 0.9rem;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: flex-end;
}

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

.footer-social a {
    color: var(--color-muted-on-dark);
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: var(--transition);
}

.footer-social a:hover {
    color: var(--color-gold);
}

.footer-links {
    display: flex;
    gap: 2rem;
}

.footer-links a {
    color: var(--color-light-gray);
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--color-gold);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    text-align: center;
}

.footer-bottom p {
    font-size: 0.8rem;
    color: var(--color-muted-on-dark);
}

/* ========================================
   Scroll Reveal
   ======================================== */

/* Applied by JavaScript, so content stays visible if the script never runs. */
.will-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.will-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 968px) {
    .intro-grid,
    .about-story,
    .service-detail-grid,
    .service-detail-grid.reverse {
        grid-template-columns: 1fr;
    }

    /* Stacked, the copy should always lead. */
    .service-detail-grid.reverse > :first-child {
        order: 0;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(250, 247, 242, 0.98);
        flex-direction: column;
        align-items: center;
        padding: 2rem 0;
        gap: 1.5rem;
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        transition: var(--transition);
        border-bottom: 1px solid var(--color-light-gray);
    }

    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
    }

    .section {
        padding: 4rem 0;
    }

    .section-title {
        font-size: 2.2rem;
    }

    .page-header {
        padding: 8rem 2rem 3rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .hero-content {
        margin: 0 1rem;
    }

    .project-details {
        grid-template-columns: 1fr;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-nav {
        align-items: center;
    }

    .footer-links,
    .footer-social {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .service-card:hover {
        transform: none;
    }
}