/*
  CASABLANCA THE HOUSE OF PASTRY — CSS SECTION GUIDE
  =================================================
  This file is organized using section titles only.
  All original CSS declarations and their order are preserved.
  Later overrides intentionally remain later in the file.

  01. BASE STYLES / ORIGINAL HOMEPAGE
  02. LOCATION SELECTOR COMPONENTS
  03. MENU PAGE STYLES
  04. LOCATION PAGE STYLES
  05. ORDER PAGE STYLES
  06. CATERING PAGE STYLES
  07. CONTACT PAGE STYLES
  09. PAGE-SPECIFIC STYLES
  10. FINAL OVERRIDES AND ACCESSIBILITY

  TIP: Search for "SECTION 05" to jump to order page styles.
  NOTE: Section 08 contains legacy naming; it is retained to avoid changing the design.
*/


/* ######################################################################
   SECTION 01 — BASE STYLES / ORIGINAL HOMEPAGE
   ###################################################################### */
/* ORIGINAL PAGE STYLES — retained to preserve existing page layouts */


/* =========================================================
   YOUR CAFE — HOMEPAGE STYLES
   ========================================================= */

/* =========================================================
   ROOT / VARIABLES
   ========================================================= */

:root {

    --black: #171717;
    --black-soft: #242321;

    --cream: #f8f7f3;
    --cream-dark: #efeee8;

    --white: #ffffff;

    --brown: #87654d;
    --brown-light: #b99a7e;

    --text: #171717;
    --muted: #77746d;

    --border: #deddd7;
    --border-dark: #343331;

    --serif: "Playfair Display", serif;
    --sans: "DM Sans", sans-serif;

    --container: 1180px;

    --transition: .3s ease;
}

/* =========================================================
   RESET
   ========================================================= */

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

html {
    scroll-behavior: smooth;
}


 body {
        font-family: "Montserrat", sans-serif;
        background: #111;
        color: #fff;
    } 
body {
    font-family: var(--sans);
    background: var(--cream);
    color: var(--text);

    line-height: 1.6;

    overflow-x: hidden;
}

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

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

button {
    font-family: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   CONTAINER
   ========================================================= */

.container {
    width: min(
        var(--container),
        calc(100% - 50px)
    );

    margin: 0 auto;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
p {
    margin: 0;
}

h1,
h2,
h3 {
    font-weight: 600;
}

em {
    font-family: var(--serif);
    font-weight: 500;
    font-style: italic;
}

.eyebrow {
    margin-bottom: 16px;

    color: var(--brown);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3px;
    line-height: 1.4;
}

/* =========================================================
   HEADER
   ========================================================= */

.header {
    position: sticky;

    top: 0;
    z-index: 999;

    background: rgba(248, 247, 243, .95);

    border-bottom: 1px solid var(--border);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.nav {
    position: relative;

    min-height: 90px;

    display: flex;
    align-items: center;

    gap: 40px;
}

/* =========================================================
   LOGO
   ========================================================= */

.logo {
    display: inline-block;

    color: var(--black);

    font-size: 25px;
    font-weight: 700;

    letter-spacing: 2px;
    line-height: 1;
}

.logo span {
    font-weight: 400;
}

.logo {
    display: flex;
    align-items: center;

    width: 150px;
}

.logo img {
    width: 100%;
    height: auto;

    display: block;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

.menu {
    display: flex;
    align-items: center;

    gap: 34px;

    margin-left: auto;
}

.menu a {
    position: relative;

    color: #5e5b55;

    font-size: 13px;
    font-weight: 500;

    transition: color var(--transition);
}

.menu a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 1px;

    background: var(--black);

    transition: width var(--transition);
}

.menu a:hover,
.menu a.active {
    color: var(--black);
}

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

/* =========================================================
   NAV BUTTON
   ========================================================= */

.nav-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 13px 21px;

    background: var(--black);
    /*  color: var(--white);*/
    color: white;

    font-size: 12px;
    font-weight: 700;

    transition:
        background var(--transition),
        transform var(--transition);
}

.nav-button:hover {
    background: var(--brown);

    transform: translateY(-2px);
}

/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.mobile-menu {
    display: none;

    width: 42px;
    height: 42px;

    margin-left: auto;

    border: 1px solid var(--border);

    background: transparent;

    color: var(--black);

    font-size: 22px;

    cursor: pointer;

    transition:
        background var(--transition),
        color var(--transition);
}

.mobile-menu:hover {
    background: var(--black);
    color: var(--white);
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--black);
}

/* VIDEO */

.hero-video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;
}

/* VIDEO OVERLAY */

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(248, 247, 243, .97) 0%,
            rgba(248, 247, 243, .88) 35%,
            rgba(248, 247, 243, .52) 65%,
            rgba(23, 23, 23, .25) 100%
        );
}

/* CONTENT ABOVE VIDEO */

.hero-content {
    position: relative;

    z-index: 2;

    width: 100%;

    padding: 110px 40px;
}

/* =========================================================
   HERO BUTTONS
   ========================================================= */

.hero-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 38px;
}

.button {
    min-height: 50px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 13px 22px;

    border: 1px solid transparent;

    font-size: 12px;
    font-weight: 700;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.button:hover {
    transform: translateY(-2px);
}

.button.dark {
    background: var(--black);
    color: var(--white);
}

.button.dark:hover {
    background: var(--brown);
}

.button.light {
    border-color: var(--black);

    background: rgba(255, 255, 255, .25);

    color: var(--black);
}

.button.light:hover {
    background: var(--black);
    color: var(--white);
}

/* =========================================================
   HERO SIDE NOTE
   ========================================================= */

.hero-note {
    position: absolute;

    right: 0;
    bottom: 90px;

    display: flex;
    align-items: center;

    gap: 14px;

    color: var(--black);

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.hero-line {
    width: 45px;
    height: 1px;

    background: var(--black);
}

/* =========================================================
   INTRO SECTION
   ========================================================= */

.intro {
    padding: 125px 0;

    background: var(--cream);
}

.intro-grid {
    display: grid;

    grid-template-columns: .7fr 1.5fr;

    gap: 80px;
}

.intro-content {
    max-width: 780px;
}

.intro-content h2 {
    font-size: clamp(
        42px,
        5vw,
        72px
    );

    line-height: 1.02;

    letter-spacing: -3px;
}

.intro-content > p {
    max-width: 600px;

    margin-top: 32px;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.8;
}

/* =========================================================
   TEXT LINKS
   ========================================================= */

.text-link {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-top: 28px;

    padding-bottom: 6px;

    border-bottom: 1px solid var(--black);

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition:
        color var(--transition),
        border-color var(--transition);
}

.text-link span {
    font-size: 18px;

    transition: transform var(--transition);
}

.text-link:hover {
    color: var(--brown);

    border-color: var(--brown);
}

.text-link:hover span {
    transform: translateX(5px);
}

/* =========================================================
   FEATURED MENU
   ========================================================= */

.featured-menu {
    padding: 125px 0 140px;

    background: var(--cream-dark);
}

/* =========================================================
   SECTION HEADING
   ========================================================= */

.section-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 60px;

    margin-bottom: 65px;
}

.section-heading h2 {
    font-size: clamp(
        48px,
        6vw,
        78px
    );

    line-height: .95;

    letter-spacing: -4px;
}

.section-heading-right {
    width: 360px;

    padding-bottom: 4px;
}

.section-heading-right > p {
    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}

.section-heading-right .text-link {
    margin-top: 25px;
}

/* =========================================================
   FEATURED FOOD GRID
   ========================================================= */

.featured-grid {
    display: grid;

    grid-template-columns: 1.35fr 1fr 1fr;

    gap: 22px;
}

.food-card {
    background: var(--white);

    overflow: hidden;

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.food-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .09);
}

.food-image {
    position: relative;

    height: 360px;

    overflow: hidden;
}

.food-card.large .food-image {
    height: 470px;
}

.food-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.2,.7,.2,1);
}

.food-card:hover .food-image img {
    transform: scale(1.055);
}

.food-number {
    position: absolute;

    top: 18px;
    left: 18px;

    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--white);

    color: var(--black);

    font-size: 11px;
    font-weight: 700;
}

.food-info {
    min-height: 105px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 25px;
}

.food-category {
    margin-bottom: 7px;

    color: var(--brown);

    font-size: 29px;
    font-weight: 700;

    letter-spacing: 2px;
}

.food-info h3 {
    font-size: 24px;

    line-height: 1.15;

    letter-spacing: -.7px;
}

.food-price {
    font-family: var(--serif);

    font-size: 20px;

    white-space: nowrap;
}

/* =========================================================
   STORY SECTION
   ========================================================= */

.story {
    padding: 140px 0;

    background: var(--cream);
}

.story-grid {
    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 100px;

    align-items: center;
}

.story-image {
    position: relative;

    height: 700px;

    overflow: hidden;
}

.story-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .8s ease;
}

.story-image:hover img {
    transform: scale(1.035);
}

.image-caption {
    position: absolute;

    right: 20px;
    bottom: 20px;

    padding: 12px 15px;

    background: var(--white);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
}

.story-content {
    max-width: 520px;
}

.story-content h2 {
    font-size: clamp(
        48px,
        5vw,
        70px
    );

    line-height: .98;

    letter-spacing: -3px;
}

.story-content > p:not(.eyebrow) {
    margin-top: 25px;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.8;
}

.story-content .button {
    margin-top: 32px;
}

/* =========================================================
   COFFEE FEATURE
   ========================================================= */

.coffee-feature {
    padding: 0;

    background: var(--black);

    color: var(--white);
}

.coffee-grid {
    min-height: 700px;

    display: grid;

    grid-template-columns: 1fr 1fr;
}

.coffee-content {
    display: flex;

    flex-direction: column;
    justify-content: center;

    padding: 90px 10% 90px 0;
}

.coffee-content .eyebrow {
    color: var(--brown-light);
}

.coffee-content h2 {
    font-size: clamp(
        48px,
        5.5vw,
        78px
    );

    line-height: .95;

    letter-spacing: -4px;
}

.coffee-content > p:not(.eyebrow) {
    max-width: 460px;

    margin-top: 30px;

    color: #aaa8a2;

    font-size: 15px;
    line-height: 1.8;
}

.coffee-content .button {
    width: fit-content;

    margin-top: 35px;

    border-color: var(--white);

    color: var(--white);
}

.coffee-content .button:hover {
    background: var(--white);

    color: var(--black);
}

.coffee-image {
    min-height: 700px;

    overflow: hidden;
}

.coffee-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .8s ease;
}

.coffee-image:hover img {
    transform: scale(1.04);
}

/* =========================================================
   LOCATIONS PREVIEW
   ========================================================= */

.locations-preview {
    padding: 140px 0;

    background: var(--cream);
}

.location-preview-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}

.location-preview-card {
    background: var(--white);

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.location-preview-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, .08);
}

.preview-image {
    height: 350px;

    overflow: hidden;
}

.preview-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;
}

.location-preview-card:hover .preview-image img {
    transform: scale(1.05);
}

.preview-info {
    padding: 27px;
}

.preview-info h3 {
    margin-bottom: 12px;

    font-size: 29px;

    line-height: 1.1;

    letter-spacing: -.8px;
}

.preview-info > p:last-child {
    color: var(--muted);

    font-size: 13px;
    line-height: 1.7;
}

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

.cta {
    position: relative;

    padding: 145px 0;

    background:
        linear-gradient(
            135deg,
            #171717 0%,
            #24211f 100%
        );

    color: var(--white);

    overflow: hidden;
}

.cta::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -180px;
    top: -220px;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 50%;
}

.cta::after {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    right: -280px;
    top: -320px;

    border: 1px solid rgba(255,255,255,.05);

    border-radius: 50%;
}

.cta-content {
    position: relative;
    z-index: 2;

    text-align: center;
}

.cta .eyebrow {
    color: var(--brown-light);
}

.cta h2 {
    max-width: 900px;

    margin: 0 auto;

    font-size: clamp(
        52px,
        7vw,
        90px
    );

    line-height: .98;

    letter-spacing: -4px;
}

.cta-description {
    max-width: 450px;

    margin: 28px auto 0;

    color: #aaa8a2;

    font-size: 15px;
}

.cta-buttons {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 40px;
}

.cta-button {
    min-height: 51px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 14px 28px;

    background: var(--white);

    color: var(--black);

    font-size: 12px;
    font-weight: 700;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}

.cta-button:hover {
    background: var(--brown);

    color: var(--white);

    transform: translateY(-2px);
}

.cta-button.outline {
    border: 1px solid rgba(255,255,255,.5);

    background: transparent;

    color: var(--white);
}

.cta-button.outline:hover {
    border-color: var(--white);

    background: var(--white);

    color: var(--black);
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    padding: 75px 0 25px;

    background: #111;

    color: var(--white);
}

.footer-grid {
    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1fr;

    gap: 50px;

    padding-bottom: 65px;
}

.footer-logo {
    color: var(--white);
}

.footer-text {
    margin-top: 20px;

    color: #92908b;

    font-size: 13px;

    line-height: 1.8;
}

.footer-links {
    display: flex;

    flex-direction: column;

    gap: 9px;
}

.footer-links h4 {
    margin-bottom: 10px;

    color: var(--white);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;
}

.footer-links a,
.footer-links p {
    color: #92908b;

    font-size: 13px;

    transition: color var(--transition);
}

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

/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.footer-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding-top: 22px;

    border-top: 1px solid #30302e;

    color: #6f6d68;

    font-size: 11px;
}

.footer-legal {
    display: flex;

    gap: 20px;
}

.footer-legal a {
    transition: color var(--transition);
}

.footer-legal a:hover {
    color: var(--white);
}

/* =========================================================
   LARGE TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .nav {
        gap: 25px;
    }

    .menu {
        gap: 23px;
    }

    .hero {
        min-height: 650px;
    }

    .hero-note {
        right: 0;
    }

    .intro-grid {
        gap: 50px;
    }

    .story-grid {
        gap: 60px;
    }

    .story-image {
        height: 600px;
    }

}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .container {
        width: min(
            var(--container),
            calc(100% - 40px)
        );
    }

    /* Header */

    .menu {
        gap: 17px;
    }

 .nav-button {
        display: inline-flex;
        margin-left: auto;
        margin-right: 10px;
        color: white;
    }


.nav-button:hover {
    background: var(--brown);
    transform: translateY(-2px);
}

    /* Hero */

    .hero {
        min-height: 620px;

        background:
            linear-gradient(
                90deg,
                rgba(248,247,243,.96),
                rgba(248,247,243,.65)
            ),
            url("https://images.unsplash.com/photo-1447933601403-0c6688de566e?auto=format&fit=crop&w=1800&q=85")
            center / cover no-repeat;
    }

    .hero-note {
        display: none;
    }

    /* Intro */

    .intro {
        padding: 100px 0;
    }

    .intro-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    /* Featured */

    .featured-menu {
        padding: 100px 0;
    }

    .section-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 25px;

        margin-bottom: 45px;
    }

    .section-heading-right {
        width: 100%;
    }

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

    .food-card.large {
        grid-column: 1 / -1;
    }

    .food-card.large .food-image {
        height: 420px;
    }

    .food-card:not(.large) .food-image {
        height: 320px;
    }

    /* Story */

    .story {
        padding: 100px 0;
    }

    .story-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .story-image {
        height: 550px;
    }

    .story-content {
        max-width: 650px;
    }

    /* Coffee */

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

    .coffee-content {
        min-height: 550px;

        padding: 90px 0;
    }

    .coffee-image {
        min-height: 500px;
    }

    /* Locations */

    .locations-preview {
        padding: 100px 0;
    }

    .location-preview-grid {
        grid-template-columns: 1fr 1fr;
    }

    .location-preview-card:last-child {
        grid-column: 1 / -1;
    }

    .location-preview-card:last-child .preview-image {
        height: 400px;
    }

    /* Footer */

    .footer-grid {
        grid-template-columns: 1fr 1fr;

        gap: 45px 35px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

}

/* =========================================================
   MOBILE
   ========================================================= */






   
@media (max-width: 650px) {

    .container {
        width: calc(100% - 32px);
    }

    /* Header */

    .nav {
        min-height: 75px;
    }

    .logo {
        font-size: 21px;
    }

    .mobile-menu {
        display: flex;

        align-items: center;
        justify-content: center;
    }


@media (max-width: 650px) {

    .hero {
        min-height: 650px;
    }

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(248,247,243,.30) 0%,
                rgba(248,247,243,.70) 45%,
                rgba(248,247,243,.97) 100%
            );
    }

    .hero-video {
        object-position: center;
    }

}










    .menu {
        position: absolute;

        top: 75px;
        left: -16px;
        right: -16px;

        display: none;

        flex-direction: column;
        align-items: flex-start;

        gap: 0;

        margin: 0;

        padding: 15px 25px 25px;

        background: rgba(248,247,243,.98);

        border-bottom: 1px solid var(--border);

        box-shadow:
            0 15px 30px rgba(0,0,0,.04);
    }

    .menu.open {
        display: flex;
    }

    .menu a {
        width: 100%;

        padding: 13px 0;

        font-size: 15px;
    }

    .menu a::after {
        display: none;
    }

    /* Hero */

    .hero {
        min-height: 620px;

        align-items: flex-end;

        background:
            linear-gradient(
                180deg,
                rgba(248,247,243,.25) 0%,
                rgba(248,247,243,.72) 45%,
                rgba(248,247,243,.98) 100%
            ),
            url("https://images.unsplash.com/photo-1447933601403-0c6688de566e?auto=format&fit=crop&w=1400&q=85")
            center / cover no-repeat;
    }

    .hero-content {
        padding: 75px 0;
    }

    .hero h1 {
        font-size: 62px;

        letter-spacing: -3px;
    }

    .hero-description {
        margin-top: 30px;

        font-size: 15px;
    }

    .hero-buttons {
        flex-direction: column;

        margin-top: 30px;
    }

    .hero-buttons .button {
        width: 100%;
    }

    /* Intro */

    .intro {
        padding: 80px 0;
    }

    .intro-content h2 {
        font-size: 45px;

        letter-spacing: -2px;
    }

    .intro-content > p {
        font-size: 15px;
    }

    /* Section heading */

    .section-heading h2 {
        font-size: 52px;

        letter-spacing: -2px;
    }

    /* Featured */

    .featured-menu {
        padding: 80px 0;
    }

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

    .food-card.large {
        grid-column: auto;
    }

    .food-card.large .food-image,
    .food-card:not(.large) .food-image {
        height: 330px;
    }

    .food-info {
        padding: 22px;
    }

    .food-info h3 {
        font-size: 23px;
    }

    /* Story */

    .story {
        padding: 80px 0;
    }

    .story-image {
        height: 430px;
    }

    .story-content h2 {
        font-size: 49px;

        letter-spacing: -2px;
    }

    .story-content > p:not(.eyebrow) {
        font-size: 14px;
    }

    .story-content .button {
        width: 100%;
    }

    /* Coffee */

    .coffee-content {
        min-height: auto;

        padding: 80px 0;
    }

    .coffee-content h2 {
        font-size: 52px;

        letter-spacing: -2px;
    }

    .coffee-image {
        min-height: 400px;
    }

    /* Locations */

    .locations-preview {
        padding: 80px 0;
    }

    .location-preview-grid {
        grid-template-columns: 1fr;
    }

    .location-preview-card:last-child {
        grid-column: auto;
    }

    .location-preview-card:last-child .preview-image {
        height: 330px;
    }

    .preview-image {
        height: 330px;
    }

    /* CTA */

    .cta {
        padding: 90px 0;
    }

    .cta h2 {
        font-size: 50px;

        letter-spacing: -2px;
    }

    .cta-description {
        font-size: 14px;
    }

    .cta-buttons {
        flex-direction: column;

        width: 100%;
    }

    .cta-button {
        width: 100%;
    }

    /* Footer */

    .footer {
        padding-top: 60px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;

        gap: 40px 25px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }

}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .hero h1 {
        font-size: 55px;
    }

    .section-heading h2 {
        font-size: 46px;
    }

    .intro-content h2 {
        font-size: 40px;
    }

    .story-content h2 {
        font-size: 43px;
    }

    .coffee-content h2 {
        font-size: 46px;
    }

    .cta h2 {
        font-size: 44px;
    }

}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

:focus-visible {
    outline: 2px solid var(--brown);

    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

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

}


/* ######################################################################
   SECTION 02 — LOCATION SELECTOR COMPONENTS
   ###################################################################### */
/* =========================================
   LOCATION CHOICE
========================================= */

.location-choice {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #f8f4ed;
    padding: 100px 20px;
}

.location-choice .container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

/* Title */

.location-choice h1 {
    margin: 0 0 50px;
    font-family: "Playfair Display", serif;
    font-size: clamp(48px, 7vw, 82px);
    line-height: 1.05;
    font-weight: 500;
    color: #2f211b;
}

.location-choice h1 em {
    color: #a87545;
    font-style: italic;
}

/* =========================================
   LOCATION BUTTONS
========================================= */

.location-choice-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 28px;
    max-width: 900px;
    margin: 0 auto;
}

/* Individual location box */

.location-choice-button {
    position: relative;
    min-height: 260px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-decoration: none;

    border-radius: 24px;
    overflow: hidden;

    background: #fffaf3;
    border: 1px solid #e8d8c4;

    color: #2f211b;

    box-shadow:
        0 10px 30px rgba(72, 47, 31, 0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

/* Number */

.location-choice-button span {
    position: absolute;
    top: 22px;
    left: 25px;

    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #a87545;
}

/* Location name */

.location-choice-button strong {
    margin-bottom: 8px;

    font-family: "Playfair Display", serif;
    font-size: 42px;
    font-weight: 600;

    color: #2f211b;
}

/* Small text */

.location-choice-button small {
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    color: #8b7768;
}

/* Arrow */

.location-choice-button b {
    position: absolute;
    right: 28px;
    bottom: 22px;

    font-size: 24px;
    font-weight: 400;

    color: #a87545;

    transition: transform 0.3s ease;
}

/* Hover */

.location-choice-button:hover {
    transform: translateY(-8px);

    background: #ead8c2;

    border-color: #d4b38f;

    box-shadow:
        0 20px 45px rgba(72, 47, 31, 0.15);
}

.location-choice-button:hover strong {
    color: #2f211b;
}

.location-choice-button:hover b {
    transform: translateX(6px);
}

/* =========================================
   SECOND BOX - SLIGHTLY DIFFERENT COLOR
========================================= */

.location-choice-button:nth-child(2) {
    background: #e9f0eb;
    border-color: #d1ddd4;
}

.location-choice-button:nth-child(2) span,
.location-choice-button:nth-child(2) b {
    color: #607d6a;
}

.location-choice-button:nth-child(2):hover {
    background: #d8e5dc;
    border-color: #b9cdbf;
}

.location-choice-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.location-choice-button {
    width: 400px;
    min-height: 260px;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .location-choice {
        min-height: auto;
        padding: 80px 20px;
    }

    .location-choice h1 {
        margin-bottom: 35px;
        font-size: 52px;
    }

    .location-choice-buttons {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 500px;
    }

    .location-choice-button {
        min-height: 220px;
    }

    .location-choice-button strong {
        font-size: 36px;
    }
}
@media (max-width: 700px) {
    .location-choice-buttons {
        flex-direction: column;
    }

    .location-choice-button {
        width: 100%;
        max-width: 400px;
    }
}


/* ######################################################################
   SECTION 03 — MENU PAGE STYLES
   ###################################################################### */
/* =========================================
PROFESSIONAL MENU PAGE
========================================= */

/* =========================================
MENU HERO
========================================= */

.menu-hero {
background: #f6f1e9;
padding: 105px 20px 90px;
text-align: center;
}

.menu-hero-content {
max-width: 850px;
margin: 0 auto;
}

.menu-hero h1 {
margin: 20px 0 25px;

font-family: "Playfair Display", serif;
font-size: clamp(55px, 8vw, 95px);
line-height: 0.98;
font-weight: 500;

color: #2f211b;

}

.menu-hero h1 em {
color: #a87545;
font-style: italic;
}

.menu-intro {
max-width: 650px;
margin: 0 auto;

color: #79695c;

font-size: 17px;
line-height: 1.8;

}

/* =========================================
MENU SHOWCASE
========================================= */

.menu-showcase {
background: #eee6da;
padding: 80px 20px 100px;
}

.menu-showcase .container {
max-width: 1150px;
margin: 0 auto;
}

/* TOP LINE */

.menu-top {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;

margin-bottom: 30px;

}

.menu-top p {
margin: 0;

color: #8a6c50;

font-size: 11px;
font-weight: 700;

letter-spacing: 3px;

}

.menu-top-line {
width: 80px;
height: 1px;
background: #cbb9a5;
}

/* =========================================
MENU CARD
========================================= */

.menu-card {
background: #fffdf9;

padding: 18px;

border: 1px solid #ded0c0;

box-shadow:
    0 25px 70px rgba(54, 39, 27, 0.15);

}

/* CARD HEADER */

.menu-card-header {
min-height: 85px;

padding: 10px 20px 20px;

display: flex;
align-items: center;
justify-content: space-between;

border-bottom: 1px solid #e6dbcf;

}

.menu-card-header span {
display: block;

margin-bottom: 5px;

color: #a87545;

font-size: 10px;
font-weight: 700;

letter-spacing: 3px;

}

.menu-card-header h2 {
margin: 0;

font-family: "Playfair Display", serif;

font-size: 36px;
font-weight: 500;

color: #2f211b;

}

.menu-card-number {
color: #b8a798;

font-size: 12px;
font-weight: 600;

letter-spacing: 2px;

}

/* =========================================
PDF
========================================= */

.menu-pdf {
width: 100%;
height: 950px;

background: #ffffff;

overflow: hidden;

}

.menu-pdf iframe {
width: 100%;
height: 100%;

display: block;

border: none;

}

/* =========================================
CARD FOOTER
========================================= */

.menu-card-footer {
min-height: 60px;

padding: 15px 20px;

display: flex;
align-items: center;
justify-content: space-between;

border-top: 1px solid #e6dbcf;

}

.menu-card-footer span {
color: #a08d7c;

font-size: 9px;
font-weight: 700;

letter-spacing: 2px;

}

.menu-card-footer a {
color: #8b603c;

font-size: 13px;
font-weight: 600;

text-decoration: none;

transition: color 0.3s ease;

}

.menu-card-footer a:hover {
color: #2f211b;
}

/* =========================================================
CASABLANCA MENU PAGE
========================================================= */

.menu-page {
background: #f6f1e9;
padding: 100px 20px 110px;
}

.menu-page .container {
width: 100%;
max-width: 1150px;
margin: 0 auto;
}

/* =========================================
MENU HEADING
========================================= */

.menu-heading {
text-align: center;
max-width: 750px;
margin: 0 auto 55px;
}

.menu-heading h1 {
margin: 18px 0 20px;

font-family: "Playfair Display", serif;
font-size: clamp(55px, 8vw, 90px);
line-height: 1;

font-weight: 500;

color: #30231d;

}

.menu-heading h1 em {
color: #a87545;
font-style: italic;
}

.menu-heading > p:last-child {
max-width: 600px;
margin: 0 auto;

color: #77675a;

font-size: 17px;
line-height: 1.8;

}

/* =========================================================
CASABLANCA MENU - CLEAN CENTERED DISPLAY
========================================================= */

.menu-page {
background: #f5efe6;
padding: 90px 20px 110px;
}

/* =========================================================
CONTAINER
========================================================= */

.menu-page .container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

/* =========================================================
MENU TITLE
========================================================= */

.menu-heading {
max-width: 800px;

margin: 0 auto;

text-align: center;

}

.menu-heading .eyebrow {
margin-bottom: 25px;

color: #9a704b;

font-size: 11px;
font-weight: 700;

letter-spacing: 3px;

}

.menu-heading h1 {
margin: 0 0 28px;

font-family: "Playfair Display", serif;

font-size: clamp(55px, 8vw, 90px);

line-height: 1;

font-weight: 500;

color: #30231d;

}

.menu-heading h1 em {
color: #a87545;

font-style: italic;

}

.menu-heading > p:last-child {
max-width: 600px;

margin: 0 auto;

color: #76675a;

font-size: 17px;

line-height: 1.8;

}

/* =========================================================
SPACE BEFORE MENU
========================================================= */

.menu-images {
width: 100%;

max-width: 1000px;

margin: 65px auto 0;

display: flex;

flex-direction: column;

align-items: center;

}

/* =========================================================
MENU IMAGE
========================================================= */

.menu-images img {
display: block;

width: 100%;

height: auto;

background: #ffffff;

border: 1px solid #dfd2c3;

box-shadow:
    0 20px 55px rgba(47, 33, 27, 0.14);

border-radius: 3px;

transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

}

/* =========================================================
SPACE BETWEEN MENU PAGES
========================================================= */

.menu-images img + img {
margin-top: 55px;
}

/* =========================================================
HOVER
========================================================= */

.menu-images img:hover {
transform: translateY(-4px);

box-shadow:
    0 28px 65px rgba(47, 33, 27, 0.18);

}

/* =========================================================
ORDER SECTION
========================================================= */

.menu-order {
background: #30231d;

padding: 105px 20px;

text-align: center;

color: #ffffff;

}

.menu-order .container {
max-width: 750px;

margin: 0 auto;

}

.menu-order .eyebrow {
color: #c8a27b;

margin-bottom: 20px;

}

.menu-order h2 {
margin: 0 0 25px;

font-family: "Playfair Display", serif;

font-size: clamp(50px, 7vw, 78px);

line-height: 1;

font-weight: 500;

}

.menu-order h2 em {
color: #d1aa7e;
}


/* ######################################################################
   SECTION 04 — LOCATION PAGE STYLES
   ###################################################################### */
/* =========================================================
   LOCATION PAGE
   ========================================================= */

/* =========================================================
   LOCATION HERO
   ========================================================= */

.locations-hero {
    padding: 115px 0 100px;

    background:
        linear-gradient(
            135deg,
            #f4eee7 0%,
            var(--cream) 55%,
            #eee4da 100%
        );

    border-bottom: 1px solid var(--border);
}

.locations-hero .hero-content {
    max-width: 800px;
}

.locations-hero .eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    color: var(--brown);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3px;
    text-transform: uppercase;
}

.locations-hero h1 {
    margin-bottom: 25px;

    font-family: var(--serif);

    font-size: clamp(52px, 8vw, 95px);
    line-height: .95;

    font-weight: 600;

    letter-spacing: -3px;
}

.locations-hero h1 em {
    color: var(--brown);
font-family: var(--serif);
    
    font-weight: 500;
}

.locations-hero .hero-text {
    max-width: 620px;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.8;
}


/* =========================================================
   LOCATIONS SECTION
   ========================================================= */

.locations-section {
    padding: 110px 0;

    background: var(--cream);
}

.locations-section .section-intro {
    margin-bottom: 60px;

    text-align: center;
}

.locations-section .section-intro .eyebrow {
    display: inline-block;

    margin-bottom: 16px;

    color: var(--brown);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3px;
    text-transform: uppercase;
}

.locations-section .section-intro h2 {
    margin-bottom: 15px;

    font-family: var(--serif);

    font-size: clamp(42px, 5vw, 65px);
    line-height: 1;

    letter-spacing: -2px;
}

.locations-section .section-intro p {
    max-width: 600px;

    margin: 0 auto;

    color: var(--muted);

    font-size: 15px;
}


/* =========================================================
   LOCATION GRID
   ========================================================= */

.locations-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;
}


/* =========================================================
   LOCATION CARD
   ========================================================= */

.location-card {
    overflow: hidden;

    background: var(--white);

    border: 1px solid var(--border);

    box-shadow:
        0 20px 55px rgba(0, 0, 0, .06);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.location-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 28px 65px rgba(0, 0, 0, .10);
}


/* =========================================================
   LOCATION CARD HEADER
   ========================================================= */

.location-card-header {
    min-height: 105px;

    display: flex;
    align-items: center;

    gap: 20px;

    padding: 25px 28px;

    background: var(--cream-dark);

    border-bottom: 1px solid var(--border);
}

.location-number {
    color: #999;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
}

.location-title {
    flex: 1;
}

.location-title h3 {
    margin-bottom: 4px;

    font-family: var(--serif);

    font-size: 30px;
    line-height: 1.1;

    letter-spacing: -.5px;
}

.location-status {
    color: #52734d;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.location-status.coming {
    color: var(--brown);
}

.location-arrow {
    color: var(--brown);

    font-size: 25px;
    font-weight: 400;

    transition: transform .3s ease;
}

.location-card:hover .location-arrow {
    transform: translateX(5px);
}


/* =========================================================
   LOCATION CARD BODY
   ========================================================= */

.location-card-body {
    padding: 30px;
}

.location-card-body h4 {
    margin-bottom: 12px;

    font-family: var(--serif);

    font-size: 27px;
    line-height: 1.1;
}

.location-card-body .address {
    margin-bottom: 18px;

    color: var(--text);

    font-size: 14px;
    font-weight: 600;

    line-height: 1.7;
}

.location-card-body .description {
    margin-bottom: 25px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   GOOGLE MAP
   ========================================================= */

.map-wrapper {
    width: 100%;

    overflow: hidden;

    background: #eee;

    border-radius: 0;
}

.map-wrapper iframe {
    display: block;

    width: 100%;
    height: 330px;

    border: 0;
}


/* =========================================================
   LOCATION BUTTONS
   ========================================================= */

.location-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 22px;
}

.location-actions .button-primary {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 13px 22px;

    background: var(--black);
    color: var(--white);

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background var(--transition),
        transform var(--transition);
}

.location-actions .button-primary:hover {
    background: var(--brown);

    transform: translateY(-2px);
}

.location-actions .button-secondary {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 13px 21px;

    background: transparent;
    color: var(--black);

    border: 1px solid var(--border);

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}

.location-actions .button-secondary:hover {
    background: var(--black);

    color: var(--white);

    border-color: var(--black);
}


/* =========================================================
   LYNN — COMING SOON
   ========================================================= */

.coming-soon-map {
    min-height: 330px;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    background:
        linear-gradient(
            rgba(245, 240, 234, .96),
            rgba(245, 240, 234, .96)
        ),
        repeating-linear-gradient(
            45deg,
            #eee5dc 0,
            #eee5dc 1px,
            transparent 1px,
            transparent 20px
        );
}

.coming-soon-content {
    padding: 30px;

    text-align: center;
}

.coming-soon-icon {
    width: 60px;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 18px;

    background: var(--black);
    color: var(--white);

    border-radius: 50%;

    font-size: 24px;
}

.coming-soon-content h4 {
    margin-bottom: 8px;

    font-family: var(--serif);

    font-size: 28px;
}

.coming-soon-content p {
    color: var(--brown);
    color: red;

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1.5px;
}


/* =========================================================
   VISIT STRIP
   ========================================================= */

.visit-strip {
    padding: 85px 0;

    background: var(--black);

    color: var(--white);
}

.visit-strip-content {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;
}

.visit-strip h2 {
    margin-bottom: 8px;

    font-family: var(--serif);

    font-size: clamp(35px, 5vw, 55px);

    line-height: 1;

    letter-spacing: -2px;
}

.visit-strip p {
    color: #aaa8a2;

    font-size: 14px;
}

.visit-strip .button-secondary {
    flex-shrink: 0;

    color: var(--white);

    border-color: rgba(255,255,255,.45);
}

.visit-strip .button-secondary:hover {
    background: var(--white);

    color: var(--black);

    border-color: var(--white);
}


/* =========================================================
   LOCATION PAGE — TABLET
   ========================================================= */

@media (max-width: 900px) {

    .locations-hero {
        padding: 90px 0 80px;
    }

    .locations-section {
        padding: 90px 0;
    }

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

    .location-card {
        max-width: 800px;

        width: 100%;

        margin: 0 auto;
    }

    .visit-strip {
        padding: 70px 0;
    }

}


/* =========================================================
   LOCATION PAGE — MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .locations-hero {
        padding: 75px 0 65px;
    }

    .locations-hero h1 {
        font-size: 60px;

        letter-spacing: -2px;
    }

    .locations-hero .hero-text {
        font-size: 15px;
    }

    .locations-section {
        padding: 75px 0;
    }

    .locations-section .section-intro {
        margin-bottom: 40px;
        text-align: center;
    }

    .locations-section .section-intro h2 {
        font-size: 45px;
    }

    .locations-section .section-intro p {
        font-size: 14px;
    }

    .location-card-header {
        min-height: 95px;

        padding: 22px 20px;

        gap: 14px;
    }

    .location-title h3 {
        font-size: 26px;
    }

    .location-status {
        font-size: 9px;

        letter-spacing: 1px;
    }

    .location-card-body {
        padding: 22px;
    }

    .location-card-body h4 {
        font-size: 25px;
    }

    .location-card-body .address,
    .location-card-body .description {
        font-size: 14px;
    }

    .map-wrapper iframe {
        height: 270px;
    }

    .coming-soon-map {
        min-height: 270px;
    }

    .location-actions {
        flex-direction: column;
    }

    .location-actions .button-primary,
    .location-actions .button-secondary {
        width: 100%;
    }

    .visit-strip {
        padding: 65px 0;
    }

    .visit-strip-content {
        flex-direction: column;

        align-items: flex-start;

        gap: 25px;
    }

    .visit-strip h2 {
        font-size: 42px;
    }

    .visit-strip .button-secondary {
        width: 100%;
    }

}


/* =========================================================
   LOCATION PAGE — SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .locations-hero h1 {
        font-size: 52px;
    }

    .locations-section .section-intro h2 {
        font-size: 40px;
    }

    .location-card-header {
        display: grid;

        grid-template-columns: 35px 1fr 25px;
    }

    .location-number {
        align-self: start;
    }

    .location-title {
        min-width: 0;
    }

    .location-arrow {
        grid-column: 3;

        grid-row: 1 / span 2;

        align-self: center;
    }

    .location-status {
        display: block;

        margin-top: 4px;
    }

    .coming-soon-content {
        padding: 20px;
    }

    .coming-soon-content h4 {
        font-size: 24px;
    }

}




/* ######################################################################
   SECTION 05 — ORDER PAGE STYLES
   ###################################################################### */
/* =========================================
   ORDER PAGE
========================================= */

.order-hero {
    padding: 110px 0 90px;
    text-align: center;

    background:
        linear-gradient(
            135deg,
            #f5eee7 0%,
            #faf8f5 55%,
            #eee3d8 100%
        );
}


.order-eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    color: #8b0000;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.order-hero h1 {
    margin-bottom: 22px;

    font-family: "Playfair Display", serif;

    font-size: clamp(50px, 7vw, 85px);

    line-height: 1;

    font-weight: 600;
}


.order-hero h1 em {
    color: #8b0000;

    font-weight: 500;
}


.order-hero p {
    max-width: 600px;

    margin: 0 auto;

    color: #666;

    font-size: 17px;

    line-height: 1.8;
}


/* =========================================
   ORDER SECTION
========================================= */

.order-section {
    padding: 90px 0 110px;

    background: #fff;
}


.order-intro {
    max-width: 650px;

    margin: 0 auto 55px;

    text-align: center;
}


.order-intro h2 {
    margin-bottom: 15px;

    font-family: "Playfair Display", serif;

    font-size: clamp(35px, 5vw, 52px);

    line-height: 1.1;
}


.order-intro p {
    color: #777;

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================
   ORDER OPTIONS
========================================= */

.order-options {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;
}


.order-card {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-between;

    min-height: 390px;

    padding: 40px 30px;

    text-align: center;

    background: #faf8f5;

    border: 1px solid #e6dfd7;

    border-radius: 14px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.order-card:hover {
    transform: translateY(-7px);

    border-color: #d5c7bb;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.08);
}


/* =========================================
   ORDER NUMBER
========================================= */

.order-number {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 55px;
    height: 55px;

    margin: 0 auto 22px;

    background: #8b0000;

    color: #fff;

    border-radius: 50%;

    font-size: 14px;

    font-weight: 700;
}


/* =========================================
   ORDER CARD TEXT
========================================= */

.order-card h3 {
    margin-bottom: 12px;

    font-family: "Playfair Display", serif;

    font-size: 30px;
}


.order-card p {
    max-width: 280px;

    margin: 0 auto 28px;

    color: #777;

    font-size: 14px;

    line-height: 1.7;
}



.order-card img {
    background: transparent !important;
    object-fit: contain;
}


/* =========================================
   ORDER LOGOS
========================================= */

.order-logo {
    width: 230px;
    height: 100px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0 auto 25px;
}


.order-logo img {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;
}


.order-logo img.uber-logo,
.order-logo img.door-logo {
    width: 250px;
}


/* =========================================
   ORDER BUTTON
========================================= */

.order-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    width: 100%;
    max-width: 250px;

    padding: 14px 22px;

    background: #8b0000;

    color: #fff;

    border-radius: 5px;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition: all 0.3s ease;
}


.order-button:hover {
    background: #650000;

    transform: translateY(-2px);
}


/* =========================================
   ORDER INFORMATION
========================================= */

.order-info {
    margin-top: 55px;

    padding: 25px 30px;

    background: #f5f0ea;

    border-radius: 10px;

    text-align: center;
}


.order-info p {
    margin: 0;

    color: #666;

    font-size: 14px;

    line-height: 1.7;
}


.order-info strong {
    color: #222;
}


/* =========================================
   ORDER NAV BUTTON
========================================= */

.nav-button.active {
    background: #a54141;


    color: #fff;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .order-options {
        grid-template-columns: 1fr;

        max-width: 500px;

        margin: 0 auto;
    }


    .order-card {
        min-height: auto;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .order-hero {
        padding: 75px 0 65px;
    }


    .order-section {
        padding: 65px 0 75px;
    }


    .order-card {
        padding: 35px 25px;
    }


    .order-intro {
        margin-bottom: 40px;
    }


    .order-logo {
        width: 210px;
    }


    .order-button {
        max-width: 100%;
    }

}

.location-label {
    display: inline-block;
    margin-top: 20px;
    padding: 8px 16px;
    background: #f1e5d3;
    color: #8a5a35;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
}


/* =========================================
   DARK LOCATION BANNER
========================================== */



.location-banner {
    width: 100%;
    background: #000000 !important;
    color: #ffffff;
    border-bottom: 3px solid #c9a66b;
}

.location-banner-inner {
    min-height: 140px;
    padding: 28px 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.location-banner-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #c9a66b;
    color: #1f0d0d;

    border-radius: 50%;

    font-size: 20px;

    margin-bottom: 10px;
}

.location-banner-label {
    display: block;

    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;

    color: #c9a66b;

    margin-bottom: 6px;
}

.location-banner h2 {
    margin: 0;

    font-family: "Playfair Display", serif;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 700;

    color: #ffffff;
}

.location-banner p {
    margin: 8px 0 0;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 1.5;

    
}


/* =========================================
   MOBILE
========================================== */

@media (max-width: 600px) {

    .location-banner-inner {
        min-height: 125px;
        padding: 24px 15px;
    }

    .location-banner-icon {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .location-banner-label {
        font-size: 9px;
        letter-spacing: 1.8px;
    }

    .location-banner h2 {
        font-size: 24px;
    }

    .location-banner p {
        font-size: 12px;
        max-width: 320px;
    }

}

/* ######################################################################
   SECTION 06 — CATERING PAGE STYLES
   ###################################################################### */
/* =========================================
   CASABLANCA CATERING PAGE
========================================= */
/* =========================================================
 /* ==================================================
   CATERING PAGE
   STATIC — NO MOVING ELEMENTS
================================================== */


/* ==================================================
   HERO
================================================== */

.catering-hero {
    position: relative;

    min-height: 720px;

    overflow: hidden;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            120deg,
            #39231a 0%,
            #67402e 52%,
            #8a5a40 100%
        );

    color: #fff;
}


.catering-hero-inner {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;
}


.catering-hero-content {
    position: relative;
    z-index: 5;

    width: 58%;

    padding-top: 20px;
}


.catering-hero h1 {
    max-width: 720px;

    margin: 0 0 25px;

    font-family: "Playfair Display", serif;

    font-size: clamp(58px, 7vw, 96px);

    font-weight: 600;

    line-height: 1.02;

    letter-spacing: -.05em;
}


.catering-hero h1 em {
    color: #d0a06b;

    font-weight: 500;
}


.catering-hero-content > p {
    max-width: 510px;

    margin-bottom: 35px;

    color: rgba(255,255,255,.78);

    font-size: 17px;
}


/* ==================================================
   STATIC LABEL
================================================== */

.catering-label {
    position: absolute;

    top: 28px;
    right: 35px;

    z-index: 10;

    display: flex;
    align-items: center;

    gap: 12px;

    color: rgba(255,255,255,.68);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .18em;

    text-transform: uppercase;
}


/* ==================================================
   DECORATIVE CIRCLES
================================================== */

.hero-decoration {
    position: absolute;

    border: 1px solid rgba(255,255,255,.11);

    border-radius: 50%;

    pointer-events: none;
}


.hero-decoration-one {
    width: 620px;
    height: 620px;

    right: -170px;
    top: 80px;
}


.hero-decoration-two {
    width: 850px;
    height: 850px;

    right: -300px;
    top: -30px;
}


/* ==================================================
   BUTTONS
================================================== */

.catering-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


.button-primary-light,
.button-outline-light,
.button-primary-dark {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 20px;

    min-height: 54px;

    padding: 0 25px;

    font-size: 13px;

    font-weight: 700;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.button-primary-light {
    background: #fff;

    color: #25211d;
}


.button-primary-light:hover {
    background: #d0a06b;

    color: #fff;
}


.button-outline-light {
    border: 1px solid rgba(255,255,255,.4);

    color: #fff;

    background: transparent;
}


.button-outline-light:hover {
    background: #fff;

    color: #25211d;
}


.button-primary-dark {
    background: #25211d;

    color: #fff;
}


.button-primary-dark:hover {
    background: #8b573d;
}


/* ==================================================
   STATIC CAR
================================================== */

.catering-car {
    position: absolute;

    right: -20px;
    bottom: 0;

    z-index: 4;

    width: min(570px, 48vw);
}


.catering-car img {
    display: block;

    width: 100%;

    height: auto;

    transform: none !important;
}


/* ==================================================
   INTRO
================================================== */

.catering-intro {
    padding: 110px 0;

    background: #f8f5ef;
}


.catering-intro-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;
}


.catering-intro-image {
    height: 600px;

    overflow: hidden;
}


.catering-intro-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.catering-intro-content h2,
.catering-event-content h2 {
    margin-bottom: 25px;

    font-family: "Playfair Display", serif;

    font-size: clamp(45px, 5vw, 68px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -.04em;
}


.catering-intro-content h2 em,
.catering-event-content h2 em,
.section-intro h2 em,
.catering-order-content h2 em {
    color: #c99b62;

    font-weight: 500;
}


.catering-intro-content > p {
    max-width: 540px;

    margin-bottom: 18px;

    color: #716a63;

    font-size: 16px;
}


/* ==================================================
   BENEFITS
================================================== */

.catering-benefits {
    margin-top: 40px;

    border-top: 1px solid #ddd4c8;
}


.catering-benefit {
    display: grid;

    grid-template-columns: 50px 1fr;

    gap: 20px;

    padding: 22px 0;

    border-bottom: 1px solid #ddd4c8;
}


.catering-benefit > span {
    color: #c99b62;

    font-family: "Playfair Display", serif;

    font-size: 15px;
}


.catering-benefit h3 {
    margin-bottom: 5px;

    font-size: 16px;
}


.catering-benefit p {
    color: #716a63;

    font-size: 14px;
}


/* ==================================================
   MENU SECTION
================================================== */

.catering-menu-section {
    padding: 110px 0;

    background: #eee8de;
}


.section-intro {
    max-width: 720px;

    margin-bottom: 55px;
}


.section-intro h2 {
    margin-bottom: 20px;

    font-family: "Playfair Display", serif;

    font-size: clamp(45px, 5vw, 68px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -.04em;
}


.section-intro > p {
    color: #716a63;

    font-size: 16px;
}


/* ==================================================
   CATERING CARDS
================================================== */

.catering-cards {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}


.catering-card {
    background: #fff;

    border: 1px solid rgba(80,60,45,.08);
}


.catering-card-image {
    height: 285px;

    overflow: hidden;
}


.catering-card-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.catering-card-content {
    padding: 30px;
}


.card-number {
    display: block;

    margin-bottom: 14px;

    color: #c99b62;

    font-family: "Playfair Display", serif;

    font-size: 15px;
}


.catering-card h3 {
    margin-bottom: 13px;

    font-family: "Playfair Display", serif;

    font-size: 32px;

    font-weight: 600;
}


.catering-card p {
    min-height: 72px;

    margin-bottom: 24px;

    color: #716a63;

    font-size: 14px;
}


.catering-card a {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    color: #8b573d;

    font-size: 13px;

    font-weight: 700;
}


.catering-card a span {
    font-size: 18px;
}


/* ==================================================
   EVENT
================================================== */

.catering-event {
    padding: 110px 0;

    background: #f8f5ef;
}


.catering-event-grid {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 80px;

    align-items: center;
}


.catering-event-content > p {
    max-width: 520px;

    margin-bottom: 32px;

    color: #716a63;
}


.catering-event-image {
    height: 580px;

    overflow: hidden;
}


.catering-event-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ==================================================
   ORDER
================================================== */

.catering-order {
    padding: 110px 0;

    background: #25211d;

    color: #fff;
}


.catering-order-content {
    max-width: 850px;

    margin: 0 auto;

    text-align: center;
}


.catering-order-content h2 {
    margin-bottom: 20px;

    font-family: "Playfair Display", serif;

    font-size: clamp(45px, 6vw, 75px);

    font-weight: 600;

    line-height: 1.05;

    letter-spacing: -.04em;
}


.catering-order-content > p {
    max-width: 600px;

    margin: 0 auto 32px;

    color: rgba(255,255,255,.68);
}


/* ==================================================
   LOCATIONS
================================================== */

.catering-locations {
    padding: 110px 0;

    background: #f8f5ef;
}


.catering-location-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;
}


.catering-location {
    padding: 40px;

    background: #fff;

    border: 1px solid #ddd4c8;
}


.catering-location h3 {
    margin-bottom: 18px;

    font-family: "Playfair Display", serif;

    font-size: 38px;
}


.catering-location p {
    margin-bottom: 20px;

    color: #716a63;
}


.catering-location a {
    display: block;

    margin-top: 7px;

    color: #8b573d;

    font-size: 14px;

    font-weight: 600;

    word-break: break-word;
}


.catering-location strong {
    color: #8b573d;

    font-size: 14px;
}


/* ==================================================
   IMPORTANT:
   NO MOVEMENT / NO ANIMATION
================================================== */

.catering-hero *,
.catering-intro *,
.catering-menu-section *,
.catering-event *,
.catering-order *,
.catering-locations * {
    animation: none !important;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 900px) {

    .catering-hero {
        min-height: 680px;
    }


    .catering-hero-inner {
        min-height: 680px;
    }


    .catering-hero-content {
        width: 100%;

        padding-bottom: 260px;
    }


    .catering-hero h1 {
        font-size: clamp(52px, 11vw, 78px);
    }


    .catering-car {
        width: 430px;

        right: -80px;
    }


    .catering-intro-grid,
    .catering-event-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .catering-intro-image {
        height: 480px;
    }


    .catering-event-image {
        height: 450px;
    }


    .catering-cards {
        grid-template-columns: 1fr;
    }


    .catering-card-image {
        height: 330px;
    }


    .catering-location-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .catering-hero {
        min-height: 650px;
    }


    .catering-hero-inner {
        min-height: 650px;
    }


    .catering-label {
        display: none;
    }


    .catering-hero-content {
        padding-bottom: 220px;
    }


    .catering-hero h1 {
        font-size: 50px;
    }


    .catering-hero-content > p {
        font-size: 15px;
    }


    .catering-buttons {
        flex-direction: column;

        align-items: stretch;
    }


    .button-primary-light,
    .button-outline-light,
    .button-primary-dark {
        width: 100%;
    }


    .catering-car {
        width: 350px;

        right: -80px;
    }


    .hero-decoration-one {
        width: 430px;
        height: 430px;

        right: -200px;
    }


    .hero-decoration-two {
        width: 560px;
        height: 560px;

        right: -270px;
    }


    .catering-intro,
    .catering-menu-section,
    .catering-event,
    .catering-order,
    .catering-locations {
        padding: 75px 0;
    }


    .catering-intro-image {
        height: 360px;
    }


    .catering-event-image {
        height: 350px;
    }


    .catering-card-image {
        height: 260px;
    }


    .catering-card-content {
        padding: 25px;
    }


    .catering-location {
        padding: 30px;
    }

}




/* ######################################################################
   SECTION 07 — CONTACT PAGE STYLES
   ###################################################################### */
/* =========================================
   CONTACT PAGE
========================================= */

.contact-section {
    background: #f7f3ee;
    padding: 110px 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 90px;
    align-items: start;
}


/* =========================================
   CONTACT FORM WRAPPER
========================================= */

.contact-form-wrapper {
    max-width: 850px;
}

.contact-form-wrapper h2 {
    margin: 12px 0 45px;
    font-family: "Playfair Display", serif;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 500;
    line-height: 1.05;
    color: #51182a;
}

.contact-form-wrapper h2 em {
    font-weight: 500;
}


/* =========================================
   FORM
========================================= */

.contact-form {
    width: 100%;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 9px;

    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    color: #51182a;
}


/* =========================================
   INPUTS
========================================= */

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {

    width: 100%;

    padding: 16px 18px;

    border: 1px solid #d8cec5;
    border-radius: 0;

    background: #fffdf9;

    color: #2e2523;

    font-family: "DM Sans", sans-serif;
    font-size: 15px;

    outline: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


/* =========================================
   PLACEHOLDER
========================================= */

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #9b9089;
    opacity: 1;
}


/* =========================================
   TEXTAREA
========================================= */

.contact-form textarea {
    min-height: 180px;
    resize: vertical;
    line-height: 1.7;
}


/* =========================================
   SELECT
========================================= */

.contact-form select {
    appearance: none;
    cursor: pointer;

    background-image:
        linear-gradient(45deg, transparent 50%, #51182a 50%),
        linear-gradient(135deg, #51182a 50%, transparent 50%);

    background-position:
        calc(100% - 20px) 22px,
        calc(100% - 14px) 22px;

    background-size:
        6px 6px,
        6px 6px;

    background-repeat: no-repeat;
}


/* =========================================
   FOCUS
========================================= */

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {

    border-color: #51182a;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(81, 24, 42, 0.08);
}


/* =========================================
   CHECKBOX
========================================= */

.checkbox-group {
    margin-top: 5px;
    margin-bottom: 30px;
}

.checkbox-label {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;

    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.5;

    text-transform: none !important;

    color: #625854 !important;

    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;

    margin: 1px 0 0;

    flex: 0 0 18px;

    accent-color: #51182a;

    cursor: pointer;
}


/* =========================================
   SUBMIT BUTTON
========================================= */

.form-submit {
    border: none;
    cursor: pointer;

    min-width: 190px;

    padding: 17px 30px;

    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.form-submit:hover {
    background: #6a2138;
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(81, 24, 42, 0.15);
}

.form-submit:active {
    transform: translateY(0);
}


/* =========================================
   CONTACT INFORMATION
========================================= */

.contact-info {
    padding: 45px 40px;

    background: #51182a;

    color: #ffffff;
}

.contact-info h3 {
    margin: 12px 0 40px;

    font-family: "Playfair Display", serif;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 500;
    line-height: 1.1;

    color: #ffffff;
}

.contact-info h3 em {
    color: #ead8c9;
    font-weight: 500;
}


/* =========================================
   CONTACT DETAILS
========================================= */

.contact-detail {
    padding: 22px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.contact-detail:last-of-type {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.contact-detail-label {
    display: block;

    margin-bottom: 9px;

    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.8px;
    text-transform: uppercase;

    color: #d9bca9;
}

.contact-detail a {
    color: #ffffff;

    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;

    text-decoration: none;

    transition: color 0.2s ease;
}

.contact-detail a:hover {
    color: #e8cdbb;
}

.contact-detail p {
    margin: 0;

    color: rgba(255, 255, 255, 0.86);

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================
   SOCIAL LINKS
========================================= */

.contact-social {
    padding-top: 28px;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.social-links a {
    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    border-bottom: 1px solid rgba(255, 255, 255, 0.5);

    padding-bottom: 3px;

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}

.social-links a:hover {
    color: #e8cdbb;
    border-color: #e8cdbb;
}


/* =========================================
   FORM VALIDATION
========================================= */

.contact-form input:invalid:not(:placeholder-shown),
.contact-form textarea:invalid:not(:placeholder-shown) {
    border-color: #b86a6a;
}

.contact-form input:valid:not(:placeholder-shown),
.contact-form textarea:valid:not(:placeholder-shown) {
    border-color: #c9bdb4;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px) {

    .contact-section {
        padding: 80px 0;
    }

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

    .contact-form-wrapper {
        max-width: 100%;
    }

    .contact-info {
        max-width: 100%;
    }

}


@media (max-width: 600px) {

    .contact-section {
        padding: 65px 0;
    }

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

    .contact-form-wrapper h2 {
        margin-bottom: 35px;
    }

    .contact-info {
        padding: 35px 25px;
    }

    .contact-info h3 {
        margin-bottom: 30px;
    }

    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form input[type="tel"],
    .contact-form select,
    .contact-form textarea {
        padding: 15px;
    }

    .form-submit {
        width: 100%;
    }

}


/* =========================================================
   CASABLANCA HOUSE OF CHICKEN
   MAIN STYLESHEET
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    /* =====================================================
       CASABLANCA HOUSE OF CHICKEN
       WARM / SOFT / PREMIUM PALETTE
    ===================================================== */

    /* Main brand colors */
    --black: #4A342C;
    --black-soft: #563F35;
    --black-light: #634A3F;

    /* Warm accent */
    --yellow: #C5A064;
    --yellow-dark: #A98550;

    /* Backgrounds */
    --cream: #FBF7EF;
    --white: #FFFFFF;
    --sand: #F1E8DA;

    /* Moroccan accents */
    --red: #843E48;
    --terracotta: #B96F52;

    /* Text */
    --gray: #756A63;
    --gray-light: #E8DED1;

    --border: rgba(74, 52, 44, 0.12);

    --font-main: "DM Sans", sans-serif;
    --font-display: "Montserrat", sans-serif;

    --container: 1240px;

    --transition: 0.35s ease;
}


/* =========================================================
   RESET
========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {

    font-family: var(--font-main);

    color: var(--black);

    background: var(--cream);

    line-height: 1.6;

    overflow-x: hidden;

}


img,
video {

    display: block;

    width: 100%;

}


img {

    object-fit: cover;

}


a {

    color: inherit;

    text-decoration: none;

}


button {

    font-family: inherit;

}


/* =========================================================
   CONTAINER
========================================================= */

.container {

    width: min(
        calc(100% - 80px),
        var(--container)
    );

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.header {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background: rgba(10, 10, 10, 0.78);

    backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(255,255,255,0.08);

}


.nav {

    min-height: 92px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* =========================================================
   LOGO
========================================================= */

.logo {

    display: flex;

    align-items: center;

    gap: 14px;

    color: var(--white);

}



.brand-name {

    font-family: var(--font-display);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    color: var(--yellow);

    white-space: nowrap;

}


/* =========================================================
   NAVIGATION
========================================================= */

.menu {

    display: flex;

    align-items: center;

    gap: 30px;

}


.menu a {

    position: relative;

    color: rgba(255,255,255,0.88);

    font-size: 14px;

    font-weight: 600;

    transition: var(--transition);

}


.menu a:not(.nav-button)::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    background: var(--yellow);

    transition: var(--transition);

}


.menu a:not(.nav-button):hover,
.menu a.active {

    color: var(--yellow);

}


.menu a:not(.nav-button):hover::after,
.menu a.active::after {

    width: 100%;

}


/* =========================================================
   ORDER BUTTON
========================================================= */

.nav-button {

    background: var(--yellow);

    color: var(--black) !important;

    padding: 13px 22px;

    border-radius: 3px;

    font-weight: 800 !important;

    text-transform: uppercase;

    font-size: 12px !important;

    letter-spacing: 0.5px;

    transition: var(--transition);

}


.nav-button:hover {

    background: var(--white);

    transform: translateY(-2px);

}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu {

    display: none;

    border: 0;

    background: transparent;

    color: var(--white);

    font-size: 30px;

    cursor: pointer;

}


/* =========================================================
   HERO
========================================================= */

.hero {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--black);

}


.hero-video {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 0;

}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(74, 52, 44, 0.78) 0%,
            rgba(74, 52, 44, 0.50) 45%,
            rgba(74, 52, 44, 0.15) 100%
        );
}

.hero::after {

    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;

    height: 180px;

    background: linear-gradient(
        transparent,
        var(--cream)
    );

    opacity: 0.08;

    z-index: 2;

}


.hero-content {

    position: relative;

    z-index: 3;

    color: var(--white);

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    padding-top: 120px;

    padding-bottom: 100px;

}


.hero-text {

    max-width: 760px;

}


.eyebrow {

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: var(--yellow);

}


.hero h1 {

    margin-top: 22px;

    font-family: var(--font-display);

    font-size: clamp(
        55px,
        8vw,
        112px
    );

    line-height: 0.91;

    letter-spacing: -4px;

    font-weight: 900;

}

.hero h1 em {
    color: #D6B477;
    font-style: normal;
}


.hero-description {

    max-width: 650px;

    margin-top: 35px;

    color: rgba(255,255,255,0.78);

    font-size: 17px;

    line-height: 1.8;

}


.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 35px;

}


/* =========================================================
   BUTTONS
========================================================= */

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 54px;

    padding: 0 27px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

    border: 2px solid transparent;

    transition: var(--transition);

}


.button.yellow {

    background: var(--yellow);

    color: var(--black);

}


.button.yellow:hover {

    background: var(--white);

    transform: translateY(-3px);

}


.button.dark {

    background: var(--black);

    color: var(--white);

}


.button.dark:hover {

    background: var(--yellow);

    color: var(--black);

    transform: translateY(-3px);

}


.button.outline-light {

    border-color: rgba(255,255,255,0.7);

    color: var(--white);

}


.button.outline-light:hover {

    background: var(--white);

    color: var(--black);

}


/* =========================================================
   HERO NOTE
========================================================= */

.hero-note {

    display: flex;

    align-items: center;

    gap: 14px;

    text-align: right;

    text-transform: uppercase;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    color: rgba(255,255,255,0.65);

}


.hero-line {

    width: 55px;

    height: 1px;

    background: var(--yellow);

}


/* =========================================================
   INTRO
========================================================= */

.intro {

    padding: 140px 0;

    background: var(--cream);

}


.intro-grid {

    display: grid;

    grid-template-columns: 0.7fr 1.5fr;

    gap: 100px;

}


.intro-content {

    max-width: 850px;

}


.intro h2 {

    font-family: var(--font-display);

    font-size: clamp(
        40px,
        5vw,
        72px
    );

    line-height: 1;

    letter-spacing: -3px;

}


.intro h2 em {

    color: var(--red);

    font-style: normal;

}


.intro-content > p {

    max-width: 720px;

    margin-top: 30px;

    color: #555;

    font-size: 18px;

    line-height: 1.8;

}


/* =========================================================
   TEXT LINK
========================================================= */

.text-link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 25px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.text-link span {

    color: var(--red);

    font-size: 22px;

    transition: var(--transition);

}


.text-link:hover span {

    transform: translateX(7px);

}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 60px;

    margin-bottom: 70px;

}


.section-heading h2 {

    margin-top: 18px;

    font-family: var(--font-display);

    font-size: clamp(
        44px,
        5vw,
        75px
    );

    line-height: 0.95;

    letter-spacing: -3px;

}


.section-heading h2 em {

    color: var(--yellow-dark);

    font-style: normal;

}


.section-heading-right {

    max-width: 430px;

}


.section-heading-right p {

    color: #666;

    line-height: 1.7;

}


/* =========================================================
   MENU CATEGORIES
========================================================= */

.menu-categories {

    padding: 130px 0;

    background: var(--white);

}


.category-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

}


.category-card {

    background: var(--cream);

    overflow: hidden;

    transition: var(--transition);

}


.category-card:hover {

    transform: translateY(-7px);

    box-shadow:
        0 20px 60px rgba(0,0,0,0.12);

}


.category-card.large {

    grid-row: span 2;

}


.category-image {

    position: relative;

    overflow: hidden;

    height: 340px;

}


.category-card.large .category-image {

    height: 560px;

}


.category-image img {

    height: 100%;

    transition:
        transform 0.7s ease;

}


.category-card:hover
.category-image img {

    transform: scale(1.06);

}


.category-number {

    position: absolute;

    top: 20px;

    right: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 45px;

    height: 45px;

    background: var(--yellow);

    color: var(--black);

    font-size: 12px;

    font-weight: 900;

}


.category-info {

    padding: 32px;

}


.category-label {

    color: var(--red);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.category-info h3 {

    margin-top: 8px;

    font-family: var(--font-display);

    font-size: 31px;

    line-height: 1.1;

}


.category-info > p:not(.category-label) {

    margin-top: 13px;

    color: #666;

    line-height: 1.7;

}


/* =========================================================
   FEATURED FOOD
========================================================= */

.featured-food {

    padding: 140px 0;

    background: var(--yellow);

}


.featured-food-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: center;

}


.featured-food-image {

    position: relative;

}


.featured-food-image img {

    height: 650px;

}


.image-badge {

    position: absolute;

    bottom: 30px;

    left: 30px;

    padding: 18px 25px;

    background: var(--black);

    color: var(--yellow);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;

    line-height: 1.5;

}


.featured-food-content h2 {

    margin-top: 20px;

    font-family: var(--font-display);

    font-size: clamp(
        50px,
        6vw,
        82px
    );

    line-height: 0.95;

    letter-spacing: -4px;

}


.featured-food-content h2 em {

    font-style: normal;

    color: var(--black);

}


.featured-food-content > p {

    max-width: 520px;

    margin-top: 30px;

    font-size: 17px;

    line-height: 1.8;

}


.feature-list {

    margin: 35px 0;

    border-top: 1px solid rgba(0,0,0,0.2);

}


.feature-list div {

    display: flex;

    align-items: center;

    gap: 25px;

    padding: 15px 0;

    border-bottom: 1px solid rgba(0,0,0,0.2);

}


.feature-list strong {

    font-size: 11px;

    color: var(--red);

}


.feature-list span {

    font-weight: 700;

}


/* =========================================================
   FOOD VIDEO
========================================================= */

.food-video-section {

    position: relative;

    min-height: 720px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--black);

}


.food-video {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.food-video-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.88),
            rgba(0,0,0,0.28)
        );

}


.food-video-content {

    position: relative;

    z-index: 2;

    color: var(--white);

}


.food-video-content h2 {

    margin: 22px 0 35px;

    font-family: var(--font-display);

    font-size: clamp(
        60px,
        8vw,
        110px
    );

    line-height: 0.88;

    letter-spacing: -5px;

}


.food-video-content h2 em {

    color: var(--yellow);

    font-style: normal;

}


/* =========================================================
   STORY
========================================================= */

.story {

    padding: 140px 0;

    background: var(--cream);

}


.story-grid {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 100px;

    align-items: center;

}


.story-image {

    position: relative;

}


.story-image img {

    height: 650px;

}


.image-caption {

    position: absolute;

    right: 0;

    bottom: 0;

    padding: 17px 25px;

    background: var(--red);

    color: var(--white);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;

}


.story-content h2 {

    margin-top: 20px;

    font-family: var(--font-display);

    font-size: clamp(
        48px,
        5vw,
        78px
    );

    line-height: 0.95;

    letter-spacing: -4px;

}


.story-content h2 em {

    color: var(--red);

    font-style: normal;

}


.story-content p:not(.eyebrow) {

    margin-top: 25px;

    color: #5e5e5e;

    line-height: 1.8;

}


/* =========================================================
   LOCATIONS
========================================================= */

.locations-preview {

    padding: 140px 0;

    background: var(--white);

}


.location-preview-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

}


.location-preview-card {

    background: var(--cream);

}


.preview-image {

    height: 430px;

    overflow: hidden;

}


.preview-image img {

    height: 100%;

    transition: transform 0.7s ease;

}


.location-preview-card:hover
.preview-image img {

    transform: scale(1.05);

}


.preview-info {

    padding: 35px;

}


.preview-info h3 {

    margin-top: 8px;

    font-family: var(--font-display);

    font-size: 35px;

}


.preview-info p:not(.category-label) {

    margin-top: 12px;

    color: #666;

    line-height: 1.7;

}


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

.cta {

    position: relative;

    padding: 150px 0;

    background: var(--black);

    color: var(--white);

    text-align: center;

    overflow: hidden;

}


.cta::before {

    content: "CHICKEN";

    position: absolute;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-5deg);

    font-family: var(--font-display);

    font-size: clamp(
        100px,
        22vw,
        320px
    );

    font-weight: 900;

    color: rgba(255,255,255,0.025);

    white-space: nowrap;

    pointer-events: none;

}


.cta-content {

    position: relative;

    z-index: 2;

}


.cta h2 {

    margin-top: 25px;

    font-family: var(--font-display);

    font-size: clamp(
        55px,
        7vw,
        105px
    );

    line-height: 0.88;

    letter-spacing: -5px;

}


.cta h2 em {

    color: var(--yellow);

    font-style: normal;

}


.cta-description {

    margin: 30px auto;

    color: rgba(255,255,255,0.65);

    font-size: 17px;

}


.cta-buttons {

    display: flex;

    justify-content: center;

    gap: 14px;

    flex-wrap: wrap;

}


.cta-button {

    min-width: 180px;

    padding: 17px 25px;

    background: var(--yellow);

    color: var(--black);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;

    transition: var(--transition);

}


.cta-button:hover {

    background: var(--white);

    transform: translateY(-3px);

}


.cta-button.outline {

    background: transparent;

    color: var(--white);

    border: 1px solid rgba(255,255,255,0.5);

}


.cta-button.outline:hover {

    background: var(--white);

    color: var(--black);

}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    padding: 85px 0 30px;

    background: #090909;

    color: var(--white);

}


.footer-grid {

    display: grid;

    grid-template-columns:
        1.4fr
        0.7fr
        0.8fr
        1.2fr;

    gap: 60px;

}


.footer-brand .logo img {

    width: 120px;

    height: auto;

}


.footer-text {

    margin-top: 25px;

    color: rgba(255,255,255,0.5);

    line-height: 1.8;

}


.footer-links {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

}


.footer-links h4 {

    margin-bottom: 8px;

    color: var(--yellow);

    font-size: 11px;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.footer-links a {

    color: rgba(255,255,255,0.65);

    font-size: 14px;

    transition: var(--transition);

}


.footer-links a:hover {

    color: var(--yellow);

    transform: translateX(4px);

}


.footer-links p {

    max-width: 270px;

    color: rgba(255,255,255,0.55);

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {

    display: flex;

    justify-content: space-between;

    gap: 30px;

    margin-top: 70px;

    padding-top: 25px;

    border-top: 1px solid rgba(255,255,255,0.1);

}


.footer-bottom p {

    color: rgba(255,255,255,0.35);

    font-size: 12px;

}


.footer-legal {

    display: flex;

    gap: 25px;

}


.footer-legal a {

    color: rgba(255,255,255,0.4);

    font-size: 12px;

}


.footer-legal a:hover {

    color: var(--yellow);

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {


    .container {

        width: min(
            calc(100% - 50px),
            var(--container)
        );

    }


    .menu {

        gap: 18px;

    }


    .menu a {

        font-size: 12px;

    }


    .intro-grid,
    .story-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .featured-food-grid {

        grid-template-columns: 1fr;

        gap: 60px;

    }


    .featured-food-image img {

        height: 550px;

    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;

    }

}


@media (max-width: 760px) {


    .container {

        width: calc(100% - 36px);

    }


    /* HEADER */

    .nav {

        min-height: 78px;

    }


  

    .brand-name {

        font-size: 9px;

        letter-spacing: 1.5px;

    }


    .mobile-menu {

        display: block;

    }


    .menu {

        position: absolute;

        top: 78px;

        left: 0;

        width: 100%;

        padding: 25px 20px;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        background: rgba(10,10,10,0.98);

        border-top: 1px solid rgba(255,255,255,0.1);

        opacity: 0;

        visibility: hidden;

        transform: translateY(-10px);

        transition: var(--transition);

    }


    .menu.open {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

    }


    .menu a {

        display: block;

        padding: 15px 0;

        font-size: 14px;

        border-bottom: 1px solid rgba(255,255,255,0.08);

    }


    .menu a:not(.nav-button)::after {

        display: none;

    }


    .nav-button {

        margin-top: 15px;

        text-align: center;

    }


    /* HERO */

    .hero {

        min-height: 850px;

    }


    .hero-content {

        align-items: flex-start;

        padding-top: 180px;

        padding-bottom: 70px;

    }


    .hero h1 {

        font-size: clamp(
            52px,
            16vw,
            88px
        );

        letter-spacing: -3px;

    }


    .hero-description {

        font-size: 15px;

    }


    .hero-note {

        display: none;

    }


    .hero-buttons {

        flex-direction: column;

        align-items: stretch;

    }


    .button {

        width: 100%;

    }


    /* SECTIONS */

    .intro,
    .menu-categories,
    .featured-food,
    .story,
    .locations-preview {

        padding: 90px 0;

    }


    .section-heading {

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

        margin-bottom: 45px;

    }


    .section-heading h2 {

        font-size: 48px;

        letter-spacing: -2px;

    }


    /* CATEGORY GRID */

    .category-grid {

        grid-template-columns: 1fr;

    }


    .category-card.large {

        grid-row: auto;

    }


    .category-image,
    .category-card.large .category-image {

        height: 330px;

    }


    /* FEATURED */

    .featured-food-grid {

        gap: 45px;

    }


    .featured-food-image img {

        height: 430px;

    }


    .featured-food-content h2 {

        font-size: 56px;

    }


    /* VIDEO */

    .food-video-section {

        min-height: 650px;

    }


    .food-video-content h2 {

        font-size: 65px;

        letter-spacing: -3px;

    }


    /* STORY */

    .story-image img {

        height: 430px;

    }


    .story-content h2 {

        font-size: 55px;

    }


    /* LOCATIONS */

    .location-preview-grid {

        grid-template-columns: 1fr;

    }


    .preview-image {

        height: 330px;

    }


    /* CTA */

    .cta {

        padding: 110px 0;

    }


    .cta h2 {

        font-size: 65px;

        letter-spacing: -3px;

    }


    /* FOOTER */

    .footer {

        padding-top: 65px;

    }


    .footer-grid {

        grid-template-columns: 1fr 1fr;

        gap: 45px 25px;

    }


    .footer-brand {

        grid-column: 1 / -1;

    }


    .footer-bottom {

        flex-direction: column;

        margin-top: 50px;

    }

}


@media (max-width: 480px) {


    .hero {

        min-height: 780px;

    }


    .hero h1 {

        font-size: 50px;

    }


    .intro h2 {

        font-size: 43px;

    }


    .category-info {

        padding: 25px;

    }


    .category-info h3 {

        font-size: 27px;

    }


    .featured-food-content h2,
    .story-content h2 {

        font-size: 48px;

    }


    .food-video-content h2 {

        font-size: 55px;

    }


    .cta h2 {

        font-size: 53px;

    }


    .footer-grid {

        grid-template-columns: 1fr;

    }


    .footer-brand {

        grid-column: auto;

    }

}



/* ######################################################################
   SECTION 09 — PAGE-SPECIFIC STYLES
   ###################################################################### */
/* =====================================================
   CONSOLIDATED PAGE STYLES (previously embedded in HTML)
   ===================================================== */
.inline-aboutlynn-0 { color: rgb(81, 24, 42);
                        font-size: 14px;
                        font-weight: 600;
                        letter-spacing: 2.5px;
                        text-transform: uppercase; }
.inline-aboutrevere-1 { color: rgb(81, 24, 42);
                        font-size: 14px;
                        font-weight: 600;
                        letter-spacing: 2.5px;
                        text-transform: uppercase; }
.inline-contactlynn-2 { color: rgb(81, 24, 42);
                        font-size: 14px;
                        font-weight: 600;
                        letter-spacing: 2.5px;
                        text-transform: uppercase; }
.inline-contactrevere-3 { color: rgb(81, 24, 42);
                        font-size: 14px;
                        font-weight: 600;
                        letter-spacing: 2.5px;
                        text-transform: uppercase; }

/* ===== index.html: page-specific styles ===== */


    /* =========================================
       RESET
    ========================================= */

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


    html,
    body {
        width: 100%;
        min-height: 100%;
    }



    body {
        font-family: "Inter", sans-serif;
        background: #111;
        color: #fff;
    }


    intro-text {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}


    .intro h1,
.card h2 {
    
    font-weight: 600;
    
}


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


    /* =========================================
       MAIN PAGE
    ========================================= */

    .landing-page {
        position: relative;

        width: 100%;
        min-height: 100vh;
        min-height: 100svh;

        overflow: hidden;

        display: flex;
        flex-direction: column;

        background: #111;
    }


    /* =========================================
       BACKGROUND VIDEO
    ========================================= */

    .background-video {
        position: absolute;

        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        object-fit: cover;

        z-index: 0;
    }


    /* =========================================
       DARK VIDEO OVERLAY
    ========================================= */

    .video-overlay {
        position: absolute;

        inset: 0;

        z-index: 1;

        background:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.35),
                rgba(0, 0, 0, 0.18) 35%,
                rgba(0, 0, 0, 0.72) 100%
            );
    }


    /* =========================================
       HEADER
    ========================================= */

    .header {
        position: relative;

        z-index: 5;

        width: 100%;

        padding: 30px 6%;

        display: flex;
        justify-content: center;
        align-items: center;
    }


    .logo img {
        display: block;

        width: 190px;
        height: auto;
    }


    /* =========================================
       CONTENT
    ========================================= */

    .content {
        position: relative;

        z-index: 5;

        flex: 1;

        width: 100%;

        display: flex;
        flex-direction: column;

        justify-content: center;
        align-items: center;

        padding: 30px 6% 50px;
    }


    /* =========================================
       INTRO
    ========================================= */

    .intro {
        text-align: center;

        width: 100%;
        max-width: 850px;

        margin-bottom: 45px;
    }


    .eyebrow {
        font-size: 11px;

        font-weight: 700;

        letter-spacing: 4px;

        text-transform: uppercase;

        color: rgba(255, 255, 255, 0.9);

        margin-bottom: 18px;
    }


    .intro h1 {
        font-family: "Playfair Display", serif;

        font-size: clamp(
            45px,
            7vw,
            78px
        );

        font-weight: 500;

        line-height: 0.98;

        letter-spacing: -2px;

        margin-bottom: 22px;
    }


    .intro h1 em {
        color: #e53939;

        font-style: italic;
    }


    .intro-text {
        max-width: 600px;

        margin: 0 auto;

        font-size: 16px;

        line-height: 1.7;

        color:
            rgba(255, 255, 255, 0.88);
    }


    /* =========================================
       CARDS
    ========================================= */

    .cards {
    width: 100%;
    max-width: 1250px;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 15px;
}



    /* =========================================
       CARD
    ========================================= */

    .card {
        position: relative;

        min-height: 280px;

        padding: 32px;

        display: flex;

        align-items: flex-end;

        overflow: hidden;

        border:
            1px solid
            rgba(255, 255, 255, 0.38);

        background:
            rgba(0, 0, 0, 0.30);

        backdrop-filter: blur(9px);

        -webkit-backdrop-filter: blur(9px);

        transition:
            transform 0.35s ease,
            background 0.35s ease,
            border-color 0.35s ease,
            box-shadow 0.35s ease;
    }


    .card:hover {
        transform: translateY(-8px);

        background:
            rgba(0, 0, 0, 0.48);

        border-color:
            rgba(255, 255, 255, 0.8);

        box-shadow:
            0 20px 50px
            rgba(0, 0, 0, 0.3);
    }


    /* =========================================
       CARD LIGHT EFFECT
    ========================================= */

    .card::before {
        content: "";

        position: absolute;

        inset: 0;

        background:
            linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.14),
                transparent 45%
            );

        pointer-events: none;
    }


    /* =========================================
       CARD CONTENT
    ========================================= */

    .card-content {
        position: relative;

        z-index: 2;

        width: 100%;
    }


    .card-number {
        font-size: 10px;

        font-weight: 700;

        letter-spacing: 2px;

        text-transform: uppercase;

        color:
            rgba(255, 255, 255, 0.7);

        margin-bottom: 10px;
    }


    .card h2 {
        font-family:
            "Playfair Display",
            serif;

        font-size:
            clamp(34px, 4vw, 48px);

        font-weight: 500;

        line-height: 1;

        margin-bottom: 14px;
    }


    .card-text {
        max-width: 320px;

        font-size: 13px;

        line-height: 1.6;

        color:
            rgba(255, 255, 255, 0.85);
    }


    /* =========================================
       CARD ARROW
    ========================================= */

    .arrow {
        display: flex;

        align-items: center;

        justify-content: center;

        width: 44px;
        height: 44px;

        margin-top: 20px;

        border:
            1px solid
            rgba(255, 255, 255, 0.6);

        border-radius: 50%;

        font-size: 20px;

        transition:
            background 0.3s ease,
            color 0.3s ease,
            transform 0.3s ease;
    }


    .card:hover .arrow {
        background: #fff;

        color: #111;

        transform:
            translateX(5px);
    }


    /* =========================================
       FOOTER
    ========================================= */

    .footer {
        position: relative;

        z-index: 5;

        width: 100%;

        text-align: center;

        padding: 18px 20px 25px;

        font-size: 10px;

        color:
            rgba(255, 255, 255, 0.65);
    }


    /* =========================================
       VIDEO LABEL
    ========================================= */

    .video-label {
        position: absolute;

        z-index: 4;

        right: 25px;
        bottom: 25px;

        font-size: 9px;

        letter-spacing: 3px;

        text-transform: uppercase;

        color:
            rgba(255, 255, 255, 0.6);

        writing-mode:
            vertical-rl;
    }


    /* =========================================
       TABLET
    ========================================= */

    @media (max-width: 900px) {

        .cards {
            grid-template-columns: 1fr;

            max-width: 600px;
        }


        .card {
            min-height: 190px;
        }


        .intro {
            margin-bottom: 30px;
        }

    }


    /* =========================================
       MOBILE
    ========================================= */

    @media (max-width: 600px) {

        .landing-page {
            min-height: 100svh;
        }


        .header {
            padding:
                22px 20px;
        }


        .logo img {
            width: 150px;
        }


        .content {
            padding:
                20px
                20px
                30px;
        }


        .intro {
            margin-bottom: 25px;
        }


        .eyebrow {
            font-size: 9px;

            letter-spacing: 2.5px;

            margin-bottom: 13px;
        }


        .intro h1 {
            font-size:
                clamp(
                    40px,
                    13vw,
                    58px
                );

            letter-spacing: -1px;

            margin-bottom: 16px;
        }


        .intro-text {
            font-size: 13px;

            line-height: 1.6;
        }


        .cards {
            gap: 10px;
        }


        .card {
            min-height: 170px;

            padding: 22px;
        }


        .card-number {
            font-size: 9px;

            margin-bottom: 7px;
        }


        .card h2 {
            font-size: 30px;

            margin-bottom: 7px;
        }


        .card-text {
            font-size: 11px;

            line-height: 1.5;
        }


        .arrow {
            width: 36px;
            height: 36px;

            margin-top: 12px;

            font-size: 17px;
        }


        .video-label {
            display: none;
        }


        .footer {
            padding:
                12px
                15px
                18px;

            font-size: 9px;
        }

    }


    /* =========================================
       VERY SMALL PHONES
    ========================================= */

    @media (max-width: 380px) {

        .card {
            min-height: 155px;

            padding: 18px;
        }


        .card h2 {
            font-size: 27px;
        }


        .card-text {
            font-size: 10px;
        }

    }

@media (max-width: 1100px) {

    .cards {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
    }

}


@media (max-width: 600px) {

    .cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

}







.inline-index-5 { color: #e53939; }
.inline-locationlynn-6 { color: rgb(81, 24, 42); font-size: 14px; font-weight: 600; letter-spacing: 2.5px;
 text-transform: uppercase; }
.inline-locationrevere-7 { color: rgb(81, 24, 42); font-size: 14px; font-weight: 600; letter-spacing: 2.5px;
 text-transform: uppercase; }
.inline-lynn-8 { color: rgb(81, 24, 42); font-size: 14px; font-weight: 600; letter-spacing: 2.5px;
 text-transform: uppercase; }
.inline-lynn-9 { color: red; }
.inline-menulynn-10 { color: rgb(81, 24, 42); font-size: 14px; font-weight: 600; letter-spacing: 2.5px;
 text-transform: uppercase; }
.inline-menurevere-11 { color: rgb(81, 24, 42); font-size: 14px; font-weight: 600; letter-spacing: 2.5px;
 text-transform: uppercase; }
.inline-order-lynn-12 { color: rgb(81, 24, 42); font-size: 14px; font-weight: 600; letter-spacing: 2.5px;
 text-transform: uppercase; }
.inline-order-revere-13 { color: rgb(81, 24, 42); font-size: 14px; font-weight: 600; letter-spacing: 2.5px;
 text-transform: uppercase; }
.inline-revere-14 { color: rgb(81, 24, 42); font-size: 14px; font-weight: 600; letter-spacing: 2.5px;
 text-transform: uppercase; }
.inline-revere-15 { color: red; }

/* ===== wholesale.html: page-specific styles ===== */


        /* =========================================
           WHOLESALE HERO
        ========================================== */

        .wholesale-hero {

            background: #f5f1e8;

            padding: 120px 20px 110px;

            text-align: center;

            border-bottom: 1px solid #e5dfd2;
        }


        .wholesale-hero .eyebrow {

            color: #c28603;

            font-weight: 700;

            letter-spacing: 2px;

            font-size: 13px;

            margin-bottom: 25px;
        }


        .wholesale-hero h1 {

            font-family: "Playfair Display", serif;

            font-size: clamp(48px, 8vw, 85px);

            line-height: 1.05;

            color: #51182a;

            margin-bottom: 30px;
        }


        .wholesale-hero h1 em {

            color: #c28603;

            font-weight: 500;
        }


        .wholesale-hero p {

            max-width: 720px;

            margin: auto;

            font-size: 19px;

            line-height: 1.8;

            color: #555;
        }


        /* =========================================
           INTRO
        ========================================== */

        .wholesale-intro {

            padding: 100px 20px;

            background: white;
        }


        .wholesale-intro-grid {

            max-width: 1100px;

            margin: auto;

            display: grid;

            grid-template-columns: 0.7fr 1.5fr;

            gap: 80px;
        }


        .wholesale-label {

            padding-top: 10px;
        }


        .wholesale-label .eyebrow {

            color: #c28603;

            font-size: 13px;

            font-weight: 700;

            letter-spacing: 2px;
        }


        .wholesale-content h2 {

            font-family: "Playfair Display", serif;

            color: #51182a;

            font-size: clamp(35px, 5vw, 55px);

            line-height: 1.15;

            margin-bottom: 25px;
        }


        .wholesale-content h2 em {

            color: #c28603;

            font-weight: 500;
        }


        .wholesale-content p {

            color: #666;

            font-size: 17px;

            line-height: 1.8;

            margin-bottom: 20px;
        }


        /* =========================================
           DISTRIBUTOR
        ========================================== */

        .distributor-section {

            background: #51182a;

            color: white;

            padding: 100px 20px;
        }


        .distributor-grid {

            max-width: 1100px;

            margin: auto;

            display: grid;

            grid-template-columns: 0.8fr 1.4fr;

            gap: 80px;

            align-items: center;
        }


        .distributor-label .eyebrow {

            color: #e4b83e;

            font-size: 13px;

            font-weight: 700;

            letter-spacing: 2px;
        }


        .distributor-content h2 {

            font-family: "Playfair Display", serif;

            font-size: clamp(35px, 5vw, 55px);

            line-height: 1.15;

            margin-bottom: 25px;
        }


        .distributor-content h2 em {

            color: #e4b83e;

            font-weight: 500;
        }


        .distributor-content p {

            color: #eee;

            font-size: 17px;

            line-height: 1.8;

            margin-bottom: 20px;
        }


        .distributor-name {

            display: inline-block;

            margin-top: 10px;

            padding: 14px 25px;

            border: 1px solid #e4b83e;

            color: #e4b83e;

            font-size: 22px;

            font-weight: 700;

            letter-spacing: 1px;
        }


        /* =========================================
           WHAT WE OFFER
        ========================================== */

        .wholesale-services {

            padding: 100px 20px;

            background: #faf9f6;
        }


        .services-heading {

            max-width: 1100px;

            margin: 0 auto 50px;

            text-align: center;
        }


        .services-heading .eyebrow {

            color: #c28603;

            font-size: 13px;

            font-weight: 700;

            letter-spacing: 2px;

            margin-bottom: 15px;
        }


        .services-heading h2 {

            font-family: "Playfair Display", serif;

            color: #51182a;

            font-size: 45px;
        }


        .services-grid {

            max-width: 1100px;

            margin: auto;

            display: grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap: 25px;
        }


        .service-card {

            background: white;

            padding: 40px 30px;

            border: 1px solid #e9e4da;

            transition: 0.25s;
        }


        .service-card:hover {

            transform: translateY(-5px);

            box-shadow:
                0 15px 35px
                rgba(0, 0, 0, 0.08);
        }


        .service-number {

            color: #c28603;

            font-size: 14px;

            font-weight: 700;

            letter-spacing: 2px;

            margin-bottom: 20px;
        }


        .service-card h3 {

            font-family: "Playfair Display", serif;

            color: #51182a;

            font-size: 27px;

            margin-bottom: 15px;
        }


        .service-card p {

            color: #666;

            line-height: 1.7;

            font-size: 16px;
        }


        /* =========================================
           CONTACT CTA
        ========================================== */

        .wholesale-contact {

            padding: 110px 20px;

            text-align: center;

            background: white;
        }


        .wholesale-contact .eyebrow {

            color: #c28603;

            font-size: 13px;

            font-weight: 700;

            letter-spacing: 2px;

            margin-bottom: 20px;
        }


        .wholesale-contact h2 {

            font-family: "Playfair Display", serif;

            color: #51182a;

            font-size: clamp(40px, 6vw, 65px);

            line-height: 1.1;

            margin-bottom: 25px;
        }


        .wholesale-contact h2 em {

            color: #c28603;

            font-weight: 500;
        }


        .wholesale-contact > p {

            max-width: 650px;

            margin: 0 auto 30px;

            color: #666;

            font-size: 17px;

            line-height: 1.8;
        }


        .contact-info {

            margin-bottom: 35px;
        }


        .contact-info a {

            display: block;

            color: #51182a;

            text-decoration: none;

            font-size: 19px;

            font-weight: 600;

            margin: 10px;
        }


        .contact-info a:hover {

            color: #c28603;
        }


        .wholesale-button {

            display: inline-block;

            padding: 15px 30px;

            background: #51182a;

            color: white;

            text-decoration: none;

            font-weight: 700;

            transition: 0.25s;
        }


        .wholesale-button:hover {

            background: #c28603;
        }


        /* =========================================
           MOBILE
        ========================================== */

        @media (max-width: 750px) {

            .wholesale-intro-grid,

            .distributor-grid {

                grid-template-columns: 1fr;

                gap: 35px;
            }


            .services-grid {

                grid-template-columns: 1fr;
            }


            .wholesale-hero {

                padding: 90px 20px;
            }


            .wholesale-intro,

            .distributor-section,

            .wholesale-services,

            .wholesale-contact {

                padding-top: 70px;

                padding-bottom: 70px;
            }

        }

    



/* ######################################################################
   SECTION 10 — FINAL OVERRIDES AND ACCESSIBILITY
   ###################################################################### */
/* =====================================================
   GLOBAL DESIGN POLISH & ACCESSIBILITY
   ===================================================== */
:root { --brand-burgundy:#51182a; --brand-gold:#b98a35; --focus-ring:#b98a35; }
:where(a,button,input,textarea,select):focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
:where(button,.nav-button,.button-primary,.button-secondary) { transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
:where(button,.nav-button,.button-primary,.button-secondary):hover { transform:translateY(-1px); }
:where(p,li) { overflow-wrap:break-word; }
:where(img,video,iframe) { max-width:100%; }
@media(max-width:767px) { .container { width:calc(100% - 36px); } h1 { overflow-wrap:break-word; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Landing introduction: transparent over video, readable white text */
.landing-page .intro {
  background: transparent;
  color: #fff;
  padding: 24px 16px 12px;
  margin-bottom: 30px;
  position: relative;
  z-index: 2;
}
.landing-page .intro h1 { color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,.55); }
.landing-page .intro h1 em { color: #f0c47e; }
.landing-page .intro .intro-text {
  color: #fff;
  font-size: clamp(16px,1.8vw,19px);
  line-height: 1.75;
  text-shadow: 0 2px 12px rgba(0,0,0,.75);
}
@media(max-width:767px) { .landing-page .intro { padding: 12px 4px; margin-bottom: 22px; } }

/* =========================================================
   SHARED HEADER — LOCATION LABEL & ORDER CTA
   Clear contrast for both Revere and Lynn pages
========================================================= */
.header .logo .location-label {
  display: inline-flex; align-items: center;
  padding: 9px 13px; border-radius: 7px;
  background: #fff5e9; color: #51182a;
  border: 1px solid #d9b98f;
  font-family: "DM Sans", sans-serif; font-size: 12px;
  font-style: normal; font-weight: 800; letter-spacing: .11em;
  line-height: 1.3; text-transform: uppercase; white-space: nowrap;
}
.header .menu .nav-button {
  display: inline-flex; align-items: center; justify-content: center;
  background: #51182a !important; color: #ffffff !important;
  border: 2px solid #51182a; border-radius: 9px;
  padding: 12px 22px; font-weight: 800 !important;
  letter-spacing: .04em; text-decoration: none;
  box-shadow: 0 3px 9px rgba(81,24,42,.16);
}
.header .menu .nav-button:hover,
.header .menu .nav-button:focus-visible {
  background: #712b43 !important; border-color: #712b43;
  color: #ffffff !important; box-shadow: 0 5px 14px rgba(81,24,42,.22);
}
.header .menu .nav-button:focus-visible,
.header .logo:focus-visible {outline: 3px solid #c58b4a;outline-offset: 3px;}
@media (max-width: 540px) {
  .header .logo .location-label {font-size: 10px; letter-spacing: .04em; padding: 7px 8px;}
  .header .menu .nav-button {width: 100%;}
}

/* Location names: clear charcoal text, no red/burgundy and no colored badge */
.header .logo .location-label,
.header .logo .inline-revere-14 {
  color: #252525 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  font-style: normal;
  text-shadow: none;
}
@media (max-width:540px) {
  .header .logo .location-label { font-size: 11px; letter-spacing: .02em; }
}

/* High-contrast location names on dark headers */
.header .logo .location-label, .header .logo .inline-revere-14 { color: #ffffff !important; background: transparent !important; text-shadow: 0 1px 3px rgba(0,0,0,.35) !important; }

/* === Casablanca refined navigation: original white-label edition === */
/* The location is a subtitle under the logo, never a badge/button. */
.header .logo {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  text-decoration: none !important;
  flex-shrink: 0;
}
.header .logo img { display: block; max-width: 100%; height: auto; }
.header .logo .location-label {
  display: block !important;
  width: 100%;
  color: #ffffff !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font: 700 12px/1.45 "DM Sans", Arial, sans-serif !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: .15em !important;
  white-space: nowrap;
  text-shadow: 0 1px 5px rgba(0,0,0,.75) !important;
}
/* Restrained champagne-cream CTA complements the dark header. */
.header .menu .nav-button {
  background: #f0dfbf !important;
  color: #2b241b !important;
  border: 1px solid #f0dfbf !important;
  border-radius: 5px !important;
  padding: 12px 21px !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  letter-spacing: .055em !important;
}
.header .menu .nav-button:hover, .header .menu .nav-button:focus-visible {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #201d19 !important;
}
.header .menu .nav-coming-soon {
  display: inline-block; padding: 11px 15px;
  color: #ffffff; border: 1px solid rgba(255,255,255,.6);
  border-radius: 5px; font: 700 12px/1.4 "DM Sans", Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
}
.lynn-opening-notice {
  max-width: 750px; margin: 120px auto 35px; padding: 25px;
  text-align: center; background: #fffaf2; color: #2b241b;
  border: 1px solid #ead9bd; border-radius: 8px;
}
.lynn-opening-notice strong {font-size: 22px;}
.lynn-opening-notice p {margin: 12px 0;}
.lynn-opening-notice a {color: #51182a; font-weight: 700;}
@media (max-width: 767px) {
  .header .logo {gap: 2px !important;}
  .header .logo .location-label {font-size: 10px !important; letter-spacing: .1em !important;}
  .header .menu .nav-coming-soon {margin-top: 15px; text-align: center; width: 100%;}
}

/* ============================================================
   CASABLANCA | REFINED HOMEPAGE HERO & WELCOME (OCT 2026)
   Compatible with original HTML and revised hero-title markup.
   Other pages, header location labels and ordering CTA retained.
   ============================================================ */

.hero {
  min-height: 610px;
  background: #1c1a18;
}
.hero .hero-overlay {
  background: linear-gradient(90deg,
    rgba(19, 18, 17, .78) 0%,
    rgba(19, 18, 17, .60) 47%,
    rgba(19, 18, 17, .23) 100%);
}
.hero .hero-content {
  padding: 72px 0 76px;
}
.hero .hero-text {
  max-width: 650px;
  color: #fff;
}
.hero .hero-text > .eyebrow {
  margin: 0 0 17px;
  color: #f0d6aa;
  font-size: 11px;
  letter-spacing: .19em;
  line-height: 1.6;
}
/* Original HTML has extra br tags; suppress them for tidy spacing. */
.hero .hero-text > br,
.hero .hero-text > h2 > br { display: none; }
.hero .hero-text > h2,
.hero .hero-text > h1,
.hero .hero-title {
  max-width: 660px;
  margin: 0 0 20px;
  color: #fff;
  font-family: var(--serif, 'Playfair Display', serif);
  font-size: clamp(38px, 4.8vw, 65px);
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: -.025em;
}
.hero .hero-title span {
  display: block;
  margin-top: 8px;
  font-size: .58em;
  font-weight: 400;
  letter-spacing: .005em;
}
.hero .hero-description {
  max-width: 570px;
  margin: 0;
  color: rgba(255,255,255,.91);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
}
.hero .hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 28px;
}
.hero .hero-buttons .button {
  min-height: 48px;
  padding: 13px 25px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .025em;
}
.hero .hero-buttons .button.dark {
  background: #ecd4aa;
  border-color: #ecd4aa;
  color: #24201b;
}
.hero .hero-buttons .button.dark:hover {
  background: #fff0d5;
  border-color: #fff0d5;
  color: #24201b;
}
.hero .hero-buttons .button.light {
  background: transparent;
  border-color: rgba(255,255,255,.83);
  color: #fff;
}
.hero .hero-buttons .button.light:hover {
  background: #fff;
  border-color: #fff;
  color: #24201b;
}
.hero .hero-note {
  right: 0;
  bottom: 48px;
  color: #fff;
}
.hero .hero-line { background: rgba(255,255,255,.8); }

.intro {
  padding: 78px 0 84px;
  background: var(--cream, #f8f7f3);
}
.intro .intro-grid {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(0, 1.6fr);
  gap: clamp(30px, 5vw, 75px);
  align-items: start;
}
.intro .intro-label .eyebrow {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .16em;
}
.intro .intro-content { max-width: 750px; }
.intro .intro-content h2 {
  margin: 0;
  font-family: var(--serif, 'Playfair Display', serif);
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.035em;
}
.intro .intro-content h2 span { display: block; font-style: italic; font-weight: 400; }
.intro .intro-content > p {
  max-width: 650px;
  margin-top: 21px;
  color: var(--muted, #77746d);
  font-size: 15px;
  line-height: 1.85;
}
.intro .intro-content .text-link { margin-top: 22px; }

@media (max-width: 900px) {
  .hero { min-height: 590px; }
  .hero .hero-content { padding: 70px 0; }
  .hero .hero-note { display: none; }
  .intro { padding: 66px 0 72px; }
  .intro .intro-grid { grid-template-columns: 1fr; gap: 20px; }
  .intro .intro-label .eyebrow { margin-top: 0; }
}
@media (max-width: 650px) {
  .hero { min-height: 565px; align-items: center; }
  .hero .hero-overlay {
    background: linear-gradient(90deg, rgba(19,18,17,.80), rgba(19,18,17,.49));
  }
  .hero .hero-content { padding: 60px 0 58px; }
  .hero .hero-text > h2,
  .hero .hero-text > h1,
  .hero .hero-title {
    font-size: clamp(35px, 9vw, 47px);
    letter-spacing: -.025em;
  }
  .hero .hero-description { font-size: 14px; line-height: 1.75; }
  .hero .hero-buttons { flex-direction: column; gap: 10px; margin-top: 24px; }
  .hero .hero-buttons .button { width: 100%; }
  .intro { padding: 52px 0 58px; }
  .intro .intro-content h2 { font-size: clamp(30px, 8vw, 38px); letter-spacing: -.025em; }
  .intro .intro-content > p { margin-top: 17px; font-size: 14px; line-height: 1.8; }
}

/* =========================================================
   SITE-WIDE PARAGRAPH READABILITY — OCTOBER 2026
   Higher contrast and comfortable reading on all devices.
   Existing brand and location styles remain intact.
   ========================================================= */
:root { --body-copy-readable: #41403d; --body-copy-on-dark: #f1eee9; }

/* Default text on light backgrounds */
body { font-size: 16px; }
main p, section p, article p, .location-card p, .preview-info p {
  line-height: 1.8;
}
.intro .intro-content > p,
.story .story-content > p:not(.eyebrow),
.section-heading-right > p,
.location-card-body p,
.location-preview-card .preview-info > p,
.menu-intro,
.menu-heading > p:last-child,
.locations-section .section-intro p,
.wholesale-content p,
.service-card p,
.wholesale-contact > p {
  color: var(--body-copy-readable);
  opacity: 1;
}
/* Dark backgrounds need light text, not the dark copy above. */
.hero .hero-description,
.hero .hero-note p,
.coffee-feature .coffee-content > p:not(.eyebrow),
.cta .cta-description,
.footer .footer-text,
.footer .footer-links p,
.footer .footer-links a,
.distributor-content p,
.menu-order p {
  color: var(--body-copy-on-dark);
  opacity: 1;
}
/* Keep text visible on the hero video, including original HTML. */
.hero .hero-text > h1,
.hero .hero-text > h2,
.hero .hero-title { color: #fff; }
.hero .hero-text .eyebrow { color: #f0d6aa; }
.hero .hero-description { text-shadow: 0 1px 5px rgba(0,0,0,.22); }
/* Comfortable line lengths and readable links */
.intro .intro-content > p,
.story .story-content > p:not(.eyebrow) { max-width: 65ch; }
.text-link { text-underline-offset: 4px; }
@media (max-width: 650px) {
  body { font-size: 15px; }
  .intro .intro-content > p,
  .story .story-content > p:not(.eyebrow),
  .hero .hero-description { font-size: 15px; line-height: 1.75; }
}

/* =========================================================
   FINAL CONTRAST FIX — light backgrounds / light text
   Keep dark-section and video text light; make copy on
   cream, white and pastel sections dark and readable.
   ========================================================= */
:root { --readable-ink: #292724; --readable-secondary: #45413d; }

/* Default body copy, including previously unstyled paragraphs. */
body { color: var(--readable-ink); }
main p, section p, article p, main li, section li {
  opacity: 1;
}

/* Explicit light-surface sections: never use pale paragraph text. */
.intro:not(.landing-page .intro) .intro-content > p,
.story .story-content > p:not(.eyebrow),
.featured-menu .section-heading-right > p,
.locations-preview .preview-info > p,
.locations-section .section-intro p,
.location-card .location-card-body p,
.location-choice p,
.menu-page .menu-heading > p:last-child,
.menu-hero .menu-intro,
.wholesale-intro .wholesale-content p,
.wholesale-services .service-card p,
.wholesale-contact > p {
  color: var(--readable-secondary) !important;
  opacity: 1 !important;
  text-shadow: none;
}

/* Headings and small captions on cream/white surfaces. */
.intro:not(.landing-page .intro) .intro-content h2,
.story .story-content h2,
.locations-preview .preview-info h3,
.location-card .location-card-body h4,
.wholesale-intro .wholesale-content h2,
.wholesale-services .service-card h3 {
  color: var(--readable-ink);
}

/* Video and truly dark sections keep bright, readable copy. */
.hero .hero-description,
.hero .hero-note p,
.coffee-feature .coffee-content > p:not(.eyebrow),
.cta .cta-description,
.footer .footer-text,
.footer .footer-links p,
.footer .footer-links a,
.distributor-section .distributor-content p,
.menu-order p,
.landing-page .intro .intro-text {
  color: #f5f2ed !important;
  opacity: 1 !important;
}

/* Retain contrast on the background-video homepage. */
.hero .hero-text > h1,
.hero .hero-text > h2,
.hero .hero-title { color: #fff !important; }
.hero .hero-overlay {
  background: linear-gradient(90deg, rgba(17,16,15,.85) 0%, rgba(17,16,15,.64) 52%, rgba(17,16,15,.30) 100%);
}
@media (max-width: 650px) {
  .hero .hero-overlay {
    background: linear-gradient(90deg, rgba(17,16,15,.87), rgba(17,16,15,.62));
  }
}

/* =========================================================
   HEADER NAVIGATION VISIBILITY — Revere / Lynn / Wholesale / Catering
   The header sits above the homepage video. Ensure these links
   remain legible regardless of the moving image behind them.
   ========================================================= */
.header .menu > a:not(.nav-button),
.header .menu a:not(.nav-button):not(.nav-coming-soon) {
  color: #ffffff !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.65);
}
.header .menu > a:not(.nav-button):hover,
.header .menu > a:not(.nav-button).active,
.header .menu > a:not(.nav-button):focus-visible {
  color: #f4d9a9 !important;
}
.header .logo .location-label,
.header .logo .inline-revere-14 {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.85) !important;
}
/* On narrow screens the dropdown has a light background. */
@media (max-width: 650px) {
  .header .menu.open a:not(.nav-button):not(.nav-coming-soon),
  .header .menu.open > a:not(.nav-button) {
    color: #24211e !important;
    text-shadow: none !important;
  }
  .header .menu.open a:not(.nav-button):hover,
  .header .menu.open a:not(.nav-button).active {
    color: #785233 !important;
  }
}


/* CASABLANCA — DISTINCT, HIGH-CONTRAST NAVIGATION LABELS */
/* Warm champagne-gold against the dark transparent header. */
.header .menu > a:not(.nav-button):not(.nav-coming-soon),
.header .menu a:not(.nav-button):not(.nav-coming-soon) {
  color: #f5ce8c !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.9) !important;
}
.header .menu a:not(.nav-button):not(.nav-coming-soon):hover,
.header .menu a:not(.nav-button):not(.nav-coming-soon).active,
.header .menu a:not(.nav-button):not(.nav-coming-soon):focus-visible {
  color: #ffffff !important;
}
.header .menu a:not(.nav-button):not(.nav-coming-soon)::after {
  background: #f5ce8c !important;
}
/* Keep links dark and legible if the mobile menu has a light surface. */
@media (max-width: 650px) {
  .header .menu.open a:not(.nav-button):not(.nav-coming-soon) {
    color: #30251c !important;
    text-shadow: none !important;
  }
  .header .menu.open a:not(.nav-button):not(.nav-coming-soon):hover,
  .header .menu.open a:not(.nav-button):not(.nav-coming-soon).active {
    color: #80501f !important;
  }
}


/* =========================================================
   LANDING PAGE — FOUR DESTINATION CARDS
   Readable on moving video and bright frames; does not affect
   header navigation, catering cards, or other page components.
   ========================================================= */
.landing-page .cards .card {
    background: rgba(16, 15, 14, .88);
    border: 1px solid rgba(245, 206, 140, .52);
    color: #ffffff;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .28);
}
.landing-page .cards .card:hover,
.landing-page .cards .card:focus-visible {
    background: rgba(23, 21, 19, .96);
    border-color: #f5ce8c;
}
.landing-page .cards .card .card-number {
    color: #f5ce8c !important;
    opacity: 1;
    font-size: 11px;
    font-weight: 800;
}
.landing-page .cards .card h2 {
    color: #ffffff !important;
    opacity: 1;
    text-shadow: none;
}
.landing-page .cards .card .card-text {
    color: #f5f2ec !important;
    opacity: 1 !important;
    font-size: 14px;
    line-height: 1.75;
}
.landing-page .cards .card .inline-index-5 {
    color: #f5ce8c !important;
    font-weight: 800;
}
.landing-page .cards .card .arrow {
    color: #f5ce8c;
    border-color: rgba(245, 206, 140, .75);
}
.landing-page .cards .card:hover .arrow {
    background: #f5ce8c;
    color: #171717;
}
@media (max-width: 650px) {
    .landing-page .cards .card { padding: 26px; }
    .landing-page .cards .card .card-text { font-size: 14px; }
}

/* Lynn card — clearly visible red Coming Soon label */
.cards .card .card-text strong.inline-index-5,
.landing-page .cards .card .inline-index-5 {
    color: #ff5555 !important;
    font-weight: 800 !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

/* =========================================================
   MOBILE HEADER — VISIBLE MENU LINKS AND HOVER / TAP STATES
   ========================================================= */
@media (max-width: 650px) {
  .header .menu,
  .header .menu.open {
    background: #faf7f1 !important;
  }
  .header .menu.open a:not(.nav-button):not(.nav-coming-soon),
  .header .menu.open > a:not(.nav-button):not(.nav-coming-soon) {
    display: block;
    color: #24211e !important;
    background: transparent;
    opacity: 1 !important;
    text-shadow: none !important;
    border-radius: 5px;
    padding: 13px 12px;
    transition: background-color .2s ease, color .2s ease;
  }
  .header .menu.open a:not(.nav-button):not(.nav-coming-soon):hover,
  .header .menu.open a:not(.nav-button):not(.nav-coming-soon):focus-visible,
  .header .menu.open a:not(.nav-button):not(.nav-coming-soon):active,
  .header .menu.open a:not(.nav-button):not(.nav-coming-soon).active {
    background: #e9dcc9 !important;
    color: #302016 !important;
    text-shadow: none !important;
  }
  .header .menu.open .nav-button,
  .header .menu.open a.nav-button {
    background: #30251d !important;
    color: #ffffff !important;
    border: 1px solid #30251d !important;
    opacity: 1 !important;
  }
  .header .menu.open .nav-button:hover,
  .header .menu.open .nav-button:focus-visible,
  .header .menu.open .nav-button:active {
    background: #6b432c !important;
    color: #ffffff !important;
    border-color: #6b432c !important;
  }
  .header .mobile-menu {
    color: #24211e !important;
    border-color: #766653 !important;
    background: #faf7f1 !important;
  }
  .header .mobile-menu:hover,
  .header .mobile-menu:focus-visible,
  .header .mobile-menu:active {
    background: #30251d !important;
    color: #ffffff !important;
    border-color: #30251d !important;
  }
}

/* =========================================================
   CASABLANCA — REFINED MOBILE NAVIGATION (2026)
   Elegant ivory panel, understated separators, clear states
   ========================================================= */
@media (max-width: 650px) {
  .header .menu.open {
    padding: 16px 18px 22px !important;
    background: #fbf8f3 !important;
    border: 1px solid #e8dfd2 !important;
    border-top: 0 !important;
    box-shadow: 0 18px 38px rgba(29, 23, 19, .15) !important;
    border-radius: 0 0 14px 14px;
    gap: 5px !important;
  }
  .header .menu.open a:not(.nav-button):not(.nav-coming-soon) {
    padding: 14px 16px !important;
    border-radius: 9px !important;
    color: #332b25 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: .025em;
    line-height: 1.35;
    background: transparent !important;
    transition: background .2s ease, color .2s ease, transform .2s ease !important;
  }
  .header .menu.open a:not(.nav-button):not(.nav-coming-soon):hover,
  .header .menu.open a:not(.nav-button):not(.nav-coming-soon):focus-visible {
    background: #efe7dc !important;
    color: #583e2d !important;
    transform: translateX(3px);
  }
  .header .menu.open a:not(.nav-button):not(.nav-coming-soon).active,
  .header .menu.open a:not(.nav-button):not(.nav-coming-soon):active {
    background: #e9dfd1 !important;
    color: #35271e !important;
  }
  .header .menu.open a.nav-button {
    display: flex !important;
    justify-content: center;
    width: 100%;
    margin: 12px 0 0 !important;
    padding: 15px 20px !important;
    border-radius: 9px !important;
    background: #453328 !important;
    color: #fff !important;
    border: 1px solid #453328 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .045em;
    box-shadow: 0 6px 14px rgba(40, 27, 20, .12);
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease !important;
  }
  .header .menu.open a.nav-button:hover,
  .header .menu.open a.nav-button:focus-visible {
    background: #76533a !important;
    border-color: #76533a !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 9px 18px rgba(40, 27, 20, .17);
  }
  .header .mobile-menu {
    width: 44px;
    height: 44px;
    border-radius: 10px !important;
    border: 1px solid #d8cbb9 !important;
    background: #fbf8f3 !important;
    color: #33271e !important;
    box-shadow: 0 2px 7px rgba(29, 23, 19, .05);
    transition: background .2s ease, color .2s ease, border-color .2s ease !important;
  }
  .header .mobile-menu:hover,
  .header .mobile-menu:focus-visible,
  .header .mobile-menu:active {
    background: #453328 !important;
    color: #fff !important;
    border-color: #453328 !important;
  }
}

/* Mobile navigation — square corners */
@media (max-width: 650px) {
  .header .menu.open,
  .header .menu.open a,
  .header .menu.open a.nav-button,
  .header .mobile-menu {
    border-radius: 0 !important;
  }
}


/* CASABLANCA — welcome label readability fix */
.intro .intro-label .eyebrow,
.intro .eyebrow {
  color: #67452f !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.5;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
}

/* =====================================================
   CASABLANCA — EDITORIAL WELCOME SECTION
   Use with .intro > .container.intro-modern markup
   ===================================================== */
.intro { background:#f8f7f3; padding:85px 0; }
.intro .intro-modern { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:70px; }
.intro .intro-modern .intro-content { max-width:540px; }
.intro .intro-modern .eyebrow { display:block; color:#805b3d!important; font-size:12px; font-weight:700; letter-spacing:2.5px; margin:0 0 22px; opacity:1!important; visibility:visible!important; text-shadow:none; }
.intro .intro-modern h2 { font-family:"Playfair Display",Georgia,serif; font-size:clamp(35px,4vw,55px); font-weight:500; line-height:1.18; letter-spacing:-1px; color:#211c18!important; margin:0; }
.intro .intro-modern h2 span { display:block; margin-top:14px; font-size:.56em; font-style:italic; font-weight:400; color:#926b4e!important; letter-spacing:0; }
.intro .intro-modern .intro-divider { width:55px; height:2px; background:#b89568; margin:27px 0; }
.intro .intro-modern .intro-description { color:#49443e!important; font-size:16px; line-height:1.9; margin:0 0 28px; opacity:1!important; }
.intro .intro-modern .intro-link { display:inline-flex; align-items:center; gap:20px; padding-bottom:9px; border-bottom:1px solid #805b3d; color:#30251d!important; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; text-decoration:none; transition:color .3s ease; }
.intro .intro-modern .intro-link span { font-size:20px; transition:transform .3s ease; }
.intro .intro-modern .intro-link:hover { color:#926b4e!important; }
.intro .intro-modern .intro-link:hover span { transform:translateX(5px); }
.intro .intro-modern .intro-visual { position:relative; height:470px; overflow:hidden; background:#e9e1d6; border-radius:0!important; }
.intro .intro-modern .intro-visual img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; border-radius:0!important; }
.intro .intro-modern .intro-visual:hover img { transform:scale(1.035); }
.intro .intro-modern .intro-image-label { position:absolute; bottom:22px; left:22px; padding:17px 25px; background:rgba(255,255,255,.96); color:#30251d; border-radius:0!important; }
.intro .intro-modern .intro-image-label span { display:block; font-size:10px; font-weight:700; letter-spacing:2px; color:#805b3d; }
.intro .intro-modern .intro-image-label strong { display:block; margin-top:5px; font-family:"Playfair Display",Georgia,serif; font-size:19px; font-weight:500; }
@media(max-width:768px) {
 .intro { padding:55px 0; }
 .intro .intro-modern { grid-template-columns:1fr; gap:32px; }
 .intro .intro-modern h2 { font-size:38px; }
 .intro .intro-modern .intro-description { font-size:15px; line-height:1.8; }
 .intro .intro-modern .intro-visual { height:340px; }
 .intro .intro-modern .intro-image-label { bottom:15px; left:15px; padding:12px 18px; }
}

/* CASABLANCA — REFINED FEATURED MENU AND STORY (2026) */
.featured-menu { padding: 88px 0 94px; background: #fffdf9; }
.featured-menu .section-heading { display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); align-items:end; gap:64px; margin-bottom:40px; }
.featured-menu .section-heading .eyebrow, .story .story-content .eyebrow { display:block; color:#805b3d!important; opacity:1!important; visibility:visible!important; font-size:12px; font-weight:700; letter-spacing:2.4px; margin:0 0 16px; }
.featured-menu .section-heading h2 { color:#211c18!important; font-family:'Playfair Display',Georgia,serif; font-size:clamp(36px,4.1vw,56px); font-weight:500; line-height:1.14; margin:0; }
.featured-menu .section-heading h2 em { color:#896346; font-weight:400; }
.featured-menu .section-heading-right { max-width:480px; }
.featured-menu .section-heading-right p { color:#49443e!important; opacity:1!important; font-size:16px; line-height:1.8; margin:0 0 19px; }
.featured-menu .section-heading-right .text-link { display:inline-flex; align-items:center; gap:16px; color:#523927!important; font-size:13px; font-weight:700; text-decoration:none; border-bottom:1px solid #92745a; padding-bottom:8px; }
.featured-menu .featured-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch; }
.featured-menu .food-card, .featured-menu .food-card.large { display:flex; flex-direction:column; grid-column:auto; grid-row:auto; width:auto; min-width:0; background:#f8f6f1; border:1px solid #eee8de; border-radius:0!important; overflow:hidden; box-shadow:none; }
.featured-menu .food-image { position:relative; height:auto; aspect-ratio: 4 / 3; overflow:hidden; background:#eae1d5; }
.featured-menu .food-image img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.featured-menu .food-card:hover .food-image img { transform:scale(1.035); }
.featured-menu .food-number { position:absolute; top:16px; left:16px; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; background:rgba(255,253,249,.95); color:#513a29; font-size:12px; font-weight:700; border-radius:0!important; }
.featured-menu .food-info { padding:27px 26px 30px; display:block; flex:1; }
.featured-menu .food-category { color:#282019!important; font-family:'Playfair Display',Georgia,serif; font-size:26px; font-weight:500; line-height:1.25; margin:0 0 13px; }
.featured-menu .food-info p { color:#504940!important; opacity:1!important; font-size:15px; line-height:1.75; margin:0; }
.story { padding:88px 0; background:#f5f1ea; }
.story .story-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(38px,6vw,90px); align-items:center; }
.story .story-image { position:relative; min-width:0; height:500px; overflow:hidden; border-radius:0!important; }
.story .story-image img { display:block; width:100%; height:100%; object-fit:cover; }
.story .image-caption { position:absolute; bottom:20px; left:20px; padding:13px 19px; color:#493322!important; background:#fffdf9!important; border-radius:0!important; font-size:12px; letter-spacing:1.7px; font-weight:700; }
.story .story-content { max-width:520px; }
.story .story-content h2 { color:#241c17!important; font-family:'Playfair Display',Georgia,serif; font-size:clamp(38px,4.2vw,58px); line-height:1.14; font-weight:500; margin:0 0 22px; }
.story .story-content h2 em { color:#8a6447; font-weight:400; }
.story-divider { width:52px; height:2px; background:#b3936c; margin:0 0 24px; }
.story .story-content p:not(.eyebrow) { color:#4c463e!important; opacity:1!important; font-size:16px; line-height:1.85; margin:0 0 17px; }
.story .story-content .button.dark { display:inline-flex; align-items:center; justify-content:center; background:#453328!important; border:1px solid #453328!important; color:white!important; padding:15px 24px; border-radius:0!important; margin-top:14px; text-decoration:none; }
.story .story-content .button.dark:hover { background:#76533a!important; border-color:#76533a!important; }
@media (max-width:900px) { .featured-menu .section-heading { gap:30px; } .featured-menu .featured-grid { gap:16px; } .featured-menu .food-info { padding:22px 20px 25px; } .story .story-grid { gap:32px; } .story .story-image { height:440px; } }
@media (max-width:700px) { .featured-menu { padding:58px 0 65px; } .featured-menu .section-heading { grid-template-columns:1fr; gap:18px; margin-bottom:30px; } .featured-menu .featured-grid { grid-template-columns:1fr; gap:22px; } .featured-menu .food-image { aspect-ratio: 5 / 3; } .featured-menu .food-category { font-size:25px; } .story { padding:58px 0; } .story .story-grid { grid-template-columns:1fr; gap:30px; } .story .story-image { height:340px; } .story .story-content { max-width:none; } }

/* =========================================================
   FIX: WELCOME SECTION MUST SPAN FULL PAGE WIDTH
   Older landing-page CSS restricted .intro to max-width:850px.
   ========================================================= */
section.intro:has(> .intro-modern) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 90px 0 !important;
  background: #f8f7f3 !important;
  color: #30251d !important;
  text-align: left !important;
  float: none !important;
}
section.intro > .container.intro-modern {
  width: min(1180px, calc(100% - 50px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 60px !important;
}
section.intro > .intro-modern > .intro-content {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
  text-align: left !important;
}
section.intro > .intro-modern > .intro-visual {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 470px !important;
  overflow: hidden !important;
  background: #eee8df !important;
  border-radius: 0 !important;
}
section.intro > .intro-modern > .intro-visual > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  filter: none !important;
}
section.intro > .intro-modern > .intro-visual > .intro-image-label {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 18px 22px !important;
  background: rgba(48,37,29,.86) !important;
  color: white !important;
  text-align: center !important;
  border-radius: 0 !important;
}
section.intro > .intro-modern > .intro-visual > .intro-image-label strong { color: white !important; }
@media (max-width: 768px) {
  section.intro:has(> .intro-modern) { padding: 60px 0 !important; }
  section.intro > .container.intro-modern {
    width: calc(100% - 32px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }
  section.intro > .intro-modern > .intro-content { grid-column: 1 !important; grid-row: 1 !important; }
  section.intro > .intro-modern > .intro-visual { grid-column: 1 !important; grid-row: 2 !important; height: 340px !important; }
}

/* =========================================================
   CASABLANCA — MAP LOCATION CARDS (REVERE / LYNN)
   Use with location-map iframe markup in locations-preview.
   ========================================================= */
.locations-preview { background: #f8f7f3; padding: 105px 0; }
.locations-preview .location-preview-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px; align-items: stretch;
}
.locations-preview .location-preview-card {
  display: flex; flex-direction: column; min-width: 0;
  background: #fffdf9; border: 1px solid #e4dcd1;
  border-radius: 0; overflow: hidden;
  box-shadow: none;
}
.locations-preview .location-preview-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(48,37,29,.08);
}
.locations-preview .location-map { height: 300px; width: 100%; background: #eee8df; overflow: hidden; }
.locations-preview .location-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.locations-preview .preview-info { padding: 32px 34px 34px; flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.locations-preview .location-preview-status {
  display: inline-block; color: #45694b; font: 700 11px/1.4 "DM Sans",sans-serif;
  letter-spacing: 2px; text-transform: uppercase;
}
.locations-preview .location-preview-status.coming { color: #926640; }
.locations-preview .preview-info h3 {
  margin: 12px 0 14px; color: #30251d;
  font: 500 clamp(30px,3vw,38px)/1.2 "Playfair Display",serif;
  letter-spacing: -.5px;
}
.locations-preview .preview-info > p {
  min-height: 54px; margin: 0; color: #63584f;
  font-size: 14px; line-height: 1.8;
}
.locations-preview .location-preview-actions {
  width: 100%; margin-top: auto; padding-top: 23px;
  border-top: 1px solid #e8e0d6;
}
.locations-preview .location-preview-actions a,
.locations-preview .location-preview-actions span {
  display: inline-block; color: #805b3d; font-size: 12px;
  font-weight: 700; letter-spacing: 1px;
}
.locations-preview .location-preview-actions a:hover { color: #30251d; }
@media (max-width: 768px) {
  .locations-preview { padding: 70px 0; }
  .locations-preview .location-preview-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .locations-preview .location-map { height: 260px; }
  .locations-preview .preview-info { padding: 26px; }
}


/* ============================================================
   CASABLANCA — SITE-WIDE DESIGN SYSTEM (2026)
   This final layer resolves older overlapping declarations.
   Palette: ivory / espresso / warm brown. Square edges.
   ============================================================ */
:root { --cream:#f8f7f3; --cream-dark:#f1ebe3; --text:#30251d; --muted:#60564e; --brown:#805b3d; --container:1180px; }
html { scroll-padding-top:100px; }
body:not([data-page="index"]) { background:#f8f7f3!important; color:#30251d; font-family:"DM Sans",Arial,sans-serif; line-height:1.7; }
body:not([data-page="index"]) main { width:100%; max-width:none; }
body:not([data-page="index"]) main > section { max-width:none; }
.container { width:min(1180px,calc(100% - 48px)); max-width:1180px; margin-inline:auto; }
:where(h1,h2,h3) { overflow-wrap:break-word; }
:where(p,li) { overflow-wrap:break-word; }
:where(a,button,input,textarea,select):focus-visible { outline:3px solid #b78c63; outline-offset:3px; }
:where(button,input,textarea,select) { font:inherit; }
:where(.location-preview-card,.location-card,.food-card,.button,.nav-button,.location-map,.location-map-link,.preview-image) { border-radius:0!important; }
/* Header, branding and navigation */
body:not([data-page="index"]) .header { background:#231d19!important; border-bottom:1px solid #514336!important; }
body:not([data-page="index"]) .header .menu > a:not(.nav-button) { color:#fffaf2!important; opacity:1!important; }
body:not([data-page="index"]) .header .menu > a:not(.nav-button):hover,
body:not([data-page="index"]) .header .menu > a.active { color:#e3c7a7!important; }
body:not([data-page="index"]) .header .logo .location-label { color:#fffaf2!important; opacity:1!important; display:block; font-size:12px; font-weight:700; letter-spacing:1.2px; text-align:center; }
body:not([data-page="index"]) .header .nav-button { background:#e8d4b9!important; border:1px solid #e8d4b9!important; color:#271d17!important; font-weight:700!important; border-radius:0!important; }
body:not([data-page="index"]) .header .nav-coming-soon { color:#f5e3cc!important; border-color:#ad8d69!important; }
/* Typography and readable surfaces */
body:not([data-page="index"]) :where(.intro-content,.story-content,.preview-info,.food-info,.section-heading-right) p { opacity:1!important; }
body:not([data-page="index"]) :where(.intro,.featured-menu,.story,.locations-preview) { color:#30251d; }
body:not([data-page="index"]) .eyebrow { color:#805b3d; }
/* Welcome section: two genuinely separate columns */
body[data-page="revere"] section.intro { display:block!important; width:100%!important; max-width:none!important; background:#f8f7f3!important; color:#30251d!important; padding:88px 0!important; margin:0!important; }
body[data-page="revere"] section.intro > .intro-modern { display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:clamp(28px,5vw,70px)!important; align-items:center!important; width:min(1180px,calc(100% - 48px))!important; max-width:1180px!important; margin:0 auto!important; }
body[data-page="revere"] .intro-modern > .intro-content { grid-column:1!important; grid-row:1!important; width:auto!important; min-width:0!important; position:relative!important; background:none!important; color:#30251d!important; }
body[data-page="revere"] .intro-modern > .intro-visual { grid-column:2!important; grid-row:1!important; width:100%!important; min-width:0!important; height:470px!important; position:relative!important; background:#e9e1d6!important; overflow:hidden!important; }
body[data-page="revere"] .intro-modern > .intro-visual > img { display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; opacity:1!important; filter:none!important; }
body[data-page="revere"] .intro-modern > .intro-visual::before,body[data-page="revere"] .intro-modern > .intro-visual::after { content:none!important; }
body[data-page="revere"] .intro-modern .intro-description { color:#51473f!important; }
/* Location cards: current Google Maps links instead of old embedded images */
.locations-preview { background:#f8f7f3!important; }
.locations-preview .location-preview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.locations-preview .location-preview-card { background:#fff!important; border:1px solid #ded5c9!important; overflow:hidden; }
.location-map-link { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; min-height:230px; padding:28px; text-align:center; background:linear-gradient(135deg,#f2ebe1,#e4d8c9)!important; color:#30251d!important; text-decoration:none; }
.location-map-link .map-symbol { font-size:36px; line-height:1; }
.location-map-link strong { font-family:"Playfair Display",Georgia,serif; font-size:27px; font-weight:500; }
.location-map-link small { font-size:13px; color:#67564a; }
.location-map-link:hover { background:#e9dccb!important; }
.location-map-link.coming { cursor:default; }
.locations-preview .preview-info { color:#30251d!important; }
.locations-preview .preview-info > p { color:#60564e!important; }
/* Keep existing location-page map boxes readable */
.locations-section .location-card { background:#fff; }
/* Responsive */
@media(max-width:900px) { body:not([data-page="index"]) .header .mobile-menu { color:#fff!important; border-color:#cbb9a2!important; } }
@media(max-width:768px) {
  .container { width:calc(100% - 32px); }
  body[data-page="revere"] section.intro { padding:58px 0!important; }
  body[data-page="revere"] section.intro > .intro-modern { width:calc(100% - 32px)!important; grid-template-columns:minmax(0,1fr)!important; gap:30px!important; }
  body[data-page="revere"] .intro-modern > .intro-content { grid-column:1!important; grid-row:1!important; }
  body[data-page="revere"] .intro-modern > .intro-visual { grid-column:1!important; grid-row:2!important; height:340px!important; }
  .locations-preview .location-preview-grid { grid-template-columns:minmax(0,1fr); }
  .location-map-link { min-height:185px; }
  body:not([data-page="index"]) .header .menu { background:#241d18!important; }
  body:not([data-page="index"]) .header .menu a { color:#fffaf2!important; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* ============================================================
   MOBILE NAVIGATION — HIGH CONTRAST, VISIBLE WITHOUT HOVER
   Casablanca 2026 | dark espresso menu, ivory navigation text
   ============================================================ */
@media (max-width: 900px) {
  body:not([data-page="index"]) .header .menu.open,
  body:not([data-page="index"]) .header nav.menu.open {
    background: #241d18 !important;
    border: 1px solid #675443 !important;
    box-shadow: 0 18px 36px rgba(0,0,0,.23) !important;
    border-radius: 0 !important;
  }
  body:not([data-page="index"]) .header .menu.open > a:not(.nav-button),
  body:not([data-page="index"]) .header .menu.open a:not(.nav-button):not(.nav-coming-soon) {
    display: block !important;
    color: #fffaf2 !important;
    -webkit-text-fill-color: #fffaf2 !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
    background: transparent !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    line-height: 1.5 !important;
    padding: 14px 16px !important;
    border-radius: 0 !important;
    transform: none !important;
  }
  body:not([data-page="index"]) .header .menu.open > a:not(.nav-button):hover,
  body:not([data-page="index"]) .header .menu.open > a:not(.nav-button):focus-visible,
  body:not([data-page="index"]) .header .menu.open > a:not(.nav-button).active {
    color: #f4d6ad !important;
    -webkit-text-fill-color: #f4d6ad !important;
    background: #3c2e25 !important;
  }
  body:not([data-page="index"]) .header .menu.open > a.nav-button {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
    background: #e8d4b9 !important;
    color: #271d17 !important;
    -webkit-text-fill-color: #271d17 !important;
    font-weight: 750 !important;
    opacity: 1 !important;
    border-radius: 0 !important;
  }
  body:not([data-page="index"]) .header .menu.open > a.nav-button:hover,
  body:not([data-page="index"]) .header .menu.open > a.nav-button:focus-visible {
    background: #f6e4cb !important;
    color: #271d17 !important;
    -webkit-text-fill-color: #271d17 !important;
  }
  body:not([data-page="index"]) .header .menu.open .nav-coming-soon {
    color: #f4d6ad !important;
    opacity: 1 !important;
  }
  body:not([data-page="index"]) .header .mobile-menu {
    background: #f8f1e7 !important;
    color: #241d18 !important;
    border: 1px solid #d2bfa9 !important;
    border-radius: 0 !important;
  }
}

/* ============================================================
   LOCATIONS PAGE — VISIBLE HERO TITLE
   Override inherited white hero text on the light background.
   ============================================================ */
body[data-page="locationrevere"] .locations-hero h1,
body[data-page="locationlynn"] .locations-hero h1,
body[data-page="locationrevere"] .locations-hero .hero-content h1,
body[data-page="locationlynn"] .locations-hero .hero-content h1 {
  color: #30251d !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
}
body[data-page="locationrevere"] .locations-hero h1 em,
body[data-page="locationlynn"] .locations-hero h1 em {
  color: #805b3d !important;
  opacity: 1 !important;
}

/* ============================================================
   READABLE PARAGRAPHS — CONTRAST BY SECTION BACKGROUND
   Light surfaces: dark espresso. Dark surfaces: warm ivory.
   ============================================================ */
:root {
  --paragraph-on-light: #40372f;
  --paragraph-on-dark: #f5eee5;
}
/* Base paragraphs and descriptions on normal/light backgrounds */
body:not([data-page="index"]) main p,
body:not([data-page="index"]) main .hero-text,
body:not([data-page="index"]) main .hero-description {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.8;
}
body:not([data-page="index"]) main :is(
  .intro, .intro-modern, .featured-menu, .story, .locations-preview,
  .locations-hero, .locations-section, .location-card, .location-preview-card,
  .menu-page, .menu-heading, .menu-showcase, .order-section,
  .wholesale-intro, .distributor-section, .contact-section,
  .about-section, .catering-intro, .catering-section
) p {
  color: var(--paragraph-on-light) !important;
  opacity: 1 !important;
}
/* Dark areas need light paragraphs even if nested components have old colors */
body:not([data-page="index"]) main :is(
  .coffee-feature, .coffee-content, .cta, .menu-order,
  .catering-hero, .wholesale-hero
) p {
  color: var(--paragraph-on-dark) !important;
  opacity: 1 !important;
}
/* Cards inside dark sections can be light, so restore dark copy there */
body:not([data-page="index"]) main :is(
  .coffee-feature, .cta, .menu-order, .catering-hero, .wholesale-hero
) :is(.location-card, .location-preview-card, .order-card, .menu-card) p {
  color: var(--paragraph-on-light) !important;
}
@media (max-width: 650px) {
  body:not([data-page="index"]) main p {
    font-size: 15px;
    line-height: 1.75;
  }
}

/* Locations page Option 2 — Warm & Welcoming */
body:is([data-page="locationrevere"],[data-page="locationlynn"]) .locations-hero-warm{background:#f7f1e8!important;padding:clamp(50px,7vw,100px) 0!important;border-bottom:1px solid #e8d9c7}
.locations-warm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.03fr);gap:clamp(28px,5vw,80px);align-items:center}
.locations-hero-warm .warm-eyebrow{color:#876348!important;font-size:12px!important;font-weight:700;letter-spacing:.18em;margin-bottom:22px}
body:is([data-page="locationrevere"],[data-page="locationlynn"]) .locations-hero-warm h1{color:#30251d!important;font-family:"Playfair Display",Georgia,serif;font-size:clamp(43px,5vw,72px);font-weight:500;letter-spacing:-.035em;line-height:1.13;margin:0 0 24px}
body:is([data-page="locationrevere"],[data-page="locationlynn"]) .locations-hero-warm h1 em{color:#956c4d!important}
body:is([data-page="locationrevere"],[data-page="locationlynn"]) .locations-hero-warm .warm-description{color:#51463e!important;font-size:clamp(16px,1.25vw,18px)!important;line-height:1.85;max-width:530px;margin:0 0 30px}
.warm-actions{display:flex;flex-wrap:wrap;gap:14px}.warm-actions a{display:inline-flex;align-items:center;justify-content:center;padding:15px 22px;font-size:14px;font-weight:700;text-decoration:none}.warm-primary{background:#382820;color:#fffaf3!important;border:1px solid #382820}.warm-primary:hover{background:#654730;color:white!important}.warm-secondary{color:#382820!important;border:1px solid #a78d76}.warm-secondary:hover{background:#e9ddcf}
.warm-photo{position:relative;overflow:hidden;background:#e5d7c6}.warm-photo img{display:block;width:100%;height:clamp(340px,37vw,520px);object-fit:cover}.warm-photo span{position:absolute;bottom:0;left:0;right:0;padding:28px 24px 18px;background:linear-gradient(transparent,rgba(26,18,13,.8));color:white!important;font-size:11px;font-weight:700;letter-spacing:.14em}
@media(max-width:800px){.locations-warm-grid{grid-template-columns:1fr;gap:35px}.warm-photo img{height:340px}}
@media(max-width:480px){.warm-actions a{width:100%}.warm-photo img{height:270px}}

/* ABOUT — EDITORIAL PHOTO HERO, 2026 */
body[data-page^="about"] .about-editorial-hero {
  background:#f7f1e8 !important;
  color:#33271f !important;
  padding:clamp(62px,8vw,112px) 0;
  overflow:hidden;
}
.about-editorial-grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,95px);align-items:center}
.about-editorial-copy {min-width:0}
body[data-page^="about"] .about-editorial-kicker {font-size:11px !important;letter-spacing:.2em;font-weight:700;color:#9b7452 !important;margin:0 0 23px}
body[data-page^="about"] .about-editorial-copy h1 {font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:clamp(42px,5vw,72px);line-height:1.13;letter-spacing:-.035em;color:#30231d !important;margin:0 0 25px}
body[data-page^="about"] .about-editorial-copy h1 em {color:#986b4a !important;font-weight:500}
body[data-page^="about"] .about-editorial-lead {color:#54483e !important;line-height:1.85;font-size:clamp(16px,1.35vw,19px) !important;max-width:540px;margin:0 0 27px}
.about-editorial-buttons {display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.about-editorial-buttons a {font-size:14px;font-weight:700;text-decoration:none}
.about-editorial-btn {display:inline-flex;gap:18px;align-items:center;padding:16px 22px;background:#392b22;color:#fff !important;transition:background .2s}
.about-editorial-btn:hover {background:#775337}
.about-editorial-link {color:#392b22 !important;border-bottom:1px solid #ad8a6b;padding:8px 0}
body[data-page^="about"] .about-editorial-signature {margin:32px 0 0;color:#866c56 !important;font-size:11px !important;letter-spacing:.1em;text-transform:uppercase}
.about-editorial-photos {position:relative;padding:0 0 52px 38px;min-width:0}
.about-editorial-main-photo {width:100%;height:clamp(380px,43vw,570px);object-fit:cover;display:block;background:#e1d3c2}
.about-editorial-photo-inset {position:absolute;left:0;bottom:0;width:40%;height:38%;border:8px solid #f7f1e8;background:#e1d3c2}
.about-editorial-photo-inset img {width:100%;height:100%;object-fit:cover;display:block}
.about-editorial-photo-tag {position:absolute;right:0;bottom:62px;background:#f7f1e8;padding:14px 17px;color:#6d503a;font-size:11px;letter-spacing:.15em;font-weight:700}
@media(max-width:800px){.about-editorial-grid{grid-template-columns:1fr;gap:38px}.about-editorial-photos{padding-left:24px}.about-editorial-main-photo{height:390px}.about-editorial-hero{padding:54px 0 !important}}
@media(max-width:480px){.about-editorial-main-photo{height:300px}.about-editorial-photo-inset{border-width:5px}.about-editorial-photo-tag{font-size:9px}.about-editorial-buttons{gap:14px}}

/* ABOUT REFINEMENT — retain original white hero text and dark backdrop */
body[data-page="aboutrevere"] main > .hero,
body[data-page="aboutlynn"] main > .hero {
  background-color:#241b17 !important;
  background-image:linear-gradient(95deg,rgba(23,17,14,.89),rgba(28,20,16,.67)) !important;
  min-height:clamp(540px,68vh,730px);
  display:flex;align-items:center;
  padding:clamp(70px,9vw,130px) 0;
}
body[data-page^="about"] main > .hero .hero-overlay {background:transparent !important;}
body[data-page^="about"] main > .hero .hero-text h2,
body[data-page^="about"] main > .hero .hero-text h2 em {
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:0 2px 15px rgba(0,0,0,.23);
}
body[data-page^="about"] main > .hero .hero-text h2 {font-size:clamp(42px,5.3vw,76px);line-height:1.15;letter-spacing:-.025em;margin:14px 0 25px;}
body[data-page^="about"] main > .hero .hero-text h2 em {font-weight:400;}
body[data-page^="about"] main > .hero .eyebrow {color:#e5c5a1 !important;letter-spacing:.22em;font-weight:700;}
body[data-page^="about"] main > .hero .hero-description {color:#f4ece4 !important;max-width:620px;font-size:clamp(16px,1.5vw,19px) !important;line-height:1.85;text-shadow:none;}
body[data-page^="about"] main > .hero .hero-buttons {display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;}
body[data-page^="about"] main > .hero .hero-buttons a.button {display:inline-flex;justify-content:center;align-items:center;min-height:51px;padding:14px 24px;text-decoration:none;font-weight:700;letter-spacing:.02em;transition:background .2s,color .2s;}
body[data-page^="about"] main > .hero .hero-buttons a.button.dark {background:#e9cda9 !important;border:1px solid #e9cda9 !important;color:#30221b !important;}
body[data-page^="about"] main > .hero .hero-buttons a.button.dark:hover {background:#fff2df !important;}
body[data-page^="about"] main > .hero .hero-buttons a.button.light {background:transparent !important;border:1px solid #fff !important;color:#fff !important;}
body[data-page^="about"] main > .hero .hero-buttons a.button.light:hover {background:rgba(255,255,255,.14) !important;}
body[data-page^="about"] main > .hero .hero-note,body[data-page^="about"] main > .hero .hero-note p {color:#eee0d0 !important;}
@media(max-width:600px){body[data-page^="about"] main > .hero {padding:72px 0 !important;min-height:540px;}body[data-page^="about"] main > .hero .hero-buttons a.button{width:100%;}}


/* ABOUT PAGE HERO — PHOTOGRAPH BACKGROUND, WHITE HEADLINE */
body[data-page^="about"] main > .hero {
  background-color: #211a16 !important;
  background-image:
    linear-gradient(90deg, rgba(22,16,12,.87) 0%, rgba(22,16,12,.76) 44%, rgba(22,16,12,.38) 100%),
    url("img/about-4.jpg") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
body[data-page^="about"] main > .hero .hero-overlay {
  background: transparent !important;
  pointer-events: none;
}
body[data-page^="about"] main > .hero .hero-text h2,
body[data-page^="about"] main > .hero .hero-text h2 em,
body[data-page^="about"] main > .hero .hero-description,
body[data-page^="about"] main > .hero .hero-note,
body[data-page^="about"] main > .hero .hero-note p {
  color: #fff !important;
}
body[data-page^="about"] main > .hero .hero-text > .eyebrow {
  color: #f3d9b6 !important;
}
body[data-page^="about"] main > .hero .hero-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}
body[data-page^="about"] main > .hero .hero-buttons a.button {
  text-decoration: none !important;
}
@media(max-width: 700px) {
  body[data-page^="about"] main > .hero {
    background-image:
      linear-gradient(90deg, rgba(22,16,12,.88), rgba(22,16,12,.67)),
      url("img/about-4.jpg") !important;
    background-position: 58% center !important;
  }
}

/* ABOUT — Welcome section, customer's display2.jpg */
section.intro.intro-display2 {
  background:#f7f1e8 !important;
  padding:clamp(64px,8vw,116px) 0 !important;
  color:#382c24 !important;
}
.intro-display2 .intro-display2-grid {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) !important;
  gap:clamp(30px,5vw,86px) !important;
  align-items:center !important;
}
.intro-display2 .intro-display2-copy {min-width:0}
.intro-display2 .intro-display2-eyebrow {
  color:#a07853 !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.18em !important;
  margin:0 0 22px !important;
}
.intro-display2 .intro-display2-copy h2 {
  color:#32251d !important;
  font-family:"Playfair Display",Georgia,serif !important;
  font-size:clamp(35px,4vw,60px) !important;
  line-height:1.18 !important;
  font-weight:500 !important;
  letter-spacing:-.025em !important;
  margin:0 0 26px !important;
}
.intro-display2 .intro-display2-copy h2 em {
  color:#a07853 !important;
  font-style:italic !important;
  font-weight:500 !important;
}
.intro-display2 .intro-display2-rule {display:block;width:58px;height:2px;background:#a07853;margin:0 0 25px}
.intro-display2 .intro-display2-copy p:not(.intro-display2-eyebrow) {
  color:#51463e !important;
  font-size:clamp(16px,1.2vw,18px) !important;
  line-height:1.8 !important;
  margin:0 0 18px !important;
}
.intro-display2 .intro-display2-copy .intro-display2-signature {
  color:#86654a !important;
  font-style:italic !important;
  font-family:Georgia,serif !important;
  margin-top:24px !important;
}
.intro-display2 .intro-display2-image {overflow:hidden;background:#e5d6c6;min-width:0}
.intro-display2 .intro-display2-image img {
  width:100% !important;
  height:clamp(350px,43vw,550px) !important;
  object-fit:cover !important;
  display:block !important;
}
@media(max-width:800px) {
  .intro-display2 .intro-display2-grid {grid-template-columns:1fr !important}
  .intro-display2 .intro-display2-image img {height:350px !important}
}
@media(max-width:480px) {
  .intro-display2 .intro-display2-image img {height:270px !important}
}

/* REVERE ORDER PAGE — COMPLETE READABILITY AND CONTRAST FIX */
body[data-page="order-revere"] .order-hero {
  background:#f6efe6 !important;
  padding:clamp(62px,8vw,105px) 0 clamp(55px,7vw,85px) !important;
  text-align:center;
}
body[data-page="order-revere"] .order-hero .order-eyebrow {
  color:#765134 !important;
  display:block;
  font-size:clamp(12px,1.1vw,14px) !important;
  letter-spacing:.13em !important;
  line-height:1.6;
  margin-bottom:22px;
}
body[data-page="order-revere"] .order-hero h1 {
  color:#30231b !important;
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(54px,7vw,92px) !important;
  line-height:1.04 !important;
  margin:0 0 24px !important;
  font-weight:600;
}
body[data-page="order-revere"] .order-hero h1 em {
  color:#875b3b !important;
  font-weight:500;
}
body[data-page="order-revere"] .order-hero .order-hero-address {
  color:#342820 !important;
  font-size:clamp(17px,1.6vw,21px) !important;
  font-weight:600;
  line-height:1.6;
  margin:0 auto 12px;
}
body[data-page="order-revere"] .order-hero .order-hero-subtitle {
  color:#5b4a3d !important;
  font-size:clamp(15px,1.2vw,17px) !important;
  line-height:1.7;
  margin:0 auto;
}
body[data-page="order-revere"] .order-section {
  background:#fffdf9 !important;
  padding:clamp(55px,7vw,90px) 0 !important;
}
body[data-page="order-revere"] .order-intro h2 {
  color:#30231b !important;
  line-height:1.2 !important;
}
body[data-page="order-revere"] .order-intro p {
  color:#4e433b !important;
  font-size:17px !important;
  line-height:1.8 !important;
}
body[data-page="order-revere"] .order-options {gap:24px}
body[data-page="order-revere"] .order-card {
  background:#faf6f0 !important;
  border:1px solid #dfd0bf !important;
  box-shadow:0 6px 25px rgba(47,32,20,.06);
}
body[data-page="order-revere"] .order-card .order-number {color:#906747 !important}
body[data-page="order-revere"] .order-card h3 {color:#2f241e !important;font-size:clamp(23px,2vw,28px) !important}
body[data-page="order-revere"] .order-card p {
  color:#50443b !important;
  font-size:16px !important;
  line-height:1.75 !important;
}
body[data-page="order-revere"] .order-card strong {color:#30231b !important}
body[data-page="order-revere"] .order-button {
  background:#3c2a20 !important;
  color:#fff !important;
  border:1px solid #3c2a20;
  min-height:50px;
  font-size:15px !important;
  max-width:100%;
}
body[data-page="order-revere"] .order-button:hover,
body[data-page="order-revere"] .order-button:focus-visible {
  background:#765036 !important;
  color:#fff !important;
}
body[data-page="order-revere"] .order-info {
  background:#f1e7dc !important;
  border:1px solid #e0cebc;
}
body[data-page="order-revere"] .order-info p {
  color:#43352c !important;
  font-size:16px !important;
  line-height:1.9 !important;
}
body[data-page="order-revere"] .order-info strong {color:#2e221b !important}
body[data-page="order-revere"] .order-section a:focus-visible {
  outline:3px solid #946f4d;outline-offset:3px;
}
@media(max-width:600px){
  body[data-page="order-revere"] .order-card {padding:28px 22px !important}
  body[data-page="order-revere"] .order-intro p {font-size:16px !important}
}

/* Revere Order hero: real HTML text, accessible links, responsive photo */
body[data-page="order-revere"] .order-photo-hero { background:#f7f0e7!important; padding:clamp(45px,6vw,84px) 0!important; text-align:left!important; }
body[data-page="order-revere"] .order-photo-layout {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(25px,5vw,78px)}
body[data-page="order-revere"] .order-photo-copy {min-width:0}
body[data-page="order-revere"] .order-photo-hero h1 {font-size:clamp(52px,6vw,86px)!important;margin-bottom:22px!important}
body[data-page="order-revere"] .order-photo-hero .order-hero-address {margin:0 0 15px!important}
body[data-page="order-revere"] .order-photo-hero .order-hero-subtitle {margin:0 0 27px!important;max-width:420px}
body[data-page="order-revere"] .order-hero-cta {display:inline-flex;align-items:center;justify-content:center;gap:15px;background:#38291f;color:white!important;padding:16px 24px;text-decoration:none;font-weight:700;font-size:15px;min-height:54px;transition:background .2s}
body[data-page="order-revere"] .order-hero-cta:hover,body[data-page="order-revere"] .order-hero-cta:focus-visible {background:#795337;outline-offset:3px}
body[data-page="order-revere"] .order-photo-image {overflow:hidden;background:#e7d5bf;min-width:0}
body[data-page="order-revere"] .order-photo-image img {display:block;width:100%;height:clamp(330px,39vw,510px);object-fit:cover;object-position:center}
@media(max-width:760px){body[data-page="order-revere"] .order-photo-layout{grid-template-columns:1fr;gap:32px}body[data-page="order-revere"] .order-photo-image img{height:310px}body[data-page="order-revere"] .order-photo-hero{padding:45px 0!important}}
@media(max-width:420px){body[data-page="order-revere"] .order-photo-image img{height:235px}}

/* FULL-WIDTH COFFEE & CROISSANT PHOTO ACROSS THE ENTIRE ORDER HERO */
body[data-page="order-revere"] .order-hero.order-photo-hero {
  position:relative;
  background-color:#382b22!important;
  background-image:linear-gradient(90deg,rgba(24,17,13,.90) 0%,rgba(24,17,13,.75) 42%,rgba(24,17,13,.28) 100%),url("img/order-coffee-croissant.jpg")!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  min-height:clamp(460px,53vw,660px);
  padding:clamp(75px,9vw,135px) 0!important;
  display:flex;align-items:center;
  text-align:left!important;
}
body[data-page="order-revere"] .order-photo-layout {
  display:block!important;width:100%;position:relative;z-index:1;
}
body[data-page="order-revere"] .order-photo-copy {max-width:620px!important}
body[data-page="order-revere"] .order-photo-hero .order-eyebrow {color:#f2d4b2!important}
body[data-page="order-revere"] .order-photo-hero h1,
body[data-page="order-revere"] .order-photo-hero h1 em {color:#fff!important}
body[data-page="order-revere"] .order-photo-hero .order-hero-address,
body[data-page="order-revere"] .order-photo-hero .order-hero-subtitle {
  color:#fff!important;max-width:520px;
  text-shadow:0 1px 8px rgba(0,0,0,.22);
}
body[data-page="order-revere"] .order-photo-hero .order-hero-cta {
  background:#fff!important;color:#34251b!important;border:1px solid #fff;
}
body[data-page="order-revere"] .order-photo-hero .order-hero-cta:hover,
body[data-page="order-revere"] .order-photo-hero .order-hero-cta:focus-visible {
  background:#e9d7c2!important;color:#34251b!important;
}
@media(max-width:760px) {
 body[data-page="order-revere"] .order-hero.order-photo-hero {
   background-image:linear-gradient(90deg,rgba(24,17,13,.86),rgba(24,17,13,.56)),url("img/order-coffee-croissant.jpg")!important;
   background-position:62% center!important;
   min-height:510px;
   padding:65px 0!important;
 }
}

/* CASABLANCA / ELEGANT BOUTIQUE ORDERING */
body[data-page="order-revere"] .boutique-order-section {background:#f9f6f1!important;padding:clamp(70px,8vw,112px) 0 85px!important}
body[data-page="order-revere"] .boutique-order-heading {max-width:760px;margin:0 auto 52px;text-align:center}
body[data-page="order-revere"] .boutique-order-kicker {font-size:12px!important;font-weight:700;letter-spacing:.19em;color:#8e6747!important;margin:0 0 22px!important}
body[data-page="order-revere"] .boutique-order-heading h2 {font-family:"Playfair Display",Georgia,serif;font-size:clamp(37px,4.8vw,63px)!important;line-height:1.15!important;letter-spacing:-.035em;font-weight:500;color:#30251d!important;margin:0!important}
body[data-page="order-revere"] .boutique-order-heading h2 em {font-style:italic;font-weight:400;color:#9c744e!important}
body[data-page="order-revere"] .boutique-order-accent {display:block;background:#ac8761;width:54px;height:2px;margin:25px auto}
body[data-page="order-revere"] .boutique-order-heading>p:last-child {font-size:17px!important;line-height:1.85!important;color:#64574b!important;margin:0 auto!important;max-width:660px}
body[data-page="order-revere"] .boutique-order-grid {display:grid;grid-template-columns:1.16fr 1fr 1fr;gap:18px;align-items:stretch}
body[data-page="order-revere"] .boutique-order-card {background:#fffdf9;border:1px solid #e6ddd2;padding:30px 28px 27px;display:flex;flex-direction:column;min-width:0;min-height:365px;box-shadow:0 9px 30px rgba(44,32,22,.035);transition:transform .2s ease,box-shadow .2s ease}
body[data-page="order-revere"] .boutique-order-card:hover {transform:translateY(-3px);box-shadow:0 14px 32px rgba(44,32,22,.09)}
body[data-page="order-revere"] .boutique-featured {background:#35281f;border-color:#35281f;box-shadow:0 12px 28px rgba(44,32,22,.14)}
body[data-page="order-revere"] .boutique-card-top {display:flex;justify-content:space-between;align-items:center;gap:12px}
body[data-page="order-revere"] .boutique-card-number {color:#987655;font-size:10px;font-weight:700;letter-spacing:.13em}
body[data-page="order-revere"] .boutique-card-arrow {font-size:24px;color:#a58a6f}
body[data-page="order-revere"] .boutique-featured .boutique-card-number,body[data-page="order-revere"] .boutique-featured .boutique-card-arrow {color:#e4c8a7}
body[data-page="order-revere"] .boutique-card-content {flex:1;padding:30px 0 26px}
body[data-page="order-revere"] .boutique-card-logo {height:48px;display:flex;align-items:center;margin-bottom:22px}
body[data-page="order-revere"] .boutique-card-logo img {display:block;max-width:140px;max-height:45px;width:auto;height:auto;object-fit:contain}
body[data-page="order-revere"] .boutique-featured .boutique-card-logo {background:transparent!important;width:max-content;max-width:100%;padding:0;height:50px}
body[data-page="order-revere"] .boutique-card-content h3 {font-family:"Playfair Display",Georgia,serif;color:#32261e!important;font-weight:500;font-size:clamp(25px,2.4vw,33px)!important;line-height:1.2!important;margin:0 0 14px!important}
body[data-page="order-revere"] .boutique-card-content p {color:#6a5b4d!important;font-size:15px!important;line-height:1.8!important;margin:0!important}
body[data-page="order-revere"] .boutique-featured .boutique-card-content h3 {color:#fff!important}
body[data-page="order-revere"] .boutique-featured .boutique-card-content p {color:#e4d8cc!important}
body[data-page="order-revere"] .boutique-card-button {display:flex;justify-content:space-between;align-items:center;gap:8px;padding:15px 16px;text-decoration:none!important;border:1px solid #c7b49f;color:#35271d!important;font-size:13px;font-weight:700;letter-spacing:.015em;min-height:53px;transition:background .2s ease,color .2s ease}
body[data-page="order-revere"] .boutique-card-button:hover {background:#ede3d6;color:#35271d!important}
body[data-page="order-revere"] .boutique-featured .boutique-card-button {background:#f7eee3;border-color:#f7eee3;color:#35271d!important}
body[data-page="order-revere"] .boutique-featured .boutique-card-button:hover {background:#e7d4bd}
body[data-page="order-revere"] .boutique-card-button:focus-visible {outline:3px solid #b58a5d;outline-offset:3px}
body[data-page="order-revere"] .boutique-order-location {display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid #dfd3c5;margin-top:50px;padding-top:26px}
body[data-page="order-revere"] .boutique-location-kicker {color:#916c4b;font-size:11px;letter-spacing:.14em;font-weight:700}
body[data-page="order-revere"] .boutique-order-location p {font-size:15px!important;line-height:1.7!important;color:#55473a!important;margin:8px 0 0!important}
body[data-page="order-revere"] .boutique-order-location>a {font-size:15px;color:#3b2b21!important;text-decoration:none;font-weight:600;white-space:nowrap}
@media(max-width:950px){body[data-page="order-revere"] .boutique-order-grid {grid-template-columns:1fr 1fr}body[data-page="order-revere"] .boutique-featured {grid-column:1/-1}body[data-page="order-revere"] .boutique-order-card {min-height:320px}}
@media(max-width:600px){body[data-page="order-revere"] .boutique-order-grid {grid-template-columns:1fr}body[data-page="order-revere"] .boutique-featured {grid-column:auto}body[data-page="order-revere"] .boutique-order-card {min-height:0;padding:25px 23px}body[data-page="order-revere"] .boutique-card-content {padding:22px 0 26px}body[data-page="order-revere"] .boutique-order-location {align-items:flex-start;flex-direction:column;gap:15px}body[data-page="order-revere"] .boutique-order-heading {margin-bottom:35px}}
@media(prefers-reduced-motion:reduce){body[data-page="order-revere"] .boutique-order-card {transition:none}body[data-page="order-revere"] .boutique-order-card:hover {transform:none}}

/* Casablanca contact page redesign — scoped to contact pages */
body[data-page^="contact"] .contact-modern-hero{background:#29221e;color:#fff;padding:80px 0 72px}
body[data-page^="contact"] .contact-modern-hero .eyebrow{color:#e2c4a4;font-size:12px}
body[data-page^="contact"] .contact-modern-hero h1{font-family:var(--serif);font-size:clamp(38px,5vw,66px);line-height:1.12;max-width:780px;margin:12px 0 18px;color:#fff}
body[data-page^="contact"] .contact-modern-hero p.contact-modern-description{max-width:620px;color:#eee3d8;font-size:17px;line-height:1.75}
body[data-page^="contact"] .contact-section{padding:70px 0 90px;background:#f8f7f3}
body[data-page^="contact"] .contact-grid{gap:32px;align-items:start}
body[data-page^="contact"] .contact-form-wrapper{background:#fff;padding:clamp(22px,3.5vw,46px);border:1px solid #e6dfd6;border-radius:12px}
body[data-page^="contact"] .contact-form-wrapper h2{font-size:clamp(30px,3.2vw,44px);line-height:1.2}
body[data-page^="contact"] .contact-info{background:#ede4d9;color:#30251f;padding:clamp(24px,3vw,40px);border-radius:12px}
body[data-page^="contact"] .contact-info h3,body[data-page^="contact"] .contact-info h3 em{color:#30251f}
body[data-page^="contact"] .contact-info .eyebrow,body[data-page^="contact"] .contact-detail-label{color:#795438;font-size:12px}
body[data-page^="contact"] .contact-detail{border-top-color:#cdbfb0}
body[data-page^="contact"] .contact-detail:last-of-type{border-bottom-color:#cdbfb0}
body[data-page^="contact"] .contact-detail a,body[data-page^="contact"] .contact-detail p,body[data-page^="contact"] .social-links a{color:#30251f;overflow-wrap:anywhere}
body[data-page^="contact"] .contact-detail a:hover,body[data-page^="contact"] .social-links a:hover{color:#795438}
body[data-page^="contact"] .contact-form label{color:#342a25}
body[data-page^="contact"] .contact-form input,body[data-page^="contact"] .contact-form select,body[data-page^="contact"] .contact-form textarea{color:#28221e}
body[data-page^="contact"] .contact-form input::placeholder,body[data-page^="contact"] .contact-form textarea::placeholder{color:#706962}
@media(max-width:760px){body[data-page^="contact"] .contact-modern-hero{padding:52px 0}body[data-page^="contact"] .contact-section{padding:36px 0 60px}body[data-page^="contact"] .contact-grid{gap:22px}}


/* CASABLANCA WHOLESALE — scoped redesign; all other pages preserved */
body[data-page="wholesale"]{background:#f8f6f1;color:#2b2925}body[data-page="wholesale"] .header{background:#f9f7f2;border-bottom:1px solid #e5dfd4}body[data-page="wholesale"] .nav{min-height:94px}body[data-page="wholesale"] .logo{width:155px}body[data-page="wholesale"] .menu a{color:#302d29}body[data-page="wholesale"] .menu a.nav-button{background:#31332b;color:#fff!important;padding:14px 21px;border-radius:3px}body[data-page="wholesale"] .menu a.nav-button:hover{background:#76634e}body[data-page="wholesale"] .cw-kicker{font-size:11px;font-weight:700;letter-spacing:2.5px;color:#8c7459;text-transform:uppercase}body[data-page="wholesale"] h1,body[data-page="wholesale"] h2,body[data-page="wholesale"] h3{font-family:var(--serif);font-weight:500;letter-spacing:-1.5px}body[data-page="wholesale"] h1 em,body[data-page="wholesale"] h2 em{color:#a37d5d}body[data-page="wholesale"] .cw-hero{padding:65px 0 82px;background:#f8f6f1}body[data-page="wholesale"] .cw-hero-grid{display:grid;grid-template-columns:1fr 1.03fr;align-items:center;gap:6%}body[data-page="wholesale"] .cw-hero-copy{padding:40px 0}body[data-page="wholesale"] .cw-hero h1{font-size:clamp(48px,5.1vw,79px);line-height:1.12;margin:25px 0 25px}body[data-page="wholesale"] .cw-hero-copy>p:not(.cw-kicker){max-width:475px;color:#777269;font-size:16px;line-height:1.9}body[data-page="wholesale"] .cw-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}body[data-page="wholesale"] .cw-btn{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:51px;padding:13px 22px;font-size:12px;font-weight:700;letter-spacing:.3px;transition:.25s}body[data-page="wholesale"] .cw-btn-dark{background:#30332c;color:#fff}body[data-page="wholesale"] .cw-btn-dark:hover{background:#80694e;color:#fff}body[data-page="wholesale"] .cw-btn-outline{border:1px solid #b7aea0;color:#38342f}body[data-page="wholesale"] .cw-btn-outline:hover{background:#e9e1d5}body[data-page="wholesale"] .cw-hero-foot{margin-top:70px;color:#928779;font-size:10px;letter-spacing:1.6px}body[data-page="wholesale"] .cw-hero-foot span{margin:0 10px;color:#a88b6b}body[data-page="wholesale"] .cw-hero-visual{height:590px;position:relative;background:#ded6c9;overflow:hidden}body[data-page="wholesale"] .cw-hero-visual>img{width:100%;height:100%;object-fit:cover}body[data-page="wholesale"] .cw-visual-label{position:absolute;bottom:0;left:0;right:0;background:#292a24e6;color:#fff;padding:19px 25px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px}body[data-page="wholesale"] .cw-intro{padding:95px 0;background:#fff}body[data-page="wholesale"] .cw-intro-grid{display:grid;grid-template-columns:1fr 2fr;gap:60px}body[data-page="wholesale"] .cw-intro h2{font-size:clamp(40px,4.5vw,65px);line-height:1.13}body[data-page="wholesale"] .cw-intro-grid>div>p{max-width:700px;color:#777269;margin-top:24px;line-height:1.9}body[data-page="wholesale"] .cw-collections{padding:110px 0;background:#f1ede5}body[data-page="wholesale"] .cw-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:43px}body[data-page="wholesale"] .cw-heading h2{font-size:clamp(38px,4.5vw,62px);margin-top:14px}body[data-page="wholesale"] .cw-heading>p{max-width:290px;color:#777269;font-size:14px;line-height:1.8}body[data-page="wholesale"] .cw-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:23px}body[data-page="wholesale"] .cw-card{background:#fff;overflow:hidden}body[data-page="wholesale"] .cw-photo{height:300px;overflow:hidden;background:#d8cabc}body[data-page="wholesale"] .cw-photo img{height:100%;width:100%;object-fit:cover;transition:transform .5s}body[data-page="wholesale"] .cw-card:hover img{transform:scale(1.05)}body[data-page="wholesale"] .cw-card-body{padding:30px 27px 35px}body[data-page="wholesale"] .cw-card-body>span{color:#98785a;font-size:10px;letter-spacing:1.8px;font-weight:700}body[data-page="wholesale"] .cw-card h3{font-size:30px;margin:13px 0}body[data-page="wholesale"] .cw-card p{font-size:14px;color:#777269;line-height:1.8}body[data-page="wholesale"] .cw-photo-note{margin-top:19px;color:#898178;font-size:11px}body[data-page="wholesale"] .cw-distribution{padding:115px 0;background:#fff}body[data-page="wholesale"] .cw-distribution-grid{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}body[data-page="wholesale"] .cw-distribution-image{height:620px;background:#e6ddd0}body[data-page="wholesale"] .cw-distribution-image img{height:100%;object-fit:cover}body[data-page="wholesale"] .cw-distribution h2{font-size:clamp(39px,4vw,60px);line-height:1.16;margin:20px 0}body[data-page="wholesale"] .cw-distribution-copy>p:not(.cw-kicker){color:#777269;line-height:1.8;margin-bottom:30px}body[data-page="wholesale"] .cw-partner{padding:23px 0;border-top:1px solid #ded8cf}body[data-page="wholesale"] .cw-partner span,body[data-page="wholesale"] .cw-contact-panel>span{display:block;font-size:10px;letter-spacing:2px;font-weight:700;color:#9c7d5c;margin-bottom:10px}body[data-page="wholesale"] .cw-partner strong{font-family:var(--serif);font-size:24px;font-weight:500}body[data-page="wholesale"] .cw-partner p{margin-top:7px;font-size:13px;color:#777269;line-height:1.8}body[data-page="wholesale"] .cw-partner-section{padding:105px 0;background:#30332c;color:#fff;text-align:center}body[data-page="wholesale"] .cw-partner-inner{max-width:760px}body[data-page="wholesale"] .cw-partner-section h2{font-size:clamp(48px,5vw,76px);line-height:1.12;margin:20px 0}body[data-page="wholesale"] .cw-partner-section>div>p:not(.cw-kicker){color:#d0cdc4;line-height:1.9;margin:0 auto 30px;max-width:630px}body[data-page="wholesale"] .cw-btn-light{background:#f3e8d8;color:#2b2c25}body[data-page="wholesale"] .cw-btn-light:hover{background:#fff}body[data-page="wholesale"] .cw-contact{padding:115px 0;background:#f8f6f1}body[data-page="wholesale"] .cw-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center}body[data-page="wholesale"] .cw-contact h2{font-size:clamp(42px,4.6vw,65px);line-height:1.15;margin:20px 0}body[data-page="wholesale"] .cw-contact-grid>div:first-child>p:last-child{color:#777269;line-height:1.8}body[data-page="wholesale"] .cw-contact-panel{background:#fff;padding:45px;border:1px solid #e5ded3;display:flex;flex-direction:column;align-items:flex-start;gap:15px}body[data-page="wholesale"] .cw-contact-panel .cw-email{font-size:clamp(15px,1.6vw,22px);overflow-wrap:anywhere;font-weight:600}body[data-page="wholesale"] .cw-contact-panel .cw-btn{margin-top:8px}body[data-page="wholesale"] .cw-contact-panel>p{font-size:12px;color:#777269;line-height:1.8;margin-top:10px}body[data-page="wholesale"] .footer .logo{width:145px}body[data-page="wholesale"] .footer .logo img{width:100%}@media(max-width:900px){body[data-page="wholesale"] .cw-hero-grid,body[data-page="wholesale"] .cw-intro-grid,body[data-page="wholesale"] .cw-distribution-grid,body[data-page="wholesale"] .cw-contact-grid{grid-template-columns:1fr;gap:40px}body[data-page="wholesale"] .cw-hero-visual{height:450px}body[data-page="wholesale"] .cw-distribution-image{height:400px}body[data-page="wholesale"] .cw-cards{grid-template-columns:repeat(2,1fr)}body[data-page="wholesale"] .cw-hero-foot{margin-top:40px}}@media(max-width:650px){body[data-page="wholesale"] .cw-hero,body[data-page="wholesale"] .cw-intro,body[data-page="wholesale"] .cw-collections,body[data-page="wholesale"] .cw-distribution,body[data-page="wholesale"] .cw-partner-section,body[data-page="wholesale"] .cw-contact{padding:70px 0}body[data-page="wholesale"] .cw-hero h1{font-size:47px}body[data-page="wholesale"] .cw-hero-visual{height:360px}body[data-page="wholesale"] .cw-heading{display:block}body[data-page="wholesale"] .cw-heading>p{margin-top:15px}body[data-page="wholesale"] .cw-cards{grid-template-columns:1fr}body[data-page="wholesale"] .cw-contact-panel{padding:27px}body[data-page="wholesale"] .cw-actions{flex-direction:column}body[data-page="wholesale"] .cw-hero-foot{font-size:9px;line-height:2}body[data-page="wholesale"] .menu{z-index:1000}}

/* Revere usability additions */
.menu-download { margin: 0 0 1.5rem; text-align: center; }
.menu-download .button { display: inline-flex; max-width: 100%; white-space: normal; text-align: center; }
.form-feedback { padding: 1rem 1.25rem; margin-bottom: 1.25rem; border: 1px solid currentColor; border-radius: 6px; }
.form-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.contact-form button:disabled { opacity: .65; cursor: wait; }
@media (max-width: 600px) { .menu-images img { max-width: 100%; height: auto; } .menu-download .button { width: 100%; justify-content: center; } }


/* =============================================================
   SECTION — CASABLANCA SHARED FOOTER (Revere / main / wholesale)
   Reuses img/logow.png from the existing website header.
   ============================================================= */
.casa-footer{background:#202321!important;color:#e8e3d9!important;padding:52px 0 20px!important}
.casa-footer .casa-footer-brand{text-align:center;margin:0 auto 34px}
.casa-footer .casa-footer-brand a{display:inline-block}
.casa-footer .casa-footer-brand img{width:180px;max-width:70vw;height:auto;object-fit:contain;display:block}
.casa-footer .casa-footer-brand p{color:#d5cbbb;font-size:13px;margin:12px 0 0}
.casa-footer .casa-footer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding:24px 0 36px;border-top:1px solid #55514a}
.casa-footer .casa-footer-grid>div{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.casa-footer h4{color:#e7c68b!important;margin:0 0 8px;font-size:15px;font-weight:600}
.casa-footer .casa-footer-grid a{display:block;color:#e8e3d9!important;text-decoration:none;font-size:14px;line-height:1.6}
.casa-footer .casa-footer-grid a:hover{text-decoration:underline;color:#e7c68b!important}
.casa-footer .casa-footer-grid p{color:#e8e3d9!important;margin:0;font-size:14px;line-height:1.7}
.casa-footer .casa-footer-bottom{border-top:1px solid #55514a;padding-top:20px;text-align:center;color:#c9c3b8;font-size:12px}
@media(max-width:800px){.casa-footer .casa-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
@media(max-width:480px){.casa-footer .casa-footer-grid{grid-template-columns:1fr 1fr;gap:22px 14px}.casa-footer .casa-footer-grid a,.casa-footer .casa-footer-grid p{font-size:12px}.casa-footer h4{font-size:13px}.casa-footer .casa-footer-brand img{width:150px}}


/* =============================================================
   SECTION — FOOTER COLUMN ALIGNMENT FIX (2026-10)
   Desktop/tablet: all headings, addresses, hours and links align left.
   Small phones: each footer column is centered for readability.
   Applies only to the new Casablanca footer (.casa-footer).
   ============================================================= */
.casa-footer .casa-footer-grid > div {
  align-items: flex-start;
  text-align: left;
  min-width: 0;
}
.casa-footer .casa-footer-grid > div > h4,
.casa-footer .casa-footer-grid > div > p,
.casa-footer .casa-footer-grid > div > a {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  text-align: left !important;
  align-self: stretch;
}
.casa-footer .casa-footer-grid > div > p,
.casa-footer .casa-footer-grid > div > a {
  overflow-wrap: break-word;
}
@media (max-width: 480px) {
  .casa-footer .casa-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .casa-footer .casa-footer-grid > div {
    align-items: center;
    text-align: center;
  }
  .casa-footer .casa-footer-grid > div > h4,
  .casa-footer .casa-footer-grid > div > p,
  .casa-footer .casa-footer-grid > div > a {
    text-align: center !important;
  }
}


/* ============================================================
   SECTION — FOOTER COLOR & MAIN INDEX FOOTER VISIBILITY
   Warm espresso background with champagne gold details.
   Scoped to .casa-footer so other sections keep their colors.
   ============================================================ */
.casa-footer {
  position: relative;
  z-index: 5;
  display: block;
  width: 100%;
  flex: 0 0 auto;
  background: #382b26 !important;
  color: #f4ece0 !important;
}
.casa-footer .casa-footer-grid { border-top-color: #6c5445; }
.casa-footer .casa-footer-bottom { border-top-color: #6c5445; color: #dfd0bf; }
.casa-footer h4 { color: #efd09d !important; }
.casa-footer .casa-footer-grid a,
.casa-footer .casa-footer-grid p { color: #f4ece0 !important; }
.casa-footer .casa-footer-grid a:hover,
.casa-footer .casa-footer-grid a:focus-visible { color: #efd09d !important; }
.casa-footer .casa-footer-brand p { color: #e2d3c1; }
/* The index page uses a full-page background video. Keep its footer
   in normal flow above the video and overlay instead of hiding behind them. */
.landing-page > .casa-footer { position: relative; z-index: 10; margin-top: 36px; }
.landing-page > .background-video,
.landing-page > .video-overlay { pointer-events: none; }
.landing-page > .background-video { height: 100vh; height: 100svh; }
.landing-page > .video-overlay { height: 100vh; height: 100svh; }
.landing-page > .content { position: relative; z-index: 2; }
@media (max-width: 480px) {
  .casa-footer .casa-footer-grid { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   SECTION — FINAL FOOTER PALETTE | CASABLANCA
   Deep Espresso #241D19 | Champagne Gold #D9B77E
   Warm Ivory #F5EFE6 | Muted border #665343
   ============================================================ */
.casa-footer { background-color: #241D19 !important; color: #F5EFE6 !important; }
.casa-footer h4 { color: #D9B77E !important; }
.casa-footer .casa-footer-grid a,
.casa-footer .casa-footer-grid p { color: #F5EFE6 !important; }
.casa-footer .casa-footer-grid a:hover,
.casa-footer .casa-footer-grid a:focus-visible { color: #D9B77E !important; }
.casa-footer .casa-footer-grid,
.casa-footer .casa-footer-bottom { border-color: #665343 !important; }
.casa-footer .casa-footer-bottom,
.casa-footer .casa-footer-brand p { color: #C5B9AA !important; }
/* Maintain one column per row on small screens for clear alignment. */
@media (max-width: 480px) {
  .casa-footer .casa-footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* =========================================================
   REVERE GOOGLE MAP — VISIBLE EMBED
   ========================================================= */
body[data-page="revere"] .location-map iframe,
body[data-page="locationrevere"] .map-wrapper iframe,
.locations-preview .location-map iframe {
    display: block;
    width: 100%;
    height: 260px;
    min-height: 240px;
    border: 0;
}
@media (max-width: 768px) {
    .locations-preview .location-map iframe,
    .map-wrapper iframe { height: 250px; }
}

/* =====================================================
   LOCATION MAPS — REVERE AND LYNN
   ===================================================== */
.location-map iframe, .map-wrapper iframe { display:block; width:100%; height:100%; min-height:260px; border:0; border-radius:inherit; }
.location-map { min-height:260px; overflow:hidden; }
.map-wrapper { min-height:260px; overflow:hidden; }


/* =========================================================
   CATERING PAGE — INQUIRY FORM (REVERE)
   ========================================================= */
.casa-catering-request{background:#f8f4ee;padding:80px 0 95px;color:#241d19}
.casa-request-intro{max-width:730px;margin:0 auto 32px;text-align:center}
.casa-request-intro h2{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3.3rem);line-height:1.15;margin:12px 0}
.casa-request-intro p{line-height:1.7;color:#65574d}
.casa-request-form{max-width:850px;margin:auto;background:#fff;border:1px solid #e8ddd0;border-radius:18px;padding:clamp(20px,4vw,42px);box-shadow:0 16px 45px rgba(36,29,25,.07)}
.casa-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.casa-form-grid label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600;color:#332820}
.casa-form-grid label span{color:#9a502f}
.casa-form-grid .casa-full{grid-column:1/-1}
.casa-form-grid input,.casa-form-grid select,.casa-form-grid textarea{box-sizing:border-box;width:100%;min-width:0;padding:13px 14px;border:1px solid #cdbfb1;border-radius:8px;background:#fff;color:#241d19;font:inherit;font-weight:400}
.casa-form-grid input:focus,.casa-form-grid select:focus,.casa-form-grid textarea:focus{outline:2px solid #d9b77e;outline-offset:1px}
.casa-form-grid textarea{resize:vertical}
.casa-consent{display:flex;align-items:flex-start;gap:10px;margin:24px 0;font-size:14px;color:#514238}
.casa-consent input{margin-top:3px;accent-color:#6a4b36}
.casa-request-form button{background:#241d19;color:#f5efe6;border:0;border-radius:8px;padding:15px 28px;font:inherit;font-weight:700;cursor:pointer}
.casa-request-form button:hover{background:#5c4032}
.casa-form-status{margin:16px 0 0;font-size:14px}
.casa-form-status.success{color:#286343}.casa-form-status.error{color:#a0322b}
.casa-hidden{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media(max-width:640px){.casa-catering-request{padding:55px 0 70px}.casa-form-grid{grid-template-columns:1fr}.casa-form-grid .casa-full{grid-column:auto}.casa-request-form button{width:100%}}