/* ============================================================
   RUZZI DELLA CONCA – CONTRADE DI CHIUSI SCALO
   Shared Stylesheet · v2.0 · 2025
   Domain: ruzzidellaconca.it
============================================================ */

/* ==================
   1. CUSTOM PROPERTIES
================== */
:root {
   --red: #C41E3A;
   --red-dark: #8B0000;
   --red-light: #F8D7DA;
   --gold:#8DA4FF;
   --gold-light: #F5E6C8;
   --white: #FFFFFF;
   --off-white: #FAF9F6;
   --black: #1A1A1A;
   --gray: #4A4A4A;
   --gray-mid: #888888;
   --gray-light: #EDEBE6;

   --font-display: 'Cinzel', serif;
   --font-body: 'Lato', sans-serif;
   --font-serif: 'Cormorant Garamond', serif;

   --nav-h: 80px;
   --max-w: 1200px;
   --pad-xl: 100px 24px;
   --pad-lg: 80px 24px;
   --pad-md: 60px 20px;

   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-io: cubic-bezier(0.4, 0, 0.2, 1);

   --s-xs: 0 1px 4px rgba(0, 0, 0, 0.06);
   --s-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
   --s-md: 0 8px 24px rgba(0, 0, 0, 0.12);
   --s-lg: 0 20px 60px rgba(0, 0, 0, 0.18);
   --s-red: 0 8px 30px rgba(196, 30, 58, 0.35);
}

/* ==================
   2. RESET & BASE
================== */
*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   font-size: 16px;
   -webkit-text-size-adjust: 100%;
}

body {
   font-family: var(--font-body);
   background: var(--off-white);
   color: var(--gray);
   line-height: 1.7;
   overflow-x: hidden;
}

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

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

ul,
ol {
   list-style: none;
}

button {
   font-family: inherit;
   cursor: pointer;
}

/* ==================
   3. LAYOUT
================== */
.container {
   max-width: var(--max-w);
   margin: 0 auto;
   padding: 0 24px;
}

.sec-white {
   padding: var(--pad-xl);
   background: var(--white);
}

.sec-offwhite {
   padding: var(--pad-xl);
   background: var(--off-white);
}

.sec-dark {
   padding: var(--pad-xl);
   background: var(--black);
   color: var(--white);
   position: relative;
   overflow: hidden;
}

.sec-red {
   padding: var(--pad-xl);
   background: var(--red);
   color: var(--white);
}

.sec-header {
   text-align: center;
   margin-bottom: 56px;
}

.sec-header .sec-sub {
   margin: 0 auto;
}

/* ==================
   4. TYPOGRAPHY UTILITIES
================== */
.sec-label {
   display: block;
   font-family: var(--font-body);
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 12px;
}

.sec-title {
   font-family: var(--font-display);
   font-size: clamp(1.9rem, 4vw, 3rem);
   font-weight: 600;
   color: var(--black);
   line-height: 1.18;
   margin-bottom: 16px;
}

.sec-title span {
   color: var(--red);
}

.sec-sub {
   font-family: var(--font-serif);
   font-size: 1.15rem;
   color: var(--gray);
   max-width: 580px;
   line-height: 1.8;
}

.text-white {
   color: var(--white) !important;
}

.text-gold {
   color: var(--gold) !important;
}

.text-red {
   color: var(--red) !important;
}

.text-center {
   text-align: center;
}

.mt-s {
   margin-top: 16px;
}

.mt-m {
   margin-top: 24px;
}

.mt-l {
   margin-top: 32px;
}

/* ==================
   5. BUTTONS
================== */
.btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: var(--red);
   color: var(--white);
   font-family: var(--font-body);
   font-weight: 700;
   font-size: 0.8rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   padding: 15px 30px;
   border: 2px solid var(--red);
   border-radius: 2px;
   transition: all 0.3s var(--ease-out);
   position: relative;
   overflow: hidden;
}

.btn-primary::after {
   content: '';
   position: absolute;
   inset: 0;
   background: rgba(255, 255, 255, 0.1);
   transform: translateX(-100%);
   transition: transform 0.4s var(--ease-out);
}

.btn-primary:hover::after {
   transform: translateX(0);
}

.btn-primary:hover {
   background: var(--red-dark);
   border-color: var(--red-dark);
   transform: translateY(-2px);
   box-shadow: var(--s-red);
}

.btn-outline {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: transparent;
   color: var(--white);
   font-family: var(--font-body);
   font-weight: 700;
   font-size: 0.8rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   padding: 13px 28px;
   border: 2px solid rgba(255, 255, 255, 0.5);
   border-radius: 2px;
   transition: all 0.3s var(--ease-out);
}

.btn-outline:hover {
   background: rgba(255, 255, 255, 0.1);
   border-color: var(--white);
   transform: translateY(-2px);
}

.btn-ghost {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: transparent;
   color: var(--red);
   font-family: var(--font-body);
   font-weight: 700;
   font-size: 0.8rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   padding: 13px 28px;
   border: 2px solid var(--red);
   border-radius: 2px;
   transition: all 0.3s var(--ease-out);
}

.btn-ghost:hover {
   background: var(--red);
   color: var(--white);
   transform: translateY(-2px);
   box-shadow: var(--s-red);
}

/* ==================
   6. SCROLL REVEAL
================== */
.reveal {
   opacity: 0;
   transform: translateY(36px);
   transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}

.reveal.visible {
   opacity: 1;
   transform: translateY(0);
}

.d1 {
   transition-delay: .1s;
}

.d2 {
   transition-delay: .2s;
}

.d3 {
   transition-delay: .3s;
}

.d4 {
   transition-delay: .4s;
}

/* ==================
   7. BREADCRUMB
================== */
.breadcrumb {
   background: var(--off-white);
}

.breadcrumb-inner {
   max-width: var(--max-w);
   margin: 0 auto;
   padding: calc(var(--nav-h) + 20px) 24px 20px;
}

.breadcrumb-list {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 0.8rem;
   color: var(--gray-mid);
   flex-wrap: wrap;
}

.breadcrumb-list a {
   color: var(--gray-mid);
   transition: color 0.2s;
}

.breadcrumb-list a:hover {
   color: var(--red);
}

.breadcrumb-sep {
   opacity: .4;
}

.breadcrumb-cur {
   color: var(--red);
   font-weight: 600;
}

/* ==================
   8. NAVBAR
================== */
#navbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   height: var(--nav-h);
   transition: background 0.4s var(--ease-io), box-shadow 0.4s;
}

#navbar.transparent {
   background: transparent;
}

#navbar.solid,
#navbar.scrolled {
   background: rgba(22, 10, 10, 0.96);
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

.nav-inner {
   max-width: var(--max-w);
   margin: 0 auto;
   padding: 0 24px;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.nav-logos {
   display: flex;
   align-items: center;
   gap: 14px;
}

.nav-logo-img {
   height: 50px;
   width: auto;
   object-fit: contain;
   filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
   transition: transform 0.3s var(--ease-out);
}

.nav-logo-img:hover {
   transform: scale(1.06);
}

.nav-logo-div {
   width: 1px;
   height: 32px;
   background: rgba(255, 255, 255, 0.18);
}

.nav-links {
   display: flex;
   align-items: center;
   gap: 4px;
}

.nav-links a {
   color: rgba(255, 255, 255, 0.8);
   font-family: var(--font-body);
   font-size: 0.74rem;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   padding: 8px 12px;
   border-radius: 2px;
   transition: color 0.25s;
   position: relative;
}

.nav-links a::after {
   content: '';
   position: absolute;
   bottom: 3px;
   left: 12px;
   right: 12px;
   height: 2px;
   background: var(--gold);
   transform: scaleX(0);
   transition: transform 0.3s var(--ease-out);
   border-radius: 1px;
}

.nav-links a:hover {
   color: var(--white);
}

.nav-links a:hover::after,
.nav-links a.active::after {
   transform: scaleX(1);
}

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

.nav-ham {
   display: none;
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   width: 44px;
   height: 44px;
   background: none;
   border: none;
   padding: 8px;
}

.nav-ham span {
   display: block;
   width: 100%;
   height: 2px;
   background: var(--white);
   border-radius: 2px;
   transition: all 0.3s var(--ease-out);
   transform-origin: center;
}

.nav-ham.open span:nth-child(1) {
   transform: translateY(7px) rotate(45deg);
}

.nav-ham.open span:nth-child(2) {
   opacity: 0;
   transform: scaleX(0);
}

.nav-ham.open span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg);
}

.nav-mob {
   display: none;
   position: fixed;
   top: var(--nav-h);
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(22, 10, 10, 0.98);
   backdrop-filter: blur(20px);
   z-index: 999;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 6px;
}

.nav-mob.open {
   display: flex;
}

.nav-mob a {
   color: rgba(255, 255, 255, 0.75);
   font-family: var(--font-display);
   font-size: 1.45rem;
   font-weight: 600;
   padding: 14px 24px;
   transition: color 0.25s;
}

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

/* ==================
   9. HERO FULL (Homepage)
================== */
.hero-full {
   position: relative;
   height: 100vh;
   min-height: 620px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.hero-bg {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   transform: scale(1.06);
   transition: transform 10s ease-out;
}

.hero-bg.loaded {
   transform: scale(1);
}

.hero-ov {
   position: absolute;
   inset: 0;
   background: linear-gradient(140deg, rgba(139, 0, 0, .78) 0%, rgba(26, 10, 10, .70) 50%, rgba(26, 26, 26, .82) 100%);
}

.hero-cnt {
   position: relative;
   z-index: 1;
   text-align: center;
   color: var(--white);
   padding: 0 24px;
   max-width: 880px;
}

.hero-badge {
   display: inline-block;
   font-family: var(--font-body);
   font-size: 0.68rem;
   font-weight: 700;
   letter-spacing: 0.3em;
   text-transform: uppercase;
   color: var(--gold);
   border: 1px solid rgba(201, 168, 76, .4);
   padding: 8px 22px;
   border-radius: 2px;
   margin-bottom: 26px;
   animation: fadeDown .9s var(--ease-out) .2s both;
}

.hero-h1 {
   font-family: var(--font-display);
   font-size: clamp(2.6rem, 7.5vw, 5.6rem);
   font-weight: 700;
   line-height: 1.04;
   color: var(--white);
   margin-bottom: 18px;
   animation: fadeDown .9s var(--ease-out) .4s both;
}

.hero-h1 em {
   color: var(--gold);
   font-style: normal;
}

.hero-desc {
   font-family: var(--font-serif);
   font-size: clamp(1rem, 2.5vw, 1.35rem);
   color: rgba(255, 255, 255, .75);
   max-width: 580px;
   margin: 0 auto 42px;
   animation: fadeDown .9s var(--ease-out) .6s both;
}

.hero-cta {
   display: flex;
   gap: 14px;
   justify-content: center;
   flex-wrap: wrap;
   animation: fadeDown .9s var(--ease-out) .8s both;
}

.hero-scroll {
   position: absolute;
   bottom: 100px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   color: rgba(255, 255, 255, .45);
   font-size: .68rem;
   letter-spacing: .22em;
   text-transform: uppercase;
   animation: fadeUp 1s var(--ease-out) 1.2s both;
}

.scroll-line {
   width: 1px;
   height: 48px;
   background: linear-gradient(to bottom, rgba(255, 255, 255, .35), transparent);
   animation: sPulse 2s ease-in-out infinite;
}

.hero-stats {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: rgba(22, 10, 10, .85);
   backdrop-filter: blur(12px);
   border-top: 1px solid rgba(255, 255, 255, .07);
   z-index: 2;
}

.hero-stats-grid {
   max-width: var(--max-w);
   margin: 0 auto;
   padding: 0 24px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
}

.stat-it {
   padding: 22px 16px;
   text-align: center;
   border-right: 1px solid rgba(255, 255, 255, .07);
}

.stat-it:last-child {
   border-right: none;
}

.stat-n {
   font-family: var(--font-display);
   font-size: 1.9rem;
   font-weight: 700;
   color: var(--gold);
   display: block;
   line-height: 1;
}

.stat-l {
   font-family: var(--font-body);
   font-size: .66rem;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .45);
   margin-top: 5px;
   display: block;
}

/* ==================
   10. HERO PAGE (Inner pages)
================== */
.hero-page {
   position: relative;
   padding: calc(var(--nav-h) + 60px) 0 60px;
   background: var(--black);
   overflow: hidden;
}

.hero-page-bg {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   opacity: .18;
}

.hero-page-inner {
   position: relative;
   z-index: 1;
   max-width: var(--max-w);
   margin: 0 auto;
   padding: 0 24px;
}

.hero-page-label {
   display: block;
   font-size: .72rem;
   font-weight: 700;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 12px;
}

.hero-page-h1 {
   font-family: var(--font-display);
   font-size: clamp(2rem, 5vw, 3.5rem);
   font-weight: 700;
   color: var(--white);
   line-height: 1.1;
   margin-bottom: 16px;
}

.hero-page-h1 span {
   color: var(--gold);
}

.hero-page-p {
   font-family: var(--font-serif);
   font-size: 1.1rem;
   color: rgba(255, 255, 255, .65);
   max-width: 600px;
   line-height: 1.8;
}

/* ==================
   11. ABOUT GRID
================== */
.about-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 72px;
   align-items: center;
}

.about-text p {
   margin-top: 18px;
   font-size: 1rem;
   line-height: 1.85;
   color: var(--gray);
}

.about-text strong {
   color: var(--black);
}

.about-img-wrap {
   position: relative;
}

.about-img-main {
   width: 100%;
   height: 500px;
   object-fit: cover;
   border-radius: 2px;
   box-shadow: var(--s-lg);
}

.about-img-accent {
   position: absolute;
   bottom: -28px;
   left: -28px;
   width: 171px;
   height: 112px;
   object-fit: cover;
   border-radius: 18%;
   border: 6px solid var(--white);
   box-shadow: var(--s-md);
}

.about-badge {
   position: absolute;
   top: -22px;
   right: -22px;
   width: 108px;
   height: 108px;
   background: var(--red);
   border-radius: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: var(--white);
   box-shadow: var(--s-red);
}

.about-badge-y {
   font-family: var(--font-display);
   font-size: 1.5rem;
   font-weight: 700;
   line-height: 1;
}

.about-badge-t {
   font-size: .56rem;
   font-weight: 700;
   letter-spacing: .15em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .65);
   margin-top: 3px;
}

/* ==================
   12. FEATURE CARDS (Homepage)
================== */
.feat-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2px;
   background: var(--gray-light);
   border-radius: 4px;
   overflow: hidden;
}

.feat-card {
   background: var(--white);
   overflow: hidden;
   transition: box-shadow .35s var(--ease-out);
   display: flex;
   flex-direction: column;
}

.feat-card:hover {
   box-shadow: var(--s-md);
   z-index: 1;
}

.feat-card-img {
   width: 100%;
   height: 220px;
   object-fit: cover;
   filter: grayscale(10%);
   transition: transform .6s var(--ease-out), filter .5s;
}

.feat-card:hover .feat-card-img {
   transform: scale(1.04);
   filter: grayscale(0%);
}

.feat-card-body {
   padding: 28px 28px 32px;
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.feat-card-label {
   font-size: .7rem;
   font-weight: 700;
   letter-spacing: .15em;
   text-transform: uppercase;
   color: var(--gold);
}

.feat-card-title {
   font-family: var(--font-display);
   font-size: 1.2rem;
   font-weight: 600;
   color: var(--black);
   transition: color .3s;
}

.feat-card:hover .feat-card-title {
   color: var(--red);
}

.feat-card-text {
   font-size: .88rem;
   color: var(--gray);
   line-height: 1.72;
   flex: 1;
}

.feat-card-link {
   font-size: .78rem;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--red);
   display: inline-flex;
   align-items: center;
   gap: 6px;
   transition: gap .3s;
}

.feat-card:hover .feat-card-link {
   gap: 10px;
}

/* ==================
   13. CONTRADE GRID & CARDS
================== */
.ctr-row {
   display: grid;
   gap: 2px;
}

.ctr-row-3 {
   grid-template-columns: repeat(3, 1fr);
}

.ctr-row-2 {
   grid-template-columns: repeat(2, 1fr);
   margin-top: 2px;
}

.ctr-card {
   background: var(--white);
   overflow: hidden;
   transition: box-shadow .35s var(--ease-out);
}

.ctr-card:hover {
   box-shadow: var(--s-md);
   z-index: 1;
}

.ctr-img {
   width: 100%;
   height: 200px;
   object-fit: cover;
   filter: grayscale(15%);
   transition: transform .6s var(--ease-out), filter .5s;
}

.ctr-card:hover .ctr-img {
   transform: scale(1.04);
   filter: grayscale(0%);
}

.ctr-body {
   padding: 24px 26px 28px;
}

.ctr-colors {
   display: flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 10px;
}

.c-dot {
   width: 13px;
   height: 13px;
   border-radius: 50%;
   border: 2px solid rgba(0, 0, 0, .1);
}

.c-label {
   font-size: .7rem;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--gray);
   opacity: .7;
}

.ctr-bar {
   height: 3px;
   width: 44px;
   border-radius: 2px;
   margin-bottom: 12px;
   transition: width .4s var(--ease-out);
}

.ctr-card:hover .ctr-bar {
   width: 72px;
}

.ctr-name {
   font-family: var(--font-display);
   font-size: 1.3rem;
   font-weight: 600;
   color: var(--black);
   margin-bottom: 8px;
   transition: color .3s;
}

.ctr-card:hover .ctr-name {
   color: var(--red);
}

.ctr-text {
   font-size: .87rem;
   color: var(--gray);
   line-height: 1.7;
}

.ctr-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: .78rem;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--red);
   margin-top: 14px;
   transition: gap .3s;
}

.ctr-card:hover .ctr-link {
   gap: 10px;
}

/* Mappa */
.mappa-wrap {
   max-width: 520px;
   margin: 0 auto 56px;
}

.mappa-wrap img {
   width: 100%;
   border-radius: 4px;
   box-shadow: var(--s-md);
   border: 3px solid var(--white);
}

.mappa-cap {
   text-align: center;
   font-size: .72rem;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--gray);
   margin-top: 10px;
   opacity: .55;
}

/* ==================
   14. RUZZI TIMELINE
================== */
.ruzzi-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 72px;
   align-items: start;
   margin-top: 60px;
}

.ruzzi-photos {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
}

.ruzzi-ph {
   position: relative;
   overflow: hidden;
   border-radius: 2px;
}

.ruzzi-ph:first-child {
   grid-column: span 2;
}

.ruzzi-ph img {
   width: 100%;
   object-fit: cover;
   transition: transform .6s var(--ease-out);
}

.ruzzi-ph:first-child img {
   height: 280px;
}

.ruzzi-ph:not(:first-child) img {
   height: 165px;
}

.ruzzi-ph:hover img {
   transform: scale(1.06);
}

.ruzzi-ph-ov {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
   opacity: 0;
   transition: opacity .3s;
}

.ruzzi-ph:hover .ruzzi-ph-ov {
   opacity: 1;
}

.ruzzi-tl {
   display: flex;
   flex-direction: column;
}

.tl-item {
   display: grid;
   grid-template-columns: 56px 1fr;
   gap: 22px;
   position: relative;
}

.tl-item:not(:last-child)::after {
   content: '';
   position: absolute;
   left: 27px;
   top: 58px;
   bottom: 0;
   width: 2px;
   background: linear-gradient(to bottom, rgba(201, 168, 76, .35), transparent);
}

.tl-icon {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: rgba(201, 168, 76, .1);
   border: 2px solid rgba(201, 168, 76, .25);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.3rem;
   flex-shrink: 0;
   transition: all .3s var(--ease-out);
}

.tl-item:hover .tl-icon {
   background: rgba(201, 168, 76, .22);
   border-color: var(--gold);
   transform: scale(1.08);
}

.tl-body {
   padding: 12px 0 42px;
}

.tl-title {
   font-family: var(--font-display);
   font-size: .95rem;
   font-weight: 600;
   color: var(--gold);
   margin-bottom: 7px;
}

.tl-text {
   font-size: .88rem;
   color: rgba(255, 255, 255, .58);
   line-height: 1.72;
}

/* ==================
   15. GALLERY
================== */
.gallery-mod {
   position: relative;
   overflow: hidden;
   border-radius: 2px;
   box-shadow: var(--s-lg);
}

.g-track {
   display: flex;
   transition: transform .55s var(--ease-out);
}

.g-slide {
   min-width: 100%;
   aspect-ratio: 4/3;
   overflow: hidden;
}

.g-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .55s var(--ease-out);
}

.gallery-mod:hover .g-slide img {
   transform: scale(1.03);
}

.g-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 46px;
   height: 46px;
   background: rgba(22, 10, 10, .6);
   backdrop-filter: blur(6px);
   border: 1px solid rgba(255, 255, 255, .14);
   border-radius: 50%;
   color: var(--white);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.15rem;
   z-index: 2;
   transition: all .3s var(--ease-out);
}

.g-arrow:hover {
   background: var(--red);
   border-color: transparent;
   transform: translateY(-50%) scale(1.1);
}

.g-arrow.prev {
   left: 14px;
}

.g-arrow.next {
   right: 14px;
}

.g-dots {
   position: absolute;
   bottom: 16px;
   left: 0;
   right: 0;
   display: flex;
   justify-content: center;
   gap: 8px;
   z-index: 2;
}

.g-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .38);
   border: none;
   cursor: pointer;
   transition: all .3s;
}

.g-dot.active {
   background: var(--white);
   transform: scale(1.4);
}

/* ==================
   16. SBANDIERATORI ITEMS
================== */
.sban-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 72px;
   align-items: center;
   margin-top: 60px;
}

.sban-items {
   display: flex;
   flex-direction: column;
}

.sban-item {
   display: flex;
   gap: 20px;
   align-items: flex-start;
   padding: 28px 0;
   border-bottom: 1px solid var(--gray-light);
}

.sban-item:last-child {
   border-bottom: none;
}

.sban-ico {
   width: 48px;
   height: 48px;
   background: var(--red-light);
   border-radius: 2px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.3rem;
   flex-shrink: 0;
   transition: all .3s var(--ease-out);
}

.sban-item:hover .sban-ico {
   background: var(--red);
   transform: scale(1.06);
}

.sban-item-t {
   font-family: var(--font-display);
   font-size: .95rem;
   font-weight: 600;
   color: var(--black);
   margin-bottom: 6px;
}

.sban-item-p {
   font-size: .88rem;
   color: var(--gray);
   line-height: 1.72;
}

/* ==================
   17. FAQ ACCORDION
================== */
.faq-list {
   max-width: 800px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.faq-item {
   background: var(--white);
   border-radius: 2px;
   overflow: hidden;
   box-shadow: var(--s-xs);
   transition: box-shadow .3s;
}

.faq-item:hover {
   box-shadow: var(--s-sm);
}

.faq-q {
   width: 100%;
   text-align: left;
   padding: 22px 24px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
   background: none;
   border: none;
   font-family: var(--font-display);
   font-size: .95rem;
   font-weight: 600;
   color: var(--black);
   transition: color .3s;
}

.faq-q:hover {
   color: var(--red);
}

.faq-ico {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: var(--red-light);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: .8rem;
   color: var(--red);
   transition: all .3s var(--ease-out);
}

.faq-item.open .faq-ico {
   background: var(--red);
   color: var(--white);
   transform: rotate(45deg);
}

.faq-a {
   max-height: 0;
   overflow: hidden;
   transition: max-height .4s var(--ease-out);
}

.faq-a-inner {
   padding: 0 24px 22px;
   font-size: .92rem;
   color: var(--gray);
   line-height: 1.8;
}

.faq-item.open .faq-a {
   max-height: 300px;
}

/* ==================
   18. CTA BANNER
================== */
.cta-banner {
   background: linear-gradient(135deg, var(--red-dark), var(--red));
   padding: 72px 24px;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.cta-banner::before {
   content: '';
   position: absolute;
   inset: 0;
   background: url('./assets/sbandieratori_e_tamburini.jpg') center/cover;
   opacity: .07;
}

.cta-inner {
   position: relative;
   z-index: 1;
   max-width: 600px;
   margin: 0 auto;
}

.cta-h2 {
   font-family: var(--font-display);
   font-size: clamp(1.8rem, 4vw, 2.8rem);
   font-weight: 700;
   color: var(--white);
   margin-bottom: 16px;
}

.cta-p {
   font-family: var(--font-serif);
   font-size: 1.15rem;
   color: rgba(255, 255, 255, .8);
   margin-bottom: 32px;
}

.cta-act {
   display: flex;
   gap: 14px;
   justify-content: center;
   flex-wrap: wrap;
}

/* ==================
   19. CONTACT CARDS
================== */
.contact-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-top: 56px;
}

.contact-card {
   background: var(--white);
   padding: 36px 28px;
   border-radius: 2px;
   box-shadow: var(--s-sm);
   position: relative;
   overflow: hidden;
   transition: all .4s var(--ease-out);
}

.contact-card::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--red), var(--gold));
   transform: scaleX(0);
   transition: transform .4s var(--ease-out);
}

.contact-card:hover::after {
   transform: scaleX(1);
}

.contact-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--s-md);
}

.contact-ico {
   width: 50px;
   height: 50px;
   background: var(--red-light);
   border-radius: 2px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.4rem;
   margin-bottom: 16px;
}

.contact-title {
   font-family: var(--font-display);
   font-size: 1.05rem;
   font-weight: 600;
   color: var(--black);
   margin-bottom: 12px;
}

.contact-body {
   font-size: .88rem;
   color: var(--gray);
   line-height: 1.82;
}

.contact-body p {
   margin-bottom: 6px;
}

.contact-body p:last-child {
   margin-bottom: 0;
}

.contact-body a {
   color: var(--red);
   font-weight: 600;
   transition: color .2s;
}

.contact-body a:hover {
   color: var(--red-dark);
}

.note-wide {
   grid-column: span 3;
   background: linear-gradient(135deg, #1a0a0a, #2a1010);
   color: rgba(255, 255, 255, .65);
   padding: 26px 34px;
   border-radius: 2px;
   display: flex;
   gap: 22px;
   align-items: flex-start;
   border-left: 4px solid var(--gold);
}

.note-ico {
   font-size: 1.4rem;
   flex-shrink: 0;
   margin-top: 2px;
}

.note-lbl {
   font-family: var(--font-display);
   font-size: .78rem;
   font-weight: 600;
   color: var(--gold);
   text-transform: uppercase;
   letter-spacing: .15em;
   margin-bottom: 6px;
}

.note-txt {
   font-family: var(--font-serif);
   font-style: italic;
   font-size: .95rem;
   line-height: 1.72;
}

/* ==================
   20. MAP SECTION
================== */
.map-wrap {
   width: 100%;
   height: 420px;
   overflow: hidden;
}

.map-wrap iframe {
   width: 100%;
   height: 100%;
   border: 0;
   filter: grayscale(25%) contrast(1.05);
   display: block;
}

/* ==================
   21. CONTRADA DETAIL PAGE
================== */
.ctr-detail-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 72px;
   align-items: start;
}

.ctr-detail-img {
   width: 100%;
   border-radius: 2px;
   box-shadow: var(--s-lg);
   aspect-ratio: 4/3;
   object-fit: cover;
}

.ctr-detail-text h2 {
   font-family: var(--font-display);
   font-size: clamp(1.6rem, 3vw, 2.2rem);
   font-weight: 600;
   color: var(--black);
   margin-bottom: 16px;
}

.ctr-detail-text p {
   font-size: .97rem;
   color: var(--gray);
   line-height: 1.85;
   margin-bottom: 18px;
}

.ctr-colors-row {
   display: flex;
   gap: 12px;
   align-items: center;
   margin: 20px 0;
}

.ctr-swatch {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   border: 3px solid var(--white);
   box-shadow: var(--s-sm);
}

.ctr-color-lbl {
   font-size: .82rem;
   font-weight: 700;
   color: var(--gray);
   text-transform: uppercase;
   letter-spacing: .1em;
}

/* ==================
   22. LINK LIST
================== */
.link-list {
   display: flex;
   flex-direction: column;
   gap: 2px;
   max-width: 700px;
}

.link-item {
   display: flex;
   align-items: center;
   gap: 16px;
   background: var(--white);
   padding: 20px 24px;
   border-radius: 2px;
   box-shadow: var(--s-xs);
   transition: all .3s var(--ease-out);
   border-left: 3px solid transparent;
}

.link-item:hover {
   border-left-color: var(--red);
   transform: translateX(4px);
   box-shadow: var(--s-sm);
}

.link-item-ico {
   font-size: 1.4rem;
   flex-shrink: 0;
   width: 44px;
   text-align: center;
}

.link-item-body .link-name {
   font-family: var(--font-display);
   font-size: .9rem;
   font-weight: 600;
   color: var(--black);
   transition: color .2s;
}

.link-item:hover .link-name {
   color: var(--red);
}

.link-item-body .link-url {
   font-size: .8rem;
   color: var(--gray-mid);
   margin-top: 2px;
}

.link-arrow {
   margin-left: auto;
   color: var(--red);
   font-size: 1.2rem;
   opacity: 0;
   transition: all .3s;
}

.link-item:hover .link-arrow {
   opacity: 1;
   transform: translateX(4px);
}

/* ==================
   23. 404 PAGE
================== */
.p404 {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--black);
   color: var(--white);
   text-align: center;
   padding: 40px 24px;
}

.p404-num {
   font-family: var(--font-display);
   font-size: clamp(6rem, 20vw, 14rem);
   font-weight: 700;
   color: var(--red);
   line-height: 1;
   margin-bottom: 16px;
   text-shadow: 0 0 80px rgba(196, 30, 58, .5);
}

.p404-h1 {
   font-family: var(--font-display);
   font-size: 1.8rem;
   font-weight: 600;
   color: var(--white);
   margin-bottom: 16px;
}

.p404-p {
   font-family: var(--font-serif);
   font-size: 1.1rem;
   color: rgba(255, 255, 255, .6);
   max-width: 400px;
   margin: 0 auto 32px;
}

.p404-inner {
   max-width: 600px;
}

.p404-links {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
   justify-content: center;
   margin-bottom: 40px;
}

.p404-nav {
   margin-top: 8px;
   padding-top: 32px;
   border-top: 1px solid rgba(255, 255, 255, .08);
}

.p404-nav-t {
   font-size: .8rem;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .3);
   margin-bottom: 14px;
}

.p404-nav ul {
   display: flex;
   gap: 20px;
   flex-wrap: wrap;
   justify-content: center;
   list-style: none;
   padding: 0;
   margin: 0;
}

.p404-nav a {
   font-size: .88rem;
   color: rgba(255, 255, 255, .45);
   transition: color .25s;
}

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

/* ==================
   24. FOOTER
================== */
footer {
   background: var(--black);
   color: rgba(255, 255, 255, .45);
   padding: 64px 0 30px;
}

.footer-inner {
   max-width: var(--max-w);
   margin: 0 auto;
   padding: 0 24px;
}

.footer-top {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
   gap: 52px;
   padding-bottom: 36px;
   border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.footer-brand-img {
   height: 80px;
   width: auto;
   object-fit: contain;
   margin-bottom: 16px;
   border-radius: 6px;
   opacity: .9;
}

.footer-brand p {
   font-size: .84rem;
   line-height: 1.75;
   max-width: 310px;
}

.footer-cf {
   font-size: .72rem;
   color: rgba(255, 255, 255, .22);
   margin-top: 10px;
}

.footer-col-t {
   font-family: var(--font-display);
   font-size: .76rem;
   font-weight: 600;
   color: var(--white);
   letter-spacing: .15em;
   text-transform: uppercase;
   margin-bottom: 16px;
}

.footer-links {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.footer-links a {
   font-size: .84rem;
   color: rgba(255, 255, 255, .45);
   transition: color .25s;
}

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

.footer-bot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-top: 28px;
   font-size: .78rem;
   flex-wrap: wrap;
   gap: 12px;
}

.footer-bot a {
   color: rgba(255, 255, 255, .35);
   transition: color .25s;
}

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

/* ==================
   25. KEYFRAMES
================== */
@keyframes fadeDown {
   from {
      opacity: 0;
      transform: translateY(-18px)
   }

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

@keyframes fadeUp {
   from {
      opacity: 0;
      transform: translateY(18px)
   }

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

@keyframes sPulse {

   0%,
   100% {
      opacity: .5;
      transform: scaleY(1)
   }

   50% {
      opacity: 1;
      transform: scaleY(.55)
   }
}

/* ==================
   26. RESPONSIVE
================== */
@media (max-width:1024px) {
   :root {
      --pad-xl: 80px 24px;
   }

   .about-grid,
   .ruzzi-grid,
   .sban-layout,
   .ctr-detail-grid {
      grid-template-columns: 1fr;
      gap: 48px;
   }

   .about-img-wrap {
      order: -1;
   }

   .about-img-main {
      height: 360px;
   }

   .about-badge {
      display: none;
   }

   .ctr-row-3,
   .feat-grid {
      grid-template-columns: 1fr 1fr;
   }

   .footer-top {
      grid-template-columns: 1fr 1fr;
      gap: 36px;
   }

   .footer-brand {
      grid-column: span 2;
   }

   .hero-stats-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .stat-it:nth-child(2) {
      border-right: none;
   }
}

@media (max-width:768px) {
   :root {
      --pad-xl: 56px 20px;
      --nav-h: 64px;
   }

   .nav-links {
      display: none;
   }

   .nav-ham {
      display: flex;
   }

   .ctr-row-3,
   .ctr-row-2,
   .contact-grid,
   .feat-grid {
      grid-template-columns: 1fr;
   }

   .note-wide {
      grid-column: span 1;
   }

   .ruzzi-photos {
      grid-template-columns: 1fr;
   }

   .ruzzi-ph:first-child {
      grid-column: span 1;
   }

   .ruzzi-ph:first-child img,
   .ruzzi-ph:not(:first-child) img {
      height: 220px;
   }

   .hero-stats {
      display: none;
   }

   .hero-cta,
   .cta-act {
      flex-direction: column;
      align-items: center;
   }

   .footer-top {
      grid-template-columns: 1fr;
      gap: 28px;
   }

   .footer-brand {
      grid-column: span 1;
   }

   .hero-scroll {
      display: none;
   }

   .map-wrap {
      height: 280px;
   }
}

@media (max-width:480px) {

   .hero-h1,
   .hero-page-h1 {
      font-size: 2rem;
   }

   .about-img-main {
      height: 260px;
   }

   .ctr-body {
      padding: 18px 16px 22px;
   }

   .faq-q {
      font-size: .88rem;
      padding: 18px 20px;
   }
}