/* =========================================================
   Bean & Bite — Public Site
   Coffee-house palette derived from the primary mark.
   @import must precede :root for browser CSSOM compliance.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,500;1,700&family=Inter:wght@400;500;600;700&family=Caveat:wght@500;700&display=swap');

:root {
    /* Brand — from logo */
    --bb-red:        #B83E1E;   /* primary brick red (wordmark) */
    --bb-red-deep:   #8E2C12;
    --bb-red-soft:   #D9694A;
    --bb-amber:      #E08E2A;   /* secondary amber (logo plinth) */
    --bb-amber-deep: #B86F1A;
    --bb-amber-soft: #F4C27A;

    /* Coffee-house extensions */
    --bb-espresso:   #2B1810;   /* near-black, dark roast */
    --bb-cocoa:      #4A2A1A;   /* deep brown */
    --bb-mocha:      #6B3D24;   /* milk-coffee mid */
    --bb-crema:      #F8E4C0;   /* foam / latte crema */

    /* Warm neutrals */
    --bb-cream:      #FBF4E8;
    --bb-cream-2:    #F4E8D2;
    --bb-cream-3:    #FFF8EA;
    --bb-paper:      #FFFFFF;
    --bb-ink:        #2A1A10;
    --bb-ink-soft:   #6B5240;
    --bb-line:       #E7D6BB;

    /* Effects */
    --bb-shadow-sm:  0 1px 2px rgba(60, 30, 10, 0.06);
    --bb-shadow:     0 4px 14px rgba(60, 30, 10, 0.10);
    --bb-shadow-lg:  0 22px 50px rgba(60, 30, 10, 0.18);
    --bb-radius:     16px;
    --bb-radius-sm:  10px;

    /* Type */
    --bb-serif:  "Playfair Display", "Cormorant Garamond", "Georgia", "Times New Roman", serif;
    --bb-sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bb-script: "Caveat", "Brush Script MT", cursive;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--bb-sans);
    color: var(--bb-ink);
    background: var(--bb-cream);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--bb-red); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--bb-red-deep); }

h1, h2, h3 {
    font-family: var(--bb-serif);
    font-weight: 700;
    color: var(--bb-red);
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.ps-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.ps-muted     { color: var(--bb-ink-soft); }

/* Tiny script accent ("freshly brewed", etc.) */
.ps-script {
    font-family: var(--bb-script);
    font-weight: 700;
    font-size: 1.5em;
    color: var(--bb-amber-deep);
    line-height: 1;
}

/* Reusable coffee-bean scatter (subtle SVG pattern) */
.ps-bean-bg {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='%234A2A1A' opacity='0.05'><ellipse cx='30' cy='40' rx='10' ry='14' transform='rotate(-25 30 40)'/><path d='M30 26 q-2 14 0 28' stroke='%234A2A1A' stroke-width='1.2' fill='none' opacity='0.5' transform='rotate(-25 30 40)'/><ellipse cx='110' cy='95' rx='9' ry='13' transform='rotate(35 110 95)'/><path d='M110 82 q-2 13 0 26' stroke='%234A2A1A' stroke-width='1.2' fill='none' opacity='0.5' transform='rotate(35 110 95)'/><ellipse cx='75' cy='135' rx='8' ry='12' transform='rotate(-15 75 135)'/><path d='M75 123 q-1.5 12 0 24' stroke='%234A2A1A' stroke-width='1.2' fill='none' opacity='0.5' transform='rotate(-15 75 135)'/></g></svg>");
}

/* =====================  Header  ===================== */
.ps-header {
    background: rgba(251, 244, 232, 0.94);
    backdrop-filter: saturate(150%) blur(10px);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    border-bottom: 1px solid var(--bb-line);
    position: sticky; top: 0; z-index: 50;
}
.ps-header-inner {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 96px;
    padding: 8px 0;
}
.ps-brand {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none;
}
.ps-brand-logo {
    height: 78px;          /* bigger logo for visibility */
    width: auto;
    display: block;
    transition: transform .2s ease;
}
.ps-brand:hover .ps-brand-logo { transform: rotate(-2deg) scale(1.02); }
.ps-brand-text { display: none; }   /* logo carries the wordmark */

@media (max-width: 720px) {
    .ps-header-inner { min-height: 78px; }
    .ps-brand-logo { height: 60px; }
}

.ps-nav { display: flex; gap: 6px; align-items: center; }
.ps-nav a {
    color: var(--bb-ink); font-weight: 600;
    font-size: 14px; letter-spacing: 0.02em;
    padding: 10px 14px; border-radius: 999px;
    transition: background .15s ease, color .15s ease;
}
.ps-nav a:hover { color: var(--bb-red); background: var(--bb-cream-2); text-decoration: none; }
.ps-nav-staff {
    border: 1.5px solid var(--bb-red) !important;
    color: var(--bb-red) !important;
    padding: 9px 16px !important;
}
.ps-nav-staff:hover { background: var(--bb-red) !important; color: #fff !important; }

/* =====================  Hero  ===================== */
.ps-hero {
    position: relative;
    overflow: hidden;
    padding: 96px 0 112px;
    background:
        radial-gradient(900px 400px at 90% 0%, rgba(224, 142, 42, 0.20), transparent 60%),
        radial-gradient(700px 400px at 0% 100%, rgba(184, 62, 30, 0.14), transparent 65%),
        linear-gradient(180deg, var(--bb-cream) 0%, var(--bb-cream-3) 100%);
}
.ps-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='%234A2A1A' opacity='0.045'><ellipse cx='35' cy='40' rx='11' ry='15' transform='rotate(-25 35 40)'/><path d='M35 25 q-2 15 0 30' stroke='%234A2A1A' stroke-width='1.2' fill='none' opacity='0.6' transform='rotate(-25 35 40)'/><ellipse cx='130' cy='110' rx='10' ry='14' transform='rotate(40 130 110)'/><path d='M130 96 q-2 14 0 28' stroke='%234A2A1A' stroke-width='1.2' fill='none' opacity='0.6' transform='rotate(40 130 110)'/><ellipse cx='80' cy='155' rx='9' ry='13' transform='rotate(-15 80 155)'/><path d='M80 142 q-1.5 13 0 26' stroke='%234A2A1A' stroke-width='1.2' fill='none' opacity='0.6' transform='rotate(-15 80 155)'/></g></svg>");
    pointer-events: none;
}

.ps-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
}
@media (max-width: 880px) {
    .ps-hero-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
    .ps-hero { padding: 64px 0 72px; }
}

.ps-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.20em;
    text-transform: uppercase; color: var(--bb-amber-deep);
    background: rgba(224, 142, 42, 0.14);
    padding: 7px 16px; border-radius: 999px;
    margin-bottom: 22px;
}
.ps-hero-eyebrow::before {
    content: "•"; color: var(--bb-red); font-size: 18px; line-height: 0;
}
.ps-hero h1 {
    margin: 0 0 18px;
    font-size: clamp(40px, 6.4vw, 72px);
    color: var(--bb-red);
}
.ps-hero h1 em,
.ps-hero h1 .accent {
    font-style: italic;
    color: var(--bb-amber-deep);
    font-weight: 600;
}
.ps-hero-tagline {
    font-size: clamp(17px, 2.1vw, 21px);
    color: var(--bb-cocoa);
    margin: 0 0 32px;
    max-width: 520px;
}
@media (max-width: 880px) { .ps-hero-tagline { margin-left: auto; margin-right: auto; } }

.ps-hero-cta {
    display: inline-flex; gap: 14px; flex-wrap: wrap;
}
@media (max-width: 880px) { .ps-hero-cta { justify-content: center; } }

.ps-hero-meta {
    display: flex; gap: 28px; flex-wrap: wrap;
    margin-top: 36px;
    font-size: 14px;
    color: var(--bb-mocha);
}
@media (max-width: 880px) { .ps-hero-meta { justify-content: center; } }
.ps-hero-meta strong {
    display: block; color: var(--bb-red);
    font-family: var(--bb-serif);
    font-size: 18px; font-weight: 700;
    margin-bottom: 2px;
}

/* Hero illustration — mug + steam, pure SVG */
.ps-hero-art {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 460px;
    margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
}
.ps-hero-art-disc {
    position: absolute; inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.5), transparent 55%),
        radial-gradient(circle at 70% 70%, rgba(184, 62, 30, 0.45), transparent 60%),
        linear-gradient(135deg, var(--bb-amber) 0%, var(--bb-red) 100%);
    box-shadow: var(--bb-shadow-lg);
}
.ps-hero-art-disc::after {
    content: "";
    position: absolute; inset: 14px;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,0.35);
}
.ps-hero-art svg {
    position: relative;
    width: 70%; height: auto;
    filter: drop-shadow(0 12px 20px rgba(0,0,0,0.18));
}
@keyframes bb-steam {
    0%   { transform: translateY(0)   scale(1)   rotate(0deg);   opacity: 0.0; }
    20%  { opacity: 0.7; }
    100% { transform: translateY(-46px) scale(1.4) rotate(8deg); opacity: 0.0; }
}
.ps-steam-1 { animation: bb-steam 3.2s ease-out infinite; }
.ps-steam-2 { animation: bb-steam 3.2s ease-out 0.6s infinite; }
.ps-steam-3 { animation: bb-steam 3.2s ease-out 1.2s infinite; }

.ps-hero-tag-pill {
    position: absolute;
    background: var(--bb-paper);
    border: 1px solid var(--bb-line);
    box-shadow: var(--bb-shadow);
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bb-cocoa);
    display: inline-flex; align-items: center; gap: 8px;
}
.ps-hero-tag-pill .ps-script {
    font-size: 22px; color: var(--bb-red);
}
.ps-hero-tag-1 { top: 6%;   left: -2%; transform: rotate(-6deg); }
.ps-hero-tag-2 { bottom: 8%; right: -4%; transform: rotate(5deg); }
@media (max-width: 880px) {
    .ps-hero-art { max-width: 320px; }
    .ps-hero-tag-pill { display: none; }
}

/* =====================  Buttons  ===================== */
.ps-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: transform .12s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    line-height: 1;
}
.ps-btn:hover { transform: translateY(-1px); text-decoration: none; }

.ps-btn-primary {
    background: var(--bb-red); color: #fff;
    box-shadow: 0 8px 20px rgba(184, 62, 30, 0.32);
}
.ps-btn-primary:hover { background: var(--bb-red-deep); color: #fff; }

.ps-btn-outline {
    background: transparent; color: var(--bb-red);
    border-color: var(--bb-red);
}
.ps-btn-outline:hover { background: var(--bb-red); color: #fff; }

.ps-btn-amber {
    background: var(--bb-amber); color: #fff;
    box-shadow: 0 8px 20px rgba(224, 142, 42, 0.34);
}
.ps-btn-amber:hover { background: var(--bb-amber-deep); color: #fff; }

/* =====================  Sections  ===================== */
.ps-section { padding: 88px 0; }
@media (max-width: 720px) { .ps-section { padding: 56px 0; } }

.ps-section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 56px;
}
.ps-section-head .ps-script {
    display: block;
    color: var(--bb-amber-deep);
    margin-bottom: 4px;
    font-size: 32px;
}
.ps-section-head h2 {
    font-size: clamp(30px, 4vw, 44px);
    margin: 0 0 14px;
}
.ps-section-head p {
    margin: 0;
    color: var(--bb-cocoa);
    font-size: 17px;
}

/* =====================  Ritual — From bean to cup  ===================== */
.ps-ritual {
    background: var(--bb-espresso);
    color: var(--bb-cream);
    padding: 96px 0;
    position: relative;
    overflow: hidden;
}
.ps-ritual::before {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='%23F4C27A' opacity='0.06'><ellipse cx='35' cy='40' rx='11' ry='15' transform='rotate(-25 35 40)'/><path d='M35 25 q-2 15 0 30' stroke='%23F4C27A' stroke-width='1.2' fill='none' opacity='0.6' transform='rotate(-25 35 40)'/><ellipse cx='130' cy='110' rx='10' ry='14' transform='rotate(40 130 110)'/><path d='M130 96 q-2 14 0 28' stroke='%23F4C27A' stroke-width='1.2' fill='none' opacity='0.6' transform='rotate(40 130 110)'/></g></svg>");
    pointer-events: none;
}
.ps-ritual .ps-section-head h2 { color: var(--bb-crema); }
.ps-ritual .ps-section-head p  { color: rgba(248, 228, 192, 0.75); }
.ps-ritual .ps-section-head .ps-script { color: var(--bb-amber-soft); }

.ps-ritual-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
@media (max-width: 820px) { .ps-ritual-grid { grid-template-columns: 1fr; gap: 28px; } }

.ps-ritual-step {
    text-align: center;
    padding: 8px;
}
.ps-ritual-step-num {
    font-family: var(--bb-script);
    font-size: 56px;
    color: var(--bb-amber);
    line-height: 1;
    margin-bottom: 8px;
}
.ps-ritual-step-icon {
    width: 88px; height: 88px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(244, 194, 122, 0.10);
    border: 1px dashed rgba(244, 194, 122, 0.35);
    display: flex; align-items: center; justify-content: center;
}
.ps-ritual-step-icon svg { width: 46px; height: 46px; color: var(--bb-amber-soft); }
.ps-ritual-step h3 {
    color: var(--bb-crema);
    margin: 0 0 10px;
    font-size: 22px;
}
.ps-ritual-step p {
    margin: 0;
    color: rgba(248, 228, 192, 0.78);
    font-size: 15px;
    max-width: 280px;
    margin-left: auto; margin-right: auto;
}

/* =====================  Signature brews  ===================== */
.ps-brews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
@media (max-width: 820px) { .ps-brews-grid { grid-template-columns: 1fr; } }

.ps-brew-card {
    background: var(--bb-paper);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius);
    padding: 0 0 30px;
    text-align: center;
    box-shadow: var(--bb-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.ps-brew-img {
    height: 200px;
    background-size: cover;
    background-position: center;
    background-color: var(--bb-cream-2);
    margin-bottom: 22px;
}
.ps-brew-img-noimg {
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), transparent 55%),
        linear-gradient(135deg, var(--bb-amber-soft) 0%, var(--bb-red-soft) 100%);
    color: rgba(255,255,255,0.9);
    font-family: var(--bb-serif);
    font-size: 56px; font-weight: 700;
}
.ps-brew-card > .ps-script,
.ps-brew-card > h3,
.ps-brew-card > p { padding-left: 26px; padding-right: 26px; }
.ps-brew-price {
    font-family: var(--bb-serif);
    font-weight: 700;
    color: var(--bb-red);
    font-size: 18px;
    margin-top: auto !important;
    padding-top: 12px;
}
.ps-brew-card::after {
    content: "";
    position: absolute; left: 50%; bottom: 0;
    width: 64px; height: 4px; transform: translateX(-50%);
    background: linear-gradient(90deg, var(--bb-amber), var(--bb-red));
    border-radius: 4px 4px 0 0;
    opacity: 0;
    transition: opacity .18s ease;
}
.ps-brew-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bb-shadow-lg);
    border-color: var(--bb-amber-soft);
}
.ps-brew-card:hover::after { opacity: 1; }

.ps-brew-emoji {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 14px;
    display: block;
}
.ps-brew-card h3 {
    font-size: 22px;
    margin: 0 0 10px;
    color: var(--bb-cocoa);
}
.ps-brew-card .ps-script {
    display: block;
    color: var(--bb-amber-deep);
    font-size: 22px;
    margin-bottom: 4px;
}
.ps-brew-card p {
    color: var(--bb-ink-soft);
    font-size: 14.5px;
    margin: 0;
}

/* =====================  Visit / two-column  ===================== */
.ps-grid-2 {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
}
@media (max-width: 820px) { .ps-grid-2 { grid-template-columns: 1fr; gap: 40px; } }

.ps-grid-2 h2 { margin-top: 0; font-size: clamp(28px, 4vw, 40px); }
.ps-grid-2 p  { font-size: 16.5px; color: var(--bb-cocoa); }
.ps-grid-2 .ps-script { display: block; color: var(--bb-amber-deep); font-size: 30px; margin-bottom: 4px; }

.ps-info-card {
    position: relative;
    background:
        linear-gradient(180deg, #FFFCF5 0%, var(--bb-cream-3) 100%);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius);
    padding: 40px 36px;
    box-shadow: var(--bb-shadow);
    overflow: hidden;
}
.ps-info-card::before {
    content: "";
    position: absolute; top: -50px; right: -50px;
    width: 180px; height: 180px;
    background: var(--bb-amber);
    opacity: 0.14;
    border-radius: 50%;
}
.ps-info-card::after {
    content: "";
    position: absolute; bottom: -60px; left: -40px;
    width: 140px; height: 140px;
    background: var(--bb-red);
    opacity: 0.10;
    border-radius: 50%;
}
.ps-info-card > * { position: relative; }
.ps-info-card h3 { margin: 0 0 18px; color: var(--bb-red); font-size: 26px; }
.ps-info-card p  { margin: 12px 0; }
.ps-info-card strong { color: var(--bb-ink); font-weight: 600; }

/* =====================  CTA band  ===================== */
.ps-cta-band {
    background:
        radial-gradient(700px 300px at 80% 30%, rgba(224, 142, 42, 0.32), transparent 60%),
        var(--bb-red);
    color: #fff;
    padding: 72px 0;
    position: relative;
    overflow: hidden;
}
.ps-cta-band::after {
    content: "";
    position: absolute; right: -120px; bottom: -120px;
    width: 380px; height: 380px;
    background: var(--bb-amber); opacity: 0.20;
    border-radius: 50%;
}
.ps-cta-band-inner {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 24px;
}
.ps-cta-band .ps-script { color: var(--bb-amber-soft); font-size: 30px; display: block; margin-bottom: 4px; }
.ps-cta-band h2 { color: #fff; margin: 0 0 6px; font-size: clamp(26px, 3.6vw, 36px); }
.ps-cta-band p  { margin: 0; color: rgba(255,255,255,0.88); font-size: 16px; }
.ps-cta-band .ps-btn-primary {
    background: var(--bb-amber);
    box-shadow: 0 8px 20px rgba(0,0,0,0.22);
}
.ps-cta-band .ps-btn-primary:hover { background: #fff; color: var(--bb-red); }

/* =====================  Menu page  ===================== */
.ps-page-header {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(224, 142, 42, 0.20), transparent 60%),
        linear-gradient(180deg, var(--bb-cream-3) 0%, var(--bb-cream) 100%);
    border-bottom: 1px solid var(--bb-line);
    padding: 64px 0 56px;
    text-align: center;
}
.ps-page-header h1 {
    margin: 0 0 10px;
    font-size: clamp(36px, 5vw, 56px);
}
.ps-page-header p { margin: 0; font-size: 16px; color: var(--bb-cocoa); }
.ps-page-header .ps-script { display: block; color: var(--bb-amber-deep); font-size: 30px; margin-bottom: 4px; }

.ps-cat-nav {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center;
    padding: 28px 0 0;
}
.ps-cat-nav a {
    background: var(--bb-paper);
    border: 1px solid var(--bb-line);
    color: var(--bb-ink);
    padding: 8px 16px; border-radius: 999px;
    font-size: 13px; font-weight: 600;
    transition: all .15s ease;
}
.ps-cat-nav a:hover {
    background: var(--bb-red); color: #fff; border-color: var(--bb-red);
    text-decoration: none;
}

/* Sticky filter tab bar — sits below the page header */
.ps-cat-tabs {
    position: sticky;
    top: 96px;                          /* clear the sticky site header */
    z-index: 20;
    background: rgba(251, 244, 232, 0.96);
    backdrop-filter: saturate(150%) blur(10px);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    border-bottom: 1px solid var(--bb-line);
    box-shadow: 0 4px 14px rgba(60, 30, 10, 0.04);
}
@media (max-width: 720px) {
    .ps-cat-tabs { top: 78px; }
}
.ps-cat-tabs-inner {
    display: flex; gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 14px 24px;
    scroll-padding: 24px;
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.ps-cat-tabs-inner::-webkit-scrollbar { display: none; }

.ps-cat-tab {
    flex: 0 0 auto;
    background: var(--bb-paper);
    border: 1.5px solid var(--bb-line);
    color: var(--bb-ink);
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
    font-family: inherit;
}
.ps-cat-tab:hover {
    border-color: var(--bb-amber);
    color: var(--bb-red);
}
.ps-cat-tab.is-active {
    background: var(--bb-red);
    border-color: var(--bb-red);
    color: #fff;
    box-shadow: 0 4px 12px rgba(184, 62, 30, 0.28);
}

.ps-category-count {
    margin-left: auto;
    font-family: var(--bb-sans);
    color: var(--bb-ink-soft);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    white-space: nowrap;
}

.ps-cat-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--bb-ink-soft);
    font-size: 16px;
}

.ps-category { margin-bottom: 72px; scroll-margin-top: 110px; }
.ps-category-head {
    display: flex; align-items: baseline; gap: 16px;
    margin: 0 0 28px;
}
.ps-category-head h2 {
    margin: 0;
    font-size: clamp(26px, 3.4vw, 34px);
    color: var(--bb-red);
}
.ps-category-head .ps-rule {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--bb-amber-soft), transparent);
}

.ps-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 26px;
}
.ps-menu-item {
    background: var(--bb-paper);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius);
    overflow: hidden;
    box-shadow: var(--bb-shadow-sm);
    display: flex; flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ps-menu-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--bb-shadow-lg);
    border-color: var(--bb-amber-soft);
}
.ps-menu-item-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    background-color: var(--bb-cream-2);
    display: block;
}
.ps-menu-item-noimg {
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), transparent 55%),
        linear-gradient(135deg, var(--bb-amber-soft) 0%, var(--bb-red-soft) 100%);
    color: rgba(255,255,255,0.88);
    font-family: var(--bb-serif);
    font-size: 44px; font-weight: 700;
}
.ps-menu-item-body {
    padding: 18px 20px 22px;
    display: flex; flex-direction: column; gap: 8px;
    flex: 1;
}
.ps-menu-item-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px;
}
.ps-menu-item h3 {
    margin: 0;
    font-size: 19px;
    color: var(--bb-cocoa);
    font-family: var(--bb-serif);
    font-weight: 700;
}
.ps-price {
    font-weight: 700; color: var(--bb-red);
    white-space: nowrap; font-size: 16px;
    font-variant-numeric: tabular-nums;
}
.ps-menu-item p {
    margin: 0;
    font-size: 14.5px;
    color: var(--bb-ink-soft);
    line-height: 1.55;
}
.ps-empty {
    text-align: center;
    padding: 72px 24px;
    color: var(--bb-ink-soft);
    font-size: 17px;
}

/* =====================  Contact page  ===================== */
.ps-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
    align-items: stretch;
}
@media (max-width: 880px) {
    .ps-contact-grid { grid-template-columns: 1fr; }
}

.ps-contact-card {
    background:
        linear-gradient(180deg, #FFFCF5 0%, var(--bb-cream-3) 100%);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius);
    padding: 36px 32px;
    box-shadow: var(--bb-shadow);
    position: relative;
    overflow: hidden;
}
.ps-contact-card::before {
    content: "";
    position: absolute; top: -60px; right: -60px;
    width: 200px; height: 200px;
    background: var(--bb-amber); opacity: 0.10;
    border-radius: 50%;
    pointer-events: none;
}
.ps-contact-card > * { position: relative; }
.ps-contact-card h2 {
    margin: 0 0 24px;
    font-size: clamp(24px, 3vw, 30px);
    color: var(--bb-red);
}

.ps-contact-row {
    display: flex; gap: 16px;
    margin-bottom: 24px;
    align-items: flex-start;
}
.ps-contact-row:last-of-type { margin-bottom: 0; }

.ps-contact-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--bb-amber) 0%, var(--bb-red) 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(184, 62, 30, 0.20);
}
.ps-contact-row strong {
    display: block;
    color: var(--bb-cocoa);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-bottom: 4px;
    font-weight: 700;
}
.ps-contact-row p {
    margin: 0;
    color: var(--bb-ink);
    font-size: 16px;
    line-height: 1.55;
}
.ps-contact-row a { color: var(--bb-red); font-weight: 500; }
.ps-contact-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
}

.ps-contact-socials {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--bb-line);
}
.ps-contact-socials strong {
    display: block;
    color: var(--bb-cocoa);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-bottom: 12px;
    font-weight: 700;
}
.ps-socials {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.ps-socials a {
    background: var(--bb-paper);
    border: 1.5px solid var(--bb-line);
    color: var(--bb-cocoa);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    transition: all .15s ease;
}
.ps-socials a:hover {
    background: var(--bb-red);
    border-color: var(--bb-red);
    color: #fff;
    text-decoration: none;
}

.ps-contact-map {
    border-radius: var(--bb-radius);
    overflow: hidden;
    border: 1px solid var(--bb-line);
    box-shadow: var(--bb-shadow);
    background: var(--bb-cream-2);
    min-height: 480px;
    display: flex;
}
.ps-contact-map iframe { display: block; flex: 1; }
.ps-contact-map-placeholder {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), transparent 55%),
        linear-gradient(135deg, var(--bb-amber-soft) 0%, var(--bb-red-soft) 100%);
    color: rgba(255,255,255,0.95);
    text-align: center;
    padding: 40px;
}
.ps-contact-map-placeholder-inner p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    text-shadow: 0 1px 2px rgba(0,0,0,0.10);
}

/* =====================  Careers (work-with-us)  ===================== */
.ps-careers-empty {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
    padding: 32px 24px 16px;
}
.ps-careers-empty-icon {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 18px;
}
.ps-careers-empty h2 {
    font-size: clamp(26px, 3.4vw, 34px);
    margin: 0 0 14px;
}
.ps-careers-empty p {
    color: var(--bb-cocoa);
    margin: 0 0 28px;
    font-size: 16.5px;
}

.ps-careers-intro {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
}
.ps-careers-intro p {
    color: var(--bb-cocoa);
    font-size: 17px;
    margin: 0;
}

.ps-jobs {
    display: flex; flex-direction: column;
    gap: 28px;
    max-width: 880px;
    margin: 0 auto;
}

.ps-job {
    background: var(--bb-paper);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius);
    padding: 32px 36px 36px;
    box-shadow: var(--bb-shadow-sm);
    transition: box-shadow .15s ease, border-color .15s ease;
    scroll-margin-top: 110px;
}
.ps-job:hover { box-shadow: var(--bb-shadow); border-color: var(--bb-amber-soft); }
@media (max-width: 600px) { .ps-job { padding: 24px 22px 28px; } }

.ps-job-head { margin-bottom: 18px; }
.ps-job-head h2 {
    margin: 0 0 10px;
    font-size: clamp(24px, 3vw, 30px);
    color: var(--bb-red);
}

.ps-job-meta {
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center;
}
.ps-job-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bb-cream-2);
    color: var(--bb-cocoa);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.ps-job-pill-type {
    background: var(--bb-amber);
    color: #fff;
}
.ps-job-pill-muted {
    background: transparent;
    color: var(--bb-ink-soft);
    font-weight: 500;
}

.ps-job-summary {
    font-size: 17px;
    color: var(--bb-cocoa);
    margin: 0 0 20px;
    font-style: italic;
    border-left: 3px solid var(--bb-amber-soft);
    padding-left: 14px;
}

.ps-job-section { margin-bottom: 22px; }
.ps-job-section h3 {
    font-size: 17px;
    color: var(--bb-cocoa);
    margin: 0 0 10px;
    font-family: var(--bb-sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ps-job-prose {
    color: var(--bb-ink);
    font-size: 15.5px;
    line-height: 1.65;
}
.ps-job-prose p:first-child { margin-top: 0; }
.ps-job-prose p:last-child  { margin-bottom: 0; }
.ps-job-prose a {
    color: var(--bb-red);
    text-decoration: underline;
    text-decoration-color: var(--bb-amber-soft);
    text-underline-offset: 3px;
}

.ps-job-apply {
    background: linear-gradient(180deg, var(--bb-cream-3) 0%, var(--bb-cream-2) 100%);
    border: 1px solid var(--bb-amber-soft);
    border-radius: var(--bb-radius-sm);
    padding: 22px 24px 24px;
    margin-top: 24px;
    position: relative;
}
.ps-job-apply h3 {
    font-family: var(--bb-serif);
    text-transform: none;
    letter-spacing: 0;
    font-size: 22px;
    color: var(--bb-red);
    margin: 0 0 12px;
}
.ps-job-apply h3 .ps-script {
    display: block;
    color: var(--bb-amber-deep);
    font-size: 22px;
    line-height: 1;
    margin-bottom: 2px;
}

/* =====================  Error pages (404 / 500)  ===================== */
.ps-error-page {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: 32px 24px;
}
.ps-error-page .ps-script {
    display: block;
    color: var(--bb-amber-deep);
    font-size: 80px;
    line-height: 1;
    margin-bottom: 12px;
}
.ps-error-page h1 {
    font-size: clamp(32px, 5vw, 48px);
    margin: 0 0 18px;
}
.ps-error-page p {
    color: var(--bb-cocoa);
    font-size: 17px;
    margin: 0 0 32px;
}
.ps-error-actions {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* =====================  Footer  ===================== */
.ps-footer {
    background: var(--bb-espresso);
    color: var(--bb-crema);
    padding: 64px 0 32px;
    margin-top: 0;
    position: relative;
    overflow: hidden;
}
.ps-footer::before {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='%23F4C27A' opacity='0.04'><ellipse cx='35' cy='40' rx='11' ry='15' transform='rotate(-25 35 40)'/><ellipse cx='130' cy='110' rx='10' ry='14' transform='rotate(40 130 110)'/></g></svg>");
    pointer-events: none;
}
.ps-footer .ps-container { position: relative; }
.ps-footer a { color: var(--bb-amber-soft); }
.ps-footer a:hover { color: #fff; }

.ps-footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 36px;
}
@media (max-width: 720px) { .ps-footer-grid { grid-template-columns: 1fr; gap: 32px; } }

.ps-footer-brand .ps-footer-logo {
    height: 80px; width: auto;
    border-radius: 10px;
    margin-bottom: 16px;
    display: block;
    box-shadow: var(--bb-shadow);
}
.ps-footer-brand p {
    margin: 0;
    color: rgba(248, 228, 192, 0.78);
    font-size: 15px;
    max-width: 340px;
    line-height: 1.65;
}
.ps-footer h4 {
    color: var(--bb-cream);
    font-family: var(--bb-serif);
    margin: 0 0 16px;
    font-size: 19px;
    letter-spacing: 0.01em;
}
.ps-footer ul { list-style: none; padding: 0; margin: 0; }
.ps-footer ul li { margin-bottom: 10px; font-size: 15px; color: rgba(248, 228, 192, 0.85); }

.ps-footer-bar {
    border-top: 1px solid rgba(248, 228, 192, 0.15);
    padding-top: 24px;
    display: flex; flex-wrap: wrap; gap: 16px;
    justify-content: space-between;
    font-size: 13px;
    color: rgba(248, 228, 192, 0.55);
}