/* Fennel & Rye Deli - base styles (light, LTR) */
:root {
    --moss: #432d49;
    --fern: #76517d;
    --sage: #e8c5ac;
    --linen: #f4e9e4;
    --paper: #fffaf6;
    --mustard: #e6a84a;
    --tomato: #bd5546;
    --ink: #322636;
    --muted: #6d5b6d;
    --line: #e4d8d2;
    --bg: var(--paper);
    --bg-alt: var(--linen);
    --text: var(--ink);
    --text-soft: var(--muted);
    --surface: #fff;
    --accent: var(--moss);
    --accent-ink: #fff;
    --hl: var(--mustard);
    --border: var(--line);
    --head: 'Fraunces', Georgia, serif;
    --body: 'Figtree', system-ui, sans-serif;
    --shadow: 0 18px 40px -22px rgba(50, 38, 54, .28);
    --hdr: 76px;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--hdr) + 16px)
}

body {
    margin: 0;
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

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

ul {
    list-style: none;
    margin: 0;
    padding: 0
}

h1,
h2,
h3 {
    font-family: var(--head);
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 .5em;
    letter-spacing: -.01em;
    font-variation-settings: "opsz" 96
}

h1 {
    font-size: clamp(2.6rem, 6.2vw, 5rem)
}

h2 {
    font-size: clamp(2rem, 4vw, 3.1rem)
}

h3 {
    font-size: 1.35rem
}

p {
    margin: 0 0 1em
}

.container {
    width: min(1200px, 100% - 2.5rem);
    margin-inline: auto
}

:focus-visible {
    outline: 3px solid var(--hl);
    outline-offset: 3px
}

.skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    top: -4rem;
    background: var(--accent);
    color: var(--accent-ink);
    padding: .6rem 1rem;
    z-index: 200
}

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

/* Announcement */
.announce {
    background: var(--moss);
    color: #fff4e8;
    text-align: center;
    font-size: .9rem;
    padding: .5rem 1rem
}

.announce p {
    margin: 0
}

.announce i {
    color: var(--mustard);
    margin-inline-end: .35rem
}

.announce a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    transition: box-shadow .3s, background .3s
}

.site-header.scrolled {
    box-shadow: 0 10px 30px -20px rgba(50, 38, 54, .35)
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: var(--hdr)
}

.brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--moss)
}

.brand-mark {
    width: 38px;
    height: 38px;
    flex: none
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1
}

.brand-text strong {
    font-family: var(--head);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text)
}

.brand-text small {
    font-size: .74rem;
    color: var(--text-soft);
    margin-top: 2px
}

.nav-list {
    display: flex;
    align-items: center;
    gap: .25rem
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem .85rem;
    font-weight: 500;
    font-size: .98rem;
    position: relative
}

.nav-link::after {
    content: "";
    position: absolute;
    inset-inline: .85rem;
    bottom: .2rem;
    height: 2px;
    background: var(--hl);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease)
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1)
}

.nav-link.active {
    color: var(--fern);
    font-weight: 600
}

.caret {
    font-size: .62rem;
    transition: transform .25s
}

.has-sub {
    position: relative
}

.sub {
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    min-width: 230px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: .5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .25s var(--ease);
    z-index: 20
}

.sub a {
    display: block;
    padding: .6rem 1.2rem;
    font-size: .97rem
}

.sub a:hover,
.sub a.active {
    background: var(--bg-alt);
    color: var(--fern)
}

.sub a.active {
    font-weight: 600;
    box-shadow: inset 3px 0 var(--hl)
}

.has-sub:hover>.sub,
.has-sub:focus-within>.sub,
.has-sub.open>.sub {
    opacity: 1;
    visibility: visible;
    transform: none
}

.has-sub:hover .caret,
.has-sub.open .caret {
    transform: rotate(180deg)
}

.header-tools {
    display: flex;
    align-items: center;
    gap: .5rem
}

.tool-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 .6rem;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font: 600 .8rem var(--body);
    transition: background .2s, border-color .2s
}

.tool-btn:hover {
    background: var(--bg-alt);
    border-color: var(--fern)
}

.icon-sun {
    display: none
}

.cart-count {
    position: absolute;
    top: -7px;
    inset-inline-end: -7px;
    background: var(--tomato);
    color: #fff;
    font-size: .68rem;
    min-width: 19px;
    height: 19px;
    border-radius: 50%;
    display: grid;
    place-items: center
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .8rem 1.5rem;
    font: 600 1rem var(--body);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s;
    border-radius: 4px
}

.btn-solid {
    background: var(--accent);
    color: var(--accent-ink)
}

.btn-solid:hover {
    background: var(--fern);
    transform: translateY(-2px)
}

.btn-outline {
    border-color: var(--accent);
    color: var(--accent)
}

.btn-outline:hover {
    background: var(--accent);
    color: var(--accent-ink)
}

.btn-text {
    padding-inline: .25rem;
    color: var(--text)
}

.btn-text .arrow {
    transition: transform .25s
}

.btn-text:hover .arrow {
    transform: translateY(4px)
}

.btn-solid.light {
    background: var(--mustard);
    color: var(--ink)
}

.btn-solid.light:hover {
    background: #d79535
}

.btn-outline.light {
    border-color: #fff;
    color: #fff
}

.btn-outline.light:hover {
    background: #fff;
    color: var(--moss)
}

.link {
    font-weight: 600;
    color: var(--fern);
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    border-bottom: 1px solid transparent
}

.link:hover {
    border-color: currentColor
}

.link .arrow {
    transition: transform .25s;
    font-size: .8em
}

.link:hover .arrow {
    transform: translateX(4px)
}

/* Burger */
.burger {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    background: transparent;
    cursor: pointer;
    padding: 0;
    position: relative
}

.burger span {
    position: absolute;
    inset-inline: 11px;
    height: 2px;
    background: var(--text);
    transition: transform .3s var(--ease), opacity .2s, top .3s
}

.burger span:nth-child(1) {
    top: 14px
}

.burger span:nth-child(2) {
    top: 21px
}

.burger span:nth-child(3) {
    top: 28px
}

.burger[aria-expanded="true"] span:nth-child(1) {
    top: 21px;
    transform: rotate(45deg)
}

.burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0
}

.burger[aria-expanded="true"] span:nth-child(3) {
    top: 21px;
    transform: rotate(-45deg)
}

/* Sections */
.section {
    padding: clamp(4rem, 9vw, 7.5rem) 0
}

.section-head {
    max-width: 640px;
    margin-bottom: 3rem
}

.section-head.left {
    margin-bottom: 2rem
}

.section-head p {
    color: var(--text-soft);
    font-size: 1.12rem
}

.kicker {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    color: var(--fern);
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: 1.2rem
}

/* 1 Hero */
.hero {
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem);
    overflow: hidden
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center
}

.hero-copy h1 {
    max-width: 11ch
}

.lead {
    font-size: 1.2rem;
    color: var(--text-soft);
    max-width: 34rem
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin: 2rem 0
}

.hero-actions.center {
    justify-content: center
}

.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.75rem;
    font-size: .95rem;
    color: var(--text-soft)
}

.hero-facts i {
    color: var(--fern);
    margin-inline-end: .4rem
}

.hero-art {
    position: relative;
    padding-bottom: 3rem
}

.hero-img {
    width: 100%;
    aspect-ratio: 5/6;
    object-fit: cover;
    border-radius: 46% 46% 4px 4px / 32% 32% 4px 4px
}

.hero-leaf {
    position: absolute;
    inset-inline-start: -12%;
    bottom: 0;
    width: 42%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 8px solid var(--bg);
    border-radius: 50% 4px 50% 4px
}

.hero-stamp {
    position: absolute;
    inset-inline-end: 0;
    bottom: .5rem;
    max-width: 210px;
    margin: 0;
    background: var(--moss);
    color: #fff;
    padding: 1rem 1.15rem;
    font-size: .9rem;
    line-height: 1.4
}

.hero-stamp i {
    color: var(--mustard);
    margin-inline-end: .3rem
}

/* 2 Famous four: lead card spans two rows */
.famous {
    background: var(--bg-alt)
}

.famous-layout {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    align-content: start;
    gap: 1.75rem
}

.fam {
    background: var(--surface);
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.fam img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform .7s var(--ease)
}

.fam:hover img {
    transform: scale(1.04)
}

.fam-body {
    padding: 1.4rem 1.5rem 1.6rem;
    display: flex;
    flex-direction: column;
    flex: none
}

.fam-body p {
    color: var(--text-soft);
    font-size: .98rem
}

.fam .price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding-top: .9rem;
    border-top: 1px solid var(--border);
    font-size: .95rem
}

.fam .price span {
    font-family: var(--head);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--tomato)
}

.fam-lead {
    grid-row: span 2;
    align-self: stretch
}

.fam-lead img {
    aspect-ratio: 4/3;
    flex: 1;
    min-height: 0
}

.fam-lead .fam-body {
    flex: none
}

.fam-lead h3 {
    font-size: 1.9rem
}

.fam:nth-child(4) {
    grid-column: 2/4
}

.fam:nth-child(4) {
    flex-direction: row;
    align-self: start
}

.fam:nth-child(4) img {
    width: 42%;
    aspect-ratio: 4/3
}

.fam:nth-child(4) .fam-body {
    flex: 1;
    min-width: 0;
    justify-content: flex-start
}

/* 3 Builder */
.builder-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center
}

.builder-media {
    position: relative;
    padding: 0 0 3.5rem 2rem
}

.b-main {
    width: 100%;
    aspect-ratio: 5/4;
    object-fit: cover
}

.b-small {
    position: absolute;
    inset-inline-end: -1.5rem;
    bottom: 0;
    width: 46%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 8px solid var(--bg)
}

.build-form {
    display: grid;
    gap: 1.4rem
}

.build-form fieldset {
    border: 0;
    padding: 0;
    margin: 0
}

.build-form legend {
    font-family: var(--head);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: .7rem;
    padding: 0
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem
}

.chips label {
    cursor: pointer
}

.chips input {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.chips span {
    display: inline-block;
    padding: .5rem 1.05rem;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: .97rem;
    transition: .2s
}

.chips label:hover span {
    border-color: var(--fern)
}

.chips input:checked+span {
    background: var(--moss);
    color: #fff;
    border-color: var(--moss)
}

.chips input:focus-visible+span {
    outline: 3px solid var(--hl);
    outline-offset: 2px
}

.build-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1.2rem;
    border-top: 2px solid var(--moss)
}

.build-result p {
    margin: 0;
    font-family: var(--head);
    font-size: 1.25rem
}

/* 4 Counter: full-bleed photo, card overlaps */
.counter {
    position: relative;
    padding: 0;
    background: var(--moss)
}

.counter-photo img {
    width: 100%;
    height: clamp(420px, 56vw, 640px);
    object-fit: cover
}

.counter-wrap {
    position: relative
}

.counter-card {
    background: var(--surface);
    padding: clamp(1.75rem, 4vw, 3rem);
    width: min(560px, 100%);
    margin: calc(-1 * clamp(8rem, 18vw, 15rem)) 0 clamp(3rem, 6vw, 5rem) auto;
    position: relative;
    box-shadow: var(--shadow)
}

.counter-list {
    display: grid;
    gap: 1.1rem;
    margin-top: 1.5rem
}

.counter-list li {
    display: flex;
    gap: 1rem;
    align-items: flex-start
}

.counter-list i {
    color: var(--fern);
    background: var(--bg-alt);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: none
}

.counter-list h3 {
    font-size: 1.1rem;
    margin-bottom: .1rem
}

.counter-list p {
    margin: 0;
    color: var(--text-soft);
    font-size: .96rem
}

/* 5 World: staggered tall columns that expand on hover */
.world {
    background: var(--moss);
    color: #fff4e8
}

.world .section-head p {
    color: #e4d3e3
}

.world-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start
}

.stop {
    position: relative;
    flex: 1;
    overflow: hidden;
    aspect-ratio: 3/4;
    transition: flex .6s var(--ease)
}

.stop:nth-child(even) {
    margin-top: 3rem
}

.stop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease)
}

.stop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(28, 17, 31, .85), transparent 55%)
}

.stop-text {
    position: absolute;
    z-index: 1;
    inset-inline: 1.25rem;
    bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    color: #fff
}

.stop-text small {
    color: var(--mustard);
    font-weight: 600;
    font-size: .88rem
}

.stop-text strong {
    font-family: var(--head);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15
}

.stop:hover {
    flex: 1.5
}

.stop:hover img {
    transform: scale(1.06)
}

/* 6 Pairing: ruled list instead of cards */
.pairing-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start
}

.pair-list li {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 1.4rem;
    align-items: center;
    padding: 1.2rem 0;
    border-top: 1px solid var(--border)
}

.pair-list li:last-child {
    border-bottom: 1px solid var(--border)
}

.pair-list img {
    width: 120px;
    height: 90px;
    object-fit: cover
}

.pair-list h3 {
    margin-bottom: .15rem
}

.pair-list p {
    margin: 0;
    color: var(--text-soft);
    font-size: .96rem
}

.pair-list .price {
    font-family: var(--head);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--tomato)
}

/* 7 Story */
.story {
    background: var(--bg-alt)
}

.story-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center
}

.story-fig {
    margin: 0;
    position: relative
}

.story-fig img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 4px 50% 4px 4px
}

.story-lead {
    font-family: var(--head);
    font-size: 1.5rem;
    line-height: 1.35;
    color: var(--moss)
}

.stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    margin: 2rem 0;
    padding: 1.4rem 0;
    border-block: 1px solid var(--border)
}

.stats div {
    flex: 1;
    min-width: 120px
}

.stats dt {
    order: 2;
    font-size: .9rem;
    color: var(--text-soft);
    line-height: 1.35
}

.stats dd {
    margin: 0;
    font-family: var(--head);
    font-size: 2.6rem;
    font-weight: 600;
    color: var(--tomato);
    line-height: 1
}

.stats div {
    display: flex;
    flex-direction: column;
    gap: .4rem
}

/* 8 Catering */
.catering-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center
}

.catering-media {
    position: relative
}

.catering-media::before {
    content: "";
    position: absolute;
    inset: -1.25rem 1.25rem 1.25rem -1.25rem;
    border: 2px solid var(--sage);
    z-index: 0
}

.catering-media img {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover
}

.check-list {
    display: grid;
    gap: .7rem;
    margin: 1.5rem 0 2rem
}

.check-list li {
    display: flex;
    gap: .75rem;
    align-items: flex-start
}

.check-list i {
    color: #fff;
    background: var(--fern);
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    font-size: .7rem;
    flex: none;
    margin-top: .2rem;
    border-radius: 50%
}

/* 9 Final CTA */
.final {
    position: relative;
    color: #fff;
    text-align: center;
    padding: clamp(5rem, 12vw, 9rem) 0;
    overflow: hidden;
    background: var(--moss)
}

.final>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .45
}

.final-inner {
    position: relative;
    max-width: 640px
}

.final p {
    font-size: 1.15rem;
    color: #f4e8f2
}

/* Footer */
.site-footer {
    background: #302237;
    color: #d8cbd8;
    padding-top: 4rem
}

.site-footer .brand,
.site-footer .brand-text strong {
    color: #fff
}

.site-footer .brand-text small {
    color: #bba8bd
}

.foot-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: 2.5rem;
    padding-bottom: 3rem
}

.site-footer h3 {
    font-size: 1.05rem;
    color: #fff;
    margin-bottom: 1rem
}

.site-footer li {
    margin-bottom: .5rem
}

.site-footer a:hover {
    color: var(--mustard)
}

.site-footer address {
    font-style: normal
}

.site-footer address p {
    margin-bottom: .6rem
}

.site-footer address i {
    color: var(--mustard);
    width: 1.4rem
}

.social {
    display: flex;
    gap: .6rem;
    margin-top: 1rem
}

.social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #59445d
}

.social a:hover {
    background: var(--mustard);
    color: var(--ink);
    border-color: var(--mustard)
}

.foot-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-top: 1px solid #49364f;
    padding-block: 1.4rem;
    font-size: .9rem
}

.foot-bottom p {
    margin: 0
}

.foot-bottom a {
    margin-inline-start: 1rem
}

/* Hero split-heading reveal helper */
.split .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: .08em
}

.split .w>span {
    display: inline-block
}

/* Tablet */
@media (max-width:1100px) {
    .burger {
        display: block
    }

    .header-cta {
        display: none
    }

    .main-nav {
        position: fixed;
        inset: calc(var(--hdr) + 36px) 0 0 0;
        background: var(--bg);
        padding: 1rem 1.25rem 2rem;
        overflow-y: auto;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .4s var(--ease), visibility .4s;
        z-index: 90
    }

    .main-nav.open {
        transform: none;
        visibility: visible
    }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0
    }

    .nav-list>li {
        border-bottom: 1px solid var(--border)
    }

    .nav-link {
        width: 100%;
        justify-content: space-between;
        padding: 1rem .25rem;
        font-size: 1.1rem
    }

    .nav-link::after {
        display: none
    }

    .sub {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s var(--ease);
        background: transparent
    }

    .has-sub.open>.sub {
        max-height: 300px;
        padding-bottom: .6rem
    }

    .has-sub:hover>.sub {
        opacity: 1
    }

    .has-sub:not(.open):hover>.sub,
    .has-sub:not(.open):focus-within>.sub {
        max-height: 0
    }

    .sub a {
        padding: .7rem 1rem
    }

    .famous-layout {
        grid-template-columns: 1fr 1fr
    }

    .fam-lead {
        grid-column: 1/-1;
        grid-row: auto;
        flex-direction: row
    }

    .fam-lead img {
        width: 50%;
        flex: none
    }

    .fam-lead .fam-body {
        flex: 1;
        justify-content: center
    }

    .fam:nth-child(4) {
        grid-column: auto;
        flex-direction: column
    }

    .fam:nth-child(4) img {
        width: 100%;
        aspect-ratio: 4/3;
        height: auto
    }

    .fam:nth-child(4) .fam-body {
        flex: none
    }

    .world-row {
        flex-wrap: wrap
    }

    .stop {
        flex: 1 1 calc(50% - .5rem)
    }

    .stop:nth-child(even) {
        margin-top: 0
    }

    .stop:hover {
        flex: 1 1 calc(50% - .5rem)
    }

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

@media (max-width:860px) {

    .hero-grid,
    .builder-grid,
    .pairing-grid,
    .story-grid,
    .catering-grid {
        grid-template-columns: 1fr
    }

    .hero-art {
        max-width: 520px;
        margin-inline: auto;
        width: 100%
    }

    .hero-leaf {
        inset-inline-start: -4%
    }

    .builder-media {
        padding-inline-start: 0
    }

    .b-small {
        inset-inline-end: 0
    }

    .story-fig {
        max-width: 460px
    }

    .catering-media {
        order: -1
    }

    .catering-media::before {
        inset: -.75rem .75rem .75rem -.75rem
    }

    .counter-card {
        margin-inline: auto
    }
}

/* Mobile */
@media (max-width:600px) {
    body {
        font-size: 1rem
    }

    .announce {
        font-size: .8rem
    }

    .brand-text small {
        display: none
    }

    .tool-text {
        display: inline-grid
    }

    .famous-layout {
        grid-template-columns: 1fr
    }

    .fam-lead {
        flex-direction: column
    }

    .fam-lead img {
        width: 100%;
        min-height: 0;
        aspect-ratio: 4/3
    }

    .pair-list li {
        grid-template-columns: 84px 1fr;
        gap: 1rem
    }

    .pair-list img {
        width: 84px;
        height: 72px
    }

    .pair-list .price {
        grid-column: 2
    }

    .stop {
        flex-basis: 100%
    }

    .stop:hover {
        flex-basis: 100%
    }

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

    .hero-stamp {
        position: static;
        max-width: none;
        margin-top: 1rem
    }

    .hero-leaf {
        display: none
    }

    .hero-art {
        padding-bottom: 0
    }

    .build-result .btn {
        width: 100%
    }

    .hero-actions .btn-solid {
        width: 100%
    }
}

@media (max-width:360px) {
    .tool-btn.cart {
        min-width: 38px
    }

    .header-tools {
        gap: .35rem
    }
}

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

    * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important
    }
}

.counter-photo {
    overflow: hidden
}

.counter-photo img {
    transform: scale(1.14)
}

/* =====================================================================
   ABOUT US PAGE (about.html)
   ===================================================================== */
.ab-sub {
    color: var(--text-soft);
    font-size: 1.12rem;
    max-width: 34rem
}

/* 1. About hero: dark band with a rising strip of photos */
.ab-hero {
    background: var(--moss);
    color: #f4e9e4;
    padding: clamp(2.5rem, 6vw, 5rem) 0 0;
    overflow: hidden
}

.ab-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center
}

.ab-hero-copy {
    padding-bottom: clamp(2rem, 4vw, 3.5rem)
}

.ab-crumbs {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .92rem;
    color: #d9c3d4;
    margin-bottom: 1.75rem
}

.ab-crumbs a:hover {
    color: var(--mustard)
}

.ab-crumbs i {
    font-size: .6rem
}

.ab-crumbs span {
    color: #fff;
    font-weight: 600
}

.ab-hero h1 {
    font-size: clamp(2.8rem, 6.6vw, 5.4rem);
    max-width: 12ch;
    color: #fff
}

.ab-lead {
    font-size: 1.2rem;
    color: #e6d6e2;
    max-width: 33rem
}

.ab-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem
}

.ab-hero-strip {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .75rem;
    align-items: center;
    width: 100%;
    margin-inline: auto
}

.ab-hero-strip img {
    width: 100%;
    object-fit: cover
}

.ab-s1 {
    aspect-ratio: 3/5.6
}

.ab-s2 {
    aspect-ratio: 3/4.2;
    margin-bottom: 0
}

.ab-s3 {
    aspect-ratio: 3/5
}

/* 2. Origins: sticky story + timeline (a real sequence of years) */
.ab-origin-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(2rem, 7vw, 7rem);
    align-items: start
}

.ab-sticky {
    position: sticky;
    top: calc(var(--hdr) + 2rem)
}

.ab-origin-fig {
    margin: 2rem 0 0;
    max-width: 420px
}

.ab-origin-fig img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 4px 4px 50% 4px
}

.ab-origin-fig figcaption {
    margin-top: .7rem;
    font-size: .92rem;
    color: var(--text-soft);
    font-style: italic;
    font-family: var(--head)
}

.ab-timeline {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    border-inline-start: 2px solid var(--border);
    margin-inline-start: .5rem
}

.ab-timeline li {
    position: relative;
    padding: 0 0 3rem 2.5rem;
    padding-inline: 2.5rem 0;
    display: grid;
    gap: .4rem
}

.ab-timeline li:last-child {
    padding-bottom: 0
}

.ab-timeline li::before {
    content: "";
    position: absolute;
    inset-inline-start: -9px;
    top: .9rem;
    width: 16px;
    height: 16px;
    background: var(--mustard);
    border: 3px solid var(--bg);
    border-radius: 50%
}

.ab-year {
    font-family: var(--head);
    font-size: clamp(2.6rem, 5vw, 4rem);
    font-weight: 600;
    line-height: 1;
    color: var(--tomato)
}

.ab-timeline h3 {
    margin-bottom: .3rem
}

.ab-timeline p {
    color: var(--text-soft);
    margin: 0;
    max-width: 34rem
}

/* 3. Philosophy: three large statements on ruled rows */
.ab-phil {
    background: var(--bg-alt)
}

.ab-phil-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: end;
    margin-bottom: clamp(2.5rem, 5vw, 4rem)
}

.ab-phil-head img {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    border-radius: 50% 4px 4px 4px / 40% 4px 4px 4px
}

.ab-claims {
    border-bottom: 1px solid var(--border)
}

.ab-claim {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(1rem, 4vw, 4rem);
    align-items: center;
    padding: clamp(1.5rem, 3vw, 2.4rem) 0;
    border-top: 1px solid var(--border);
    transition: padding .4s var(--ease)
}

.ab-claim h3 {
    margin: 0;
    font-size: clamp(2.2rem, 5.4vw, 4.2rem);
    font-weight: 400;
    font-style: italic;
    letter-spacing: -.02em;
    transition: color .3s, transform .4s var(--ease)
}

.ab-claim p {
    margin: 0;
    color: var(--text-soft);
    max-width: 30rem
}

.ab-claim:hover h3 {
    color: var(--fern);
    transform: translateX(.6rem)
}

/* 4. Craft: tabbed four-step preparation on a dark band */
.ab-craft {
    background: var(--moss);
    color: #f4e9e4
}

.ab-craft .ab-sub {
    color: #d9c3d4
}

.ab-craft-head {
    margin-bottom: clamp(2rem, 4vw, 3.5rem)
}

.ab-craft-grid {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: clamp(1.5rem, 5vw, 4.5rem);
    align-items: start
}

.ab-steps {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, .18)
}

.ab-step {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    text-align: start;
    width: 100%;
    padding: 1.25rem .25rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    color: #cdb6c9;
    font: inherit;
    cursor: pointer;
    position: relative;
    transition: color .25s, padding .3s var(--ease)
}

.ab-step::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: -1px;
    height: calc(100% + 1px);
    width: 3px;
    background: var(--mustard);
    transform: scaleY(0);
    transition: transform .3s var(--ease)
}

.ab-step-n {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-family: var(--head);
    font-weight: 600
}

.ab-step-t {
    display: flex;
    flex-direction: column;
    line-height: 1.25
}

.ab-step-t strong {
    font-family: var(--head);
    font-size: 1.5rem;
    font-weight: 600
}

.ab-step-t small {
    font-size: .92rem;
    opacity: .85
}

.ab-step:hover {
    color: #fff
}

.ab-step[aria-selected="true"] {
    color: #fff;
    padding-inline-start: 1.1rem
}

.ab-step[aria-selected="true"]::before {
    transform: scaleY(1)
}

.ab-step[aria-selected="true"] .ab-step-n {
    background: var(--mustard);
    border-color: var(--mustard);
    color: var(--ink)
}

.ab-panel img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover
}

.ab-panel-text {
    position: relative;
    margin: -3rem 0 0 2rem;
    margin-inline: 2rem 0;
    padding: 1.6rem 1.8rem;
    background: var(--paper);
    color: var(--ink);
    max-width: 30rem;
    box-shadow: var(--shadow)
}

.ab-panel-text h3 {
    font-size: 1.5rem;
    margin-bottom: .4rem
}

.ab-panel-text p {
    margin: 0;
    color: var(--muted)
}

.ab-panel.is-in {
    animation: abIn .55s var(--ease)
}

@keyframes abIn {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

/* 5. Freshness: collage + figures divided by hairlines (no boxes) */
.ab-fresh-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center
}

.ab-collage {
    position: relative;
    padding: 0 2rem 4rem 0
}

.ab-c-main {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 50% 50% 4px 4px / 28% 28% 4px 4px
}

.ab-c-small {
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    width: 52%;
    aspect-ratio: 5/4;
    object-fit: cover;
    border: 8px solid var(--bg)
}

.ab-figures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 2.2rem 0 1.5rem
}

.ab-figures>div {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: .4rem;
    padding: 1.5rem 1.25rem 1.5rem 0
}

.ab-figures>div:nth-child(even) {
    padding-inline: 1.5rem 0;
    border-inline-start: 1px solid var(--border)
}

.ab-figures>div:nth-child(-n+2) {
    border-bottom: 1px solid var(--border)
}

.ab-figures dt {
    font-size: .95rem;
    color: var(--text-soft);
    line-height: 1.4
}

.ab-figures dd {
    margin: 0;
    font-family: var(--head);
    font-size: clamp(2.6rem, 5vw, 3.8rem);
    font-weight: 600;
    line-height: 1;
    color: var(--tomato)
}

.ab-note {
    margin: 0;
    max-width: 32rem;
    color: var(--text-soft);
    font-family: var(--head);
    font-style: italic;
    font-size: 1.1rem
}

/* 6. Crew: editorial roster with a swapping portrait */
.ab-crew {
    background: var(--bg-alt)
}

.ab-crew-head {
    margin-bottom: clamp(2rem, 4vw, 3.5rem)
}

.ab-crew-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start
}

.ab-roster {
    border-bottom: 1px solid var(--border)
}

.ab-roster li {
    border-top: 1px solid var(--border);
    padding: .4rem 0 1.2rem
}

.ab-person {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    padding: .9rem 0 .3rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text);
    text-align: start;
    font: inherit
}

.ab-name {
    font-family: var(--head);
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.015em;
    transition: color .3s, transform .4s var(--ease)
}

.ab-role {
    color: var(--text-soft);
    font-size: .98rem
}

.ab-roster li p {
    margin: 0;
    color: var(--text-soft);
    max-width: 30rem
}

.ab-roster li.is-active .ab-name,
.ab-person:hover .ab-name {
    color: var(--fern)
}

.ab-roster li.is-active .ab-name {
    transform: translateX(.5rem)
}

.ab-person-img {
    display: none
}

.ab-crew-media {
    position: sticky;
    top: calc(var(--hdr) + 2rem);
    aspect-ratio: 4/5;
    overflow: hidden;
    border-radius: 4px 4px 50% 50% / 4px 4px 22% 22%
}

.ab-crew-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity .6s var(--ease), transform .9s var(--ease)
}

.ab-crew-media img.is-active {
    opacity: 1;
    transform: none
}

/* 7. Promise: a deli order ticket */
.ab-promise {
    background: var(--sage);
    --ab-notch: var(--sage)
}

.ab-promise-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 7vw, 7rem);
    align-items: center
}

.ab-promise .ab-sub {
    color: #5d4560
}

.ab-promise-copy p:not(.ab-sub) {
    max-width: 30rem;
    color: #4a3750
}

.ab-promise-copy .btn {
    margin-top: .75rem
}

.ab-ticket {
    position: relative;
    background: var(--paper);
    color: var(--ink);
    padding: 3rem clamp(1.5rem, 4vw, 2.75rem);
    max-width: 460px;
    width: 100%;
    margin-inline: auto;
    transform: rotate(1.4deg);
    box-shadow: 0 24px 50px -26px rgba(50, 38, 54, .7)
}

.ab-ticket::before,
.ab-ticket::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 14px;
    background: radial-gradient(circle at 10px 0, var(--ab-notch) 7px, transparent 8px) 0 0/20px 14px repeat-x
}

.ab-ticket::before {
    top: 0
}

.ab-ticket::after {
    bottom: 0;
    transform: scaleY(-1)
}

.ab-ticket-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 0 1.2rem;
    padding-bottom: 1rem;
    border-bottom: 2px dashed var(--line)
}

.ab-ticket-top span {
    color: var(--muted);
    font-size: .95rem
}

.ab-ticket-top strong {
    font-family: var(--head);
    font-size: 2rem;
    color: var(--tomato)
}

.ab-ticket ul {
    display: grid;
    gap: 0
}

.ab-ticket li {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: .85rem 0;
    border-bottom: 1px dashed var(--line);
    font-weight: 500
}

.ab-ticket li i {
    flex: none;
    color: #fff;
    background: var(--fern);
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    font-size: .68rem;
    border-radius: 50%;
    margin-top: .2rem
}

.ab-ticket-foot {
    margin: 1.4rem 0 0;
    text-align: center;
    font-family: var(--head);
    font-style: italic;
    color: var(--muted)
}

/* 8. Community: mosaic + story slider */
.ab-comm-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center
}

.ab-mosaic {
    position: relative;
    padding-bottom: 3rem
}

.ab-m1 {
    width: 78%;
    aspect-ratio: 5/4;
    object-fit: cover
}

.ab-m2 {
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    width: 50%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border: 8px solid var(--bg)
}

.ab-m1 {
    margin-bottom: -1rem
}

.ab-quotes {
    margin: 2rem 0
}

.ab-quote {
    margin: 0
}

.ab-quote blockquote {
    margin: 0;
    padding: 0
}

.ab-quote blockquote p {
    font-family: var(--head);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.3;
    color: var(--text);
    margin-bottom: 1rem;
    border-inline-start: 3px solid var(--mustard);
    padding-inline-start: 1.25rem
}

.ab-quote figcaption {
    color: var(--text-soft);
    padding-inline-start: 1.5rem;
    font-weight: 500
}

.ab-quote:not([hidden]) {
    animation: abIn .5s var(--ease)
}

.ab-quote-ctrl {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.6rem
}

.ab-qbtn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s
}

.ab-qbtn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink)
}

.ab-qcount {
    font-variant-numeric: tabular-nums;
    color: var(--text-soft);
    min-width: 3.5rem;
    text-align: center
}

.ab-give {
    display: grid;
    gap: .8rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border)
}

.ab-give li {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    color: var(--text-soft)
}

.ab-give i {
    color: var(--fern);
    margin-top: .3rem;
    width: 1.3rem;
    text-align: center
}

/* 9. Visit: full-bleed storefront with an hours panel */
.ab-visit {
    position: relative;
    background: var(--moss);
    overflow: hidden;
    padding: clamp(4rem, 10vw, 8rem) 0
}

.ab-visit-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .55
}

.ab-visit-inner {
    position: relative
}

.ab-visit-panel {
    background: var(--surface);
    color: var(--text);
    width: min(520px, 100%);
    padding: clamp(1.75rem, 4vw, 2.75rem);
    margin-inline-start: auto;
    box-shadow: var(--shadow)
}

.ab-visit-panel h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.6rem)
}

.ab-open {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1.2rem;
    font-weight: 600;
    font-size: .97rem
}

.ab-open .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-soft)
}

.ab-open.is-open .dot {
    background: #3f9b57;
    box-shadow: 0 0 0 4px rgba(63, 155, 87, .22)
}

.ab-open.is-closed .dot {
    background: var(--tomato)
}

.ab-visit-panel address {
    font-style: normal;
    margin-bottom: 1.2rem
}

.ab-visit-panel address p {
    margin: 0 0 .35rem
}

.ab-visit-panel address i {
    color: var(--fern);
    width: 1.4rem
}

.ab-hours {
    margin: 0 0 1.6rem;
    border-top: 1px solid var(--border)
}

.ab-hours div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem .6rem;
    border-bottom: 1px solid var(--border);
    font-size: .97rem
}

.ab-hours dt,
.ab-hours dd {
    margin: 0
}

.ab-hours dd {
    color: var(--text-soft)
}

.ab-hours .is-today {
    background: var(--bg-alt);
    font-weight: 700;
    box-shadow: inset 3px 0 var(--mustard)
}

.ab-hours .is-today dd {
    color: var(--text)
}

.ab-visit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem
}

/* About: tablet */
@media (max-width:1100px) {
    .ab-hero-grid {
        grid-template-columns: 1fr 1fr
    }

    .ab-craft-grid {
        grid-template-columns: .8fr 1.2fr
    }

    .ab-panel-text {
        margin-inline: 1rem 0
    }
}

@media (max-width:860px) {
    .ab-hero-grid {
        grid-template-columns: 1fr;
        gap: 0
    }

    .ab-hero-copy {
        padding-bottom: 2.5rem
    }

    .ab-hero h1 {
        max-width: 14ch
    }

    .ab-hero-strip {
        max-width: 620px
    }

    .ab-origin-grid,
    .ab-phil-head,
    .ab-craft-grid,
    .ab-fresh-grid,
    .ab-comm-grid,
    .ab-promise-grid {
        grid-template-columns: 1fr
    }

    .ab-sticky {
        position: static
    }

    .ab-origin-fig {
        max-width: 340px
    }

    .ab-phil-head img {
        order: -1
    }

    .ab-claim {
        grid-template-columns: 1fr;
        gap: .6rem
    }

    .ab-steps {
        display: flex;
        overflow-x: auto;
        border-top: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .18);
        scrollbar-width: thin;
        gap: .25rem
    }

    .ab-step {
        width: auto;
        flex: none;
        border-bottom: 0;
        padding: .9rem .9rem .9rem .6rem;
        white-space: nowrap
    }

    .ab-step::before {
        inset-inline: 0;
        top: auto;
        bottom: -1px;
        height: 3px;
        width: auto;
        transform: scaleX(0)
    }

    .ab-step[aria-selected="true"] {
        padding-inline-start: .6rem
    }

    .ab-step[aria-selected="true"]::before {
        transform: scaleX(1)
    }

    .ab-step-t small {
        display: none
    }

    .ab-step-t strong {
        font-size: 1.2rem
    }

    .ab-panel-text {
        margin-inline: 1rem;
        margin-top: -2rem
    }

    .ab-collage {
        max-width: 480px;
        margin-inline: auto;
        width: 100%
    }

    .ab-crew-grid {
        grid-template-columns: 1fr
    }

    .ab-crew-media {
        display: none
    }

    .ab-person-img {
        display: block;
        width: 100%;
        max-width: 340px;
        aspect-ratio: 4/5;
        object-fit: cover;
        margin: .8rem 0 1rem;
        border-radius: 4px 4px 50% 50% / 4px 4px 22% 22%
    }

    .ab-roster li.is-active .ab-name {
        transform: none
    }

    .ab-ticket {
        transform: none
    }

    .ab-mosaic {
        max-width: 520px;
        width: 100%;
        margin-inline: auto
    }

    .ab-visit-panel {
        margin-inline: auto
    }
}

/* About: mobile */
@media (max-width:600px) {
    .ab-hero-actions .btn {
        width: 100%
    }

    .ab-hero-strip {
        gap: .5rem
    }

    .ab-timeline li {
        padding-bottom: 2.2rem
    }

    .ab-figures>div {
        padding-block: 1.1rem
    }

    .ab-figures>div:nth-child(even) {
        padding-inline: 1rem 0
    }

    .ab-collage {
        padding: 0 0 3rem
    }

    .ab-c-small {
        width: 56%
    }

    .ab-quote blockquote p {
        padding-inline-start: 1rem
    }

    .ab-quote figcaption {
        padding-inline-start: 1.25rem
    }

    .ab-visit-actions .btn {
        flex: 1 1 100%
    }

    .ab-person {
        padding-top: .6rem
    }
}

/* =====================================================================
   CONTACT PAGE (contact.html)
   ===================================================================== */
.ct-head {
    max-width: 40rem;
    margin-bottom: clamp(2rem, 5vw, 3.25rem)
}

.ct-head p,
.ct-sub {
    color: var(--text-soft);
    font-size: 1.12rem
}

.ct-sub {
    max-width: 30rem
}

/* 1. Hero: the three ways to reach us are layers of one sandwich */
.ct-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
    background: radial-gradient(48% 55% at 88% 12%, color-mix(in srgb, var(--mustard) 24%, transparent), transparent 70%), var(--bg)
}

.ct-touch {
    padding-top: clamp(2.5rem, 5vw, 4rem)
}

.ct-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center
}

.ct-hero-copy h1 {
    max-width: 10ch
}

.ct-hero-copy .lead {
    max-width: 30rem
}

.ct-status {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1.6rem;
    padding: .5rem 1.05rem;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 999px;
    font-weight: 600;
    font-size: .95rem
}

.ct-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-soft);
    flex: none
}

.is-open .ct-dot {
    background: #3f9b5f;
    animation: ct-pulse 2s infinite
}

.is-closed .ct-dot {
    background: var(--tomato)
}

@keyframes ct-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(63, 155, 95, .55)
    }

    70%,
    100% {
        box-shadow: 0 0 0 9px rgba(63, 155, 95, 0)
    }
}

.ct-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem
}

.ct-stack {
    display: grid;
    gap: .5rem;
    width: 100%;
    max-width: 30rem;
    margin-inline: auto
}

.ct-bun {
    display: block;
    margin-inline: 1rem
}

.ct-bun-top {
    height: 5.2rem;
    border-radius: 50% 50% 14px 14px / 100% 100% 14px 14px;
    background:
        radial-gradient(ellipse 6px 3px at 22% 42%, #fff6ec 96%, transparent), radial-gradient(ellipse 6px 3px at 38% 26%, #fff6ec 96%, transparent),
        radial-gradient(ellipse 6px 3px at 54% 48%, #fff6ec 96%, transparent), radial-gradient(ellipse 6px 3px at 68% 24%, #fff6ec 96%, transparent),
        radial-gradient(ellipse 6px 3px at 80% 50%, #fff6ec 96%, transparent), linear-gradient(180deg, #efcdb2, #e0b392);
    box-shadow: var(--shadow)
}

.ct-bun-bottom {
    height: 2.8rem;
    border-radius: 12px 12px 2.4rem 2.4rem;
    background: linear-gradient(180deg, #e0b392, #d3a27f);
    box-shadow: var(--shadow)
}

.ct-layer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 1.3rem;
    color: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow);
    transition: transform .35s var(--ease)
}

.ct-layer:hover {
    transform: translateY(-4px)
}

.ct-layer small {
    display: block;
    font-size: .85rem;
    opacity: .9
}

.ct-layer strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    overflow-wrap: anywhere;
    line-height: 1.3
}

.ct-ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    font-size: 1.05rem
}

.ct-l-call {
    background: #b64f40;
    margin-inline-end: 1.4rem
}

.ct-l-mail {
    background: #e6a84a;
    color: #322636;
    margin-inline-start: 1.4rem
}

.ct-l-mail .ct-ico {
    background: rgba(50, 38, 54, .12)
}

.ct-l-visit {
    background: #76517d;
    margin-inline-end: .6rem
}

/* 2. Get in touch: bento of unequal tiles */
.ct-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem
}

.ct-tile {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--surface);
    border: 1px solid var(--border)
}

.ct-tile h3 {
    margin-bottom: .6rem
}

.ct-tile p {
    color: var(--text-soft)
}

.ct-tile-phone {
    grid-column: span 7;
    background: var(--moss);
    color: #f4e9e4;
    border-color: transparent
}

.ct-tile-phone p {
    color: #e6d6e4
}

.ct-tile-mail {
    grid-column: span 5
}

.ct-tile-addr {
    grid-column: span 8
}

.ct-tile-social {
    grid-column: span 4;
    background: var(--bg-alt)
}

.ct-water {
    position: absolute;
    inset-inline-end: -1rem;
    bottom: -1.2rem;
    font-size: 9rem;
    opacity: .07;
    transform: rotate(-12deg)
}

.ct-big {
    font: 600 clamp(2rem, 4.8vw, 3.5rem)/1.1 var(--head);
    letter-spacing: -.01em;
    margin: .2rem 0 1rem;
    display: block;
    color: #fff
}

.ct-big:hover {
    color: var(--mustard)
}

.ct-mail {
    font: 600 clamp(1.1rem, 2vw, 1.4rem)/1.3 var(--head);
    overflow-wrap: anywhere;
    margin-bottom: 1rem;
    color: var(--fern)
}

.ct-mail:hover {
    text-decoration: underline;
    text-underline-offset: 4px
}

.ct-addr {
    font: 600 clamp(1.6rem, 3vw, 2.3rem)/1.2 var(--head);
    margin-bottom: 1rem
}

.ct-tile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem 1.2rem;
    margin-top: auto;
    padding-top: .8rem
}

.ct-copy {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .2rem;
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    color: var(--fern);
    font: 600 .95rem var(--body);
    cursor: pointer
}

.ct-copy:hover {
    border-color: currentColor
}

.ct-copy.on-dark {
    color: #f0d6ec
}

.ct-copy.is-copied {
    color: #3f9b5f
}

.ct-copy.on-dark.is-copied {
    color: #9fe0b5
}

.ct-social {
    display: flex;
    gap: .6rem;
    margin-top: auto;
    padding-top: .6rem
}

.ct-social a {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 50%;
    transition: background .2s, color .2s, transform .25s var(--ease)
}

.ct-social a:hover {
    background: var(--hl);
    color: #322636;
    border-color: var(--hl);
    transform: translateY(-3px)
}

/* 3. Message form: intro column + paper form card */
.ct-form-sec {
    background: var(--bg-alt)
}

.ct-form-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(2rem, 6vw, 5.5rem);
    align-items: start
}

.ct-form-intro {
    position: sticky;
    top: calc(var(--hdr) + 24px)
}

.ct-notes {
    display: grid;
    gap: 1.1rem;
    margin-top: 2rem
}

.ct-notes li {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    color: var(--text-soft)
}

.ct-notes i {
    color: var(--fern);
    width: 1.2rem;
    margin-top: .3rem;
    flex: none
}

.ct-form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 4px solid var(--hl);
    padding: clamp(1.4rem, 3.5vw, 2.6rem);
    box-shadow: var(--shadow);
    border-radius: 4px
}

.ct-form {
    display: grid;
    gap: 1.2rem
}

.ct-form[hidden] {
    display: none
}

.ct-form fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0
}

.ct-form legend {
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .6rem;
    padding: 0
}

.ct-chips,
.ct-seg {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.ct-chips label,
.ct-seg label {
    position: relative;
    cursor: pointer
}

.ct-chips input,
.ct-seg input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer
}

.ct-chips span,
.ct-seg span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.05rem;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    font-weight: 500;
    font-size: .95rem;
    background: var(--bg);
    transition: background .2s, border-color .2s, color .2s
}

.ct-chips input:hover+span,
.ct-seg input:hover+span {
    border-color: var(--fern)
}

.ct-chips input:checked+span,
.ct-seg input:checked+span {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent)
}

.ct-chips input:focus-visible+span,
.ct-seg input:focus-visible+span {
    outline: 3px solid var(--hl);
    outline-offset: 2px
}

.ct-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    align-items: start
}

.ct-field {
    position: relative
}

.ct-field input,
.ct-field textarea {
    width: 100%;
    font: 500 1rem var(--body);
    color: var(--text);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 4px;
    padding: 1.55rem 1rem .6rem;
    transition: border-color .2s, box-shadow .2s
}

.ct-field textarea {
    resize: vertical;
    min-height: 9rem;
    line-height: 1.5
}

.ct-field input:focus,
.ct-field textarea:focus {
    outline: 0;
    border-color: var(--fern);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hl) 45%, transparent)
}

.ct-field label {
    position: absolute;
    inset-inline-start: 1rem;
    top: 1.05rem;
    color: var(--text-soft);
    pointer-events: none;
    transition: top .2s var(--ease), font-size .2s var(--ease), color .2s;
    line-height: 1.2
}

.ct-field input:focus+label,
.ct-field input:not(:placeholder-shown)+label,
.ct-field textarea:focus+label,
.ct-field textarea:not(:placeholder-shown)+label {
    top: .5rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--fern)
}

.ct-count {
    position: absolute;
    inset-inline-end: .8rem;
    bottom: .55rem;
    font-size: .78rem;
    color: var(--text-soft)
}

.ct-field-area textarea {
    padding-bottom: 1.8rem
}

.ct-err {
    display: none;
    margin: .35rem 0 0;
    font-size: .85rem;
    color: var(--tomato);
    font-weight: 500
}

.has-error .ct-err {
    display: block
}

.has-error input,
.has-error textarea {
    border-color: var(--tomato)
}

.ct-reply legend {
    margin-bottom: .45rem
}

.ct-hp {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.ct-consent label {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    font-size: .95rem;
    color: var(--text-soft);
    cursor: pointer
}

.ct-consent input {
    width: 1.15rem;
    height: 1.15rem;
    margin: .2rem 0 0;
    accent-color: var(--accent);
    flex: none
}

.ct-form-msg {
    margin: 0;
    padding: .8rem 1rem;
    border: 1px solid var(--tomato);
    color: var(--tomato);
    font-weight: 500;
    border-radius: 4px
}

.ct-submit {
    justify-self: start;
    min-width: 12rem;
    position: relative
}

.ct-spin {
    display: none;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ct-rot .7s linear infinite
}

.is-loading .ct-spin {
    display: inline-block
}

.is-loading .ct-submit-t {
    display: none
}

.is-loading .ct-submit {
    pointer-events: none;
    opacity: .85
}

@keyframes ct-rot {
    to {
        transform: rotate(360deg)
    }
}

.ct-done {
    text-align: center;
    padding: clamp(1rem, 4vw, 2.5rem) 0
}

.ct-done:not([hidden]) {
    animation: ct-pop .5s var(--ease)
}

@keyframes ct-pop {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.ct-done-ico {
    display: inline-grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 1.5rem;
    margin-bottom: 1.1rem
}

.ct-done p {
    color: var(--text-soft);
    max-width: 26rem;
    margin-inline: auto
}

.ct-done:focus {
    outline: 0
}

/* 4. Map: framed map with a travel-tips card */
.ct-map-wrap {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center
}

.ct-map-frame {
    grid-column: 1 / span 9;
    grid-row: 1;
    height: clamp(22rem, 48vw, 33rem);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: hidden;
    background: var(--bg-alt)
}

.ct-map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block
}

.ct-map-card {
    grid-column: 8 / span 5;
    grid-row: 1;
    position: relative;
    z-index: 2;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 4px solid var(--hl);
    padding: clamp(1.4rem, 3vw, 2rem);
    box-shadow: var(--shadow)
}

.ct-map-card address {
    font-style: normal;
    color: var(--text-soft);
    margin-bottom: 1.2rem
}

.ct-modes {
    display: flex;
    gap: .4rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border)
}

.ct-modes button {
    flex: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .6rem .3rem;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    color: var(--text-soft);
    font: 600 .85rem var(--body);
    cursor: pointer
}

.ct-modes button[aria-selected="true"] {
    color: var(--fern);
    border-color: var(--hl)
}

.ct-modes button:hover {
    color: var(--text)
}

.ct-modes-body p {
    color: var(--text-soft);
    min-height: 5.2em;
    margin-bottom: 1rem
}

/* 5. Hours: dark band with a live day gauge and a weekly ledger */
.ct-hours {
    background: var(--moss);
    color: #f4e9e4
}

.ct-hours .ct-sub {
    color: #e0cfdd
}

.ct-hours-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start
}

.ct-live {
    margin-top: 2rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 6px;
    background: rgba(255, 255, 255, .06)
}

.ct-live-state {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 .2rem;
    font-family: var(--head);
    font-size: 1.6rem;
    line-height: 1.2
}

.ct-live-sub {
    color: #e0cfdd;
    margin: 0 0 1.4rem
}

.ct-day {
    position: relative;
    height: 12px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .14)
}

.ct-day-open {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 12.5%;
    width: 75%;
    border-radius: 99px;
    background: var(--mustard)
}

.ct-day-now {
    position: absolute;
    top: 50%;
    inset-inline-start: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--moss);
    box-shadow: 0 0 0 2px #fff;
    transform: translate(-50%, -50%);
    display: none
}

.ct-day-scale {
    display: flex;
    justify-content: space-between;
    margin-top: .6rem;
    font-size: .8rem;
    color: #cdb8cb
}

.ct-week li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    font-size: 1.05rem
}

.ct-week li:first-child {
    border-top: 1px solid rgba(255, 255, 255, .18)
}

.ct-week time {
    font-weight: 600
}

.ct-week .is-today {
    background: var(--mustard);
    color: #322636;
    border-color: var(--mustard);
    font-weight: 600;
    border-radius: 4px
}

.ct-week .is-today span::after {
    content: " (today)";
    font-weight: 500
}

.ct-rhythm {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, .18)
}

.ct-rhythm-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .6rem 2rem;
    margin-bottom: 1.2rem
}

.ct-rhythm-head h3 {
    margin: 0
}

.ct-legend {
    display: flex;
    gap: 1.1rem;
    font-size: .88rem;
    color: #e0cfdd
}

.ct-legend li {
    display: inline-flex;
    align-items: center;
    gap: .4rem
}

.ct-legend i {
    width: .8rem;
    height: .8rem;
    border-radius: 3px;
    display: inline-block
}

.l1 {
    background: #e8c5ac
}

.l2 {
    background: #e6a84a
}

.l3 {
    background: #e0705e
}

.ct-bars {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(.25rem, 1.2vw, .7rem);
    height: 11rem;
    align-items: end
}

.ct-bars li {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    gap: .4rem;
    font-size: .78rem;
    color: #cdb8cb
}

.ct-bars i {
    display: block;
    width: 100%;
    height: calc(var(--v) * 100% - 1.6rem);
    min-height: .6rem;
    border-radius: 6px 6px 2px 2px;
    background: #e8c5ac;
    transition: transform .3s var(--ease)
}

.ct-bars [data-l="2"] i {
    background: #e6a84a
}

.ct-bars [data-l="3"] i {
    background: #e0705e
}

.ct-bars .is-now {
    color: #fff;
    font-weight: 600
}

.ct-bars .is-now i {
    outline: 3px solid #fff;
    outline-offset: 2px
}

.ct-rhythm-note {
    margin: 1.4rem 0 0;
    color: #e0cfdd
}

/* 6. Support: accordion + request starters */
.ct-support-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start
}

.ct-q {
    border-bottom: 1px solid var(--border)
}

.ct-q:first-child {
    border-top: 1px solid var(--border)
}

.ct-q h3 {
    margin: 0;
    font-size: 1.1rem;
    font-family: var(--body);
    font-weight: 600;
    letter-spacing: 0
}

.ct-q button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
    padding: 1.2rem .2rem;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer
}

.ct-q button i {
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: .8rem;
    color: var(--fern);
    transition: transform .3s var(--ease), background .2s, color .2s
}

.ct-q button:hover i {
    background: var(--bg-alt)
}

.ct-q button[aria-expanded="true"] i {
    transform: rotate(45deg);
    background: var(--hl);
    color: #322636;
    border-color: var(--hl)
}

.ct-a {
    padding: 0 3.2rem 1.2rem .2rem;
    color: var(--text-soft)
}

.ct-a:not([hidden]) {
    animation: ct-pop .35s var(--ease)
}

.ct-a p {
    margin: 0
}

.ct-support-side {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    padding: clamp(1.4rem, 3vw, 2rem);
    border-radius: 6px
}

.ct-reqs {
    display: grid;
    gap: .7rem
}

.ct-req {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color .2s, transform .25s var(--ease)
}

.ct-req:hover {
    border-color: var(--fern);
    transform: translateX(4px)
}

.ct-req>i {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink)
}

.ct-req strong {
    display: block;
    line-height: 1.25
}

.ct-req small {
    display: block;
    color: var(--text-soft);
    font-size: .88rem
}

.ct-callout {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    margin: 1.4rem 0 0;
    color: var(--text-soft)
}

.ct-callout i {
    color: var(--fern);
    margin-top: .3rem
}

.ct-callout a {
    color: var(--fern);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px
}

/* 7. Menu CTA: mustard band with a sliding sandwich-name ribbon */
.ct-cta {
    background: var(--hl);
    color: #322636;
    padding: clamp(3rem, 7vw, 5.5rem) 0;
    overflow: hidden;
    text-align: center
}

.ct-marquee {
    overflow: hidden;
    margin-bottom: clamp(2rem, 5vw, 3.5rem)
}

.ct-track {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: max-content;
    animation: ct-slide 42s linear infinite;
    font: 18;
    white-space: nowrap;
    opacity: .85
}

.ct-track i {
    font-size: .45em;
    opacity: .7
}

@keyframes ct-slide {
    to {
        transform: translateX(-50%)
    }
}

.ct-cta-inner {
    max-width: 44rem
}

.ct-cta h2 {
    font-size: clamp(2.2rem, 5vw, 3.8rem)
}

.ct-cta p {
    font-size: 1.15rem
}

.ct-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .9rem;
    margin: 1.8rem 0 1.6rem
}

.ct-cta .btn-solid {
    background: #322636;
    color: #fff
}

.ct-cta .btn-solid:hover {
    background: #4a3550
}

.ct-cta .btn-outline {
    border-color: #322636;
    color: #322636
}

.ct-cta .btn-outline:hover {
    background: #322636;
    color: #fff
}

.ct-cta-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem
}

.ct-cta-links a {
    display: inline-block;
    padding: .45rem 1rem;
    border: 1.5px solid rgba(50, 38, 54, .5);
    border-radius: 999px;
    font-weight: 600;
    font-size: .95rem;
    transition: background .2s, color .2s
}

.ct-cta-links a:hover {
    background: #322636;
    color: #fff;
    border-color: #322636
}

.ct-toast {
    position: fixed;
    inset-inline: 0;
    bottom: 1.5rem;
    width: max-content;
    max-width: 90vw;
    margin-inline: auto;
    padding: .7rem 1.2rem;
    background: #322636;
    color: #fff;
    border-radius: 6px;
    box-shadow: var(--shadow);
    z-index: 150;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .25s, transform .25s var(--ease)
}

.ct-toast.show {
    opacity: 1;
    transform: none
}

/* Contact: tablet */
@media (max-width:1100px) {
    .ct-hero-grid {
        gap: 2rem
    }

    .ct-tile-phone {
        grid-column: span 7
    }

    .ct-tile-mail {
        grid-column: span 5
    }

    .ct-map-frame {
        grid-column: 1 / span 12
    }

    .ct-map-card {
        grid-column: 6 / span 7;
        align-self: end;
        margin: 0 1.5rem -1.5rem 0
    }

    .ct-map-wrap {
        padding-bottom: 1.5rem
    }

    .ct-form-grid {
        grid-template-columns: 1fr 1.3fr
    }
}

@media (max-width:860px) {

    .ct-hero-grid,
    .ct-form-grid,
    .ct-hours-grid,
    .ct-support-grid {
        grid-template-columns: 1fr
    }

    .ct-hero-copy h1 {
        max-width: none
    }

    .ct-tile-phone,
    .ct-tile-social {
        grid-column: span 12
    }

    .ct-tile-mail,
    .ct-tile-addr {
        grid-column: span 6
    }

    .ct-form-intro {
        position: static
    }

    .ct-map-wrap {
        display: block;
        padding: 0
    }

    .ct-map-frame {
        height: clamp(18rem, 55vw, 26rem)
    }

    .ct-map-card {
        margin: -2.5rem 1rem 0
    }

    .ct-bars {
        height: 9.5rem
    }
}

/* Contact: mobile */
@media (max-width:600px) {
    .ct-hero-actions .btn:not(.btn-text) {
        width: 100%
    }

    .ct-l-call,
    .ct-l-mail,
    .ct-l-visit {
        margin-inline: 0
    }

    .ct-bun-top {
        height: 4.2rem
    }

    .ct-tile-mail,
    .ct-tile-addr {
        grid-column: span 12
    }

    .ct-tile-actions .btn {
        width: 100%
    }

    .ct-row {
        grid-template-columns: 1fr
    }

    .ct-submit {
        width: 100%;
        justify-self: stretch
    }

    .ct-map-card {
        margin: -1.5rem .5rem 0
    }

    .ct-a {
        padding-inline-end: .5rem
    }

    .ct-live-state {
        font-size: 1.35rem
    }

    .ct-bars span {
        font-size: .68rem
    }

    .ct-week li {
        padding-inline: .7rem;
        font-size: 1rem
    }

    .ct-cta-actions .btn {
        width: 100%
    }
}

@media (prefers-reduced-motion:reduce) {
    .ct-track {
        animation: none
    }

    .is-open .ct-dot {
        animation: none
    }
}

/* =====================================================================
   CATERING ORDERS PAGE (catering.html)
   ===================================================================== */
:root {
    --band: var(--sage);
    --deep: var(--moss)
}

.cx-s {
    padding: clamp(3.5rem, 8vw, 6.5rem) 0
}

.cx-alt {
    background: var(--bg-alt)
}

.cx-h {
    max-width: 36rem;
    margin-bottom: 2.2rem
}

.cx-h p {
    color: var(--text-soft);
    font-size: 1.1rem
}

.cx-deep {
    background: var(--deep);
    color: #fff4e8
}

.cx-deep .cx-h p {
    color: #d8c6d6
}

.cx-add {
    white-space: nowrap
}

/* Hero: warm band, one big plate with a rotating ring */
.cx-hero {
    background: var(--band);
    padding: clamp(2.5rem, 6vw, 5rem) 0;
    overflow: hidden
}

.cx-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 3rem; 
    align-items: center
}

.cx-hero h1 {
    font-size: clamp(2.8rem, 7vw, 5.8rem);
    line-height: 1;
    margin-bottom: 1.2rem
}

.cx-hero .lead {
    font-size: 1.2rem;
    max-width: 34rem;
    color: var(--text)
}

.cx-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem 1rem;
    background: var(--paper);
    border: 1px solid var(--border);
    padding: 1rem 1.1rem;
    margin: 1.6rem 0;
    max-width: max-content
}

.cx-quick label {
    font-weight: 600
}

.cx-step {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    background: var(--surface)
}

.cx-step button {
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: .8rem
}

.cx-step button:hover {
    background: var(--bg-alt)
}

.cx-step input,
.cx-step output {
    width: 3.6rem;
    text-align: center;
    border: 0;
    background: transparent;
    font: 600 1.05rem var(--body);
    color: var(--text);
    padding: 0;
    /* -moz-appearance: textfield */
}

.cx-step input::-webkit-outer-spin-button,
.cx-step input::-webkit-inner-spin-button {
    -webkit-appearance: none
}

.cx-hero .hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.5rem;
    color: var(--text)
}

.cx-plate {
    position: relative;
    width: min(440px, 100%);
    aspect-ratio: 1;
    margin-inline: auto
}

.cx-plate>img {
    position: absolute;
    inset: 11%;
    width: 78%;
    height: 78%;
    object-fit: cover;
    border-radius: 50%;
    border: 8px solid var(--paper);
    box-shadow: var(--shadow)
}

.cx-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: cx-spin 40s linear infinite;
    color: var(--moss)
}

.cx-ring text {
    font: 600 12.5px var(--body);
    fill: currentColor;
    letter-spacing: .04em
}

@keyframes cx-spin {
    to {
        transform: rotate(360deg)
    }
}

/* Platter rail */
.cx-rail {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: .25rem .25rem 1.4rem;
    scrollbar-color: var(--fern) transparent
}

.cx-card {
    flex: 0 0 min(290px, 82%);
    scroll-snap-align: start;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.cx-card img {
    width: 72%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto .6rem
}

.cx-card h3 {
    margin: 0
}

.cx-card p {
    color: var(--text-soft);
    font-size: .97rem;
    margin: 0 0 .5rem;
    flex: 1
}

.cx-opt,
.cx-f input,
.cx-f textarea {
    width: 100%;
    padding: .7rem .8rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    border-radius: 4px
}

/* Lunch boxes: kraft box with four compartments + ruled rows */
.cx-boxes {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 3rem;
    align-items: start
}

.cx-kraft {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    background: var(--sage);
    padding: .9rem;
    border: 2px dashed var(--fern);
    max-width: 26rem;
    aspect-ratio: 4/3
}

.cx-kraft span {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .4rem;
    background: var(--paper);
    color: var(--ink);
    font-weight: 600;
    font-size: .95rem
}

.cx-kraft i {
    font-size: 1.5rem;
    color: var(--fern)
}

.cx-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: .8rem 1.2rem;
    align-items: center;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--border)
}

.cx-row:first-child {
    border-top: 1px solid var(--border)
}

.cx-row h3 {
    margin: 0 0 .2rem
}

.cx-row p {
    margin: 0;
    color: var(--text-soft);
    font-size: .97rem
}

.cx-row strong {
    font: 600 1.3rem var(--head)
}

/* Sliders */
.cx-sl-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 3rem;
    align-items: start
}

.cx-deep .cx-step {
    background: transparent;
    border-color: #6b5370
}

.cx-deep .cx-step button,
.cx-deep .cx-step output {
    color: #fff4e8
}

.cx-deep .cx-step button:hover {
    background: #5a3f61
}

.cx-sl li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .9rem 0;
    border-bottom: 1px solid #6b5370;
    font: 600 1.25rem var(--head)
}

.cx-meter {
    height: 10px;
    background: #5a3f61;
    margin: 1.6rem 0 .6rem
}

.cx-meter div {
    height: 100%;
    width: 0;
    background: var(--mustard);
    transition: width .35s var(--ease)
}

.cx-sl-sum {
    color: #d8c6d6;
    min-height: 1.6em
}

/* Spread */
.cx-pks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--border)
}

.cx-pk input {
    position: absolute;
    opacity: 0
}

.cx-pk span {
    display: block;
    height: 100%;
    padding: 1.8rem;
    border-inline-end: 1px solid var(--border);
    cursor: pointer;
    transition: background .25s
}

.cx-pk:last-child span {
    border-inline-end: 0
}

.cx-pk h3 {
    font-size: 1.7rem
}

.cx-pk b {
    display: block;
    font: 600 2.1rem var(--head);
    margin-bottom: .6rem
}

.cx-pk small {
    font: 400 .9rem var(--body);
    color: var(--text-soft)
}

.cx-pk em {
    font-style: normal;
    color: var(--text-soft)
}

.cx-pk input:checked+span {
    background: var(--accent);
    color: var(--accent-ink)
}

.cx-pk input:checked+span small,
.cx-pk input:checked+span em {
    color: inherit;
    opacity: .85
}

.cx-pk input:focus-visible+span {
    outline: 3px solid var(--hl);
    outline-offset: -3px
}

.cx-pk-sum {
    margin: 1.2rem 0 1rem;
    font-weight: 600
}

/* Group size */
.cx-size {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 3rem;
    align-items: start
}

.cx-calc label {
    font-size: 1.2rem;
    display: block;
    margin-bottom: .8rem
}

.cx-calc strong {
    font: 600 2.4rem var(--head)
}

#cxRange {
    width: 100%;
    accent-color: var(--fern);
    height: 2rem
}

.cx-tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 1rem 0 1.6rem;
    border-top: 3px solid var(--border)
}

.cx-tiers li {
    padding: .7rem .4rem 0;
    font-weight: 600;
    border-top: 3px solid transparent;
    margin-top: -3px;
    color: var(--text-soft);
    transition: color .25s, border-color .25s
}

.cx-tiers li small {
    display: block;
    font-weight: 400
}

.cx-tiers li.on {
    color: var(--text);
    border-color: var(--hl)
}

.cx-rec li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--border)
}

.cx-rec b {
    font-family: var(--head);
    font-size: 1.15rem
}

/* Dietary */
.cx-diet {
    border: 0;
    padding: 0;
    margin: 0 0 1.8rem
}

.cx-diet legend {
    font-weight: 600;
    margin-bottom: .7rem
}

.cx-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 2rem
}

.cx-items li {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--border);
    transition: opacity .3s
}

.cx-items li.dim {
    opacity: .22
}

.cx-items h3 {
    font-size: 1.2rem;
    margin: 0
}

.cx-items p {
    margin: 0;
    color: var(--text-soft)
}

.cx-none {
    color: var(--tomato);
    font-weight: 600;
    margin-top: 1rem
}

/* Packaging */
.cx-seg {
    display: inline-flex;
    border: 1px solid #6b5370;
    margin-bottom: 1.8rem
}

.cx-seg button {
    padding: .75rem 1.8rem;
    border: 0;
    background: transparent;
    color: #fff4e8;
    font: 600 1rem var(--body);
    cursor: pointer
}

.cx-seg button[aria-pressed="true"] {
    background: var(--mustard);
    color: var(--ink)
}

.cx-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem
}

.cx-modes li {
    display: flex;
    gap: .9rem;
    padding: .9rem 0;
    border-bottom: 1px solid #6b5370
}

.cx-modes i {
    color: var(--mustard);
    width: 1.3rem;
    margin-top: .3rem
}

[hidden] {
    display: none !important
}

/* Form */
.cx-req {
    display: grid;
    grid-template-columns: 1.4fr .8fr;
    gap: 3rem;
    align-items: start
}

.cx-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.2rem
}

.cx-wide {
    grid-column: 1/-1
}

.cx-f {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0
}

.cx-f label,
.cx-f legend {
    display: block;
    font-weight: 600;
    margin-bottom: .35rem;
    font-size: .97rem
}

.cx-f small {
    display: block;
    color: var(--tomato);
    min-height: 1.2em;
    font-size: .87rem
}

.cx-f.bad input {
    border-color: var(--tomato)
}

.cx-sum {
    position: sticky;
    top: calc(var(--hdr) + 1rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 6px solid var(--hl);
    padding: 1.5rem
}

.cx-sum li {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .97rem
}

.cx-sum li button {
    border: 0;
    background: none;
    color: var(--tomato);
    cursor: pointer;
    font-size: .85rem
}

.cx-empty {
    color: var(--text-soft)
}

.cx-total {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    margin: 1rem 0 .4rem
}

.cx-total strong {
    font: 600 1.6rem var(--head)
}

.cx-sum small {
    color: var(--text-soft)
}

.cx-done {
    margin-top: 1rem;
    padding: 1.2rem;
    border-inline-start: 5px solid var(--fern);
    background: var(--bg-alt);
    font-weight: 600
}

.cx-pill {
    position: fixed;
    inset-inline: 0;
    bottom: 1rem;
    margin-inline: auto;
    width: max-content;
    z-index: 80;
    background: var(--moss);
    color: #fff;
    padding: .8rem 1.4rem;
    font-weight: 600;
    box-shadow: var(--shadow);
    border-radius: 4px
}

/* Catering: tablet */
@media (max-width:1100px) {

    .cx-hero-grid,
    .cx-boxes,
    .cx-sl-grid,
    .cx-size,
    .cx-req {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .cx-plate {
        width: min(360px, 80%)
    }

    .cx-sum {
        position: static
    }

    .cx-items {
        grid-template-columns: 1fr 1fr
    }
}

/* Catering: mobile */
@media (max-width:640px) {
    .cx-row {
        grid-template-columns: 1fr auto
    }

    .cx-row .cx-step {
        grid-column: 1
    }

    .cx-row .cx-add {
        grid-column: 2
    }

    .cx-pks,
    .cx-modes,
    .cx-form,
    .cx-items {
        grid-template-columns: 1fr
    }

    .cx-pk span {
        border-inline-end: 0;
        border-bottom: 1px solid var(--border)
    }

    .cx-tiers {
        grid-template-columns: 1fr 1fr
    }

    .cx-quick {
        max-width: none
    }

    .cx-pill {
        inset-inline: 1rem;
        width: auto;
        text-align: center
    }
}

@media (prefers-reduced-motion:reduce) {
    .cx-ring {
        animation: none
    }

    .cx-meter div {
        transition: none
    }
}

/* =====================================================================
   HOME 2 PAGE (home-2.html)
   ===================================================================== */
.hm-s {
    padding: clamp(3.5rem, 8vw, 6.5rem) 0
}

.hm-alt {
    background: var(--bg-alt)
}

.hm-gold {
    background: var(--mustard);
    color: var(--ink)
}

.hm-deep {
    background: var(--deep, #432d49);
    color: #fff4e8
}

.hm-h {
    max-width: 36rem;
    margin-bottom: 2.2rem
}

.hm-h p {
    font-size: 1.1rem;
    color: var(--text-soft)
}

.hm-gold .hm-h p {
    color: var(--ink)
}

.hm-deep .hm-h p {
    color: #d8c6d6
}

.hm-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center
}

.hm-deep input,
.hm-gold input {
    font: inherit
}

/* Hero: dark editorial */
.hm-hero {
    background: var(--deep, #432d49);
    color: #fff4e8;
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);
    overflow: hidden
}

.hm-hero-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 3rem;
    align-items: end
}

.hm-hero h1 {
    font-size: clamp(3.4rem, 10vw, 8.4rem);
    line-height: .92;
    letter-spacing: -.03em;
    margin-bottom: 1.5rem
}

.hm-hero h1 span {
    color: var(--mustard);
    font-style: italic;
    font-weight: 400
}

.hm-hero .lead {
    max-width: 34rem;
    color: #e6d6e4;
    font-size: 1.15rem
}

.hm-open {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    border: 1px solid #6b5370;
    padding: .4rem 1rem;
    margin-bottom: 1.6rem;
    font-weight: 600;
    font-size: .95rem
}

.hm-open i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #7fd99a;
    box-shadow: 0 0 0 0 rgba(127, 217, 154, .7);
    animation: hm-pulse 2s infinite
}

.hm-open.off i {
    background: var(--tomato);
    animation: none
}

@keyframes hm-pulse {
    to {
        box-shadow: 0 0 0 10px rgba(127, 217, 154, 0)
    }
}

.hm-hero-fig {
    margin: 0
}

.hm-hero-fig img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border: 1px solid #6b5370;
    padding: .6rem
}

.hm-hero-fig figcaption {
    font: italic 1rem var(--head);
    color: #d8c6d6;
    margin-top: .7rem
}

/* Specials */
.hm-spec {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 2.5rem
}

.hm-days button {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    width: 100%;
    padding: .95rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: none;
    color: var(--text);
    font: 500 1.05rem var(--body);
    cursor: pointer;
    text-align: start
}

.hm-days b {
    font-family: var(--head);
    width: 3rem;
    color: var(--fern)
}

.hm-days button[aria-selected="true"] {
    background: var(--accent);
    color: var(--accent-ink)
}

.hm-days button[aria-selected="true"] b {
    color: var(--mustard)
}

.hm-spec-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
    align-items: center
}

.hm-spec-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50% 50% 4px 4px
}

.hm-tag {
    display: inline-block;
    background: var(--tomato);
    color: #fff;
    padding: .15rem .7rem;
    font-weight: 600;
    font-size: .85rem
}

.hm-price {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin: 1rem 0
}

.hm-price strong {
    font: 600 2rem var(--head)
}

.hm-price span {
    color: var(--tomato);
    font-weight: 600
}

/* Quiz */
.hm-quiz-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 3rem;
    align-items: start
}

.hm-qbox {
    background: var(--paper);
    color: var(--ink);
    padding: clamp(1.4rem, 3vw, 2.4rem);
    min-height: 20rem
}

.hm-qbox h3 {
    font-size: 1.6rem
}

.hm-qbox small {
    color: var(--muted);
    font-weight: 600
}

.hm-qopts {
    display: grid;
    gap: .6rem;
    margin-top: 1.2rem
}

.hm-qopts button {
    padding: .9rem 1.1rem;
    border: 2px solid var(--moss);
    background: transparent;
    color: var(--ink);
    font: 600 1rem var(--body);
    cursor: pointer;
    text-align: start;
    transition: background .2s, color .2s
}

.hm-qopts button:hover {
    background: var(--moss);
    color: #fff
}

.hm-qbar {
    height: 6px;
    background: var(--line);
    margin-bottom: 1.2rem
}

.hm-qbar div {
    height: 100%;
    background: var(--tomato);
    transition: width .3s
}

/* Griddle */
.hm-lab {
    font-size: 1.2rem;
    display: block;
    margin-bottom: .6rem
}

#hmHeat {
    width: 100%;
    accent-color: var(--mustard);
    height: 2rem
}

.hm-heat-txt {
    margin-top: 1rem;
    color: #d8c6d6;
    min-height: 3.2em
}

.hm-griddle {
    text-align: center
}

.hm-griddle p {
    font: italic 1.2rem var(--head);
    margin-top: 1rem
}

.hm-slice {
    position: relative;
    width: min(280px, 70%);
    aspect-ratio: 1;
    margin: 0 auto;
    background: var(--t, #f3e3c3);
    border-radius: 46% 46% 18% 18%;
    box-shadow: inset 0 0 0 16px var(--c, #e2c892), var(--shadow);
    transition: background .5s, box-shadow .5s
}

.hm-steam {
    position: absolute;
    top: -1.2rem;
    width: 8px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255, 244, 232, .35);
    opacity: 0;
    left: 30%
}

.hm-steam:nth-child(2) {
    left: 48%
}

.hm-steam:nth-child(3) {
    left: 66%
}

.hm-slice.hot .hm-steam {
    animation: hm-rise 2.4s infinite
}

.hm-slice.hot .hm-steam:nth-child(2) {
    animation-delay: .6s
}

.hm-slice.hot .hm-steam:nth-child(3) {
    animation-delay: 1.2s
}

@keyframes hm-rise {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    40% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: translateY(-30px)
    }
}

/* Passport */
.hm-stamps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 2rem
}

.hm-stamps button {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px dashed var(--border);
    background: none;
    color: var(--text-soft);
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 1rem;
    font: 600 1rem var(--head);
    transition: .3s var(--ease)
}

.hm-stamps button i {
    position: absolute;
    top: 8%;
    inset-inline-end: 8%;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tomato);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .75rem;
    transform: scale(0);
    transition: transform .3s
}

.hm-stamps button.on {
    border: 3px solid var(--tomato);
    color: var(--tomato);
    transform: rotate(-6deg)
}

.hm-stamps button.on i {
    transform: scale(1)
}

.hm-stamps button.cur {
    background: var(--bg-alt)
}

.hm-pp {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 2rem;
    align-items: center;
    border-top: 1px solid var(--border);
    padding-top: 2rem
}

.hm-pp img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover
}

.hm-prog {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap
}

.hm-prog .link {
    background: none;
    border: 0;
    cursor: pointer;
    font: 600 1rem var(--body)
}

/* Sidekicks */
.hm-side {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 2.5rem;
    margin-top: 1.8rem
}

.hm-side li {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border)
}

.hm-side h3 {
    font-size: 1.15rem;
    margin: 0
}

.hm-side p {
    margin: 0;
    color: var(--text-soft);
    grid-column: 1
}

.hm-side b {
    grid-row: 1/3;
    grid-column: 2;
    font: 600 1.1rem var(--head);
    align-self: center
}

.hm-side b.heat::before {
    content: "";
    display: block;
    height: 6px;
    width: calc(var(--h)*14px);
    background: var(--tomato);
    margin-bottom: .3rem;
    margin-inline-start: auto
}

.hm-side li[hidden] {
    display: none
}

/* Rush */
.hm-rush li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
    transition: opacity .3s
}

.hm-rush li.no {
    opacity: .2
}

.hm-rush h3 {
    margin: 0;
    font-size: 1.25rem
}

.hm-rush span {
    font: 600 1.1rem var(--head);
    color: var(--fern)
}

/* Wall */
.hm-wall {
    columns: 3 16rem;
    column-gap: 1.4rem
}

.hm-wall li {
    break-inside: avoid;
    margin-bottom: 1.4rem;
    padding: 1.4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-inline-start: 5px solid var(--hl)
}

.hm-wall p {
    font: italic 1.12rem/1.5 var(--head);
    margin-bottom: .8rem
}

.hm-wall b {
    font-size: .92rem;
    color: var(--fern)
}

.hm-pin {
    display: grid;
    gap: .4rem;
    max-width: 34rem;
    margin-top: 1rem
}

.hm-pin label {
    font-weight: 600
}

.hm-pin input,
.hm-pin textarea,
.hm-row input {
    padding: .75rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 4px;
    font: inherit;
    width: 100%
}

.hm-pin small {
    color: var(--tomato);
    min-height: 1.3em
}

.hm-pin .btn {
    justify-self: start
}

/* Club */
.hm-perks li {
    display: flex;
    gap: 1rem;
    padding: .9rem 0;
    border-bottom: 1px solid #6b5370
}

.hm-perks i {
    color: var(--mustard);
    margin-top: .35rem
}

.hm-seg {
    display: inline-flex;
    border: 1px solid #6b5370;
    margin-bottom: 1.2rem
}

.hm-seg button {
    padding: .65rem 1.2rem;
    border: 0;
    background: none;
    color: #fff4e8;
    font: 600 .95rem var(--body);
    cursor: pointer
}

.hm-seg button[aria-pressed="true"] {
    background: var(--mustard);
    color: var(--ink)
}

.hm-plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.4rem
}

.hm-plans>div {
    border: 1px solid #6b5370;
    padding: 1.3rem
}

.hm-plans b {
    display: block;
    font: 600 2rem var(--head)
}

.hm-plans small {
    font: 400 .95rem var(--body)
}

.hm-plans p {
    margin: .5rem 0 0;
    color: #d8c6d6;
    font-size: .95rem
}

.hm-plans .hm-plus {
    background: #fff4e8;
    color: var(--ink)
}

.hm-plus p {
    color: var(--muted)
}

.hm-row {
    display: flex;
    gap: .7rem;
    margin-top: .4rem
}

.hm-row input {
    color: var(--ink);
    background: #fff
}

.hm-join label {
    font-weight: 600
}

#hmJoinMsg {
    display: block;
    min-height: 1.5em;
    margin-top: .5rem;
    color: var(--mustard);
    font-weight: 600
}

/* Home 2: tablet */
@media (max-width:1100px) {

    .hm-hero-grid,
    .hm-grid2,
    .hm-quiz-grid,
    .hm-spec {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .hm-hero-fig img {
        aspect-ratio: 16/10
    }

    .hm-days {
        display: grid;
        grid-template-columns: repeat(4, 1fr)
    }

    .hm-days button {
        flex-direction: column;
        gap: 0;
        align-items: center;
        text-align: center;
        border: 1px solid var(--border)
    }

    .hm-days b {
        width: auto
    }

    .hm-side {
        grid-template-columns: 1fr 1fr
    }

    .hm-stamps {
        grid-template-columns: repeat(3, 1fr)
    }
}

/* Home 2: mobile */
@media (max-width:640px) {
    .hm-days {
        grid-template-columns: repeat(4, 1fr)
    }

    .hm-days span {
        display: none
    }

    .hm-spec-card,
    .hm-pp,
    .hm-plans,
    .hm-side {
        grid-template-columns: 1fr
    }

    .hm-stamps {
        grid-template-columns: 1fr 1fr
    }

    .hm-row {
        flex-direction: column
    }

    .hm-hero .hero-actions {
        flex-direction: column;
        align-items: stretch
    }
}

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

    .hm-open i,
    .hm-slice.hot .hm-steam {
        animation: none
    }
}

/* =====================================================================
   MENU PAGE (menu.html)
   ===================================================================== */
.mn-s {
    padding: clamp(3.5rem, 8vw, 6rem) 0;
    scroll-margin-top: calc(var(--hdr) + 60px)
}

.mn-head h2 {
    font-size: clamp(2.2rem, 5vw, 3.8rem)
}

.mn-sub {
    font: italic 1.35rem var(--head);
    color: var(--fern)
}

.mn-fig {
    margin: 0
}

.mn-fig img {
    width: 100%;
    aspect-ratio: 5/4;
    object-fit: cover
}

/* Hero: headline + index, with a search card */
.mn-hero {
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem)
}

.mn-hero-g {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 3rem;
    align-items: start
}

.mn-hero h1 {
    font-size: clamp(3rem, 8vw, 6.6rem);
    line-height: .95;
    letter-spacing: -.03em
}

.mn-hero .lead {
    max-width: 32rem;
    font-size: 1.15rem;
    color: var(--text-soft)
}

.mn-index {
    margin-top: 2rem;
    border-top: 2px solid var(--text)
}

.mn-index a {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 1rem .2rem;
    border-bottom: 1px solid var(--border);
    transition: padding .3s var(--ease), background .3s
}

.mn-index a:hover {
    padding-inline-start: 1rem;
    background: var(--bg-alt)
}

.mn-index b {
    font: 600 clamp(1.4rem, 3vw, 2rem) var(--head);
    flex: 1
}

.mn-index span {
    color: var(--text-soft)
}

.mn-index .arrow {
    color: var(--tomato)
}

.mn-find {
    background: var(--sage);
    color: var(--ink);
    padding: 1.8rem;
    position: sticky;
    top: calc(var(--hdr) + 1rem)
}

.mn-find label {
    font: 600 1.5rem var(--head);
    display: block;
    margin-bottom: .7rem
}

.mn-find input[type=search] {
    width: 100%;
    padding: .85rem 1rem;
    border: 2px solid var(--moss);
    background: #fff;
    color: var(--ink);
    font: inherit;
    border-radius: 4px
}

.mn-find fieldset {
    border: 0;
    padding: 0;
    margin: 1.2rem 0 0
}

.mn-find legend {
    font-weight: 600;
    margin-bottom: .6rem
}

.mn-count {
    margin: 1rem 0 0;
    font-weight: 600
}

/* Sticky category + size bar */
.mn-bar {
    position: sticky;
    top: var(--hdr);
    z-index: 60;
    background: var(--bg);
    border-block: 1px solid var(--border)
}

.mn-bar-in {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem
}

.mn-links {
    display: flex;
    gap: .2rem;
    overflow-x: auto;
    scrollbar-width: none
}

.mn-links a {
    padding: 1rem .9rem;
    white-space: nowrap;
    font-weight: 500;
    border-bottom: 3px solid transparent
}

.mn-links a[aria-current="true"] {
    border-color: var(--hl);
    font-weight: 600;
    color: var(--fern)
}

.mn-size {
    display: inline-flex;
    border: 1px solid var(--border);
    flex: none
}

.mn-size button {
    padding: .5rem 1rem;
    border: 0;
    background: none;
    color: var(--text);
    font: 600 .9rem var(--body);
    cursor: pointer
}

.mn-size button[aria-pressed="true"] {
    background: var(--accent);
    color: var(--accent-ink)
}

/* Items: name ... price, add button */
.mn-top {
    display: flex;
    align-items: baseline;
    gap: .6rem
}

.mn-top h3 {
    margin: 0;
    font-size: 1.3rem
}

.mn-top>i {
    flex: 1;
    border-bottom: 2px dotted currentColor;
    opacity: .35;
    transform: translateY(-.3em);
    min-width: 1rem
}

.mn-p {
    font: 600 1.3rem var(--head)
}

.mn-add {
    align-self: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: none;
    color: inherit;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: .75rem;
    transition: background .2s, color .2s
}

.mn-add:hover {
    background: var(--mustard);
    border-color: var(--mustard);
    color: var(--ink)
}

.mn-item p {
    margin: .35rem 0 .5rem;
    opacity: .8;
    max-width: 34rem
}

.mn-item[hidden] {
    display: none
}

.mn-item.flash {
    animation: mn-flash 1.6s
}

@keyframes mn-flash {

    0%,
    60% {
        box-shadow: 0 0 0 6px var(--mustard)
    }

    100% {
        box-shadow: 0 0 0 0 transparent
    }
}

.mn-tags {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap
}

.mn-t {
    font-size: .8rem;
    font-weight: 600;
    padding: .1rem .6rem;
    border: 1px solid currentColor;
    border-radius: 99px
}

.t-pop {
    color: var(--tomato)
}

.t-veg {
    color: var(--fern)
}

.t-spicy {
    color: var(--tomato)
}

.t-new {
    color: var(--fern)
}

.mn-empty {
    text-align: center;
    padding: 3rem 0;
    font-size: 1.15rem
}

.mn-empty .link {
    background: none;
    border: 0;
    cursor: pointer;
    font: 600 1rem var(--body)
}

/* Club: sticky photo beside a ruled list */
.mn-club-g {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 4rem;
    align-items: start
}

.mn-stick {
    position: sticky;
    top: calc(var(--hdr) + 80px)
}

.mn-stick .mn-fig {
    margin-top: 1.5rem
}

.mn-club .mn-item {
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--border)
}

/* Philly: deep band, tiles */
.mn-philly {
    background: var(--deep);
    color: #fff4e8
}

.mn-philly .mn-sub {
    color: var(--mustard)
}

.mn-hrow {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 2.5rem
}

.mn-hrow .mn-fig img {
    border-radius: 50%;
    aspect-ratio: 1;
    max-width: 340px;
    margin-inline: auto
}

.mn-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem
}

.mn-tiles .mn-item {
    border: 1px solid #6b5370;
    padding: 1.4rem
}

.mn-philly .mn-t {
    color: var(--mustard)
}

/* Reuben: editorial two columns */
.mn-reuben {
    background: var(--bg-alt)
}

.mn-hrow.rev {
    grid-template-columns: .9fr 1.1fr
}

.mn-hrow.rev .mn-fig img {
    border-radius: 4px 4px 50% 4px;
    max-width: none;
    aspect-ratio: 4/3
}

.mn-cols {
    columns: 2;
    column-gap: 3rem
}

.mn-cols .mn-item {
    break-inside: avoid;
    padding: 1.2rem 0;
    border-top: 2px solid var(--text)
}

/* Panini: full-bleed banner, three cards */
.mn-pan {
    padding-top: 0
}

.mn-banner {
    position: relative;
    min-height: 22rem;
    display: flex;
    align-items: flex-end;
    margin-bottom: 3rem;
    color: #fff4e8
}

.mn-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.mn-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(40, 24, 46, .92), rgba(40, 24, 46, .25));
    z-index: 1
}

.mn-banner .container {
    position: relative;
    z-index: 2;
    padding-block: 2.5rem
}

.mn-banner .mn-sub {
    color: var(--mustard)
}

.mn-banner p {
    max-width: 34rem
}

.mn-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem
}

.mn-cards .mn-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 5px solid var(--tomato);
    padding: 1.4rem
}

/* Find your favorite */
.mn-fav {
    background: var(--deep);
    color: #fff4e8;
    text-align: center
}

.mn-fav-h {
    margin-inline: auto;
    max-width: 34rem
}

.mn-fav-h h2 {
    font-size: clamp(2.2rem, 5vw, 3.6rem)
}

.mn-fav-h p {
    color: #d8c6d6
}

.mn-cats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 2rem 0
}

.mn-cats a {
    display: grid;
    justify-items: center;
    gap: .8rem;
    padding: 1.8rem 1rem;
    border: 1px solid #6b5370;
    font: 600 1.2rem var(--head);
    transition: background .25s, color .25s
}

.mn-cats a:hover {
    background: var(--mustard);
    color: var(--ink)
}

.mn-cats i {
    font-size: 1.6rem;
    color: var(--mustard)
}

.mn-cats a:hover i {
    color: var(--ink)
}

.mn-toast {
    position: fixed;
    inset-inline: 0;
    bottom: 1.2rem;
    margin-inline: auto;
    width: max-content;
    max-width: 90%;
    background: var(--moss);
    color: #fff;
    padding: .8rem 1.4rem;
    z-index: 120;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: .3s var(--ease);
    box-shadow: var(--shadow)
}

.mn-toast.show {
    opacity: 1;
    transform: none
}

/* Menu: tablet */
@media (max-width:1100px) {

    .mn-hero-g,
    .mn-club-g,
    .mn-hrow,
    .mn-hrow.rev {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .mn-find,
    .mn-stick {
        position: static
    }

    .mn-cards {
        grid-template-columns: 1fr 1fr
    }

    .mn-cats {
        grid-template-columns: 1fr 1fr
    }

    .mn-bar {
        top: var(--hdr)
    }
}

/* Menu: mobile */
@media (max-width:640px) {

    .mn-tiles,
    .mn-cards {
        grid-template-columns: 1fr
    }

    .mn-cols {
        columns: 1
    }

    .mn-bar-in {
        gap: .4rem
    }

    .mn-links a {
        padding: .9rem .6rem;
        font-size: .92rem
    }

    .mn-index a {
        flex-wrap: wrap
    }

    .mn-index span {
        order: 3;
        width: 100%
    }

    .mn-cats {
        grid-template-columns: 1fr
    }

    .mn-banner {
        min-height: 18rem
    }
}

@media (prefers-reduced-motion:reduce) {
    .mn-item.flash {
        animation: none
    }

    .mn-toast {
        transition: none
    }
}

/* =====================================================================
   CLUB SANDWICHES PAGE (club-sandwiches.html)
   ===================================================================== */
.cl-s {
    padding: clamp(3.5rem, 8vw, 6.5rem) 0
}

#collection.cl-s {
    padding-top: clamp(2.5rem, 5vw, 4rem)
}

.cl-alt {
    background: var(--bg-alt)
}

.cl-deep {
    background: var(--deep);
    color: #fff4e8
}

.cl-h {
    max-width: 34rem;
    margin-bottom: 2rem
}

.cl-h p {
    color: var(--text-soft);
    font-size: 1.1rem
}

.cl-deep .cl-h p {
    color: #d8c6d6
}

.cl-lab {
    display: block;
    font-weight: 600;
    margin-bottom: .5rem
}

/* Hero: three offset slabs echo the triple-decker */
.cl-hero {
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
    overflow: hidden
}

.cl-hero-g {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 4rem;
    align-items: center
}

.cl-hero h1 {
    font-size: clamp(2.7rem, 6.4vw, 5.4rem);
    line-height: 1;
    letter-spacing: -.025em
}

.cl-hero .lead {
    max-width: 33rem;
    color: var(--text-soft);
    font-size: 1.15rem
}

.cl-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-top: 2rem;
    padding-top: 1.4rem;
    border-top: 2px solid var(--text)
}

.cl-facts li {
    max-width: 9rem;
    line-height: 1.3;
    color: var(--text-soft)
}

.cl-facts b {
    display: block;
    font: 600 2.4rem var(--head);
    color: var(--text)
}

.cl-stack {
    position: relative;
    margin: 0 0 3rem;
    margin-inline-end: 2.4rem
}

.cl-stack img {
    position: relative;
    z-index: 3;
    width: 100%;
    aspect-ratio: 10/11;
    object-fit: cover
}

.cl-stack::before,
.cl-stack::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--text)
}

.cl-stack::before {
    z-index: 2;
    transform: translate(1.2rem, 1.2rem);
    background: var(--sage)
}

.cl-stack::after {
    z-index: 1;
    transform: translate(2.4rem, 2.4rem);
    background: var(--mustard)
}

/* Collection: expanding panels */
.cl-panels {
    display: flex;
    gap: .8rem;
    height: 30rem
}

.cl-p {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    transition: flex .5s var(--ease);
    background: var(--moss);
    color: #fff4e8
}

.cl-p:has([aria-expanded="true"]) {
    flex: 4.5
}

.cl-pb {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    color: inherit;
    text-align: start
}

.cl-pb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .45;
    transition: opacity .4s
}

.cl-pb[aria-expanded="true"] img {
    opacity: .8
}

.cl-pn {
    position: absolute;
    inset-inline-start: 1.3rem;
    bottom: 1.3rem;
    font: 600 1.5rem var(--head);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    transition: .4s
}

.cl-pb[aria-expanded="true"] .cl-pn {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 2.2rem;
    top: 1.3rem;
    bottom: auto
}

.cl-pd {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
    background: linear-gradient(0deg, rgba(40, 24, 46, .95) 55%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s .1s;
    pointer-events: none;
    z-index: 2
}

.cl-p:has([aria-expanded="true"]) .cl-pd {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.cl-note {
    font: italic 1.1rem var(--head);
    color: var(--mustard);
    margin-bottom: .4rem
}

.cl-pd p {
    max-width: 30rem
}

.cl-pp {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin: .6rem 0 0 !important
}

.cl-pp b {
    font: 600 2rem var(--head)
}

/* Layers: exploded stack */
.cl-lay-g {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 3rem;
    align-items: center
}

#clX {
    width: 100%;
    accent-color: var(--fern);
    height: 2rem
}

.cl-sauce {
    border: 0;
    padding: 0;
    margin: 1rem 0
}

.cl-sauce legend {
    font-weight: 600;
    margin-bottom: .5rem
}

.cl-lbtns {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem
}

.cl-lbtns button {
    padding: .5rem .9rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font: 500 .95rem var(--body)
}

.cl-lbtns button[aria-pressed="true"] {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent)
}

.cl-info {
    margin-top: 1rem;
    min-height: 3.4em;
    font-size: 1.08rem
}

.cl-stage {
    --x: 0;
    --sauce: #f1e6b8;
    position: relative;
    height: 25rem;
    max-width: 22rem;
    margin-inline: auto;
    width: 100%
}

.cl-layer {
    position: absolute;
    inset-inline: 6%;
    bottom: calc(var(--i)*1.9rem + var(--i)*var(--x)*1.3rem);
    height: 2.6rem;
    background: var(--c);
    border-radius: 1.4rem 1.4rem .8rem .8rem;
    box-shadow: 0 3px 0 rgba(50, 38, 54, .25);
    transition: bottom .25s, filter .25s, transform .25s
}

.cl-layer[data-i="4"] {
    background: repeating-linear-gradient(100deg, #a8453a 0 14px, #c9695a 14px 24px)
}

.cl-layer[data-i="2"] {
    border-radius: 1.6rem 1rem 1.6rem 1rem;
    inset-inline: 3%
}

.cl-stage.has-sel .cl-layer {
    filter: saturate(.4) brightness(.9)
}

.cl-stage.has-sel .cl-layer.on {
    filter: none;
    transform: translateX(.8rem)
}

/* Combo */
.cl-combo-g {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 3rem;
    align-items: start
}

.cl-sel {
    width: 100%;
    max-width: 26rem;
    padding: .8rem;
    font: inherit;
    background: #fff;
    color: var(--ink);
    border: 0;
    border-radius: 4px;
    margin-bottom: 1.2rem
}

.cl-combo-g fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 1.2rem
}

.cl-combo-g legend {
    font-weight: 600;
    margin-bottom: .5rem
}

.cl-opts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem
}

.cl-opt input {
    position: absolute;
    opacity: 0
}

.cl-opt span {
    display: grid;
    gap: .1rem;
    height: 100%;
    padding: .9rem 1rem;
    border: 1px solid #6b5370;
    cursor: pointer;
    transition: .2s
}

.cl-opt small {
    color: #d8c6d6
}

.cl-opt input:checked+span {
    background: var(--mustard);
    color: var(--ink);
    border-color: var(--mustard)
}

.cl-opt input:checked+span small {
    color: var(--ink)
}

.cl-opt input:focus-visible+span {
    outline: 3px solid #fff;
    outline-offset: 2px
}

.cl-receipt {
    background: #fff4e8;
    color: var(--ink);
    padding: 1.6rem;
    position: sticky;
    top: calc(var(--hdr) + 1rem)
}

.cl-receipt li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px dashed #b9a5b6
}

.cl-save {
    color: var(--tomato);
    font-weight: 600;
    margin: .8rem 0 0
}

.cl-tot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 600;
    margin: .6rem 0 1rem
}

.cl-tot strong {
    font: 600 2rem var(--head)
}

.cl-receipt .btn {
    width: 100%
}

/* Order */
.cl-ord-g {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 3rem;
    align-items: start
}

.cl-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem 1.4rem;
    align-items: center;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--border)
}

.cl-row:first-child {
    border-top: 2px solid var(--text)
}

.cl-row h3 {
    margin: 0 0 .2rem
}

.cl-row p {
    margin: 0;
    color: var(--text-soft);
    font-size: .97rem
}

.cl-rp {
    font: 600 1.3rem var(--head)
}

.cl-ordbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 0
}

.cl-ordbar p {
    margin: 0;
    font-weight: 600
}

.cl-ordbar strong {
    font: 600 2rem var(--head);
    margin-inline-start: .6rem
}

.cl-msg {
    min-height: 1.6em;
    font-weight: 600;
    color: var(--fern)
}

.cl-msg a {
    text-decoration: underline
}

/* Club: tablet */
@media (max-width:1100px) {

    .cl-hero-g,
    .cl-lay-g,
    .cl-combo-g,
    .cl-ord-g {
        grid-template-columns: 1fr;
        gap: 2.2rem
    }

    .cl-stack {
        max-width: 30rem
    }

    .cl-receipt {
        position: static
    }

    .cl-panels {
        height: auto;
        flex-direction: column
    }

    .cl-p {
        flex: none;
        height: 5rem;
        transition: height .5s var(--ease)
    }

    .cl-p:has([aria-expanded="true"]) {
        flex: none;
        height: 26rem
    }

    .cl-pn,
    .cl-pb[aria-expanded="true"] .cl-pn {
        writing-mode: horizontal-tb;
        transform: none;
        top: 1.5rem;
        bottom: auto;
        font-size: 1.5rem
    }
}

/* Club: mobile */
@media (max-width:640px) {
    .cl-opts {
        grid-template-columns: 1fr
    }

    .cl-row {
        grid-template-columns: 1fr auto
    }

    .cl-row .cx-step {
        grid-column: 1/-1;
        justify-self: start
    }

    .cl-p:has([aria-expanded="true"]) {
        height: 30rem
    }

    .cl-stage {
        height: 22rem
    }

    .cl-ordbar {
        flex-direction: column;
        align-items: stretch
    }

    .cl-ordbar .btn {
        width: 100%
    }
}

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

    .cl-p,
    .cl-layer,
    .cl-pd {
        transition: none
    }
}

/* =====================================================================
   PHILLY CHEESESTEAKS PAGE (philly-cheesesteaks.html)
   ===================================================================== */
.ph-s {
    padding: clamp(3.5rem, 8vw, 6.5rem) 0
}

.ph-band {
    background: var(--band)
}

.ph-deep {
    background: var(--deep);
    color: #fff4e8
}

.ph-s.ph-deep {
    padding-bottom: clamp(2rem, 4vw, 3rem)
}

.ph-h {
    max-width: 36rem;
    margin-bottom: 2.2rem
}

.ph-h p {
    font-size: 1.1rem;
    color: var(--text-soft)
}

.ph-band .ph-h p {
    color: var(--text)
}

.ph-deep .ph-h p {
    color: #d8c6d6
}

/* Hero: dark plum with a diagonal photo cut */
.ph-hero {
    background: var(--deep);
    color: #fff4e8;
    overflow: hidden
}

.ph-hero-g {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: stretch;
    min-height: 36rem;
    gap: 0
}

.ph-hero-c {
    padding: clamp(3rem, 7vw, 5.5rem) 3rem clamp(3rem, 7vw, 5.5rem) 0
}

.ph-hero h1 {
    font-size: clamp(2.8rem, 6.6vw, 5.6rem);
    line-height: .98;
    letter-spacing: -.025em
}

.ph-hero .lead {
    max-width: 33rem;
    color: #e6d6e4;
    font-size: 1.12rem
}

.ph-photo {
    margin: 0;
    position: relative;
    margin-inline-end: calc(50% - 50vw);
    min-height: 20rem
}

.ph-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%)
}

.ph-wit {
    border: 1px solid #6b5370;
    padding: 1.1rem 1.2rem;
    margin: 1.6rem 0;
    max-width: 30rem
}

.ph-wit-q {
    font: italic 1.25rem var(--head);
    color: var(--mustard);
    margin-bottom: .6rem
}

.ph-wit .chips {
    margin-bottom: .5rem
}

.ph-hero .chips span {
    color: #b774c1;
    border-color: #6b5370
}

.ph-hero .chips input:checked+span {
    background: var(--mustard);
    color: var(--ink);
    border-color: var(--mustard)
}

.ph-say {
    margin: .6rem 0 0;
    font-weight: 600;
    min-height: 3em
}

/* Collection */
.ph-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem
}

.ph-card {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 1.4rem;
    align-items: center;
    padding: 1.2rem;
    border: 1px solid var(--border);
    background: var(--surface)
}

.ph-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px 50% 4px 4px
}

.ph-card h3 {
    font-size: 1.5rem
}

.ph-card p {
    color: var(--text-soft);
    margin-bottom: .8rem;
    font-size: .98rem
}

.ph-meters li {
    display: grid;
    grid-template-columns: 3.2rem 1fr;
    align-items: center;
    gap: .6rem;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .3rem
}

.ph-meters i {
    display: block;
    height: 7px;
    width: 100%;
    background: linear-gradient(90deg, var(--tomato) var(--v), var(--border) var(--v))
}

.ph-card .ph-cp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: .9rem 0 0;
    color: var(--text)
}

.ph-cp b {
    font: 600 1.5rem var(--head)
}

.ph-cp .link {
    background: none;
    border: 0;
    cursor: pointer;
    font: 600 .95rem var(--body)
}

/* Melt timeline */
.ph-track {
    height: 8px;
    background: rgba(50, 38, 54, .2);
    margin-bottom: 2rem
}

.ph-track i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--moss);
    transition: width 3.2s linear
}

.ph-track.in i {
    width: 100%
}

.ph-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem
}

.ph-steps time {
    display: inline-block;
    font: 600 2.4rem var(--head);
    border-bottom: 3px solid var(--tomato);
    margin-bottom: .8rem
}

.ph-steps h3 {
    font-size: 1.4rem
}

.ph-steps p {
    margin: 0
}

/* Builder */
.ph-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem
}

.ph-cols fieldset {
    border: 0;
    padding: 0;
    margin: 0
}

.ph-cols legend {
    font: 600 1.4rem var(--head);
    margin-bottom: .8rem
}

.ph-l2 {
    display: block;
    margin: 1.4rem 0 .8rem
}

.ph-sel {
    width: 100%;
    padding: .8rem;
    font: inherit;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px
}

.ph-os {
    display: grid;
    gap: .5rem
}

.ph-o input {
    position: absolute;
    opacity: 0
}

.ph-o span {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: .8rem 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    transition: .2s
}

.ph-o small {
    color: var(--text-soft)
}

.ph-o input:checked+span {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent)
}

.ph-o input:checked+span small {
    color: inherit
}

.ph-o input:focus-visible+span {
    outline: 3px solid var(--hl);
    outline-offset: 2px
}

.ph-spec {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding: 1.2rem 1.5rem;
    background: var(--moss);
    color: #fff;
    box-shadow: var(--shadow)
}

.ph-spec p {
    margin: 0;
    flex: 1;
    min-width: 14rem
}

.ph-spec strong {
    font: 600 2rem var(--head)
}

/* Order */
.ph-ord-g {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 3rem;
    align-items: start
}

.ph-deep .mn-size {
    border-color: #6b5370
}

.ph-deep .mn-size button {
    color: #fff4e8
}

.ph-deep .mn-size button[aria-pressed="true"] {
    background: var(--mustard);
    color: var(--ink)
}

.ph-combo {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    margin-top: 1.6rem;
    padding: 1rem;
    border: 1px solid #6b5370;
    cursor: pointer
}

.ph-combo input {
    margin-top: .4rem;
    accent-color: var(--mustard);
    width: 1.1rem;
    height: 1.1rem
}

.ph-combo span {
    display: grid
}

.ph-combo small {
    color: #d8c6d6
}

.ph-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem 1.4rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #6b5370
}

.ph-rows:first-of-type .ph-row:first-child {
    border-top: 2px solid #fff4e8
}

.ph-row h3 {
    margin: 0;
    font-size: 1.25rem
}

.ph-row strong {
    font: 600 1.25rem var(--head)
}

.ph-deep .cx-step {
    background: transparent;
    border-color: #6b5370
}

.ph-deep .cx-step button,
.ph-deep .cx-step input {
    color: #fff4e8
}

.ph-deep .cx-step button:hover {
    background: #5a3f61
}

.ph-sub {
    font: italic 1.3rem var(--head);
    color: var(--mustard);
    margin: 1.8rem 0 .2rem
}

.ph-ordbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 0
}

.ph-ordbar p {
    margin: 0;
    font-weight: 600
}

.ph-ordbar strong {
    font: 600 2rem var(--head);
    margin-inline-start: .6rem
}

.ph-msg {
    min-height: 1.6em;
    font-weight: 600;
    color: var(--mustard)
}

.ph-msg a {
    text-decoration: underline
}

/* Philly: tablet */
@media (max-width:1100px) {

    .ph-hero-g,
    .ph-ord-g {
        grid-template-columns: 1fr;
        gap: 0
    }

    .ph-hero-c {
        padding-inline: 0
    }

    .ph-ord-g {
        gap: 2rem
    }

    .ph-photo {
        margin-inline: calc(50% - 50vw);
        min-height: 20rem
    }

    .ph-photo img {
        clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%)
    }

    .ph-cards {
        grid-template-columns: 1fr
    }

    .ph-cols {
        grid-template-columns: 1fr 1fr
    }

    .ph-steps {
        gap: 1.4rem
    }
}

/* Philly: mobile */
@media (max-width:640px) {
    .ph-card {
        grid-template-columns: 1fr
    }

    .ph-card img {
        max-width: 14rem
    }

    .ph-cols,
    .ph-steps {
        grid-template-columns: 1fr
    }

    .ph-row {
        grid-template-columns: 1fr auto
    }

    .ph-row .cx-step {
        grid-column: 1/-1;
        justify-self: start
    }

    .ph-ordbar {
        flex-direction: column;
        align-items: stretch
    }

    .ph-spec {
        position: static
    }
}

@media (prefers-reduced-motion:reduce) {
    .ph-track i {
        transition: none
    }
}

/* =====================================================================
   404 PAGE (404.html)
   ===================================================================== */
.nf {
    position: relative;
    background: var(--bg-alt);
    padding: clamp(3rem, 8vw, 6rem) 0 clamp(3.5rem, 9vw, 7rem);
    overflow: hidden;
    text-align: center
}

.nf-in {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center
}

.nf-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0)
}

.nf-num {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(.2rem, 2vw, 1.2rem);
    font: 600 clamp(8rem, 28vw, 17rem)/.8 var(--head);
    letter-spacing: -.04em;
    color: var(--moss);
    font-variation-settings: "opsz" 144
}

.nf-sand {
    height: .9em;
    width: auto;
    cursor: pointer;
    overflow: visible;
    transform: rotate(-4deg);
    transition: transform .3s var(--ease);
    flex: none
}

.nf-sand:hover {
    transform: rotate(3deg) scale(1.04)
}

.nf-bun {
    fill: #e2b06a
}

.nf-meat {
    fill: #7a3f33
}

.nf-cheese {
    fill: var(--mustard)
}

.nf-tom {
    fill: var(--tomato)
}

.nf-let {
    fill: #8ab06a
}

.nf-seed {
    fill: #fff4e8
}

.nf-bites {
    margin: 1.2rem 0 0;
    font-size: .95rem;
    color: var(--text-soft);
    min-height: 1.6em
}

.nf-oops {
    margin: 1.6rem 0 .4rem;
    font: italic 1.5rem var(--head);
    color: var(--tomato)
}

.nf h1 {
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1.05;
    max-width: 20ch
}

.nf-lead {
    max-width: 34rem;
    font-size: 1.15rem;
    color: var(--text-soft)
}

.nf .hero-actions {
    margin-top: .6rem
}

.nf-path {
    margin: 2rem 0 .6rem;
    font-size: .95rem;
    color: var(--text-soft);
    max-width: 100%
}

.nf-path code {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: .1rem .6rem;
    background: var(--surface);
    border: 1px dashed var(--border);
    font-size: .9rem;
    color: var(--text)
}

.nf-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem 1.6rem
}

.nf-links a,
.nf-links .link {
    font-weight: 600;
    color: var(--fern);
    border-bottom: 1px solid transparent;
    background: none;
    border-top: 0;
    border-inline: 0;
    cursor: pointer;
    font-family: var(--body);
    font-size: 1rem
}

.nf-links a:hover,
.nf-links .link:hover {
    border-bottom-color: currentColor
}

.nf-crumb {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 40% 60% 50% 50%;
    background: var(--sage);
    animation: nf-fall 5s ease-in infinite;
    opacity: 0
}

.nf-crumb.c1 {
    inset-inline-start: 34%;
    top: 2%
}

.nf-crumb.c2 {
    inset-inline-start: 58%;
    top: 0;
    animation-delay: 1.4s;
    background: var(--mustard)
}

.nf-crumb.c3 {
    inset-inline-start: 46%;
    top: 4%;
    animation-delay: 2.6s;
    width: 9px;
    height: 9px
}

.nf-crumb.c4 {
    inset-inline-start: 66%;
    top: 6%;
    animation-delay: 3.8s;
    width: 8px;
    height: 8px;
    background: var(--tomato)
}

@keyframes nf-fall {
    0% {
        transform: translateY(0) rotate(0);
        opacity: 0
    }

    15% {
        opacity: 1
    }

    100% {
        transform: translateY(12rem) rotate(200deg);
        opacity: 0
    }
}

.nf-sand.done {
    animation: nf-wob .6s
}

@keyframes nf-wob {
    30% {
        transform: rotate(-10deg)
    }

    60% {
        transform: rotate(6deg)
    }
}

/* 404: tablet and mobile */
@media (max-width:1100px) {

    .nf-crumb.c2,
    .nf-crumb.c4 {
        display: none
    }
}

@media (max-width:640px) {
    .nf .hero-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 20rem
    }

    .nf-oops {
        font-size: 1.25rem
    }

    .nf-num {
        gap: 0
    }
}

@media (prefers-reduced-motion:reduce) {
    .nf-crumb {
        animation: none;
        display: none
    }

    .nf-sand {
        transition: none
    }

    .nf-sand.done {
        animation: none
    }
}

/* =====================================================================
   COMING SOON PAGE (coming-soon.html)
   ===================================================================== */
.cs-s {
    padding: clamp(3.5rem, 8vw, 6rem) 0
}

.cs-h {
    max-width: 34rem;
    margin: 0 auto 2.4rem;
    text-align: center
}

.cs-h p {
    color: var(--text-soft);
    font-size: 1.1rem
}

/* Hero: big countdown + a sandwich that builds as launch nears */
.cs-hero {
    background: var(--deep);
    color: #fff4e8;
    padding: clamp(3rem, 7vw, 5.5rem) 0
}

.cs-hero-g {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 4rem;
    align-items: center
}

.cs-hero h1 {
    font-size: clamp(2.8rem, 7vw, 5.8rem);
    line-height: .98;
    letter-spacing: -.03em
}

.cs-hero .lead {
    color: #e6d6e4;
    max-width: 32rem;
    font-size: 1.15rem
}

.cs-clock {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 2rem 0;
    max-width: 34rem;
    border-block: 2px solid #fff4e8
}

.cs-clock div {
    padding: 1rem .4rem;
    text-align: center;
    border-inline-end: 1px solid #6b5370
}

.cs-clock div:last-child {
    border-inline-end: 0
}

.cs-clock b {
    display: block;
    font: 600 clamp(2.4rem, 6vw, 4rem)/1 var(--head);
    font-variant-numeric: tabular-nums;
    color: var(--mustard)
}

.cs-clock span {
    font-size: .85rem;
    color: #d8c6d6
}

.cs-open {
    font: italic 1.6rem var(--head);
    color: var(--mustard);
    margin: 2rem 0
}

.cs-bt {
    display: flex;
    justify-content: space-between;
    font: italic 1.3rem var(--head);
    margin: 0 0 1rem;
    color: #d8c6d6
}

.cs-bt b {
    font-style: normal;
    color: var(--mustard)
}

.cs-stack {
    display: grid;
    gap: .5rem
}

.cs-stack li {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 1rem;
    align-items: center;
    padding: .8rem 1.1rem;
    border: 2px dashed #6b5370;
    border-radius: 1.4rem .6rem 1.4rem .6rem;
    color: #d8c6d6;
    transition: background .5s, color .5s, border-color .5s
}

.cs-stack li:first-child {
    border-radius: 2.4rem 2.4rem .6rem .6rem
}

.cs-stack li:last-child {
    border-radius: .6rem .6rem 2rem 2rem
}

.cs-stack b {
    font: 600 1.1rem var(--head)
}

.cs-stack span {
    grid-column: 1;
    font-size: .85rem
}

.cs-stack em {
    grid-row: 1/3;
    grid-column: 2;
    font: normal 600 .78rem var(--body);
    padding: .15rem .7rem;
    border: 1px solid currentColor;
    border-radius: 99px
}

.cs-stack li.done {
    background: var(--c);
    color: var(--ink);
    border: 2px solid var(--c)
}

.cs-stack li.done em::after {
    content: "Done"
}

.cs-stack li.now {
    border-style: solid;
    border-color: var(--mustard);
    color: #fff4e8
}

.cs-stack li.now em::after {
    content: "In the works"
}

.cs-stack li.todo em::after {
    content: "Soon"
}

/* Intro */
.cs-intro-g {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 4rem;
    align-items: center
}

.cs-fig {
    margin: 0
}

.cs-fig img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 50% 50% 4px 4px
}

.cs-intro h2 {
    font-size: clamp(2.2rem, 5vw, 3.6rem)
}

.cs-big {
    font: italic clamp(1.3rem, 2.6vw, 1.8rem)/1.35 var(--head);
    color: var(--fern);
    max-width: 34rem
}

.cs-pro {
    margin-top: 1.6rem;
    border-top: 2px solid var(--text)
}

.cs-pro li {
    display: flex;
    gap: 1.1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--border)
}

.cs-pro i {
    font-size: 1.5rem;
    color: var(--tomato);
    width: 2rem;
    margin-top: .3rem
}

.cs-pro h3 {
    margin: 0 0 .15rem;
    font-size: 1.25rem
}

.cs-pro p {
    margin: 0;
    color: var(--text-soft)
}

/* Notify */
.cs-notify {
    background: var(--band)
}

.cs-nbox {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 3rem;
    align-items: center;
    max-width: 62rem;
    margin: 0 auto
}

.cs-nbox h2 {
    font-size: clamp(2.2rem, 5vw, 3.4rem)
}

.cs-nbox p {
    font-size: 1.1rem
}

.cs-notify label,
.cs-notify legend {
    font-weight: 600;
    display: block;
    margin-bottom: .4rem
}

.cs-row {
    display: flex;
    gap: .6rem
}

.cs-row input {
    flex: 1;
    min-width: 0;
    padding: .95rem 1.1rem;
    border: 2px solid var(--moss);
    background: #fff;
    color: var(--ink);
    font: inherit;
    border-radius: 4px
}

.cs-notify fieldset {
    border: 0;
    padding: 0;
    margin: 1.2rem 0 0
}

.cs-msg {
    min-height: 1.6em;
    margin: .9rem 0 0;
    font-weight: 600
}

.cs-msg.bad {
    color: #a2301e
}

/* Social */
.cs-soc {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem
}

.cs-soc a {
    display: grid;
    justify-items: center;
    gap: .3rem;
    padding: 1.8rem .6rem;
    border: 1px solid var(--border);
    background: var(--surface);
    text-align: center;
    transition: background .25s, color .25s, transform .25s var(--ease)
}

.cs-soc a:hover {
    background: var(--moss);
    color: #fff4e8;
    transform: translateY(-4px)
}

.cs-soc i {
    font-size: 1.9rem;
    margin-bottom: .5rem;
    color: var(--tomato)
}

.cs-soc a:hover i {
    color: var(--mustard)
}

.cs-soc b {
    font: 600 1.1rem var(--head)
}

.cs-soc span {
    font-size: .85rem;
    color: var(--text-soft);
    overflow-wrap: anywhere
}

.cs-soc a:hover span {
    color: #d8c6d6
}

/* Final */
.cs-final {
    background: var(--deep);
    color: #fff4e8;
    text-align: center
}

.cs-final h2 {
    font-size: clamp(2.4rem, 6vw, 4.4rem)
}

.cs-final p {
    color: #d8c6d6;
    font-size: 1.15rem
}

/* Coming soon: tablet */
@media (max-width:1100px) {

    .cs-hero-g,
    .cs-intro-g,
    .cs-nbox {
        grid-template-columns: 1fr;
        gap: 2.4rem
    }

    .cs-fig img {
        aspect-ratio: 16/10;
        border-radius: 4px 50% 4px 4px;
        max-width: 34rem
    }

    .cs-soc {
        grid-template-columns: repeat(3, 1fr)
    }
}

/* Coming soon: mobile */
@media (max-width:640px) {
    .cs-row {
        flex-direction: column
    }

    .cs-soc {
        grid-template-columns: 1fr 1fr
    }

    .cs-clock b {
        font-size: 2.1rem
    }

    .cs-final .hero-actions {
        flex-direction: column;
        align-items: stretch
    }
}

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

    .cs-stack li,
    .cs-soc a {
        transition: none
    }
}

/* =====================================================================
   REUBENS & PASTRAMI PAGE (reubens-pastrami.html)
   ===================================================================== */
.rp-s {
    padding: clamp(3.5rem, 8vw, 6.5rem) 0
}

.rp-alt {
    background: var(--bg-alt)
}

.rp-band {
    background: var(--band)
}

.rp-deep {
    background: var(--deep);
    color: #fff4e8
}

.rp-h {
    max-width: 36rem;
    margin-bottom: 2.2rem
}

.rp-h p {
    font-size: 1.1rem;
    color: var(--text-soft)
}

.rp-sub {
    color: #d8c6d6;
    font-size: 1.1rem;
    max-width: 26rem
}

.rp-sel {
    width: 100%;
    padding: .8rem;
    font: inherit;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 1rem
}

.rp-l {
    display: block;
    font: 600 1.25rem var(--head);
    margin: 1.5rem 0 .7rem
}

.rp-l small {
    font: 400 .9rem var(--body);
    color: var(--text-soft);
    margin-inline-start: .4rem
}

/* Hero: headline over a Then/Now slider */
.rp-hero {
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 5.5rem)
}

.rp-hero-t {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 3rem;
    align-items: end;
    margin-bottom: 2.4rem
}

.rp-hero h1 {
    font-size: clamp(2.8rem, 7.5vw, 6.4rem);
    line-height: .95;
    letter-spacing: -.03em
}

.rp-hero .lead {
    color: var(--text-soft);
    font-size: 1.12rem;
    margin-bottom: 1.4rem
}

.rp-cmp {
    position: relative;
    aspect-ratio: 2/1;
    overflow: hidden;
    background: var(--moss);
    user-select: none
}

.rp-cmp img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.rp-then {
    clip-path: inset(0 calc(100% - var(--x)) 0 0)
}

.rp-cap {
    position: absolute;
    bottom: 1rem;
    padding: .4rem .9rem;
    background: rgba(40, 24, 46, .85);
    color: #fff4e8;
    font-weight: 600;
    font-size: .9rem;
    z-index: 2;
    max-width: 46%
}

.rp-cap.l {
    inset-inline-start: 1rem
}

.rp-cap.r {
    inset-inline-end: 1rem
}

.rp-cmp input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ew-resize;
    z-index: 4;
    margin: 0
}

.rp-knob {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--x);
    width: 3px;
    margin-left: -1.5px;
    background: #fff4e8;
    z-index: 3;
    pointer-events: none
}

.rp-knob i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3rem;
    height: 3rem;
    margin: -1.5rem;
    border-radius: 50%;
    background: var(--mustard);
    color: var(--ink);
    display: grid;
    place-items: center;
    box-shadow: var(--shadow)
}

.rp-cmp input:focus-visible~.rp-knob i {
    outline: 3px solid #fff;
    outline-offset: 2px
}

/* Melts: a deck of cards */
.rp-melts-g {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 3rem;
    align-items: center
}

.rp-deep h2 {
    font-size: clamp(2.2rem, 5vw, 3.6rem)
}

.rp-dn {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: 1.6rem
}

.rp-dn span {
    color: #d8c6d6;
    font-weight: 600
}

.rp-deck {
    position: relative;
    height: 25rem
}

.rp-dc {
    position: absolute;
    inset: 0 3.5rem 0 0;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .7);
    transform: translateX(calc(var(--p, 0)*1.2rem)) translateY(calc(var(--p, 0)*-.5rem)) scale(calc(1 - var(--p, 0)*.04));
    transform-origin: left center;
    z-index: calc(10 - var(--p, 0));
    opacity: calc(1 - var(--p, 0)*.22);
    transition: transform .45s var(--ease), opacity .45s
}

.rp-dc img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.rp-dc>div {
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.rp-tag {
    align-self: flex-start;
    background: var(--tomato);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    padding: .15rem .7rem;
    margin: 0 0 .6rem
}

.rp-dc h3 {
    font-size: 1.8rem
}

.rp-dc p {
    color: var(--muted)
}

.rp-dp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .8rem 0 0;
    flex-wrap: wrap
}

.rp-dp b {
    font: 600 1.9rem var(--head);
    color: var(--ink)
}

/* Layers: stacked tabs + flavor bars */
.rp-lay-g {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 3.5rem;
    align-items: center
}

.rp-tabs {
    display: grid;
    gap: .5rem
}

.rp-lt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    padding: 1.1rem 1.4rem;
    border: 0;
    background: var(--c);
    color: var(--ink);
    cursor: pointer;
    text-align: start;
    border-radius: 2.2rem 2.2rem .5rem .5rem;
    transition: transform .3s var(--ease), box-shadow .3s
}

.rp-lt:nth-child(2n) {
    border-radius: .8rem 1.8rem .8rem 1.8rem
}

.rp-lt:last-child {
    border-radius: .5rem .5rem 2.2rem 2.2rem
}

.rp-lt b {
    font: 600 1.4rem var(--head)
}

.rp-lt span {
    font-size: .92rem
}

.rp-lt:nth-child(1) {
    color: #fff4e8
}

.rp-lt[aria-selected="true"] {
    transform: translateX(1.2rem);
    box-shadow: 0 12px 24px -14px rgba(50, 38, 54, .7);
    outline: 3px solid var(--moss);
    outline-offset: 2px
}

.rp-pk {
    font: italic 1.3rem var(--head);
    color: var(--tomato);
    margin: 0
}

.rp-panel h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem)
}

.rp-panel>p {
    font-size: 1.08rem
}

.rp-bars {
    margin: 1.4rem 0
}

.rp-bars li {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    align-items: center;
    gap: 1rem;
    margin-bottom: .6rem;
    font-weight: 600
}

.rp-bars i {
    display: block;
    height: 10px;
    background: linear-gradient(90deg, var(--moss) var(--v, 0%), rgba(50, 38, 54, .18) var(--v, 0%));
    transition: background .4s
}

.rp-pair {
    font-weight: 600
}

/* Custom */
.rp-cust,
.rp-combo {
    display: grid;
    grid-template-columns: 1.4fr .8fr;
    gap: 3rem;
    align-items: start
}

.rp-ts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem
}

.rp-t input,
.rp-cc input {
    position: absolute;
    opacity: 0
}

.rp-t span {
    display: grid;
    gap: .1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    transition: .2s;
    position: relative
}

.rp-t small {
    color: var(--text-soft);
    font-size: .85rem
}

.rp-t input:checked+span {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent)
}

.rp-t input:checked+span small {
    color: inherit
}

.rp-t input:checked+span::after {
    content: "\2713";
    position: absolute;
    top: .5rem;
    inset-inline-end: .7rem;
    font-weight: 700
}

.rp-t input:focus-visible+span,
.rp-cc input:focus-visible+span {
    outline: 3px solid var(--hl);
    outline-offset: 2px
}

#rpHeat {
    width: 100%;
    accent-color: var(--tomato);
    height: 2rem
}

.rp-spec {
    position: sticky;
    top: calc(var(--hdr) + 1rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 6px solid var(--tomato);
    padding: 1.6rem
}

.rp-spec p {
    margin: .4rem 0
}

.rp-spec-p {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 600;
    margin: 1rem 0 !important
}

.rp-spec-p strong {
    font: 600 2.2rem var(--head)
}

.rp-spec .btn {
    width: 100%
}

/* Combo */
.rp-combo fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 1.4rem
}

.rp-combo legend {
    font: 600 1.25rem var(--head);
    margin-bottom: .7rem
}

.rp-ccs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .7rem
}

.rp-cc span {
    display: grid;
    gap: .3rem;
    height: 100%;
    padding: 1.2rem;
    border: 2px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    transition: .2s
}

.rp-cc b {
    font: 600 1.3rem var(--head)
}

.rp-cc small {
    color: var(--text-soft)
}

.rp-cc em {
    font: normal 600 1.1rem var(--head);
    color: var(--tomato)
}

.rp-cc input:checked+span {
    border-color: var(--moss);
    background: var(--moss);
    color: #fff4e8
}

.rp-cc input:checked+span small {
    color: #d8c6d6
}

.rp-cc input:checked+span em {
    color: var(--mustard)
}

.rp-sels label {
    display: block;
    font-weight: 600;
    margin-bottom: .3rem
}

.rp-spec li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px dashed var(--border);
    font-size: .97rem
}

.rp-spec li small {
    display: block;
    color: var(--text-soft)
}

.rp-qty {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    font-weight: 600
}

.rp-msg {
    min-height: 1.5em;
    margin: .8rem 0 0 !important;
    font-weight: 600;
    color: var(--fern)
}

.rp-msg a {
    text-decoration: underline
}

/* Reubens: tablet */
@media (max-width:1100px) {

    .rp-hero-t,
    .rp-melts-g,
    .rp-lay-g,
    .rp-cust,
    .rp-combo {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .rp-spec {
        position: static
    }

    .rp-cmp {
        aspect-ratio: 16/9
    }

    .rp-lt[aria-selected="true"] {
        transform: translateX(.6rem)
    }
}

/* Reubens: mobile */
@media (max-width:640px) {
    .rp-cmp {
        aspect-ratio: 4/3
    }

    .rp-cap {
        font-size: .75rem;
        bottom: .5rem;
        max-width: 44%
    }

    .rp-deck {
        height: 32rem
    }

    .rp-dc {
        inset: 0 1.6rem 0 0;
        grid-template-columns: 1fr;
        grid-template-rows: 11rem 1fr
    }

    .rp-dc>div {
        padding: 1.2rem
    }

    .rp-dc h3 {
        font-size: 1.5rem
    }

    .rp-ts,
    .rp-ccs {
        grid-template-columns: 1fr 1fr
    }

    .rp-ccs {
        grid-template-columns: 1fr
    }
}

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

    .rp-dc,
    .rp-lt,
    .rp-bars i {
        transition: none
    }
}

/* =====================================================================
   REUBENS & PASTRAMI, v2 (reubens-pastrami.html)
   ===================================================================== */
@property --c1 {
    syntax: '<color>';
    inherits: true;
    initial-value: #d98a90
}

@property --c2 {
    syntax: '<color>';
    inherits: true;
    initial-value: #b95f69
}

@property --p {
    syntax: '<number>';
    inherits: false;
    initial-value: 0
}

.rb-s {
    padding: clamp(3.5rem, 8vw, 7rem) 0;
    position: relative
}

.rb-no {
    font: 600 clamp(4rem, 11vw, 8rem)/.8 var(--head);
    color: transparent;
    -webkit-text-stroke: 1.5px var(--fern);
    margin: 0 0 .5rem;
    letter-spacing: -.04em;
    font-variation-settings: "opsz" 144
}

.rb-head {
    max-width: 40rem;
    margin-bottom: clamp(2rem, 4vw, 3rem)
}

.rb-head h2,
.rb-ing-side h2 {
    font-size: clamp(2.3rem, 5.5vw, 4.2rem);
    letter-spacing: -.025em
}

.rb-head p:not(.rb-no),
.rb-sub {
    font-size: 1.12rem;
    color: var(--text-soft)
}

.rb-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem
}

.rb-filter button {
    padding: .55rem 1.2rem;
    border: 1.5px solid currentColor;
    background: transparent;
    color: inherit;
    font: 600 .92rem var(--body);
    cursor: pointer;
    border-radius: 99px;
    transition: background .2s, color .2s, border-color .2s
}

.rb-filter button:hover {
    border-color: var(--hl)
}

/* 1. Hero: the stack */
.rb-hero {
    background: var(--bg-alt);
    position: relative;
    overflow: hidden;
    padding-top: clamp(2.5rem, 6vw, 5rem)
}

.rb-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(115deg, transparent 0 46px, rgba(118, 81, 125, .07) 46px 47px);
    pointer-events: none
}

.rb-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding-bottom: clamp(3rem, 6vw, 5rem)
}

.rb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    margin: 0;
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--fern)
}

.rb-eyebrow::before {
    content: "";
    width: 2.6rem;
    height: 2px;
    background: var(--hl)
}

.rb-hero h1 {
    font-size: clamp(3.3rem, 9.5vw, 7.4rem);
    line-height: .9;
    letter-spacing: -.035em;
    margin: 1rem 0 1.4rem
}

.rb-hero h1 em {
    display: block;
    font-weight: 400;
    color: var(--tomato)
}

.rb-lead {
    font-size: 1.18rem;
    color: var(--text-soft);
    max-width: 31rem
}

.rb-hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: 1.8rem 0 2.2rem
}

.rb-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0
}

.rb-stats div {
    padding: .2rem 1.6rem;
    border-inline-start: 2px solid var(--hl)
}

.rb-stats div:first-child {
    padding-inline-start: 1rem
}

.rb-stats dt {
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-soft)
}

.rb-stats dd {
    margin: 0;
    font: 600 1.7rem var(--head)
}

.rb-tower-wrap {
    position: relative;
    max-width: 30rem;
    width: 100%;
    margin-inline: auto
}

.rb-tower {
    --gap: 5px;
    --dir: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    padding-top: 3.6rem;
    transition: gap .55s var(--ease)
}

.rb-tower.is-open {
    --gap: 20px
}

.rb-pick {
    position: absolute;
    top: 0;
    inset-inline-start: 58%;
    width: 3px;
    height: 6.4rem;
    background: #8a6a3a;
    border-radius: 3px;
    z-index: 3;
    pointer-events: none
}

.rb-pick::before {
    content: "";
    position: absolute;
    top: -.1rem;
    inset-inline-start: -.5rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: #7a8a3a;
    box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .18)
}

.rb-slab {
    position: relative;
    width: var(--w);
    max-width: 100%;
    height: var(--h);
    border: 0;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    font: 600 1rem var(--body);
    color: var(--fg, #2c1b30);
    background: var(--bg-c);
    border-radius: var(--r);
    box-shadow: 0 10px 18px -12px rgba(30, 15, 34, .55), inset 0 -5px 0 rgba(0, 0, 0, .08);
    opacity: 0;
    translate: 0 -46px;
    transition: translate .65s var(--ease) var(--d, 0s), opacity .5s var(--d, 0s), transform .3s var(--ease), filter .2s
}

.rb-slab small {
    font-weight: 500;
    font-size: .8rem;
    opacity: .85;
    text-align: end
}

.rb-tower.in .rb-slab {
    opacity: 1;
    translate: 0 0
}

.rb-slab:hover,
.rb-slab:focus-visible,
.rb-slab[aria-pressed="true"] {
    transform: translateX(calc(var(--dir)*.9rem));
    filter: brightness(1.07)
}

.rb-slab[aria-pressed="true"] {
    outline: 3px solid var(--hl);
    outline-offset: 3px
}

.rb-rye-t {
    --w: 88%;
    --h: 84px;
    --r: 90px 90px 16px 16px/84px 84px 16px 16px;
    --bg-c: #c99a68;
    background: radial-gradient(circle at 14% 36%, rgba(70, 40, 20, .55) 0 2px, transparent 3px) 0 0/58px 34px, radial-gradient(circle at 60% 62%, rgba(70, 40, 20, .5) 0 2px, transparent 3px) 0 0/72px 40px, linear-gradient(180deg, #d8ab78, #bf8d58)
}

.rb-dress {
    --w: 80%;
    --h: 30px;
    --r: 16px;
    --bg-c: #d9795f;
    --fg: #fff;
    font-size: .9rem
}

.rb-kraut {
    --w: 94%;
    --h: 46px;
    --r: 30px 24px 36px 22px;
    --bg-c: #d9dba3;
    background: repeating-linear-gradient(100deg, #e2e4b2 0 9px, #cbd08f 9px 14px)
}

.rb-swiss {
    --w: 86%;
    --h: 38px;
    --r: 8px;
    --bg-c: #f2c765;
    background: radial-gradient(circle at 24% 52%, rgba(120, 70, 0, .22) 0 6px, transparent 7px), radial-gradient(circle at 70% 40%, rgba(120, 70, 0, .2) 0 5px, transparent 6px), #f4cd70
}

.rb-meat {
    --w: 97%;
    --h: 78px;
    --r: 14px 14px 26px 26px;
    --bg-c: #8a3d3f;
    --fg: #fff4e8;
    background: repeating-linear-gradient(98deg, rgba(255, 225, 205, .18) 0 6px, transparent 6px 22px), linear-gradient(180deg, #9a4546, #6d2c33)
}

.rb-rye-b {
    --w: 88%;
    --h: 54px;
    --r: 16px 16px 44px 44px;
    --bg-c: #c99a68;
    background: linear-gradient(180deg, #c79762, #b3814f)
}

.rb-tower-ui {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.6rem
}

.rb-tnote {
    flex: 1 1 14rem;
    margin: 0;
    min-height: 3.6em;
    font-size: 1rem;
    color: var(--text-soft)
}

.rb-pull {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem 1.1rem;
    border: 1.5px solid var(--accent);
    background: transparent;
    color: var(--text);
    font: 600 .92rem var(--body);
    cursor: pointer;
    border-radius: 4px;
    transition: background .2s, color .2s
}

.rb-pull:hover,
.rb-pull[aria-pressed="true"] {
    background: var(--accent);
    color: var(--accent-ink)
}

.rb-ticker {
    position: relative;
    background: var(--moss);
    color: #fff4e8;
    overflow: hidden;
    white-space: nowrap
}

.rb-track {
    display: flex;
    width: max-content;
    animation: rb-slide 34s linear infinite
}

.rb-track span {
    padding: 1rem 1.8rem;
    font: italic 1.15rem var(--head)
}

.rb-track span::after {
    content: "\2726";
    margin-inline-start: 3.6rem;
    color: var(--mustard);
    font-style: normal
}

@keyframes rb-slide {
    to {
        transform: translateX(-50%)
    }
}

/* 2. The Reuben Room */
.rb-room {
    background: var(--moss);
    color: #fff4e8;
    --fern: #d1a1d8
}

.rb-room .rb-head p:not(.rb-no) {
    color: #d8c6d6
}

.rb-room .rb-no {
    -webkit-text-stroke-color: var(--mustard)
}

.rb-room .rb-filter {
    margin-bottom: 3rem
}

.rb-room .rb-filter button[aria-pressed="true"] {
    background: var(--mustard);
    border-color: var(--mustard);
    color: #2c1b30
}

.rb-count {
    margin-inline-start: auto;
    color: #d8c6d6;
    font-size: .95rem
}

.rb-doors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
    align-items: start
}

.rb-door {
    display: flex;
    flex-direction: column
}

.rb-door:nth-child(even) {
    margin-top: 3.4rem
}

.rb-door[hidden] {
    display: none
}

.rb-arch {
    position: relative;
    background: rgba(255, 244, 232, .08);
    aspect-ratio: 3/4;
    border-radius: 999px 999px 6px 6px;
    overflow: hidden;
    box-shadow: 0 0 0 6px var(--moss), 0 0 0 8px rgba(255, 244, 232, .35), 0 30px 40px -26px rgba(0, 0, 0, .8)
}

.rb-arch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease)
}

.rb-door:hover .rb-arch img {
    transform: scale(1.06)
}

.rb-door-n {
    position: absolute;
    bottom: .8rem;
    inset-inline-start: 1rem;
    font: 600 2.4rem/1 var(--head);
    color: #fff4e8;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .6)
}

.rb-in {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.4rem 1.2rem;
    background: rgba(32, 18, 38, .95);
    color: #fff4e8;
    transform: translateY(102%);
    transition: transform .45s var(--ease)
}

.rb-door.open .rb-in {
    transform: none
}

.rb-in h4 {
    margin: 0 0 .6rem;
    font: italic 1.2rem var(--head);
    color: var(--mustard)
}

.rb-in li {
    padding: .3rem 0;
    border-bottom: 1px dashed rgba(255, 244, 232, .25);
    font-size: .95rem
}

.rb-door-b {
    padding-top: 1.6rem
}

.rb-door-b h3 {
    font-size: 1.5rem;
    margin-bottom: .4rem
}

.rb-door-b p {
    color: #d8c6d6;
    font-size: .98rem;
    min-height: 4.4em
}

.rb-dots {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: 1rem
}

.rb-dots b {
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-inline-end: .4rem;
    color: #d8c6d6
}

.rb-dots i {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: rgba(255, 244, 232, .2)
}

.rb-dots i.on {
    background: var(--mustard)
}

.rb-door-f {
    display: flex;
    align-items: center;
    gap: .6rem;
    border-top: 1px solid rgba(255, 244, 232, .22);
    padding-top: 1rem
}

.rb-door-f strong {
    font: 600 1.7rem var(--head);
    margin-inline-end: auto
}

.rb-i {
    width: 2.7rem;
    height: 2.7rem;
    display: grid;
    place-items: center;
    border: 1.5px solid rgba(255, 244, 232, .5);
    background: transparent;
    color: #fff4e8;
    cursor: pointer;
    border-radius: 50%;
    transition: transform .3s var(--ease), background .2s
}

.rb-i:hover {
    background: rgba(255, 244, 232, .15)
}

.rb-door.open .rb-i {
    transform: rotate(45deg);
    background: var(--mustard);
    color: #2c1b30;
    border-color: var(--mustard)
}

.rb-add {
    padding: .65rem 1.3rem
}

/* 3. Pastrami Perfection */
.rb-cook-g {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center
}

.rb-cutbox {
    position: relative;
    --bark: 0;
    --slice: 0;
    --steam: 0;
    --t: 12%;
    aspect-ratio: 5/4;
    background: radial-gradient(70% 80% at 50% 40%, #3a2340, #1d1221);
    border-radius: 4px;
    overflow: hidden;
    display: grid;
    place-items: center;
    transition: --c1 .7s, --c2 .7s;
    box-shadow: var(--shadow)
}

.rb-cutbox::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 22%;
    background: linear-gradient(180deg, #2b1a30, #150c18);
    border-top: 3px solid #4a3350
}

.rb-cut {
    position: relative;
    width: 70%;
    height: 42%;
    margin-top: -4%;
    border-radius: 34px 46px 38px 28px/30px 40px 44px 26px;
    background: linear-gradient(160deg, var(--c1), var(--c2));
    box-shadow: 0 22px 24px -12px rgba(0, 0, 0, .65), inset 0 -10px 0 rgba(0, 0, 0, .18);
    overflow: hidden;
    transition: transform .6s var(--ease)
}

.rb-cut span {
    position: absolute;
    inset: 0;
    transition: opacity .6s
}

.rb-fat {
    background: repeating-linear-gradient(100deg, transparent 0 24px, rgba(255, 236, 220, .3) 24px 31px, transparent 31px 56px)
}

.rb-bark {
    opacity: var(--bark);
    background: radial-gradient(circle at 12% 28%, #170d10 0 1.6px, transparent 2.4px) 0 0/21px 19px, radial-gradient(circle at 64% 70%, #170d10 0 1.4px, transparent 2.2px) 0 0/27px 23px, radial-gradient(circle at 40% 14%, #2a1a14 0 1.2px, transparent 2px) 0 0/17px 25px;
    box-shadow: inset 0 0 0 7px rgba(25, 12, 14, calc(var(--bark)*.6))
}

.rb-slices {
    opacity: var(--slice);
    background: repeating-linear-gradient(90deg, transparent 0 9%, rgba(20, 10, 14, .6) 9% calc(9% + 3px))
}

.rb-cutbox[data-st="4"] .rb-cut {
    transform: rotate(-2deg) scaleY(.96)
}

.rb-therm {
    position: absolute;
    inset-block: 14% 24%;
    inset-inline-end: 7%;
    width: 14px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .15)
}

.rb-therm i {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: var(--t);
    border-radius: 99px;
    background: linear-gradient(0deg, var(--hl), var(--tomato));
    transition: height .7s var(--ease)
}

.rb-steam {
    position: absolute;
    top: 8%;
    inset-inline: 25%;
    height: 30%;
    display: flex;
    justify-content: space-around;
    opacity: var(--steam);
    transition: opacity .6s;
    pointer-events: none
}

.rb-steam i {
    width: 14px;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(0deg, rgba(255, 244, 232, .6), transparent);
    filter: blur(5px);
    animation: rb-rise 2.6s ease-in-out infinite
}

.rb-steam i:nth-child(2) {
    animation-delay: .8s
}

.rb-steam i:nth-child(3) {
    animation-delay: 1.5s
}

@keyframes rb-rise {
    0% {
        transform: translateY(40%) scaleX(1);
        opacity: 0
    }

    40% {
        opacity: 1
    }

    100% {
        transform: translateY(-30%) scaleX(2);
        opacity: 0
    }
}

.rb-cap {
    position: absolute;
    bottom: .9rem;
    inset-inline: 1rem;
    margin: 0;
    color: #fff4e8;
    font: italic 1.05rem var(--head);
    text-align: center
}

.rb-sl {
    display: block;
    font: 600 1.25rem var(--head);
    margin-bottom: .8rem
}

#rbStage {
    width: 100%;
    accent-color: var(--tomato);
    height: 2.2rem;
    cursor: pointer
}

.rb-stops {
    display: flex;
    justify-content: space-between;
    gap: .3rem;
    margin: .2rem 0 1.6rem
}

.rb-stops button {
    flex: 1;
    padding: .55rem .2rem;
    border: 0;
    border-bottom: 3px solid var(--border);
    background: transparent;
    color: var(--text-soft);
    font: 600 .95rem var(--body);
    cursor: pointer;
    transition: color .2s, border-color .2s
}

.rb-stops button.on {
    color: var(--text);
    border-color: var(--tomato)
}

.rb-read {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 1.4rem;
    border-block: 1px solid var(--border)
}

.rb-read div {
    padding: 1rem .8rem;
    border-inline-start: 1px solid var(--border)
}

.rb-read div:first-child {
    border-inline-start: 0;
    padding-inline-start: 0
}

.rb-read span {
    display: block;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-soft)
}

.rb-read b {
    font: 600 1.45rem var(--head)
}

.rb-desc {
    font-size: 1.08rem;
    min-height: 5.2em
}

.rb-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: clamp(2.5rem, 5vw, 4rem);
    border-top: 2px solid var(--text)
}

.rb-facts li {
    display: flex;
    gap: 1rem;
    padding: 1.6rem 1.6rem 0;
    border-inline-start: 1px solid var(--border)
}

.rb-facts li:first-child {
    border-inline-start: 0;
    padding-inline-start: 0
}

.rb-facts i {
    flex: none;
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    background: var(--hl);
    color: #2c1b30;
    border-radius: 50% 50% 50% 4px
}

.rb-facts h3 {
    margin-bottom: .2rem
}

.rb-facts p {
    margin: 0;
    color: var(--text-soft);
    font-size: .98rem
}

/* 4. Behind the Stack */
.rb-ing {
    background: var(--bg-alt)
}

.rb-ing-g {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start
}

.rb-ing-side {
    position: sticky;
    top: calc(var(--hdr) + 1.5rem)
}

.rb-filter-s {
    margin: 1.6rem 0 2rem;
    color: var(--text)
}

.rb-filter-s button[aria-pressed="true"] {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent)
}

.rb-ing-fig {
    position: relative;
    margin: 0
}

.rb-ing-fig::before {
    content: "";
    position: absolute;
    inset: 1.1rem -1.1rem -1.1rem 1.1rem;
    border: 2px solid var(--hl);
    z-index: 0
}

.rb-ing-fig img {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 4px
}

.rb-ing-fig figcaption {
    position: relative;
    z-index: 1;
    margin-top: .7rem;
    font: italic 1rem var(--head);
    color: var(--text-soft)
}

.rb-seals {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4rem
}

.rb-seal {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px 4px 4px 60px;
    transition: transform .35s var(--ease), box-shadow .35s
}

.rb-seal:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow)
}

.rb-seal[hidden] {
    display: none
}

.rb-ring {
    --p: 0;
    position: relative;
    flex: none;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: conic-gradient(var(--tomato) calc(var(--p)*1%), var(--border) 0);
    display: grid;
    place-items: center;
    transition: --p 1.5s var(--ease)
}

.rb-seal.in .rb-ring {
    --p: var(--v)
}

.rb-ring span {
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    background: var(--surface);
    display: grid;
    place-content: center;
    text-align: center;
    line-height: 1
}

.rb-ring b {
    font: 600 1.9rem var(--head)
}

.rb-ring small {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-soft)
}

.rb-tag {
    display: inline-block;
    margin-bottom: .5rem;
    padding: .15rem .7rem;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .05em;
    border-radius: 99px
}

.rb-tag.loc {
    background: var(--hl);
    color: #2c1b30
}

.rb-seal-t h3 {
    font-size: 1.4rem;
    margin-bottom: .3rem
}

.rb-seal-t p {
    margin: 0;
    color: var(--text-soft);
    font-size: .98rem
}

/* 5. Deli Combo */
.rb-combo-g {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start
}

.rb-steps fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 2.2rem
}

.rb-steps legend {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 0;
    margin-bottom: 1rem;
    font: 600 1.45rem var(--head)
}

.rb-steps legend span {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    background: var(--tomato);
    color: #fff;
    font: 600 1rem var(--body);
    border-radius: 50% 50% 50% 4px
}

.rb-opts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .8rem
}

.rb-opt {
    position: relative;
    display: block
}

.rb-opt input {
    position: absolute;
    opacity: 0;
    inset: 0
}

.rb-opt span {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .1rem .8rem;
    align-items: baseline;
    height: 100%;
    padding: 1rem 1.2rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .25s var(--ease)
}

.rb-opt span:hover {
    border-color: var(--fern);
    transform: translateY(-2px)
}

.rb-opt b {
    font: 600 1.1rem var(--head)
}

.rb-opt small {
    grid-column: 1;
    color: var(--text-soft);
    font-size: .88rem
}

.rb-opt em {
    grid-column: 2;
    grid-row: 1/3;
    align-self: center;
    font: normal 600 1.05rem var(--head);
    color: var(--tomato)
}

.rb-opt input:checked+span {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink)
}

.rb-opt input:checked+span small {
    color: inherit;
    opacity: .85
}

.rb-opt input:checked+span em {
    color: var(--mustard)
}

.rb-opt input:focus-visible+span {
    outline: 3px solid var(--hl);
    outline-offset: 2px
}

.rb-tray {
    position: sticky;
    top: calc(var(--hdr) + 1rem);
    padding: 1.4rem;
    background: var(--sage);
    color: #322636;
    border-radius: 8px 8px 34px 34px;
    box-shadow: var(--shadow)
}

.rb-tray::before {
    content: "";
    position: absolute;
    top: .6rem;
    inset-inline: 38%;
    height: 6px;
    border-radius: 6px;
    background: rgba(50, 38, 54, .25)
}

.rb-tray-k {
    margin: .6rem 0 .9rem;
    text-align: center;
    font: italic 1.2rem var(--head)
}

.rb-bays {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem
}

.rb-bay {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .9rem;
    background: rgba(50, 38, 54, .1);
    box-shadow: inset 0 3px 8px rgba(50, 38, 54, .22);
    border-radius: 6px
}

.rb-bay.big {
    grid-column: 1/-1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem .8rem
}

.rb-bay i {
    font-size: 1.3rem;
    color: var(--tomato)
}

.rb-bay span {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .75
}

.rb-bay b {
    font: 600 1.05rem var(--head);
    flex: 1 1 100%;
    line-height: 1.2
}

.rb-bay.big b {
    flex: 1 1 auto;
    order: 3
}

.rb-bay em {
    font: normal 600 .95rem var(--body)
}

.rb-save {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin: 1rem 0 .4rem;
    padding: .55rem .9rem;
    border: 1.5px dashed #322636;
    border-radius: 4px;
    font-weight: 600;
    font-size: .95rem
}

.rb-tot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: .6rem 0 .4rem;
    font-weight: 600
}

.rb-tot strong {
    font: 600 2.4rem var(--head)
}

.rb-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: .6rem 0 1.1rem;
    font-weight: 600
}

.rb-step {
    display: inline-flex;
    border: 1.5px solid #322636;
    border-radius: 4px;
    overflow: hidden
}

.rb-step button {
    width: 2.6rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: 600 1.2rem var(--body);
    cursor: pointer
}

.rb-step button:hover {
    background: rgba(50, 38, 54, .14)
}

.rb-step input {
    width: 3rem;
    border: 0;
    border-inline: 1.5px solid #322636;
    background: transparent;
    color: inherit;
    text-align: center;
    font: 600 1rem var(--body);
    /* -moz-appearance: textfield */
}

.rb-step input::-webkit-outer-spin-button,
.rb-step input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.rb-tray .btn {
    width: 100%;
    background: #322636;
    color: #fff
}

.rb-tray .btn:hover {
    background: var(--fern)
}

.rb-msg {
    min-height: 1.5em;
    margin: .8rem 0 0;
    text-align: center;
    font-weight: 600;
    font-size: .95rem
}

.rb-msg a {
    text-decoration: underline
}

.rb-toast {
    position: fixed;
    inset-inline: 0;
    bottom: 1.2rem;
    margin-inline: auto;
    width: max-content;
    max-width: 90%;
    background: var(--accent);
    color: var(--accent-ink);
    padding: .8rem 1.4rem;
    z-index: 120;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: .3s var(--ease);
    box-shadow: var(--shadow);
    border-radius: 4px
}

.rb-toast.show {
    opacity: 1;
    transform: none
}

/* Reubens & Pastrami v2: tablet */
@media (max-width:1100px) {

    .rb-hero-grid,
    .rb-cook-g,
    .rb-ing-g,
    .rb-combo-g {
        grid-template-columns: 1fr
    }

    .rb-hero-grid {
        gap: 3rem
    }

    .rb-doors {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.4rem 1.6rem
    }

    .rb-door:nth-child(even) {
        margin-top: 2.4rem
    }

    .rb-ing-side {
        position: static
    }

    .rb-ing-fig {
        display: none
    }

    .rb-tray {
        position: static;
        max-width: 34rem
    }

    .rb-facts li {
        padding-inline: 1rem
    }
}

/* Reubens & Pastrami v2: mobile */
@media (max-width:640px) {
    .rb-hero h1 {
        font-size: clamp(3rem, 16vw, 4.4rem)
    }

    .rb-stats div {
        padding-inline: 1rem
    }

    .rb-slab {
        padding-inline: 1rem;
        font-size: .9rem
    }

    .rb-slab small {
        font-size: .72rem
    }

    .rb-rye-t {
        --h: 70px
    }

    .rb-meat {
        --h: 64px
    }

    .rb-doors {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        gap: 1.4rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: .5rem .4rem 1.4rem;
        margin-inline: -1.25rem;
        padding-inline: 1.25rem;
        scrollbar-width: thin
    }

    .rb-door {
        scroll-snap-align: center
    }

    .rb-door:nth-child(even) {
        margin-top: 0
    }

    .rb-door-b p {
        min-height: 0
    }

    .rb-count {
        margin-inline-start: 0;
        flex: 1 1 100%
    }

    .rb-cutbox {
        aspect-ratio: 1/1
    }

    .rb-cut {
        width: 76%;
        height: 36%
    }

    .rb-read {
        grid-template-columns: 1fr 1fr 1fr
    }

    .rb-read b {
        font-size: 1.1rem
    }

    .rb-read div {
        padding-inline: .5rem
    }

    .rb-desc {
        min-height: 0
    }

    .rb-facts {
        grid-template-columns: 1fr
    }

    .rb-facts li,
    .rb-facts li:first-child {
        border-inline-start: 0;
        padding: 1.4rem 0 0
    }

    .rb-seals {
        grid-template-columns: 1fr
    }

    .rb-seal {
        flex-direction: row;
        align-items: center;
        border-radius: 4px 4px 4px 36px
    }

    .rb-ring {
        width: 5.6rem;
        height: 5.6rem
    }

    .rb-ring span {
        width: 4.5rem;
        height: 4.5rem
    }

    .rb-ring b {
        font-size: 1.5rem
    }

    .rb-opts {
        grid-template-columns: 1fr
    }

    .rb-tray {
        max-width: none
    }
}

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

    .rb-track,
    .rb-steam i {
        animation: none
    }

    .rb-slab,
    .rb-arch img,
    .rb-in,
    .rb-cut,
    .rb-therm i,
    .rb-ring,
    .rb-seal,
    .rb-tower {
        transition: none
    }

    .rb-slab {
        opacity: 1;
        translate: none
    }
}

/* =====================================================================
   BLT & GRILLED PANINIS PAGE (blt-paninis.html)
   ===================================================================== */
.bp-sec{padding:clamp(4rem,9vw,7rem) 0;position:relative}
.bp-head{max-width:46rem;margin-bottom:clamp(2rem,5vw,3.2rem)}
.bp-head p:not(.bp-num){color:var(--text-soft);font-size:1.1rem}
.bp-num{display:inline-flex;align-items:center;gap:.7rem;margin:0 0 1rem;font:600 .82rem var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--fern)}
.bp-num::before{content:"";width:2.4rem;height:2px;background:var(--hl)}
.bp-add{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;border:2px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer;display:grid;place-items:center;transition:background .25s,color .25s,transform .25s var(--ease)}
.bp-add:hover{background:var(--accent);color:var(--accent-ink);transform:rotate(90deg)}
.bp-add:active{transform:scale(.92)}

/* 1 Hero */
.bp-hero{position:relative;overflow:hidden;background:var(--moss);color:#fff4e8;padding:clamp(3rem,7vw,5.5rem) 0 clamp(6rem,11vw,9rem)}
.bp-hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-58deg,transparent 0 38px,rgba(255,244,232,.055) 38px 42px)}
.bp-hero::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:clamp(2.5rem,6vw,5rem);background:var(--bg);clip-path:polygon(0 100%,100% 100%,100% 0)}
.bp-hero-g{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.bp-eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.3rem;font-weight:600;font-size:.95rem;color:var(--sage)}
.bp-eyebrow i{color:var(--mustard)}
.bp-hero h1{font-size:clamp(3.1rem,7.6vw,6.2rem);line-height:.96;margin-bottom:1.4rem}
.bp-hero h1 em{display:block;font-weight:400;color:var(--mustard)}
.bp-hero h1 span{display:block;margin-top:1.2rem;font:600 clamp(.9rem,1.8vw,1.15rem) var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--sage)}
.bp-lead{max-width:34rem;font-size:1.15rem;color:rgba(255,244,232,.84)}
.bp-hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin:1.8rem 0 0}
.bp-gauges{display:flex;margin:2.4rem 0 0;border-top:1px solid rgba(255,244,232,.22);max-width:34rem}
.bp-gauges div{flex:1;padding:1rem 1rem 0 0;padding-inline:0 1rem}
.bp-gauges dt{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.bp-gauges dd{margin:.2rem 0 0;font:600 clamp(1.3rem,2.6vw,1.8rem) var(--head);color:var(--mustard)}
.bp-hero-fig{position:relative;margin:0;padding:0 0 2.2rem}
.bp-plate{position:relative;overflow:hidden;aspect-ratio:5/4;border:6px solid #fff4e8;border-radius:30px;border-end-start-radius:120px;transform:rotate(2deg);background:#fff4e8;box-shadow:0 40px 60px -30px rgba(0,0,0,.7)}
.bp-plate img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .8s}
.bp-sear{position:absolute;inset:0;background:repeating-linear-gradient(-58deg,transparent 0 28px,rgba(35,18,10,.5) 28px 36px);mix-blend-mode:multiply;opacity:0;transition:opacity .9s var(--ease)}
.bp-lid{position:absolute;inset-inline:0;top:0;height:2.4rem;background:repeating-linear-gradient(90deg,#2b1c30 0 14px,#432d49 14px 18px);transform:translateY(-100%);transition:transform .55s var(--ease)}
.bp-hero-fig.is-pressed .bp-sear{opacity:1}
.bp-hero-fig.is-pressed .bp-lid{transform:none}
.bp-hero-fig.is-pressed .bp-plate img{transform:scale(1.04);filter:saturate(1.15) contrast(1.05)}
.bp-temp{position:absolute;inset-inline-start:-1.2rem;bottom:0;display:flex;align-items:center;gap:1rem;padding:.7rem .8rem .7rem .7rem;background:var(--mustard);color:var(--ink);border-radius:4px;box-shadow:var(--shadow)}
.bp-heat{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border:0;border-radius:4px;background:var(--moss);color:#fff;font:600 .95rem var(--body);cursor:pointer;transition:background .25s}
.bp-heat:hover,.bp-heat[aria-pressed="true"]{background:var(--tomato)}
.bp-read{margin:0;line-height:1.1;font:600 1.5rem var(--head)}
.bp-read small{display:block;font:500 .72rem var(--body);letter-spacing:.1em;text-transform:uppercase}
.bp-read b{font-weight:600}

/* 2 Menu board */
.bp-filter{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:2rem}
.bp-filter button{padding:.55rem 1.1rem;border:1.5px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:600 .92rem var(--body);cursor:pointer;transition:.2s}
.bp-filter button:hover{border-color:var(--fern)}
.bp-filter button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.bp-count{margin-inline-start:auto;font-size:.92rem;color:var(--text-soft)}
.bp-board{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.bp-row{display:flex;align-items:center;gap:.6rem;border-bottom:1px dashed var(--border);border-inline-start:4px solid transparent;transition:background .25s,border-color .25s}
.bp-row[hidden]{display:none}
.bp-row.on{background:var(--bg-alt);border-inline-start-color:var(--hl)}
.bp-pick{flex:1;min-width:0;display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1rem;align-items:center;padding:1rem .6rem 1rem 1rem;padding-inline:1rem .4rem;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.bp-pick img{width:5.5rem;height:5.5rem;object-fit:cover;border-radius:16px 4px 16px 4px}
.bp-nm{display:flex;align-items:baseline;gap:.6rem}
.bp-h{font:600 1.25rem/1.2 var(--head)}
.bp-ld{flex:1;min-width:1rem;border-bottom:2px dotted var(--border);transform:translateY(-.25rem)}
.bp-pr{font:600 1.2rem var(--head);color:var(--fern)}
.bp-ds{display:block;margin-top:.25rem;font-size:.96rem;line-height:1.45;color:var(--text-soft)}
.bp-row .bp-add{margin-inline-end:.8rem}
.bp-feature{position:sticky;top:calc(var(--hdr) + 1.5rem);overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:4px;box-shadow:var(--shadow)}
.bp-feature img{width:100%;aspect-ratio:5/4;object-fit:cover}
.bp-fade{animation:bp-fade .5s var(--ease)}
@keyframes bp-fade{from{opacity:.2;transform:scale(1.03)}to{opacity:1;transform:none}}
.bp-fb{padding:1.5rem 1.6rem 1.7rem}
.bp-tag{display:inline-block;margin:0 0 .7rem;padding:.2rem .7rem;background:var(--mustard);color:var(--ink);font:600 .75rem var(--body);letter-spacing:.08em;text-transform:uppercase;border-radius:2px}
.bp-fb h3{font-size:1.9rem}
.bp-fb p:not(.bp-tag){color:var(--text-soft)}
.bp-heatrow{display:flex;align-items:center;gap:.7rem;margin:.4rem 0 1.4rem;font-size:.9rem;font-weight:600}
.bp-fl{display:inline-flex;gap:.25rem;color:var(--border)}
.bp-fl i.on{color:var(--tomato)}
.bp-ffoot{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.2rem;border-top:1px solid var(--border)}
.bp-ffoot strong{font:600 2rem var(--head);color:var(--fern)}

/* 3 Builder */
.bp-build{background:var(--bg-alt)}
.bp-build-g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.bp-xs{position:sticky;top:calc(var(--hdr) + 1.5rem);margin:0;padding:1.6rem 1.4rem 1.5rem;background:var(--moss);color:#fff4e8;border-radius:4px;box-shadow:var(--shadow);overflow:hidden}
.bp-xs::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-58deg,transparent 0 30px,rgba(255,244,232,.05) 30px 33px);pointer-events:none}
.bp-svg{position:relative;display:block;width:100%;height:auto}
.bp-svg rect,.bp-svg path,.bp-svg ellipse{transition:fill .4s,stroke .4s}
.bp-tops ellipse{opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center;transition:opacity .35s,transform .45s var(--ease),fill .35s}
.bp-tops ellipse.on{opacity:1;transform:none}
.bp-xs figcaption{position:relative;text-align:center;margin-top:.6rem}
.bp-xs-k{margin:0;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
.bp-xs-t{margin:.4rem 0;min-height:2.9em;font-size:.98rem;line-height:1.45}
.bp-xs-p{margin:0;font:600 2.2rem var(--head);color:var(--mustard)}
.bp-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:1.6rem;border-bottom:2px solid var(--border)}
.bp-steps button{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.7rem .3rem .9rem;margin-bottom:-2px;border:0;border-bottom:3px solid transparent;background:none;color:var(--text-soft);font:600 .9rem var(--body);cursor:pointer;transition:color .2s,border-color .2s}
.bp-steps button i{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;border:2px solid currentColor;font:600 .85rem var(--body);font-style:normal}
.bp-steps button[aria-selected="true"]{color:var(--fern);border-bottom-color:var(--hl)}
.bp-steps button[aria-selected="true"] i{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.bp-pane{min-width:0;margin:0;padding:0;border:0}
.bp-pane[hidden]{display:none}
.bp-pane legend{padding:0;margin-bottom:.2rem;font:600 1.7rem var(--head)}
.bp-sub{margin:0 0 1.2rem;color:var(--text-soft)}
.bp-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.bp-opt{position:relative;display:block}
.bp-opt input{position:absolute;opacity:0;inset:0}
.bp-opt span{position:relative;display:flex;flex-direction:column;gap:.1rem;min-height:4.7rem;padding:.9rem 1rem .9rem 3.1rem;padding-inline:3.1rem 1rem;background:var(--surface);border:1.5px solid var(--border);border-radius:4px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.bp-opt span::before{content:"";position:absolute;inset-inline-start:.9rem;top:1rem;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--sw);border:2px solid rgba(50,38,54,.28)}
.bp-opt b{font-size:1rem;padding-inline-end:3.4rem}
.bp-opt em{font-style:normal;font-size:.85rem;opacity:.8}
.bp-opt small{position:absolute;inset-inline-end:.9rem;top:.95rem;font-weight:600;font-size:.8rem}
.bp-opt:hover span{border-color:var(--fern)}
.bp-opt input:checked+span{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.bp-opt input:focus-visible+span{outline:3px solid var(--hl);outline-offset:2px}
.bp-opt input:disabled+span{opacity:.45;cursor:not-allowed}
.bp-hint{margin:1rem 0 0;font-size:.9rem;font-weight:600;color:var(--fern)}
.bp-wnav{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}
.bp-wnav .btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.bp-wnav [hidden]{display:none}
.bp-sum{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:2rem;padding:1.2rem 1.4rem;background:var(--moss);color:#fff4e8;border-radius:4px}
.bp-sum p{margin:0;line-height:1.1}
.bp-sum small{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.bp-sum strong{font:600 2rem var(--head);color:var(--mustard)}

/* 4 Combos & sides */
.bp-combo-list{display:grid;gap:1.8rem}
.bp-combo{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(1.2rem,3vw,2.4rem);align-items:center;padding:clamp(1.4rem,3vw,2rem);background:var(--surface);border:1px solid var(--border);border-radius:4px;box-shadow:var(--shadow)}
.bp-combo.feat{border-color:var(--hl);box-shadow:0 0 0 2px var(--hl),var(--shadow)}
.bp-badge{position:absolute;top:-.8rem;inset-inline-start:1.6rem;padding:.25rem .85rem;background:var(--tomato);color:#fff;font:600 .74rem var(--body);letter-spacing:.1em;text-transform:uppercase;border-radius:2px}
.bp-orb{display:flex;padding-inline-start:1.4rem}
.bp-orb>*{width:4.6rem;height:4.6rem;margin-inline-start:-1.4rem;border-radius:50%;border:4px solid var(--surface);object-fit:cover;background:var(--mustard);color:var(--ink);display:grid;place-items:center;font-size:1.4rem}
.bp-cbody h3{font-size:1.7rem;margin-bottom:.2rem}
.bp-cbody>p{margin:0;color:var(--text-soft)}
.bp-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin-top:1.1rem}
.bp-fields label{display:grid;gap:.3rem;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft)}
.bp-fields select,.bp-pu input,.bp-pu select{width:100%;padding:.6rem .7rem;border:1.5px solid var(--border);border-radius:4px;background:var(--bg);color:var(--text);font:500 .95rem var(--body);text-transform:none;letter-spacing:0}
.bp-fields select:focus,.bp-pu input:focus,.bp-pu select:focus{outline:3px solid var(--hl);outline-offset:1px;border-color:var(--accent)}
.bp-incl{margin:.9rem 0 0;font-size:.92rem;font-weight:600;color:var(--fern)}
.bp-cprice{display:grid;justify-items:end;gap:.3rem;text-align:end}
.bp-cwas{color:var(--text-soft);font-size:.95rem}
.bp-cnow{font:600 2.4rem/1 var(--head);color:var(--fern)}
.bp-csave{padding:.15rem .65rem;background:#dff0e0;color:#2f6b3c;font-size:.8rem;font-weight:600;border-radius:99px}
.bp-cprice .btn{margin-top:.6rem}
.bp-sides{margin-top:clamp(3rem,6vw,4.5rem)}
.bp-sides>h3{display:flex;align-items:center;gap:1rem;font-size:1.6rem}
.bp-sides>h3::after{content:"";flex:1;height:2px;background:var(--border)}
.bp-sg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.bp-sg h4{margin:0 0 .8rem;font:600 .8rem var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--fern)}
.bp-sg ul{display:grid;gap:.7rem}
.bp-side{display:flex;align-items:center;gap:.9rem;padding:.7rem .8rem;background:var(--surface);border:1px solid var(--border);border-radius:4px}
.bp-sth>*{display:grid;place-items:center;width:3.3rem;height:3.3rem;border-radius:12px 4px 12px 4px;object-fit:cover;background:var(--bg-alt);color:var(--fern);font-size:1.2rem}
.bp-stn{flex:1;min-width:0;display:grid;line-height:1.3}
.bp-stn small{font:600 .95rem var(--head);color:var(--fern)}
.bp-side .bp-add{width:2.3rem;height:2.3rem;font-size:.85rem}

/* 5 Favorites + CTA */
.bp-fav{background:var(--bg-alt)}
.bp-fav-g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4rem);align-items:stretch}
.bp-rank li{display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1.2rem 0;border-bottom:1px solid var(--border)}
.bp-rank li:first-child{border-top:1px solid var(--border)}
.bp-rn{font:italic 400 clamp(2.4rem,5vw,3.4rem)/1 var(--head);color:var(--hl)}
.bp-rb{display:block}
.bp-rb b{font:600 1.25rem var(--head)}
.bp-rb small{display:block;margin-top:.35rem;color:var(--text-soft)}
.bp-bar{display:block;height:.55rem;margin-top:.5rem;background:var(--border);border-radius:99px;overflow:hidden}
.bp-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--fern),var(--hl));transition:width 1.2s var(--ease)}
.bp-rank li.in .bp-bar i{width:var(--v)}
.bp-rev{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;min-height:23rem;padding:clamp(1.8rem,4vw,2.6rem);background:var(--moss);color:#fff4e8;border-radius:4px;box-shadow:var(--shadow);overflow:hidden}
.bp-rev::before{content:"\201C";position:absolute;top:-.6rem;inset-inline-start:1.2rem;font:400 9rem/1 var(--head);color:var(--mustard);opacity:.35}
.bp-slide{display:none;margin:0;position:relative}
.bp-slide.on{display:block;animation:bp-fade .6s var(--ease)}
.bp-stars{margin:3rem 0 1rem;color:var(--mustard);letter-spacing:.2rem}
.bp-slide blockquote{margin:0}
.bp-slide blockquote p{font:400 clamp(1.25rem,2.4vw,1.55rem)/1.4 var(--head);font-style:italic}
.bp-slide figcaption{font-weight:600;color:var(--sage)}
.bp-rev-ctl{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.bp-rev-ctl>button{width:2.8rem;height:2.8rem;border-radius:50%;border:2px solid rgba(255,244,232,.5);background:transparent;color:#fff4e8;cursor:pointer;transition:.25s}
.bp-rev-ctl>button:hover{background:var(--mustard);border-color:var(--mustard);color:var(--ink)}
.bp-dots{display:flex;gap:.55rem}
.bp-dots button{width:.8rem;height:.8rem;padding:0;border-radius:50%;border:0;background:rgba(255,244,232,.35);cursor:pointer;transition:.25s}
.bp-dots button[aria-current="true"]{width:2rem;border-radius:99px;background:var(--mustard)}
.bp-final{position:relative;overflow:hidden;padding:clamp(4.5rem,10vw,8rem) 0;background:var(--moss);color:#fff4e8;text-align:center}
.bp-final>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3}
.bp-final::before{content:"";position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(-58deg,transparent 0 38px,rgba(255,244,232,.05) 38px 42px)}
.bp-final-in{position:relative;z-index:2;max-width:44rem}
.bp-final h2{font-size:clamp(2.4rem,6vw,4.4rem)}
.bp-final p{font-size:1.15rem;color:rgba(255,244,232,.84)}
.bp-final-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1.8rem}
.bp-big{padding:1.05rem 2.1rem;font-size:1.1rem}

/* Order drawer + toast */
.bp-dlg{width:min(33rem,100% - 1.5rem);max-height:calc(100dvh - 2rem);padding:0;border:0;border-radius:6px;background:var(--surface);color:var(--text);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.bp-dlg::backdrop{background:rgba(30,18,34,.62)}
.bp-dlg-in{padding:1.6rem}
.bp-dlg-in header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.bp-dlg-in h3{margin:0;font-size:1.7rem}
.bp-x{width:2.5rem;height:2.5rem;border:1px solid var(--border);border-radius:50%;background:none;color:var(--text);cursor:pointer}
.bp-lines{display:grid;gap:.2rem;max-height:14rem;overflow:auto}
.bp-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.8rem;align-items:center;padding:.7rem 0;border-bottom:1px dashed var(--border)}
.bp-ln b{display:block;font-size:.95rem;line-height:1.3}
.bp-ln small{color:var(--text-soft)}
.bp-qty{display:inline-flex;align-items:center;gap:.4rem}
.bp-qty button{width:1.9rem;height:1.9rem;border:1.5px solid var(--border);border-radius:50%;background:none;color:var(--text);cursor:pointer}
.bp-lt{font:600 1rem var(--head);min-width:3.6rem;text-align:end}
.bp-empty{margin:1rem 0;color:var(--text-soft)}
.bp-empty[hidden]{display:none}
.bp-pu{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1.2rem 0}
.bp-pu label{display:grid;gap:.3rem;font-size:.82rem;font-weight:600}
.bp-pu label:last-child{grid-column:1/-1}
.bp-pu input[aria-invalid="true"]{border-color:var(--tomato)}
.bp-tot{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 1rem;padding-top:1rem;border-top:2px solid var(--border);font-weight:600}
.bp-tot strong{font:600 1.9rem var(--head);color:var(--fern)}
.bp-dlg-in>.btn{width:100%}
.bp-dlg-in>.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.bp-msg{margin:.9rem 0 0;font-weight:600;color:var(--fern)}
.bp-msg.bad{color:var(--tomato)}
.bp-toast{position:fixed;inset-inline:0;bottom:1.2rem;margin-inline:auto;width:max-content;max-width:90%;padding:.8rem 1.4rem;background:var(--accent);color:var(--accent-ink);border-radius:4px;box-shadow:var(--shadow);z-index:120;opacity:0;transform:translateY(20px);pointer-events:none;transition:.3s var(--ease)}
.bp-toast.show{opacity:1;transform:none}

/* Paninis page: tablet */
@media (max-width:1100px){
.bp-hero-g,.bp-build-g,.bp-fav-g{grid-template-columns:1fr}
.bp-hero-fig{max-width:36rem;margin-inline:auto;width:100%}
.bp-board{grid-template-columns:1fr}
.bp-feature{display:none}
.bp-xs{position:static;max-width:32rem;margin-inline:auto;width:100%}
.bp-combo{grid-template-columns:auto minmax(0,1fr)}
.bp-cprice{grid-column:1/-1;grid-template-columns:auto auto 1fr auto;align-items:center;justify-items:start;text-align:start;gap:.8rem}
.bp-cprice .btn{margin:0;justify-self:end}
}
@media (max-width:860px){
.bp-combo{grid-template-columns:1fr}
.bp-sg{grid-template-columns:1fr}
}
/* Paninis page: mobile */
@media (max-width:640px){
.bp-hero{padding-bottom:6.5rem}
.bp-hero-cta .btn{flex:1 1 100%}
.bp-gauges dd{font-size:1.15rem}
.bp-temp{inset-inline-start:0;padding-inline-end:.6rem}
.bp-pick{grid-template-columns:4.2rem minmax(0,1fr);gap:.8rem}
.bp-pick img{width:4.2rem;height:4.2rem}
.bp-nm{flex-wrap:wrap;gap:.1rem .6rem}
.bp-ld{display:none}
.bp-nm .bp-pr{margin-inline-start:auto}
.bp-row .bp-add{margin-inline-end:.5rem}
.bp-steps button{font-size:.78rem}
.bp-opts{grid-template-columns:1fr}
.bp-fields{grid-template-columns:1fr}
.bp-cprice{grid-template-columns:1fr 1fr;gap:.4rem .8rem}
.bp-cprice .btn{grid-column:1/-1;justify-self:stretch}
.bp-orb>*{width:3.8rem;height:3.8rem}
.bp-rank li{grid-template-columns:2.4rem minmax(0,1fr) auto;gap:.7rem}
.bp-final-cta .btn{flex:1 1 100%}
.bp-pu{grid-template-columns:1fr}
.bp-line{grid-template-columns:minmax(0,1fr) auto}
.bp-lt{grid-column:2;text-align:end}
}
@media (prefers-reduced-motion:reduce){
.bp-plate img,.bp-sear,.bp-lid,.bp-bar i,.bp-tops ellipse,.bp-add{transition:none}
.bp-slide.on,.bp-fade{animation:none}
}