/* ============================================================
   PB CATERERS — SECTIONS
   Hero · About · Services · Process · Menu · Gallery ·
   Promise · Founder · Booking · Contact · Footer
   ============================================================ */

/* ── HERO ──────────────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 100svh; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: var(--soft-black); overflow: hidden;
    padding-top: calc(var(--nav-height) + 1.5rem);
    padding-bottom: 2.5rem;
    padding-inline: clamp(0.875rem, 4vw, 1.5rem);
}
@supports (padding: max(0px)) {
    .hero { padding-top: calc(var(--nav-height) + env(safe-area-inset-top) + 1.5rem); }
}
@media (max-height: 500px) and (orientation: landscape) {
    .hero { min-height: auto; padding-block: calc(var(--nav-height) + 1rem) 2rem; }
}

.hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: heroKenBurns 20s ease-in-out infinite alternate;
}
@keyframes heroKenBurns {
    from { transform: scale(1);    background-position: center center; }
    to   { transform: scale(1.06); background-position: 55% 45%; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-bg { animation: none; }
}

.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg,
        rgba(26,10,16,0.82) 0%,
        rgba(139,21,56,0.72) 50%,
        rgba(26,10,16,0.82) 100%);
}
/* Petal canvas — above overlay (z:0), below content (z:2) */
.hero-petals {
    position: absolute; inset: 0;
    z-index: 1;
    pointer-events: none;
    width: 100%; height: 100%;
    display: block;
}

.hero-content { position: relative; z-index: 2; text-align: center; max-width: 900px; width: 100%; }

.hero-badge {
    display: inline-flex; align-items: center; gap: var(--spacing-xs);
    padding: 0.5rem 1rem;
    background: rgba(218,165,32,0.12); border: 2px solid var(--gold);
    border-radius: 50px; color: var(--champagne);
    font-size: clamp(0.625rem,2vw,0.875rem); font-weight: 600;
    letter-spacing: 0.8px; text-transform: uppercase;
    margin-bottom: 1.5rem; backdrop-filter: blur(8px);
    white-space: normal; text-align: center;
}

.hero-title {
    font-size: clamp(1.625rem,6vw,4.5rem);
    color: var(--ivory); margin-bottom: 1rem;
    font-weight: 800; line-height: 1.15;
    text-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.hero-title-accent {
    display: block; font-family: var(--font-accent); font-style: italic;
    font-size: clamp(1.375rem,5vw,4rem);
    background: linear-gradient(135deg, var(--gold-bright) 0%, #FFA500 50%, var(--gold-bright) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    margin-top: 0.5rem;
}
.hero-text {
    font-size: clamp(0.9rem,2vw,1.0625rem);
    color: var(--champagne); max-width: 650px; margin: 0 auto 2rem; line-height: 1.7;
}
.hero-stats {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.875rem; margin-bottom: 2rem;
}
@media (min-width: 480px) {
    .hero-stats { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 1.25rem; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .hero-stats { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1rem; }
}

.hero-stat { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); color: var(--ivory); }
.hero-stat i { color: var(--gold-bright); font-size: clamp(1.25rem,3vw,1.75rem); margin-bottom: 0.25rem; }
.hero-stat span { font-size: clamp(0.8125rem,1.8vw,0.9375rem); font-weight: 500; letter-spacing: 0.5px; text-align: center; }

.hero-buttons { display: flex; flex-direction: column; gap: 0.875rem; margin-top: 2rem; width: 100%; }
.hero-buttons .btn { width: 100%; justify-content: center; }
@media (min-width: 480px) {
    .hero-buttons { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 1.25rem; }
    .hero-buttons .btn { width: auto; min-width: 180px; }
}

/* Scroll hint */
.hero-scroll-hint {
    position: absolute; bottom: 1.75rem; left: 50%;
    transform: translateX(-50%);
    color: var(--gold); font-size: 1.375rem;
    animation: scrollBounce 2s ease-in-out infinite;
    z-index: 3; opacity: 0.8;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(218,165,32,0.4); border-radius: 50%;
    transition: opacity var(--transition);
}
.hero-scroll-hint:hover { opacity: 1; }
@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(8px); }
}
@media (max-height: 500px) { .hero-scroll-hint { display: none; } }

/* ── ABOUT ─────────────────────────────────────────────────── */
.about { background: linear-gradient(to bottom, var(--champagne), var(--cream)); }

.about-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem,4vw,4rem); align-items: center; }
@media (min-width: 768px) { .about-grid { grid-template-columns: repeat(2,1fr); } }

.about-image {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-lg); border: 3px solid var(--gold); aspect-ratio: 4/3; min-height: 240px;
}
.about-img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.7s ease;
}
.about-image:hover .about-img { transform: scale(1.04); }

.about-badge {
    position: absolute; bottom: 0.75rem; right: 0.75rem;
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--crimson) 100%);
    color: var(--ivory); padding: clamp(0.875rem,2vw,1.75rem);
    border-radius: var(--radius-md); text-align: center;
    box-shadow: var(--shadow-lg); border: 3px solid var(--gold); z-index: 2;
}
.about-badge-number { display:block; font-size:clamp(1.5rem,4vw,2.75rem); font-weight:800; line-height:1; color:var(--gold-bright); }
.about-badge-text   { display:block; font-size:clamp(0.75rem,1.8vw,0.9375rem); margin-top:var(--spacing-xs); letter-spacing:0.5px; }

.philosophy-statement {
    background: linear-gradient(135deg, rgba(139,21,56,0.05), rgba(218,165,32,0.05));
    padding: clamp(1rem,3vw,1.75rem);
    border-left: 4px solid var(--burgundy); border-right: 4px solid var(--gold);
    border-radius: var(--radius-md); margin-bottom: 1.5rem;
}
.philosophy-quote {
    font-family: var(--font-accent); font-size: clamp(1rem,2.5vw,1.375rem);
    font-style: italic; color: var(--burgundy); line-height: 1.7; margin: 0; padding-left: 0.5rem;
}
.about-text { font-size: clamp(0.9rem,1.8vw,1.0625rem); line-height: 1.8; color: var(--charcoal); margin-bottom: 1rem; }

.credentials { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin: 1.5rem 0; }
@media (min-width: 480px) { .credentials { grid-template-columns: repeat(2,1fr); } }

.credential-item {
    display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem;
    background: rgba(255,255,255,0.7); border-radius: var(--radius-md);
    border: 2px solid var(--champagne); transition: var(--transition);
}
.credential-item:hover { border-color: var(--gold); transform: translateX(5px); box-shadow: var(--shadow-sm); }
@media (hover: none) { .credential-item:hover { transform: none; } }
.credential-item i    { color: var(--burgundy); font-size: clamp(1.125rem,2.5vw,1.5rem); flex-shrink: 0; }
.credential-item span { font-size: clamp(0.875rem,1.8vw,1rem); font-weight: 600; color: var(--charcoal); line-height: 1.5; }

/* ── SERVICES ──────────────────────────────────────────────── */
.services { background: var(--cream); }
.services-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem,4vw,3rem); }
@media (min-width: 540px)  { .services-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3,1fr); } }

.service-card {
    padding: clamp(1.25rem,4vw,3rem); background: var(--ivory);
    border-radius: var(--radius-lg); text-align: center;
    transition: var(--transition); border: 3px solid var(--champagne);
    position: relative; box-shadow: var(--shadow-sm);
}
.service-card:hover { border-color: var(--gold); transform: translateY(-8px); box-shadow: 0 10px 40px rgba(218,165,32,0.25); }
@media (hover: none) { .service-card:hover { transform: none; } .service-card:active { border-color:var(--gold); box-shadow:0 4px 16px rgba(218,165,32,0.3); } }

.service-icon {
    width: clamp(60px,10vw,90px); height: clamp(60px,10vw,90px);
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--crimson) 100%);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto clamp(0.75rem,2vw,1.5rem);
    color: var(--gold-bright); font-size: clamp(1.5rem,3vw,2.25rem);
    transition: var(--transition); border: 3px solid var(--gold); box-shadow: var(--shadow-md);
}
.service-card:hover .service-icon { transform: scale(1.1) rotate(5deg); box-shadow: var(--shadow-lg); }
@media (hover: none) { .service-card:hover .service-icon { transform: none; } }

.service-title { font-size: clamp(1.0625rem,2.5vw,1.625rem); margin-bottom: 0.75rem; color: var(--burgundy); }
.service-desc  { font-size: clamp(0.875rem,1.8vw,1rem); color: var(--charcoal); line-height: 1.8; margin-bottom: 1rem; }
.service-details {
    display: flex; flex-direction: column; gap: 0.625rem;
    margin: 1.25rem 0; padding: 1.25rem 0; border-top: 2px solid var(--champagne); text-align: left;
}
.service-details span { display:flex; align-items:center; gap:0.625rem; font-size:clamp(0.8125rem,1.8vw,0.9375rem); color:var(--charcoal); font-weight:500; }
.service-details i    { color: var(--burgundy); font-size: 0.875rem; flex-shrink: 0; }

/* ── PROCESS ───────────────────────────────────────────────── */
.process { background: var(--warm-white); }
.process-steps { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem,4vw,3rem); margin-top: 2rem; }
@media (min-width: 540px)  { .process-steps { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .process-steps { grid-template-columns: repeat(4,1fr); } }

.process-step {
    text-align: center; padding: clamp(1.25rem,4vw,2.5rem);
    background: var(--ivory); border-radius: var(--radius-lg);
    border: 2px solid var(--champagne); box-shadow: var(--shadow-sm); transition: var(--transition);
}
.process-step:hover { border-color: var(--gold); transform: translateY(-5px); box-shadow: var(--shadow-md); }
@media (hover: none) { .process-step:hover { transform: none; } }

.step-number {
    font-family: var(--font-display);
    font-size: clamp(2.25rem,6vw,4rem); font-weight: 900;
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--gold) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    line-height: 1; margin-bottom: 0.75rem;
}
.process-step h3 { font-size:clamp(1rem,2.5vw,1.375rem); margin-bottom:0.75rem; color:var(--burgundy); }
.process-step p  { font-size:clamp(0.875rem,1.8vw,1rem); color:var(--charcoal); line-height:1.8; }

/* ── MENU ──────────────────────────────────────────────────── */
.menu-section {
    background: linear-gradient(135deg, var(--charcoal) 0%, var(--burgundy) 50%, var(--charcoal) 100%);
    color: var(--ivory); position: relative;
    border-top: 3px solid var(--gold); border-bottom: 3px solid var(--gold);
}
.menu-section .section-label { color: var(--champagne); }
.menu-section .section-title  { color: var(--ivory); }
.menu-section .section-desc   { color: var(--champagne); }

.menu-philosophy {
    max-width: 800px; margin: 0 auto clamp(2rem,5vw,4rem);
    padding: clamp(1rem,3vw,2.5rem);
    border: 3px solid var(--gold); background: rgba(218,165,32,0.05); border-radius: var(--radius-lg);
}
.menu-philosophy .philosophy-statement {
    font-family: var(--font-accent); font-size: clamp(1.125rem,3vw,2rem);
    font-style: italic; color: var(--gold-bright); margin-bottom: 1rem;
    background: none; padding: 0; border: none; line-height: 1.6;
}
.menu-philosophy .philosophy-body { font-size: clamp(0.9rem,2vw,1.125rem); line-height: 1.9; color: var(--champagne); }

.menu-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem,4vw,3rem); margin-bottom: clamp(2rem,5vw,4rem); }
@media (min-width: 540px)  { .menu-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .menu-grid { grid-template-columns: repeat(3,1fr); } }

.menu-card {
    background: rgba(255,255,255,0.05); padding: clamp(1.25rem,4vw,3rem);
    border-radius: var(--radius-lg); text-align: center;
    border: 3px solid rgba(218,165,32,0.3); transition: var(--transition);
    position: relative; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.menu-card:hover { border-color: var(--gold); transform: translateY(-10px); box-shadow: 0 10px 40px rgba(218,165,32,0.25); background: rgba(255,255,255,0.08); }
@media (hover: none) { .menu-card:hover { transform: none; } .menu-card:active { border-color:var(--gold); box-shadow:0 4px 16px rgba(218,165,32,0.3); } }

.menu-icon {
    width: clamp(60px,10vw,90px); height: clamp(60px,10vw,90px);
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--crimson) 100%);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto clamp(0.75rem,2vw,1.5rem);
    color: var(--gold-bright); font-size: clamp(1.5rem,3vw,2.25rem);
    border: 3px solid var(--gold); box-shadow: var(--shadow-md); transition: var(--transition);
}
.menu-card:hover .menu-icon { transform: scale(1.15) rotate(5deg); }
@media (hover: none) { .menu-card:hover .menu-icon { transform: none; } }

.menu-title    { font-size:clamp(1.0625rem,2.5vw,1.625rem); color:var(--ivory); margin-bottom:0.75rem; }
.menu-desc     { font-size:clamp(0.875rem,1.8vw,1rem); color:var(--champagne); line-height:1.8; margin-bottom:0.75rem; }
.menu-preview  { font-size:clamp(0.8125rem,1.8vw,0.9375rem); color:#FFA500; font-style:italic; line-height:1.6; }
.menu-count {
    position: absolute; top: 0.75rem; right: 0.75rem;
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--crimson) 100%);
    color: var(--gold-bright); padding: 0.4rem 0.75rem; border-radius: 50px;
    font-size: clamp(0.6875rem,1.5vw,0.875rem); font-weight: 700;
    border: 2px solid var(--gold); box-shadow: var(--shadow-sm);
}
.menu-cta { text-align: center; }
.menu-note, .menu-guarantee {
    margin-top: 1rem; font-size: clamp(0.875rem,1.8vw,1rem);
    display: flex; align-items: center; justify-content: center;
    gap: 0.625rem; flex-wrap: wrap; text-align: center;
}
.menu-note      { color: var(--champagne); font-style: italic; }
.menu-guarantee { color: #FFA500; font-weight: 600; }

/* ── GALLERY ───────────────────────────────────────────────── */
.gallery { background: var(--warm-white); }
.gallery-filters {
    display: flex; justify-content: center; gap: 0.5rem;
    margin-bottom: clamp(1.5rem,4vw,3rem); flex-wrap: wrap;
}
.gallery-filter {
    padding: 0.625rem 1.125rem; background: var(--ivory);
    border: 2px solid var(--champagne); border-radius: 50px;
    font-family: var(--font-body); font-size: clamp(0.8125rem,1.8vw,1rem);
    font-weight: 600; color: var(--charcoal); cursor: pointer;
    transition: var(--transition); letter-spacing: 0.5px; min-height: 44px;
    -webkit-appearance: none; appearance: none;
}
.gallery-filter:hover    { border-color: var(--gold); color: var(--burgundy); transform: translateY(-2px); }
.gallery-filter.active   { background: linear-gradient(135deg, var(--burgundy) 0%, var(--crimson) 100%); border-color: var(--gold); color: var(--ivory); box-shadow: var(--shadow-md); }
@media (hover: none) { .gallery-filter:hover { transform: none; } }

.gallery-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem,4vw,3rem); }
@media (min-width: 480px)  { .gallery-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3,1fr); } }

.gallery-item {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    cursor: pointer; aspect-ratio: 4/3; box-shadow: var(--shadow-sm);
    transition: var(--transition); border: 3px solid var(--champagne);
}
.gallery-item:hover { transform: translateY(-8px); box-shadow: 0 10px 40px rgba(218,165,32,0.25); border-color: var(--gold); }
@media (hover: none) { .gallery-item:hover { transform: none; } }

.gallery-img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.6s ease;
}
.gallery-item:hover .gallery-img { transform: scale(1.08); }
@media (hover: none) { .gallery-item:hover .gallery-img { transform: none; } }

.gallery-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(139,21,56,0.9) 0%, transparent 60%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: clamp(1rem,3vw,1.5rem); opacity: 0; transition: var(--transition);
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
@media (hover: none) { .gallery-overlay { opacity: 1; background: linear-gradient(to top, rgba(139,21,56,0.75) 0%, transparent 55%); } }
.gallery-overlay h3 { color:var(--ivory); font-size:clamp(0.9375rem,2.5vw,1.5rem); margin-bottom:0.5rem; }
.gallery-overlay p  { color:var(--champagne); font-size:clamp(0.8125rem,1.8vw,1rem); margin:0; }

/* ── PROMISE ───────────────────────────────────────────────── */
.promise { background: linear-gradient(to bottom, var(--champagne), var(--ivory)); }
.promise-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem,4vw,3rem); margin-bottom: clamp(2rem,5vw,4rem); }
@media (min-width: 540px) { .promise-grid { grid-template-columns: repeat(2,1fr); } }

.promise-card {
    background: var(--ivory); padding: clamp(1.25rem,4vw,3rem);
    border-radius: var(--radius-lg); text-align: center;
    box-shadow: var(--shadow-sm); transition: var(--transition); border: 3px solid var(--champagne);
}
.promise-card:hover { border-color: var(--gold); transform: translateY(-8px); box-shadow: 0 10px 40px rgba(218,165,32,0.25); }
@media (hover: none) { .promise-card:hover { transform: none; } .promise-card:active { border-color:var(--gold); box-shadow:0 4px 16px rgba(218,165,32,0.3); } }

.promise-icon {
    width: clamp(60px,10vw,90px); height: clamp(60px,10vw,90px);
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--crimson) 100%);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto clamp(0.75rem,2vw,1.5rem);
    color: var(--gold-bright); font-size: clamp(1.5rem,3vw,2.25rem);
    border: 3px solid var(--gold); box-shadow: var(--shadow-md); transition: var(--transition);
}
.promise-card:hover .promise-icon { transform: scale(1.15) rotate(5deg); }
@media (hover: none) { .promise-card:hover .promise-icon { transform: none; } }
.promise-card h3 { font-size:clamp(1.0625rem,2.5vw,1.5rem); margin-bottom:0.75rem; color:var(--burgundy); }
.promise-card p  { font-size:clamp(0.875rem,1.8vw,1rem); color:var(--charcoal); line-height:1.8; margin-bottom:1rem; }
.promise-highlight {
    display: inline-block; padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(139,21,56,0.08), rgba(218,165,32,0.08));
    color: var(--burgundy); border-radius: 50px;
    font-size: clamp(0.8125rem,1.8vw,0.9375rem); font-weight: 700; border: 2px solid var(--champagne);
}

/* ── FOUNDER ───────────────────────────────────────────────── */
.founder-story { background: linear-gradient(to bottom, var(--ivory), var(--champagne)); }
.founder-card {
    max-width: 900px; margin: 0 auto;
    padding: clamp(1.25rem,4vw,3.5rem); background: var(--ivory);
    border-radius: var(--radius-lg); box-shadow: 0 10px 40px rgba(218,165,32,0.25); border: 3px solid var(--gold);
}
.founder-header { text-align: center; margin-bottom: clamp(1.5rem,4vw,3rem); }
.founder-quote-block {
    text-align: center; padding: clamp(1rem,3vw,2.5rem);
    background: linear-gradient(135deg, rgba(139,21,56,0.05), rgba(218,165,32,0.05));
    border-radius: var(--radius-lg); border: 2px solid var(--champagne);
}
.founder-quote-block i { color:var(--gold); font-size:clamp(1.5rem,3vw,2.5rem); opacity:0.3; margin-bottom:1rem; display:block; }
.founder-quote {
    font-family: var(--font-accent); font-size: clamp(1rem,2.5vw,1.5rem);
    font-style: italic; color: var(--burgundy); line-height: 1.8; margin-bottom: 1rem;
}
.founder-signature { font-size:clamp(0.875rem,1.8vw,1.125rem); color:var(--charcoal); font-weight:700; margin:0; }

/* ── BOOKING ───────────────────────────────────────────────── */
.booking {
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--wine) 50%, var(--burgundy) 100%);
    color: var(--ivory); border-top: 3px solid var(--gold);
}
.booking-wrapper { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem,4vw,3rem); }
@media (min-width: 1024px) { .booking-wrapper { grid-template-columns: repeat(2,1fr); } }

.booking-info .section-label { color: var(--champagne); }
.booking-info .section-title  { color: var(--ivory); }
.booking-text { font-size:clamp(0.9rem,2vw,1.125rem); line-height:1.9; color:var(--champagne); margin-bottom:clamp(1.5rem,4vw,3rem); }

.booking-benefits { margin-bottom: clamp(1.5rem,4vw,3rem); }
.booking-benefit {
    display: flex; align-items: center; gap: 0.75rem;
    padding-block: 0.75rem; color: var(--ivory); font-size: clamp(0.875rem,1.8vw,1.0625rem);
}
.booking-benefit i { color:var(--gold-bright); font-size:clamp(1rem,2.5vw,1.5rem); flex-shrink:0; }

.booking-contact { display: grid; gap: clamp(0.75rem,2vw,1.25rem); }
.booking-contact-item {
    display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem;
    background: rgba(255,255,255,0.08); border: 2px solid var(--gold);
    border-radius: var(--radius-md); transition: var(--transition);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.booking-contact-item:hover { background: rgba(255,255,255,0.15); border-color: var(--gold-bright); transform: translateX(5px); }
@media (hover: none) { .booking-contact-item:hover { transform: none; } }
.booking-contact-item i {
    width: 42px; height: 42px; background: var(--gold); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0; color: var(--burgundy);
}
.booking-contact-item div { display:flex; flex-direction:column; min-width:0; }
.booking-contact-item span { font-size:clamp(0.75rem,1.5vw,0.875rem); color:var(--champagne); }
.booking-contact-item a { font-size:clamp(0.9rem,1.8vw,1.125rem); font-weight:600; color:var(--ivory); overflow-wrap:break-word; word-break:break-all; }

/* ── CONTACT ───────────────────────────────────────────────── */
.contact { background: var(--warm-white); }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem,4vw,3rem); }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: repeat(2,1fr); } }

.contact-info { display: grid; gap: clamp(0.75rem,2vw,1.25rem); }
.contact-card {
    display: flex; gap: 0.875rem; padding: clamp(1rem,3vw,1.75rem);
    background: var(--ivory); border-radius: var(--radius-lg);
    transition: var(--transition); border: 2px solid var(--champagne);
}
.contact-card:hover { box-shadow: var(--shadow-md); border-color: var(--gold); transform: translateX(5px); }
@media (hover: none) { .contact-card:hover { transform: none; } }
.contact-card > i {
    width: clamp(44px,8vw,60px); height: clamp(44px,8vw,60px);
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--crimson) 100%);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: var(--gold-bright); font-size: clamp(1rem,2.5vw,1.5rem); flex-shrink: 0; border: 3px solid var(--gold);
}
.contact-card h3 { font-size:clamp(1rem,2vw,1.25rem); margin-bottom:0.5rem; color:var(--burgundy); }
.contact-card p  { font-size:clamp(0.875rem,1.8vw,1rem); color:var(--charcoal); margin-bottom:0.375rem; }
.contact-card a  { font-size:clamp(0.875rem,1.8vw,1rem); color:var(--burgundy); font-weight:600; transition:var(--transition); overflow-wrap:break-word; word-break:break-all; }
.contact-card a:hover { color: var(--gold); }

.contact-social {
    display: flex; gap: 0.75rem; padding: clamp(1rem,3vw,1.75rem);
    background: var(--ivory); border-radius: var(--radius-lg);
    justify-content: center; border: 2px solid var(--champagne); flex-wrap: wrap;
}
.social-link {
    width: clamp(44px,8vw,55px); height: clamp(44px,8vw,55px);
    background: var(--ivory); border: 3px solid var(--gold); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--burgundy); font-size: clamp(1.0625rem,2.5vw,1.375rem); transition: var(--transition);
}
.social-link:hover { background: linear-gradient(135deg, var(--burgundy) 0%, var(--crimson) 100%); color: var(--gold-bright); transform: translateY(-5px); box-shadow: var(--shadow-md); }
@media (hover: none) { .social-link:hover { transform: none; } .social-link:active { background:linear-gradient(135deg, var(--burgundy) 0%, var(--crimson) 100%); color:var(--gold-bright); } }

.contact-map {
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: 0 10px 40px rgba(218,165,32,0.25);
    min-height: clamp(280px,50vw,450px); border: 3px solid var(--gold);
}
.contact-map iframe { width:100%; height:100%; min-height:clamp(280px,50vw,450px); border:0; display:block; }

/* ── FOOTER ────────────────────────────────────────────────── */
.footer {
    background: linear-gradient(135deg, var(--charcoal) 0%, var(--burgundy) 50%, var(--charcoal) 100%);
    color: var(--ivory);
    padding-top: clamp(2rem,5vw,3.5rem);
    padding-bottom: clamp(1rem,3vw,2rem);
    border-top: 3px solid var(--gold);
}
@supports (padding: max(0px)) { .footer { padding-bottom: max(clamp(1rem,3vw,2rem), env(safe-area-inset-bottom)); } }

.footer-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem,4vw,3rem); margin-bottom: clamp(1.5rem,4vw,3rem); }
@media (min-width: 480px)  { .footer-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4,1fr); } }

.footer-title {
    font-family: var(--font-display); font-size: clamp(1.25rem,3vw,2rem);
    background: linear-gradient(135deg, var(--ivory) 0%, var(--gold-bright) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    margin-bottom: 0.75rem;
}
.footer-desc { font-size:clamp(0.875rem,1.8vw,1rem); line-height:1.8; color:var(--champagne); margin-bottom:1rem; }
.footer-social { display:flex; gap:0.625rem; flex-wrap:wrap; }
.footer-social a {
    width: clamp(36px,6vw,45px); height: clamp(36px,6vw,45px);
    background: rgba(218,165,32,0.1); border: 2px solid var(--gold);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: var(--gold-bright); transition: var(--transition); font-size: clamp(0.875rem,2vw,1rem);
}
.footer-social a:hover { background: var(--gold); color: var(--burgundy); transform: translateY(-3px); }
@media (hover: none) { .footer-social a:hover { transform: none; } }

.footer-heading { font-size:clamp(0.9375rem,2vw,1.25rem); margin-bottom:1rem; color:var(--ivory); }
.footer-links   { list-style: none; }
.footer-links li { margin-bottom: 0.625rem; }
.footer-links a  { font-size:clamp(0.875rem,1.8vw,1rem); color:var(--champagne); transition:var(--transition); display:inline-block; }
.footer-links a:hover { color: var(--gold-bright); padding-left: 8px; }
@media (hover: none) { .footer-links a:hover { padding-left: 0; } }

.footer-contact { list-style: none; }
.footer-contact li { display:flex; align-items:flex-start; gap:0.625rem; margin-bottom:0.625rem; font-size:clamp(0.875rem,1.8vw,1rem); color:var(--champagne); }
.footer-contact i  { color:var(--gold-bright); width:20px; font-size:clamp(0.875rem,2vw,1.125rem); flex-shrink:0; margin-top:0.25rem; }

.footer-bottom {
    text-align: center; padding-top: clamp(1rem,3vw,1.5rem);
    border-top: 2px solid var(--gold);
    font-size: clamp(0.8125rem,1.8vw,0.9375rem); color: var(--champagne);
}

/* ── TESTIMONIALS ──────────────────────────────────────────── */
.testimonials {
    background: linear-gradient(135deg, var(--charcoal) 0%, var(--burgundy) 50%, var(--charcoal) 100%);
    border-top: 3px solid var(--gold);
    border-bottom: 3px solid var(--gold);
}
.testimonials .section-label { color: var(--champagne); }
.testimonials .section-title  { color: var(--ivory); }
.testimonials .section-desc   { color: var(--champagne); opacity: 0.85; }

.testimonials-grid {
    display: grid; grid-template-columns: 1fr;
    gap: clamp(1rem, 3vw, 2rem);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 640px)  { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .testimonials-grid { grid-template-columns: repeat(4, 1fr); } }

.testimonial-card {
    background: rgba(255,255,255,0.05);
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border-radius: var(--radius-lg);
    border: 2px solid rgba(218,165,32,0.25);
    display: flex; flex-direction: column; gap: 1rem;
    transition: var(--transition);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.testimonial-card:hover {
    border-color: var(--gold);
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(218,165,32,0.2);
    background: rgba(255,255,255,0.08);
}
@media (hover: none) { .testimonial-card:hover { transform: none; } }

.testimonial-stars { display: flex; gap: 0.25rem; }
.testimonial-stars i { color: var(--gold-bright); font-size: clamp(0.875rem, 2vw, 1.125rem); }

.testimonial-text {
    font-family: var(--font-accent); font-style: italic;
    font-size: clamp(0.9375rem, 2vw, 1.125rem);
    color: var(--champagne); line-height: 1.75;
    margin: 0; flex: 1;
    quotes: none;
}

.testimonial-author {
    display: flex; align-items: center; gap: 0.875rem; margin-top: auto;
}
.testimonial-avatar {
    width: clamp(44px, 7vw, 56px); height: clamp(44px, 7vw, 56px);
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--gold) 100%);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: clamp(1rem, 2.5vw, 1.375rem);
    color: var(--ivory); font-weight: 700;
    border: 2px solid var(--gold); flex-shrink: 0;
}
.testimonial-meta { display: flex; flex-direction: column; min-width: 0; }
.testimonial-name {
    font-family: var(--font-heading); font-size: clamp(0.875rem, 1.8vw, 1rem);
    color: var(--ivory); font-weight: 700; display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.testimonial-event {
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    color: var(--gold); letter-spacing: 0.3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Aggregate stats bar */
.testimonials-aggregate {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: clamp(1rem, 4vw, 3rem);
    padding: clamp(1.25rem, 4vw, 2.5rem);
    background: rgba(218,165,32,0.08);
    border: 2px solid rgba(218,165,32,0.3);
    border-radius: var(--radius-lg);
    max-width: 900px; margin-inline: auto;
}
.aggregate-stat, .aggregate-score {
    text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.375rem;
}
.aggregate-score .aggregate-stars { display: flex; gap: 0.2rem; }
.aggregate-score .aggregate-stars i { color: var(--gold-bright); font-size: 0.9rem; }
.aggregate-number {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 900;
    background: linear-gradient(135deg, var(--gold-bright) 0%, #FFA500 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    line-height: 1;
}
.aggregate-label { font-size: clamp(0.75rem, 1.5vw, 0.9rem); color: var(--champagne); letter-spacing: 0.5px; }
.aggregate-divider {
    width: 1px; height: 50px;
    background: rgba(218,165,32,0.3);
}
@media (max-width: 540px) { .aggregate-divider { display: none; } }

/* ── SMALL PHONES OVERRIDES ────────────────────────────────── */
@media (max-width: 374px) {
    .hero-badge    { font-size:0.625rem; padding:0.375rem 0.75rem; }
    .hero-title    { font-size:1.5rem; }
    .hero-title-accent { font-size:1.25rem; }
    .service-card, .menu-card, .promise-card, .process-step { padding: 1rem; }
    .service-icon, .menu-icon, .promise-icon { width:56px; height:56px; font-size:1.375rem; }
    .step-number   { font-size: 2rem; }
    .gallery-filter { padding: 0.5rem 0.875rem; }
    .booking-form  { padding: 1rem; }
    .founder-card  { padding: 1rem; }
    .form-group input, .form-group select, .form-group textarea { padding: 0.75rem 0.875rem; }
    .divider-text  { font-size: 1rem; }
}

/* ── PROMISE GRID 4-UP ─────────────────────────────────────── */
@media (min-width: 768px)  { .promise-grid--four { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1200px) { .promise-grid--four { grid-template-columns: repeat(4,1fr); } }

/* ── HERO MANDALA ──────────────────────────────────────────── */
.hero-mandala {
    position: absolute; inset: 0;
    z-index: 1;          /* above overlay (auto), below petals (z:2) */
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.mandala-svg {
    width: clamp(340px, 72vmin, 680px);
    opacity: 1;
    filter: drop-shadow(0 0 18px rgba(218,165,32,0.22)) drop-shadow(0 0 40px rgba(218,165,32,0.10));
    animation: mandalaRotate 80s linear infinite;
    will-change: transform;
}
@keyframes mandalaRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) { .mandala-svg { animation: none; } }

/* z-index layering above mandala */
.hero-petals { z-index: 2; }
.hero-content { z-index: 3; }
.hero-scroll-hint { z-index: 4; }

/* ── HERO GREETING ─────────────────────────────────────────── */
.hero-greeting {
    font-family: var(--font-accent);
    font-size: clamp(0.875rem, 2vw, 1.0625rem);
    color: rgba(247,231,206,0.75);
    font-style: italic;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

/* ── HERO TITLE SHIMMER ────────────────────────────────────── */
@keyframes titleShimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.hero-title-accent {
    background-size: 200% auto;
}
.shimmer-active .hero-title-accent {
    animation: titleShimmer 2.2s ease forwards;
}

/* ── DIYA BUTTON ───────────────────────────────────────────── */
.btn-diya { position: relative; overflow: visible !important; }
.diya-flame {
    position: absolute;
    top: -28px; left: 50%;
    transform: translateX(-50%);
    width: 18px; height: 24px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.btn-diya:hover .diya-flame,
.btn-diya:focus-visible .diya-flame { opacity: 1; }
.diya-flame svg { width: 100%; height: 100%; }
@keyframes flameFlicker {
    0%,100% { transform: translateX(-50%) scaleX(1)   scaleY(1); }
    25%      { transform: translateX(-50%) scaleX(0.88) scaleY(1.1); }
    50%      { transform: translateX(-50%) scaleX(1.1)  scaleY(0.95); }
    75%      { transform: translateX(-50%) scaleX(0.92) scaleY(1.08); }
}
.btn-diya:hover .diya-flame,
.btn-diya:focus-visible .diya-flame {
    animation: flameFlicker 0.5s ease-in-out infinite;
}

/* ── GOLD INK DIVIDER ──────────────────────────────────────── */
.luxury-divider { position: relative; overflow: hidden; }
.divider-ink-path {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 3px;
    pointer-events: none;
}
.divider-ink-path line {
    stroke: var(--gold);
    stroke-width: 3;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.luxury-divider.ink-drawn .divider-ink-path line {
    stroke-dashoffset: 0;
}

/* ── HERITAGE TIMELINE ─────────────────────────────────────── */
.heritage-timeline {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 3px solid var(--gold);
    padding-left: 1.5rem;
    position: relative;
}
.timeline-item {
    position: relative;
    padding: 0.875rem 0;
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.timeline-item.tl-visible {
    opacity: 1;
    transform: translateX(0);
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: calc(-1.5rem - 7px);
    top: 50%;
    transform: translateY(-50%);
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--ivory);
    box-shadow: 0 0 0 3px rgba(218,165,32,0.25);
}
.timeline-year {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(0.9rem, 2vw, 1.125rem);
    color: var(--burgundy);
    font-weight: 700;
    margin-bottom: 0.2rem;
}
.timeline-event {
    display: block;
    font-size: clamp(0.825rem, 1.6vw, 0.9375rem);
    color: var(--charcoal);
    line-height: 1.5;
    opacity: 0.85;
}

/* ── MEHENDI SECTION HEADERS ───────────────────────────────── */
.section-header {
    position: relative;
}
.section-header::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 1rem auto 0;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}
.section-header.header-drawn::after {
    width: 80%;
}

/* ── SOUND TOGGLE ──────────────────────────────────────────── */
.sound-toggle {
    position: fixed;
    bottom: 7rem;
    right: 1.25rem;
    width: 44px; height: 44px;
    background: linear-gradient(135deg, var(--burgundy), var(--crimson));
    border: 2px solid var(--gold);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-bright);
    font-size: 1rem;
    cursor: pointer;
    z-index: 900;
    box-shadow: 0 4px 16px rgba(139,21,56,0.35);
    transition: var(--transition);
}
.sound-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(139,21,56,0.5); }
.sound-toggle[data-playing="true"] { background: linear-gradient(135deg, var(--gold), #FFA500); color: var(--burgundy); }

/* ── THALI SPINNER ─────────────────────────────────────────── */
.menu-thali-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    margin-bottom: 2.5rem;
}
.thali-ring {
    width: 100px; height: 100px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 0 12px rgba(218,165,32,0.5));
    animation: thaliSpin 16s linear infinite;
    will-change: transform;
}
.thali-svg { width: 100%; height: 100%; }
@keyframes thaliSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.thali-label {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: clamp(0.875rem, 2vw, 1.0625rem);
    color: var(--gold);
    letter-spacing: 1px;
    opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
    .thali-ring { animation: none; }
}

/* ── SPARKLE CANVAS ────────────────────────────────────────── */
#sparkle-canvas {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 9999;
}

/* ── CELEBRATION CANVAS ────────────────────────────────────── */
#celebration-canvas {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#celebration-canvas.active { opacity: 1; }

/* ── SMALL SCREEN OVERRIDES ────────────────────────────────── */
@media (max-width: 767px) {
    .hero-mandala { opacity: 0.4; }
    .heritage-timeline { padding-left: 1rem; }
    .sound-toggle { bottom: 6rem; right: 1rem; }
}
@media (max-width: 374px) {
    .booking-form { padding: 1rem; }
    .founder-card { padding: 1rem; }
    .form-group input, .form-group select, .form-group textarea { padding: 0.75rem 0.875rem; }
    .divider-text { font-size: 1rem; }
}