/* =========================================================
   SELF-HOSTED FONTS
   ========================================================= */

@font-face {
    font-family: "Bebas Neue";
    src: url("/fonts/BebasNeue-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("/fonts/Montserrat-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("/fonts/Montserrat-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("/fonts/Montserrat-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Luckiest Guy";
    src: url("/fonts/LuckiestGuy-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Black Jack";
    src: url("/fonts/blackjack.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("/fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("/fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf") format("truetype");
    font-weight: 400 900;
    font-style: italic;
    font-display: swap;
}


/* =========================================================
   BRAND
   ========================================================= */

:root {
    --brown: #4f2c1d;
    --deep-brown: #281e18;
    --charcoal: #322e2f;

    --cream: #f7dca6;
    --terracotta: #cd5f4d;
    --blue: #698798;

    --white: #ffffff;
}


/* =========================================================
   BASE
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family: "Montserrat", sans-serif;
    color: var(--cream);

    background-image: url("/images/backgrounds/Algarve-Galeon.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow-x: hidden;
}

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

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


/* =========================================================
   TOP HEADER
   ========================================================= */

.site-header {
    width: 100%;
}

.header-main {
    min-height: 205px;

    display: grid;
    grid-template-columns: 1fr 280px 1fr;
    align-items: center;

    max-width: 850px;
    margin: 0 auto;
    padding: 20px 0 25px;
}


/* =========================================================
   ADDRESS + PHONE
   ========================================================= */

.header-contact {
    text-align: right;
    justify-self: end;
    padding-right: 45px;
}

.header-contact address {
    margin: 0 0 4px;

    font-style: normal;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.35;

    color: var(--cream);
}

.header-phone {
    display: inline-block;

    font-family: "Luckiest Guy", cursive;
    font-size: 22px;
    line-height: 1;

    color: var(--cream);

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.header-phone:hover {
    color: var(--terracotta);
    transform: scale(1.04);
}

.contact-line {
    display: block;
    width: max-content;
    margin-left: auto;

    opacity: 0;
    clip-path: inset(0 100% 0 0);

    will-change: clip-path, opacity;
}

.contact-line-1 {
    animation: contactReveal 0.25s ease-out 1.25s forwards;
}

.contact-line-2 {
    animation: contactReveal 0.25s ease-out 1.50s forwards;
}

.contact-line-3 {
    animation: contactReveal 0.25s ease-out 1.75s forwards;
}

@keyframes contactReveal {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }

    1% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

/* =========================================================
   LOGO
   ========================================================= */

.header-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-logo img {
    width: 270px;
    height: auto;

    opacity: 0;
    transform-origin: center center;

    animation: logoReveal 0.5s ease-out 0.75s forwards;
}
@keyframes logoReveal {

    0% {
        opacity: 0;
        transform:
            perspective(700px)
            rotateY(-55deg)
            skewY(-4deg)
            scaleX(0.92);
    }

    45% {
        opacity: 1;
        transform:
            perspective(700px)
            rotateY(14deg)
            skewY(2deg)
            scaleX(1.03);
    }

    70% {
        transform:
            perspective(700px)
            rotateY(-6deg)
            skewY(-1deg)
            scaleX(0.99);
    }

    100% {
        opacity: 1;
        transform:
            perspective(700px)
            rotateY(0deg)
            skewY(0deg)
            scaleX(1);
    }
}

/* =========================================================
   SOCIAL ICONS
   ========================================================= */

.header-social {
    justify-self: start;

    display: flex;
    align-items: center;
    gap: 34px;

    padding-left: 42px;
}

.header-social a {
    display: block;

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

.header-social img {
    width: 48px;
    height: 48px;

    opacity: 0;
    transform-origin: center;

    will-change: transform, opacity;
}

.header-social a:nth-child(1) img {
    animation: cannonballLaunchReverse 0.5s
        cubic-bezier(0.2, 0.9, 0.3, 1.25)
        2s
        both;
}

@keyframes cannonballLaunchReverse {

    0% {
        opacity: 0;

        transform:
            translate(
                var(--launch-x),
                var(--launch-y)
            )
            scale(0.2)
            rotate(-40deg);
    }

    65% {
        opacity: 1;

        transform:
            translate(7px, 5px)
            scale(1.18)
            rotate(5deg);
    }

    82% {
        transform:
            translate(-2px, -2px)
            scale(0.9)
            rotate(-2deg);
    }

    100% {
        opacity: 1;

        transform:
            translate(0, 0)
            scale(1)
            rotate(0deg);
    }
}

.header-social a:nth-child(2) img {
    animation: cannonballLaunch 0.5s
        cubic-bezier(0.2, 0.9, 0.3, 1.25)
        2.25s
        both;
}

@keyframes cannonballLaunch {

    0% {
        opacity: 0;

        transform:
            translate(
                var(--launch-x),
                var(--launch-y)
            )
            scale(0.2)
            rotate(40deg);
    }

    65% {
        opacity: 1;

        transform:
            translate(-7px, -5px)
            scale(1.18)
            rotate(-5deg);
    }

    82% {
        transform:
            translate(2px, 2px)
            scale(0.9)
            rotate(2deg);
    }

    100% {
        opacity: 1;

        transform:
            translate(0, 0)
            scale(1)
            rotate(0deg);
    }
}


.header-social a:hover {
    transform: scale(1.1);
    opacity: 0.8;
}



/* =========================================================
   SKIP HEADER INTRO AFTER FIRST PAGE
   ========================================================= */

.skip-header-intro .header-logo img {
    animation: none;
    opacity: 1;

    transform:
        perspective(700px)
        rotateY(0)
        skewY(0)
        scaleX(1);
}


.skip-header-intro .contact-line {
    animation: none;

    opacity: 1;
    clip-path: inset(0 0 0 0);
}


.skip-header-intro .header-social,
.skip-header-intro .header-social a,
.skip-header-intro .header-social img {
    animation: none !important;
    opacity: 1 !important;
}

.skip-header-intro .header-social img {
    transform: none;
}

.skip-header-intro .main-nav::before {
    animation: none !important;
    transform: scaleX(1) !important;
}

.skip-header-intro .nav-link {
    animation: none !important;

    opacity: 1 !important;
    transform: scale(1) !important;
}

/* =========================================================
   MAIN NAVIGATION
   ========================================================= */

.main-nav {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;
    height: 116px;

    display: grid;
    grid-template-columns: repeat(2, 220px);
    justify-content: center;
    align-items: stretch;
    gap: 35px;

    background: transparent;

    overflow: visible;
}

.main-nav::before {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(40, 30, 24, 0.88);

    border-top: 1px solid rgba(247, 220, 166, 0.22);
    border-bottom: 1px solid rgba(247, 220, 166, 0.12);

    transform: scaleX(0);
    transform-origin: left center;

    animation: navStripReveal 0.15s ease-out 2.75s forwards;

    z-index: 0;
}

@keyframes navStripReveal {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.nav-link {
    position: relative;
    z-index: 1;

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

    font-family: "Bebas Neue", sans-serif;
    font-size: 58px;
    font-weight: 400;
    letter-spacing: 0.5px;

    color: var(--cream);

    opacity: 0;
    transform: scale(0.35);

    transition:
        color 0.18s ease,
        background-color 0.18s ease;
}

.nav-link:nth-child(1) {
    animation: navButtonPop 0.25s ease-out 3.15s forwards;
}

.nav-link:nth-child(2) {
    animation: navButtonPop 0.25s ease-out 3.25s forwards;
}



@keyframes navButtonPop {

    0% {
        opacity: 0;
        transform: scale(0.35);
    }

    65% {
        opacity: 1;
        transform: scale(1.18);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* Hover */

.nav-link:hover {
    color: var(--terracotta);
}


/* Current page */

.nav-link.active {
    color: var(--white);
}

/* ---------------------------------------------------------
   NAV HOVER JIGGLE + PARTICLES
   --------------------------------------------------------- */

.nav-label {
    position: relative;
    z-index: 2;

    display: inline-block;
}

.nav-link:hover .nav-label {
    animation: navHoverJiggle 0.45s ease-in-out 1;
}

.nav-link::before,
.nav-link::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    z-index: 3;

    opacity: 0;
    pointer-events: none;
}

.nav-link::before {
    width: 260px;
    height: 100px;

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

    background:
        radial-gradient(circle at 8% 55%, rgba(245, 215, 160, 0.7) 0 5px, transparent 7px),
        radial-gradient(circle at 18% 30%, rgba(220, 185, 125, 0.6) 0 7px, transparent 9px),
        radial-gradient(circle at 28% 70%, rgba(250, 225, 175, 0.65) 0 5px, transparent 7px),
        radial-gradient(circle at 72% 65%, rgba(235, 200, 145, 0.65) 0 6px, transparent 8px),
        radial-gradient(circle at 82% 28%, rgba(250, 225, 170, 0.7) 0 5px, transparent 7px),
        radial-gradient(circle at 93% 55%, rgba(220, 185, 125, 0.55) 0 7px, transparent 9px);

    filter: blur(2px);
}

.nav-link::after {
    width: 270px;
    height: 110px;

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

    background:
        radial-gradient(circle at 5% 48%, #fff7d8 0 2px, transparent 3px),
        radial-gradient(circle at 16% 20%, #ffe5a0 0 1.5px, transparent 3px),
        radial-gradient(circle at 26% 75%, #ffffff 0 2px, transparent 3px),
        radial-gradient(circle at 74% 70%, #ffe6a3 0 2px, transparent 3px),
        radial-gradient(circle at 84% 22%, #fff9dd 0 1.5px, transparent 3px),
        radial-gradient(circle at 96% 48%, #ffffff 0 2px, transparent 3px);
}

.nav-link:hover::before {
    animation: navDustShake 0.5s ease-out 0.15s 1 forwards;
}

.nav-link:hover::after {
    animation: navSparkleShake 0.5s ease-out 0.15s 1 forwards;
}

@keyframes navHoverJiggle {

    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(-2deg);
    }

    40% {
        transform: rotate(2deg);
    }

    60% {
        transform: rotate(-1.5deg);
    }

    80% {
        transform: rotate(1.5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}


@keyframes navDustShake {

    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }

    18% {
        opacity: 0.75;
        transform: translate(-50%, -52%) scale(0.7);
    }

    55% {
        opacity: 0.45;
        transform: translate(-50%, -65%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -85%) scale(1.2);
    }
}


@keyframes navSparkleShake {

    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.6);
    }

    18% {
        opacity: 1;
        transform: translate(-50%, -55%) scale(0.9);
    }

    55% {
        opacity: 0.8;
        transform: translate(-50%, -70%) scale(1.05);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -95%) scale(1.15);
    }
}


/* =========================================================
   PARALLAX SECTIONS
   ========================================================= */

.parallax-section {
    width: 100%;
    height: 330px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.hero-parallax {
    background-image: url("/images/food/hero.jpg");

    clip-path: inset(0 0 100% 0);

    animation: heroReveal 0.25s linear 2.9s forwards;
}

@keyframes heroReveal {
    from {
        clip-path: inset(0 0 100% 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.cocktails-parallax {
    background-image: url("/images/food/cocktails.jpg");
    background-position: center -995%;

    position: relative;
    top: 0;
    left: 0;

    z-index: 5;

    clip-path: inset(0 0 100% 0);

    animation:
        cocktailReveal 0.25s linear 3.15s forwards,
        cocktailImpact 1s linear 5s forwards;
}

@keyframes cocktailReveal {
    from {
        clip-path: inset(0 0 100% 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes cocktailImpact {

    /* 5.00 → 5.25 */
    0% {
        top: 0;
        left: 0;
    }

    25% {
        top: 40px;
        left: 0;
    }

    /* 5.25 → 5.50 */
    50% {
        top: 20px;
        left: 0;
    }

    /* 5.50 → 5.75 */
    75% {
        top: 20px;
        left: 0;
    }

    /* 5.75 → 6.00 shake */
    79% {
        top: 20px;
        left: 5px;
    }

    83% {
        top: 18px;
        left: -6px;
    }

    87% {
        top: 22px;
        left: 5px;
    }

    91% {
        top: 19px;
        left: -4px;
    }

    95% {
        top: 21px;
        left: 3px;
    }

    100% {
        top: 0;
        left: 0;
    }
}

/* =========================================================
   PROMOTION OPENING LIGHT
   ========================================================= */

.promotion-flash {
    position: relative;

    width: 100%;
    height: 0;

    z-index: 30;

    pointer-events: none;
    overflow: visible;
}

/* ---------------------------------------------------------
   DUST POOF
   5.00s → 5.75s
   --------------------------------------------------------- */

.promotion-dust {
    position: absolute;

    left: 50%;
    top: 0;

    width: 520px;
    height: 180px;

    transform: translate(-50%, -55%) scale(0.25);
    transform-origin: center;

    opacity: 0;

    pointer-events: none;

    z-index: 32;

    background:
        radial-gradient(circle at 12% 58%, rgba(255, 232, 180, 0.55) 0 12px, transparent 13px),
        radial-gradient(circle at 22% 42%, rgba(235, 205, 150, 0.52) 0 16px, transparent 17px),
        radial-gradient(circle at 30% 64%, rgba(255, 242, 205, 0.46) 0 14px, transparent 15px),
        radial-gradient(circle at 40% 38%, rgba(220, 190, 135, 0.50) 0 18px, transparent 19px),
        radial-gradient(circle at 50% 56%, rgba(255, 236, 188, 0.55) 0 20px, transparent 21px),
        radial-gradient(circle at 60% 36%, rgba(228, 198, 145, 0.48) 0 17px, transparent 18px),
        radial-gradient(circle at 70% 62%, rgba(255, 240, 198, 0.46) 0 15px, transparent 16px),
        radial-gradient(circle at 82% 44%, rgba(220, 188, 132, 0.50) 0 16px, transparent 17px),
        radial-gradient(circle at 90% 58%, rgba(255, 233, 182, 0.45) 0 12px, transparent 13px);

    filter: blur(6px);

    animation: dustPoof 0.75s ease-out 5s forwards;
}


/* ---------------------------------------------------------
   SPARKLES
   5.00s → 5.75s
   --------------------------------------------------------- */

.promotion-sparkles {
    position: absolute;

    left: 50%;
    top: 0;

    width: 560px;
    height: 180px;

    transform: translate(-50%, -60%) scale(0.5);
    transform-origin: center;

    opacity: 0;

    pointer-events: none;

    z-index: 33;

    background:
        radial-gradient(circle at 14% 55%, rgba(255, 255, 255, 1) 0 2px, transparent 3px),
        radial-gradient(circle at 22% 37%, rgba(255, 245, 210, 1) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 31% 60%, rgba(255, 230, 165, 1) 0 2px, transparent 3px),
        radial-gradient(circle at 43% 34%, rgba(255, 255, 240, 1) 0 2px, transparent 3px),
        radial-gradient(circle at 50% 51%, rgba(255, 236, 180, 1) 0 2.5px, transparent 3.5px),
        radial-gradient(circle at 58% 39%, rgba(255, 255, 255, 1) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 66% 63%, rgba(255, 228, 150, 1) 0 2px, transparent 3px),
        radial-gradient(circle at 74% 41%, rgba(255, 250, 220, 1) 0 2px, transparent 3px),
        radial-gradient(circle at 84% 56%, rgba(255, 235, 175, 1) 0 2px, transparent 3px);

    animation: sparklePoof 0.75s ease-out 5s forwards;
}

@keyframes dustPoof {

    0% {
        opacity: 0;
        transform: translate(-50%, -55%) scale(0.25);
        filter: blur(2px);
    }

    12% {
        opacity: 0.85;
        transform: translate(-50%, -57%) scale(0.65);
        filter: blur(4px);
    }

    38% {
        opacity: 0.72;
        transform: translate(-50%, -60%) scale(1);
        filter: blur(6px);
    }

    65% {
        opacity: 0.42;
        transform: translate(-50%, -64%) scale(1.18);
        filter: blur(8px);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -68%) scale(1.35);
        filter: blur(10px);
    }
}


@keyframes sparklePoof {

    0% {
        opacity: 0;
        transform: translate(-50%, -60%) scale(0.4);
    }

    10% {
        opacity: 1;
        transform: translate(-50%, -61%) scale(0.8);
    }

    28% {
        opacity: 0.95;
        transform: translate(-50%, -63%) scale(1);
    }

    52% {
        opacity: 0.75;
        transform: translate(-50%, -66%) scale(1.08);
    }

    76% {
        opacity: 0.45;
        transform: translate(-50%, -70%) scale(1.18);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -74%) scale(1.28);
    }
}


/* ---------------------------------------------------------
   LIGHT SEAM
   5.00s → 6.00s
   --------------------------------------------------------- */

.promotion-flash::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    width: 100%;
    height: 5px;

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

    transform-origin: center;

    opacity: 0;

    background: linear-gradient(
        90deg,
        rgba(255, 210, 100, 0) 0%,
        rgba(255, 225, 140, 0.55) 15%,
        rgba(255, 250, 220, 1) 40%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 250, 220, 1) 60%,
        rgba(255, 225, 140, 0.55) 85%,
        rgba(255, 210, 100, 0) 100%
    );

    box-shadow:
        0 0 8px rgba(255, 255, 255, 1),
        0 0 18px rgba(255, 245, 210, 1),
        0 0 35px rgba(255, 220, 140, 0.95),
        0 0 70px rgba(255, 190, 80, 0.75),
        0 0 120px rgba(255, 170, 50, 0.4);

    animation:
        seamFlash 1s linear 5s forwards;
}


/* ---------------------------------------------------------
   BIG BURST
   6.00s → 7.00s
   --------------------------------------------------------- */

.promotion-flash::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    width: 130vw;
    height: 900px;

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

    transform-origin: center;

    opacity: 0;

    border-radius: 50%;

    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 250, 220, 0.98) 8%,
        rgba(255, 225, 150, 0.88) 18%,
        rgba(255, 195, 90, 0.55) 34%,
        rgba(255, 170, 55, 0.22) 52%,
        rgba(255, 150, 40, 0) 72%
    );

    animation:
        promotionLightBurst 0.75s ease-out 6s forwards;
}


/* =========================================================
   SEAM ANIMATION
   ========================================================= */

@keyframes seamFlash {

    /* Snaps across immediately */

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scaleX(0);
    }

    8% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scaleX(1);
    }


    /* Warm unstable shimmer */

    20% {
        opacity: 0.55;
    }

    32% {
        opacity: 1;
    }

    44% {
        opacity: 0.65;
    }

    56% {
        opacity: 0.95;
    }

    68% {
        opacity: 0.5;
    }

    78% {
        opacity: 1;
    }

    88% {
        opacity: 0.7;
    }

    96% {
        opacity: 1;
    }


    /* Disappears exactly as the big burst begins */

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scaleX(1);
    }
}


/* =========================================================
   BIG BURST ANIMATION
   ========================================================= */

@keyframes promotionLightBurst {

    0% {
        opacity: 1;

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

    10% {
        opacity: 1;

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

    25% {
        opacity: 0.95;

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

    45% {
        opacity: 0.75;

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

    70% {
        opacity: 0.35;

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

    100% {
        opacity: 0;

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


/* =========================================================
   SIGNATURE DISH SECTION
   ========================================================= */

.signature-section {
    width: 100%;

    height: 0;
    padding: 0 30px;

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

    overflow: hidden;

    animation:
        promotionDropReveal 0.65s
        cubic-bezier(0.18, 0.75, 0.25, 1)
        6s
        forwards;
}

@keyframes promotionDropReveal {

    0% {
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    100% {
        height: calc(min(618.75px, 46.125vw) + 160px);
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

.signature-card {
    position: relative;

    width: min(1100px, 82vw);
    aspect-ratio: 16 / 9;

    overflow: hidden;
}


/* =========================================================
   SIGNATURE VIDEO
   ========================================================= */

.signature-media {
    position: absolute;
    inset: 0;

    display: grid;
    grid-template-columns: 18% 64% 18%;

    width: 100%;
    height: 100%;

    z-index: 0;
}


/* SIDE FOOD IMAGES */

.signature-side {
    position: relative;
    overflow: hidden;
}

.signature-side img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* LEFT SIDE */

.signature-side-left img {
    object-position: center;
}


/* RIGHT SIDE */

.signature-side-right img {
    object-position: center;
}


/* CENTRE VIDEO */

.signature-video-wrap {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.signature-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;
}

.signature-video.active {
    opacity: 1;
}


/* =========================================================
   SIGNATURE CONTENT
   ========================================================= */

.signature-content {
    position: relative;
    z-index: 1;

    width: 64%;
    height: 100%;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 45px 22px;

    text-align: center;

    color: var(--deep-brown);
}

.signature-content h1 {
    margin: 0 0 18px;

    padding: 8px 16px 5px;

    font-family: "Bebas Neue", sans-serif;
    font-size: 61px;
    font-weight: 400;
    line-height: 1;

    color: var(--brown);

    background: rgba(255, 255, 255, 0.72);
}

.signature-intro {
    margin-bottom: 5px;

    font-family: "Black Jack", cursive;
    font-size: 45px;
    font-weight: 400;
    line-height: 1.1;

    color: var(--deep-brown);
}

.signature-content h2 {
    margin: 0 0 14px;

    font-family: "Playfair Display", serif;
    font-size: 58px;
    font-weight: 400;
    line-height: 1.1;

    color: var(--deep-brown);
}

.signature-description {
    max-width: 820px;

    margin: 0 auto 8px;
    padding: 5px 8px;

    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.45;

    color: var(--cream);

    background: rgba(79, 44, 29, 0.72);
}

.signature-price {
    margin: 0 0 20px;
    padding: 1px 6px;

    font-family: "Montserrat", sans-serif;
    font-size: 23px;
    font-weight: 700;

    color: var(--cream);

    background: rgba(79, 44, 29, 0.78);
}

.signature-availability {
    margin: 0 0 18px;

    font-family: "Bebas Neue", sans-serif;
    font-size: 38px;
    font-weight: 400;
    line-height: 1;

    color: var(--deep-brown);
}


/* =========================================================
   BOOKING CTA
   ========================================================= */

.signature-cta {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-width: 260px;

    padding: 12px 30px 8px;

    font-family: "Bebas Neue", sans-serif;
    font-size: 38px;
    font-weight: 400;
    line-height: 1;

    color: var(--cream);
    background: var(--brown);

    animation: bookingJiggle 2s ease-in-out infinite;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;

    position: relative;
    overflow: visible;
}


/* Dust shaken off the button */

.signature-cta::before {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    width: 320px;
    height: 110px;

    transform: translate(-50%, -50%) scale(0.5);
    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(circle at 8% 55%, rgba(245, 215, 160, 0.7) 0 5px, transparent 7px),
        radial-gradient(circle at 18% 30%, rgba(220, 185, 125, 0.6) 0 7px, transparent 9px),
        radial-gradient(circle at 28% 70%, rgba(250, 225, 175, 0.65) 0 5px, transparent 7px),
        radial-gradient(circle at 72% 65%, rgba(235, 200, 145, 0.65) 0 6px, transparent 8px),
        radial-gradient(circle at 82% 28%, rgba(250, 225, 170, 0.7) 0 5px, transparent 7px),
        radial-gradient(circle at 93% 55%, rgba(220, 185, 125, 0.55) 0 7px, transparent 9px);

    filter: blur(2px);

    animation: buttonDust 2s ease-out 0.15s infinite;
}


/* Sparkles shaken off the button */

.signature-cta::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    width: 330px;
    height: 120px;

    transform: translate(-50%, -50%);
    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(circle at 5% 48%, #fff7d8 0 2px, transparent 3px),
        radial-gradient(circle at 16% 20%, #ffe5a0 0 1.5px, transparent 3px),
        radial-gradient(circle at 26% 75%, #ffffff 0 2px, transparent 3px),
        radial-gradient(circle at 74% 70%, #ffe6a3 0 2px, transparent 3px),
        radial-gradient(circle at 84% 22%, #fff9dd 0 1.5px, transparent 3px),
        radial-gradient(circle at 96% 48%, #ffffff 0 2px, transparent 3px);

    animation: buttonSparkles 2s ease-out 0.15s infinite;
}


@keyframes buttonDust {

    0%,
    78% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }

    82% {
        opacity: 0.75;
        transform: translate(-50%, -50%) scale(0.7);
    }

    90% {
        opacity: 0.45;
        transform: translate(-50%, -60%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -75%) scale(1.2);
    }
}


@keyframes buttonSparkles {

    0%,
    80% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.6);
    }

    84% {
        opacity: 1;
        transform: translate(-50%, -55%) scale(0.9);
    }

    91% {
        opacity: 0.8;
        transform: translate(-50%, -68%) scale(1.05);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -90%) scale(1.15);
    }
}

.signature-cta:hover {
    background: var(--terracotta);
    color: var(--white);

    transform: translateY(-2px);
}

@keyframes bookingJiggle {

    0%,
    78%,
    100% {
        transform: rotate(0deg);
    }

    82% {
        transform: rotate(-2deg);
    }

    86% {
        transform: rotate(2deg);
    }

    90% {
        transform: rotate(-1.5deg);
    }

    94% {
        transform: rotate(1.5deg);
    }

    98% {
        transform: rotate(0deg);
    }
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    width: 100%;
    min-height: 210px;

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

    padding: 38px 20px;

    text-align: center;

    background: var(--brown);
}

.footer-hiring-link {
    margin-bottom: 18px;

    font-family: "Bebas Neue", sans-serif;
    font-size: 34px;
    font-weight: 400;
    letter-spacing: 0.8px;
    line-height: 1;

    color: var(--cream);
}

.footer-hiring-link[aria-current="page"] {
    color: var(--white);
}

.site-footer p {
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;

    color: var(--white);
}

.footer-hiring-link,
.site-footer p {
    opacity: 0;
    animation: footerReveal 1s ease 2s forwards;
}

@keyframes footerReveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.site-footer a {
    color: var(--cream);

    transition: color 0.2s ease;
}

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

.price-decimal {
    font-size: 0.82em;
}

/* =========================================================
   CONTACT / BOOKING PAGE
   ========================================================= */

.contact-page {
    width: 100%;
    overflow: hidden;
}



/* Contact parallax banners — same 330px height as HOME */

.contact-parallax {
    position: relative;
    z-index: 2;
}

.contact-parallax-top {
    background-image: url("/images/food/mezze.jpg");

    clip-path: inset(0 100% 0 0);
}

.contact-page.contact-sequence-started .contact-parallax-top {
    animation:
        contactTopReveal
        1s
        cubic-bezier(0.22, 0.7, 0.22, 1)
        0s
        forwards;
}


.contact-parallax-bottom {
    background-image: url("/images/food/port_steak.jpg");

    clip-path: inset(0 0 0 100%);
}

.contact-page.contact-sequence-started .contact-parallax-bottom {
    animation:
        contactBottomReveal
        1s
        cubic-bezier(0.22, 0.7, 0.22, 1)
        1s
        forwards;
}

.contact-form-reveal {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-rows: 0fr;
}

.contact-page.contact-sequence-started .contact-form-reveal {
    animation:
        contactFormOpen
        1s
        cubic-bezier(0.18, 0.75, 0.25, 1)
        2.25s
        forwards;
}

@keyframes contactTopReveal {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes contactBottomReveal {
    from {
        clip-path: inset(0 0 0 100%);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}




.contact-form-reveal-inner {
    min-height: 0;
    overflow: hidden;
}

@keyframes contactFormOpen {
    from {
        grid-template-rows: 0fr;
    }

    to {
        grid-template-rows: 1fr;
    }
}


.booking-section {
    width: 100%;
    padding: 80px 30px;

    display: flex;
    justify-content: center;
}

.booking-card {
    width: min(760px, 90vw);

    padding: 50px;

    color: var(--deep-brown);

    background: rgba(255, 255, 255, 0.92);
}

.booking-card h1 {
    margin: 0 0 10px;

    text-align: center;

    font-family: "Bebas Neue", sans-serif;
    font-size: 68px;
    font-weight: 400;
    line-height: 1;

    color: var(--brown);
}

.booking-intro {
    max-width: 520px;

    margin: 0 auto 40px;

    text-align: center;

    font-size: 17px;
    line-height: 1.5;
}


.contact-reveal-item {
    opacity: 0;
    translate: 0 18px;
}

.contact-page.contact-sequence-started .contact-reveal-item {
    animation:
        contactItemReveal
        0.42s
        cubic-bezier(0.2, 0.75, 0.25, 1)
        forwards;
}


/* Individual delays after the contact sequence starts */

.contact-page.contact-sequence-started .contact-reveal-title {
    animation-delay: 2.50s;
}

.contact-page.contact-sequence-started .contact-reveal-intro {
    animation-delay: 2.75s;
}

.contact-page.contact-sequence-started .contact-reveal-status {
    animation-delay: 2.90s;
}

.contact-page.contact-sequence-started .contact-reveal-name {
    animation-delay: 3.05s;
}

.contact-page.contact-sequence-started .contact-reveal-email {
    animation-delay: 3.30s;
}

.contact-page.contact-sequence-started .contact-reveal-phone {
    animation-delay: 3.45s;
}

.contact-page.contact-sequence-started .contact-reveal-booking-row {
    animation-delay: 3.60s;
}

.contact-page.contact-sequence-started .contact-reveal-message {
    animation-delay: 3.75s;
}

.contact-page.contact-sequence-started .contact-reveal-submit {
    animation-delay: 3.90s;
}

@keyframes contactItemReveal {
    from {
        opacity: 0;
        translate: 0 18px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}


/* Hide spam honeypot */

.booking-honeypot {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}


/* Form */

.booking-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field label {
    font-size: 16px;
    font-weight: 700;

    color: var(--deep-brown);
}

.form-field label span {
    font-weight: 400;
}

.form-field input,
.form-field textarea {
    width: 100%;

    padding: 13px 14px;

    border: 2px solid rgba(40, 30, 24, 0.25);
    outline: none;

    font-family: "Montserrat", sans-serif;
    font-size: 16px;

    color: var(--deep-brown);
    background: rgba(255, 255, 255, 0.9);

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

.form-field input {
    height: 52px;
}

.form-field textarea {
    min-height: 140px;

    resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
    border-color: var(--terracotta);

    box-shadow:
        0 0 0 3px rgba(205, 95, 77, 0.15);
}


/* Date / time / people row */

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


/* Submit button */

.booking-submit {
    width: 100%;

    margin-top: 8px;
    padding: 16px 30px 12px;

    border: 0;

    cursor: pointer;

    font-family: "Bebas Neue", sans-serif;
    font-size: 30px;
    letter-spacing: 0.5px;

    color: var(--cream);
    background: var(--brown);

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.booking-submit:hover {
    background: var(--terracotta);

    transform: translateY(-2px);
}


/* Messages */

.booking-success,
.booking-errors {
    margin-bottom: 28px;
    padding: 16px 18px;

    font-weight: 600;
    line-height: 1.4;
}

.booking-success {
    color: #244b2d;
    background: #dcebdd;
}

.booking-errors {
    color: #702626;
    background: #f2dddd;
}

.booking-errors p {
    margin: 0;
}


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

    .contact-parallax-top,
    .contact-parallax-bottom,
    .contact-form-reveal,
    .contact-reveal-item {
        animation: none !important;
    }

    .contact-parallax-top,
    .contact-parallax-bottom {
        clip-path: inset(0 0 0 0);
    }

    .contact-form-reveal {
        grid-template-rows: 1fr;
    }

    .contact-reveal-item {
        opacity: 1;
        translate: none;
    }
}


/* =========================================================
   HOME TIMELINE WHEN HEADER INTRO IS SKIPPED
   ========================================================= */

.skip-header-intro .hero-parallax {
    animation:
        heroReveal 0.25s linear 0s forwards;
}


.skip-header-intro .cocktails-parallax {
    animation:
        cocktailReveal 0.25s linear 0.25s forwards,
        cocktailImpact 1s linear 2.1s forwards;
}


.skip-header-intro .promotion-dust {
    animation:
        dustPoof 0.75s ease-out 2.1s forwards;
}


.skip-header-intro .promotion-sparkles {
    animation:
        sparklePoof 0.75s ease-out 2.1s forwards;
}


.skip-header-intro .promotion-flash::before {
    animation:
        seamFlash 1s linear 2.1s forwards;
}


.skip-header-intro .promotion-flash::after {
    animation:
        promotionLightBurst 0.75s ease-out 3.1s forwards;
}


.skip-header-intro .signature-section {
    animation:
        promotionDropReveal 0.65s
        cubic-bezier(0.18, 0.75, 0.25, 1)
        3.1s
        forwards;
}

/* =========================================================
   HIRING PAGE
   ========================================================= */

/*
   Normal visit:
   Header/nav finishes at roughly 3.6s.
   Hiring animation starts immediately afterwards.

   Page-to-page navigation:
   skip-header-intro changes this to 0s.
*/

.hiring-page {
    --hiring-start: 3.65s;

    width: 100%;

    padding:
        70px
        30px
        110px;
}


.skip-header-intro .hiring-page {
    --hiring-start: 0s;
}


/* ---------------------------------------------------------
   LAYOUT
   --------------------------------------------------------- */

.hiring-section {
    width: min(1100px, 86vw);

    margin: 0 auto;
}


/* ---------------------------------------------------------
   PHOTO SNAP
   --------------------------------------------------------- */

.hiring-photo {
    position: relative;
    container-type: inline-size;
    width: 100%;

    opacity: 0;

    transform:
        scale(0.82)
        rotate(-1deg);

    transform-origin: center;

    animation:
        hiringPhotoSnap
        0.42s
        cubic-bezier(0.18, 0.85, 0.25, 1.2)
        var(--hiring-start)
        forwards;
}


.hiring-photo img {
    display: block;

    width: 100%;
    height: auto;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.32);
}


@keyframes hiringPhotoSnap {

    0% {
        opacity: 0;

        transform:
            scale(0.82)
            rotate(-1deg);
    }

    68% {
        opacity: 1;

        transform:
            scale(1.025)
            rotate(0.15deg);
    }

    100% {
        opacity: 1;

        transform:
            scale(1)
            rotate(0deg);
    }
}


/* ---------------------------------------------------------
   COPY PANEL
   --------------------------------------------------------- */

.hiring-copy {
    position: absolute;

    top: 5cqw;
    left: 5%;

    z-index: 2;

    width: 90%;
    height: 40%;

    box-sizing: border-box;

    margin: 0;

    padding: 24px 50px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;

    color: var(--deep-brown);

    background:
        rgba(247, 220, 166, 0.94);

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, 0.25);

    opacity: 0;

    transform:
        translateY(18px);

    animation:
        hiringPanelReveal
        0.18s
        ease-out
        calc(var(--hiring-start) + 0.42s)
        forwards;
}


@keyframes hiringPanelReveal {

    from {
        opacity: 0;

        transform:
            translateY(18px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ---------------------------------------------------------
   TEXT
   --------------------------------------------------------- */

.hiring-title,
.hiring-intro,
.hiring-body,
.hiring-cv,
.hiring-email {
    opacity: 0;
}


/* Heading */

.hiring-title {
    margin:
        0
        0
        22px;

    font-family:
        "Bebas Neue",
        sans-serif;

    font-size: 72px;
    font-weight: 400;
    line-height: 0.95;

    color: var(--brown);

    clip-path:
        inset(0 100% 0 0);

    transform:
        translateX(-12px);

    animation:
        hiringTitleReveal
        0.28s
        ease-out
        calc(var(--hiring-start) + 0.45s)
        forwards;
}


@keyframes hiringTitleReveal {

    from {
        opacity: 0;

        clip-path:
            inset(0 100% 0 0);

        transform:
            translateX(-12px);
    }

    to {
        opacity: 1;

        clip-path:
            inset(0 0 0 0);

        transform:
            translateX(0);
    }
}


/* Paragraphs */

.hiring-intro,
.hiring-body,
.hiring-cv {
    transform:
        translateY(12px);

    animation:
        hiringTextReveal
        0.28s
        ease-out
        forwards;
}


.hiring-intro {
    margin:
        0
        0
        22px;

    font-size: 19px;
    font-weight: 600;
    line-height: 1.5;

    animation-delay:
        calc(var(--hiring-start) + 0.60s);
}


.hiring-body {
    max-width: 760px;

    margin:
        0
        auto
        22px;

    font-size: 17px;
    line-height: 1.65;

    animation-delay:
        calc(var(--hiring-start) + 0.75s);
}


.hiring-cv {
    margin:
        0
        0
        20px;

    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;

    animation-delay:
        calc(var(--hiring-start) + 0.90s);
}


@keyframes hiringTextReveal {

    from {
        opacity: 0;

        transform:
            translateY(12px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ---------------------------------------------------------
   EMAIL CTA
   --------------------------------------------------------- */

.hiring-email {
    display: inline-block;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 32px;
    font-weight: 700;

    color: var(--terracotta);

    text-decoration: none;

    transform:
        scale(0.82);

    animation:
        hiringEmailPop
        0.28s
        ease-out
        calc(var(--hiring-start) + 1.05s)
        forwards;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}


.hiring-email:hover {
    color: var(--brown);

    transform:
        scale(1.04);
}


@keyframes hiringEmailPop {

    0% {
        opacity: 0;

        transform:
            scale(0.82);
    }

    65% {
        opacity: 1;

        transform:
            scale(1.06);
    }

    100% {
        opacity: 1;

        transform:
            scale(1);
    }
}


/* =========================================================
   MOBILE LAYOUT
   ========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------------------
       PAGE BACKGROUND
       ----------------------------------------------------- */

    body {
        background-image: url("/images/backgrounds/algarve-mobile.jpg");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        background-attachment: scroll;
    }


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */
    .site-header {
    min-height: 0;
    }

.header-main {
    display: grid;

    grid-template-columns:
        44vw
        auto;

    grid-template-areas:
        "logo logo"
        "contact social";

    column-gap: 5vw;

    --mobile-header-gap: 6vw;

    row-gap: var(--mobile-header-gap);

    width: 100%;
    max-width: none;
    min-height: 0;

    margin: 0;

    padding:
        6vw
        0
        var(--mobile-header-gap);

    justify-content: center;
    align-items: center;
}


.header-contact {
    position: static;

    grid-area: contact;
    justify-self: end;

    width: 100%;

    padding: 0;

    text-align: right;
}

.header-contact address {
    font-size: 4.2vw;
    line-height: 1.25;

    white-space: nowrap;
}

.header-phone {
    font-size: 5.2vw;
}


.header-social {
    position: static;

    grid-area: social;
    justify-self: start;

    display: flex;
    align-items: center;

    gap: 4vw;

    padding: 0;
}

.header-social img {
    width: 11vw;
    height: 11vw;
}


    .header-logo {
        position: static;

        grid-area: logo;
        justify-self: center;

        width: 52vw;

        transform: none;
    }

    .header-logo img {
        width: 100%;
    }




    .header-contact address {
        font-size: 4.2vw;
        line-height: 1.25;
    }

    .header-phone {
        font-size: 5.2vw;
    }




    .header-social img {
        width: 11vw;
        height: 11vw;
    }
    

    .header-logo img {
        width: 100%;
    }

   

    .header-contact address {
        font-size: 18px;
        line-height: 1.25;
    }

    .header-phone {
        font-size: 22px;
    }

  
    .header-social img {
        width: 48px;
        height: 48px;
    }

    .header-social a:hover {
        transform: none;
        opacity: 1;
    }

    .header-social a:active {
        transform: scale(1.1);
        opacity: 0.8;
    }


    /* -----------------------------------------------------
       STICKY NAV — THE ONLY STICKY PART ON MOBILE
       ----------------------------------------------------- */

    .main-nav {
        top: 0;

        height: 96px;

        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;

        padding:
            0
            max(20px, env(safe-area-inset-right))
            0
            max(20px, env(safe-area-inset-left));
    }

    .main-nav::before {
        background: rgba(79, 44, 29, 0.97);
    }

    .nav-link {
        font-size: clamp(46px, 11.5vw, 56px);
    }

    .nav-link::before {
        width: 190px;
        height: 86px;
    }

    .nav-link::after {
        width: 200px;
        height: 92px;
    }

    /*
       Phones do not have a useful hover state. Prevent the browser
       from leaving a sticky :hover style behind after a tap.
    */

    .nav-link:hover {
        color: var(--cream);
    }

    .nav-link.active:hover {
        color: var(--white);
    }

    .nav-link:hover .nav-label,
    .nav-link:hover::before,
    .nav-link:hover::after {
        animation: none;
    }

    /*
       script.js adds .nav-touch-effect for a tap and once on the
       destination page. This intentionally reuses the desktop
       jiggle, dust and sparkle animations.
    */

    .nav-link.nav-touch-effect {
        color: var(--terracotta);
    }

    .nav-link.nav-touch-effect .nav-label {
        animation: navHoverJiggle 0.45s ease-in-out 1;
    }

    .nav-link.nav-touch-effect::before {
        animation: navDustShake 0.5s ease-out 0.05s 1 forwards;
    }

    .nav-link.nav-touch-effect::after {
        animation: navSparkleShake 0.5s ease-out 0.05s 1 forwards;
    }


    /* -----------------------------------------------------
       HOME — PARALLAX + SIGNATURE SECTION
       ----------------------------------------------------- */

    .parallax-section {
        height: 330px;
    }

    .hero-parallax {
        background-position: center;
    }

    .cocktails-parallax {
        background-position: center;
    }

    .promotion-dust {
        width: min(520px, 96vw);
    }

    .promotion-sparkles {
        width: min(560px, 98vw);
    }

    .promotion-flash::after {
        width: 150vw;
        height: 700px;
    }

    .signature-section {
        padding-left: 14px;
        padding-right: 14px;

        animation:
            promotionDropRevealMobile
            0.65s
            cubic-bezier(0.18, 0.75, 0.25, 1)
            6s
            forwards;
    }

    .skip-header-intro .signature-section {
        animation:
            promotionDropRevealMobile
            0.65s
            cubic-bezier(0.18, 0.75, 0.25, 1)
            3.1s
            forwards;
    }

    .signature-card {
        width: min(94vw, 520px);
        height: 620px;

        aspect-ratio: auto;
    }

    .signature-media {
        grid-template-columns: 15% 70% 15%;
    }

    .signature-content {
        width: 84%;

        padding: 28px 12px;
    }

    .signature-content h1 {
        margin-bottom: 14px;
        padding: 6px 10px 4px;

        font-size: 38px;
        line-height: 1.02;
    }

    .signature-intro {
        margin-bottom: 4px;
        font-size: 29px;
    }

    .signature-content h2 {
        margin-bottom: 12px;
        font-size: 36px;
        line-height: 1.05;
    }

    .signature-description {
        margin-bottom: 8px;
        padding: 5px 7px;

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

    .signature-price {
        margin-bottom: 14px;
        font-size: 20px;
    }

    .signature-availability {
        margin-bottom: 14px;
        font-size: 27px;
        line-height: 1.05;
    }

    .signature-cta {
        min-width: 220px;
        padding: 11px 24px 8px;
        font-size: 30px;
    }


    /* -----------------------------------------------------
       CONTACT
       ----------------------------------------------------- */

    .contact-parallax-top,
    .contact-parallax-bottom {
        background-position: center;
    }

    .booking-section {
        padding: 42px 12px;
    }

    .booking-card {
        width: 94vw;
        padding: 30px 18px;
    }

    .booking-card h1 {
        margin-bottom: 10px;
        font-size: 50px;
    }

    .booking-intro {
        margin-bottom: 28px;
        font-size: 15px;
        line-height: 1.45;
    }

    .booking-form {
        gap: 18px;
    }

    .form-field {
        gap: 7px;
    }

    .form-field label {
        font-size: 15px;
    }

    .form-field input,
    .form-field textarea {
        font-size: 16px;
    }

    .booking-row {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .booking-submit {
        font-size: 28px;
    }


    /* -----------------------------------------------------
       HIRING
       ----------------------------------------------------- */

    .hiring-page {
        padding: 40px 14px 70px;
    }

    .hiring-section {
        width: 100%;
    }

    .hiring-copy {
        position: relative;
        top: auto;
        left: auto;

        width: 100%;
        height: auto;

        margin: 0;
        padding: 28px 20px 30px;
    }

    .hiring-title {
        margin-bottom: 14px;
        font-size: 48px;
    }

    .hiring-intro {
        margin-bottom: 16px;
        font-size: 16px;
        line-height: 1.45;
    }

    .hiring-body {
        margin-bottom: 16px;
        font-size: 14.5px;
        line-height: 1.55;
    }

    .hiring-cv {
        margin-bottom: 16px;
        font-size: 15px;
        line-height: 1.45;
    }

    .hiring-email {
        max-width: 100%;
        font-size: clamp(16px, 4.4vw, 20px);
        overflow-wrap: anywhere;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .site-footer {
        min-height: 165px;
        padding: 30px 18px;
    }

    .footer-hiring-link {
        margin-bottom: 16px;
        font-size: 32px;
    }

    .site-footer p {
        font-size: 13px;
        line-height: 1.5;
    }
}


@keyframes promotionDropRevealMobile {
    0% {
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    100% {
        height: 700px;
        padding-top: 40px;
        padding-bottom: 40px;
    }
}