/* --- LUXURY EDITORIAL DESIGN SYSTEM --- */
:root {
    --onyx: #1C1A1A;
    --charcoal: #3A3635;
    --chalk: #FAF9F6;
    --pure-white: #FFFFFF;
    --muted-line: rgba(28, 26, 26, 0.1);
}

html {
    height: 100%;
    overflow-y: scroll;
}

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

body {
    /* Base beige color + paper-like texture (hosted locally) */
    background-color: #FAF9F6;
    background-image: url("scribble-light.png");
    background-blend-mode: multiply;
    background-repeat: repeat;
    color: var(--onyx);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    letter-spacing: -0.01em;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overscroll-behavior: none;
}

h2, h3, h4 { font-family: 'Cormorant Garamond', serif; font-weight: 300; letter-spacing: 0.02em; }

/* --- REUSABLE TEXT STYLES --- */
.body-text { font-size: 0.95rem; line-height: 1.8; color: #4A4A4A; }
.body-text.spaced { margin-bottom: 1.2rem; }
.body-text.spaced-lg { margin-bottom: 1.5rem; }
.body-text.italic { font-style: italic; }

.section-title { font-size: 2.5rem; margin-bottom: 1.5rem; text-transform: uppercase; }
.section-title.centered { margin-top: 4rem; margin-bottom: 0; text-align: center; }

.lead-italic { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.2rem; color: var(--charcoal); margin-bottom: 1.5rem; }

.subsection { margin-bottom: 1.5rem; }
.subsection:last-child { margin-bottom: 0; }
.subsection-title { font-size: 1.3rem; margin-bottom: 0.6rem; }

.body-list { font-size: 0.95rem; line-height: 1.8; color: #4A4A4A; padding-left: 1.2rem; }
.body-list li { margin-bottom: 0.8rem; }
.body-list li:last-child { margin-bottom: 0; }

/* --- IMMERSIVE HERO VIEWPORT --- */
.hero-viewport-container {
    position: relative;
    width: 100%;
    height: 70vh;
    overflow: hidden;
    background-color: var(--onyx);
}
.hero-background-slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}
.hero-background-slide.active {
    opacity: 0.85;
    z-index: 2;
}
.hero-scroll-indicator {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: var(--pure-white);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    opacity: 0.7;
    animation: bounceIndicator 2.5s infinite;
}

@keyframes bounceIndicator {
    0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
    40% { transform: translate(-50%, -8px); }
    60% { transform: translate(-50%, -4px); }
}

/* --- STICKY NAVIGATION WRAPPER HEADER --- */
.sticky-wrapper-header {
    position: sticky;
    top: 0;
    z-index: 500;
    background-color: var(--chalk);
    border-bottom: 1px solid var(--muted-line);
    will-change: transform;
}

/* The header shrinks on scroll; its inline styles are driven by JS (applyHeaderProgress) */
header {
    padding: 3.5rem 2rem 2rem 2rem;
    text-align: center;
    transform-origin: top center;
}

header .brand-name {
    font-family: 'Allura', cursive;
    font-synthesis: none;
    font-weight: 400;
    font-size: 3rem;
    line-height: 1.1;
    letter-spacing: 0;
    margin-bottom: 0.2rem;
}

header h1 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 1.3rem;
    line-height: 1.25;
    letter-spacing: 0.01em;
    margin-bottom: 0.2rem;
}

header .tagline {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--charcoal);
    font-size: 1.1rem;
}

/* --- NAVIGATION MAP --- */
nav {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4rem;
    padding: 0 1rem;
    background-color: transparent;
    border-top: 1px solid var(--muted-line);
}
nav a {
    background: none; border: none; padding: 1.2rem 0;
    font-family: 'Inter', sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.2em;
    cursor: pointer; color: var(--charcoal); transition: all 0.3s;
    border-bottom: 1px solid transparent; margin-bottom: -1px;
    text-decoration: none;
}
nav a:hover, nav a.active { color: var(--onyx); border-bottom: 1px solid var(--onyx); }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 4rem 2rem 8rem 2rem; flex: 1; min-height: 100vh; }
.page-content { display: none; }
.page-content.active { display: block; }

/* --- SERVICE ROWS --- */
.service-row-layout {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-top: 2rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid var(--muted-line);
}
.service-row-layout:last-of-type { border-bottom: none; }
.service-row-layout.no-divider { border-bottom: none; padding-bottom: 0; }

.gallery-block { position: relative; width: 100%; max-width: 600px; margin: 0 auto; }

/* --- SUPPLIER PICTURE TILING --- */
.supplier-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 0.75rem;
}
.supplier-tile {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.supplier-tile-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.supplier-tile-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.supplier-tile:hover .supplier-tile-image-wrap img { transform: scale(1.12); }

.supplier-tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(28, 26, 26, 0.5);
    color: var(--pure-white);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.supplier-tile:hover .supplier-tile-overlay { opacity: 1; }

.supplier-tile-name {
    margin-top: 0.6rem;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    color: var(--charcoal);
}

/* --- SQUARE PICTURE TILING (shared by all image grids) --- */
.tile-grid { display: grid; gap: 0.6rem; }
.tile-grid.cols-1 { grid-template-columns: 1fr; }
.tile-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.tile-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.tile-grid img,
.portrait-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* --- BOOKING PROCESS STEPS --- */
.process-steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.process-step-box {
    border: 1px solid var(--onyx);
    border-radius: 1.5rem;
    padding: 2.5rem 2rem;
    background: #333333;
}
.process-step-box h4 {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.8rem;
    color: var(--pure-white);
}
.process-step-box p {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #E0E0E0;
}

/* --- FORM COMPONENTS --- */
.booking-editorial-grid { width: 100%; max-width: 750px; margin: 0 auto; }
label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.6rem; color: var(--onyx); font-weight: 500; }
select, input, textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--onyx); padding: 1rem 0.5rem; margin-bottom: 2.5rem; font-family: 'Inter', sans-serif; font-size: 1rem; color: var(--onyx); border-radius: 0; }
select:focus, input:focus, textarea:focus { outline: none; border-bottom: 1px solid var(--charcoal); }

.btn-editorial-action { display: inline-block; background-color: var(--onyx); color: var(--chalk); border: 1px solid var(--onyx); padding: 1.2rem 2.5rem; font-family: 'Inter', sans-serif; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.2em; cursor: pointer; width: 100%; transition: all 0.3s; }
.btn-editorial-action:hover { background-color: transparent; color: var(--onyx); }
.booking-step { display: none; margin-top: 2rem; padding-top: 2rem; border-top: 1px dashed var(--muted-line); }
#step-private-chef, #step-workshop { border-top: none; padding-top: 0; }
.booking-step-divider { margin: 2rem 0; border: none; border-top: 1px dashed var(--muted-line); }
.booking-section-title { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.5rem; color: var(--charcoal); }
.field-note { font-size: 0.85rem; line-height: 1.6; color: #4A4A4A; margin-top: -1.7rem; margin-bottom: 1.8rem; }

/* --- BOOKING CALENDAR --- */
.calendar-box { background: var(--pure-white); border: 1px solid var(--onyx); padding: 2rem; margin: 0 auto 2.5rem auto; max-width: 450px; }
.calendar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.calendar-month-title { font-size: 1.3rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; border-bottom: 1px solid var(--muted-line); padding-bottom: 0.5rem; color: var(--charcoal); }
.calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 0.8rem; text-align: center; }

.cal-day { padding: 0.6rem 0; font-size: 0.9rem; transition: all 0.2s; border-radius: 0; border: none; background: transparent; font-family: 'Inter', sans-serif; }
.cal-day.available { cursor: pointer; font-weight: 500; color: var(--onyx); background: rgba(28, 26, 26, 0.05); text-decoration: underline; }
.cal-day.available.selected { background: var(--onyx); color: var(--chalk); text-decoration: none; font-weight: 600; }
.cal-day.unavailable { color: #C0BFC2; cursor: not-allowed; font-weight: 300; opacity: 0.4; }

/* --- WORKSHOP CARDS --- */
.workshop-calendar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; margin-top: 2rem; }

.workshop-item-card {
    border: 1px solid rgba(28, 26, 26, 0.15);
    padding: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0.4);
}
.workshop-item-card:hover {
    background-color: rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.workshop-item-card strong { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 1.6rem; display: block; margin: 0.5rem 0; }

/* --- MODAL DIALOGUES --- */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(28, 26, 26, 0.4); backdrop-filter: blur(8px); justify-content: center; align-items: center; z-index: 1000; }
.modal-content {
    background: var(--chalk);
    padding: 4rem 3rem;
    width: 90%;
    max-width: 550px;
    position: relative;
    border: 1px solid var(--onyx);
    max-height: 85vh;
    overflow-y: auto;
}
.close-modal { position: absolute; top: 1.5rem; right: 2rem; font-size: 1.8rem; cursor: pointer; }
.success-message { display: none; font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-style: italic; text-align: center; padding: 3rem 1.5rem; border: 1px solid var(--onyx); background: var(--pure-white); margin-top: 2rem; }

/* --- CUSTOM EDITORIAL FOOTER & FLOATING OVERLAP --- */
.brand-editorial-footer {
    background-color: var(--onyx);
    color: var(--chalk);
    padding: 0rem 2rem;
    position: relative;
    margin-top: auto !important; /* Force sticky tracking to the true page base */
    width: 100%;
    z-index: 600;
    min-height: 60px;
    display: flex;
    align-items: flex-start;
}
.footer-inner-wrapper {
    max-width: 1200px;
    padding: 0 2rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1 !important;
    position: relative;
    width: 100%;
}
.footer-copyright-label {
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    font-weight: 300;
    opacity: 0.85;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: left;
    flex: 0 1 auto;
}
.footer-actions-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.facebook-footer-trigger,
.instagram-footer-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 55px !important;
    height: 55px !important;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.facebook-footer-trigger:hover,
.instagram-footer-trigger:hover {
    opacity: 0.7;
    transform: translateY(-1px);
}
.facebook-footer-trigger img,
.instagram-footer-trigger img {
    width: 100% !important;
    height: 100% !important;
    max-width: 55px !important;
    max-height: 55px !important;
    object-fit: contain;
    background: transparent !important;
}
/* Instagram's logo fills its whole image, so at the same size it looks bigger than
   Facebook's. It keeps the same 55px slot (same alignment) but the image is smaller.
   Adjust --ig-size to make it larger or smaller. */
.instagram-footer-trigger { --ig-size: 42px; }
.instagram-footer-trigger img {
    width: var(--ig-size) !important;
    height: var(--ig-size) !important;
    max-width: var(--ig-size) !important;
    max-height: var(--ig-size) !important;
}
.whatsapp-overlapping-trigger {
    background-color: #25D366;
    color: var(--pure-white);
    width: 60px !important;
    height: 60px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    position: absolute;
    right: 10rem;
    top: 0;
    transform: translateY(-50%);
    transition: all 0.2s ease;
}
.whatsapp-overlapping-trigger:hover {
    background-color: #20ba59;
    transform: translateY(-54%) scale(1.06);
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35);
}
.whatsapp-overlapping-trigger img {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain;
    background: transparent !important;
}

/* With two social icons, the WhatsApp button would overlap them on tablets and
   small laptops. On those widths it sits just to the left of the icon group;
   on wide screens it keeps its original position. */
@media (min-width: 768px) and (max-width: 1575px) {
    .whatsapp-overlapping-trigger {
        right: calc(max(64px, (100vw - 1136px) / 2) + 150px);
    }
}

/* --- LARGER DEVICES (tablet and desktop) --- */
@media (min-width: 768px) {
    header .brand-name { font-size: 3.8rem; }
    header h1 { font-size: 1.6rem; }
    .service-row-layout { flex-direction: row; align-items: center; gap: 4rem; margin-top: 4rem; }
    .service-row-layout.reverse { flex-direction: row-reverse; }
    .service-row-layout > div { flex: 1; }
    .process-steps-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}

/* --- MOBILE DEVICES ONLY (desktop/tablet ≥768px untouched) --- */
@media (max-width: 767px) {
    html { overflow-x: hidden; }

    .container { padding: 3rem 1.25rem 5rem 1.25rem; }

    header { padding-left: 1rem; padding-right: 1rem; }

    /* Let the nav wrap so every tab stays visible without horizontal scrolling. */
    nav {
        flex-wrap: wrap;
        gap: 0.5rem 1.4rem;
        padding: 0 0.75rem 0.4rem 0.75rem;
    }
    nav a {
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        padding: 0.7rem 0;
    }

    .tile-grid.cols-3,
    .tile-grid.cols-2 { gap: 0.4rem; }

    .booking-editorial-grid h3 { font-size: 2rem; }

    .modal-content { padding: 2.5rem 1.5rem; }

    /* Footer stacks vertically on mobile: WhatsApp button floats centered
       on the top edge, then the social icons, then the copyright text.
       Nothing shares a row, so nothing can overlap. */
    .brand-editorial-footer { padding: 0; min-height: 0; }
    .footer-inner-wrapper {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.9rem;
        padding: 2.25rem 1.25rem 1.25rem 1.25rem;
    }
    .footer-actions-container { order: 1; gap: 1.25rem; }
    .footer-copyright-label {
        order: 2;
        font-size: 0.75rem;
        text-align: center;
        line-height: 1.4 !important;
    }

    .whatsapp-overlapping-trigger {
        right: auto;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 48px !important;
        height: 48px !important;
    }
    .whatsapp-overlapping-trigger:hover {
        transform: translate(-50%, -54%) scale(1.06);
    }
    .whatsapp-overlapping-trigger img {
        width: 48px !important;
        height: 48px !important;
    }
    .facebook-footer-trigger,
    .facebook-footer-trigger img,
    .instagram-footer-trigger {
        width: 42px !important;
        height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
    }
    .instagram-footer-trigger { --ig-size: 34px; }
}

/* Narrower tablets: tighter menu spacing so the four links fit on one line */
@media (min-width: 768px) and (max-width: 1023px) {
    nav { gap: 0 2.2rem; }
}

/* Arriving from the menu: until site.js has put the hero back above the header and
   scrolled past it, the hero is hidden and the header is already in its compact state,
   so the very first paint is correct. */
html.cc-skip .hero-viewport-container { display: none; }
html.cc-skip header { padding-top: 1.5rem; padding-bottom: 1rem; }
html.cc-skip header .brand-name { font-size: 1.8rem; margin-bottom: 0; }
html.cc-skip header h1 { font-size: 0.9rem; margin-bottom: 0; }
html.cc-skip header .tagline { opacity: 0; font-size: 0; height: 0; overflow: hidden; }
@media (min-width: 768px) {
    html.cc-skip header .brand-name { font-size: 2.6rem; }
    html.cc-skip header h1 { font-size: 1.2rem; }
}

/* --- FAQ (private chef services page) --- */
.faq-list { max-width: 820px; margin: 2.5rem auto 0; }
.faq-item { padding: 1.5rem 0; border-bottom: 1px solid var(--muted-line); }
.faq-item:last-child { border-bottom: none; }
.faq-item .subsection-title { margin-bottom: 0.5rem; }
.faq-item .body-text { margin-bottom: 0; }

/* --- HOME PAGE: intro and service teasers --- */
.home-intro {
    max-width: 780px;
    margin: 0 auto 1rem auto;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--charcoal);
}
.teaser-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; }
.teaser-box {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--onyx);
    border-radius: 1.5rem;
    padding: 2.5rem 2rem;
    background: #333333;
    transition: background 0.2s ease;
}
.teaser-box:hover { background: #404040; }
.teaser-box h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.8rem;
    color: var(--pure-white);
}
.teaser-box p {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #E0E0E0;
    margin-bottom: 1.5rem;
    flex: 1;
}
.teaser-link {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pure-white);
    text-decoration: underline;
    text-underline-offset: 4px;
}
/* The whole box is clickable through its link */
.teaser-link::after { content: ''; position: absolute; inset: 0; border-radius: 1.5rem; }
@media (min-width: 768px) {
    .teaser-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}