/* ==========================================================================
   CATER FAIRY CDO — Integrated Clean Design System
   ========================================================================== */

/* --- Theme Variables --- */
:root {
    --blue: #AFD1EC;
    --blue-line: #7FAFDD;
    --cream: #FFFBF3;
    --cherry: #C22E3A;
    --cherry-dark: #8E1E28;
    --pink: #F4A9C6;
    --pink-deep: #E8749F;
    --gold: #E7B646;
    --ink: #3E2B26;
    --ink-soft: #5E4A42;
    
    /* Accessibility Friendly Colors */
    --script-dark: #9E1F2A; /* Highly accessible dark red cursive script */
    --bg-warm: #FAF6F0; /* Soft warm light cream block background */
    --border-color: rgba(127, 175, 221, 0.4);
    
    /* Layout Tokens */
    --radius-small: 6px;
    --radius-medium: 12px;
    --radius-large: 24px;
    --radius-circular: 50%;
    
    --shadow-premium: 0 8px 20px -6px rgba(62, 43, 38, 0.1), 0 1px 3px rgba(62, 43, 38, 0.05);
    --shadow-hover: 0 16px 30px -8px rgba(194, 46, 58, 0.15), 0 2px 6px rgba(62, 43, 38, 0.02);
    --shadow-inset: inset 0 2px 4px 0 rgba(62, 43, 38, 0.06);
    
    --transition-smooth: all 0.3s ease;
    --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15);

    /* Spacing Scale — one rhythm for the whole page */
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 72px;
    --section-pad: clamp(64px, 8vw, 104px);   /* vertical breathing room per section */
    --gap-grid: clamp(20px, 2.4vw, 32px);     /* card grid gutters */

    /* Gingham — matches the blue check on the official menu sheets */
    --gingham-size: 48px;
    --gingham-soft: rgba(127, 175, 221, 0.10);
    --gingham-mid: rgba(127, 175, 221, 0.16);
}

/* --------------------------------------------------------------------------
   Gingham surface
   Two translucent stripe layers cross to make the classic check: where they
   overlap reads darkest, giving three tones from two colours.
   -------------------------------------------------------------------------- */
.gingham {
    position: relative;
    background-color: #FFFFFF;
    background-image:
        repeating-linear-gradient(90deg,
            var(--gingham-soft) 0 calc(var(--gingham-size) / 2),
            transparent calc(var(--gingham-size) / 2) var(--gingham-size)),
        repeating-linear-gradient(0deg,
            var(--gingham-soft) 0 calc(var(--gingham-size) / 2),
            transparent calc(var(--gingham-size) / 2) var(--gingham-size));
    isolation: isolate;
}

/* Soft light wash so foreground cards and text stay legible over the check */
.gingham::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(255, 255, 255, 0.55) 45%,
            rgba(255, 255, 255, 0.15) 100%),
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.80) 0%,
            rgba(255, 253, 249, 0.35) 40%,
            rgba(255, 253, 249, 0.35) 60%,
            rgba(255, 255, 255, 0.80) 100%);
}

/* Content sits above the wash */
.gingham > * {
    position: relative;
    z-index: 1;
}

/* Section transition: soft feathered edge so blocks melt into each other */
.section-flow {
    position: relative;
}

.section-flow::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 72px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, var(--flow-to, #FFFFFF) 100%);
}

/* --- Reset & Global Base --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    font-family: 'Quicksand', sans-serif;
    color: var(--ink);
    /* Gingham background pattern - set to very low opacity (0.02 / 0.04) for a premium linen texture */
    background:
      repeating-linear-gradient(0deg, rgba(127,175,221,0.02) 0 2px, transparent 2px 44px),
      repeating-linear-gradient(90deg, rgba(127,175,221,0.02) 0 2px, transparent 2px 44px),
      repeating-linear-gradient(0deg, rgba(175,209,236,0.04) 0 22px, transparent 22px 44px),
      repeating-linear-gradient(90deg, rgba(175,209,236,0.04) 0 22px, transparent 22px 44px),
      #FAF6F0;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #FFFDF9;
}
::-webkit-scrollbar-thumb {
    background: var(--blue-line);
    border-radius: var(--radius-medium);
    border: 2px solid #FFFDF9;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--cherry);
}

/* Typography Base */
h1, h2, h3, h4, h5, h6 {
    color: var(--cherry);
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;      /* keeps headings from orphaning one word */
}

.display {
    font-family: 'Baloo 2', sans-serif;
}

/* Dancing Script has a smaller x-height than a casual hand,
   so sizes run slightly larger to hold the same optical weight. */
.script {
    font-family: 'Dancing Script', cursive;
    color: var(--script-dark) !important;
    font-weight: 700;
    font-size: 27px;
    line-height: 1.45;
}

p {
    font-size: 1.05rem;
    color: var(--ink-soft);
    max-width: 72ch;         /* comfortable measure for reading */
}

/* Centered blocks keep the measure but stay optically centered */
.about p,
.section-head p,
.site-footer p,
.menu-note,
.polaroid .cap {
    margin-left: auto;
    margin-right: auto;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
}

/* Accessibility Focus Indicator */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline: 3px solid var(--cherry);
    outline-offset: 2px;
}

a:focus:not(:focus-visible), 
button:focus:not(:focus-visible), 
input:focus:not(:focus-visible), 
select:focus:not(:focus-visible), 
textarea:focus:not(:focus-visible) {
    outline: none;
}

/* Containers */
.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.wrap {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Section Header Generic */
.section-head {
    text-align: center;
    max-width: 660px;
    margin: 0 auto clamp(36px, 4.5vw, 60px);
}

.section-head .script {
    font-size: 28px;
    line-height: 1.2;
    display: block;
    margin-bottom: var(--space-xs);
}

.section-head h2 {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: clamp(26px, 3.6vw, 38px);
    line-height: 1.2;
    color: var(--cherry);
}

.section-head p {
    color: var(--ink-soft);
    font-size: 15.5px;
    line-height: 1.65;
    margin: var(--space-sm) auto 0;
    max-width: 54ch;
    font-weight: 500;
}

/* Scroll reveal class */
.scroll-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- Bow Tag Overlay Signature --- */
.bow-tag {
    position: relative;
    padding-top: 34px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;   /* lets .tag-card fill equal-height rows */
}

.bow-svg {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 44px;
    z-index: 2;
}

/* --- Buttons --- */
.btn {
    position: relative;          /* anchors the click sparkles */
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 12px 28px;
    border-radius: 99px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color 0.25s ease;
}

.btn-primary {
    background: var(--cherry);
    color: #fff;
    box-shadow: 0 4px 0 var(--cherry-dark);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--cherry-dark);
}

.btn-primary:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--cherry-dark);
}

.btn-ghost {
    border-color: var(--cherry);
    color: var(--cherry);
    background: #fff;
}

.btn-ghost:hover {
    background: var(--cherry);
    color: #fff;
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--ink);
    border: 2px solid var(--blue-line);
}

.btn-outline:hover {
    background: var(--cream);
    border-color: var(--cherry);
    color: var(--cherry);
}

.btn-small {
    font-size: 13.5px;
    padding: 9px 20px;
}

/* Booking actions — both in brand palette, primary/secondary weight */
.btn-book {
    background-color: var(--cherry);
    color: #fff;
    box-shadow: 0 4px 0 var(--cherry-dark);
    width: 100%;
}

.btn-book:hover {
    background-color: #A82631;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--cherry-dark);
}

.btn-book:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--cherry-dark);
}

.btn-email {
    background-color: #fff;
    color: var(--cherry);
    border-color: var(--cherry);
    box-shadow: 0 4px 0 var(--pink);
    width: 100%;
}

.btn-email:hover {
    background-color: var(--cream);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--pink);
}

.btn-email:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--pink);
}


/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.top-bar {
    background-color: var(--ink);
    color: #FFFDF9;
    font-size: 0.85rem;
    padding: 8px 0;
    font-weight: 600;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-contact-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.top-contact-info a:hover {
    color: var(--pink);
}

.top-contact-info .separator {
    color: var(--blue-line);
}

.top-socials a {
    color: #FFFDF9;
}

.top-socials a:hover {
    color: var(--pink);
}

.top-socials i {
    margin-right: 4px;
}

/* Sticky Header */
header.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Soft blue gingham, heavily washed out so the logo and links carry the eye */
    background-color: #F2F8FD;
    background-image:
        repeating-linear-gradient(90deg,
            rgba(127, 175, 221, 0.085) 0 12px, transparent 12px 24px),
        repeating-linear-gradient(0deg,
            rgba(127, 175, 221, 0.085) 0 12px, transparent 12px 24px),
        linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.62) 100%);
    border-bottom: 2px dashed var(--blue-line);
    box-shadow: 0 4px 15px rgba(62, 43, 38, 0.06);
    transition: var(--transition-smooth);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 76px;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-area img.nav-logo {
    height: 48px;
    width: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid var(--cherry);
    box-shadow: var(--shadow-premium);
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--cherry);
}

/* Longer tagline than before — tighter tracking keeps it on one line */
.brand-sub {
    font-size: 0.62rem;
    letter-spacing: 0.9px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--ink-soft);
}

.desktop-nav ul {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 8px;
}

/* Each item sits on its own soft pill so it lifts off the gingham */
.nav-link {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ink-soft);
    padding: 8px 16px;
    border-radius: 99px;
    background-color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(127, 175, 221, 0.45);
    box-shadow: 0 1px 3px rgba(62, 43, 38, 0.05);
    position: relative;
    transition: background-color .25s ease, color .25s ease,
                border-color .25s ease, transform .2s ease, box-shadow .25s ease;
}

.nav-link:hover {
    color: var(--cherry);
    background-color: #FFFFFF;
    border-color: var(--cherry);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(194, 46, 58, 0.14);
}

/* Current section reads as filled, not just tinted */
.nav-link.active {
    color: #FFFFFF;
    background-color: var(--cherry);
    border-color: var(--cherry);
    box-shadow: 0 3px 8px rgba(194, 46, 58, 0.25);
}

.highlight-link {
    background-color: var(--pink);
    color: var(--cherry-dark) !important;
    border: 1px dashed var(--cherry);
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(194, 46, 58, 0.12);
}

/* CTA keeps its pink identity even when its section is the active one */
.highlight-link.active {
    background-color: var(--pink);
    color: var(--cherry-dark) !important;
    border: 1px dashed var(--cherry);
}

.highlight-link:hover,
.highlight-link.active:hover {
    background-color: var(--cherry);
    color: #fff !important;
    border-style: solid;
}

/* Matches the nav pill language rather than sitting as a bare glyph */
.mobile-toggle {
    display: none;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--cherry);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(127, 175, 221, 0.55);
    box-shadow: 0 1px 3px rgba(62, 43, 38, 0.06);
    padding: 0;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.mobile-toggle[aria-expanded="true"],
.mobile-toggle:hover {
    background-color: var(--cherry);
    color: #FFFFFF;
    border-color: var(--cherry);
}

/* Mobile Nav Menu Drawer */
.mobile-nav {
    display: none;
    background-color: #F2F8FD;
    background-image:
        repeating-linear-gradient(90deg,
            rgba(127, 175, 221, 0.085) 0 12px, transparent 12px 24px),
        repeating-linear-gradient(0deg,
            rgba(127, 175, 221, 0.085) 0 12px, transparent 12px 24px),
        linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.62) 100%);
    border-bottom: 2px dashed var(--blue-line);
    padding: 10px 24px 20px;
}

.mobile-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Same pill treatment as the desktop nav, sized for touch */
.mobile-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Quicksand', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-soft);
    padding: 13px 18px;
    min-height: 48px;            /* comfortable tap target */
    border-radius: 99px;
    background-color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(127, 175, 221, 0.45);
    box-shadow: 0 1px 3px rgba(62, 43, 38, 0.05);
    transition: background-color .25s ease, color .25s ease,
                border-color .25s ease, box-shadow .25s ease;
}

.mobile-link:hover,
.mobile-link:active {
    color: var(--cherry);
    background-color: #FFFFFF;
    border-color: var(--cherry);
    box-shadow: 0 4px 10px rgba(194, 46, 58, 0.14);
}

.mobile-link.active {
    color: #FFFFFF;
    background-color: var(--cherry);
    border-color: var(--cherry);
    box-shadow: 0 3px 8px rgba(194, 46, 58, 0.25);
}

/* "Get a Quote" carries the same pink CTA identity as desktop */
.mobile-nav li:nth-last-child(2) .mobile-link {
    background-color: var(--pink);
    color: var(--cherry-dark);
    border: 1px dashed var(--cherry);
    font-weight: 800;
    justify-content: center;
}

/* Tap-to-call reads as the primary action */
.mobile-call {
    background-color: var(--cherry) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--cherry) !important;
    font-weight: 800 !important;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(194, 46, 58, 0.25) !important;
}


/* ==========================================================================
   Hero Section
   ========================================================================== */
/* One-screen hero: fills the viewport below the sticky header, never taller.
   100svh keeps mobile browser chrome from pushing content off-screen. */
.hero {
    --header-h: 76px;
    min-height: calc(100svh - var(--header-h));
    display: flex;
    align-items: center;
    padding: clamp(32px, 4vw, 56px) 0 clamp(48px, 5vw, 72px);
    position: relative;
    overflow: hidden;
    --flow-to: var(--bg-warm);
}

.hero .hero-container {
    width: 100%;
}

/* Short laptop screens: stop the one-screen rule from crushing the content */
@media (min-width: 1025px) and (max-height: 760px) {
    .hero {
        min-height: 0;
        padding: 40px 0 56px;
    }

    .hero-banner-img {
        height: 340px;
    }
}

.hero-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(28px, 3.5vw, 48px);
    align-items: center;
}

.hero-title {
    font-weight: 800;
    font-size: clamp(30px, 4.6vw, 46px);
    color: var(--cherry);
    letter-spacing: -0.01em;
    margin-bottom: var(--space-md);
    line-height: 1.15;
}

.hero-subtitle-script {
    font-size: clamp(25px, 3.6vw, 32px);
    line-height: 1.4;
    color: var(--script-dark) !important;
    margin-bottom: var(--space-sm);
    display: block;
}

.hero p.loc {
    font-weight: 700;
    color: var(--ink-soft);
    font-size: 16px;
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.hero p.loc i {
    color: var(--cherry);
}

/* Scannable proof points under the headline */
.hero-points {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-bottom: var(--space-lg);
}

.hero-points li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink-soft);
}

.hero-points i {
    color: var(--cherry);
    font-size: 13px;
}

.hero-actions {
    display: flex;
    gap: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

.hero-note {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
    font-weight: 600;
    margin-top: var(--space-sm);
}

/* Drifting bokeh orbs — the "fairy dust" atmosphere behind the hero */
.hero-orbs {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    opacity: 0.5;
    animation: drift 14s ease-in-out infinite;
}

.orb-1 { width: 10px; height: 10px; top: 22%; left: 18%; background: var(--pink); }
.orb-2 { width: 7px;  height: 7px;  top: 68%; left: 28%; background: var(--gold); animation-delay: -3s; }
.orb-3 { width: 12px; height: 12px; top: 38%; left: 78%; background: var(--blue); animation-delay: -6s; }
.orb-4 { width: 6px;  height: 6px;  top: 78%; left: 66%; background: var(--pink); animation-delay: -9s; }
.orb-5 { width: 9px;  height: 9px;  top: 14%; left: 54%; background: var(--gold); animation-delay: -12s; }

@keyframes drift {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.25; }
    50%      { transform: translate(14px, -28px) scale(1.35); opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
    .orb, .sparkle, .floating-badge, .animate-bounce {
        animation: none;
    }
}

/* Twinkle animations for sparkles */
.sparkle {
    position: absolute;
    font-size: 24px;
    opacity: .4;
    animation: twinkle 2.6s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes twinkle {
    0%, 100% {
        opacity: .15;
        transform: scale(.85) translateY(0);
    }
    50% {
        opacity: .6;
        transform: scale(1.05) translateY(-5px);
    }
}

/* Hero image banner */
/* Inline padding gives the negative-offset badges room inside the
   hero's overflow:hidden, so they aren't clipped at the edges. */
.banner-wrapper {
    position: relative;
    padding: 8px 18px;
}

/* Hero spans a little wider than the standard container */
.hero .hero-container {
    max-width: 1220px;
}

/* Height is capped by the viewport, not by the column width — this is what
   keeps the hero to one screen on wide displays. */
.hero-banner-img {
    width: 100%;
    height: min(52vh, 460px);
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-large);
    box-shadow:
        0 18px 40px -10px rgba(62, 43, 38, 0.22),
        0 4px 12px rgba(62, 43, 38, 0.08);
    border: 8px solid #fff;
    display: block;
    transform: rotate(1.2deg);
    transition: var(--transition-smooth);
}

.banner-wrapper:hover .hero-banner-img {
    transform: rotate(0deg) scale(1.02);
}

/* Soft glow behind the photo so it lifts off the gingham */
.banner-wrapper::before {
    content: '';
    position: absolute;
    inset: 4%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(244, 169, 198, 0.45) 0%,
        rgba(175, 209, 236, 0.30) 45%,
        transparent 72%);
    filter: blur(28px);
}

.floating-badge {
    position: absolute;
    background: #fff;
    padding: 8px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 8px 20px rgba(62, 43, 38, 0.08);
    border: 1px dashed var(--blue-line);
    animation: float 4s ease-in-out infinite;
}

.badge-top {
    top: 16px;
    left: -14px;
}

.badge-bottom {
    bottom: 16px;
    right: -10px;
    animation-delay: 2s;
}

.red-heart {
    color: var(--cherry);
}

.gold-star {
    color: var(--gold);
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}


/* ==========================================================================
   About Us Strip
   ========================================================================== */
.about {
    background: var(--bg-warm); /* Grounded with soft warm cream background */
    padding: var(--section-pad) 0;
    text-align: center;
    --flow-to: #FFFFFF;   /* melts into the gingham services block */
}

.about p {
    font-size: 17px;
    color: var(--ink);
    font-weight: 700;
    margin: 0 auto var(--space-sm);
}

.about .about-lead {
    font-family: 'Baloo 2', sans-serif;
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.3;
    color: var(--cherry);
    font-weight: 800;
    margin-bottom: var(--space-md);
    text-wrap: balance;
}

.about .about-desc {
    max-width: 66ch;
    margin: 0 auto var(--space-md);
    font-size: 15.5px;
    color: var(--ink-soft);
    line-height: 1.8;
    font-weight: 500;
}

.about .about-desc + .about-desc {
    margin-top: calc(var(--space-md) * -0.25);
}

.about .script {
    font-size: 26px;
    line-height: 1.4;
    color: var(--script-dark);
    display: block;
    margin-top: var(--space-md);
}


/* ==========================================================================
   Services Section
   ========================================================================== */
.services-section {
    padding: var(--section-pad) 0;
    --flow-to: var(--bg-warm);   /* melts into the menu-sheets block below */
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-grid);
}

.service-card {
    background: var(--bg-warm); /* Grounded soft cream card backgrounds */
    border: 2px solid var(--blue-line);
    border-radius: 18px;
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    box-shadow: var(--shadow-premium);
    transition: var(--transition-bounce);
}

.service-card:hover {
    background-color: #ffffff;
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--cherry);
}

.service-card .icon {
    font-size: 42px;
    line-height: 1;
    margin-bottom: var(--space-md);
}

.service-card {
    display: block;
    color: inherit;
}

.service-card h3 {
    font-size: 19px;
    color: var(--cherry);
    margin-bottom: 4px;
}

.service-card .card-price {
    font-family: 'Baloo 2', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--script-dark);
    margin-bottom: var(--space-xs);
}

.service-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
    font-weight: 600;
    margin: 0 auto;
}

/* The min-pax line reads as a spec, not prose */
.service-card .card-meta {
    display: inline-block;
    margin-top: var(--space-sm);
    padding: 3px 12px;
    border-radius: 99px;
    background: #fff;
    border: 1px dashed var(--blue-line);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--script-dark);
}


/* ==========================================================================
   Menu Sheets Section & Cards
   ========================================================================== */
.menu-sheets-section {
    background-color: var(--bg-warm); /* Grounded soft cream background */
    padding: var(--section-pad) 0;
    --flow-to: #FFFFFF;
}

.sheets-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--gap-grid);
}

.sheet-card {
    background-color: #ffffff; /* Contrast white sheets */
    border-radius: var(--radius-medium);
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(62, 43, 38, 0.06);
    border: 2px solid var(--blue-line);
    cursor: pointer;
    transition: var(--transition-bounce);
}

.sheet-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
    border-color: var(--cherry);
}

.sheet-img-container {
    height: 180px;
    position: relative;
    overflow: hidden;
    background-color: var(--blue);
}

.sheet-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition-smooth);
}

.sheet-card:hover .sheet-img-container img {
    transform: scale(1.06);
}

.sheet-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(62, 43, 38, 0.5);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    gap: 8px;
    transition: var(--transition-smooth);
}

.sheet-card:hover .sheet-card-overlay {
    opacity: 1;
}

.sheet-card-info {
    padding: 18px 16px 20px;
}

.sheet-card-info h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--cherry);
    margin-bottom: 6px;
}

.sheet-card-info p {
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.5;
}


/* ==========================================================================
   Resto Menu Section (Tags with bows)
   ========================================================================== */
.menu-section {
    padding: var(--section-pad) 0;
    --flow-to: var(--bg-warm);   /* melts into the gallery */
}

.tabs {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
}

.tab-btn {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 22px;
    border-radius: 99px;
    border: 2px solid var(--blue-line);
    background: #fff;
    color: var(--ink-soft);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.tab-btn:hover {
    color: var(--cherry);
    border-color: var(--cherry);
    background: var(--cream);
}

.tab-btn.active {
    background: var(--cherry);
    border-color: var(--cherry);
    color: #fff;
    box-shadow: 0 4px 10px rgba(194, 46, 58, 0.15);
}

.menu-panel {
    display: none;
}

.menu-panel.active {
    display: block;
}

/* Panel intro: reads as a short spec list, not a run-on sentence */
.menu-note {
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
    font-weight: 700;
    max-width: 640px;
    margin: 0 auto var(--space-xl);
    background: var(--bg-warm);
    border: 2px dashed var(--blue-line);
    border-radius: 14px;
    padding: 16px 22px;
    box-shadow: var(--shadow-premium);
}

.menu-note strong {
    display: block;
    font-family: 'Baloo 2', sans-serif;
    font-size: 15px;
    color: var(--cherry);
    margin-bottom: 6px;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(36px, 4vw, 48px) var(--gap-grid);
}

.menu-grid.single {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
}

.tag-card {
    background: var(--bg-warm); /* Grounded cream backgrounds */
    border: 2px solid var(--blue-line);
    border-radius: 4px 4px 18px 18px;
    padding: var(--space-lg) 24px 26px;
    text-align: center;
    position: relative;
    box-shadow: var(--shadow-premium);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Card hierarchy: name first, price as the loud second beat */
.tag-card h4 {
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    color: var(--cherry);
    order: 1;
    margin-bottom: var(--space-sm);
}

.tag-card .price {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    color: #fff;
    background: var(--cherry);
    display: inline-block;
    order: 2;
    padding: 5px 18px;
    border-radius: 99px;
    font-size: 15px;
    margin: 0 auto var(--space-md);
    width: fit-content;
}

.tag-card ul {
    list-style: none;
    text-align: left;
    order: 3;
    margin-top: 0;
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--border-color);
}

.tag-card li {
    font-size: 14px;
    color: var(--ink-soft);
    font-weight: 600;
    padding: 6px 0 6px 20px;
    position: relative;
    line-height: 1.5;
}

.tag-card li::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: var(--cherry); /* Darker pink/red for readability */
    font-size: 11px;
}

.tag-card .free {
    order: 4;
    margin-top: auto;
    padding-top: var(--space-md);
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: var(--script-dark);
}

.tag-card .free::before {
    content: '';
    display: block;
    border-top: 1px dashed var(--pink-deep);
    margin-bottom: var(--space-sm);
}


/* ==========================================================================
   Polaroid Gallery Section
   ========================================================================== */
.gallery {
    background: var(--bg-warm); /* Grounded background */
    padding: var(--section-pad) 0;
    --flow-to: #FFFFFF;
}

.gallery-wrap {
    max-width: 1000px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 3.4vw, 44px);
}

.polaroid {
    background: #ffffff; /* Highly visible polaroids */
    padding: 12px 12px 34px;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(62, 43, 38, 0.1);
    transform: rotate(var(--r, 0deg));
    transition: transform 0.3s ease;
    border: 1px solid rgba(62, 43, 38, 0.08);
}

.polaroid:hover {
    transform: scale(1.03) rotate(0deg);
    box-shadow: var(--shadow-hover);
}

.polaroid:nth-child(1) { --r: -2deg; }
.polaroid:nth-child(2) { --r: 1.5deg; }
.polaroid:nth-child(3) { --r: -1deg; }
.polaroid:nth-child(4) { --r: 1deg; }
.polaroid:nth-child(5) { --r: -1.5deg; }
.polaroid:nth-child(6) { --r: 2deg; }

.polaroid {
    cursor: pointer;
}

.polaroid img {
    border-radius: 2px;
    aspect-ratio: 4/3;
    object-fit: cover;
    width: 100%;
    display: block;
    border: 1px solid #eee;
    background: var(--blue);
}

.polaroid .cap {
    font-family: 'Dancing Script', cursive;
    font-size: 20px;
    line-height: 1.45;
    text-align: center;
    color: var(--script-dark);
    margin-top: var(--space-md);
    font-weight: 700;
}


/* ==========================================================================
   Quote Calculator Section
   ========================================================================== */
.calculator-section {
    padding: var(--section-pad) 0;
    --flow-to: var(--bg-warm);   /* melts into contact */
}

.calculator-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(32px, 4vw, 48px);
    align-items: stretch;
}

/* Input calculator panel */
.calc-panel {
    background: #ffffff;
    border: 2px solid var(--blue-line);
    border-radius: 20px;
    padding: clamp(28px, 3vw, 40px);
    box-shadow: var(--shadow-premium);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.calc-group {
    margin-bottom: var(--space-lg);
}

/* Numbered steps make the estimator scannable at a glance */
.calc-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    margin-bottom: var(--space-sm);
}

.calc-label em {
    font-style: normal;
    font-weight: 600;
    color: var(--ink-soft);
}

.calc-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--cherry);
    color: #fff;
    font-family: 'Baloo 2', sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1;
}

.calc-val {
    color: var(--cherry);
    background-color: var(--bg-warm);
    border: 1px dashed var(--cherry);
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
}

/* Custom Styled Select */
.styled-select {
    width: 100%;
    font-family: 'Quicksand', sans-serif;
    font-size: 14.5px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 2px solid var(--blue-line);
    background-color: #fff;
    outline: none;
    transition: var(--transition-smooth);
    color: var(--ink);
    cursor: pointer;
}

.styled-select:focus {
    border-color: var(--cherry);
    box-shadow: 0 0 0 3px rgba(194, 46, 58, 0.08);
}

/* Custom range slider */
.styled-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: var(--bg-warm);
    outline: none;
    border: 1px solid var(--blue-line);
}

.styled-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cherry);
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(194, 46, 58, 0.3);
    border: 2px solid #fff;
    transition: var(--transition-smooth);
}

.styled-slider::-webkit-slider-thumb:hover {
    background: var(--cherry-dark);
    transform: scale(1.1);
}

.slider-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 6px;
    padding: 0 2px;
    font-weight: 700;
}

/* Addons layout */
.addons-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.addon-item {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 32px;
    cursor: pointer;
    user-select: none;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink-soft);
}

.addon-item input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.addon-box {
    position: absolute;
    top: 1px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 2px solid var(--blue-line);
    border-radius: 4px;
    transition: var(--transition-smooth);
}

.addon-item:hover input ~ .addon-box {
    border-color: var(--cherry);
}

.addon-item input:checked ~ .addon-box {
    background-color: var(--cherry);
    border-color: var(--cherry);
}

.addon-box::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.addon-item input:checked ~ .addon-box::after {
    display: block;
}

/* Pricing display inside calc panel */
.estimate-display {
    margin-top: var(--space-lg);
    background: var(--bg-warm);
    border: 2px solid var(--blue-line);
    border-radius: var(--radius-medium);
    padding: var(--space-lg) 24px 24px;
    box-shadow: var(--shadow-inset);
}

.est-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
    font-size: 14.5px;
    font-weight: 600;
}

.est-row.total-row {
    border-top: 1px dashed var(--blue-line);
    padding-top: var(--space-md);
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
    align-items: center;
}

.est-val-light {
    font-weight: 700;
    color: var(--ink);
}

.est-val-bold {
    font-size: 26px;
    color: var(--cherry);
    font-weight: 800;
}

.calc-disclaimer {
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: var(--space-sm);
    line-height: 1.55;
    font-weight: 500;
}

/* Inquiry form panel matching approved style note */
.form-panel {
    background: var(--bg-warm); /* Opaque cream panel background */
    border: 2px solid var(--blue-line);
    border-radius: 20px;
    padding: clamp(28px, 3vw, 40px);
    box-shadow: var(--shadow-premium);
}

.booking-note {
    background: var(--pink);
    border-radius: 16px;
    padding: 24px;
    color: var(--cherry-dark);
    border: 1px dashed var(--cherry);
}

.booking-note h3 {
    font-size: 20px;
    margin-bottom: var(--space-xs);
    color: var(--cherry-dark);
}

.booking-note p {
    font-size: 13.5px;
    line-height: 1.65;
    font-weight: 700;
    color: var(--cherry-dark);
}

#booking-inquiry-form {
    margin-top: var(--space-lg);
}

.form-group {
    margin-bottom: var(--space-md);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
    color: var(--ink);
    letter-spacing: 0.5px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    font-family: 'Quicksand', sans-serif;
    font-size: 14.5px;
    padding: 11px 14px;
    border-radius: 8px;
    border: 2px solid var(--blue-line);
    background-color: #fff;
    outline: none;
    transition: var(--transition-smooth);
    color: var(--ink);
    font-weight: 600;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--cherry);
    box-shadow: 0 0 0 3px rgba(194, 46, 58, 0.08);
}

.booking-submit-actions {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px dashed var(--border-color);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}


/* ==========================================================================
   Location & Contact Section
   ========================================================================== */
.contact-section {
    background-color: var(--bg-warm); /* Grounded warm cream background */
    padding: var(--section-pad) 0;
    --flow-to: #FFFFFF;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(32px, 4vw, 48px);
    align-items: start;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.info-card {
    background: #ffffff; /* Contrast white info cards */
    border: 2px solid var(--blue-line);
    border-radius: 20px;
    padding: 26px;
    box-shadow: var(--shadow-premium);
    display: flex;
    gap: var(--space-md);
    transition: var(--transition-smooth);
}

.info-card:hover {
    transform: translateY(-3px);
    border-color: var(--cherry);
}

.info-icon {
    width: 46px;
    height: 46px;
    background-color: var(--bg-warm);
    color: var(--cherry);
    border: 2px solid var(--blue-line);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* Small-caps label reads as a category, title stays the content */
.info-details h3 {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
    font-weight: 800;
    color: var(--script-dark);
}

.info-details p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
    font-weight: 600;
}

.info-details p + p {
    margin-top: 4px;
}

.info-details a:hover {
    color: var(--cherry);
    text-decoration: underline;
}

.address-hint {
    margin-top: var(--space-sm) !important;
    font-size: 13px !important;
    font-weight: 700;
    color: var(--script-dark) !important;
}

/* Simulated Map */
.map-container-styled {
    background-color: #fff;
    border-radius: var(--radius-large);
    overflow: hidden;
    box-shadow: var(--shadow-premium);
    border: 4px solid #fff;
}


.map-card-footer {
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
}

.map-card-footer h4 {
    font-size: 17px;
    color: var(--ink);
    font-weight: 700;
}

.map-card-footer p {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-soft);
    font-weight: 600;
}

.map-card-footer .btn {
    margin-top: var(--space-sm);
}

/* Facebook callout banner */
.social-connect-banner {
    margin-top: clamp(40px, 5vw, 64px);
    background-color: #fff;
    border-radius: var(--radius-large);
    overflow: hidden;
    box-shadow: var(--shadow-premium);
    border: 2px solid var(--blue-line);
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
}

.social-image-wrapper {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-right: 2px dashed var(--blue-line);
}

.fb-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition-smooth);
}

.social-connect-banner:hover .fb-preview-img {
    transform: scale(1.02);
}

.social-info-wrapper {
    padding: clamp(32px, 4vw, 48px);
}

.social-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--script-dark);
}

.social-info-wrapper h3 {
    font-family: 'Baloo 2', sans-serif;
    font-size: clamp(22px, 2.6vw, 26px);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.social-info-wrapper p {
    margin-bottom: var(--space-lg);
    font-size: 14.5px;
    line-height: 1.7;
}

.fb-links-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}


/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    text-align: center;
    padding: clamp(48px, 6vw, 72px) 0 0;
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 600;
}

.site-footer .script {
    font-size: 26px;
    line-height: 1.4;
    color: var(--script-dark);
    display: block;
    margin-bottom: var(--space-sm);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 500px;
    margin: var(--space-lg) auto var(--space-xl);
}

.footer-brand .logo-area {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.footer-logo {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-circular);
    border: 2px solid var(--cherry);
}

.footer-brand h3 {
    font-size: 22px;
    color: var(--cherry);
}

.footer-brand p {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--ink-soft);
    margin-bottom: var(--space-lg);
}

.social-icons {
    display: flex;
    gap: var(--space-sm);
}

.social-icons a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bg-warm);
    border: 1px solid var(--blue-line);
    color: var(--cherry);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: var(--transition-smooth);
}

.social-icons a:hover {
    background-color: var(--cherry);
    color: #fff;
    transform: translateY(-3px);
}

.footer-bottom {
    font-size: 11.5px;
    color: var(--ink-soft);
    border-top: 1px dashed var(--blue-line);
    padding-top: var(--space-lg);
    margin-top: var(--space-lg);
    /* Clears the fixed back-to-top button (56px + 24px offset + breathing room) */
    padding-bottom: 96px;
}

.footer-bottom p {
    max-width: none;
}


/* ==========================================================================
   Lightbox Modal
   ========================================================================== */
.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 64px 24px 32px;
    background-color: rgba(62, 43, 38, 0.95);
    backdrop-filter: blur(8px);
}

/* app.js toggles display:flex to open */
.lightbox-modal.open {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
}

/* The frame hugs the photo: width/height are caps, not forced sizes, so
   portrait shots fill the border instead of floating inside a wide box. */
.lightbox-content {
    margin: auto;
    display: block;
    width: auto;
    height: auto;
    max-width: min(92vw, 1000px);
    max-height: 84vh;
    object-fit: contain;
    border-radius: var(--radius-medium);
    border: 5px solid #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes zoom {
    from {transform: scale(0.75); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

.lightbox-close {
    position: fixed;
    top: 18px;
    right: 28px;
    z-index: 2;
    line-height: 1;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: var(--cherry);
    text-decoration: none;
}

.lightbox-caption {
    display: block;
    max-width: min(92vw, 1000px);
    text-align: center;
    color: #EDE3DD;
    font-weight: 600;
    font-size: 1.05rem;
    flex-shrink: 0;
}


/* ==========================================================================
   Package Filter (Menu section)
   ========================================================================== */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.filter-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--script-dark);
    margin-right: 4px;
}

.filter-count {
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-soft);
    margin-top: 4px;
}

/* "All packages" view — every package from every category in one row-flow.
   Flexbox (not grid) so a ragged final row centres too: with 4 buffet cards
   at 3-per-row, grid would strand the 4th at the left of row two. */
.all-packages-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: clamp(36px, 4vw, 48px) var(--gap-grid);
}

.all-packages-grid > .bow-tag {
    flex: 0 1 300px;
    max-width: 320px;
    min-width: 260px;
}

.pkg-cat {
    order: 0;
    display: inline-block;
    width: fit-content;
    margin: 0 auto var(--space-sm);
    padding: 3px 12px;
    border-radius: 99px;
    background: var(--blue);
    color: var(--cherry-dark);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.menu-panel[hidden],
.bow-tag[hidden] {
    display: none;
}


/* Snacks have no published price — styled as a soft "ask" chip */
.tag-card .price.price-quote {
    background: var(--blue);
    color: var(--cherry-dark);
}

/* Closing CTA under the package grid */
.menu-cta {
    text-align: center;
    margin-top: clamp(40px, 5vw, 60px);
    padding: var(--space-lg);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.8);
    border: 2px dashed var(--blue-line);
}

.menu-cta p {
    font-family: 'Baloo 2', sans-serif;
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 700;
    color: var(--cherry);
    margin: 0 auto var(--space-md);
}

.menu-cta-actions,
.gallery-note {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
}

/* Gallery closing note */
.gallery-note {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: clamp(36px, 4.5vw, 52px);
}

.gallery-note p {
    font-size: 15px;
    font-weight: 600;
    max-width: 52ch;
    margin: 0 auto var(--space-xs);
}

.addon-note {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
    margin-top: var(--space-sm);
    line-height: 1.5;
}

.booking-alt {
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: var(--ink-soft);
    margin-top: var(--space-xs);
}

.booking-alt a {
    color: var(--cherry);
    font-weight: 800;
}

.booking-alt a:hover {
    text-decoration: underline;
}

/* Secondary text button keeps the palette but steps back in weight */
.btn-book-alt {
    background-color: var(--pink-deep);
    box-shadow: 0 4px 0 #C4527D;
}

.btn-book-alt:hover {
    background-color: #DC6690;
    box-shadow: 0 6px 0 #C4527D;
}

.btn-book-alt:active {
    box-shadow: 0 1px 0 #C4527D;
}

/* Footer SEO service line */
.footer-services {
    max-width: 720px;
    margin: 0 auto;
    padding-top: var(--space-lg);
    border-top: 1px dashed var(--border-color);
}

.footer-services p {
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--ink-soft);
}

.footer-services strong {
    color: var(--cherry);
}



/* ==========================================================================
   Google Map Embed
   ========================================================================== */
.map-embed {
    width: 100%;
    height: 300px;
    border: 0;
    display: block;
    background: #E5E9F0;
}

.map-embed-wrapper {
    border-radius: var(--radius-large) var(--radius-large) 0 0;
    overflow: hidden;
}


/* ==========================================================================
   Back to Top — the ring around the button is the scroll progress indicator
   ========================================================================== */
.to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1400;
    width: 56px;
    height: 56px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 6px 16px rgba(62, 43, 38, 0.18));
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.9);
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
}

.to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.to-top:hover {
    transform: translateY(-3px) scale(1.05);
}

/* The ring: a conic sweep driven by --progress (0–100), with the
   unfilled remainder left as a soft track. */
.to-top-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        var(--cherry) calc(var(--progress, 0) * 1%),
        rgba(127, 175, 221, 0.35) 0
    );
    transition: background 0.1s linear;
}

/* Inner disc masks the ring's centre, leaving a 3px arc */
.to-top-face {
    position: relative;
    display: grid;
    place-items: center;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border-radius: 50%;
    background: #fff;
    color: var(--cherry);
    font-size: 17px;
    transition: background-color .25s ease, color .25s ease;
}

.to-top:hover .to-top-face {
    background: var(--cherry);
    color: #fff;
}


/* ==========================================================================
   Trust / Booking Strip
   ========================================================================== */
.trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-top: clamp(40px, 5vw, 60px);
}

.trust-item {
    text-align: center;
    padding: var(--space-md) var(--space-sm);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px dashed var(--blue-line);
}

.trust-item .trust-num {
    display: block;
    font-family: 'Baloo 2', sans-serif;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 800;
    color: var(--cherry);
    line-height: 1.1;
}

.trust-item .trust-cap {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-soft);
    line-height: 1.4;
}


/* ==========================================================================
   Sparkle click particles (used by app.js)
   ========================================================================== */
.sparkle-particle {
    position: absolute;
    pointer-events: none;
    font-size: 12px;
    animation: sparkle-fly 0.8s ease-out forwards;
}

@keyframes sparkle-fly {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}


/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Under 1024px */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 32px;
    }
    
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }
    
    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .hero-actions {
        justify-content: center;
    }
    
    /* Stacked layout can't fit one screen — release the cap and let it flow */
    .hero {
        min-height: 0;
        display: block;
        padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 6vw, 80px);
    }

    .hero-image-area {
        order: -1;
        max-width: 480px;
        margin: 0 auto;
    }

    .hero-banner-img {
        height: min(38vh, 320px);
    }
    
    .services-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    
    .sheets-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .menu-grid {
        grid-template-columns: 1fr 1fr;
    }
    /* .all-packages-grid reflows on its own via auto-fit */

    .trust-strip {
        grid-template-columns: 1fr 1fr;
    }

    .calculator-layout {
        grid-template-columns: 1fr;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .social-connect-banner {
        grid-template-columns: 1fr;
    }
    
    .social-image-wrapper {
        border-right: none;
        border-bottom: 2px dashed var(--blue-line);
        max-height: 320px;
    }
}

/* Under 768px (Mobile Screens) */
@media (max-width: 768px) {
    :root {
        --section-pad: 56px;
    }

    .desktop-nav {
        display: none;
    }

    .mobile-toggle {
        display: inline-flex;
    }

    .top-bar {
        display: none; /* Make header compact on mobile */
    }

    .hero-title {
        font-size: 30px;
    }

    .hero-actions {
        width: 100%;
    }

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

    .hero-points {
        justify-content: center;
        gap: 10px 18px;
    }

    .fb-links-container .btn {
        width: 100%;
    }

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

    .all-packages-grid > .bow-tag {
        flex: 1 1 100%;
        max-width: 340px;
        min-width: 0;
    }

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

    .to-top {
        right: 16px;
        bottom: 16px;
        width: 46px;
        height: 46px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;      /* .form-group margin already spaces stacked fields */
    }
    
    .polaroid {
        max-width: 320px;
        margin: 0 auto;
    }

    .polaroid .cap {
        font-size: 17px;
    }
    
    .lightbox-content {
        max-width: 94vw;   /* stays auto-width so the frame hugs the photo */
        max-height: 76vh;
    }

    .lightbox-close {
        top: 12px;
        right: 16px;
        font-size: 35px;
    }
}


/* Under 560px (Phones) — everything that can stack, stacks */
@media (max-width: 560px) {
    :root {
        --section-pad: 48px;
    }

    .container,
    .wrap {
        padding: 0 18px;
    }

    /* Single column across the board */
    .services-grid,
    .sheets-grid,
    .gallery-grid,
    .trust-strip,
    .menu-cta-actions {
        grid-template-columns: 1fr;
        display: grid;
    }

    .polaroid {
        max-width: 100%;
    }

    /* Full-width tap targets for every primary action */
    .menu-cta-actions .btn,
    .gallery-note .btn,
    .map-card-footer .btn,
    .hero-actions .btn {
        width: 100%;
    }

    /* Stack the estimator's price rows so long labels don't collide */
    .est-row.total-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .calc-label {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Filter chips scroll horizontally instead of wrapping into a tall block */
    .filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        scrollbar-width: none;
    }

    .filter-bar::-webkit-scrollbar {
        display: none;
    }

    .filter-bar .tab-btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .filter-label {
        display: none;
    }

    /* Lifted out of the scrolling strip so it stays readable below it */
    .filter-count {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -26px;
        width: auto;
        margin-top: 0;
    }

    .filter-bar {
        position: relative;
        margin-bottom: calc(var(--space-lg) + 26px);
    }

    /* Section headings keep a comfortable size */
    .section-head .script,
    .site-footer .script,
    .about .script {
        font-size: 23px;
    }

    .hero-title {
        font-size: 27px;
    }

    .info-card {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .booking-note,
    .form-panel,
    .calc-panel {
        padding: 22px 18px;
    }

    .menu-cta {
        padding: var(--space-md) 18px;
    }

    .to-top {
        right: 14px;
        bottom: 14px;
    }
}