:root {
    --cream:  #f5f0eb;
    --sand:   #e8ddd4;
    --clay:   #8c6239;
    --dark:   #2d2926;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--cream);
    color: var(--dark);
}

h1, h2, h3, h4 { font-family: 'Playfair Display', serif; font-weight: 400; }

/* ── Navbar ── */
.site-nav {
    background: #fff;
    border-bottom: 1px solid var(--sand);
}
.site-nav .navbar-brand img { height: 52px; }
.site-nav .nav-link {
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dark);
    padding: .4rem .6rem;
}
.site-nav .nav-link:hover { color: var(--clay); }
.site-nav .navbar-toggler {
    border-color: var(--sand);
    padding: .3rem .5rem;
}
.site-nav .navbar-toggler:focus { box-shadow: none; }
.site-nav .navbar-collapse { padding-top: .5rem; }
@media (max-width: 767px) {
    .site-nav .navbar-nav { padding-bottom: .5rem; }
    .site-nav .nav-link { padding: .6rem 0; border-bottom: 1px solid var(--sand); }
    .site-nav .nav-item:last-child .nav-link { border-bottom: none; }
}

.lang-link { color: var(--clay); }
.lang-link:hover { color: var(--dark); }

/* ── Hero ── */
.hero {
    position: sticky;
    top: 0;
    z-index: 0;
    height: 92vh;
    overflow: hidden;
}
.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(45, 41, 38, 0.38);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.hero-eyebrow {
    color: rgba(255, 255, 255, 0.75);
    font-size: .8rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.8rem, 6vw, 5.5rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.15;
}
.hero-title em { font-style: italic; }

/* ── Buttons ── */
.btn-clay {
    background: var(--clay);
    color: #fff;
    border: none;
    border-radius: 0;
    padding: .8rem 2.2rem;
    font-size: .8rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    transition: background .2s;
}
.btn-clay:hover { background: #7a5430; color: #fff; }

.btn-outline-clay {
    border: 1px solid var(--clay);
    color: var(--clay);
    border-radius: 0;
    padding: .6rem 1.8rem;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: transparent;
    transition: all .2s;
}
.btn-outline-clay:hover { background: var(--clay); color: #fff; }

/* ── Section titles ── */
.section-eyebrow {
    font-size: .75rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--clay);
}
.section-title { font-size: clamp(1.8rem, 3vw, 2.6rem); }

/* ── Divider ── */
.clay-divider {
    width: 48px;
    height: 2px;
    background: var(--clay);
    margin: 1rem auto;
}

/* ── Sections (must stack above sticky hero) ── */
.about-strip, .process-strip, .gallery-strip, .site-footer {
    position: relative;
    z-index: 1;
}

#about, #process, #gallery {
    scroll-margin-top: 80px;
}
.about-strip, .gallery-strip { background: var(--sand); }
.process-strip { background: var(--cream); }

/* ── Gallery carousel ── */
#process-grid {
    justify-content: safe center;
}

.gallery-carousel {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--sand) transparent;
    padding-bottom: 8px;
}
.gallery-carousel::-webkit-scrollbar { height: 4px; }
.gallery-carousel::-webkit-scrollbar-track { background: transparent; }
.gallery-carousel::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 2px; }

.gallery-carousel a {
    flex: 0 0 auto;
    display: block;
    height: 23vh;
    overflow: hidden;
    cursor: zoom-in;
    scroll-snap-align: start;
}
.gallery-carousel img {
    height: 100%;
    width: auto;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.gallery-carousel a:hover img { transform: scale(1.03); }

/* ── Cookie banner ── */
#cookie-banner {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    background: var(--dark);
    color: rgba(255,255,255,.85);
    padding: 1rem 1.5rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 90vw;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
    flex-wrap: wrap;
}
#cookie-banner[hidden] { display: none !important; }
.cookie-text { margin: 0; font-size: .85rem; }
.cookie-actions { display: flex; gap: .75rem; flex-shrink: 0; }
#cookie-decline {
    background: transparent;
    color: rgba(255,255,255,.5);
    border: none;
    font-size: .8rem;
    padding: .4rem .8rem;
}
#cookie-decline:hover { color: #fff; }

/* ── Footer ── */
.site-footer {
    background: var(--dark);
    color: rgba(255, 255, 255, .6);
}
.site-footer a { color: rgba(255, 255, 255, .45); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer img { opacity: .85; }