:root {
    --ink: #21140c;
    --brown: #3a2417;
    --brown2: #5b3923;
    --gold: #d4a23f;
    --gold2: #a8751f;
    --cream: #f8efd9;
    --paper: #f1dfba;
    --green: #4d5a24;
    --red: #9d3b19;
    --white: #fffaf0
}

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

html {
    scroll-behavior: smooth
}

body {
    font-family: Arial,Helvetica,sans-serif;
    color: var(--ink);
    line-height: 1.6;
    background: #f4e6c8
}

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

img {
    max-width: 100%
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #2f1e13;
    border-bottom: 3px solid var(--gold);
    box-shadow: 0 8px 24px rgba(0,0,0,.24)
}

.header-inner {
    position: relative;
    max-width: 1450px;
    min-height: 96px;
    margin: auto;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px
}

.header-inner > a:first-child {
    position: relative;
    display: block;
    flex: 0 0 282px;
    width: 282px;
    height: 96px;
    z-index: 2;
}

.brand-logo {
    position: absolute;
    top: 3px;
    left: 0;
    width: 276px;
    height: 184px;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,.45))
}

.primary-nav {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: auto
}

    .primary-nav > a {
        color: var(--white);
        font-family: Georgia,serif;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .03em
    }

.header-order, .header-cart {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: 7px;
    background: linear-gradient(#e0ad49,#bd8124);
    color: #24150c !important;
    box-shadow: 0 5px 16px rgba(0,0,0,.24)
}

    .header-cart svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2
    }

.header-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--brown);
    color: white;
    font-size: .72rem;
    font-weight: 900
}

.hero {
    position: relative;
    min-height: 860px;
    overflow: hidden;
    color: #fff;
    background-image: linear-gradient(90deg,rgba(25,13,6,.80) 0%,rgba(25,13,6,.50) 45%,rgba(25,13,6,.12) 100%),url('/customers/BagelStation/img/Hero/BagelStationHero_4K.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 72px
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0,900px);
    align-items: center;
    justify-content: start;
    gap: 0;
    max-width: 1450px;
    min-height: 788px;
    margin: 0 auto;
    padding: 95px 6% 28px
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--gold);
    font-family: Georgia,serif;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase
}

.hero-text {
    transform: translateY(-72px)
}

    .hero-kicker:before, .hero-kicker:after {
        content: "";
        width: 42px;
        height: 1px;
        background: currentColor
    }

.hero h1 {
    max-width: 800px;
    margin-bottom: 24px;
    font-family: Georgia,serif;
    font-size: clamp(3.8rem,7vw,7.6rem);
    line-height: .94;
    letter-spacing: -.045em;
    text-shadow: 0 5px 20px rgba(0,0,0,.32)
}

    .hero h1 span {
        display: block;
        color: var(--gold)
    }

.hero-copy p {
    max-width: 700px;
    margin-bottom: 34px;
    color: rgba(255,255,255,.9);
    font-family: Georgia,serif;
    font-size: clamp(1.1rem,2vw,1.4rem)
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 24px;
    border: 2px solid transparent;
    border-radius: 7px;
    font-weight: 900;
    transition: .2s
}

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 9px 22px rgba(0,0,0,.22)
    }

.btn-gold {
    background: linear-gradient(#e4b24f,#bd8124);
    color: #25160c
}

.btn-outline {
    border-color: rgba(255,255,255,.75);
    color: white;
    background: rgba(0,0,0,.12)
}

.feature-rail {
    position: relative;
    z-index: 20;
    max-width: 1450px;
    margin: -72px auto 0;
    background: #3a2417;
    border: 3px solid var(--gold);
    border-radius: 12px;
    box-shadow: 0 22px 48px rgba(0,0,0,.28);
    overflow: hidden
}

.feature-inner {
    max-width: 1450px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4,1fr)
}

.feature {
    position: relative;
    padding: 28px 24px;
    text-align: center;
    color: white
}

    .feature:not(:last-child):after {
        content: "";
        position: absolute;
        right: 0;
        top: 24%;
        height: 52%;
        width: 1px;
        background: rgba(255,255,255,.18)
    }

    .feature strong {
        display: block;
        color: var(--gold);
        font-family: Georgia,serif;
        font-size: 1.14rem
    }

    .feature span {
        font-size: .9rem;
        opacity: .8
    }

.menu-section {
    margin-top: 34px;
    position: relative;
    padding: 105px 5% 115px;
    background: linear-gradient(rgba(249,240,218,.9),rgba(249,240,218,.96)),url('/customers/BagelStation/img/Backgrounds/BlueRidgeMountainBackground_4K.png') top center/100% auto no-repeat,var(--paper)
}

.section-heading {
    max-width: 990px;
    margin: 0 auto 56px;
    text-align: center
}

    .section-heading .eyebrow {
        color: var(--gold2);
        font-family: Georgia,serif;
        font-weight: 900;
        letter-spacing: .18em;
        text-transform: uppercase
    }

    .section-heading h2 {
        margin: 8px 0 18px;
        color: var(--brown);
        font-family: Georgia,serif;
        font-size: clamp(2.8rem,5vw,5.2rem);
        line-height: .98;
        text-transform: uppercase
    }

.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 20px;
    color: var(--gold2)
}

    .divider:before, .divider:after {
        content: "";
        width: 140px;
        max-width: 24vw;
        height: 1px;
        background: currentColor
    }

.section-heading p {
    max-width: 780px;
    margin: auto;
    font-size: 1.15rem
}

.menu-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-auto-rows: 1fr;
    gap: 28px;
    max-width: 1500px;
    margin: 0 auto
}

.menu-card {
    display: grid;
    width: 100%;
    height: 390px;
    min-height: 390px;
    overflow: hidden;
    border: 1px solid rgba(138,96,40,.35);
    border-radius: 8px;
    background: #f8efd9;
    box-shadow: 0 10px 28px rgba(71,42,19,.12);
    transition: .22s
}

    .menu-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 18px 36px rgba(71,42,19,.2)
    }

.menu-card-image {
    width: 100%;
    display: block;
    width: 100%;
    height: 390px;
    min-height: 390px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.menu-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 390px;
    padding: 24px 20px;
    text-align: center
}

.menu-grid > .menu-card:nth-child(even) {
    grid-template-columns: minmax(0,45%) minmax(0,55%);
}

    .menu-grid > .menu-card:nth-child(even) .menu-card-image {
        order: 2;
    }

    .menu-grid > .menu-card:nth-child(even) .menu-card-content {
        order: 1;
    }

@media (max-width:900px) {
    .menu-grid > .menu-card:nth-child(even) {
        grid-template-columns: 1fr;
    }

        .menu-grid > .menu-card:nth-child(even) .menu-card-image,
        .menu-grid > .menu-card:nth-child(even) .menu-card-content {
            order: initial;
        }
}

.category-icon {
    margin-bottom: 10px;
    color: var(--gold2);
    font-size: 2rem
}

.menu-card h3 {
    width: 100%;
    margin-bottom: 13px;
    color: var(--brown);
    font-family: Georgia,serif;
    font-size: clamp(1.18rem,1.45vw,1.55rem);
    line-height: 1.08;
    letter-spacing: -.01em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap
}

.card-divider {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 16px;
    color: var(--gold2)
}

    .card-divider:before, .card-divider:after {
        content: "";
        flex: 1;
        height: 1px;
        background: currentColor;
        opacity: .6
    }

    .card-divider span {
        padding: 0 10px
    }

.menu-card p {
    flex: 1;
    margin-bottom: 20px;
    font-size: .94rem;
    line-height: 1.55
}

.card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 42px;
    white-space: nowrap;
    word-break: keep-all;
    margin-top: auto;
    padding: 10px 18px;
    border-radius: 5px;
    background: var(--brown);
    color: white;
    font-size: .82rem;
    font-weight: 900;
    text-transform: uppercase
}

.story-section {
    padding: 105px 6%;
    background-color: #2a170c;
    background-image: linear-gradient(90deg,rgba(36,19,9,.68),rgba(54,31,16,.58)),url('/customers/BagelStation/img/Textures/DarkWoodTexture_Seamless.png');
    background-position: center;
    background-size: auto,760px 760px;
    background-repeat: repeat;
    color: white
}

.story-inner {
    max-width: 1300px;
    margin: auto;
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    gap: 78px;
    align-items: center
}

.story-image {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    padding: 0;
    border: 1px solid rgba(212,162,63,.72);
    border-radius: 9px;
    background: transparent;
    box-shadow: 0 24px 50px rgba(0,0,0,.34);
    overflow: hidden;
    line-height: 0
}

    .story-image img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        border-radius: 8px
    }

.story-copy .eyebrow, .visit-copy .eyebrow {
    color: var(--gold);
    font-family: Georgia,serif;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase
}

.story-copy h2, .visit-copy h2 {
    margin: 10px 0 20px;
    font-family: Georgia,serif;
    font-size: clamp(2.8rem,5vw,5rem);
    line-height: 1
}

.story-copy p {
    margin-bottom: 18px;
    color: rgba(255,255,255,.83);
    font-size: 1.08rem
}

.visit-section {
    padding: 110px 6%;
    background: linear-gradient(rgba(243,228,197,.88),rgba(243,228,197,.94)),url('/customers/BagelStation/img/Backgrounds/BlueRidgeMountainBackground_4K.png') center/cover no-repeat
}

.visit-card {
    max-width: 1200px;
    margin: auto;
    padding: 55px;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 45px;
    align-items: center;
    border: 1px solid rgba(121,80,31,.32);
    border-radius: 14px;
    background: rgba(255,250,240,.96);
    box-shadow: 0 18px 45px rgba(78,45,18,.18)
}

.visit-copy .eyebrow {
    color: var(--gold2)
}

.visit-copy h2 {
    color: var(--brown)
}

.visit-copy p {
    margin-bottom: 15px;
    font-size: 1.08rem
}

.visit-address {
    font-weight: 700;
    color: var(--brown2)
}

.visit-logo {
    text-align: center
}

    .visit-logo img {
        display: block;
        width: min(100%,390px);
        height: auto;
        aspect-ratio: 4 / 5;
        margin-inline: auto;
        object-fit: contain;
        filter: drop-shadow(0 15px 22px rgba(46,25,11,.22))
    }

.site-footer {
    padding: 58px 6% 28px;
    background: #2f1e13;
    color: #fff;
    border-top: 3px solid var(--gold)
}

.footer-grid {
    max-width: 1250px;
    margin: 0 auto 38px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 50px
}

.footer-brand {
    margin-bottom: 12px;
    color: var(--gold);
    font-family: Georgia,serif;
    font-size: 2rem;
    font-weight: 900
}

.footer-copy, .footer-links a, .footer-links span {
    color: rgba(255,255,255,.76)
}

.footer-heading {
    margin-bottom: 14px;
    color: var(--gold);
    font-weight: 900;
    text-transform: uppercase
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.copyright {
    max-width: 1250px;
    margin: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.14);
    text-align: center;
    color: rgba(255,255,255,.56);
    font-size: .88rem
}

.bs-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    padding: 24px;
    background: rgba(22,12,7,.82);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center
}

    .bs-modal-overlay.is-open {
        display: flex
    }

.bs-modal {
    position: relative
}

    .bs-modal img {
        display: block;
        max-width: 92vw;
        max-height: 88vh;
        border: 2px solid rgba(212,162,63,.65);
        border-radius: 10px;
        box-shadow: 0 24px 60px rgba(0,0,0,.48)
    }

.bs-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 50%;
    background: rgba(31,16,8,.88);
    color: white;
    font-size: 1.4rem;
    cursor: pointer
}

@media(max-width:1220px) {
    .menu-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:960px) {
    .primary-nav > a:not(.header-order):not(.header-cart) {
        display: none
    }

    .hero-inner {
        grid-template-columns: 1fr;
        padding-top: 115px
    }

    .feature-inner {
        grid-template-columns: repeat(2,1fr)
    }

    .story-inner, .visit-card {
        grid-template-columns: 1fr
    }

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

@media(max-width:720px) {
    .header-inner {
        min-height: 52px;
        padding: 0 20px
    }

    .header-inner > a:first-child {
        flex-basis: 174px;
        width: 174px;
        height: 52px;
    }

    .brand-logo {
        width: 180px;
        height: 132px
    }

    .header-cart-total {
        display: none
    }

    .menu-grid {
        grid-template-columns: 1fr
    }

    .menu-card {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0
    }

    .menu-card-image {
        width: 100%;
        height: 340px;
        min-height: 340px
    }

    .menu-card-content {
        height: auto;
        min-height: 360px
    }

    .feature-inner {
        grid-template-columns: 1fr
    }

    .feature:after {
        display: none !important
    }

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

    .visit-card {
        padding: 38px 24px
    }
}

@media(max-width:520px) {
    .hero-text {
        transform: translateY(-36px)
    }

    .header-order {
        padding: 10px 14px;
        font-size: .82rem
    }

    .hero-inner {
        padding: 105px 24px 70px
    }

    .hero h1 {
        font-size: 3.4rem
    }

    .menu-section, .story-section, .visit-section {
        padding-left: 22px;
        padding-right: 22px
    }
}


/* =========================================================
   PREMIUM CATEGORY PANEL ENHANCEMENTS
========================================================== */

.menu-card {
    position: relative;
    border-radius: 12px;
    border: 1px solid rgba(154,106,36,.42);
    background: linear-gradient(180deg,rgba(255,250,240,.98),rgba(244,228,194,.98));
    box-shadow: 0 14px 34px rgba(71,42,19,.16), inset 0 1px 0 rgba(255,255,255,.70);
}

    .menu-card::before {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 5;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 30px;
        padding: 6px 12px;
        border: 1px solid rgba(99,61,25,.34);
        border-radius: 4px;
        background: linear-gradient(180deg,#E2B14D 0%,#C58C2D 100%);
        color: #2F1E13;
        box-shadow: 0 5px 14px rgba(0,0,0,.20);
        font-family: Georgia,"Times New Roman",serif;
        font-size: .72rem;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
        white-space: nowrap;
    }

.menu-grid > .menu-card:nth-child(1)::before {
    content: "Fresh Bagels"
}

.menu-grid > .menu-card:nth-child(2)::before {
    content: "Breakfast"
}

.menu-grid > .menu-card:nth-child(3)::before {
    content: "Hot & Melty"
}

.menu-grid > .menu-card:nth-child(4)::before {
    content: "New York Deli"
}

.menu-grid > .menu-card:nth-child(5)::before {
    content: "House Favorites"
}

.menu-grid > .menu-card:nth-child(6)::before {
    content: "Coffee & Bakery"
}

.menu-grid > .menu-card:nth-child(even)::before {
    right: 14px;
    left: auto;
}

.menu-card-image {
    position: relative;
    isolation: isolate;
    border-radius: 11px 0 0 11px;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.38);
}

    .menu-card-image::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg,rgba(20,10,5,.06) 0%,rgba(20,10,5,.02) 45%,rgba(20,10,5,.34) 100%), linear-gradient(90deg,rgba(20,10,5,.08) 0%,transparent 48%,rgba(20,10,5,.14) 100%);
        pointer-events: none;
    }

.menu-grid > .menu-card:nth-child(even) .menu-card-image {
    border-radius: 0 11px 11px 0;
    box-shadow: inset 1px 0 0 rgba(255,255,255,.38);
}

.menu-card-content {
    position: relative;
    background: radial-gradient(circle at 50% 0,rgba(212,162,63,.10),transparent 36%);
}

    .menu-card-content::before,
    .menu-card-content::after {
        content: "";
        position: absolute;
        width: 26px;
        height: 26px;
        border-color: rgba(201,154,60,.55);
        pointer-events: none;
    }

    .menu-card-content::before {
        top: 12px;
        left: 12px;
        border-top: 2px solid;
        border-left: 2px solid;
    }

    .menu-card-content::after {
        right: 12px;
        bottom: 12px;
        border-right: 2px solid;
        border-bottom: 2px solid;
    }

.category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
    border: 1px solid rgba(154,106,36,.34);
    border-radius: 50%;
    background: linear-gradient(180deg,rgba(255,255,255,.74),rgba(232,210,167,.74));
    box-shadow: 0 5px 12px rgba(71,42,19,.12);
    font-size: 1.65rem;
}

.menu-card h3 {
    text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

.card-divider {
    margin-top: 2px;
    margin-bottom: 17px;
}

    .card-divider span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 25px;
        height: 25px;
        border: 1px solid rgba(201,154,60,.52);
        border-radius: 50%;
        background: #F8EFD9;
        font-size: .72rem;
    }

    .card-divider::before,
    .card-divider::after {
        height: 2px;
        background: repeating-linear-gradient( 90deg, rgba(154,106,36,.75) 0, rgba(154,106,36,.75) 18px, transparent 18px, transparent 25px );
    }

.menu-card p {
    max-width: 330px;
    color: #4C3525;
}

.card-link {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 7px 16px rgba(71,42,19,.18);
}

@media (max-width:900px) {
    .menu-card::before {
        left: 14px !important;
        right: auto !important;
    }

    .menu-card-image,
    .menu-grid > .menu-card:nth-child(even) .menu-card-image {
        border-radius: 11px 11px 0 0;
        box-shadow: inset 0 -1px 0 rgba(255,255,255,.38);
    }
}



/* =========================================================
   CATEGORY LAYOUT CORRECTIONS
========================================================== */

/* Two equal-size cards per row. */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-auto-rows: 390px;
    gap: 28px;
    max-width: 1500px;
    margin: 0 auto;
}

/* Explicit columns are required so the image cannot cover the content panel. */
.menu-card {
    display: grid;
    grid-template-columns: calc(55% - 25px) minmax(0,1fr);
    width: 100%;
    height: 390px;
    min-height: 390px;
    overflow: hidden;
}

/* Alternate cards place the content first and image second. */
.menu-grid > .menu-card:nth-child(even) {
    grid-template-columns: minmax(0,1fr) calc(55% - 25px);
}

    .menu-grid > .menu-card:nth-child(even) .menu-card-content {
        grid-column: 1;
        grid-row: 1;
    }

    .menu-grid > .menu-card:nth-child(even) .menu-card-image {
        grid-column: 2;
        grid-row: 1;
    }

/* Image and content panels now exactly match the card height. */
.menu-card-image {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 390px;
    min-height: 390px;
    align-self: stretch;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: none;
}

.menu-card-content {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 390px;
    min-height: 390px;
    padding: 24px 20px;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    z-index: 3;
}

    /* Keep title and description visible above decorative layers. */
    .menu-card-content > * {
        position: relative;
        z-index: 4;
    }

.menu-card:hover .menu-card-image {
    transform: none;
    filter: saturate(1.04) contrast(1.03);
}

/* Keep descriptions from being pushed outside the fixed-height panel. */
.menu-card p {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    max-width: 330px;
    min-height: 0;
    margin-bottom: 14px;
    overflow: hidden;
    color: #4C3525;
    font-size: .90rem;
    line-height: 1.45;
}

/* Preserve the intended two-line headings without extra wrapping. */
.menu-card h3 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(1.08rem,1.25vw,1.38rem);
    line-height: 1.08;
    white-space: nowrap;
}

/* Single-column responsive layout. */
@media (max-width:900px) {
    .menu-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        max-width: 680px;
    }

        .menu-card,
        .menu-grid > .menu-card:nth-child(even) {
            grid-template-columns: 1fr;
            height: auto;
            min-height: 0;
        }

            .menu-card-image,
            .menu-grid > .menu-card:nth-child(even) .menu-card-image {
                grid-column: 1;
                grid-row: 1;
                width: 100%;
                height: 300px;
                min-height: 300px;
            }

            .menu-card-content,
            .menu-grid > .menu-card:nth-child(even) .menu-card-content {
                grid-column: 1;
                grid-row: 2;
                height: auto;
                min-height: 330px;
            }
}




/* =========================================================
   IMG-BASED CATEGORY CARDS
========================================================= */

/* Image wrapper */
.menu-card-image {
    overflow: hidden;
    align-self: stretch;
    justify-self: stretch;
    height: 100%;
    min-height: 100%;
    padding: 0;
    border-radius: 0;
}

    /* Actual image fills the entire image panel */
    .menu-card-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform: scale(1.16);
        transition: transform .45s ease, filter .45s ease;
    }

/* Hover */
.menu-card:hover .menu-card-image img {
    transform: scale(1.22);
    filter: saturate(1.04) contrast(1.03);
}

/* Remove old background-image behavior */
.menu-card-image {
    background: none !important;
}



/* =========================================================
   REFACTORED MENU CATEGORY CARDS — AUTHORITATIVE RULES
========================================================= */

.menu-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-auto-rows: 390px;
    gap: 28px;
    max-width: 1500px;
    margin: 0 auto;
}

.menu-card {
    position: relative;
    display: grid;
    grid-template-columns: calc(55% - 25px) minmax(0,1fr);
    width: 100%;
    height: 390px;
    min-height: 390px;
    overflow: hidden;
    border: 1px solid rgba(154,106,36,.42);
    border-radius: 12px;
    background: linear-gradient(180deg,rgba(255,250,240,.98),rgba(244,228,194,.98));
    box-shadow: 0 14px 34px rgba(71,42,19,.16),inset 0 1px 0 rgba(255,255,255,.70);
}

.menu-grid > .menu-card:nth-child(even) {
    grid-template-columns: minmax(0,1fr) calc(55% - 25px);
}

.menu-card-image {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: none !important;
    border-radius: 11px 0 0 11px;
}

    .menu-card-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

.menu-card-content {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 24px 20px;
    text-align: center;
    overflow: hidden;
}

.menu-grid > .menu-card:nth-child(even) .menu-card-image {
    grid-column: 2;
    grid-row: 1;
    border-radius: 0 11px 11px 0;
}

.menu-grid > .menu-card:nth-child(even) .menu-card-content {
    grid-column: 1;
    grid-row: 1;
}

.menu-card::before {
    content: attr(data-station-tag);
}

.menu-grid > .menu-card:nth-child(even)::before {
    right: 14px;
    left: auto;
}

.menu-card h3 {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 0 13px;
    color: var(--brown);
    font-family: Georgia,"Times New Roman",serif;
    font-size: clamp(1.08rem,1.25vw,1.38rem);
    line-height: 1.08;
    letter-spacing: -.01em;
    text-transform: uppercase;
    white-space: nowrap;
}

    .menu-card h3 span {
        display: block;
        white-space: nowrap;
    }

.menu-card p {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    max-width: 330px;
    min-height: 0;
    margin: 0 0 14px;
    overflow: hidden;
    color: #4C3525;
    font-size: .90rem;
    line-height: 1.45;
}

.card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 42px;
    flex: 0 0 auto;
    padding: 10px 18px;
    background: linear-gradient(180deg,#D7AA45 0%,#C8942E 100%);
    color: #2F1E13;
    border: 1px solid #9A6A24;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    word-break: keep-all;
}

/* Unique link color per category card */
.card-bagels .card-link {
    background: linear-gradient(180deg,#D7AA45 0%,#C8942E 100%);
    color: #2F1E13;
    border-color: #9A6A24;
}

.card-breakfast .card-link {
    background: linear-gradient(180deg,#E2792B 0%,#B85A1D 100%);
    color: #FFF7E8;
    border-color: #8F441A;
}

.card-melts .card-link {
    background: linear-gradient(180deg,#8B3220 0%,#6B2515 100%);
    color: #FFF7E8;
    border-color: #4E1B0F;
}

.card-deli .card-link {
    background: linear-gradient(180deg,#6B7A34 0%,#4D5A24 100%);
    color: #FFF7E8;
    border-color: #3C481B;
}

.card-specialty .card-link {
    background: linear-gradient(180deg,#7A2E2E 0%,#5C1F1F 100%);
    color: #FFF7E8;
    border-color: #431515;
}

.card-coffee .card-link {
    background: linear-gradient(180deg,#6B4226 0%,#4A2E1D 100%);
    color: #FFF7E8;
    border-color: #392314;
}

@media (max-width:900px) {
    .menu-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        max-width: 680px;
    }

        .menu-card,
        .menu-grid > .menu-card:nth-child(even) {
            grid-template-columns: 1fr;
            height: auto;
            min-height: 0;
        }

            .menu-card-image,
            .menu-grid > .menu-card:nth-child(even) .menu-card-image {
                grid-column: 1;
                grid-row: 1;
                width: 100%;
                height: 300px;
                border-radius: 11px 11px 0 0;
            }

            .menu-card-content,
            .menu-grid > .menu-card:nth-child(even) .menu-card-content {
                grid-column: 1;
                grid-row: 2;
                height: auto;
                min-height: 330px;
            }

            .menu-card::before,
            .menu-grid > .menu-card:nth-child(even)::before {
                right: auto;
                left: 14px;
            }
}




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

.story-section {
    position: relative;
    overflow: hidden;
    padding: 105px 6% 115px;
    background: radial-gradient(circle at 14% 20%,rgba(212,162,63,.12),transparent 28%), linear-gradient(135deg,#2F1E13 0%,#4A2E1D 100%);
    color: #fff;
}

    .story-section::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .16;
        background: repeating-linear-gradient( 0deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 5px );
    }

.story-heading {
    position: relative;
    z-index: 1;
    max-width: 980px;
    margin: 0 auto 48px;
    text-align: center;
}

    .story-heading .eyebrow {
        color: var(--gold);
        font-family: Georgia,"Times New Roman",serif;
        font-size: .95rem;
        font-weight: 900;
        letter-spacing: .18em;
        text-transform: uppercase;
    }

    .story-heading h2 {
        margin: 8px 0 20px;
        color: #FFF7E8;
        font-family: Georgia,"Times New Roman",serif;
        font-size: clamp(2.65rem,5vw,4.9rem);
        line-height: 1;
        letter-spacing: -.035em;
        text-transform: uppercase;
        text-shadow: 0 5px 18px rgba(0,0,0,.28);
    }

.story-heading-divider,
.story-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--gold);
}

    .story-heading-divider::before,
    .story-heading-divider::after {
        content: "";
        width: 145px;
        max-width: 23vw;
        height: 2px;
        background: repeating-linear-gradient( 90deg, rgba(212,162,63,.9) 0, rgba(212,162,63,.9) 20px, transparent 20px, transparent 27px );
    }

    .story-heading-divider span,
    .story-divider span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border: 1px solid rgba(212,162,63,.72);
        border-radius: 50%;
        background: #3A2417;
        font-size: .75rem;
    }

.story-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(360px,46%) minmax(0,54%);
    width: 100%;
    max-width: 1320px;
    min-height: 490px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(212,162,63,.52);
    border-radius: 14px;
    background: linear-gradient(180deg,rgba(255,250,240,.98),rgba(242,225,190,.98));
    box-shadow: 0 26px 58px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.72);
}

    .story-card::before,
    .story-card::after {
        content: "";
        position: absolute;
        z-index: 4;
        width: 42px;
        height: 42px;
        border-color: rgba(201,154,60,.72);
        pointer-events: none;
    }

    .story-card::before {
        top: 12px;
        left: 12px;
        border-top: 3px solid;
        border-left: 3px solid;
    }

    .story-card::after {
        right: 12px;
        bottom: 12px;
        border-right: 3px solid;
        border-bottom: 3px solid;
    }

.story-image {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 490px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 13px 0 0 13px;
    background: #2F1E13;
    box-shadow: none;
    line-height: 0;
}

    .story-image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,rgba(22,12,6,.04),rgba(22,12,6,.30)), linear-gradient(90deg,transparent 65%,rgba(47,30,19,.28));
        pointer-events: none;
    }

    .story-image img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 490px;
        object-fit: cover;
        object-position: center;
        border-radius: 0;
        transition: transform .45s ease,filter .45s ease;
    }

.story-card:hover .story-image img {
    transform: scale(1.025);
    filter: saturate(1.04) contrast(1.02);
}

.story-tag {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 7px 13px;
    border: 1px solid rgba(78,45,18,.38);
    border-radius: 5px;
    background: linear-gradient(180deg,#E2B14D,#C58C2D);
    color: #2F1E13;
    box-shadow: 0 7px 17px rgba(0,0,0,.22);
    font-family: Georgia,"Times New Roman",serif;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}

.story-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 52px 58px;
    color: #3B2417;
    text-align: center;
    background: radial-gradient(circle at 50% 0,rgba(212,162,63,.12),transparent 38%);
}

    .story-copy::before,
    .story-copy::after {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        border-color: rgba(201,154,60,.55);
        pointer-events: none;
    }

    .story-copy::before {
        top: 18px;
        left: 18px;
        border-top: 2px solid;
        border-left: 2px solid;
    }

    .story-copy::after {
        right: 18px;
        bottom: 18px;
        border-right: 2px solid;
        border-bottom: 2px solid;
    }

.story-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 15px;
    border: 1px solid rgba(154,106,36,.38);
    border-radius: 50%;
    background: linear-gradient(180deg,#FFF9EC,#E7D1A2);
    box-shadow: 0 7px 16px rgba(71,42,19,.15);
    font-size: 1.9rem;
}

.story-copy h3 {
    max-width: 620px;
    margin: 0 0 18px;
    color: #3B2417;
    font-family: Georgia,"Times New Roman",serif;
    font-size: clamp(1.8rem,3vw,2.75rem);
    line-height: 1.05;
    text-transform: uppercase;
}

.story-divider {
    width: 100%;
    max-width: 540px;
    margin-bottom: 21px;
}

    .story-divider::before,
    .story-divider::after {
        content: "";
        flex: 1;
        height: 2px;
        background: repeating-linear-gradient( 90deg, rgba(154,106,36,.72) 0, rgba(154,106,36,.72) 18px, transparent 18px, transparent 25px );
    }

.story-copy p {
    max-width: 670px;
    margin: 0 0 16px;
    color: #4C3525;
    font-size: 1.02rem;
    line-height: 1.65;
}

.story-highlights {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 8px 0 25px;
}

    .story-highlights span {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 7px 13px;
        border: 1px solid rgba(154,106,36,.34);
        border-radius: 999px;
        background: rgba(255,255,255,.45);
        color: #4A2E1D;
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .045em;
        text-transform: uppercase;
    }

.story-order-button {
    width: 220px;
    white-space: nowrap;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.conductor-portrait {
    cursor: pointer;
}

.baxter-rig {
    position: absolute;
    z-index: 2;
    bottom: -1.5%;
    left: 50%;
    width: min(78%,460px);
    height: 94%;
    overflow: visible;
    transform: translateX(-50%);
    pointer-events: none;
}

.baxter-rig[hidden] {
    display: none !important;
}

.baxter-3d {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .55s ease;
}

.baxter-3d.is-ready {
    opacity: 1;
}

.baxter-3d canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.baxter-3d.has-error {
    display: none;
}

.baxter-3d-status {
    position: absolute;
    z-index: 4;
    right: 14px;
    bottom: 14px;
    display: none;
    max-width: calc(100% - 28px);
    padding: 7px 10px;
    border-radius: 7px;
    background: rgba(47,30,19,.88);
    color: #fff8e8;
    font-size: .72rem;
    line-height: 1.3;
}

.baxter-3d-status.is-error {
    display: block;
}

.conductor-portrait:hover .conductor-stage,
.story-card:hover .conductor-stage {
    transform: none !important;
    scale: 1 !important;
    filter: none !important;
}

.baxter-rig g,
.baxter-rig path,
.baxter-rig ellipse {
    transform-box: fill-box;
}

.baxter-character { transform-origin: 50% 100%; animation: baxter-idle 3.8s ease-in-out infinite alternate; }
.baxter-tail { transform-origin: 90% 55%; animation: baxter-tail 1.8s ease-in-out infinite alternate; }
.baxter-head { transform-origin: 50% 78%; animation: baxter-head-idle 4.2s ease-in-out infinite alternate; }
.baxter-eye { transform-origin: center; animation: baxter-blink 5.2s linear infinite; }
.baxter-ear-left { transform-origin: 75% 80%; }
.baxter-ear-right { transform-origin: 25% 80%; }
.baxter-arm-left { transform-origin: 75% 15%; animation: baxter-hand-idle 3.3s ease-in-out infinite alternate; }
.baxter-arm-right { transform-origin: 25% 15%; animation: baxter-hand-idle 3.3s .4s ease-in-out infinite alternate-reverse; }
.baxter-leg { transform-origin: 50% 10%; }
.baxter-mouth { transform-origin: 50% 12%; }
.baxter-brow { transform-origin: center; }

.conductor-portrait:hover .conductor-stage,
.story-card:hover .conductor-stage {
    transform: none !important;
    scale: 1 !important;
    animation: none !important;
    filter: none;
}

.conductor-portrait:focus-visible {
    outline: 4px solid var(--gold);
    outline-offset: -6px;
}

.conductor-signal {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 3;
    display: flex;
    align-items: end;
    gap: 5px;
    height: 36px;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 999px;
    background: rgba(47,30,19,.78);
    backdrop-filter: blur(6px);
}

.conductor-signal i {
    display: block;
    width: 4px;
    height: 8px;
    border-radius: 99px;
    background: var(--gold);
    transform-origin: bottom;
}

.conductor-speaking .conductor-signal i,
.conductor-listening .conductor-signal i {
    animation: conductor-level .65s ease-in-out infinite alternate;
}

.conductor-signal i:nth-child(2) { height: 18px; animation-delay: .15s; }
.conductor-signal i:nth-child(3) { height: 12px; animation-delay: .3s; }

.conductor-speaking .baxter-character { animation: baxter-speaking-body .72s ease-in-out infinite alternate; }
.conductor-speaking .baxter-mouth { animation: baxter-speaking-mouth .19s ease-in-out infinite alternate; }
.conductor-speaking .baxter-head { animation: baxter-speaking-head .7s ease-in-out infinite alternate; }
.conductor-speaking .baxter-arm-left { animation: baxter-speaking-left-arm 1.15s ease-in-out infinite alternate; }
.conductor-speaking .baxter-arm-right { animation: baxter-speaking-right-arm 1.35s .18s ease-in-out infinite alternate; }
.conductor-speaking .baxter-leg-left { animation: baxter-speaking-leg .9s ease-in-out infinite alternate; }
.conductor-speaking .baxter-leg-right { animation: baxter-speaking-leg .9s .45s ease-in-out infinite alternate-reverse; }
.conductor-speaking .baxter-ear-left { animation: baxter-ear-left .8s ease-in-out infinite alternate; }
.conductor-speaking .baxter-ear-right { animation: baxter-ear-right .8s ease-in-out infinite alternate-reverse; }
.conductor-speaking .baxter-brow-left { animation: baxter-brow-left 1.5s ease-in-out infinite alternate; }
.conductor-speaking .baxter-brow-right { animation: baxter-brow-right 1.5s ease-in-out infinite alternate-reverse; }

.conductor-listening .baxter-head { animation: baxter-listening-head 1.9s ease-in-out infinite alternate; }
.conductor-listening .baxter-ear-left { animation: baxter-listening-ear-left .8s ease-out forwards; }
.conductor-listening .baxter-ear-right { animation: baxter-listening-ear-right .8s ease-out forwards; }
.conductor-listening .baxter-eye { animation: baxter-listening-eyes 1.4s ease-in-out infinite alternate; }

.conductor-thinking .baxter-head { animation: baxter-thinking-head 2s ease-in-out infinite alternate; }
.conductor-thinking .baxter-brow-left { animation: baxter-thinking-brow 1.4s ease-in-out infinite alternate; }
.conductor-thinking .baxter-arm-right { animation: baxter-thinking-paw 2s ease-in-out infinite alternate; }

.conductor-chat {
    width: 100%;
    max-width: 650px;
    margin: 6px 0 24px;
    padding: 16px;
    border: 1px solid rgba(154,106,36,.38);
    border-radius: 12px;
    background: rgba(255,255,255,.56);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(71,42,19,.10);
    text-align: left;
}

.conductor-chat.is-invited {
    animation: conductor-invite .8s ease;
}

.conductor-chat-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
    color: #3b2417;
}

.conductor-chat-heading strong {
    font-family: Georgia,"Times New Roman",serif;
    font-size: 1.1rem;
}

.conductor-chat-heading span {
    color: #6d513d;
    font-size: .76rem;
    line-height: 1.25;
    text-align: right;
}

.conductor-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 190px;
    margin-bottom: 12px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.conductor-message {
    max-width: 88%;
    padding: 9px 12px;
    border-radius: 12px;
    color: #3b2417;
    font-size: .9rem;
    line-height: 1.4;
}

.conductor-message-assistant {
    align-self: flex-start;
    border-bottom-left-radius: 3px;
    background: #f0ddaf;
}

.conductor-message-user {
    align-self: flex-end;
    border-bottom-right-radius: 3px;
    background: #3b2417;
    color: #fff9ec;
}

.conductor-form {
    display: grid;
    grid-template-columns: minmax(0,1fr) 44px auto;
    gap: 8px;
}

.conductor-form input {
    min-width: 0;
    height: 44px;
    padding: 0 13px;
    border: 1px solid rgba(91,57,34,.34);
    border-radius: 8px;
    background: #fffdf8;
    color: #2f1e13;
    font: inherit;
}

.conductor-form input:focus {
    outline: 3px solid rgba(212,162,63,.34);
    border-color: #a76f20;
}

.conductor-mic,
.conductor-send {
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 900;
}

.conductor-mic {
    background: #ead39d;
    color: #3b2417;
    font-size: 1.15rem;
}

.conductor-send {
    padding: 0 17px;
    background: #3b2417;
    color: #fff;
}

.conductor-mic:hover,
.conductor-mic[aria-pressed="true"] {
    background: var(--gold);
}

.conductor-send:hover { background: #593823; }
.conductor-form button:disabled { cursor: wait; opacity: .55; }

.conductor-sound-toggle {
    margin-top: 9px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #725239;
    cursor: pointer;
    font-size: .76rem;
    font-weight: 800;
}

.conductor-chat.is-thinking .conductor-chat-heading strong::after {
    content: " ...";
    animation: conductor-pulse 1s ease-in-out infinite alternate;
}

@keyframes baxter-idle { from { transform: translateY(0) scale(1); } to { transform: translateY(-4px) scale(1.006); } }
@keyframes baxter-tail { from { transform: rotate(-9deg); } to { transform: rotate(13deg); } }
@keyframes baxter-head-idle { from { transform: rotate(-1deg); } to { transform: rotate(1deg); } }
@keyframes baxter-hand-idle { from { transform: rotate(-2deg); } to { transform: rotate(3deg); } }
@keyframes baxter-blink { 0%,45%,48%,100% { transform: scaleY(1); } 46%,47% { transform: scaleY(.08); } }
@keyframes baxter-speaking-body { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes baxter-speaking-mouth { from { transform: scaleY(.2) scaleX(1.08); } to { transform: scaleY(1.08) scaleX(.94); } }
@keyframes baxter-speaking-head { from { transform: rotate(-2deg) translateY(0); } to { transform: rotate(2deg) translateY(-4px); } }
@keyframes baxter-speaking-left-arm { from { transform: rotate(-8deg); } to { transform: rotate(18deg); } }
@keyframes baxter-speaking-right-arm { from { transform: rotate(7deg); } to { transform: rotate(-17deg); } }
@keyframes baxter-speaking-leg { from { transform: rotate(-2deg) translateY(0); } to { transform: rotate(3deg) translateY(-5px); } }
@keyframes baxter-ear-left { from { transform: rotate(0); } to { transform: rotate(-8deg); } }
@keyframes baxter-ear-right { from { transform: rotate(0); } to { transform: rotate(8deg); } }
@keyframes baxter-brow-left { from { transform: translateY(0) rotate(0); } to { transform: translateY(-5px) rotate(-4deg); } }
@keyframes baxter-brow-right { from { transform: translateY(-2px) rotate(0); } to { transform: translateY(2px) rotate(4deg); } }
@keyframes baxter-listening-head { from { transform: rotate(-4deg); } to { transform: rotate(-7deg) translateY(-3px); } }
@keyframes baxter-listening-ear-left { to { transform: rotate(-12deg); } }
@keyframes baxter-listening-ear-right { to { transform: rotate(12deg); } }
@keyframes baxter-listening-eyes { from { transform: translateX(-2px); } to { transform: translateX(2px); } }
@keyframes baxter-thinking-head { from { transform: rotate(2deg); } to { transform: rotate(7deg) translateY(-3px); } }
@keyframes baxter-thinking-brow { from { transform: translateY(0); } to { transform: translateY(-7px) rotate(-5deg); } }
@keyframes baxter-thinking-paw { from { transform: rotate(0); } to { transform: rotate(-22deg) translate(-5px,-8px); } }

@keyframes conductor-level {
    from { scale: 1 .55; opacity: .65; }
    to { scale: 1 1.25; opacity: 1; }
}

@keyframes conductor-invite {
    0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 10px 24px rgba(71,42,19,.10); }
    50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 0 0 5px rgba(212,162,63,.28),0 14px 30px rgba(71,42,19,.18); }
}

@keyframes conductor-pulse {
    from { opacity: .25; }
    to { opacity: 1; }
}

@media (max-width:960px) {
    .story-card {
        grid-template-columns: 1fr;
        max-width: 720px;
    }

    .story-image {
        min-height: 430px;
        border-radius: 13px 13px 0 0;
    }

        .story-image img {
            min-height: 430px;
        }

    .story-copy {
        padding: 48px 36px;
    }
}

@media (max-width:600px) {
    .story-section {
        padding: 82px 22px 92px;
    }

    .story-heading {
        margin-bottom: 34px;
    }

    .story-image,
    .story-image img {
        min-height: 340px;
    }

    .story-copy {
        padding: 42px 24px;
    }

        .story-copy p {
            font-size: .96rem;
        }

    .story-highlights {
        gap: 7px;
    }

        .story-highlights span {
            font-size: .70rem;
        }
}
/* =========================================================
   LANDING PAGE MOTION
========================================================= */

.site-header {
    transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.site-header.is-scrolled {
    background: rgba(47,30,19,.96);
    border-bottom-color: #e0ad49;
    box-shadow: 0 12px 32px rgba(0,0,0,.34);
    backdrop-filter: blur(10px);
}

.brand-logo {
    transition: filter .35s ease, scale .35s cubic-bezier(.2,.8,.2,1);
}

.header-inner > a:first-child:hover .brand-logo {
    scale: 1.035;
    filter: drop-shadow(0 14px 22px rgba(0,0,0,.55));
}

.primary-nav > a:not(.header-order):not(.header-cart) {
    position: relative;
    transition: color .25s ease;
}

.primary-nav > a:not(.header-order):not(.header-cart)::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 2px;
    background: var(--gold);
    scale: 0 1;
    transform-origin: center;
    transition: scale .25s ease;
}

.primary-nav > a:not(.header-order):not(.header-cart):hover::after {
    scale: 1 1;
}

.hero-kicker { animation: bs-rise-in .7s .08s both; }
.hero-copy h1 { animation: bs-rise-in .85s .18s both; }
.hero-copy p { animation: bs-rise-in .85s .3s both; }
.hero-actions { animation: bs-rise-in .85s .42s both; }

.btn,
.header-order,
.header-cart {
    transition: translate .22s ease, scale .22s ease, box-shadow .22s ease, filter .22s ease;
}

.btn:hover,
.header-order:hover,
.header-cart:hover {
    translate: 0 -3px;
    box-shadow: 0 12px 24px rgba(53,30,13,.24);
}

.btn:active,
.header-order:active,
.header-cart:active {
    translate: 0 0;
    scale: .98;
}

.motion-ready [data-reveal] {
    opacity: 0;
    translate: 0 32px;
    filter: blur(3px);
    transition: opacity .7s ease var(--reveal-delay, 0ms),
                translate .7s cubic-bezier(.2,.75,.25,1) var(--reveal-delay, 0ms),
                filter .7s ease var(--reveal-delay, 0ms);
}

.motion-ready [data-reveal].is-visible {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
}

.visit-logo img,
.story-image img {
    transition: scale .5s cubic-bezier(.2,.75,.25,1), filter .5s ease;
}

.visit-logo:hover img,
.story-image:hover img {
    scale: 1.025;
    filter: drop-shadow(0 20px 28px rgba(46,25,11,.3));
}

@keyframes bs-rise-in {
    from { opacity: 0; translate: 0 28px; }
    to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    [data-reveal] {
        opacity: 1 !important;
        translate: none !important;
        filter: none !important;
    }

    .conductor-chat-heading {
        display: block;
    }

    .conductor-chat-heading span {
        display: block;
        margin-top: 3px;
        text-align: left;
    }

    .conductor-form {
        grid-template-columns: minmax(0,1fr) 44px;
    }

    .conductor-send {
        grid-column: 1 / -1;
    }
}

/* Animated train crosses the header and fades before the navigation. */
.bridge-train-route {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 40%;
    z-index: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2%, #000 74%, rgba(0,0,0,.82) 82%, rgba(0,0,0,.38) 91%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 2%, #000 74%, rgba(0,0,0,.82) 82%, rgba(0,0,0,.38) 91%, transparent 100%);
    pointer-events: none;
}

.bridge-train {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(190px, 14vw, 240px);
    aspect-ratio: 3 / 2;
    pointer-events: none;
    filter: drop-shadow(0 5px 5px rgba(20,10,4,.52));
    animation: bs-cross-header 24s linear 1.2s infinite;
    will-change: translate;
}

.bridge-train img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bridge-train .train-cars {
    position: absolute;
    top: -34%;
    right: 94%;
    width: 205%;
    max-width: none;
    height: auto;
    object-fit: contain;
}

.bagel-smoke {
    position: absolute;
    top: 18%;
    left: 77%;
    width: clamp(13px, 1.25vw, 23px);
    aspect-ratio: 1;
    border: clamp(4px, .38vw, 7px) solid #c9852f;
    border-radius: 50%;
    background: #edbd63;
    box-shadow: inset 0 0 0 2px rgba(255,238,181,.75), 0 3px 5px rgba(32,16,6,.28);
    opacity: 0;
    animation: bs-bagel-puff 2.25s ease-out infinite;
}

.bagel-smoke::after {
    content: "";
    position: absolute;
    inset: -35%;
    background-image: radial-gradient(circle, #f5dfad 0 8%, transparent 9%);
    background-size: 7px 7px;
    border-radius: inherit;
    opacity: .75;
}

.bagel-smoke-two { animation-delay: .72s; }
.bagel-smoke-three { animation-delay: 1.44s; }

@keyframes bs-cross-header {
    from { translate: 0 0; }
    to { translate: calc(60vw + 520px) 0; }
}

@keyframes bs-bagel-puff {
    0% { opacity: 0; translate: 0 5px; scale: .45; rotate: 0deg; }
    18% { opacity: .95; }
    72% { opacity: .72; }
    100% { opacity: 0; translate: 34px -72px; scale: 1.18; rotate: 95deg; }
}

@media (max-width: 720px) {
    .bridge-train-route {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bridge-train-route {
        left: 58%;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .bridge-train {
        animation: none !important;
    }

    .bagel-smoke {
        display: none;
    }

    .conductor-speaking .conductor-portrait img,
    .conductor-portrait:hover img,
    .baxter-rig *,
    .conductor-signal i,
    .conductor-chat.is-invited {
        animation: none !important;
    }
}