/*
   CHICK BUCK — MAIN STYLE
*/

:root {
    --red: #c40000;
    --red-dark: #5a0000;
    --yellow: #ffd400;
    --white: #ffffff;
    --dark: #151c2a;
    --text: #555d69;
    --light: #fff7f2;
    --shadow: 0 18px 45px rgba(24, 18, 18, 0.14);
}

/* 
   RESET
*/

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

html {
    scroll-behavior: smooth;
}

html.loader-active,
body.loader-active {
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
}

body {
    font-family: "Poppins", sans-serif;
    color: var(--dark);
    background: var(--white);
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

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

::selection {
    color: #2a1500;
    background: var(--yellow);
}

:where(h1, h2, h3) {
    text-wrap: balance;
}

:where(p, li) {
    text-wrap: pretty;
}

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

button,
input,
textarea {
    font: inherit;
}

button {
    border: none;
}

.container {
    width: min(1180px, 90%);
    margin-inline: auto;
}

.section-padding {
    padding: 110px 0;
}

/* VIDEO LOADER */

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    width: 100vw;
    max-width: 100%;
    height: 100dvh;
    overflow: hidden;
    background: #000;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.page-loader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.28s ease;
}

/* The loader video is portrait. On laptop and desktop screens, show the full
   frame and use white side space instead of cropping the video. */
@media (min-width: 768px) {
    .page-loader {
        background: #fff;
    }

    .loader-video {
        object-fit: contain;
        background: #fff;
    }
}

.page-loader.is-video-ready .loader-video {
    opacity: 1;
}

.loader-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 24px;
    background: #080808;
    transition: opacity 0.28s ease;
}

.page-loader.is-video-ready .loader-fallback {
    opacity: 0;
    pointer-events: none;
}

.loader-fallback img {
    width: clamp(104px, 14vw, 168px);
    height: auto;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4));
}

.loader-fallback span {
    width: 42px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

.loader-fallback span::after {
    display: block;
    width: 50%;
    height: 100%;
    border-radius: inherit;
    background: #f20a0a;
    content: "";
    animation: loader-progress 1s ease-in-out infinite alternate;
}

@keyframes loader-progress {
    from { transform: translateX(-100%); }
    to { transform: translateX(200%); }
}

.skip-loader {
    position: absolute;
    right: 28px;
    bottom: 28px;
    z-index: 2;
    padding: 10px 22px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, 0.38);
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(8px);
}

.skip-loader:hover {
    background: #f20a0a;
}

@media (max-width: 767px) {
    .page-loader {
        background: #080808;
    }

    .loader-video {
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Offset the crop slightly right to centre the mobile animation. */
        object-position: 42% center;
        transform: none;
    }
}

@media (max-width: 600px) {
    .skip-loader {
        right: 16px;
        bottom: 18px;
    }
}
/* Shared footer brand styles */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.brand img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

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

.brand-text strong {
    color: var(--red);
    font-size: 20px;
    font-weight: 800;
}

.brand-text small {
    margin-top: 4px;
    color: var(--dark);
    font-size: 7px;
    font-weight: 600;
}

/* Leave enough room for the floating navbar */

.hero-section {
    padding-top: 170px;
}

/* 
   BUTTONS
 */

.button {
    min-height: 48px;
    padding: 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 800;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.button:hover {
    transform: translateY(-5px);
}

.button-yellow {
    color: var(--red);
    background: var(--yellow);
    box-shadow: 0 14px 30px rgba(255, 208, 0, 0.23);
}

.button-yellow:hover {
    background: var(--white);
}

.button-outline {
    color: var(--white);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.button-outline:hover {
    color: var(--red);
    background: var(--white);
}

.button-red {
    color: var(--white);
    background: var(--red);
    box-shadow: 0 14px 28px rgba(196, 0, 0, 0.2);
}

.button-red:hover {
    background: var(--red-dark);
}

.button-white {
    color: var(--red);
    background: var(--white);
}

/* 
   HERO
*/

.hero-section {
    position: relative;
    min-height: 100vh;
    padding: 150px 0 80px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(255, 212, 0, 0.17),
            transparent 24%
        ),
        radial-gradient(
            circle at 90% 25%,
            rgba(255, 255, 255, 0.08),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #f20a0a 0%,
            #c40000 52%,
            #7a0000 100%
        );
}

.hero-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    align-items: center;
    gap: 70px;
}

.hero-eyebrow {
    margin-bottom: 14px;
    color: var(--white);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero-title {
    margin-bottom: 24px;
    font-size: clamp(58px, 6vw, 88px);
    font-weight: 900;
    line-height: 1.03;
    letter-spacing: -4px;
}

.hero-title span {
    display: block;
}

.title-white {
    color: var(--white);
}

.title-yellow {
    color: var(--yellow);
}

.hero-divider {
    width: 116px;
    height: 7px;
    margin-bottom: 27px;
    border-radius: 999px;
    background: var(--yellow);
}

.hero-description {
    max-width: 650px;
    margin-bottom: 36px;
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.9;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 42px;
}

.hero-stats {
    display: flex;
    align-items: center;
    gap: 28px;
    color: var(--white);
}

.stat-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.stat-item strong {
    font-size: 21px;
    font-weight: 900;
}

.customer-stat-logo {
    width: 22px;
    height: 22px;
    margin-left: 3px;
    display: inline-block;
    vertical-align: -4px;
    object-fit: cover;
    /* Crop the white canvas so only the round red brand mark remains. */
    clip-path: circle(43%);
}

.stat-item > span {
    font-size: 13px;
    font-weight: 600;
}

.stat-separator {
    width: 1px;
    height: 27px;
    background: rgba(255, 255, 255, 0.38);
}

.hero-visual {
    position: relative;
}

.hero-image-frame {
    position: relative;
    min-height: 580px;
    overflow: hidden;
    border-radius: 32px;
    background: #eeeeee;
    box-shadow: 0 32px 65px rgba(79, 0, 10, 0.25);
}

.hero-main-image {
    width: 100%;
    height: 100%;
    min-height: 580px;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.hero-image-frame:hover .hero-main-image {
    transform: scale(1.045);
}

.image-shine {
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    transform: skewX(-20deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.22),
        transparent
    );
    animation: imageShine 5s ease-in-out infinite;
}

@keyframes imageShine {
    0%,
    55% {
        left: -120%;
    }

    100% {
        left: 150%;
    }
}

.price-badge {
    position: absolute;
    top: -2px;
    right: 28px;
    min-width: 160px;
    padding: 18px 24px 16px;
    border-radius: 0 0 24px 24px;
    color: var(--white);
    background: var(--red);
    box-shadow: 0 18px 35px rgba(67, 8, 9, 0.25);
    animation: badgeFloat 3s ease-in-out infinite;
}

.price-badge small {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 700;
}

.price-badge strong {
    display: block;
    font-size: 39px;
    font-weight: 900;
    line-height: 1;
}

.price-badge strong span {
    font-size: 26px;
}

@keyframes badgeFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

.floating-circle {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
}

.circle-one {
    left: -35px;
    bottom: 30px;
    width: 75px;
    height: 75px;
    animation: orbit 6s linear infinite;
}

.circle-two {
    right: -30px;
    bottom: 90px;
    width: 45px;
    height: 45px;
    background: rgba(255, 208, 0, 0.2);
    animation: floatCircle 4s ease-in-out infinite;
}

@keyframes orbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes floatCircle {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }
}

.hero-decoration {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 208, 0, 0.12);
    filter: blur(3px);
}

.hero-decoration-one {
    top: 80px;
    left: -90px;
    width: 270px;
    height: 270px;
}

.hero-decoration-two {
    right: -160px;
    bottom: -140px;
    width: 430px;
    height: 430px;
}

.scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 24px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--white);
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.scroll-mouse {
    width: 24px;
    height: 38px;
    padding-top: 7px;
    display: grid;
    place-items: start center;
    border: 2px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
}

.scroll-mouse i {
    width: 4px;
    height: 8px;
    border-radius: 999px;
    background: var(--yellow);
    animation: mouseScroll 1.5s ease infinite;
}

@keyframes mouseScroll {
    0% {
        opacity: 0;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
    }

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

/* ==================================================
   MOVING BRAND STRIP
================================================== */

.brand-strip {
    overflow: hidden;
    padding: 18px 0;
    color: var(--red);
    background: var(--yellow);
}

.strip-track {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 25px;
    font-size: 17px;
    font-weight: 900;
    text-transform: uppercase;
    animation: stripMove 22s linear infinite;
}

.strip-track b {
    color: var(--white);
    font-size: 28px;
}

@keyframes stripMove {
    to {
        transform: translateX(-50%);
    }
}

/* ==================================================
   SECTION HEADINGS
================================================== */

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

.section-label {
    margin-bottom: 10px;
    color: var(--red);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.section-heading h2,
.experience-content h2 {
    font-size: clamp(38px, 5vw, 62px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -2px;
}

.section-heading h2 span,
.experience-content h2 span {
    color: var(--red);
}

.section-heading > p:last-child {
    margin-top: 18px;
    color: var(--text);
    font-size: 17px;
    line-height: 1.75;
}
/* =========================================
   1) MADE FRESH / SERVED WITH PASSION SECTION
========================================= */

.experience-section{
    background: #ffffff;
}

.experience-section .experience-content h2,
.experience-section .experience-text h2,
.experience-section h2{
    color: #111111;
}

.experience-section .experience-content h2 span,
.experience-section .experience-text h2 span,
.experience-section h2 span{
    color: #c40000;
}

.experience-section p,
.experience-section li,
.experience-section .experience-content,
.experience-section .experience-text{
    color: #555555;
}

.experience-section .experience-image-circle,
.experience-section .yellow-circle,
.experience-section .circle-bg{
    background: #ffd400;
}


/* =========================================
   2) OUR DELICIOUS SPECIALS SECTION
========================================= */

.specials-section{
    background: #ffffff;
}

.specials-section .section-heading h2,
.specials-section h2{
    color: #111111;
}

.specials-section .section-heading h2 span,
.specials-section h2 span{
    color: #c40000;
}

.specials-section .section-heading p,
.specials-section p{
    color: #666666;
}

.specials-grid .special-card,
.special-card{
    background: #ffffff;
    border: 1px solid #eeeeee;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.special-card h3{
    color: #111111;
}

.special-card p{
    color: #666666;
}

.special-card .badge,
.special-badge{
    background: #ffd400;
    color: #650708;
}

/* 
   SPECIALS
*/

.specials-section {
    background: var(--light);
}

.specials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.food-card {
    overflow: hidden;
    border-radius: 28px;
    background: var(--white);
    box-shadow: var(--shadow);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.food-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 28px 55px rgba(24, 18, 18, 0.18);
}

.food-image {
    position: relative;
    height: 330px;
    overflow: hidden;
    background: #f4efeb;
}

.food-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.food-card:hover .food-image img {
    transform: scale(1.08);
}

.food-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 9px 15px;
    border-radius: 999px;
    color: var(--red);
    background: var(--yellow);
    font-size: 12px;
    font-weight: 900;
}

.food-content {
    min-height: 180px;
    padding: 25px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.food-content h3 {
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: 800;
}

.food-content p {
    color: var(--text);
    font-size: 13px;
    line-height: 1.7;
}

.round-arrow {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--white);
    background: var(--red);
    font-size: 24px;
    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.round-arrow:hover {
    transform: rotate(-35deg);
    background: var(--red-dark);
}

.center-button {
    margin-top: 48px;
    text-align: center;
}

/* 
   EXPERIENCE
*/

.experience-section {
    overflow: hidden;
    background: var(--white);
}

.experience-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 85px;
}

.experience-visual {
    position: relative;
    min-height: 650px;
    display: grid;
    place-items: center;
}

.experience-background {
    position: absolute;
    inset: 55px 15px 15px;
    border-radius: 46% 54% 44% 56% / 60% 44% 56% 40%;
    background: var(--yellow);
    animation: morphShape 9s ease-in-out infinite;
}

@keyframes morphShape {
    0%,
    100% {
        border-radius: 46% 54% 44% 56% / 60% 44% 56% 40%;
    }

    50% {
        border-radius: 56% 44% 58% 42% / 42% 60% 40% 58%;
    }
}

.experience-image {
    position: relative;
    z-index: 2;
    width: 86%;
    max-height: 610px;
    object-fit: contain;
    filter: drop-shadow(0 35px 30px rgba(65, 34, 8, 0.23));
    animation: foodFloat 4s ease-in-out infinite;
}

@keyframes foodFloat {
    0%,
    100% {
        transform: translateY(0) rotate(-1deg);
    }

    50% {
        transform: translateY(-18px) rotate(1deg);
    }
}

.experience-badge {
    position: absolute;
    left: 0;
    bottom: 70px;
    z-index: 3;
    width: 135px;
    height: 135px;
    display: grid;
    place-content: center;
    border-radius: 50%;
    text-align: center;
    color: var(--white);
    background: var(--red);
    box-shadow: var(--shadow);
    animation: pulseBadge 2.6s ease-in-out infinite;
}

.experience-badge strong {
    font-size: 25px;
}

.experience-badge span {
    font-size: 12px;
    font-weight: 700;
}

@keyframes pulseBadge {
    50% {
        transform: scale(1.06);
    }
}

.experience-content > p:not(.section-label) {
    margin: 26px 0 34px;
    color: var(--text);
    font-size: 16px;
    line-height: 1.9;
}

.quality-list {
    margin-bottom: 35px;
    display: grid;
    gap: 20px;
}

.quality-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.quality-item > span {
    flex: 0 0 50px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--red);
    background: rgba(196, 0, 0, 0.09);
    font-weight: 900;
}

.quality-item h3 {
    margin-bottom: 5px;
    font-size: 16px;
}

.quality-item p {
    color: var(--text);
    font-size: 13px;
    line-height: 1.6;
}

/*
   CTA
 */

.home-cta {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    text-align: center;
    color: var(--white);
    background: var(--red);
}

.cta-content {
    position: relative;
    z-index: 3;
}

.cta-content > p {
    margin-bottom: 12px;
    color: var(--yellow);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.cta-content h2 {
    max-width: 850px;
    margin: 0 auto 35px;
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -3px;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
}

.cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 208, 0, 0.17);
}

.cta-shape-one {
    top: -100px;
    left: -70px;
    width: 300px;
    height: 300px;
}

.cta-shape-two {
    right: -120px;
    bottom: -150px;
    width: 420px;
    height: 420px;
}

/* 
   FOOTER
 */

.site-footer {
    padding: 80px 0 25px;
    color: rgba(255, 255, 255, 0.75);
    background: #111722;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1fr 0.8fr;
    gap: 55px;
    padding-bottom: 60px;
}

.footer-logo .brand-text strong,
.footer-logo .brand-text small {
    color: var(--white);
}

.footer-brand > p {
    max-width: 340px;
    margin-top: 22px;
    line-height: 1.85;
}

.footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.footer-links h3 {
    margin-bottom: 9px;
    color: var(--white);
    font-size: 16px;
}

.footer-links a {
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.footer-links a:hover {
    color: var(--yellow);
    transform: translateX(4px);
}

.footer-links strong {
    color: var(--yellow);
}

.footer-bottom {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
    font-size: 13px;
}

/* 
   SCROLL ANIMATIONS
*/

.reveal-up,
.reveal-left,
.reveal-right {
    opacity: 0;
    transition:
        opacity 0.85s ease,
        transform 0.85s ease;
}

.reveal-up {
    transform: translateY(45px);
}

.reveal-left {
    transform: translateX(-60px);
}

.reveal-right {
    transform: translateX(60px);
}

.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {
    opacity: 1;
    transform: translate(0);
}

.delay-one {
    transition-delay: 0.12s;
}

.delay-two {
    transition-delay: 0.24s;
}

.delay-three {
    transition-delay: 0.36s;
}

.delay-four {
    transition-delay: 0.48s;
}

/* 
   BACK TO TOP
*/

.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--white);
    background: var(--red);
    box-shadow: 0 14px 32px rgba(196, 0, 0, 0.28);
    font-size: 24px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: 0.3s ease;
}

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

.back-to-top:hover {
    transform: translateY(-5px);
    background: var(--red-dark);
}
/* 
   CHICK BUCK MENU PAGE
*/

:root {
    --menu-red: #c40000;
    --menu-dark-red: #5a0000;
    --menu-yellow: #ffd400;
    --menu-white: #ffffff;
    --menu-text: #202020;
    --menu-grey: #6c6c6c;
}


/* GENERAL MENU PAGE */

.menu-page {
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(255, 212, 0, 0.17),
            transparent 24%
        ),
        radial-gradient(
            circle at 90% 25%,
            rgba(255, 255, 255, 0.08),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #f20a0a 0%,
            #c40000 52%,
            #7a0000 100%
        );
}

.menu-page .container {
    width: min(1380px, 92%);
    margin-inline: auto;
}


/* 
   MENU HERO
 */

.menu-page-hero {
    position: relative;
    padding: 150px 0 55px;
    text-align: center;
    color: var(--menu-white);
}

.menu-page-hero::before {
    content: "";
    position: absolute;
    top: 80px;
    left: 50%;
    width: 470px;
    height: 470px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.menu-page-hero::after {
    content: "";
    position: absolute;
    top: 145px;
    left: 50%;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(255, 212, 0, 0.12);
    border-radius: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.menu-page-hero .container {
    position: relative;
    z-index: 2;
}

.menu-small-title {
    margin: 0 0 10px;
    color: var(--menu-yellow);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.menu-page-hero h1 {
    margin: 0;
    color: var(--menu-white);
    font-size: clamp(58px, 8vw, 105px);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -5px;
    text-transform: uppercase;
    text-shadow: 0 12px 35px rgba(61, 7, 8, 0.25);
}

.menu-title-line {
    width: 95px;
    height: 7px;
    margin: 28px auto 0;
    border-radius: 50px;
    background: var(--menu-yellow);
    box-shadow: 0 8px 25px rgba(255, 212, 0, 0.3);
}


/* ==================================================
   CATEGORY FILTERS
================================================== */

.menu-filter-section {
    position: relative;
    z-index: 5;
    padding: 5px 0 50px;
}

.menu-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 11px;
}

.filter-btn {
    min-height: 46px;
    padding: 11px 21px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 50px;
    outline: none;
    color: var(--menu-white);
    background: rgba(255, 255, 255, 0.09);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.filter-btn:hover {
    color: var(--menu-dark-red);
    border-color: var(--menu-yellow);
    background: var(--menu-yellow);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(58, 7, 8, 0.18);
}

.filter-btn.active {
    color: var(--menu-dark-red);
    border-color: var(--menu-yellow);
    background: var(--menu-yellow);
    box-shadow: 0 10px 24px rgba(58, 7, 8, 0.22);
}

.filter-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.8);
    outline-offset: 3px;
}

.menu-mobile-order-entry {
    display: none;
}

@media (max-width: 767px) {
    .menu-mobile-order-entry {
        display: block;
        padding-bottom: 22px;
    }

    .menu-mobile-order-button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 54px;
        padding: 12px 20px;
        border-radius: 16px;
        color: #690000;
        background: #ffd400;
        box-shadow: 0 10px 24px rgba(38, 0, 0, 0.24);
        font-size: 16px;
        font-weight: 800;
        text-decoration: none;
    }

    .menu-mobile-order-button span {
        font-size: 24px;
        line-height: 1;
    }
}


/* ==================================================
   MENU PRODUCTS
================================================== */

.menu-products-section {
    position: relative;
    z-index: 3;
    padding: 10px 0 110px;
}


/* LAPTOP: 4 BOXES IN ONE ROW */

.menu-products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}


/* ==================================================
   MENU CARD
================================================== */

.menu-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    background: var(--menu-white);
    box-shadow:
        0 20px 45px rgba(78, 0, 10, 0.18),
        0 3px 10px rgba(78, 0, 10, 0.08);
    transform: translateY(0);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        opacity 0.3s ease;
    /* Avoid painting the many off-screen menu cards until the customer
       scrolls near them. This keeps laptop scrolling responsive. */
    content-visibility: auto;
    contain-intrinsic-size: auto 470px;
}

.menu-card:hover {
    border-color: rgba(255, 212, 0, 0.8);
    transform: translateY(-10px);
    box-shadow:
        0 32px 65px rgba(78, 0, 10, 0.28),
        0 8px 20px rgba(78, 0, 10, 0.12);
}

.menu-card.hide {
    display: none;
}


/* CARD IMAGE */

.menu-card-image {
    position: relative;
    width: 100%;
    height: 245px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at center,
            #fff7de 0%,
            #f5ece4 100%
        );
}

.menu-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.12),
        transparent 45%
    );
    pointer-events: none;
}

.menu-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.65s ease,
        filter 0.65s ease;
}

.menu-card:hover .menu-card-image img {
    transform: scale(1.08);
    filter: saturate(1.08);
}


/* CARD BADGE */

.menu-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 3;
    padding: 8px 13px;
    border-radius: 50px;
    color: var(--menu-dark-red);
    background: var(--menu-yellow);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(55, 0, 7, 0.18);
}


/* CARD CONTENT */

.menu-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 205px;
    padding: 21px 20px 22px;
}

.menu-card-content h2 {
    margin: 0 0 10px;
    color: var(--menu-red);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
}

.menu-card-content p {
    display: -webkit-box;
    margin: 0 0 20px;
    overflow: hidden;
    color: var(--menu-grey);
    font-size: 12.5px;
    line-height: 1.7;
    -webkit-box-orient: vertical;
    line-clamp: 3;
}

.menu-price {
    display: block;
    margin-top: auto;
    color: var(--menu-red);
    font-size: 27px;
    font-weight: 900;
    line-height: 1;
}


/* SMALL YELLOW DECORATION */

.menu-card-content::after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: -18px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: rgba(255, 212, 0, 0.14);
    pointer-events: none;
}


/* ==================================================
   CARD ENTRY ANIMATION
================================================== */

.menu-card {
    animation: menuCardAppear 0.55s ease both;
}

.menu-card:nth-child(4n + 2) {
    animation-delay: 0.05s;
}

.menu-card:nth-child(4n + 3) {
    animation-delay: 0.1s;
}

.menu-card:nth-child(4n + 4) {
    animation-delay: 0.15s;
}

@keyframes menuCardAppear {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    .menu-card,
    .menu-card-image img,
    .filter-btn {
        animation: none;
        transition: none;
    }
}/* ==================================================
   PREMIUM ATTRACTIVE ANIMATIONS
================================================== */

/* Floating food image */

.hero-main-image,
.about-story-image-card img {
    animation: floatFood 5s ease-in-out infinite;
}

/* Smaller laptops benefit from lighter hover rendering while preserving the
   same layout and interaction. */
@media (max-width: 1440px) {
    .menu-card:hover {
        box-shadow: 0 22px 45px rgba(78, 0, 10, 0.22);
    }

    .menu-card:hover .menu-card-image img {
        filter: none;
    }
}

/* Table QR ordering and cart */
.table-order-bar { display: grid; grid-template-columns: 1fr auto; gap: 16px 28px; align-items: end; margin: 0 0 28px; padding: 22px; border-radius: 20px; color: #fff; background: #65070b; }
.table-order-bar[hidden] { display: none !important; }
.table-order-eyebrow { margin: 0 0 4px; color: #ffd400; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.table-order-bar h2 { margin: 0; color: #fff; font-size: 24px; }
.table-order-bar label { display: grid; gap: 6px; color: #fff; font-size: 13px; font-weight: 700; }
.table-order-bar input { width: 180px; padding: 11px 13px; border: 1px solid #ffd400; border-radius: 9px; color: #222; font: inherit; }
.table-order-note { grid-column: 1 / -1; margin: -7px 0 0; color: rgba(255,255,255,.8); font-size: 12px; }
.delivery-order-bar { align-items: start; }.delivery-order-bar .table-order-note { margin: 10px 0 0; }.delivery-fields { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 10px; min-width: min(600px, 100%); }.delivery-fields label { display: grid; gap: 6px; color: #fff; font-size: 12px; font-weight: 700; }.delivery-fields input, .delivery-fields textarea { width: 100%; padding: 10px 12px; border: 1px solid #ffd400; border-radius: 9px; color: #222; font: inherit; resize: vertical; }.delivery-fields .delivery-address { grid-column: 1 / -1; }
.delivery-location-row { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; color: #fff; font-size: 12px; }.delivery-location-button { padding: 10px 13px; border: 1px solid #ffd400; border-radius: 9px; color: #65070b; background: #ffd400; cursor: pointer; font: inherit; font-weight: 800; white-space: nowrap; }
.delivery-privacy-consent { grid-column: 1 / -1; display: flex !important; gap: 9px; align-items: flex-start; color: #fff !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.5; }.delivery-privacy-consent input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: #ffd400; }.delivery-privacy-consent a { color: #ffd400; font-weight: 800; text-decoration: underline; }
.add-to-cart, .cart-checkout { margin-top: 15px; padding: 11px 14px; border: 0; border-radius: 9px; color: #65070b; background: #ffd400; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; }
.add-to-cart:hover, .cart-checkout:hover { filter: brightness(1.05); }
.order-cart { position: fixed; right: 22px; bottom: 22px; z-index: 40; }
.cart-toggle { display: flex; gap: 10px; align-items: center; padding: 14px 17px; border: 0; border-radius: 999px; color: #fff; background: #c40000; box-shadow: 0 12px 30px rgba(0,0,0,.28); cursor: pointer; font: inherit; font-weight: 800; }
.cart-toggle strong { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; color: #65070b; background: #ffd400; font-size: 12px; }
.cart-panel { position: absolute; right: 0; bottom: 58px; display: none; width: min(390px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 110px)); overflow: auto; padding: 20px; border-radius: 18px; background: #fff; box-shadow: 0 20px 55px rgba(0,0,0,.32); }
.cart-panel.is-open { display: block; }
.order-review-card { border: 3px solid #ffd400; }
.review-order-type { margin: -9px 0 16px; color: #8d1014; font-size: 13px; font-weight: 800; }
.review-delivery { margin: 3px 0 16px; padding: 13px; border-radius: 10px; background: #fff5e7; color: #34211e; }
.review-delivery span, .review-delivery small { display: block; color: #775b52; font-size: 12px; }
.review-delivery strong { display: block; margin-top: 4px; }
.review-delivery p { margin: 5px 0; line-height: 1.45; }
.review-charge, .review-grand-total { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed #ded0c8; font-size: 14px; }
.review-grand-total { margin: 4px 0 16px; padding: 14px 0; border-bottom: 0; color: #65070b; font-size: 20px; font-weight: 900; }
.addon-options { display: flex; flex-wrap: wrap; gap: 8px; }
.addon-options label { padding: 8px 10px; border: 1px solid #e4c0bd; border-radius: 999px; color: #35201f; background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.addon-options input { accent-color: #c40000; }
.order-review-card #confirmOrderButton { position: sticky; bottom: -26px; width: calc(100% + 52px); margin: 5px -26px -26px; padding: 18px 26px; border-radius: 0 0 15px 15px; box-shadow: 0 -8px 18px rgba(255,255,255,.96); }
.order-review-modal { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; padding: 18px; background: rgba(0,0,0,.58); }.order-review-modal.is-open { display: grid; }.order-review-card { position: relative; width: min(470px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: 26px; border-radius: 18px; background: #fff; color: #222; box-shadow: 0 22px 65px rgba(0,0,0,.38); }.order-review-card h2 { margin: 5px 0 18px; }.order-review-card .cart-close { position: absolute; top: 12px; right: 14px; }.review-items { border-top: 1px solid #e5e5e5; }.review-items div, .review-total { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #e5e5e5; font-size: 14px; }.review-total { margin-bottom: 15px; border-bottom: 0; font-size: 18px; }.review-addons { display: grid; gap: 7px; margin-bottom: 16px; color: #65070b; font-size: 13px; font-weight: 800; }.review-addons textarea { width: 100%; padding: 10px; border: 1px solid #c40000; border-radius: 9px; font: inherit; resize: vertical; }.review-addons small { color: #666; font-weight: 400; }
.cart-header { display: flex; justify-content: space-between; align-items: start; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.cart-header p { margin: 0; color: #c40000; font-size: 12px; font-weight: 800; text-transform: uppercase; }.cart-header h2 { margin: 3px 0 0; font-size: 23px; }.cart-close { border: 0; background: transparent; cursor: pointer; font-size: 29px; }
.cart-items { padding: 8px 0; }.cart-empty { color: #777; }.cart-item { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid #eee; }.cart-item strong, .cart-item span { display: block; }.cart-item span { margin-top: 3px; color: #777; font-size: 12px; }
.cart-quantity { display: flex; gap: 8px; align-items: center; }.cart-quantity button { width: 27px; height: 27px; border: 1px solid #ddd; border-radius: 50%; background: #fff; cursor: pointer; font-size: 17px; }.cart-summary { display: flex; justify-content: space-between; padding: 16px 0; font-size: 17px; }.cart-checkout { width: 100%; margin: 0; }.cart-checkout:disabled { cursor: wait; opacity: .65; }.cart-message { min-height: 20px; margin: 12px 0 0; color: #65070b; font-size: 12px; line-height: 1.45; }
@media (max-width: 600px) { .table-order-bar { grid-template-columns: 1fr; }.table-order-bar input { width: 100%; }.table-order-note { grid-column: auto; }.delivery-fields { grid-template-columns: 1fr; }.order-cart { right: 16px; bottom: 16px; } }

/* ==================================================
   TIRUR OPENING ANNOUNCEMENT
================================================== */

.tirur-seasonal-slide {
    --tirur-red: #f3131d;
    --tirur-ink: #090909;
}

.tirur-seasonal-slide .onam-seasonal-wash {
    inset: -160px -8vw -130px;
    background:
        radial-gradient(circle at 78% 48%, rgba(222, 11, 20, 0.26), transparent 30%),
        radial-gradient(circle at 13% 82%, rgba(239, 17, 27, 0.14), transparent 28%),
        linear-gradient(118deg, #050505 0%, #101010 52%, #090909 100%);
}

.tirur-seasonal-slide .onam-seasonal-wash::before {
    opacity: 0.34;
    background:
        repeating-linear-gradient(130deg, transparent 0 38px, rgba(255, 255, 255, 0.035) 39px 40px),
        linear-gradient(90deg, rgba(237, 13, 23, 0.18), transparent 24% 78%, rgba(237, 13, 23, 0.13));
    mask-image: none;
}

.tirur-seasonal-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(355px, 0.76fr);
}

.tirur-seasonal-slide .seasonal-kicker,
.tirur-seasonal-slide .seasonal-card-brand {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(15, 15, 15, 0.72);
}

.tirur-seasonal-slide .seasonal-label,
.tirur-seasonal-slide .seasonal-date-row span,
.tirur-seasonal-slide .seasonal-food-card figcaption small {
    color: #ff2932;
}

.tirur-seasonal-title {
    font-style: italic;
    letter-spacing: -6px;
}

.tirur-seasonal-title span {
    color: #fff;
    font-size: 0.72em;
    transform: rotate(-3deg);
    transform-origin: left center;
}

.tirur-seasonal-title strong {
    color: var(--tirur-red);
    text-shadow: 0 15px 42px rgba(235, 10, 21, 0.28);
    transform: rotate(-3deg);
    transform-origin: left center;
}

.tirur-seasonal-title em {
    margin-top: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #fff;
    background: transparent;
    font-family: cursive;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    transform: rotate(-7deg);
}

.tirur-seasonal-slide .button-yellow {
    color: #fff;
    background: var(--tirur-red);
    box-shadow: 0 12px 28px rgba(231, 10, 21, 0.28);
}

.tirur-seasonal-slide .button-yellow:hover,
.tirur-seasonal-slide .button-yellow:focus-visible {
    background: #ff333b;
}

.tirur-seasonal-visual {
    min-height: 600px;
}

.tirur-seasonal-visual::before {
    content: "";
    position: absolute;
    right: 1%;
    bottom: 1%;
    width: min(460px, 96%);
    aspect-ratio: 1;
    border: 18px solid rgba(243, 19, 29, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.06), 0 0 95px rgba(243, 19, 29, 0.26);
}

.tirur-sunburst {
    position: absolute;
    right: -1%;
    bottom: 5%;
    width: min(480px, 100%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: repeating-conic-gradient(from -12deg, rgba(243, 19, 29, 0.7) 0 5deg, transparent 5deg 18deg);
    mask-image: radial-gradient(circle, transparent 0 40%, #000 41% 63%, transparent 64%);
    opacity: 0.45;
}

.tirur-location {
    position: absolute;
    z-index: 6;
    top: 9%;
    right: 3%;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: var(--tirur-red);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    font-size: 38px;
    line-height: 1;
}

.tirur-seasonal-slide .seasonal-food-card {
    width: min(400px, 86%);
    border-color: rgba(255, 255, 255, 0.94);
    border-radius: 32px;
    transform: rotate(1deg);
}

.tirur-seasonal-slide .seasonal-food-card::after {
    background:
        linear-gradient(to top, rgba(4, 4, 4, 0.96), transparent 43%),
        linear-gradient(145deg, rgba(243, 19, 29, 0.2), transparent 36%);
}

.tirur-seasonal-slide .seasonal-food-image {
    object-position: center 48%;
}

/* Tirur seasonal screen — warm Saudi sunset treatment. */
.tirur-seasonal-slide .onam-seasonal-wash {
    background:
        radial-gradient(circle at 14% 30%, rgba(255, 112, 43, 0.76), transparent 34%),
        radial-gradient(circle at 74% 76%, rgba(95, 12, 3, 0.54), transparent 42%),
        linear-gradient(112deg, #a71409 0%, #cf3820 34%, #7b190d 68%, #270707 100%);
}

.tirur-seasonal-slide .onam-seasonal-wash::before {
    opacity: 0.32;
    background:
        linear-gradient(90deg, rgba(67, 5, 3, 0.46), transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 217, 133, 0.22), transparent 25%);
}

.tirur-seasonal-slide .seasonal-kicker {
    color: #fff6dc;
    border-color: rgba(255, 236, 204, 0.44);
    background: rgba(77, 10, 4, 0.42);
}

.tirur-seasonal-slide .seasonal-label {
    color: #ffda49;
    font-size: clamp(16px, 1.8vw, 24px);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tirur-seasonal-title { font-style: normal; letter-spacing: -0.07em; }
.tirur-seasonal-title span { color: #fff8e4; transform: none; }
.tirur-seasonal-title strong { color: #ffe8a8; text-shadow: 0 10px 30px rgba(82, 7, 1, 0.34); transform: none; }

.tirur-seasonal-slide .seasonal-food-card {
    width: min(520px, 93%);
    border: 2px solid rgba(255, 239, 212, 0.92);
    border-radius: 30px;
    box-shadow: 0 28px 58px rgba(38, 3, 0, 0.48), 0 0 0 9px rgba(255, 185, 86, 0.12);
    transform: rotate(1.2deg);
}

.tirur-seasonal-slide .seasonal-food-image { object-position: center; }

.tirur-seasonal-slide .seasonal-food-card::after {
    background: linear-gradient(to top, rgba(54, 6, 2, 0.92), rgba(54, 6, 2, 0.04) 62%);
}

.tirur-seasonal-slide .button-yellow {
    color: #710d04;
    background: #ffdc39;
    box-shadow: 0 12px 28px rgba(71, 6, 1, 0.3);
}

@media (max-width: 768px) {
    .tirur-seasonal-grid {
        grid-template-columns: 1fr;
    }

    .tirur-seasonal-title span,
    .tirur-seasonal-title strong {
        transform-origin: center;
    }

    .tirur-seasonal-visual {
        min-height: 460px;
    }

    .tirur-seasonal-visual::before {
        width: min(360px, 86vw);
        border-width: 12px;
    }

    .tirur-location {
        top: 4%;
        right: 8%;
        width: 52px;
        height: 52px;
        font-size: 30px;
    }
}

@keyframes floatFood {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}


/* Shining buttons */

.button,
.glass-visit-button {
    position: relative;
    overflow: hidden;
}

.button::before,
.glass-visit-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.45),
        transparent
    );

    transform: skewX(-25deg);
    animation: buttonShine 3s infinite;
}

@keyframes buttonShine {
    100% {
        left: 160%;
    }
}


/* Card hover effect */

.food-card,
.menu-card,
.about-love-card,
.about-stat-card,
.mission-vision-card,
.outlet-card {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.food-card:hover,
.menu-card:hover,
.about-love-card:hover,
.about-stat-card:hover,
.mission-vision-card:hover,
.outlet-card:hover {
    transform: translateY(-10px) scale(1.02);
}


/* Scroll reveal */

.reveal-up,
.reveal-left,
.reveal-right {
    opacity: 0;
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal-up {
    transform: translateY(45px);
}

.reveal-left {
    transform: translateX(-55px);
}

.reveal-right {
    transform: translateX(55px);
}

.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {
    opacity: 1;
    transform: translate(0);
}


/* Reduce animation for users who prefer less motion */

@media (prefers-reduced-motion: reduce) {
    .hero-main-image,
    .about-story-image-card img,
    .button::before,
    .glass-visit-button::before {
        animation: none;
    }
}


/* ==================================================
   3D-STYLE HERO BUCKET
================================================== */

.hero-bucket-stage {
    position: relative;
    width: 100%;
    min-height: 580px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1100px;
    isolation: isolate;
}

.bucket-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 212, 0, 0.68) 0%,
        rgba(255, 130, 20, 0.24) 42%,
        transparent 72%
    );
    filter: blur(12px);
    transform: translate(-50%, -50%);
    animation: bucketGlow 3.5s ease-in-out infinite;
}

.hero-bucket-image {
    position: relative;
    z-index: 3;
    width: min(460px, 90%);
    max-height: 570px;
    object-fit: contain;
    filter:
        drop-shadow(0 30px 25px rgba(71, 0, 9, 0.42))
        saturate(1.08);
    transform-origin: center bottom;
    transform-style: preserve-3d;
    animation: bucket3DMove 6s ease-in-out infinite;
}

.bucket-shadow {
    position: absolute;
    left: 50%;
    bottom: 42px;
    z-index: -1;
    width: 280px;
    height: 42px;
    border-radius: 50%;
    background: rgba(72, 0, 8, 0.42);
    filter: blur(15px);
    transform: translateX(-50%);
    animation: bucketShadow 6s ease-in-out infinite;
}

.steam {
    position: absolute;
    top: 52px;
    z-index: 5;
    width: 24px;
    height: 105px;
    border-radius: 50%;
    background: linear-gradient(
        to top,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    );
    filter: blur(9px);
    opacity: 0;
    pointer-events: none;
    animation: steamRise 3.5s ease-in-out infinite;
}

.steam-one { left: 43%; }
.steam-two { left: 52%; animation-delay: 1.1s; }
.steam-three { left: 60%; animation-delay: 2.1s; }

@keyframes bucket3DMove {
    0%, 100% {
        transform: translateY(0) rotateX(1deg) rotateY(-7deg) rotateZ(-1deg);
    }
    50% {
        transform: translateY(-18px) rotateX(-1deg) rotateY(7deg) rotateZ(1deg);
    }
}

@keyframes bucketGlow {
    0%, 100% {
        opacity: 0.65;
        transform: translate(-50%, -50%) scale(0.94);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

@keyframes bucketShadow {
    0%, 100% {
        opacity: 0.8;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 0.48;
        transform: translateX(-50%) scale(0.84);
    }
}

@keyframes steamRise {
    0% {
        opacity: 0;
        transform: translateY(50px) translateX(0) scale(0.7);
    }
    35% { opacity: 0.55; }
    100% {
        opacity: 0;
        transform: translateY(-75px) translateX(18px) scale(1.4);
    }
}

@media (max-width: 700px) {
    .hero-bucket-stage { min-height: 430px; }
    .hero-bucket-image {
        width: min(330px, 90%);
        max-height: 410px;
    }
    .bucket-glow {
        width: 310px;
        height: 310px;
    }
    .bucket-shadow {
        bottom: 28px;
        width: 210px;
    }
    .steam {
        top: 30px;
        height: 80px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-bucket-image,
    .bucket-glow,
    .bucket-shadow,
    .steam {
        animation: none;
    }
}/* ==================================================
   CHICK BUCK — COMPLETE ABOUT PAGE
   UNIFORM RED, YELLOW, WHITE DESIGN
================================================== */

:root {
    --about-red-light: #f20a0a;
    --about-red: #c40000;
    --about-red-dark: #7a0000;
    --about-deep-red: #560000;

    --about-yellow: #ffd400;
    --about-white: #ffffff;

    --about-text:
        rgba(255, 255, 255, 0.78);

    --about-border:
        rgba(255, 255, 255, 0.18);

    --about-card:
        rgba(255, 255, 255, 0.09);

    --about-shadow:
        0 25px 60px rgba(74, 0, 10, 0.25);
}


/* ==================================================
   ABOUT PAGE GENERAL
================================================== */

body.about-page-body {
    min-height: 100vh;
    overflow-x: hidden;

    color: var(--about-white);
    background: var(--about-red-dark);
}

.about-page {
    min-height: 100vh;
    overflow: hidden;

    color: var(--about-white);

    background:
        radial-gradient(
            circle at 10% 6%,
            rgba(255, 212, 0, 0.18),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 27%,
            rgba(255, 255, 255, 0.09),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            var(--about-red-light) 0%,
            var(--about-red) 52%,
            var(--about-red-dark) 100%
        );
}

.about-page .container {
    width: min(1180px, 90%);
    margin-inline: auto;
}

.about-section {
    position: relative;
    padding: 105px 0;
}


/* ==================================================
   ABOUT HERO
================================================== */

.about-hero {
    position: relative;

    min-height: 100vh;
    padding: 145px 0 80px;

    display: flex;
    align-items: center;

    overflow: hidden;
}

.about-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        );

    background-size: 58px 58px;

    opacity: 0.65;
    pointer-events: none;
}

.about-hero-grid {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: 65px;
}


/* HERO TEXT */

.about-eyebrow {
    margin-bottom: 15px;

    color: var(--about-yellow);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.about-hero-copy h1 {
    margin: 0;

    color: var(--about-white);

    font-size: clamp(50px, 6vw, 82px);
    font-weight: 900;
    line-height: 1.03;
    letter-spacing: -4px;
}

.about-hero-copy h1 span {
    display: block;

    color: var(--about-yellow);
}

.about-hero-description {
    max-width: 620px;
    margin-top: 25px;

    color: var(--about-text);

    font-size: 16px;
    font-weight: 500;
    line-height: 1.85;
}

.about-hero-actions {
    margin-top: 31px;

    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}


/* ABOUT BUTTONS */

.about-button {
    position: relative;

    min-height: 44px;
    padding: 0 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: 13px;
    font-weight: 800;

    transition:
        transform 0.3s ease,
        color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.about-button:hover {
    transform: translateY(-4px);
}

.about-button::before {
    content: "";

    position: absolute;
    top: 0;
    left: -120%;

    width: 55%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.48),
            transparent
        );

    transform: skewX(-24deg);

    animation: aboutButtonShine 3.7s ease-in-out infinite;
}

.about-button-gold {
    color: var(--about-red-dark);
    background: var(--about-yellow);

    box-shadow:
        0 15px 32px rgba(255, 212, 0, 0.22);
}

.about-button-gold:hover {
    color: var(--about-red);
    background: var(--about-white);
}

.about-button-glass {
    color: var(--about-white);

    border-color: rgba(255, 255, 255, 0.38);

    background: rgba(255, 255, 255, 0.09);

    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}

.about-button-glass:hover {
    color: var(--about-red-dark);

    border-color: var(--about-white);
    background: var(--about-white);
}


/* MINI STATS */

.about-mini-stats {
    margin-top: 40px;

    display: flex;
    align-items: center;
    gap: 28px;
}

.about-mini-stats div {
    padding-right: 28px;

    border-right:
        1px solid rgba(255, 255, 255, 0.24);
}

.about-mini-stats div:last-child {
    padding-right: 0;
    border-right: 0;
}

.about-mini-stats strong {
    display: block;

    color: var(--about-white);

    font-size: 27px;
    font-weight: 900;
    line-height: 1;
}

.about-mini-stats span {
    display: block;
    margin-top: 6px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}


/* ==================================================
   HERO PRODUCT
================================================== */

.about-hero-visual {
    position: relative;
}

.about-product-stage {
    position: relative;

    min-height: 570px;

    display: grid;
    place-items: center;

    perspective: 1100px;
    isolation: isolate;
}

.about-product-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -2;

    width: 455px;
    height: 455px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 212, 0, 0.78) 0%,
            rgba(255, 120, 10, 0.25) 40%,
            transparent 72%
        );

    filter: blur(16px);

    transform: translate(-50%, -50%);

    animation:
        aboutGlowPulse 3.8s ease-in-out infinite;
}

.about-hero-product {
    position: relative;
    z-index: 4;

    width: min(440px, 88%);
    max-height: 540px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 32px 28px rgba(71, 0, 9, 0.46)
        )
        saturate(1.08);

    transform-origin: center bottom;
    transform-style: preserve-3d;

    animation:
        aboutProductFloat 5.7s ease-in-out infinite;
}

.about-product-shadow {
    position: absolute;
    left: 50%;
    bottom: 40px;
    z-index: -1;

    width: 270px;
    height: 43px;

    border-radius: 50%;

    background:
        rgba(70, 0, 8, 0.47);

    filter: blur(16px);

    transform: translateX(-50%);

    animation:
        aboutShadowMove 5.7s ease-in-out infinite;
}

.about-product-badge {
    position: absolute;
    right: 8px;
    bottom: 95px;
    z-index: 6;

    padding: 11px 17px;

    border-radius: 999px;

    color: var(--about-red-dark);
    background: var(--about-yellow);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;

    box-shadow:
        0 15px 30px rgba(74, 0, 9, 0.24);
}

/* STEAM */

.about-steam {
    position: absolute;
    top: 47px;
    z-index: 6;

    width: 23px;
    height: 100px;

    border-radius: 50%;

    background:
        linear-gradient(
            to top,
            transparent,
            rgba(255, 255, 255, 0.56),
            transparent
        );

    filter: blur(9px);

    opacity: 0;

    animation:
        aboutSteamRise 3.5s ease-in-out infinite;
}

.about-steam-one {
    left: 42%;
}

.about-steam-two {
    left: 52%;

    animation-delay: 1.1s;
}

.about-steam-three {
    left: 61%;

    animation-delay: 2.1s;
}


/* HERO BACKGROUND LIGHTS */

.about-hero-light {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.about-light-one {
    top: -150px;
    left: -180px;

    width: 430px;
    height: 430px;

    background:
        rgba(255, 212, 0, 0.11);

    filter: blur(24px);
}

.about-light-two {
    right: -210px;
    bottom: -220px;

    width: 520px;
    height: 520px;

    border:
        1px solid rgba(255, 255, 255, 0.12);
}


/* ==================================================
   STATISTICS CARDS
================================================== */

.about-statistics {
    padding: 5px 0 100px;
}

.about-statistics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.about-stat {
    position: relative;

    min-height: 225px;
    padding: 33px;

    overflow: hidden;

    border:
        1px solid var(--about-border);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.06)
        );

    box-shadow:
        var(--about-shadow);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.about-stat::before {
    content: "";

    position: absolute;
    top: -50px;
    right: -50px;

    width: 135px;
    height: 135px;

    border-radius: 50%;

    background:
        rgba(255, 212, 0, 0.14);
}

.about-stat:hover {
    transform:
        translateY(-9px) scale(1.01);

    border-color:
        rgba(255, 212, 0, 0.7);

    background:
        rgba(255, 255, 255, 0.14);

    box-shadow:
        0 32px 70px rgba(74, 0, 10, 0.32);
}

.about-stat-number {
    position: absolute;
    top: 16px;
    right: 23px;

    color:
        rgba(255, 255, 255, 0.11);

    font-size: 68px;
    font-weight: 900;
    line-height: 1;
}

.about-stat strong {
    position: relative;
    z-index: 2;

    display: block;
    margin-top: 37px;

    color: var(--about-yellow);

    font-size: 48px;
    font-weight: 900;
    line-height: 1;
}

.about-stat p {
    position: relative;
    z-index: 2;

    max-width: 275px;
    margin-top: 18px;

    color: var(--about-text);

    font-size: 13px;
    line-height: 1.75;
}


/* ==================================================
   SHARED ABOUT HEADING
================================================== */

.about-section-heading {
    max-width: 760px;
    margin: 0 auto 55px;

    text-align: center;
}

.about-section-label {
    margin-bottom: 11px;

    color: var(--about-yellow);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.about-section-heading h2,
.about-story-content h2 {
    margin: 0;

    color: var(--about-white);

    font-size: clamp(38px, 5vw, 60px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -3px;
}

.about-section-heading h2 span,
.about-story-content h2 span {
    color: var(--about-yellow);
}

.about-section-heading > p:last-child {
    margin-top: 17px;

    color: var(--about-text);

    font-size: 15px;
    line-height: 1.75;
}


/* ==================================================
   OUR STORY
================================================== */

.about-story {
    border-top:
        1px solid rgba(255, 255, 255, 0.09);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.09);

    background:
        rgba(67, 8, 9, 0.16);
}

.about-story-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: 64px;
}

.about-story-frame {
    position: relative;

    min-height: 550px;

    overflow: hidden;

    border:
        1px solid var(--about-border);

    border-radius: 29px;

    background:
        rgba(255, 255, 255, 0.1);

    box-shadow:
        var(--about-shadow);
}

.about-story-frame img {
    width: 100%;
    height: 100%;
    min-height: 550px;

    object-fit: cover;

    transition:
        transform 0.7s ease,
        filter 0.7s ease;
}

.about-story-frame:hover img {
    transform: scale(1.055);
    filter: saturate(1.08);
}

.about-story-image-label {
    position: absolute;
    left: 20px;
    bottom: 20px;

    padding: 11px 16px;

    border-radius: 999px;

    color: var(--about-red-dark);
    background: var(--about-yellow);

    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;

    box-shadow:
        0 12px 28px rgba(76, 0, 10, 0.24);
}

.about-story-content > p:not(.about-section-label) {
    margin-top: 19px;

    color: var(--about-text);

    font-size: 13px;
    line-height: 1.85;
}

.about-story-content blockquote {
    margin: 27px 0;
    padding: 18px 0 18px 20px;

    border-left:
        4px solid var(--about-yellow);

    color: var(--about-white);

    font-size: 17px;
    font-weight: 700;
    line-height: 1.65;
}

.about-story-features {
    display: grid;
    gap: 13px;
}

.about-story-features div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.about-story-features span {
    flex: 0 0 29px;

    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: var(--about-red-dark);
    background: var(--about-yellow);

    font-size: 12px;
    font-weight: 900;
}

.about-story-features p {
    color:
        rgba(255, 255, 255, 0.84);

    font-size: 13px;
}


/* ==================================================
   MISSION AND VISION
================================================== */

.about-purpose-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.about-purpose-card {
    position: relative;

    min-height: 365px;
    padding: 41px;

    overflow: hidden;

    border:
        1px solid var(--about-border);

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.06)
        );

    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.about-purpose-card:hover {
    transform: translateY(-9px);

    border-color:
        rgba(255, 212, 0, 0.65);

    background:
        rgba(255, 255, 255, 0.14);

    box-shadow:
        var(--about-shadow);
}

.about-purpose-index {
    position: absolute;
    right: 23px;
    bottom: -18px;

    color:
        rgba(255, 255, 255, 0.075);

    font-size: 145px;
    font-weight: 900;
    line-height: 1;
}

.about-purpose-icon {
    width: 57px;
    height: 57px;
    margin-bottom: 34px;

    display: grid;
    place-items: center;

    border-radius: 17px;

    color: var(--about-red-dark);
    background: var(--about-yellow);

    font-size: 26px;
    font-weight: 900;

    box-shadow:
        0 12px 26px rgba(78, 0, 10, 0.2);
}

.about-card-label {
    margin-bottom: 9px;

    color: var(--about-yellow);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.about-purpose-card h3 {
    position: relative;
    z-index: 2;

    color: var(--about-white);

    font-size: 30px;
    font-weight: 850;
    line-height: 1.18;
}

.about-purpose-card > p:last-child {
    position: relative;
    z-index: 2;

    max-width: 480px;
    margin-top: 18px;

    color: var(--about-text);

    font-size: 13px;
    line-height: 1.8;
}


/* ==================================================
   WHY CUSTOMERS LOVE US
================================================== */

.about-values {
    border-top:
        1px solid rgba(255, 255, 255, 0.09);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.09);

    background:
        rgba(67, 8, 9, 0.15);
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 23px;
}

.about-value-card {
    position: relative;

    min-height: 320px;
    padding: 35px 29px;

    overflow: hidden;

    border:
        1px solid var(--about-border);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.055)
        );

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.about-value-card:hover {
    transform:
        translateY(-9px) scale(1.01);

    border-color:
        rgba(255, 212, 0, 0.65);

    background:
        rgba(255, 255, 255, 0.14);

    box-shadow:
        var(--about-shadow);
}

.about-value-large-number {
    position: absolute;
    top: 10px;
    right: 17px;

    color:
        rgba(255, 255, 255, 0.075);

    font-size: 90px;
    font-weight: 900;
    line-height: 1;
}

.about-value-icon {
    position: relative;
    z-index: 2;

    width: 55px;
    height: 55px;
    margin-bottom: 53px;

    display: grid;
    place-items: center;

    border-radius: 16px;

    color: var(--about-red-dark);
    background: var(--about-yellow);

    font-size: 23px;
    font-weight: 900;

    box-shadow:
        0 12px 25px rgba(78, 0, 10, 0.2);
}

.about-value-card h3 {
    position: relative;
    z-index: 2;

    color: var(--about-white);

    font-size: 22px;
    font-weight: 800;
}

.about-value-card p {
    position: relative;
    z-index: 2;

    margin-top: 12px;

    color: var(--about-text);

    font-size: 13px;
    line-height: 1.75;
}


/* ==================================================
   OUTLET VIDEO CARDS
================================================== */

.about-outlets {
    background:
        radial-gradient(
            circle at center,
            rgba(255, 212, 0, 0.08),
            transparent 50%
        );
}

.outlet-media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 23px;
}

.outlet-media-card {
    overflow: hidden;

    border:
        1px solid var(--about-border);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.1);

    box-shadow:
        0 20px 45px rgba(72, 0, 10, 0.2);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.outlet-media-card:hover {
    transform: translateY(-9px);

    border-color:
        rgba(255, 212, 0, 0.7);

    box-shadow:
        var(--about-shadow);
}

.outlet-video-trigger {
    position: relative;

    width: 100%;
    height: 320px;

    display: block;
    overflow: hidden;

    padding: 0;
    border: 0;
    border-radius: inherit;

    color: inherit;
    background: transparent;

    cursor: pointer;
    text-align: left;
}

.outlet-video-trigger img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.65s ease,
        filter 0.65s ease;
}

.outlet-media-card:hover img {
    transform: scale(1.075);
    filter: brightness(0.82) saturate(1.08);
}

.outlet-media-overlay {
    position: absolute;
    inset: 0;

    padding: 24px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;

    background:
        linear-gradient(
            to top,
            rgba(67, 0, 9, 0.96),
            rgba(67, 0, 9, 0.08) 63%
        );
}

.outlet-play-button {
    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(255, 255, 255, 0.6);

    border-radius: 50%;

    color: var(--about-red-dark);
    background: var(--about-yellow);

    font-size: 17px;

    box-shadow:
        0 14px 30px rgba(75, 0, 10, 0.3);

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.outlet-media-card:hover
.outlet-play-button {
    transform: scale(1.11);

    background: var(--about-white);
}

.outlet-media-overlay small {
    color: var(--about-yellow);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.outlet-media-overlay h3 {
    margin-top: 6px;

    color: var(--about-white);

    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}


/* ==================================================
   VIDEO MODAL
================================================== */

.outlet-video-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;

    padding: 24px;

    display: grid;
    place-items: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.outlet-video-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.outlet-modal-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(43, 0, 6, 0.86);

    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}

.outlet-modal-dialog {
    position: relative;
    z-index: 2;

    width: min(920px, 96%);
    max-height: 90vh;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius: 21px;

    background: #3c0708;

    box-shadow:
        0 35px 90px rgba(0, 0, 0, 0.52);

    transform:
        translateY(30px) scale(0.96);

    transition:
        transform 0.35s ease;
}

.outlet-video-modal.is-open
.outlet-modal-dialog {
    transform:
        translateY(0) scale(1);
}

.outlet-modal-header {
    min-height: 72px;
    padding: 13px 17px 13px 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.13);

    background:
        linear-gradient(
            135deg,
            var(--about-red),
            var(--about-red-dark)
        );
}

.outlet-modal-header h2 {
    color: var(--about-white);

    font-size: 16px;
    font-weight: 800;
}

.outlet-modal-close {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 50%;

    color: var(--about-red-dark);
    background: var(--about-yellow);

    font-size: 27px;
    line-height: 1;

    cursor: pointer;
}

.outlet-modal-video-wrap {
    position: relative;

    background: #000000;
}

.outlet-modal-video-wrap video {
    display: block;

    width: 100%;
    max-height: calc(90vh - 72px);

    background: #000000;
}

.outlet-video-status {
    position: absolute;
    inset: 0;

    display: none;
    place-items: center;

    padding: 25px;

    color: var(--about-white);
    background: #3c0708;

    text-align: center;
    font-size: 13px;
}

.outlet-video-status.is-visible {
    display: grid;
}

body.outlet-modal-open {
    overflow: hidden;
}


/* ==================================================
   FINAL CTA
================================================== */

.about-final-cta {
    position: relative;

    padding: 105px 0;

    overflow: hidden;

    text-align: center;

    border-top:
        1px solid rgba(255, 255, 255, 0.09);

    background:
        radial-gradient(
            circle at center,
            rgba(255, 212, 0, 0.18),
            transparent 52%
        ),
        linear-gradient(
            135deg,
            var(--about-red),
            var(--about-red-dark)
        );
}

.about-final-cta-content {
    max-width: 850px;
}

.about-final-cta-content > p {
    color: var(--about-yellow);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.about-final-cta-content h2 {
    margin-top: 13px;

    color: var(--about-white);

    font-size: clamp(40px, 6vw, 68px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -3px;
}

.about-final-actions {
    margin-top: 32px;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}


/* ==================================================
   REVEAL ANIMATION
================================================== */

.reveal-item {
    opacity: 0;

    transform: translateY(38px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal-item.is-visible {
    opacity: 1;

    transform: translateY(0);
}


/* ==================================================
   ABOUT KEYFRAMES
================================================== */

@keyframes aboutButtonShine {
    0%,
    55% {
        left: -120%;
    }

    100% {
        left: 160%;
    }
}

@keyframes aboutProductFloat {
    0%,
    100% {
        transform:
            translateY(0)
            rotateX(1deg)
            rotateY(-6deg)
            rotateZ(-1deg);
    }

    50% {
        transform:
            translateY(-17px)
            rotateX(-1deg)
            rotateY(6deg)
            rotateZ(1deg);
    }
}

@keyframes aboutGlowPulse {
    0%,
    100% {
        opacity: 0.7;

        transform:
            translate(-50%, -50%)
            scale(0.94);
    }

    50% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.07);
    }
}

@keyframes aboutShadowMove {
    0%,
    100% {
        opacity: 0.78;

        transform:
            translateX(-50%)
            scale(1);
    }

    50% {
        opacity: 0.45;

        transform:
            translateX(-50%)
            scale(0.83);
    }
}

@keyframes aboutSteamRise {
    0% {
        opacity: 0;

        transform:
            translateY(48px)
            translateX(0)
            scale(0.7);
    }

    35% {
        opacity: 0.54;
    }

    100% {
        opacity: 0;

        transform:
            translateY(-75px)
            translateX(17px)
            scale(1.4);
    }
}


/* ==================================================
   ABOUT RESPONSIVE — TABLET
================================================== */

@media (max-width: 1050px) {

    .about-hero-grid,
    .about-story-grid {
        grid-template-columns: 1fr;
    }

    .about-hero-copy {
        max-width: 760px;
        margin-inline: auto;

        text-align: center;
    }

    .about-hero-actions,
    .about-mini-stats {
        justify-content: center;
    }

    .about-product-stage {
        min-height: 515px;
    }

    .about-story-frame,
    .about-story-frame img {
        min-height: 490px;
    }

    .about-purpose-grid {
        grid-template-columns: 1fr;
    }

    .about-values-grid,
    .outlet-media-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* ==================================================
   ABOUT RESPONSIVE — PHONE
================================================== */

@media (max-width: 720px) {

    .about-section {
        padding: 75px 0;
    }

    .about-hero {
        min-height: auto;
        padding: 125px 0 60px;
    }

    .about-hero-grid {
        gap: 32px;
    }

    .about-eyebrow {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .about-hero-copy h1 {
        font-size: 45px;
        letter-spacing: -2px;
    }

    .about-hero-description {
        font-size: 13px;
        line-height: 1.75;
    }

    .about-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .about-button {
        width: 100%;
    }

    .about-mini-stats {
        gap: 14px;
    }

    .about-mini-stats div {
        padding-right: 14px;
    }

    .about-mini-stats strong {
        font-size: 21px;
    }

    .about-mini-stats span {
        font-size: 7px;
    }

    .about-product-stage {
        min-height: 400px;
    }

    .about-product-glow {
        width: 305px;
        height: 305px;
    }

    .about-hero-product {
        width: min(315px, 90%);
        max-height: 385px;
    }

    .about-product-shadow {
        bottom: 25px;

        width: 205px;
    }

    .about-product-badge {
        right: 0;
        bottom: 62px;

        padding: 8px 11px;

        font-size: 7px;
    }

    .about-steam {
        top: 26px;
        height: 75px;
    }

    .about-statistics {
        padding-bottom: 70px;
    }

    .about-statistics-grid,
    .about-values-grid,
    .outlet-media-grid {
        grid-template-columns: 1fr;
    }

    .about-stat {
        min-height: 190px;
    }

    .about-story-grid {
        gap: 38px;
    }

    .about-story-frame,
    .about-story-frame img {
        min-height: 375px;
    }

    .about-purpose-card {
        min-height: 325px;
        padding: 30px 24px;
    }

    .about-purpose-card h3 {
        font-size: 26px;
    }

    .about-value-card {
        min-height: 280px;
    }

    .outlet-video-trigger {
        height: 280px;
    }

    .about-section-heading {
        margin-bottom: 40px;
    }

    .about-section-heading h2,
    .about-story-content h2 {
        font-size: 38px;
        letter-spacing: -2px;
    }

    .about-final-cta {
        padding: 78px 0;
    }

    .about-final-cta-content h2 {
        font-size: 38px;
        letter-spacing: -2px;
    }
}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    .about-hero-product,
    .about-product-glow,
    .about-product-shadow,
    .about-steam,
    .about-button::before {
        animation: none;
    }

    .reveal-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==================================================
   HOME PAGE ASSET + SCOPE FIXES
================================================== */

body.home-page {
    background: var(--white);
}

.home-page .food-image img {
    display: block;
    object-fit: cover;
    object-position: center;
    padding: 0;
}

.home-page .feature-card .food-image img {
    padding: 0;
}

.home-page .hero-bucket-stage {
    min-height: 580px;
}

/* ==================================================
   UNIFIED ANIMATED WEBSITE BACKGROUND
   HOME + MENU + ABOUT
================================================== */

body.site-theme {
    position: relative;
    min-height: 100vh;
    isolation: isolate;
    overflow-x: hidden;
    color: #ffffff;

    background:
        radial-gradient(
            circle at 13% 12%,
            rgba(255, 212, 0, 0.20),
            transparent 28%
        ),
        radial-gradient(
            circle at 87% 72%,
            rgba(255, 124, 40, 0.22),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #430809 0%,
            #7a0000 38%,
            #c40000 68%,
            #f20a0a 100%
        );

    background-size: 190% 190%;
    background-attachment: fixed;

    animation:
        siteThemeGradient 15s ease-in-out infinite;
}

body.site-theme::before,
body.site-theme::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(45px);
}

body.site-theme::before {
    top: 10%;
    left: -130px;
    width: 370px;
    height: 370px;
    background: rgba(255, 212, 0, 0.15);
    animation: siteThemeLightOne 10s ease-in-out infinite;
}

body.site-theme::after {
    right: -150px;
    bottom: 8%;
    width: 430px;
    height: 430px;
    background: rgba(255, 255, 255, 0.08);
    animation: siteThemeLightTwo 12s ease-in-out infinite;
}

body.site-theme > header,
body.site-theme > main,
body.site-theme > footer,
body.site-theme > .back-to-top,
body.site-theme > .outlet-video-modal {
    z-index: 1;
}

body.site-theme .hero-section,
body.site-theme .menu-page,
body.site-theme .about-page,
body.site-theme .specials-section,
body.site-theme .experience-section,
body.site-theme .home-cta,
body.site-theme .about-story,
body.site-theme .about-purpose,
body.site-theme .about-values,
body.site-theme .about-outlets,
body.site-theme .about-final-cta {
    background: transparent !important;
}

body.site-theme .specials-section,
body.site-theme .experience-section,
body.site-theme .about-story,
body.site-theme .about-values {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);

    background:
        linear-gradient(
            135deg,
            rgba(75, 0, 11, 0.20),
            rgba(255, 255, 255, 0.045)
        ) !important;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.site-theme .section-heading h2,
body.site-theme .experience-content h2,
body.site-theme .experience-content h3,
body.site-theme .quality-item h3 {
    color: #ffffff;
}

body.site-theme .section-label,
body.site-theme .section-heading h2 span,
body.site-theme .experience-content h2 span {
    color: #ffd400;
}

body.site-theme .section-heading > p:last-child,
body.site-theme .experience-content > p:not(.section-label),
body.site-theme .quality-item p {
    color: rgba(255, 255, 255, 0.78);
}

body.site-theme .food-card,
body.site-theme .menu-card {
    color: #151c2a;
    background: #ffffff;
}

body.site-theme .site-footer {
    background:
        linear-gradient(
            145deg,
            rgba(12, 13, 18, 0.98),
            rgba(24, 8, 13, 0.98)
        );
}

@keyframes siteThemeGradient {
    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes siteThemeLightOne {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(150px, 90px) scale(1.18);
    }
}

@keyframes siteThemeLightTwo {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-130px, -90px) scale(1.15);
    }
}


/* ==================================================
   NEW HOME VIDEO HERO
================================================== */

.home-page.site-theme .hero-section.video-hero {
    position: relative;
    min-height: 100svh;
    padding: 145px 0 88px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.home-page.site-theme .video-hero .hero-grid {
    position: relative;
    z-index: 4;
    grid-template-columns: minmax(0, 1.04fr) minmax(340px, 0.76fr);
    gap: clamp(45px, 6vw, 90px);
}

.hero-background-animation,
.hero-grid-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-background-animation {
    z-index: 0;
    overflow: hidden;
}

.hero-grid-pattern {
    opacity: 0.32;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.055) 1px,
            transparent 1px
        );

    background-size: 58px 58px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.95),
            transparent 92%
        );

    animation:
        heroGridDrift 18s linear infinite;
}

.hero-orb {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(10px);
}

.hero-orb-one {
    top: 12%;
    left: 5%;
    width: 220px;
    height: 220px;
    background: rgba(255, 212, 0, 0.12);
    animation: heroOrbOne 9s ease-in-out infinite;
}

.hero-orb-two {
    top: 18%;
    right: 8%;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.04);
    animation: heroOrbTwo 11s ease-in-out infinite;
}

.hero-orb-three {
    right: 33%;
    bottom: -120px;
    width: 300px;
    height: 300px;
    background: rgba(255, 115, 32, 0.12);
    animation: heroOrbThree 10s ease-in-out infinite;
}

.hero-particles span {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 212, 0, 0.72);
    box-shadow: 0 0 20px rgba(255, 212, 0, 0.58);
    animation: heroParticleFloat 8s ease-in-out infinite;
}

.hero-particles span:nth-child(1) {
    left: 8%;
    top: 72%;
}

.hero-particles span:nth-child(2) {
    left: 23%;
    top: 20%;
    animation-delay: -1s;
}

.hero-particles span:nth-child(3) {
    left: 42%;
    top: 82%;
    animation-delay: -2s;
}

.hero-particles span:nth-child(4) {
    left: 61%;
    top: 16%;
    animation-delay: -3s;
}

.hero-particles span:nth-child(5) {
    left: 73%;
    top: 75%;
    animation-delay: -4s;
}

.hero-particles span:nth-child(6) {
    left: 88%;
    top: 30%;
    animation-delay: -5s;
}

.hero-particles span:nth-child(7) {
    left: 94%;
    top: 68%;
    animation-delay: -6s;
}

.hero-particles span:nth-child(8) {
    left: 52%;
    top: 46%;
    animation-delay: -7s;
}

.home-page.site-theme .video-hero .hero-title {
    max-width: 760px;
}

.home-page.site-theme .video-hero .hero-description {
    max-width: 640px;
}

.hero-video-shell {
    --video-rotate-x: 0deg;
    --video-rotate-y: 0deg;

    position: relative;
    width: min(430px, 100%);
    margin-left: auto;
    perspective: 1200px;
}

.hero-video-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 112%;
    height: 88%;
    border-radius: 45%;
    background:
        radial-gradient(
            circle,
            rgba(255, 212, 0, 0.42),
            rgba(255, 76, 34, 0.18) 48%,
            transparent 72%
        );
    filter: blur(32px);
    transform: translate(-50%, -50%);
    animation: heroVideoGlow 4.6s ease-in-out infinite;
}

.hero-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 13;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 34px;

    background: #250607 url("../image/combo.jpg") center / cover no-repeat;

    box-shadow:
        0 42px 85px rgba(70, 0, 9, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);

    transform:
        rotateX(var(--video-rotate-x))
        rotateY(var(--video-rotate-y));

    transform-style: preserve-3d;

    transition:
        transform 0.18s ease-out,
        box-shadow 0.35s ease;
}

.hero-video-frame::before {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    z-index: 4;
    width: 48%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.24),
            transparent
        );

    transform: skewX(-19deg);

    animation:
        heroVideoShine 5.5s ease-in-out infinite;

    pointer-events: none;
}

.hero-video-shell:hover .hero-video-frame {
    box-shadow:
        0 48px 100px rgba(64, 0, 9, 0.50),
        0 0 0 1px rgba(255, 212, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.hero-promo-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    background: #250607 url("../image/combo.jpg") center / cover no-repeat;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: opacity;
}

.hero-video-frame.video-unavailable .hero-promo-video {
    opacity: 0;
}

.hero-video-frame.is-buffering .hero-promo-video {
    opacity: 0.78;
}

.hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(50, 0, 8, 0.94) 0%,
            rgba(50, 0, 8, 0.12) 46%,
            rgba(17, 0, 3, 0.24) 100%
        );
}

.hero-video-brand,
.hero-sound-toggle,
.hero-video-caption {
    position: absolute;
    z-index: 5;
}

.hero-video-brand {
    top: 20px;
    left: 20px;

    min-height: 30px;
    padding: 0 14px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;

    color: #ffffff;
    background: rgba(10, 10, 12, 0.30);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;

    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}

.hero-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffd400;
    box-shadow: 0 0 0 5px rgba(255, 212, 0, 0.13);
    animation: heroLiveDot 1.8s ease-in-out infinite;
}

.hero-sound-toggle {
    top: 20px;
    right: 20px;

    min-height: 30px;
    padding: 0 13px;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;

    color: #ffffff;
    background: rgba(10, 10, 12, 0.30);

    font-size: 10px;
    font-weight: 800;
    cursor: pointer;

    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.hero-sound-toggle:hover {
    color: #610000;
    background: #ffd400;
    transform: translateY(-2px);
}

.hero-video-caption {
    right: 25px;
    bottom: 26px;
    left: 25px;
}

.hero-video-caption small {
    display: block;
    margin-bottom: 7px;
    color: #ffd400;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.hero-video-caption strong {
    display: block;
    color: #ffffff;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -1.5px;
}

.hero-price-badge {
    position: absolute;
    left: -44px;
    bottom: 42px;
    z-index: 8;

    min-width: 150px;
    padding: 16px 20px;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 21px;

    color: #610000;
    background: #ffd400;

    box-shadow:
        0 22px 45px rgba(74, 0, 10, 0.30);

    animation:
        heroPriceFloat 3.6s ease-in-out infinite;
}

.hero-price-badge small {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.hero-price-badge strong {
    display: block;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
}

.hero-price-badge strong span {
    font-size: 21px;
}

.hero-ring {
    position: absolute;
    z-index: -1;
    display: block;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.20);
}

.hero-ring-one {
    top: 11%;
    right: -52px;
    width: 110px;
    height: 110px;
    animation: heroRingSpin 9s linear infinite;
}

.hero-ring-two {
    right: -34px;
    bottom: 8%;
    width: 64px;
    height: 64px;
    border-color: rgba(255, 212, 0, 0.44);
    animation: heroRingFloat 5s ease-in-out infinite;
}

@keyframes heroGridDrift {
    to {
        background-position: 58px 58px;
    }
}

@keyframes heroOrbOne {
    50% {
        transform: translate(70px, 45px) scale(1.14);
    }
}

@keyframes heroOrbTwo {
    50% {
        transform: translate(-55px, 70px) scale(0.90);
    }
}

@keyframes heroOrbThree {
    50% {
        transform: translate(-50px, -50px) scale(1.18);
    }
}

@keyframes heroParticleFloat {
    0%,
    100% {
        opacity: 0.25;
        transform: translateY(0) scale(0.75);
    }

    50% {
        opacity: 1;
        transform: translateY(-48px) scale(1.2);
    }
}

@keyframes heroVideoGlow {
    0%,
    100% {
        opacity: 0.72;
        transform: translate(-50%, -50%) scale(0.94);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.06);
    }
}

@keyframes heroVideoShine {
    0%,
    58% {
        left: -130%;
    }

    100% {
        left: 160%;
    }
}

@keyframes heroLiveDot {
    50% {
        transform: scale(1.25);
        box-shadow: 0 0 0 8px rgba(255, 212, 0, 0.08);
    }
}

@keyframes heroPriceFloat {
    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-10px) rotate(1deg);
    }
}

@keyframes heroRingSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes heroRingFloat {
    50% {
        transform: translateY(-20px);
    }
}


/* ==================================================
   THEME MOTION ACCESSIBILITY
================================================== */

@media (prefers-reduced-motion: reduce) {
    body.site-theme,
    body.site-theme::before,
    body.site-theme::after,
    .hero-grid-pattern,
    .hero-orb,
    .hero-particles span,
    .hero-video-glow,
    .hero-video-frame::before,
    .hero-live-dot,
    .hero-price-badge,
    .hero-ring {
        animation: none !important;
    }

    .hero-video-frame {
        transform: none !important;
    }
}
/* ==================================================
   FINAL HOME SECTION COLOUR FIX
   Keep this at the bottom of style.css
================================================== */

/* OUR DELICIOUS SPECIALS */

body.home-page .specials-section,
body.site-theme.home-page .specials-section {
    background: #fff7ed !important;
    color: #171717 !important;
    border-top: none !important;
    border-bottom: none !important;
}

body.home-page .specials-section .section-heading h2,
body.site-theme.home-page .specials-section .section-heading h2 {
    color: #171717 !important;
}

body.home-page .specials-section .section-heading h2 span,
body.site-theme.home-page .specials-section .section-heading h2 span {
    color: #c40000 !important;
}

body.home-page .specials-section .section-label,
body.site-theme.home-page .specials-section .section-label {
    color: #c40000 !important;
}

body.home-page .specials-section .section-heading > p:last-child,
body.site-theme.home-page .specials-section .section-heading > p:last-child {
    color: #626262 !important;
}


/* MADE FRESH — SERVED WITH PASSION */

body.home-page .experience-section,
body.site-theme.home-page .experience-section {
    background: #ffffff !important;
    color: #171717 !important;
    border-top: none !important;
    border-bottom: none !important;
}

body.home-page .experience-section .experience-content h2,
body.home-page .experience-section .quality-item h3,
body.site-theme.home-page .experience-section .experience-content h2,
body.site-theme.home-page .experience-section .quality-item h3 {
    color: #171717 !important;
}

body.home-page .experience-section .experience-content h2 span,
body.site-theme.home-page .experience-section .experience-content h2 span {
    color: #c40000 !important;
}

body.home-page .experience-section .section-label,
body.site-theme.home-page .experience-section .section-label {
    color: #c40000 !important;
}

body.home-page .experience-section .experience-content > p,
body.home-page .experience-section .quality-item p,
body.site-theme.home-page .experience-section .experience-content > p,
body.site-theme.home-page .experience-section .quality-item p {
    color: #626262 !important;
}/* =========================================
   CUSTOMER REVIEWS
========================================= */

.reviews-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    color: #ffffff;

    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(255, 212, 0, 0.14),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(255, 255, 255, 0.08),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #a00000 0%,
            #d40000 45%,
            #f20a0a 100%
        );
}

.reviews-section .container {
    position: relative;
    z-index: 2;
}

.reviews-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(8px);
}

.reviews-glow-one {
    width: 350px;
    height: 350px;
    top: -180px;
    left: -120px;
    background: rgba(255, 212, 0, 0.13);
    animation: reviewGlowFloat 8s ease-in-out infinite;
}

.reviews-glow-two {
    width: 300px;
    height: 300px;
    right: -100px;
    bottom: -150px;
    background: rgba(255, 255, 255, 0.08);
    animation: reviewGlowFloat 9s ease-in-out infinite reverse;
}

@keyframes reviewGlowFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-20px) scale(1.08);
    }
}

.reviews-heading {
    max-width: 780px;
    margin: 0 auto 55px;
    text-align: center;
}

.reviews-label {
    margin-bottom: 12px;
    color: #ffd400;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.reviews-heading h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(38px, 6vw, 68px);
    font-weight: 900;
    line-height: 1.05;
}

.reviews-heading > p:not(.reviews-label) {
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 17px;
}

.reviews-rating {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
}

.reviews-stars,
.review-card-stars {
    color: #ffd400;
    letter-spacing: 5px;
}

.reviews-rating strong {
    color: #ffffff;
    font-size: 16px;
}

/* Temporary online-order closure state. Controlled by cb-order-page.js. */
.ordering-closed-notice {
    position: fixed;
    z-index: 10000;
    right: 22px;
    bottom: 22px;
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .22s ease, transform .22s ease;
}

.ordering-closed-notice.is-visible {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}

.ordering-closed-notice__content {
    position: relative;
    width: 100%;
    padding: 30px;
    border: 1px solid rgba(255, 216, 23, 0.54);
    border-radius: 28px;
    color: #fff;
    background: linear-gradient(145deg, #3b0306, #130103);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48);
    text-align: center;
}

.ordering-closed-notice__content > p:first-child {
    margin: 0 0 12px;
    color: #ffd817;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ordering-closed-notice h1 {
    margin: 0;
    font-size: clamp(30px, 7vw, 52px);
    line-height: 1;
}

.ordering-closed-notice h2 {
    margin: 0;
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    line-height: 1.1;
}

.ordering-closed-notice h1 + p {
    margin: 20px auto 28px;
    max-width: 440px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.6;
}

.ordering-closed-notice .button { margin: 6px; }
.ordering-closed-notice__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
}

@media (max-width: 600px) {
    .ordering-closed-notice {
        right: 16px;
        bottom: 92px;
    }
}

/* Performance mode: preserve the design but remove continuous expensive paints. */
.home-page .hero-promo-video { pointer-events: none; }
.home-page .hero-video-glow,
.home-page .hero-video-frame::before { animation: none !important; }
.home-page .reviews-glow,
.home-page .hero-orb,
.home-page .hero-particle,
.home-page .hero-ring,
.home-page .glass-navbar::after,
.home-page .glass-visit-button::before { animation: none !important; }

@media (min-width: 768px) {
    /* Avoid repeated 3D repainting over the playing hero video on laptops. */
    .home-page .hero-video-shell { perspective: none; }
    .home-page .hero-video-frame {
        transform: translateZ(0) !important;
        transform-style: flat;
        transition: box-shadow 0.2s ease;
    }

    /*
       Desktop performance mode: retain the visual design but remove effects
       that continuously repaint behind the video and during page scrolling.
    */
    body.site-theme {
        /* Restore the desktop red-gold gradient motion without restoring the
           heavier floating layers that caused laptop scrolling lag. */
        background-size: 190% 190%;
        background-attachment: fixed;
        animation: siteThemeGradient 15s ease-in-out infinite !important;
    }

    body.site-theme::before,
    body.site-theme::after,
    .home-page .hero-orb,
    .home-page .hero-particles,
    .home-page .hero-grid-pattern,
    .home-page .hero-ring,
    .home-page .reviews-glow {
        display: none !important;
    }

    body.site-theme .specials-section,
    body.site-theme .experience-section,
    body.site-theme .about-story,
    body.site-theme .about-values,
    .site-header .glass-navbar,
    .site-header .glass-nav-links,
    .site-header .glass-theme-toggle,
    .site-header .glass-visit-button,
    .hero-video-brand,
    .hero-sound-toggle {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .home-page .home-scroll-card,
    .home-page .home-scroll-card:not(.visible),
    .home-page .home-scroll-card.visible,
    .home-page .home-scroll-visual,
    .home-page .home-scroll-visual.visible {
        filter: none !important;
        clip-path: none !important;
        transform: none !important;
        transition: opacity 0.25s ease !important;
    }

    .home-page .home-scroll-card:not(.visible) {
        opacity: 0;
    }
}

@media (max-width: 900px) {
    .site-header.glass-header,
    .site-header .glass-navbar,
    .site-header .glass-theme-toggle,
    .site-header .glass-visit-button { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    /* Keep the main experience visible on phones; the poster image covers any video-load failure. */
    .home-page .hero-promo-video { display: block; }
    .home-page .hero-orb,
    .home-page .hero-particle,
    .home-page .reviews-glow { display: none; }
    .home-page .home-scroll-card:not(.visible) { filter: none; }
}

/* The home hero has its own visible surface on phones. Animate that surface
   directly so mobile has the same moving red-gold gradient as desktop. */
@media (max-width: 767px) {
    .home-page.site-theme .hero-section.video-hero {
        background:
            radial-gradient(circle at 13% 12%, rgba(255, 212, 0, 0.20), transparent 28%),
            radial-gradient(circle at 87% 72%, rgba(255, 124, 40, 0.22), transparent 30%),
            linear-gradient(135deg, #430809 0%, #7a0000 38%, #c40000 68%, #f20a0a 100%) !important;
        background-size: 190% 190%;
        background-position: 0% 50%;
        animation: chickbuck-mobile-hero-gradient 15s ease-in-out infinite;
    }

    html[data-chickbuck-dark] .home-page.site-theme .hero-section.video-hero {
        background:
            radial-gradient(circle at 15% 12%, rgba(255, 200, 0, 0.10), transparent 28%),
            radial-gradient(circle at 85% 72%, rgba(210, 25, 40, 0.16), transparent 31%),
            linear-gradient(135deg, #090506 0%, #16070a 42%, #2c070d 72%, #420810 100%) !important;
        background-size: 190% 190%;
        animation: chickbuck-mobile-hero-gradient 15s ease-in-out infinite;
    }
}

@keyframes chickbuck-mobile-hero-gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.reviews-slider {
    width: 100%;
    overflow: hidden;
}

/* Cookie choice banner used before Google Analytics is loaded. */
.cookie-consent-banner {
    position: fixed;
    z-index: 9999;
    right: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 18px;
    width: min(620px, calc(100vw - 36px));
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 18px;
    background: #2c0508;
    color: #fff;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35);
}

.cookie-consent-banner strong { font-size: 18px; }
.cookie-consent-banner p { margin: 5px 0 0; line-height: 1.45; }
.cookie-consent-banner a { color: #ffd400; }
.cookie-consent-actions { display: flex; flex: 0 0 auto; gap: 10px; }
.cookie-consent-actions button,
.cookie-settings-button {
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.cookie-consent-reject,
.cookie-settings-button { background: transparent; }
.cookie-consent-accept { background: #ffd400; border-color: #ffd400 !important; color: #76070c !important; }
.cookie-settings-button {
    position: fixed;
    z-index: 9998;
    right: 18px;
    bottom: 18px;
    font-size: 13px;
    max-width: calc(100vw - 36px);
    white-space: nowrap;
}
.cookie-consent-banner:has(~ .cookie-settings-button) ~ .cookie-settings-button { display: none; }
@media (max-width: 640px) {
    .cookie-consent-banner { right: 12px; bottom: 12px; width: calc(100vw - 24px); align-items: stretch; flex-direction: column; }
    .cookie-consent-actions { width: 100%; }
    .cookie-consent-actions button { flex: 1; }
    .cookie-settings-button { right: 12px; bottom: 12px; }
}

@media (max-width: 767px) {
    /* Keep cookie controls clear of the fixed five-item mobile navigation. */
    body.has-mobile-bottom-nav .cookie-consent-banner {
        right: 12px;
        bottom: calc(100px + env(safe-area-inset-bottom));
        width: calc(100vw - 24px);
        z-index: 7001;
    }

    body.has-mobile-bottom-nav .cookie-settings-button {
        right: 12px;
        bottom: calc(100px + env(safe-area-inset-bottom));
        z-index: 7001;
        min-height: 38px;
        padding: 7px 12px;
        font-size: 12px;
    }
}

.reviews-track {
    display: flex;
    gap: 28px;
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.review-card {
    flex: 0 0 calc(50% - 14px);
    min-height: 305px;
    padding: 38px;
    color: #171717;

    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.97),
            rgba(255, 247, 239, 0.94)
        );

    box-shadow:
        0 25px 55px rgba(77, 0, 10, 0.20);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.review-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 32px 70px rgba(77, 0, 10, 0.28);
}

.review-user {
    display: flex;
    align-items: center;
    gap: 17px;
}

.review-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 62px;
    width: 62px;
    height: 62px;

    color: #ffffff;
    font-size: 17px;
    font-weight: 800;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #c40000,
            #f20a0a
        );

    box-shadow:
        0 12px 25px rgba(196, 0, 0, 0.25);
}

.review-user h3 {
    margin: 0;
    color: #171717;
    font-size: 16px;
    font-weight: 800;
}

.review-user p {
    margin: 4px 0 0;
    color: #8b8b8b;
    font-size: 13px;
}

.review-card-stars {
    margin-top: 26px;
    font-size: 19px;
}

.review-message {
    margin: 21px 0 0;
    color: #656565;
    font-size: 16px;
    line-height: 1.85;
}

.reviews-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    margin-top: 38px;
}

.review-arrow {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;

    color: #5a0000;
    font-size: 22px;
    cursor: pointer;

    border: none;
    border-radius: 50%;
    background: #ffd400;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.review-arrow:hover {
    transform: scale(1.08);
    background: #ffffff;
}

.review-dots {
    display: flex;
    align-items: center;
    gap: 9px;
}

.review-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    cursor: pointer;

    border: none;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.42);

    transition:
        width 0.3s ease,
        background 0.3s ease;
}

.review-dot.active {
    width: 28px;
    background: #ffd400;
}


/* Reviews responsive */

@media (max-width: 768px) {
    .reviews-section {
        padding: 85px 0;
    }

    .review-card {
        flex: 0 0 100%;
        min-height: 320px;
        padding: 28px;
    }

    .reviews-track {
        gap: 20px;
    }

    .reviews-heading h2 {
        font-size: 41px;
    }
}

/* ==================================================
   CHICK BUCK — APPLE LIQUID GLASS NAVIGATION
   Clean final navbar rules
================================================== */

.site-header.glass-header {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 5000;
    width: min(1120px, calc(100% - 40px));
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: translateX(-50%);
    transition: top 0.35s ease, width 0.35s ease;
}

.site-header.glass-header.scrolled {
    top: 10px;
}

.site-header .glass-navbar {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 72px;
    padding: 8px 12px 8px 14px;
    display: grid;
    grid-template-columns: minmax(205px, 1fr) auto minmax(150px, 1fr);
    align-items: center;
    gap: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.44);
    border-radius: 36px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.23), rgba(255, 255, 255, 0.07)),
        rgba(70, 7, 8, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.76),
        inset 0 -1px 0 rgba(255, 255, 255, 0.10),
        0 20px 48px rgba(61, 0, 10, 0.25),
        0 4px 16px rgba(0, 0, 0, 0.13);
    backdrop-filter: blur(28px) saturate(185%) brightness(1.06);
    -webkit-backdrop-filter: blur(28px) saturate(185%) brightness(1.06);
    transition:
        min-height 0.35s ease,
        padding 0.35s ease,
        border-radius 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.site-header .glass-navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(115deg,
            rgba(255, 255, 255, 0.34) 0%,
            rgba(255, 255, 255, 0.08) 25%,
            rgba(255, 255, 255, 0.02) 58%,
            rgba(255, 255, 255, 0.18) 100%);
}

.site-header .glass-navbar::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -42%;
    z-index: -1;
    width: 35%;
    height: 300%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.23), transparent);
    transform: rotate(18deg);
    animation: liquidNavbarShine 8s ease-in-out infinite;
}

@keyframes liquidNavbarShine {
    0%, 35% { left: -42%; opacity: 0; }
    45% { opacity: 0.9; }
    68% { left: 115%; opacity: 0; }
    100% { left: 115%; opacity: 0; }
}

.site-header.scrolled .glass-navbar {
    min-height: 64px;
    padding-top: 6px;
    padding-bottom: 6px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.19), rgba(255,255,255,0.055)),
        rgba(65, 2, 11, 0.52);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.60),
        0 17px 42px rgba(49, 0, 8, 0.30);
}

/* Brand */
.site-header .glass-brand {
    position: relative;
    z-index: 3;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-self: start;
    gap: 9px;
    padding: 3px 8px 3px 3px;
    color: #fff;
    border-radius: 21px;
}

.site-header .glass-brand img {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    max-width: none;
    padding: 4px;
    object-fit: contain;
    border: 1px solid rgba(255,255,255,0.38);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255,255,255,0.30), rgba(255,255,255,0.08));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.56),
        0 9px 22px rgba(0,0,0,0.16);
}

.site-header .glass-brand-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.site-header .glass-brand-text strong {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.site-header .glass-brand-text small {
    margin-top: 4px;
    color: rgba(255,255,255,0.70);
    font-size: 7px;
    font-weight: 600;
    white-space: nowrap;
}

/* Central capsule and sliding liquid indicator */
.site-header .glass-nav-links {
    position: relative;
    z-index: 3;
    isolation: isolate;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 21px;
    background: linear-gradient(135deg, rgba(71,0,11,0.25), rgba(255,255,255,0.07));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 11px 27px rgba(45,0,8,0.16);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.site-header .glass-nav-links .nav-liquid-indicator {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.50);
    border-radius: 21px;
    background: linear-gradient(145deg, rgba(255,255,255,0.34), rgba(255,255,255,0.11));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.78),
        inset 0 -1px 0 rgba(255,255,255,0.09),
        0 8px 22px rgba(66,0,11,0.22),
        0 0 18px rgba(255,255,255,0.10);
    transition:
        transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.48s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.48s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease;
    will-change: transform, width, height;
}

.site-header .glass-nav-links .nav-liquid-indicator.no-transition {
    transition: none;
}

.site-header .glass-nav-links .nav-liquid-indicator::after {
    content: "";
    position: absolute;
    inset: 2px 8px auto;
    height: 40%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.38), transparent);
    opacity: 0.55;
}

.site-header .glass-nav-links a {
    position: relative;
    z-index: 1;
    min-width: 74px;
    min-height: 40px;
    padding: 8px 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.82);
    background: transparent;
    border: 0;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
    transform: none;
    transition: color 0.28s ease, text-shadow 0.28s ease;
}

.site-header .glass-nav-links a::after {
    display: none;
}

.site-header .glass-nav-links a:hover,
.site-header .glass-nav-links a:focus-visible,
.site-header .glass-nav-links a.active {
    color: #fff;
    background: transparent;
    transform: none;
    text-shadow: 0 1px 12px rgba(255,255,255,0.22);
}

.site-header .glass-nav-links:not(.is-liquid-ready) a.active {
    border: 1px solid rgba(255,255,255,0.44);
    background: linear-gradient(145deg, rgba(255,255,255,0.30), rgba(255,255,255,0.10));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.68), 0 8px 20px rgba(65,0,10,0.20);
}

/* Visit outlet */
.site-header .glass-visit-button {
    position: relative;
    z-index: 3;
    justify-self: end;
    min-width: 146px;
    min-height: 48px;
    padding: 8px 12px 8px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    overflow: hidden;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.56);
    border-radius: 25px;
    background: linear-gradient(145deg, rgba(255,255,255,0.34), rgba(255,255,255,0.10));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.80),
        inset 0 -1px 0 rgba(255,255,255,0.09),
        0 10px 28px rgba(66,0,10,0.23);
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
    transition: transform 0.30s ease, background 0.30s ease, box-shadow 0.30s ease;
}

.site-header .glass-visit-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent);
    transform: skewX(-24deg);
    animation: liquidVisitShine 4.5s ease-in-out infinite;
}

.site-header .glass-visit-button::after {
    content: "\2192";
    position: relative;
    z-index: 1;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin-right: -7px;
    display: grid;
    place-items: center;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.36);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255,255,255,0.20), rgba(255,255,255,0.05));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.40);
    transition: transform 0.30s ease;
}

@keyframes liquidVisitShine {
    0%, 48% { left: -120%; }
    78%, 100% { left: 160%; }
}

.site-header .glass-visit-button:hover {
    color: #fff;
    background: linear-gradient(145deg, rgba(255,255,255,0.43), rgba(255,255,255,0.13));
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 15px 34px rgba(62,0,10,0.30);
}

.site-header .glass-visit-button:hover::after {
    transform: translateX(4px);
}

/* Mobile button base */
.site-header .glass-menu-toggle {
    position: relative;
    z-index: 4;
    display: none;
    width: 44px;
    height: 44px;
    padding: 9px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255,255,255,0.26), rgba(255,255,255,0.08));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.52), 0 8px 22px rgba(0,0,0,0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.site-header .glass-menu-toggle span {
    display: block;
    width: 19px;
    height: 2px;
    margin: 5px auto;
    border-radius: 999px;
    background: #fff;
    transition: transform 0.30s ease, opacity 0.30s ease;
}

/* Small page exit transition used by the navigation links. */
body main,
body > footer {
    transition: opacity 0.24s ease, transform 0.24s ease, filter 0.24s ease;
}

body.page-leaving main,
body.page-leaving > footer {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(3px);
}

/* Rabi al-Awwal seasonal hero */
.rabi-seasonal-slide {
    --rabi-gold: #f9c66b;
    --rabi-cream: #fff0d7;
}

.rabi-seasonal-wash {
    position: absolute;
    inset: -180px -8vw -125px;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 77% 18%, rgba(255, 236, 193, 0.34), transparent 27%),
        radial-gradient(circle at 15% 78%, rgba(245, 157, 55, 0.24), transparent 34%),
        linear-gradient(125deg, #401004 0%, #8e2f08 45%, #cc6b1e 72%, #f0b35c 100%);
}

.rabi-seasonal-wash::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background:
        repeating-radial-gradient(circle at 83% 38%, transparent 0 31px, rgba(255, 244, 218, 0.24) 32px 33px),
        linear-gradient(100deg, transparent 0 55%, rgba(255, 255, 255, 0.12) 55% 56%, transparent 56%);
    mask-image: linear-gradient(to left, #000 0 50%, transparent 85%);
}

.rabi-seasonal-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.7fr);
    gap: clamp(38px, 6vw, 88px);
}

.rabi-seasonal-copy {
    max-width: 680px;
}

.rabi-seasonal-title {
    font-size: clamp(57px, 6.5vw, 94px);
    letter-spacing: -4px;
}

.rabi-seasonal-title strong {
    color: var(--rabi-gold);
    text-shadow: 0 17px 46px rgba(255, 188, 77, 0.2);
}

.rabi-seasonal-title em {
    color: var(--rabi-cream);
    border-color: rgba(255, 222, 164, 0.52);
    background: rgba(61, 15, 2, 0.34);
}

.rabi-seasonal-visual {
    min-height: 620px;
}

.rabi-seasonal-poster {
    position: relative;
    z-index: 4;
    width: min(414px, 92%);
    aspect-ratio: 39 / 50;
    margin: 0;
    overflow: hidden;
    border: 2px solid rgba(255, 224, 169, 0.9);
    border-radius: 32px;
    background: #e6ae69;
    box-shadow:
        0 42px 90px rgba(43, 9, 0, 0.5),
        0 0 0 10px rgba(255, 244, 221, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transform: rotate(1.25deg);
}

.rabi-seasonal-poster::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 24% 78%, rgba(78, 22, 0, 0.15));
}

.rabi-seasonal-poster img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.rabi-seasonal-slide.is-active .rabi-seasonal-poster {
    animation: seasonalCardFloat 6s ease-in-out infinite;
}

.rabi-orbit {
    position: absolute;
    z-index: 1;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 226, 172, 0.34);
    border-radius: 50%;
    box-shadow: 0 0 52px rgba(255, 201, 111, 0.12);
}

.rabi-orbit-one {
    width: min(520px, 43vw);
    right: -16%;
    bottom: -8%;
}

.rabi-orbit-two {
    width: 170px;
    top: 6%;
    left: -4%;
    border-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 819px) {
    .rabi-seasonal-grid {
        gap: 34px;
    }

    .rabi-seasonal-copy {
        margin-inline: auto;
    }

    .rabi-seasonal-title {
        font-size: clamp(48px, 14vw, 70px);
        letter-spacing: -2.5px;
    }

    .rabi-seasonal-title em {
        margin-inline: auto;
    }

    .rabi-seasonal-visual {
        min-height: 0;
    }

    .rabi-seasonal-poster {
        width: min(380px, 86vw);
        border-radius: 26px;
        transform: none;
    }

    .rabi-orbit-one {
        right: 50%;
        bottom: -8%;
        width: min(450px, 104vw);
        transform: translateX(50%);
    }
}

@media (max-width: 520px) {
    .rabi-seasonal-grid {
        gap: 28px;
    }

    .rabi-seasonal-title {
        font-size: clamp(43px, 13.6vw, 61px);
    }

    .rabi-seasonal-poster {
        width: min(350px, 88vw);
        border-radius: 22px;
        box-shadow:
            0 28px 64px rgba(43, 9, 0, 0.46),
            0 0 0 7px rgba(255, 244, 221, 0.07);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .glass-navbar::after,
    .site-header .glass-visit-button::before {
        animation: none;
    }

    .site-header .glass-nav-links .nav-liquid-indicator,
    body main,
    body > footer {
        transition: none;
    }
}

/* ==================================================
   HOME — FLOATING MOMENTS GALLERY
================================================== */

.home-gallery-showcase {
    position: relative;
    min-height: 880px;
    padding: 104px 0 88px;
    overflow: hidden;
    isolation: isolate;
    color: #ffffff;
    background:
        radial-gradient(circle at 17% 18%, rgba(255, 192, 0, 0.2), transparent 27%),
        radial-gradient(circle at 83% 72%, rgba(255, 80, 50, 0.2), transparent 30%),
        linear-gradient(145deg, #410008 0%, #780813 45%, #ad101c 100%);
}

.home-gallery-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.2;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}

.home-gallery-glow {
    position: absolute;
    top: 29%;
    left: 50%;
    z-index: -1;
    width: min(72vw, 960px);
    aspect-ratio: 2 / 1;
    border-radius: 50%;
    opacity: 0.33;
    pointer-events: none;
    background: rgba(255, 202, 0, 0.45);
    filter: blur(110px);
    transform: translate(-50%, -50%);
}

.home-gallery-copy {
    position: relative;
    z-index: 1;
    text-align: center;
}

.home-gallery-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: #ffd525;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.home-gallery-kicker::before,
.home-gallery-kicker::after {
    content: "";
    width: 32px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.home-gallery-copy h2 {
    margin: 0;
    text-transform: uppercase;
}

.home-gallery-copy h2 span {
    position: relative;
    z-index: 2;
    display: block;
    color: #ffffff;
    font-size: clamp(42px, 5.2vw, 76px);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.home-gallery-copy h2 strong {
    display: block;
    width: min(100%, 1180px);
    margin: 10px auto 0;
    color: transparent;
    font-size: clamp(78px, 10vw, 146px);
    font-weight: 900;
    line-height: 0.88;
    letter-spacing: -0.065em;
    word-spacing: 0.08em;
    text-align: center;
    white-space: nowrap;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.35);
}

.home-gallery-intro {
    position: relative;
    z-index: 3;
    max-width: 620px;
    margin: 30px auto 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
}

.home-gallery-stage {
    position: relative;
    z-index: 2;
    width: min(96vw, 1440px);
    height: 430px;
    margin: 34px auto 0;
}

.home-gallery-card {
    --card-rotate: 0deg;
    position: absolute;
    display: block;
    width: clamp(150px, 15.5vw, 224px);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 6px solid rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    color: #ffffff;
    background: #1f0206;
    box-shadow:
        0 26px 60px rgba(24, 0, 4, 0.38),
        0 2px 0 rgba(255, 255, 255, 0.55) inset;
    transform: rotate(var(--card-rotate));
    transition:
        opacity 650ms ease,
        transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 320ms ease;
    transition-delay: var(--card-delay, 0ms);
}

.home-gallery-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-gallery-card::after {
    content: "";
    position: absolute;
    inset: 44% 0 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(35, 0, 5, 0.88));
}

.home-gallery-card > span {
    position: absolute;
    right: 15px;
    bottom: 14px;
    left: 15px;
    z-index: 2;
    font-size: clamp(15px, 1.25vw, 19px);
    font-weight: 800;
    line-height: 1.15;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.46);
}

.home-gallery-card small {
    display: block;
    margin-bottom: 5px;
    color: #ffd525;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.home-gallery-card-one {
    --card-rotate: -9deg;
    --card-delay: 40ms;
    top: 90px;
    left: 1.5%;
}

.home-gallery-card-two {
    --card-rotate: 5deg;
    --card-delay: 110ms;
    top: 10px;
    left: 18%;
}

.home-gallery-card-three {
    --card-rotate: -4deg;
    --card-delay: 180ms;
    top: 128px;
    left: 34.5%;
}

.home-gallery-card-four {
    --card-rotate: 7deg;
    --card-delay: 250ms;
    top: 20px;
    left: 51%;
}

.home-gallery-card-five {
    --card-rotate: -7deg;
    --card-delay: 320ms;
    top: 122px;
    left: 67.5%;
}

.home-gallery-card-six {
    --card-rotate: 8deg;
    --card-delay: 390ms;
    top: 14px;
    left: 83%;
}

.home-gallery-motion .home-gallery-card {
    opacity: 0;
    transform: translate3d(0, 58px, 0) rotate(0deg) scale(0.91);
}

.home-gallery-motion.is-revealed .home-gallery-card {
    opacity: 1;
    transform: rotate(var(--card-rotate));
}

.home-gallery-footer {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: -12px;
}

.home-gallery-footer p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
    .home-gallery-motion.is-revealed .home-gallery-card:hover,
    .home-gallery-motion.is-revealed .home-gallery-card:focus-visible {
        z-index: 10;
        outline: none;
        box-shadow:
            0 36px 76px rgba(20, 0, 3, 0.5),
            0 0 0 3px #ffd525;
        transform: translateY(-13px) rotate(0deg) scale(1.045);
    }

    .home-gallery-card:hover img,
    .home-gallery-card:focus-visible img {
        transform: scale(1.075);
    }
}

/* ==================================================
   HOME PAGE — DISTINCT HERO-INSPIRED RED SECTIONS
================================================== */

body.home-page .reviews-section {
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 212, 0, 0.20), transparent 29%),
        radial-gradient(circle at 88% 82%, rgba(255, 105, 58, 0.20), transparent 31%),
        linear-gradient(135deg, #420008 0%, #7d0010 34%, #c51622 70%, #8a000d 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(255, 212, 0, 0.12);
}

body.home-page .faq-section {
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 212, 0, 0.14), transparent 27%),
        radial-gradient(circle at 9% 88%, rgba(255, 255, 255, 0.08), transparent 30%),
        linear-gradient(145deg, #69000f 0%, #a90820 42%, #d01a2c 68%, #52000d 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}

body.site-theme.home-page .home-cta {
    background:
        radial-gradient(circle at 50% -8%, rgba(255, 223, 54, 0.22), transparent 34%),
        radial-gradient(circle at 92% 70%, rgba(255, 110, 45, 0.24), transparent 30%),
        linear-gradient(120deg, #4b0007 0%, #91000f 34%, #df1b25 68%, #7e000b 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(255, 212, 0, 0.10);
}

/* ==================================================
   OUTLET-LED FOOTER REDESIGN
================================================== */

.site-footer.site-footer-redesign {
    position: relative;
    overflow: hidden;
    padding: 70px 0 25px;
    color: rgba(255, 255, 255, 0.82);
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 212, 0, 0.09), transparent 30%),
        linear-gradient(145deg, #850712 0%, #6d020b 48%, #4c0006 100%);
}

.site-footer-redesign::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, black, transparent 68%);
}

.site-footer-redesign > .footer-grid {
    display: none;
}

.footer-redesign-inner {
    position: relative;
    z-index: 1;
}

.footer-outlet-hub {
    padding-bottom: 54px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.footer-redesign-eyebrow {
    margin: 0 0 8px;
    color: #ffd400;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.9px;
    text-align: center;
    text-transform: uppercase;
}

.footer-outlet-hub h2 {
    margin: 0 0 30px;
    color: #ffffff;
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 900;
    letter-spacing: -1.5px;
    text-align: center;
}

.footer-outlet-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.footer-outlet-grid a {
    min-width: 0;
    min-height: 62px;
    padding: 11px 13px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 15px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.055);
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.footer-outlet-grid a:hover,
.footer-outlet-grid a:focus-visible {
    border-color: rgba(255, 212, 0, 0.7);
    background: rgba(255, 212, 0, 0.12);
    transform: translateY(-3px);
}

.footer-outlet-grid span {
    color: #ffd400;
    font-size: 10px;
    font-weight: 900;
}

.footer-outlet-grid strong {
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.footer-outlet-grid i {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #6d020b;
    background: #ffd400;
    font-size: 14px;
    font-style: normal;
    font-weight: 900;
}

.footer-redesign-grid {
    padding: 52px 0 44px;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(180px, 0.72fr) minmax(220px, 0.85fr);
    gap: clamp(38px, 6vw, 90px);
}

.footer-redesign-logo {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.footer-redesign-logo img {
    width: 54px;
    height: 54px;
    padding: 4px;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.11);
}

.footer-redesign-logo span {
    display: flex;
    flex-direction: column;
    line-height: 1.08;
}

.footer-redesign-logo strong {
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
}

.footer-redesign-logo small {
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.footer-redesign-brand > p {
    max-width: 390px;
    margin: 20px 0 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 13px;
    line-height: 1.9;
}

.footer-redesign-links,
.footer-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-redesign-links h3,
.footer-social h3 {
    position: relative;
    margin: 0 0 24px;
    padding-bottom: 10px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 850;
}

.footer-redesign-links h3::after,
.footer-social h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 54px;
    height: 2px;
    border-radius: 99px;
    background: #ffd400;
}

.footer-redesign-links a {
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-redesign-links a:hover,
.footer-redesign-links a:focus-visible,
.footer-social-handle:hover,
.footer-social-handle:focus-visible {
    color: #ffd400;
    transform: translateX(3px);
}

.footer-social-links {
    display: flex;
    gap: 10px;
}

.footer-social-links a {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #670007;
    background: #ffd400;
    box-shadow: 0 10px 22px rgba(35, 0, 3, 0.25);
    transition: background 0.2s ease, transform 0.2s ease;
}

.footer-social-links a:hover,
.footer-social-links a:focus-visible {
    background: #ffffff;
    transform: translateY(-3px);
}

.footer-social-links span {
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

/* Clean Instagram camera icon used in every footer. */
.footer-social-links .instagram-icon {
    width: 23px;
    height: 23px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.3;
}

.footer-social-links .instagram-icon-dot {
    fill: currentColor;
    stroke: none;
}

.footer-social-handle {
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.site-footer-redesign .footer-bottom {
    position: relative;
    z-index: 1;
}

@media (max-width: 980px) {
    .footer-outlet-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-redesign-grid {
        grid-template-columns: 1.2fr 0.8fr;
    }

    .footer-social {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .site-footer.site-footer-redesign {
        padding-top: 54px;
    }

    .footer-outlet-hub {
        padding-bottom: 40px;
    }

    .footer-outlet-hub h2 {
        margin-bottom: 22px;
        font-size: 32px;
    }

    .footer-outlet-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .footer-outlet-grid a {
        min-height: 46px;
        padding: 7px;
        grid-template-columns: 14px minmax(0, 1fr) 22px;
        gap: 4px;
        border-radius: 11px;
    }

    .footer-outlet-grid span {
        font-size: 8px;
    }

    .footer-outlet-grid strong {
        overflow: visible;
        font-size: 8px;
        line-height: 1.2;
        text-overflow: clip;
        white-space: normal;
    }

    .footer-outlet-grid i {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    .footer-redesign-grid {
        padding: 40px 0 34px;
        grid-template-columns: 1fr;
        gap: 34px;
        text-align: left;
    }

    .footer-social {
        grid-column: auto;
    }
}

/* ==================================================
   MOBILE BOTTOM NAVIGATION
================================================== */

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 767px) {
    body.has-mobile-bottom-nav {
        padding-bottom: calc(100px + env(safe-area-inset-bottom));
    }

    body.has-mobile-bottom-nav .site-header.glass-header {
        display: none !important;
    }

    .mobile-bottom-nav {
        position: fixed;
        right: 12px;
        bottom: max(10px, env(safe-area-inset-bottom));
        left: 12px;
        z-index: 7000;
        display: block;
        width: min(430px, calc(100% - 24px));
        margin-inline: auto;
        padding: 7px;
        border: 1px solid rgba(255, 221, 75, 0.34);
        border-radius: 999px;
        background:
            linear-gradient(135deg, rgba(73, 7, 12, 0.92), rgba(163, 5, 15, 0.88)),
            rgba(75, 5, 11, 0.86);
        box-shadow:
            0 18px 46px rgba(63, 0, 5, 0.38),
            inset 0 1px 0 rgba(255, 255, 255, 0.16);
        -webkit-backdrop-filter: blur(20px) saturate(155%);
        backdrop-filter: blur(20px) saturate(155%);
    }

    .mobile-bottom-nav__inner {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

    .mobile-bottom-nav__item {
        position: relative;
        display: flex;
        min-width: 0;
        min-height: 56px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 2px;
        padding: 7px 5px 6px;
        border-radius: 999px;
        color: rgba(255, 255, 255, 0.78);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition:
            color 180ms ease,
            background-color 180ms ease,
            box-shadow 180ms ease,
            transform 180ms ease;
    }

    .mobile-bottom-nav__item svg {
        width: 23px;
        height: 23px;
        flex: 0 0 auto;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobile-bottom-nav__label {
        overflow: hidden;
        max-width: 100%;
        font-size: 9px;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: 0.15px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-bottom-nav__item.is-active {
        color: #66090e;
        background: linear-gradient(135deg, #ffe342 0%, #ffc400 100%);
        box-shadow:
            0 8px 22px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.55);
        transform: translateY(-1px);
    }

    .mobile-bottom-nav__item:not(.is-active):active {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.12);
        transform: scale(0.96);
    }

    .mobile-bottom-nav__item:focus-visible {
        outline: 3px solid #ffffff;
        outline-offset: 2px;
    }

    body.site-theme > .back-to-top {
        right: 14px;
        bottom: calc(92px + env(safe-area-inset-bottom));
        z-index: 6800;
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 360px) {
    .mobile-bottom-nav {
        right: 8px;
        left: 8px;
        width: calc(100% - 16px);
        padding: 6px;
    }

    .mobile-bottom-nav__inner {
        gap: 2px;
    }

    .mobile-bottom-nav__item {
        min-height: 54px;
        padding-inline: 3px;
    }

    .mobile-bottom-nav__label {
        font-size: 8.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-bottom-nav__item {
        transition: none !important;
    }
}

/* ==================================================
   ABOUT — OUR FIRST SHOP PHOTO CORNER
================================================== */

.first-shop-gallery {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 12% 14%, rgba(255, 212, 0, 0.17), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(255, 104, 51, 0.2), transparent 31%),
        linear-gradient(138deg, #4e0000 0%, #8d0000 43%, #c40000 100%);
    isolation: auto;
}

.first-shop-gallery::before,
.first-shop-gallery::after {
    position: absolute;
    z-index: 1;
    border: 1px solid rgba(255, 212, 0, 0.16);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.first-shop-gallery::before {
    top: -210px;
    right: -130px;
    width: 480px;
    height: 480px;
}

.first-shop-gallery::after {
    bottom: -300px;
    left: -190px;
    width: 620px;
    height: 620px;
}

.first-shop-gallery-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.75fr);
    gap: clamp(30px, 7vw, 100px);
    align-items: end;
    margin-bottom: clamp(34px, 5vw, 64px);
}

.first-shop-gallery-kicker {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    margin: 0 0 16px;
    color: var(--yellow);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.first-shop-gallery-kicker span {
    font-size: 8px;
    filter: drop-shadow(0 0 8px rgba(255, 212, 0, 0.75));
}

.first-shop-gallery-heading h2 {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: clamp(42px, 6vw, 82px);
    line-height: 0.93;
    letter-spacing: -3px;
}

.first-shop-gallery-heading h2 span {
    display: block;
    color: var(--yellow);
}

.first-shop-gallery-intro {
    max-width: 490px;
    margin: 0 0 5px;
    padding-left: 22px;
    border-left: 2px solid rgba(255, 212, 0, 0.68);
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    line-height: 1.8;
}

.first-shop-photo-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    grid-auto-rows: clamp(190px, 17vw, 245px);
    gap: clamp(12px, 1.45vw, 20px);
}

.first-shop-photo {
    position: relative;
    grid-column: span 4;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(255, 212, 0, 0.34);
    border-radius: clamp(18px, 2vw, 28px);
    color: #fff;
    background: #420000;
    box-shadow: 0 18px 42px rgba(45, 0, 0, 0.28);
    cursor: zoom-in;
    font: inherit;
    text-align: left;
    transition:
        opacity 0.7s ease,
        transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.first-shop-photo--hero {
    grid-column: span 7;
    grid-row: span 2;
}

.first-shop-photo--hero + .first-shop-photo,
.first-shop-photo--hero + .first-shop-photo + .first-shop-photo {
    grid-column: span 5;
}

.first-shop-photo--panorama {
    grid-column: span 12;
    min-height: 275px;
}

.first-shop-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
}

.first-shop-photo--panorama img {
    object-position: center 45%;
}

.first-shop-photo-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(41, 0, 0, 0.02) 28%, rgba(41, 0, 0, 0.84) 100%),
        linear-gradient(90deg, rgba(41, 0, 0, 0.24), transparent 58%);
    transition: background-color 0.35s ease;
}

.first-shop-photo-copy {
    position: absolute;
    right: clamp(18px, 2vw, 28px);
    bottom: clamp(18px, 2vw, 28px);
    left: clamp(18px, 2vw, 28px);
    display: grid;
    gap: 5px;
    padding-right: 48px;
}

.first-shop-photo-copy small {
    color: var(--yellow);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.45px;
    text-transform: uppercase;
}

.first-shop-photo-copy strong {
    max-width: 530px;
    color: #fff;
    font-size: clamp(16px, 1.65vw, 24px);
    line-height: 1.15;
}

.first-shop-photo-open {
    position: absolute;
    right: clamp(15px, 1.7vw, 24px);
    bottom: clamp(15px, 1.7vw, 24px);
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 50%;
    color: #650000;
    background: var(--yellow);
    font-size: 18px;
    font-weight: 900;
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.first-shop-photo:hover {
    z-index: 2;
    border-color: rgba(255, 212, 0, 0.82);
    box-shadow: 0 26px 54px rgba(42, 0, 0, 0.43);
    transform: translateY(-6px);
}

.first-shop-photo:hover img {
    filter: saturate(1.06) contrast(1.03);
    transform: scale(1.045);
}

.first-shop-photo:hover .first-shop-photo-open {
    color: var(--yellow);
    background: var(--red);
    transform: rotate(45deg);
}

.first-shop-photo:focus-visible {
    z-index: 3;
    border-color: #fff;
    outline: 4px solid var(--yellow);
    outline-offset: 4px;
}

.first-shop-gallery-hint {
    display: flex;
    gap: 9px;
    align-items: center;
    justify-content: flex-end;
    margin: 22px 3px 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.35px;
}

.first-shop-gallery-hint span {
    color: var(--yellow);
    font-size: 17px;
}

/* Photo viewer */

body.first-shop-lightbox-open {
    overflow: hidden;
}

.first-shop-lightbox {
    position: fixed;
    z-index: 10050;
    inset: 0;
    display: grid;
    visibility: hidden;
    place-items: center;
    padding: clamp(14px, 3vw, 42px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.first-shop-lightbox.is-open {
    visibility: visible !important;
    opacity: 1;
    pointer-events: auto;
}

.first-shop-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(24, 0, 0, 0.94);
    backdrop-filter: blur(14px);
}

.first-shop-lightbox-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 58px;
    align-items: center;
    width: min(1240px, 100%);
    max-height: calc(100vh - clamp(28px, 6vw, 84px));
    transform: translateY(16px) scale(0.985);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.first-shop-lightbox.is-open .first-shop-lightbox-dialog {
    transform: translateY(0) scale(1);
}

.first-shop-lightbox figure {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-width: 0;
    max-height: calc(100vh - clamp(28px, 6vw, 84px));
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 212, 0, 0.46);
    border-radius: clamp(18px, 2.2vw, 32px);
    background: #260000;
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.58);
}

.first-shop-lightbox figure img {
    width: 100%;
    max-height: calc(100vh - 160px);
    object-fit: contain;
    background: #180000;
}

.first-shop-lightbox figcaption {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
    padding: 17px clamp(18px, 2.4vw, 34px);
    color: #fff;
    background: linear-gradient(90deg, #670000, #a60000);
}

.first-shop-lightbox figcaption span {
    font-size: 14px;
    font-weight: 650;
    line-height: 1.5;
}

.first-shop-lightbox figcaption small {
    flex: 0 0 auto;
    color: var(--yellow);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
}

.first-shop-lightbox-close,
.first-shop-lightbox-nav {
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 50%;
    color: #650000;
    background: var(--yellow);
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.first-shop-lightbox-close {
    position: absolute;
    z-index: 3;
    top: -17px;
    right: 41px;
    width: 48px;
    height: 48px;
    font-size: 29px;
    line-height: 1;
}

.first-shop-lightbox-nav {
    position: relative;
    z-index: 2;
    width: 46px;
    height: 46px;
    margin: 6px;
    font-size: 22px;
}

.first-shop-lightbox-close:hover,
.first-shop-lightbox-nav:hover {
    color: var(--yellow);
    background: var(--red);
    transform: scale(1.07);
}

.first-shop-lightbox-close:focus-visible,
.first-shop-lightbox-nav:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

@media (max-width: 900px) {
    .first-shop-gallery-heading {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .first-shop-gallery-intro {
        max-width: 680px;
    }

    .first-shop-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 250px;
    }

    .first-shop-photo,
    .first-shop-photo--hero + .first-shop-photo,
    .first-shop-photo--hero + .first-shop-photo + .first-shop-photo {
        grid-column: span 1;
    }

    .first-shop-photo--hero,
    .first-shop-photo--panorama {
        grid-column: span 2;
    }

    .first-shop-photo--hero {
        grid-row: span 1;
        min-height: 390px;
    }

    .first-shop-lightbox-dialog {
        grid-template-columns: 48px minmax(0, 1fr) 48px;
    }

    .first-shop-lightbox-nav {
        width: 40px;
        height: 40px;
        margin: 4px;
    }
}

@media (max-width: 620px) {
    .first-shop-gallery-heading h2 {
        font-size: clamp(40px, 13vw, 58px);
        letter-spacing: -2px;
    }

    .first-shop-gallery-intro {
        padding-left: 17px;
        font-size: 14px;
        line-height: 1.7;
    }

    .first-shop-photo-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: 245px;
    }

    .first-shop-photo,
    .first-shop-photo--hero,
    .first-shop-photo--panorama,
    .first-shop-photo--hero + .first-shop-photo,
    .first-shop-photo--hero + .first-shop-photo + .first-shop-photo {
        grid-column: 1;
        min-height: 0;
    }

    .first-shop-photo--hero {
        grid-row: auto;
        min-height: 300px;
    }

    .first-shop-photo--panorama {
        min-height: 260px;
    }

    .first-shop-photo-copy strong {
        font-size: 18px;
    }

    .first-shop-gallery-hint {
        justify-content: flex-start;
    }

    .first-shop-lightbox {
        padding: 12px;
    }

    .first-shop-lightbox-dialog {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        align-items: end;
    }

    .first-shop-lightbox figure {
        grid-column: 1 / -1;
        grid-row: 1;
        max-height: calc(100vh - 96px);
    }

    .first-shop-lightbox figure img {
        max-height: calc(100vh - 205px);
    }

    .first-shop-lightbox figcaption {
        align-items: flex-start;
        min-height: 88px;
        padding: 14px 16px;
        flex-direction: column;
        gap: 6px;
    }

    .first-shop-lightbox-close {
        top: -10px;
        right: -2px;
        width: 44px;
        height: 44px;
    }

    .first-shop-lightbox-nav {
        position: absolute;
        bottom: 18px;
        width: 44px;
        height: 44px;
        margin: 0;
    }

    .first-shop-lightbox-prev {
        left: 20px;
    }

    .first-shop-lightbox-next {
        right: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .first-shop-photo,
    .first-shop-photo img,
    .first-shop-photo-open,
    .first-shop-lightbox,
    .first-shop-lightbox-dialog,
    .first-shop-lightbox-close,
    .first-shop-lightbox-nav {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

/* ==================================================
   ABOUT — FIRST SHOP / VENGARA PHOTO STORY
================================================== */

.vengara-opening-gallery {
    position: relative;
    overflow: hidden;
    color: #2b0808;
    background:
        radial-gradient(circle at 8% 12%, rgba(255, 212, 0, 0.2), transparent 24%),
        radial-gradient(circle at 92% 86%, rgba(196, 0, 0, 0.1), transparent 31%),
        linear-gradient(145deg, #fffaf2 0%, #ffffff 52%, #fff3df 100%);
    isolation: isolate;
}

.vengara-gallery-anchor {
    position: absolute;
    top: 0;
    left: 0;
}

.vengara-opening-gallery::before {
    position: absolute;
    z-index: -1;
    top: -260px;
    right: -180px;
    width: 600px;
    height: 600px;
    border: 1px solid rgba(196, 0, 0, 0.09);
    border-radius: 50%;
    box-shadow: 0 0 0 90px rgba(255, 212, 0, 0.035);
    content: "";
    pointer-events: none;
}

.vengara-gallery-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(250px, 0.45fr);
    gap: clamp(34px, 7vw, 100px);
    align-items: end;
    margin-bottom: clamp(34px, 5vw, 64px);
}

.vengara-gallery-kicker {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    margin: 0 0 14px;
    color: #a80000;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.vengara-gallery-kicker span {
    color: #f0b900;
    font-size: 8px;
    filter: drop-shadow(0 0 7px rgba(240, 185, 0, 0.45));
}

.vengara-gallery-heading h2 {
    max-width: 780px;
    margin: 0;
    color: #650000;
    font-size: clamp(44px, 6vw, 82px);
    line-height: 0.94;
    letter-spacing: -3px;
}

.vengara-gallery-heading h2 span {
    display: block;
    color: #c40000;
}

.vengara-gallery-intro {
    max-width: 760px;
    margin: 22px 0 0;
    color: #6b6262;
    font-size: 15px;
    line-height: 1.82;
}

.vengara-gallery-summary {
    display: grid;
    justify-items: start;
    padding: 25px 26px;
    border: 1px solid rgba(196, 0, 0, 0.13);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 18px 44px rgba(80, 0, 0, 0.08);
    backdrop-filter: blur(10px);
}

.vengara-gallery-summary strong {
    color: #c40000;
    font-size: clamp(48px, 5vw, 68px);
    line-height: 0.88;
    letter-spacing: -3px;
}

.vengara-gallery-summary span {
    margin-top: 11px;
    color: #650000;
    font-size: 14px;
    font-weight: 900;
}

.vengara-gallery-summary small {
    margin-top: 8px;
    color: #8b7d76;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.vengara-gallery-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    grid-auto-rows: clamp(190px, 18vw, 255px);
    gap: clamp(12px, 1.4vw, 20px);
}

.vengara-photo {
    position: relative;
    grid-column: span 3;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(196, 0, 0, 0.13);
    border-radius: clamp(17px, 1.7vw, 25px);
    color: #fff;
    background:
        radial-gradient(circle at 70% 18%, rgba(255, 212, 0, 0.26), transparent 34%),
        linear-gradient(145deg, #71030d, #c40000 58%, #3d0208);
    box-shadow: 0 16px 38px rgba(82, 7, 7, 0.14);
    cursor: zoom-in;
    font: inherit;
    text-align: left;
    transition:
        transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.vengara-photo[hidden] {
    display: none !important;
}

.vengara-photo:nth-child(8n + 1),
.vengara-photo:nth-child(8n + 6) {
    grid-column: span 6;
}

.vengara-photo:nth-child(8n + 1) {
    grid-row: span 2;
}

.vengara-photo:nth-child(8n + 4),
.vengara-photo:nth-child(8n + 7) {
    grid-column: span 4;
}

.vengara-photo:nth-child(8n + 5),
.vengara-photo:nth-child(8n + 8) {
    grid-column: span 2;
}

.vengara-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #7f0000;
    transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.35s ease;
}

.vengara-photo-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(45, 0, 0, 0) 38%, rgba(45, 0, 0, 0.8) 100%),
        linear-gradient(90deg, rgba(45, 0, 0, 0.18), transparent 54%);
    pointer-events: none;
}

.vengara-photo-meta {
    position: absolute;
    right: 17px;
    bottom: 16px;
    left: 17px;
    display: flex;
    gap: 12px;
    align-items: end;
    justify-content: space-between;
    pointer-events: none;
}

.vengara-photo-meta span:first-child {
    display: grid;
    gap: 4px;
}

.vengara-photo-meta small {
    color: #ffd400;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.15px;
    text-transform: uppercase;
}

.vengara-photo-meta strong {
    color: #fff;
    font-size: 14px;
    line-height: 1.2;
}

.vengara-photo-open {
    flex: 0 0 auto;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    color: #650000;
    background: #ffd400;
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22);
    transition: color 0.25s ease, background-color 0.25s ease, transform 0.3s ease;
}

.vengara-photo:hover {
    z-index: 2;
    border-color: rgba(196, 0, 0, 0.4);
    box-shadow: 0 25px 52px rgba(82, 7, 7, 0.22);
    transform: translateY(-6px);
}

.vengara-photo:hover img {
    filter: saturate(1.05) contrast(1.025);
    transform: scale(1.045);
}

.vengara-photo:hover .vengara-photo-open {
    color: #ffd400;
    background: #c40000;
    transform: rotate(45deg);
}

.vengara-photo:focus-visible,
.vengara-gallery-toggle:focus-visible {
    outline: 4px solid #ffd400;
    outline-offset: 4px;
}

.vengara-gallery-footer {
    display: flex;
    gap: 22px;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(196, 0, 0, 0.11);
}

.vengara-gallery-footer p,
.vengara-gallery-noscript {
    margin: 0;
    color: #7d6e68;
    font-size: 13px;
    font-weight: 700;
}

.vengara-gallery-toggle {
    display: inline-flex;
    gap: 13px;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 13px 18px 13px 24px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #8f0000, #c40000);
    box-shadow: 0 14px 30px rgba(196, 0, 0, 0.22);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vengara-gallery-toggle:hover {
    box-shadow: 0 18px 36px rgba(196, 0, 0, 0.3);
    transform: translateY(-3px);
}

.vengara-gallery-toggle-icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    color: #650000;
    background: #ffd400;
    transition: transform 0.35s ease;
}

.vengara-gallery-toggle[aria-expanded="true"] .vengara-gallery-toggle-icon {
    transform: rotate(180deg);
}

@media (max-width: 980px) {
    .vengara-gallery-heading {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .vengara-gallery-summary {
        width: min(360px, 100%);
    }

    .vengara-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 265px;
    }

    .vengara-photo,
    .vengara-photo:nth-child(n) {
        grid-column: span 1;
        grid-row: auto;
    }

    .vengara-photo:nth-child(6n + 1),
    .vengara-photo:nth-child(6n + 4) {
        grid-column: span 2;
    }

    .vengara-photo:nth-child(6n + 1) {
        min-height: 380px;
    }
}

@media (max-width: 590px) {
    .vengara-gallery-heading h2 {
        font-size: clamp(40px, 13vw, 58px);
        letter-spacing: -2px;
    }

    .vengara-gallery-intro {
        font-size: 14px;
        line-height: 1.7;
    }

    .vengara-gallery-summary {
        padding: 22px;
    }

    .vengara-gallery-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: 255px;
    }

    .vengara-photo,
    .vengara-photo:nth-child(n) {
        grid-column: 1;
        min-height: 0;
    }

    .vengara-photo:nth-child(5n + 1) {
        min-height: 320px;
    }

    .vengara-gallery-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .vengara-gallery-toggle {
        width: 100%;
        min-height: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vengara-photo,
    .vengara-photo img,
    .vengara-photo-open,
    .vengara-gallery-toggle,
    .vengara-gallery-toggle-icon {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

/* ==================================================
   SITE-WIDE UX, SEARCH + MOTION POLISH
================================================== */

.skip-link {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 12000;
    padding: 12px 18px;
    border-radius: 999px;
    color: #211500;
    background: #ffd400;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.26);
    font-weight: 800;
    transform: translateY(-160%);
    transition: transform 0.22s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11000;
    width: 100%;
    height: 4px;
    pointer-events: none;
    background: linear-gradient(90deg, #ffd400, #ff8a00, #ffffff);
    box-shadow: 0 2px 12px rgba(255, 212, 0, 0.55);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid #ffd400;
    outline-offset: 4px;
}

[style*="--reveal-delay"] {
    transition-delay: var(--reveal-delay) !important;
}

.menu-tools {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.menu-search {
    display: grid;
    flex: 1 1 480px;
    gap: 9px;
    max-width: 620px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.menu-search input {
    width: 100%;
    min-height: 54px;
    padding: 0 20px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 16px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    backdrop-filter: blur(12px);
    transition: border-color 0.25s ease, background 0.25s ease,
        box-shadow 0.25s ease;
}

.menu-search input::placeholder {
    color: rgba(255, 255, 255, 0.58);
}

.menu-search input:focus {
    border-color: #ffd400;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 5px rgba(255, 212, 0, 0.14);
}

.menu-results-count {
    flex: 0 0 auto;
    margin: 0 0 15px;
    color: #ffd400;
    font-size: 14px;
    font-weight: 800;
}

.menu-card[hidden] {
    display: none !important;
}

.menu-empty-state {
    padding: 52px 24px;
    border: 1px dashed rgba(255, 255, 255, 0.32);
    border-radius: 24px;
    color: rgba(255, 255, 255, 0.76);
    background: rgba(255, 255, 255, 0.08);
    text-align: center;
}

.menu-empty-state strong,
.menu-empty-state span {
    display: block;
}

.menu-empty-state strong {
    margin-bottom: 7px;
    color: #ffffff;
    font-size: 24px;
}

.menu-noscript {
    padding: 36px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 24px;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.menu-noscript h2 {
    margin-bottom: 10px;
    color: #ffffff;
    font-size: clamp(24px, 4vw, 36px);
}

.menu-noscript p {
    max-width: 760px;
    line-height: 1.8;
}

.menu-noscript a {
    display: inline-flex;
    margin-top: 18px;
    color: #ffd400;
    font-weight: 800;
}

.menu-card-image.image-unavailable > img {
    display: none;
}

.menu-image-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 14px;
    padding: 28px;
    color: #ffffff;
    background:
        radial-gradient(circle at 70% 20%, rgba(255, 212, 0, 0.28), transparent 38%),
        linear-gradient(145deg, #810814, #d20b18 58%, #4f0209);
    text-align: center;
}

.menu-image-fallback::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
}

.menu-image-fallback img {
    width: 76px !important;
    height: 76px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.25)) !important;
    transform: none !important;
}

.menu-image-fallback span {
    position: relative;
    max-width: 210px;
    font-size: 15px;
    font-weight: 800;
}

@media (max-width: 700px) {
    .scroll-progress {
        height: 3px;
    }

    .menu-tools {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .menu-search {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        gap: 6px;
        font-size: 12px;
    }

    .menu-search input {
        height: 48px;
        min-height: 48px;
        padding: 0 15px;
        border-radius: 12px;
    }

    .menu-results-count {
        margin: 0;
    }

}

@media (prefers-reduced-motion: reduce) {
    .skip-link,
    [style*="--reveal-delay"] {
        transition: none !important;
    }

    .reveal-up,
    .reveal-left,
    .reveal-right,
    .reveal-item {
        opacity: 1 !important;
        transform: none !important;
    }
}



/* ==================================================
   COMPACT LIQUID GLASS NAVBAR — FINAL SIZE OVERRIDE
================================================== */

.site-header.glass-header {
    top: 14px;
    width: min(1120px, calc(100% - 40px));
}

.site-header.glass-header.scrolled {
    top: 8px;
}

.site-header .glass-navbar {
    min-height: 72px;
    padding: 8px 12px 8px 14px;
    grid-template-columns: minmax(205px, 1fr) auto minmax(150px, 1fr);
    gap: 14px;
    border-radius: 36px;
}

.site-header.scrolled .glass-navbar {
    min-height: 64px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.site-header .glass-brand {
    gap: 9px;
    padding: 3px 8px 3px 3px;
}

.site-header .glass-brand img {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    padding: 4px;
}

.site-header .glass-brand-text strong {
    font-size: 16px;
}

.site-header .glass-brand-text small {
    font-size: 7px;
}

.site-header .glass-nav-links {
    gap: 3px;
    padding: 4px;
    border-radius: 25px;
}

.site-header .glass-nav-links .nav-liquid-indicator {
    border-radius: 21px;
}

.site-header .glass-nav-links a {
    min-width: 74px;
    min-height: 40px;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 13px;
}

.site-header .glass-visit-button {
    min-width: 146px;
    min-height: 48px;
    padding: 8px 12px 8px 18px;
    gap: 9px;
    border-radius: 25px;
    font-size: 13px;
}

.site-header .glass-visit-button::after {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    margin-right: -7px;
}

.site-header .glass-menu-toggle {
    width: 44px;
    height: 44px;
    padding: 9px;
}

.site-header .glass-menu-toggle span {
    width: 19px;
}


/* ==================================================
   HOME PAGE SCROLL STORY
================================================== */

.home-page .home-scroll-card {
    transform-origin: center bottom;
    transform-style: preserve-3d;
}

.home-page .home-scroll-card:not(.visible) {
    opacity: 0;
    filter: blur(5px);
    transform:
        perspective(900px)
        translateY(72px)
        rotateX(7deg)
        scale(0.96);
}

.home-page .home-scroll-card.visible {
    opacity: 1;
    filter: blur(0);
    transform:
        perspective(900px)
        translateY(0)
        rotateX(0)
        scale(1);
    transition:
        opacity 0.8s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.65s ease,
        box-shadow 0.35s ease;
}

.home-page .home-scroll-item:not(.visible) {
    opacity: 0;
    transform: translate3d(38px, 28px, 0);
}

.home-page .home-scroll-item.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
        opacity 0.7s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-page .home-scroll-visual {
    clip-path: inset(0 24% 0 0 round 54px);
    transition:
        opacity 0.85s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-page .home-scroll-visual.visible {
    clip-path: inset(0 0 0 0 round 54px);
}

.home-page .home-scroll-pop:not(.visible) {
    opacity: 0;
    transform: translateY(45px) scale(0.92);
}

.home-page .home-scroll-pop.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
        opacity 0.8s ease,
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
    .home-page .home-scroll-card.visible:hover {
        transform: translateY(-10px) scale(1.02);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .home-scroll-card,
    .home-page .home-scroll-item,
    .home-page .home-scroll-visual,
    .home-page .home-scroll-pop {
        opacity: 1 !important;
        filter: none !important;
        clip-path: none !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ==================================================
   HOME FAQ ACCORDION
================================================== */

.faq-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(88px, 9vw, 138px) 0;
    color: var(--white);
    background:
        radial-gradient(circle at 8% 16%, rgba(255, 212, 0, 0.09), transparent 27%),
        linear-gradient(135deg, #c90016 0%, #c40016 52%, #b70014 100%);
}

.faq-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.16;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
    background-size: 76px 76px;
    mask-image: linear-gradient(90deg, #000, transparent 45%);
}

.faq-layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.85fr) minmax(480px, 1.15fr);
    align-items: start;
    gap: clamp(56px, 8vw, 118px);
}

.faq-heading {
    position: sticky;
    top: 118px;
}

.faq-heading h2 {
    margin: 0;
    color: var(--white);
    font-size: clamp(54px, 6.2vw, 86px);
    font-weight: 900;
    letter-spacing: -0.055em;
    line-height: 0.96;
}

.faq-heading h2 span {
    display: block;
}

.faq-heading h2 span + span {
    margin-top: 0.22em;
}

.faq-heading h2 b {
    color: var(--yellow);
    font-weight: inherit;
}

.faq-list {
    display: grid;
    gap: 22px;
}

.faq-item {
    overflow: hidden;
    border: 1px solid rgba(255, 212, 0, 0.88);
    border-radius: 17px;
    background: rgba(142, 0, 13, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.faq-item:hover,
.faq-item.is-open {
    border-color: var(--yellow);
    background: rgba(116, 0, 12, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 34px rgba(92, 0, 8, 0.15);
}

.faq-item h3 {
    margin: 0;
}

.faq-question {
    width: 100%;
    min-height: 76px;
    padding: 21px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: var(--yellow);
    text-align: left;
    cursor: pointer;
    border: 0;
    background: transparent;
    font: inherit;
}

.faq-question > span {
    font-size: clamp(15px, 1.45vw, 18px);
    font-weight: 700;
    line-height: 1.45;
}

.faq-question strong {
    font-weight: 900;
}

.faq-question i {
    position: relative;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.faq-question i::before,
.faq-question i::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.faq-question i::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-question[aria-expanded="true"] i::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0);
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s ease;
}

.faq-item.is-open .faq-answer {
    grid-template-rows: 1fr;
    opacity: 1;
}

.faq-answer-inner {
    min-height: 0;
    overflow: hidden;
}

.faq-answer p {
    max-width: 660px;
    margin: 0;
    padding: 0 52px 26px 24px;
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(14px, 1.25vw, 16px);
    line-height: 1.75;
}

@media (max-width: 900px) {
    .faq-section {
        padding: 86px 0;
    }

    .faq-layout {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .faq-heading {
        position: static;
    }

    .faq-heading h2 {
        font-size: clamp(52px, 11vw, 78px);
    }
}

@media (max-width: 600px) {
    .faq-section {
        padding: 72px 0;
    }

    .faq-layout {
        gap: 42px;
    }

    .faq-heading h2 {
        font-size: clamp(44px, 14vw, 64px);
    }

    .faq-list {
        gap: 14px;
    }

    .faq-question {
        min-height: 68px;
        padding: 18px;
        gap: 14px;
    }

    .faq-question > span {
        font-size: 14px;
    }

    .faq-answer p {
        padding: 0 44px 21px 18px;
        font-size: 13px;
        line-height: 1.65;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item,
    .faq-question i::before,
    .faq-question i::after,
    .faq-answer {
        transition: none !important;
    }
}

/* ==================================================
   SEASONAL HOME HERO CAROUSEL
================================================== */

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

.hero-carousel {
    position: relative;
    z-index: 3;
    width: 100%;
    display: grid;
}

.hero-slide {
    position: relative;
    grid-area: 1 / 1;
    width: 100%;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(3%, 0, 0) scale(0.985);
    transition:
        opacity 0.65s ease,
        transform 0.65s ease,
        visibility 0s linear 0.65s;
}

.hero-slide.is-active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 0s;
}

.hero-slide > .container {
    width: min(1180px, 90%);
    margin-inline: auto;
}

.signature-hero-slide .hero-grid,
.seasonal-hero-grid {
    min-height: clamp(560px, calc(100svh - 233px), 690px);
}

.onam-seasonal-wash {
    position: absolute;
    inset: -180px -8vw -125px;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 16% 26%, rgba(255, 216, 0, 0.24), transparent 30%),
        radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.12), transparent 26%),
        radial-gradient(circle at 92% 92%, rgba(22, 105, 55, 0.72), transparent 32%),
        linear-gradient(125deg, rgba(98, 0, 4, 0.96), rgba(181, 0, 9, 0.82) 58%, rgba(90, 0, 7, 0.88));
}

.onam-seasonal-wash::before,
.onam-seasonal-wash::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 0, 0.22);
}

.onam-seasonal-wash::before {
    width: 560px;
    height: 560px;
    top: -230px;
    left: -180px;
    box-shadow:
        0 0 0 34px rgba(255, 215, 0, 0.035),
        0 0 0 72px rgba(255, 255, 255, 0.025);
}

.onam-seasonal-wash::after {
    width: 420px;
    height: 420px;
    right: 3%;
    bottom: -250px;
    box-shadow: 0 0 95px rgba(255, 207, 40, 0.12);
}

.seasonal-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.82fr);
    align-items: center;
    gap: clamp(42px, 7vw, 105px);
}

.seasonal-copy {
    position: relative;
    z-index: 3;
}

.seasonal-kicker {
    width: fit-content;
    min-height: 42px;
    margin: 0 0 20px;
    padding: 6px 15px 6px 7px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(12px);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.seasonal-kicker img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 50%;
    background: #ffffff;
}

.seasonal-label {
    margin: 0 0 11px;
    color: #ffd817;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.seasonal-title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(62px, 7vw, 104px);
    font-weight: 950;
    line-height: 0.82;
    letter-spacing: -5px;
    text-transform: uppercase;
}

.seasonal-title span,
.seasonal-title strong,
.seasonal-title em {
    display: block;
}

.seasonal-title span {
    font-size: 0.56em;
    letter-spacing: -1px;
}

.seasonal-title strong {
    color: #ffd817;
    text-shadow: 0 16px 45px rgba(255, 205, 0, 0.18);
}

[data-morph-words] {
    display: inline-block;
    will-change: opacity, filter, transform;
}

[data-morph-words].is-morphing-out {
    animation: chickbuck-morph-out 180ms ease-in forwards;
}

[data-morph-words].is-morphing-in {
    animation: chickbuck-morph-in 360ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes chickbuck-morph-out {
    to { opacity: 0; filter: blur(8px); transform: translateY(-0.12em) scale(1.04); }
}

@keyframes chickbuck-morph-in {
    from { opacity: 0; filter: blur(10px); transform: translateY(0.16em) scale(0.96); }
    to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

.seasonal-title em {
    width: fit-content;
    margin-top: 20px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 216, 23, 0.48);
    border-radius: 999px;
    color: #ffffff;
    background: rgba(42, 0, 3, 0.2);
    font-size: clamp(17px, 1.8vw, 24px);
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
}

.seasonal-description {
    max-width: 610px;
    margin: 28px 0 30px;
    color: rgba(255, 255, 255, 0.91);
    font-size: clamp(15px, 1.35vw, 18px);
    font-weight: 520;
    line-height: 1.75;
}

.seasonal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.seasonal-date-row {
    width: fit-content;
    margin-top: 28px;
    padding-top: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.seasonal-date-row span {
    color: #ffd817;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.seasonal-date-row strong {
    font-size: 14px;
    font-weight: 800;
}

.seasonal-visual {
    position: relative;
    min-height: 620px;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.seasonal-food-card {
    position: relative;
    z-index: 4;
    width: min(430px, 88%);
    aspect-ratio: 4 / 5;
    margin: 0;
    overflow: hidden;
    border: 2px solid rgba(255, 219, 40, 0.94);
    border-radius: 36px;
    background: #eee9df;
    box-shadow:
        0 42px 90px rgba(45, 0, 2, 0.48),
        0 0 0 10px rgba(255, 255, 255, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    transform: rotate(2deg);
}

.seasonal-hero-slide.is-active .seasonal-food-card {
    animation: seasonalCardFloat 6s ease-in-out infinite;
}

.seasonal-food-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(to top, rgba(79, 0, 5, 0.96), transparent 43%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.14), transparent 27%);
}

.seasonal-food-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 54%;
    transform: scale(1.035);
}

.seasonal-card-brand {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 5;
    min-height: 38px;
    padding: 5px 13px 5px 6px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    color: #ffffff;
    background: rgba(125, 0, 5, 0.78);
    box-shadow: 0 8px 25px rgba(64, 0, 4, 0.18);
    backdrop-filter: blur(10px);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.seasonal-card-brand img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 50%;
    background: #ffffff;
}

.seasonal-food-card figcaption {
    position: absolute;
    right: 24px;
    bottom: 23px;
    left: 24px;
    z-index: 5;
    color: #ffffff;
}

.seasonal-food-card figcaption small,
.seasonal-food-card figcaption strong {
    display: block;
}

.seasonal-food-card figcaption small {
    margin-bottom: 5px;
    color: #ffd817;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.seasonal-food-card figcaption strong {
    max-width: 310px;
    font-size: clamp(20px, 2.15vw, 29px);
    font-weight: 900;
    line-height: 1.15;
}

.onam-pookalam {
    position: absolute;
    right: -18%;
    bottom: -10%;
    z-index: 1;
    width: min(540px, 44vw);
    aspect-ratio: 1;
    border: 10px solid #ffd817;
    border-radius: 50%;
    opacity: 0.9;
    background:
        radial-gradient(circle, #8d0008 0 8%, #ffd817 8% 13%, transparent 13%),
        repeating-conic-gradient(from -8deg, #ffd817 0 9deg, #fff1a8 9deg 18deg, #ff7938 18deg 27deg, #a9000a 27deg 36deg);
    box-shadow:
        0 26px 65px rgba(34, 0, 2, 0.28),
        inset 0 0 0 16px rgba(117, 0, 7, 0.62),
        inset 0 0 0 34px rgba(255, 255, 255, 0.12);
}

.seasonal-hero-slide.is-active .onam-pookalam {
    animation: pookalamTurn 28s linear infinite;
}

.onam-leaf {
    position: absolute;
    z-index: 2;
    width: 105px;
    height: 245px;
    border-radius: 100% 0 100% 0;
    opacity: 0.9;
    background:
        linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.3) 49% 51%, transparent 52%),
        linear-gradient(145deg, #3a9a58, #0d542c 72%);
    box-shadow: 0 20px 42px rgba(0, 45, 17, 0.28);
}

.onam-leaf-one {
    left: 1%;
    bottom: 1%;
    transform: rotate(-38deg);
}

.onam-leaf-two {
    right: -1%;
    top: 2%;
    transform: rotate(128deg) scale(0.82);
}

.onam-umbrella {
    position: absolute;
    top: 2%;
    left: 0;
    z-index: 5;
    width: 116px;
    height: 72px;
    border-radius: 116px 116px 14px 14px;
    border: 3px solid rgba(255, 222, 54, 0.92);
    background: repeating-conic-gradient(from -90deg at 50% 100%, #ffd817 0 18deg, #ba0009 18deg 36deg);
    filter: drop-shadow(0 16px 24px rgba(62, 0, 4, 0.3));
    transform: rotate(-10deg);
}

.onam-umbrella::before,
.onam-umbrella::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.onam-umbrella::before {
    top: -18px;
    width: 8px;
    height: 18px;
    border-radius: 8px 8px 0 0;
    background: #ffd817;
}

.onam-umbrella::after {
    top: 100%;
    width: 5px;
    height: 72px;
    border-radius: 0 0 14px 14px;
    background: #ffd817;
}

.onam-umbrella i {
    position: absolute;
    top: calc(100% + 63px);
    left: 50%;
    width: 18px;
    height: 15px;
    border-right: 5px solid #ffd817;
    border-bottom: 5px solid #ffd817;
    border-radius: 0 0 16px 0;
}

.seasonal-hero-slide.is-active .onam-umbrella {
    animation: umbrellaBob 5s ease-in-out infinite;
}

.hero-carousel-controls {
    position: absolute;
    left: 50%;
    bottom: -54px;
    z-index: 8;
    min-height: 46px;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(66, 0, 5, 0.5);
    box-shadow: 0 16px 38px rgba(50, 0, 4, 0.24);
    backdrop-filter: blur(14px);
    transform: translateX(-50%);
}

.home-page .video-hero .scroll-indicator {
    display: none;
}

.hero-carousel-arrow,
.hero-carousel-autoplay,
.hero-carousel-dot {
    border: 0;
    color: #ffffff;
    background: transparent;
    cursor: pointer;
}

.hero-carousel-arrow,
.hero-carousel-autoplay {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font: inherit;
    font-size: 18px;
    font-weight: 900;
    transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.hero-carousel-autoplay[hidden] {
    display: none !important;
}

.hero-carousel-autoplay {
    border-left: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 0 50% 50% 0;
    font-size: 12px;
}

.hero-carousel-arrow:hover,
.hero-carousel-autoplay:hover {
    color: #9d0008;
    background: #ffd817;
    transform: scale(1.06);
}

.hero-carousel-dots {
    padding: 0 3px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.hero-carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    transition: width 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.hero-carousel-dot.is-active {
    width: 27px;
    background: #ffd817;
}

.hero-carousel-arrow:focus-visible,
.hero-carousel-autoplay:focus-visible,
.hero-carousel-dot:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

@keyframes seasonalCardFloat {
    0%, 100% { transform: translateY(0) rotate(2deg); }
    50% { transform: translateY(-10px) rotate(0.5deg); }
}

@keyframes pookalamTurn {
    to { transform: rotate(360deg); }
}

@keyframes umbrellaBob {
    0%, 100% { transform: translateY(0) rotate(-10deg); }
    50% { transform: translateY(-12px) rotate(-5deg); }
}

@media (max-width: 1100px) {
    .seasonal-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 0.78fr);
        gap: 38px;
    }

    .seasonal-title {
        font-size: clamp(58px, 7.6vw, 84px);
    }

    .seasonal-visual {
        min-height: 570px;
    }
}

@media (max-width: 900px) {
    .home-page.site-theme .hero-section.video-hero {
        min-height: auto;
        padding-bottom: 112px;
    }

    .home-page.site-theme .video-hero .signature-hero-slide .hero-grid,
    .seasonal-hero-grid {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .seasonal-copy,
    .signature-hero-slide .hero-copy {
        text-align: center;
    }

    .seasonal-kicker,
    .seasonal-title em,
    .seasonal-date-row {
        margin-right: auto;
        margin-left: auto;
    }

    .seasonal-description,
    .signature-hero-slide .hero-description {
        margin-right: auto;
        margin-left: auto;
    }

    .seasonal-actions,
    .signature-hero-slide .hero-actions,
    .signature-hero-slide .hero-stats {
        justify-content: center;
    }

    .seasonal-visual {
        min-height: 560px;
    }

    .signature-hero-slide .hero-visual {
        width: min(430px, 92vw);
        margin: 0 auto;
    }

    .onam-pookalam {
        right: 0;
        width: min(520px, 72vw);
    }

    .video-hero .scroll-indicator {
        display: none;
    }

    .hero-carousel-controls {
        bottom: -76px;
    }
}

@media (max-width: 600px) {
    .home-page.site-theme .hero-section.video-hero {
        padding: 126px 0 105px;
    }

    .hero-carousel {
        width: 100%;
    }

    .home-page.site-theme .video-hero .signature-hero-slide .hero-grid,
    .seasonal-hero-grid {
        gap: 34px;
    }

    .seasonal-kicker {
        margin-bottom: 16px;
        font-size: 9px;
        letter-spacing: 0.45px;
    }

    .seasonal-copy,
    .seasonal-description,
    .seasonal-actions,
    .seasonal-actions .button {
        min-width: 0;
        max-width: 100%;
    }

    .seasonal-copy,
    .seasonal-description {
        overflow-wrap: anywhere;
    }

    .seasonal-label {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .seasonal-title {
        font-size: clamp(54px, 18vw, 76px);
        letter-spacing: -3px;
    }

    .seasonal-title em {
        margin-top: 15px;
        font-size: 17px;
    }

    .seasonal-description {
        margin: 22px auto 25px;
        font-size: 14px;
        line-height: 1.65;
    }

    .seasonal-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .seasonal-actions .button {
        width: 100%;
        padding-inline: 20px;
    }

    .seasonal-date-row {
        margin-top: 22px;
        flex-direction: column;
        gap: 5px;
    }

    .seasonal-visual {
        min-height: 450px;
    }

    .seasonal-food-card {
        width: min(315px, 82vw);
        border-radius: 27px;
    }

    .seasonal-card-brand {
        top: 12px;
        left: 12px;
        font-size: 8px;
    }

    .seasonal-food-card figcaption {
        right: 17px;
        bottom: 17px;
        left: 17px;
    }

    .onam-pookalam {
        right: -12%;
        bottom: -10%;
        width: 390px;
        max-width: 104vw;
        border-width: 7px;
    }

    .onam-leaf {
        width: 74px;
        height: 170px;
    }

    .onam-umbrella {
        left: 1%;
        width: 84px;
        height: 52px;
    }

    .signature-hero-slide .hero-title {
        font-size: clamp(46px, 15vw, 66px);
        letter-spacing: -2px;
    }

    .signature-hero-slide .hero-description {
        font-size: 14px;
        line-height: 1.65;
    }

    .signature-hero-slide .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .signature-hero-slide .hero-actions .button {
        width: 100%;
    }

    .signature-hero-slide .hero-stats {
        gap: 13px;
    }

    .signature-hero-slide .stat-item {
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .signature-hero-slide .stat-item > span {
        font-size: 10px;
    }

    .hero-carousel-controls {
        top: -46px;
        right: 5%;
        bottom: auto;
        left: auto;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .seasonal-food-card,
    .rabi-seasonal-poster,
    .onam-pookalam,
    .onam-umbrella,
    .hero-carousel-arrow,
    .hero-carousel-autoplay,
    .hero-carousel-dot {
        animation: none !important;
        transition: none !important;
    }
}

/* 
   SMOOTH RESPONSIVE NAVIGATION
 */

.site-header .glass-nav-links.is-liquid-ready a.active {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

@media (min-width: 901px) {
    .site-header .glass-nav-links a {
        transition:
            color 240ms ease,
            text-shadow 240ms ease,
            transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .site-header .glass-nav-links a:hover,
    .site-header .glass-nav-links a:focus-visible {
        transform: translateY(-1px);
    }
}

@media (min-width: 768px) and (max-width: 900px) {
    .site-header .glass-nav-links {
        transform-origin: top center;
        transform: translate3d(0, -14px, 0) scale(0.965);
        transition:
            opacity 320ms ease,
            visibility 320ms ease,
            transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .site-header .glass-nav-links.open {
        transform: translate3d(0, 0, 0) scale(1);
    }

    .site-header .glass-nav-links a {
        opacity: 0;
        transform: translate3d(-12px, -4px, 0);
        transition:
            opacity 220ms ease,
            transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
            background-color 220ms ease,
            border-color 220ms ease;
    }

    .site-header .glass-nav-links.open a {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: calc(var(--nav-item-index, 0) * 45ms + 35ms);
    }
}

@media (max-width: 767px) {
    .mobile-bottom-nav__inner {
        position: relative;
        isolation: isolate;
    }

    .mobile-bottom-nav__indicator {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
        pointer-events: none;
        border-radius: 999px;
        background: linear-gradient(135deg, #ffe342 0%, #ffc400 100%);
        box-shadow:
            0 8px 22px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.58);
        transition:
            width 440ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 440ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: width, transform;
    }

    .mobile-bottom-nav__indicator.no-transition {
        transition: none;
    }

    .mobile-bottom-nav__item {
        z-index: 1;
    }

    .mobile-bottom-nav__item.is-active {
        background: transparent;
        box-shadow: none;
        transform: translateY(-1px);
    }

    .mobile-bottom-nav__item svg,
    .mobile-bottom-nav__label {
        transition:
            transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
            color 220ms ease;
    }

    .mobile-bottom-nav__item.is-active svg {
        transform: translateY(-1px) scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .glass-nav-links,
    .site-header .glass-nav-links a,
    .mobile-bottom-nav__indicator,
    .mobile-bottom-nav__item svg,
    .mobile-bottom-nav__label {
        transition: none !important;
    }
}

/* 
   DESKTOP LIQUID NAV — THEME SWITCH + POINTER LIGHT
 */

.site-header .glass-nav-actions {
    position: relative;
    z-index: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 9px;
}

.site-header .glass-nav-actions::before {
    content: "";
    width: 1px;
    height: 26px;
    margin-right: 1px;
    background: rgba(255, 255, 255, 0.22);
}

.site-header .glass-theme-toggle {
    position: relative;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.27), rgba(255, 255, 255, 0.07));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.66),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08),
        0 9px 24px rgba(35, 0, 5, 0.23);
    transition:
        color 260ms ease,
        background 350ms ease,
        border-color 350ms ease,
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header .glass-theme-toggle:hover,
.site-header .glass-theme-toggle:focus-visible {
    color: #ffffff;
    outline: none;
    border-color: rgba(255, 255, 255, 0.72);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.11));
    transform: translateY(-2px);
}

.site-header .glass-theme-toggle:focus-visible {
    box-shadow:
        0 0 0 3px rgba(255, 212, 0, 0.72),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.glass-theme-icons {
    position: relative;
    width: 20px;
    height: 20px;
}

.glass-theme-icon {
    position: absolute;
    inset: 0;
    width: 20px;
    height: 20px;
    transition:
        opacity 360ms ease,
        transform 500ms cubic-bezier(0.34, 1.2, 0.64, 1);
}

.glass-theme-icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.glass-theme-icon-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.35);
}

html[data-chickbuck-dark] .glass-theme-icon-sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.35);
}

html[data-chickbuck-dark] .glass-theme-icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

html[data-chickbuck-dark] body.site-theme {
    background:
        radial-gradient(circle at 15% 12%, rgba(255, 200, 0, 0.1), transparent 28%),
        radial-gradient(circle at 85% 72%, rgba(210, 25, 40, 0.16), transparent 31%),
        linear-gradient(135deg, #090506 0%, #16070a 42%, #2c070d 72%, #420810 100%);
    background-size: 100% 100%;
    background-attachment: scroll;
    animation: none !important;
}

html[data-chickbuck-dark] body.site-theme::before,
html[data-chickbuck-dark] body.site-theme::after {
    display: none;
}

html[data-chickbuck-dark] .site-header .glass-navbar {
    border-color: rgba(255, 255, 255, 0.18);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025)),
        rgba(12, 9, 11, 0.74);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 14px 34px rgba(0, 0, 0, 0.36);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-chickbuck-dark] .site-header .glass-nav-links,
html[data-chickbuck-dark] .site-header .glass-theme-toggle,
html[data-chickbuck-dark] .site-header .glass-visit-button {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-chickbuck-dark] .site-header .glass-navbar::after,
html[data-chickbuck-dark] .site-header .glass-visit-button::before,
html[data-chickbuck-dark] body.site-theme :is(
    .hero-orb,
    .hero-particles,
    .reviews-glow,
    .home-gallery-glow
) {
    display: none !important;
}

html[data-chickbuck-dark] body.home-page .specials-section,
html[data-chickbuck-dark] body.home-page .experience-section,
html[data-chickbuck-dark] body.site-theme.home-page .specials-section,
html[data-chickbuck-dark] body.site-theme.home-page .experience-section {
    color: #f8f3f4 !important;
    background: #120a0c !important;
}

html[data-chickbuck-dark] body.home-page .specials-section :is(h2, h3),
html[data-chickbuck-dark] body.home-page .experience-section :is(h2, h3),
html[data-chickbuck-dark] body.site-theme.home-page .specials-section :is(h2, h3),
html[data-chickbuck-dark] body.site-theme.home-page .experience-section :is(h2, h3) {
    color: #ffffff !important;
}

html[data-chickbuck-dark] body.home-page .specials-section :is(.section-label, h2 span),
html[data-chickbuck-dark] body.home-page .experience-section :is(.section-label, h2 span) {
    color: #ffd400 !important;
}

html[data-chickbuck-dark] body.home-page .specials-section p,
html[data-chickbuck-dark] body.home-page .experience-section p {
    color: rgba(255, 255, 255, 0.7) !important;
}

html[data-chickbuck-dark] body.site-theme :is(
    .food-card,
    .menu-card,
    .review-card,
    .faq-item,
    .about-purpose-card,
    .about-value-card,
    .contact-form-card,
    .contact-info-card,
    .contact-region-card,
    .outlet-location-card
) {
    color: #f8f3f4 !important;
    border-color: rgba(255, 255, 255, 0.13) !important;
    background: linear-gradient(145deg, #24171a, #160f11) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-chickbuck-dark] body.site-theme :is(
    .food-card,
    .menu-card,
    .review-card,
    .faq-item,
    .about-purpose-card,
    .about-value-card,
    .contact-form-card,
    .contact-info-card,
    .contact-region-card,
    .outlet-location-card
) :is(h2, h3, h4, strong) {
    color: #ffffff !important;
}

html[data-chickbuck-dark] body.site-theme :is(
    .food-card,
    .menu-card,
    .review-card,
    .faq-item,
    .about-purpose-card,
    .about-value-card,
    .contact-form-card,
    .contact-info-card,
    .contact-region-card,
    .outlet-location-card
) p {
    color: rgba(255, 255, 255, 0.68) !important;
}

html[data-chickbuck-dark] body.site-theme :is(input, textarea, select, .menu-search) {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.16);
    background: #120c0e;
}

@media (max-width: 900px) {
    .site-header .glass-nav-actions {
        display: none;
    }
}

@media (max-width: 767px) {
    .mobile-bottom-nav__inner {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .mobile-bottom-nav__theme {
        border: 0;
        background: transparent;
        cursor: pointer;
        font: inherit;
    }

    .mobile-bottom-nav__theme-icon {
        flex: 0 0 23px;
        width: 23px;
        height: 23px;
        display: grid;
        place-items: center;
        line-height: 1;
        transition: transform 220ms ease, color 220ms ease;
    }

    .mobile-theme-icon {
        width: 21px;
        height: 21px;
    }

    .mobile-theme-icon-sun {
        display: none;
    }

    html[data-chickbuck-dark] .mobile-theme-icon-moon {
        display: none;
    }

    html[data-chickbuck-dark] .mobile-theme-icon-sun {
        display: block;
    }

    .mobile-bottom-nav__theme:active .mobile-bottom-nav__theme-icon {
        transform: scale(0.92) rotate(-8deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .glass-theme-toggle,
    .glass-theme-icon,
    .mobile-bottom-nav__theme-icon {
        transition: none !important;
    }
}

/* TIRUR HERO — DESKTOP ALIGNMENT */
@media (min-width: 901px) {
    /* . */
    .site-header.glass-header {
        width: min(1320px, calc(100% - 80px));
    }

    .home-page.site-theme .video-hero .hero-slide > .container {
        width: min(1440px, calc(100% - 80px));
    }

    .home-page.site-theme .video-hero .signature-hero-slide .hero-grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(430px, 0.78fr);
        gap: clamp(54px, 6vw, 96px);
    }

    .home-page.site-theme .video-hero .tirur-seasonal-grid {
        grid-template-columns: minmax(0, 1fr) minmax(390px, 0.82fr);
        align-items: center;
        gap: clamp(48px, 6vw, 88px);
    }

    .home-page.site-theme .video-hero .tirur-seasonal-copy {
        align-self: center;
        padding-block: 18px;
    }

    .home-page.site-theme .video-hero .tirur-seasonal-visual {
        min-height: clamp(540px, calc(100svh - 214px), 610px);
        justify-self: end;
        width: min(100%, 480px);
    }

    .home-page.site-theme .video-hero .tirur-seasonal-visual::before,
    .home-page.site-theme .video-hero .tirur-sunburst {
        right: 50%;
        bottom: 50%;
        transform: translate(50%, 50%);
    }

    .home-page.site-theme .video-hero .tirur-seasonal-slide .seasonal-food-card {
        width: min(400px, 82%);
    }

    .home-page.site-theme .video-hero .tirur-location {
        top: 8%;
        right: 3%;
    }
}

/* Desktop-only liquid-metal navigation finish.
   CSS is used instead of the React/WebGL component so this static site stays fast. */
@media (min-width: 901px) {
    .site-header .glass-navbar::before {
        background:
            linear-gradient(
                108deg,
                rgba(255, 255, 255, 0.10) 0%,
                rgba(255, 255, 255, 0.42) 18%,
                rgba(255, 235, 223, 0.12) 32%,
                rgba(255, 255, 255, 0.02) 50%,
                rgba(255, 198, 190, 0.30) 67%,
                rgba(255, 255, 255, 0.16) 82%,
                rgba(255, 255, 255, 0.08) 100%
            );
        background-size: 240% 100%;
        animation: chickbuck-liquid-metal-flow 9s ease-in-out infinite;
    }

    .site-header .glass-navbar::after {
        top: -75%;
        left: -35%;
        width: 48%;
        height: 250%;
        opacity: 0;
        background: linear-gradient(
            104deg,
            transparent 27%,
            rgba(255, 255, 255, 0.05) 40%,
            rgba(255, 255, 255, 0.46) 50%,
            rgba(255, 215, 209, 0.17) 58%,
            transparent 73%
        );
        /* The background already has the liquid-metal movement above.
           A second blurred highlight sweep caused visible stutter on some PCs. */
        filter: none;
        animation: none;
    }
}

@keyframes chickbuck-liquid-metal-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes chickbuck-liquid-metal-highlight {
    0%, 24% { left: -42%; opacity: 0; }
    32% { opacity: 0.7; }
    58% { left: 105%; opacity: 0.25; }
    66%, 100% { left: 115%; opacity: 0; }
}

/* Radial-glow order buttons, adapted for the Chick Buck HTML site. */
.site-header .glass-visit-button {
    isolation: isolate;
    border-color: rgba(255, 224, 93, 0.86);
    background:
        radial-gradient(135% 210% at 26% 125%, #5d0005 0 29%, #a4000b 53%, #d91a0d 70%, #ffcf00 100%);
    background-size: 175% 175%;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.48),
        0 0 0 1px rgba(255, 212, 0, 0.14),
        0 10px 28px rgba(85, 0, 8, 0.34),
        0 0 20px rgba(255, 199, 0, 0.16);
    animation: none;
}

.site-header .glass-visit-button::before {
    top: -80%;
    left: -55%;
    width: 52%;
    height: 260%;
    opacity: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.56) 50%, transparent 65%);
    transform: rotate(13deg);
    animation: none;
}

.site-header .glass-visit-button::after {
    color: #720006;
    border-color: rgba(255, 255, 255, 0.62);
    background: #ffd400;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 3px 9px rgba(77, 0, 4, 0.22);
}

.site-header .glass-visit-button:hover {
    background-position: 100% 12%;
    animation: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.70),
        0 0 0 1px rgba(255, 225, 110, 0.36),
        0 14px 34px rgba(85, 0, 8, 0.42),
        0 0 30px rgba(255, 209, 0, 0.34);
}

.site-header .glass-visit-button:hover::before {
    animation: none;
}

@keyframes chickbuck-order-radial-glow {
    0%, 100% { background-position: 5% 86%; }
    50% { background-position: 92% 10%; }
}

@keyframes chickbuck-order-highlight {
    0%, 35% { left: -55%; opacity: 0; }
    43% { opacity: 0.72; }
    65% { left: 118%; opacity: 0; }
    100% { left: 118%; opacity: 0; }
}

@media (max-width: 767px) {
    .menu-mobile-order-button {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        border: 1px solid rgba(255, 240, 160, 0.78);
        color: #690000;
        background:
            radial-gradient(145% 230% at 22% 135%, #ffbe00 0 28%, #ffd400 48%, #ffea56 69%, #ff9b00 100%);
        background-size: 175% 175%;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.60),
            0 10px 24px rgba(38, 0, 0, 0.25),
            0 0 18px rgba(255, 210, 0, 0.26);
        animation: chickbuck-order-radial-glow 5.5s ease-in-out infinite;
    }

    .menu-mobile-order-button::before {
        content: "";
        position: absolute;
        top: -90%;
        left: -55%;
        width: 48%;
        height: 280%;
        pointer-events: none;
        background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.52) 50%, transparent 65%);
        transform: rotate(13deg);
        animation: chickbuck-order-highlight 5.5s ease-in-out infinite;
    }

    .menu-mobile-order-button span {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 31px;
        height: 31px;
        border-radius: 50%;
        color: #690000;
        background: rgba(255, 255, 255, 0.52);
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .glass-visit-button,
    .site-header .glass-visit-button::before,
    .menu-mobile-order-button,
    .menu-mobile-order-button::before {
        animation: none !important;
    }
}

/* Tirur opening — original dark campaign appearance. */
.tirur-seasonal-slide .onam-seasonal-wash {
    background:
        radial-gradient(circle at 78% 48%, rgba(222, 11, 20, 0.26), transparent 30%),
        radial-gradient(circle at 12% 20%, rgba(255, 209, 0, 0.10), transparent 28%),
        linear-gradient(118deg, #050505 0%, #101010 52%, #090909 100%);
}

.tirur-seasonal-slide .onam-seasonal-wash::before {
    opacity: 0.34;
    background:
        repeating-linear-gradient(130deg, transparent 0 38px, rgba(255, 255, 255, 0.035) 39px 40px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 56%);
}

.tirur-seasonal-slide .seasonal-kicker,
.tirur-seasonal-slide .seasonal-card-brand {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(15, 15, 15, 0.72);
}

.tirur-seasonal-slide .seasonal-label,
.tirur-seasonal-slide .seasonal-date-row span,
.tirur-seasonal-slide .seasonal-food-card figcaption small {
    color: #ff2932;
}

.tirur-seasonal-title { font-style: italic; letter-spacing: -0.09em; }
.tirur-seasonal-title span { color: #fff; transform: rotate(-3deg); transform-origin: left center; }
.tirur-seasonal-title strong {
    color: #f3131d;
    text-shadow: 0 15px 42px rgba(235, 10, 21, 0.28);
    transform: rotate(-3deg);
    transform-origin: left center;
}

.tirur-seasonal-slide .button-yellow {
    color: #fff;
    background: #f3131d;
    box-shadow: 0 12px 28px rgba(231, 10, 21, 0.28);
}

.tirur-seasonal-slide .button-yellow:hover,
.tirur-seasonal-slide .button-yellow:focus-visible {
    background: #ff333b;
}

.tirur-opening-seal {
    position: absolute;
    z-index: 5;
    right: 1%;
    bottom: 1%;
    display: grid;
    place-items: center;
    width: min(370px, 76%);
    aspect-ratio: 1;
    padding: 42px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    color: #fff;
    background: radial-gradient(circle, rgba(42, 0, 4, 0.88), rgba(10, 0, 1, 0.50) 68%, transparent 69%);
    box-shadow: inset 0 0 42px rgba(243, 19, 29, 0.20);
    text-align: center;
    text-transform: uppercase;
}

.tirur-opening-seal img {
    width: 84px;
    height: 84px;
    object-fit: contain;
}

.tirur-opening-seal span {
    color: #ffd817;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.15em;
}

.tirur-opening-seal strong {
    color: #fff;
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 900;
    line-height: 0.9;
}

.tirur-opening-seal small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

@media (max-width: 768px) {
    .tirur-opening-seal {
        right: 50%;
        bottom: 7%;
        width: min(300px, 74vw);
        transform: translateX(50%);
    }
}

/* Desktop performance mode: retain the brand palette, hero video and liquid
   navigation, but stop decorative animation layers that cause repaint work on
   lower-powered Windows laptops. Mobile styling remains unchanged. */
@media (min-width: 768px) {
    body.site-theme::before,
    body.site-theme::after,
    .hero-grid-pattern,
    .hero-orb,
    .hero-particles span,
    .hero-video-glow,
    .hero-video-frame::before,
    .hero-live-dot,
    .hero-price-badge,
    .hero-ring,
    .review-glow {
        animation: none !important;
    }

    .hero-grid-pattern {
        background-position: 0 0;
    }

    .hero-particles span {
        opacity: 0.45;
        transform: none;
    }

    .hero-video-glow {
        opacity: 0.72;
        transform: translate(-50%, -50%) scale(0.96);
    }

    .hero-price-badge,
    .hero-ring {
        transform: none;
    }

    /* Section glass remains visually translucent without repeatedly blurring
       all content behind it while the visitor scrolls. */
    body.site-theme .specials-section,
    body.site-theme .experience-section,
    body.site-theme .about-story,
    body.site-theme .about-values {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}