:root {
    --black: #070707;
    --black-2: #0e0d0c;
    --gold: #c9a44d;
    --gold-light: #f0d27b;
    --cream: #eee5d3;
    --muted: #a9a398;
    --line: rgba(201, 164, 77, .28);
    --white: #f8f5ef;

    --serif: "Cormorant Garamond", serif;
    --sans: "Inter", sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 80% 10%, rgba(201,164,77,.07), transparent 25%),
        radial-gradient(circle at 10% 60%, rgba(201,164,77,.04), transparent 25%),
        var(--black);

    color: var(--white);
    font-family: var(--sans);
    overflow-x: hidden;
}

body::before {
    content: "";

    position: fixed;

    inset: 0;

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

    background-size: 70px 70px;

    pointer-events: none;

    z-index: -5;
}

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

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

button,
input,
textarea,
select {
    font: inherit;
}


/* =========================================
   CURSOR
========================================= */

.cursor {
    position: fixed;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--gold-light);

    pointer-events: none;

    z-index: 9999;

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

.cursor-ring {
    position: fixed;

    width: 38px;
    height: 38px;

    border: 1px solid rgba(240,210,123,.6);

    border-radius: 50%;

    pointer-events: none;

    z-index: 9998;

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

    transition:
        width .25s ease,
        height .25s ease,
        border-color .25s ease;
}


/* =========================================
   PARTICLES
========================================= */

.particle {
    position: fixed;

    width: 2px;
    height: 2px;

    background: var(--gold-light);

    border-radius: 50%;

    opacity: .45;

    pointer-events: none;

    animation:
        floatParticle linear infinite;
}

@keyframes floatParticle {

    from {
        transform: translateY(110vh);
    }

    to {
        transform: translateY(-10vh);
    }
}


/* =========================================
   NAVBAR — SEMPRE VISIBILE
========================================= */

.navbar {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 92px;

    padding: 0 5vw;

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

    z-index: 5000;

    background: rgba(7, 7, 7, .88);

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

    border-bottom: 1px solid rgba(201,164,77,.25);

    transition:
        background .3s ease,
        box-shadow .3s ease;
}

/* Anche quando sei in cima rimane così */
.navbar.scrolled {
    background: rgba(7, 7, 7, .94);

    border-bottom-color: rgba(201,164,77,.35);

    box-shadow:
        0 10px 35px rgba(0,0,0,.25);
}


/* LOGO NAVBAR */

.brand {
    display: flex;
    align-items: center;

    flex-shrink: 0;
}

.brand img {
    width: 72px;
    height: 72px;

    object-fit: cover;

    border-radius: 50%;

    border: 1px solid rgba(201,164,77,.6);

    box-shadow:
        0 0 25px rgba(201,164,77,.08);

    image-rendering: auto;
}


/* DESKTOP NAV */

.desktop-nav {
    display: flex;

    gap: 34px;

    margin-left: auto;
    margin-right: 35px;
}

.desktop-nav a {
    position: relative;

    font-size: 11px;

    letter-spacing: .18em;

    color: #d5d0c7;

    transition:
        color .3s ease;
}

.desktop-nav a:hover {
    color: var(--gold-light);
}


/* BOTTONE PRENOTA */

.nav-button {
    padding: 13px 22px;

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

    font-size: 10px;

    letter-spacing: .2em;

    color: var(--gold-light);

    transition:
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}

.nav-button:hover {
    background: var(--gold);

    color: #080706;

    box-shadow:
        0 0 30px rgba(201,164,77,.22);
}

/* =========================================
   MOBILE MENU
========================================= */

.mobile-menu {
    position: fixed;

    inset: 0;

    background:
        radial-gradient(circle at center, rgba(201,164,77,.08), transparent 40%),
        #080807;

    z-index: 900;

    display: flex;

    flex-direction: column;

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

    gap: 24px;

    transform: translateY(-100%);

    transition:
        transform .7s cubic-bezier(.77,0,.18,1);
}

.mobile-menu.open {
    transform: translateY(0);
}

.mobile-menu img {
    width: 105px;
    height: 105px;

    object-fit: cover;

    border-radius: 50%;

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

    margin-bottom: 20px;
}

.mobile-menu a {
    font-family: var(--serif);

    font-size: 30px;

    color: var(--cream);
}

.mobile-book {
    border: 1px solid var(--gold);

    padding: 13px 22px;

    font-family: var(--sans) !important;

    font-size: 10px !important;

    letter-spacing: .2em;
}

/* =========================================================
   GERANI — NUOVA HOME
   MOBILE FIRST
========================================================= */

.hero-new {
    position: relative;

    min-height: 100svh;

    width: 100%;

    overflow: hidden;

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

    background: #070707;

    isolation: isolate;
}


/* =========================================================
   BACKGROUND
========================================================= */

.hero-bg {
    position: absolute;

    inset: -5%;

    z-index: -3;

    overflow: hidden;
}

.hero-bg img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform: scale(1.08);

    filter:
        saturate(.85)
        contrast(1.05);

    animation: heroImageIn 2s ease forwards;
}

@keyframes heroImageIn {

    from {
        opacity: 0;
        transform: scale(1.18);
    }

    to {
        opacity: 1;
        transform: scale(1.08);
    }

}


/* =========================================================
   DARK OVERLAY
========================================================= */

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            to bottom,
            rgba(5,5,5,.88) 0%,
            rgba(5,5,5,.48) 25%,
            rgba(5,5,5,.68) 55%,
            rgba(5,5,5,.94) 100%
        );

    pointer-events: none;
}


/* GOLD GLOW */

.hero-new::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: 50%;
    top: 45%;

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

    background:
        radial-gradient(
            circle,
            rgba(201,164,77,.14),
            transparent 68%
        );

    filter: blur(30px);

    pointer-events: none;

    z-index: -1;
}


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

.hero-new-content {

    width: 100%;

    min-height: 100svh;

    padding:
        105px 22px
        65px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    position: relative;

    z-index: 2;
}


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

.hero-new-logo {

    width: 108px;
    height: 108px;

    margin-bottom: 22px;

    border-radius: 50%;

    padding: 4px;

    background:
        linear-gradient(
            135deg,
            #7d5918,
            #f0d27b,
            #8b641b,
            #f5d675
        );

    box-shadow:
        0 15px 45px rgba(0,0,0,.6),
        0 0 40px rgba(201,164,77,.12);

    animation:
        heroLogoIn .9s cubic-bezier(.2,.7,.2,1) both;
}

.hero-new-logo img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;

    border: 2px solid #050505;
}

@keyframes heroLogoIn {

    from {
        opacity: 0;
        transform:
            translateY(-25px)
            scale(.85);
    }

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

}


/* =========================================================
   LOCATION
========================================================= */

.hero-location {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: var(--gold-light);

    font-size: 8px;

    font-weight: 500;

    letter-spacing: .32em;

    margin-bottom: 18px;

    animation:
        heroFadeUp .8s .15s ease both;
}

.hero-location span {

    width: 22px;

    height: 1px;

    background: var(--gold);
}


/* =========================================================
   RATING
========================================================= */

.hero-rating {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 25px;

    animation:
        heroFadeUp .8s .25s ease both;
}

.rating-main {

    display: flex;

    align-items: center;

    gap: 5px;
}

.rating-main strong {

    color: #fff;

    font-size: 15px;

    font-weight: 500;
}

.rating-main span {

    color: var(--gold-light);

    font-size: 13px;
}

.rating-info {

    color: #d0cbc1;

    font-size: 7px;

    letter-spacing: .16em;

    white-space: nowrap;
}

.rating-line {

    width: 1px;

    height: 18px;

    background:
        rgba(240,210,123,.35);
}


/* =========================================================
   MAIN TITLE
========================================================= */

.hero-new h1 {

    margin: 0;

    font-family: var(--serif);

    font-size: clamp(72px, 20vw, 145px);

    font-weight: 500;

    line-height: .78;

    letter-spacing: -.055em;

    color: #f8f5ef;

    text-shadow:
        0 10px 50px rgba(0,0,0,.55);

    animation:
        heroTitleIn 1s .3s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes heroTitleIn {

    from {
        opacity: 0;

        transform:
            translateY(30px)
            scale(.95);

        letter-spacing: .05em;
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        letter-spacing: -.055em;
    }

}


/* =========================================================
   SERVICES
========================================================= */

.hero-services {

    margin-top: 18px;

    max-width: 600px;

    color: var(--gold-light);

    font-size: 7px;

    font-weight: 500;

    letter-spacing: .25em;

    line-height: 2;

    animation:
        heroFadeUp .8s .45s ease both;
}

.hero-services span {

    color: var(--gold);

    margin: 0 4px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.hero-description {

    margin-top: 27px;

    max-width: 520px;

    animation:
        heroFadeUp .8s .55s ease both;
}

.hero-description p {

    margin: 0;

    font-family: var(--serif);

    font-size: 29px;

    line-height: 1.02;

    color: #f2ede4;
}

.hero-description p em {

    color: var(--gold-light);

    font-weight: 400;
}

.hero-description > span {

    display: block;

    margin-top: 14px;

    color: #d0cbc1;

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   BUTTONS
========================================================= */

.hero-actions {

    width: 100%;

    max-width: 420px;

    display: grid;

    grid-template-columns: 1fr;

    gap: 11px;

    margin-top: 30px;

    animation:
        heroFadeUp .8s .65s ease both;
}

.hero-btn {
    min-height: 60px;

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

    width: 100%;

    padding: 0 25px;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .2em;

    text-align: center;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.hero-btn span {
    display: none;
}

/* GOLD */

.hero-btn-gold {

    background: var(--gold);

    color: #090806;

    box-shadow:
        0 15px 45px rgba(0,0,0,.35);
}

.hero-btn-gold:hover {

    background: var(--gold-light);

    transform: translateY(-3px);

    box-shadow:
        0 20px 55px rgba(201,164,77,.25);
}


/* OUTLINE */

.hero-btn-outline {

    border: 1px solid rgba(240,210,123,.65);

    color: var(--gold-light);

    background:
        rgba(5,5,5,.25);

    backdrop-filter: blur(8px);
}

.hero-btn-outline:hover {

    background:
        rgba(201,164,77,.1);

    transform: translateY(-3px);

    border-color: var(--gold-light);
}


/* =========================================================
   SCROLL
========================================================= */

.hero-scroll {

    position: absolute;

    bottom: 18px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color: rgba(255,255,255,.5);

    font-size: 6px;

    letter-spacing: .3em;
}

.hero-scroll-line {

    width: 1px;

    height: 25px;

    background: var(--gold);

    animation:
        heroScroll 2s ease-in-out infinite;
}

@keyframes heroScroll {

    0%,
    100% {
        transform: scaleY(.3);
        transform-origin: top;
        opacity: .4;
    }

    50% {
        transform: scaleY(1);
        transform-origin: top;
        opacity: 1;
    }

}


/* =========================================================
   GENERAL ANIMATION
========================================================= */

@keyframes heroFadeUp {

    from {
        opacity: 0;

        transform:
            translateY(20px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 651px) {

    .hero-new-content {

        padding:
            120px 6vw
            70px;
    }

    .hero-new-logo {

        width: 130px;
        height: 130px;

        margin-bottom: 25px;
    }

    .hero-location {

        font-size: 9px;
    }

    .hero-rating {

        gap: 18px;
    }

    .rating-info {

        font-size: 8px;
    }

    .hero-services {

        font-size: 8px;
    }

    .hero-description p {

        font-size: 35px;
    }

    .hero-description > span {

        font-size: 13px;
    }

    .hero-actions {

        grid-template-columns: 1fr 1fr;

        max-width: 500px;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1001px) {

    .hero-new {

        min-height: 100vh;

        align-items: stretch;
    }

    .hero-bg img {

        object-position: center 45%;
    }

    .hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(5,5,5,.92),
                rgba(5,5,5,.55) 50%,
                rgba(5,5,5,.72)
            ),
            linear-gradient(
                to bottom,
                rgba(5,5,5,.4),
                rgba(5,5,5,.7)
            );
    }

    .hero-new-content {

        min-height: 100vh;

        width: 70%;

        max-width: 1000px;

        margin: auto;

        padding:
            140px 40px
            80px;
    }

    .hero-new-logo {

        width: 145px;
        height: 145px;
    }

    .hero-location {

        font-size: 10px;

        margin-bottom: 25px;
    }

    .hero-rating {

        margin-bottom: 35px;
    }

    .hero-new h1 {

        font-size: clamp(120px, 13vw, 200px);
    }

    .hero-services {

        font-size: 9px;

        margin-top: 25px;
    }

    .hero-description {

        margin-top: 40px;
    }

    .hero-description p {

        font-size: 42px;
    }

    .hero-description > span {

        font-size: 14px;
    }

    .hero-actions {

        margin-top: 38px;

        max-width: 500px;
    }

    .hero-btn {

        min-height: 62px;

        padding: 0 25px;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .hero-new-content {

        padding:
            95px 18px
            55px;
    }

    .hero-new-logo {

        width: 90px;
        height: 90px;

        margin-bottom: 17px;
    }

    .hero-location {

        font-size: 7px;

        letter-spacing: .22em;
    }

    .hero-rating {

        gap: 8px;
    }

    .rating-info {

        font-size: 6px;

        letter-spacing: .1em;
    }

    .hero-new h1 {

        font-size: 68px;
    }

    .hero-services {

        font-size: 6px;

        letter-spacing: .16em;
    }

    .hero-description p {

        font-size: 26px;
    }

    .hero-description > span {

        font-size: 10px;
    }

    .hero-btn {

        min-height: 54px;

        font-size: 9px;
    }

}



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

.intro,
.menu-section,
.services,
.booking {
    position: relative;

    padding: 150px 8vw;
}

.section-number {
    position: absolute;

    left: 4vw;
    top: 150px;

    font-family: var(--serif);

    font-size: 13px;

    color: var(--gold);

    opacity: .6;
}

.section-label {
    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 9px;

    letter-spacing: .32em;

    color: var(--gold-light);
}

.section-label i {
    width: 25px;
    height: 1px;

    background: var(--gold);
}

.intro {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    border-top: 1px solid var(--line);
}

.intro h2,
.menu-heading h2,
.services-title h2,
.booking h2,
.contact h2,
.food-copy h2 {
    margin-top: 30px;

    font-family: var(--serif);

    font-size: clamp(60px, 7vw, 105px);

    line-height: .85;

    font-weight: 500;

    letter-spacing: -.04em;
}

.intro-left h2 {
    line-height: 1.05;
}

.intro-left h2 em {
    display: inline-block;
    margin-top: 18px;
}

.intro h2 em,
.menu-heading h2 em,
.services-title h2 em,
.booking h2 em,
.contact h2 em,
.food-copy h2 em {
    color: var(--gold-light);

    font-weight: 400;
}

.intro-right {
    padding-top: 60px;

    max-width: 600px;
}

.big-text {
    font-family: var(--serif);

    font-size: 31px !important;

    line-height: 1.15 !important;

    color: var(--cream) !important;
}

.intro-right p {
    font-size: 15px;

    line-height: 1.9;

    color: var(--muted);

    margin-bottom: 25px;
}

.text-link {
    display: inline-flex;

    gap: 25px;

    margin-top: 20px;

    color: var(--gold-light);

    font-size: 9px;

    letter-spacing: .2em;
}

.text-link span {
    transition: transform .3s;
}

.text-link:hover span {
    transform: translateX(8px);
}


/* =========================================
   MARQUEE
========================================= */

.marquee {
    overflow: hidden;

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);

    padding: 22px 0;

    background: rgba(201,164,77,.025);
}

.marquee-track {
    display: flex;

    align-items: center;

    gap: 35px;

    width: max-content;

    animation:
        marquee 25s linear infinite;
}

.marquee span {
    font-family: var(--serif);

    font-size: 34px;

    color: var(--cream);

    white-space: nowrap;
}

.marquee i {
    color: var(--gold);

    font-style: normal;

    font-size: 15px;
}

@keyframes marquee {

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


/* =========================================
   FOOD
========================================= */

.food-showcase {
    display: grid;

    grid-template-columns: 1.2fr .8fr;

    gap: 9vw;

    align-items: center;

    padding: 160px 7vw;
}

.food-image {
    position: relative;

    transform-style: preserve-3d;
}

.food-image img {
    width: 100%;

    min-height: 580px;

    object-fit: cover;

    filter: saturate(.9) contrast(1.05);

    border-radius: 2px;

    box-shadow:
        30px 35px 80px rgba(0,0,0,.5);
}

.image-frame {
    position: absolute;

    inset: 20px;

    border: 1px solid rgba(240,210,123,.45);

    transform:
        translateZ(30px);

    pointer-events: none;
}

.food-copy p {
    margin-top: 35px;

    max-width: 500px;

    color: var(--muted);

    line-height: 1.9;

    font-size: 15px;
}

.food-stats {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1px;

    margin-top: 50px;

    border: 1px solid var(--line);
}

.food-stats div {
    padding: 25px;

    background: rgba(255,255,255,.015);

    border: 1px solid rgba(201,164,77,.08);
}

.food-stats strong {
    display: block;

    font-family: var(--serif);

    font-size: 30px;

    color: var(--gold);
}

.food-stats span {
    font-size: 9px;

    letter-spacing: .2em;

    color: #999;
}


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

.menu-section {
    border-top: 1px solid var(--line);

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(201,164,77,.055),
            transparent 40%
        );
}

.menu-heading {
    max-width: 900px;

    margin: auto;

    text-align: center;
}

.menu-heading .section-label {
    justify-content: center;
}

.menu-heading p {
    max-width: 550px;

    margin: 30px auto;

    color: var(--muted);

    line-height: 1.8;
}

.menu-tabs {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    margin: 65px auto 50px;
}

.menu-tab {
    background: transparent;

    border: 1px solid rgba(201,164,77,.22);

    color: #aaa;

    padding: 13px 20px;

    cursor: pointer;

    font-size: 9px;

    letter-spacing: .17em;

    text-transform: uppercase;

    transition: .3s;
}

.menu-tab:hover,
.menu-tab.active {
    background: var(--gold);

    border-color: var(--gold);

    color: #080706;
}

.menu-grid {
    max-width: 1150px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0 70px;

    border-top: 1px solid var(--line);
}

.menu-item {
    position: relative;

    padding: 25px 0;

    border-bottom: 1px solid rgba(201,164,77,.15);

    display: flex;

    justify-content: space-between;

    gap: 20px;

    animation:
        menuIn .45s ease both;
}

@keyframes menuIn {

    from {
        opacity: 0;

        transform: translateY(15px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}

.menu-item h3 {
    font-family: var(--serif);

    font-size: 25px;

    font-weight: 500;

    color: var(--cream);
}

.menu-item p {
    margin-top: 4px;

    color: #777;

    font-size: 10px;

    line-height: 1.5;
}

.menu-price {
    color: var(--gold-light);

    font-family: var(--serif);

    font-size: 23px;

    white-space: nowrap;
}

.menu-note {
    max-width: 1150px;

    margin: 35px auto 0;

    color: #666;

    font-size: 10px;
}


/* =========================================
   EXPERIENCE
========================================= */

.experience {
    min-height: 75vh;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    overflow: hidden;

    border-top: 1px solid var(--line);
}

.experience-bg {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            rgba(7,7,7,.68),
            rgba(7,7,7,.86)
        ),
        url("images/PIATTI GERANI 1.jpeg")
        center / cover;

    filter: blur(2px);

    transform: scale(1.05);
}

.experience-content {
    position: relative;

    z-index: 2;

    max-width: 900px;
}

.experience-content .section-label {
    justify-content: center;
}

.experience h2 {
    margin: 25px 0;

    font-family: var(--serif);

    font-size: clamp(70px, 9vw, 130px);

    line-height: .8;

    font-weight: 500;
}

.experience h2 em {
    color: var(--gold-light);

    font-weight: 400;
}

.experience p {
    color: #c0bbb1;

    font-family: var(--serif);

    font-size: 25px;

    margin-bottom: 35px;
}


/* =========================================
   GALLERY
========================================= */

.gallery-section {
    padding: 150px 5vw;

    border-bottom: 1px solid var(--line);
}

.gallery-heading {
    text-align: center;

    margin-bottom: 70px;
}

.gallery-heading .section-label {
    justify-content: center;
}

.gallery-heading h2 {
    margin-top: 25px;

    font-family: var(--serif);

    font-size: clamp(65px, 8vw, 110px);

    line-height: .8;

    font-weight: 500;
}

.gallery-heading h2 em {
    color: var(--gold-light);

    font-weight: 400;
}

.gallery-grid {
    display: grid;

    grid-template-columns: 1.3fr .7fr .7fr;

    grid-auto-rows: 300px;

    gap: 12px;

    max-width: 1400px;

    margin: auto;
}

.gallery-item {
    position: relative;

    overflow: hidden;
}

.gallery-item.large {
    grid-row: span 2;
}

.gallery-item.wide {
    grid-column: span 2;
}

.gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1s cubic-bezier(.2,.7,.2,1),
        filter .5s;
}

.gallery-item:hover img {
    transform: scale(1.08);

    filter: brightness(.7);
}

.gallery-overlay {
    position: absolute;

    inset: auto 20px 20px;

    opacity: 0;

    transform: translateY(10px);

    transition: .4s;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;

    transform: translateY(0);
}

.gallery-overlay span {
    color: white;

    font-size: 9px;

    letter-spacing: .25em;
}


/* =========================================
   SERVICES
========================================= */

.services {
    border-top: 1px solid var(--line);
}

.services-title {
    text-align: center;

    margin-bottom: 80px;
}

.services-title .section-label {
    justify-content: center;
}

.services-grid {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 20px;

    max-width: 1250px;

    margin: auto;
}

.service-card {
    min-height: 400px;

    padding: 40px;

    position: relative;

    border: 1px solid rgba(201,164,77,.2);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.005)
        );

    transform-style: preserve-3d;

    transition:
        border-color .4s,
        background .4s;
}

.service-card:hover {
    border-color: rgba(240,210,123,.6);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(201,164,77,.12),
            transparent 55%
        );
}

.service-icon {
    font-size: 38px;

    color: var(--gold-light);

    transform: translateZ(30px);
}

.service-card > span {
    position: absolute;

    right: 30px;
    top: 30px;

    color: var(--gold);

    font-family: var(--serif);

    font-size: 22px;
}

.service-card h3 {
    margin-top: 80px;

    font-family: var(--serif);

    font-size: 45px;

    font-weight: 500;

    transform: translateZ(25px);
}

.service-card p {
    margin-top: 20px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.8;
}

.service-card a {
    position: absolute;

    bottom: 35px;

    font-size: 9px;

    letter-spacing: .2em;

    color: var(--gold-light);
}


/* =========================================
   QUOTE
========================================= */

.quote {
    padding: 190px 8vw;

    text-align: center;

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);

    position: relative;
}

.quote-mark {
    font-family: var(--serif);

    color: var(--gold);

    font-size: 150px;

    line-height: .3;
}

.quote blockquote {
    max-width: 1000px;

    margin: 50px auto 35px;

    font-family: var(--serif);

    font-size: clamp(60px, 8vw, 110px);

    line-height: .8;

    font-weight: 400;
}

.quote blockquote em {
    color: var(--gold-light);
}

.quote > span {
    color: #777;

    font-size: 9px;

    letter-spacing: .3em;
}


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

.booking {
    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 10vw;

    border-bottom: 1px solid var(--line);
}

.booking-info {
    padding-top: 30px;
}

.booking-info > p {
    max-width: 400px;

    margin-top: 35px;

    color: var(--muted);

    line-height: 1.8;
}

.contact-details {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

    margin-top: 55px;
}

.contact-details span {
    display: block;

    color: var(--gold);

    font-size: 8px;

    letter-spacing: .2em;

    margin-bottom: 10px;
}

.contact-details strong {
    font-family: var(--serif);

    font-size: 20px;

    font-weight: 400;

    line-height: 1.2;
}

.booking-form {
    border: 1px solid var(--line);

    padding: 45px;

    background: rgba(255,255,255,.012);
}

.input-group {
    margin-bottom: 25px;
}

.input-group label {
    display: block;

    margin-bottom: 10px;

    color: var(--gold-light);

    font-size: 8px;

    letter-spacing: .2em;

    text-transform: uppercase;
}

.input-group input,
.input-group textarea,
.input-group select {
    width: 100%;

    background: rgba(255,255,255,.025);

    border: 1px solid rgba(201,164,77,.2);

    color: var(--white);

    padding: 16px;

    outline: none;

    transition: border .3s;
}

.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus {
    border-color: var(--gold);
}

.input-group textarea {
    height: 120px;

    resize: vertical;
}

.input-group select option {
    background: #111;
}

.input-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;
}

.submit-button {
    width: 100%;

    border: none;

    padding: 18px;

    background: var(--gold);

    color: #080706;

    cursor: pointer;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .2em;

    display: flex;

    justify-content: space-between;

    transition: .3s;
}

.submit-button:hover {
    background: var(--gold-light);

    box-shadow:
        0 15px 40px rgba(201,164,77,.15);
}

.booking-form small {
    display: block;

    margin-top: 15px;

    color: #666;

    font-size: 9px;

    line-height: 1.5;
}


/* =========================================
   CONTACT
========================================= */

.contact {
    min-height: 80vh;

    padding: 130px 8vw;

    display: grid;

    grid-template-columns: .8fr 1.2fr;

    align-items: center;

    gap: 10vw;
}

.contact-logo {
    display: flex;

    justify-content: center;
}

.contact-logo img {
    width: min(35vw, 430px);

    aspect-ratio: 1;

    object-fit: cover;

    border-radius: 50%;

    border: 8px solid transparent;

    background:
        linear-gradient(var(--black),var(--black)) padding-box,
        linear-gradient(
            135deg,
            #806019,
            #f1d576,
            #8b641b
        ) border-box;

    box-shadow:
        0 50px 100px rgba(0,0,0,.55),
        0 0 80px rgba(201,164,77,.08);
}

.contact-copy p {
    margin-top: 25px;

    font-family: var(--serif);

    color: var(--gold-light);

    font-size: 28px;
}

.contact-buttons {
    display: flex;

    gap: 12px;

    margin-top: 40px;
}


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

footer {
    background: #050504;

    border-top: 1px solid var(--line);

    padding: 80px 7vw 25px;
}

.footer-main {
    display: flex;

    justify-content: space-between;

    gap: 80px;

    padding-bottom: 80px;
}

.footer-brand img {
    width: 120px;
    height: 120px;

    object-fit: cover;

    border-radius: 50%;

    border: 1px solid var(--gold);
}

.footer-brand p {
    margin-top: 20px;

    font-family: var(--serif);

    font-size: 23px;

    color: #aaa;
}

.footer-brand p em {
    color: var(--gold-light);
}

.footer-links {
    display: flex;

    gap: 100px;
}

.footer-links div {
    display: flex;

    flex-direction: column;

    gap: 13px;
}

.footer-links span {
    color: var(--gold);

    font-size: 8px;

    letter-spacing: .25em;

    margin-bottom: 10px;
}

.footer-links a {
    color: #888;

    font-size: 11px;

    transition: color .3s;
}

.footer-links a:hover {
    color: var(--gold-light);
}

.footer-bottom {
    border-top: 1px solid rgba(201,164,77,.12);

    padding-top: 25px;

    display: flex;

    justify-content: space-between;

    color: #555;

    font-size: 8px;

    letter-spacing: .2em;
}


/* =========================================
   BACK TOP
========================================= */

.back-top {
    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 45px;
    height: 45px;

    border-radius: 50%;

    background: var(--gold);

    color: #070707;

    border: none;

    cursor: pointer;

    z-index: 500;

    opacity: 0;

    transform: translateY(20px);

    transition: .3s;
}

.back-top.show {
    opacity: 1;

    transform: translateY(0);
}


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

.reveal {
    opacity: 0;

    transform: translateY(50px);

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.2,.7,.2,1);
}

.reveal.visible {
    opacity: 1;

    transform: translateY(0);
}


/*
   IMPORTANTE:
   Il logo 3D non deve usare il transform
   generico di .reveal.
*/

.hero-logo-3d.reveal {
    transform:
        translateY(-50%)
        perspective(1000px)
        rotateY(-8deg);
}

.hero-logo-3d.reveal.visible {
    opacity: 1;

    transform:
        translateY(-50%)
        perspective(1000px)
        rotateY(-8deg);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    .desktop-nav,
    .nav-button {
        display: none;
    }

    .menu-toggle {
        display: flex;

        flex-direction: column;

        gap: 7px;

        background: transparent;

        border: none;

        cursor: pointer;

        z-index: 1100;
    }

    .menu-toggle span {
        width: 32px;
        height: 1px;

        background: var(--gold-light);

        transition: .3s;
    }

    .hero {
        min-height: auto;

        padding-top: 160px;

        flex-direction: column;

        align-items: flex-start;
    }

    .hero-content {
        width: 100%;
    }

    .hero h1 {
        font-size: clamp(90px, 23vw, 180px);
    }

    /*
       MOBILE FIX:
       qui il logo deve rimanere
       nella posizione naturale.
    */

    .hero-logo-3d {
        position: relative;

        right: auto;
        top: auto;

        width: min(70vw, 430px);

        margin: 80px auto 40px;

        transform: none !important;

        transform-origin: center center;
    }

    .hero-logo-3d.reveal,
    .hero-logo-3d.reveal.visible {
        transform: none !important;
    }

    .intro,
    .food-showcase,
    .booking,
    .contact {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .food-image img {
        min-height: 450px;
    }

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

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

        grid-auto-rows: 280px;
    }

    .gallery-item.large {
        grid-row: span 1;
    }

    .gallery-item.wide {
        grid-column: span 2;
    }
}


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

@media (max-width: 650px) {

    .navbar {
        height: 75px;

        padding: 0 20px;
    }

    .brand img {
        width: 58px;
        height: 58px;
    }

    .hero {
        padding:
            130px 25px 70px;
    }

    .hero h1 {
        font-size: 82px;

        line-height: .7;
    }

    .hero h1 strong {
        margin-left: 35px;
    }

    .hero-subtitle {
        margin-left: 35px;

        font-size: 8px;
    }

    .hero p {
        margin-left: 35px;

        font-size: 23px;
    }

    .hero-buttons {
        margin-left: 35px;

        flex-direction: column;

        align-items: flex-start;
    }

    .intro,
    .menu-section,
    .services,
    .booking,
    .gallery-section,
    .contact {
        padding:
            100px 25px;
    }

    .section-number {
        display: none;
    }

    .intro h2,
    .menu-heading h2,
    .services-title h2,
    .booking h2,
    .contact h2,
    .food-copy h2 {
        font-size: 65px;
    }

    .food-showcase {
        padding: 100px 25px;
    }

    .food-image img {
        min-height: 300px;
    }

    .image-frame {
        inset: 10px;
    }

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

        gap: 0;
    }

    .menu-tabs {
        justify-content: flex-start;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 10px;
    }

    .menu-tab {
        white-space: nowrap;
    }

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

        grid-auto-rows: 300px;
    }

    .gallery-item.wide {
        grid-column: span 1;
    }

    .gallery-heading h2 {
        font-size: 70px;
    }

    .booking-form {
        padding: 25px;
    }

    .input-row {
        grid-template-columns: 1fr;
    }

    .contact-logo img {
        width: 75vw;
    }

    .footer-main {
        flex-direction: column;
    }

    .footer-links {
        gap: 50px;
    }

    .footer-bottom {
        flex-direction: column;

        gap: 10px;
    }

    .cursor,
    .cursor-ring {
        display: none;
    }
}

/* =========================================
   RATING
========================================= */

.intro-rating {
    display: flex;
    align-items: center;
    gap: 22px;

    margin-top: 45px;

    padding-top: 25px;

    border-top: 1px solid var(--line);
}

.intro-rating strong {
    font-family: var(--serif);

    font-size: 58px;

    font-weight: 500;

    color: var(--gold-light);

    line-height: 1;
}

.intro-rating .stars {
    color: var(--gold-light);

    font-size: 15px;

    letter-spacing: 4px;

    margin-bottom: 7px;
}

.intro-rating span {
    color: #777;

    font-size: 8px;

    letter-spacing: .22em;
}

.hero-meta {
    display: flex;
    gap: 22px;
    margin-top: 25px;
    margin-left: 13vw;
    flex-wrap: wrap;
}

.hero-meta span {
    color: #aaa;
    font-size: 8px;
    letter-spacing: .2em;
    padding-right: 22px;
    border-right: 1px solid rgba(201,164,77,.25);
}

.hero-meta span:first-child {
    color: var(--gold-light);
}

.hero-meta span:last-child {
    border-right: none;
}


@media (max-width: 650px) {

    .hero-meta {
        margin-left: 35px;
        gap: 12px;
    }

    .hero-meta span {
        padding-right: 12px;
        font-size: 7px;
    }

    .intro-rating {
        margin-top: 35px;
    }
}

/* =========================================
   TESTI PICCOLI — PIÙ LEGGIBILI
========================================= */

.eyebrow {
    font-size: 11px;
}

.hero-subtitle {
    font-size: 11px;
}

.hero-meta span {
    font-size: 10px;
}

.desktop-nav a {
    font-size: 12px;
}

.nav-button {
    font-size: 11px;
}

.gold-button,
.outline-button {
    font-size: 11px;
}

.section-label {
    font-size: 10px;
}

.intro-right p {
    font-size: 16px;
}

.text-link {
    font-size: 10px;
}

.food-stats span {
    font-size: 10px;
}

.menu-tab {
    font-size: 10px;
}

.menu-item p {
    font-size: 11px;
}

.menu-note {
    font-size: 11px;
}

.gallery-overlay span {
    font-size: 10px;
}

.service-card p {
    font-size: 14px;
}

.service-card a {
    font-size: 10px;
}

.contact-details span {
    font-size: 9px;
}

.input-group label {
    font-size: 9px;
}

.submit-button {
    font-size: 11px;
}

.booking-form small {
    font-size: 10px;
}

.footer-links span {
    font-size: 9px;
}

.footer-links a {
    font-size: 12px;
}

.footer-bottom {
    font-size: 9px;
}

.brand img {
    width: 68px;
    height: 68px;

    object-fit: cover;
    object-position: center;

    border-radius: 50%;

    display: block;

    transform: translateZ(0);
    backface-visibility: hidden;

    border: 1px solid rgba(201,164,77,.6);

    box-shadow:
        0 0 25px rgba(201,164,77,.08);
}

/* CALENDARIO DATA BIANCO */

.input-group input[type="date"] {
    color-scheme: dark;
    color: var(--white);
}

.input-group input[type="date"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(1);
    opacity: 1;
    cursor: pointer;
}

/* =========================================
   HERO BUTTONS — BIG & PREMIUM
========================================= */

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 38px;
}

/* BOTTONE ORO */

.hero-buttons .gold-button {
    min-width: 210px;
    min-height: 60px;

    padding: 0 26px;

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

    background: var(--gold);
    color: #080706;

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

    font-size: 12px;
    font-weight: 600;

    letter-spacing: .16em;

    box-shadow:
        0 10px 35px rgba(201,164,77,.12);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.hero-buttons .gold-button b {
    font-size: 22px;
    font-weight: 400;

    margin-left: 25px;

    transition:
        transform .35s ease;
}

.hero-buttons .gold-button:hover {
    transform: translateY(-5px);

    background: var(--gold-light);

    box-shadow:
        0 18px 50px rgba(201,164,77,.25);
}

.hero-buttons .gold-button:hover b {
    transform: translate(5px, -5px);
}


/* BOTTONE CHIAMACI */

.hero-buttons .outline-button {
    min-width: 170px;
    min-height: 60px;

    padding: 0 28px;

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

    background: rgba(7,7,7,.25);

    border: 1px solid rgba(240,210,123,.65);

    color: var(--gold-light);

    font-size: 12px;
    font-weight: 500;

    letter-spacing: .16em;

    backdrop-filter: blur(8px);

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

.hero-buttons .outline-button:hover {
    transform: translateY(-5px);

    background: rgba(201,164,77,.12);

    border-color: var(--gold-light);

    box-shadow:
        0 15px 40px rgba(201,164,77,.15);
}


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

@media (max-width: 650px) {

    .hero-buttons {
        width: 100%;

        gap: 12px;

        margin-top: 30px;
    }

    .hero-buttons .gold-button,
    .hero-buttons .outline-button {

        min-width: 0;

        width: 100%;

        min-height: 58px;

        font-size: 11px;
    }

    .hero-buttons .gold-button {
        max-width: 250px;
    }

    .hero-buttons .outline-button {
        max-width: 200px;
    }
}

/* =========================================
   SERVICE ICONS — MINIMAL LUXURY
========================================= */

.service-icon {
    width: 52px;
    height: 52px;

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

    color: var(--gold-light);
}


/* BAR */

.icon-line {
    width: 30px;
    height: 30px;

    border: 1px solid var(--gold-light);

    border-radius: 50%;

    position: relative;
}

.icon-line::before {
    content: "";

    position: absolute;

    width: 14px;
    height: 1px;

    background: var(--gold-light);

    left: 7px;
    top: 14px;

    transform: rotate(90deg);
}

.icon-line::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    border: 1px solid var(--gold-light);

    border-radius: 50%;

    left: 10px;
    top: 5px;
}


/* ROSTICCERIA */

.icon-circle {
    width: 30px;
    height: 30px;

    border: 1px solid var(--gold-light);

    border-radius: 50%;

    position: relative;
}

.icon-circle::before,
.icon-circle::after {
    content: "";

    position: absolute;

    background: var(--gold-light);

    left: 50%;
    top: 50%;

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

.icon-circle::before {
    width: 16px;
    height: 1px;
}

.icon-circle::after {
    width: 1px;
    height: 16px;
}


/* TABACCHI */

.icon-square {
    width: 28px;
    height: 28px;

    border: 1px solid var(--gold-light);

    position: relative;
}

.icon-square::before {
    content: "";

    position: absolute;

    inset: 6px;

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

    transform: rotate(45deg);
}

/* =========================================
   CONTACT BUTTONS — LUXURY
========================================= */

.contact-buttons {
    display: flex;
    gap: 14px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.contact-buttons .gold-button,
.contact-buttons .outline-button {
    min-height: 58px;
    padding: 0 28px;

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

    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;

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


/* APRI MAPPA */

.contact-buttons .gold-button {
    min-width: 190px;

    background: var(--gold);
    color: #080706;

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

    box-shadow:
        0 12px 35px rgba(201,164,77,.12);
}

.contact-buttons .gold-button:hover {
    transform: translateY(-5px);

    background: var(--gold-light);

    box-shadow:
        0 18px 45px rgba(201,164,77,.25);
}


/* CHIAMA */

.contact-buttons .outline-button {
    min-width: 145px;

    background: rgba(255,255,255,.025);

    color: var(--gold-light);

    border: 1px solid rgba(240,210,123,.55);

    backdrop-filter: blur(8px);
}

.contact-buttons .outline-button:hover {
    transform: translateY(-5px);

    background: rgba(201,164,77,.10);

    border-color: var(--gold-light);

    box-shadow:
        0 15px 40px rgba(201,164,77,.14);
}


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

@media (max-width: 650px) {

    .contact-buttons {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }

    .contact-buttons .gold-button,
    .contact-buttons .outline-button {
        width: 100%;
        max-width: 280px;
        min-height: 58px;
    }
}

/* =========================================
   BOOKING — CALL ONLY
========================================= */

.booking-call {
    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 10vw;

    align-items: center;
}

.booking-call .booking-info {
    padding-top: 0;
}

.booking-call .booking-info > p {
    max-width: 520px;

    margin-top: 30px;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.8;
}


/* TELEFONO */

.booking-phone {
    margin-top: 40px;

    padding: 25px 0;

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.booking-phone span {
    display: block;

    margin-bottom: 10px;

    color: var(--gold);

    font-size: 9px;

    letter-spacing: .25em;
}

.booking-phone a {
    font-family: var(--serif);

    font-size: clamp(32px, 4vw, 52px);

    color: var(--cream);

    transition: color .3s ease;
}

.booking-phone a:hover {
    color: var(--gold-light);
}


/* BOTTONE */

.booking-call-button {
    margin-top: 30px;

    min-height: 60px;

    padding: 0 30px;

    font-size: 11px;

    letter-spacing: .17em;
}


/* DETTAGLI */

.booking-details {
    display: grid;

    grid-template-columns: 1fr 1fr;

    border: 1px solid var(--line);
}

.booking-detail {
    min-height: 170px;

    padding: 30px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    border: 1px solid rgba(201,164,77,.1);

    background: rgba(255,255,255,.015);
}

.booking-detail span {
    color: var(--gold);

    font-size: 8px;

    letter-spacing: .25em;

    margin-bottom: 12px;
}

.booking-detail strong {
    font-family: var(--serif);

    font-size: 21px;

    font-weight: 400;

    line-height: 1.25;

    color: var(--cream);
}


/* MOBILE */

@media (max-width: 1000px) {

    .booking-call {
        grid-template-columns: 1fr;

        gap: 60px;
    }

}

@media (max-width: 650px) {

    .booking-phone a {
        font-size: 34px;
    }

    .booking-details {
        grid-template-columns: 1fr;
    }

    .booking-detail {
        min-height: 130px;
    }

    .booking-call-button {
        width: 100%;
        max-width: 300px;
    }

}

/* =========================================
   CONTACT MAP
========================================= */

.contact-map {
    position: relative;

    width: 100%;
    max-width: 600px;

    height: 480px;

    overflow: hidden;

    border: 1px solid rgba(201,164,77,.35);

    background: #111;

    box-shadow:
        0 35px 80px rgba(0,0,0,.55);
}

.contact-map::after {
    content: "";

    position: absolute;

    inset: 14px;

    border: 1px solid rgba(240,210,123,.35);

    pointer-events: none;

    z-index: 2;
}

.contact-map iframe {
    width: 100%;
    height: 100%;

    border: 0;

    filter:
        grayscale(.9)
        contrast(1.1)
        brightness(.7);

    transition:
        filter .5s ease,
        transform .5s ease;
}

.contact-map:hover iframe {
    filter:
        grayscale(.5)
        contrast(1.05)
        brightness(.8);

    transform: scale(1.02);
}

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

.footer-social {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-social span {
    color: var(--gold);

    font-size: 9px;

    letter-spacing: .25em;

    margin-bottom: 8px;
}

.footer-social a {
    position: relative;

    width: fit-content;

    color: #888;

    font-size: 12px;

    letter-spacing: .12em;

    transition:
        color .3s ease,
        transform .3s ease;
}

.footer-social a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 0;
    height: 1px;

    background: var(--gold-light);

    transition: width .3s ease;
}

.footer-social a:hover {
    color: var(--gold-light);

    transform: translateX(5px);
}

.footer-social a:hover::after {
    width: 100%;
}


/* MOBILE */

@media (max-width: 650px) {

    .footer-social {
        margin-top: 20px;
    }

}

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

.footer-social {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer-social > span {
    color: var(--gold);
    font-size: 9px;
    letter-spacing: .25em;
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 14px;
}

.social-icons a {
    width: 48px;
    height: 48px;

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

    border: 1px solid rgba(201,164,77,.3);

    background: rgba(255,255,255,.02);

    color: var(--gold-light);

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

.social-icons svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;

    transition: transform .35s ease;
}

.social-icons svg path {
    fill: currentColor;
    stroke: none;
}

.social-icons svg .dot {
    fill: currentColor;
    stroke: none;
}

.social-icons a:hover {
    transform: translateY(-5px);

    background: rgba(201,164,77,.1);

    border-color: var(--gold-light);

    box-shadow:
        0 10px 30px rgba(201,164,77,.15);
}

.social-icons a:hover svg {
    transform: scale(1.1);
}


/* MOBILE */

@media (max-width: 650px) {

    .social-icons a {
        width: 45px;
        height: 45px;
    }

}

/* =========================================
   MOBILE MENU — SOCIAL
========================================= */

.mobile-social {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    margin-top: 8px;
}

.mobile-social a {
    width: 48px;
    height: 48px;

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

    border: 1px solid rgba(201,164,77,.35);

    color: var(--gold-light);

    background: rgba(255,255,255,.02);

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}

.mobile-social svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;
}

.mobile-social svg path {
    fill: currentColor;
    stroke: none;
}

.mobile-social svg .dot {
    fill: currentColor;
    stroke: none;
}

.mobile-social a:active {
    transform: scale(.92);

    background: rgba(201,164,77,.12);

    border-color: var(--gold-light);
}

.navbar {
    overflow: hidden;
}

.nav-button {
    position: relative;
    z-index: 2;
    background: transparent;
}

/* elimina eventuali artefatti bianchi vicino alla navbar */
.navbar::before,
.navbar::after {
    display: none !important;
}

/* =========================================
   CONTACT MAP
========================================= */

.contact-map {
    width: 100%;
    min-height: 480px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(201,164,77,.28);
    background: #111;
}

.map-placeholder {
    width: 100%;
    height: 100%;
    min-height: 480px;

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

    position: relative;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(201,164,77,.13),
            transparent 45%
        ),
        linear-gradient(
            rgba(7,7,7,.88),
            rgba(7,7,7,.96)
        );

    overflow: hidden;
}

/* Griglia stile mappa */

.map-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(201,164,77,.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(201,164,77,.07) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    transform: perspective(600px) rotateX(8deg) scale(1.1);

    opacity: .7;
}

/* Cerchi decorativi */

.map-placeholder::after {
    content: "";
    position: absolute;

    width: 280px;
    height: 280px;

    border: 1px solid rgba(201,164,77,.18);
    border-radius: 50%;

    box-shadow:
        0 0 0 45px rgba(201,164,77,.025),
        0 0 0 90px rgba(201,164,77,.018);
}

/* Contenuto */

.map-content {
    position: relative;
    z-index: 3;

    text-align: center;

    padding: 40px;
}

.map-label {
    display: block;

    margin-bottom: 20px;

    color: var(--gold-light);

    font-size: 9px;

    letter-spacing: .3em;
}

.map-content h3 {
    font-family: var(--serif);

    font-size: clamp(38px, 4vw, 60px);

    font-weight: 400;

    line-height: .95;

    color: var(--white);
}

.map-content h3 em {
    color: var(--gold-light);
    font-style: normal;
}

.map-content p {
    margin-top: 15px;

    color: #aaa;

    font-size: 12px;

    letter-spacing: .12em;
}

.map-button {
    display: inline-flex;

    margin-top: 30px;

    padding: 15px 24px;

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

    color: var(--gold-light);

    font-size: 9px;

    letter-spacing: .2em;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.map-button:hover {
    background: var(--gold);

    color: #080706;

    transform: translateY(-3px);

    box-shadow:
        0 12px 35px rgba(201,164,77,.2);
}


/* MOBILE */

@media (max-width: 650px) {

    .contact-map {
        min-height: 390px;
    }

    .map-placeholder {
        min-height: 390px;
    }

    .map-content {
        padding: 25px;
    }

    .map-content h3 {
        font-size: 43px;
    }

    .map-button {
        padding: 15px 18px;
        font-size: 8px;
    }
}