/* ========================
    CSS RESET & NORMALIZE
   ======================== */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed, 
figure,figcaption,footer,header,hgroup, 
menu,nav,output,ruby,section,summary,
time,mark,audio,video {  margin: 0;  padding: 0;  border: 0;  font-size: 100%;  font: inherit;  vertical-align: baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {  display: block;}
html {  box-sizing: border-box;  scroll-behavior: smooth;}
*,*::before,*::after {  box-sizing: inherit;}
body {line-height: 1.5; background: #F9FAF6; color: #32413C; min-height: 100vh; font-family: 'Quicksand', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
ul,ol { list-style: none; margin: 0 0 24px 0; padding: 0;}
a { color: #32413C; text-underline-offset: 2px; text-decoration-thickness: 2px; transition: color .2s cubic-bezier(.4,0,.2,1); outline: none;}
a:hover, a:focus { color: #B49D82;}
img { max-width: 100%; display: block; border-radius: 10px;}
h1,h2,h3,h4,h5,h6 {font-family: 'Marcellus', Georgia, serif; font-weight: bold; color: #32413C; line-height: 1.13; letter-spacing: .02em;}
h1 { font-size: 2.5rem; margin-bottom: 16px; }
h2 { font-size: 2rem; margin-bottom: 12px; }
h3 { font-size: 1.25rem; margin-bottom: 8px; }
h4,h5,h6 { font-size: 1rem; }
p,li {font-size: 1.06rem; color: #32413C; line-height: 1.7; margin-bottom: 8px; font-family: 'Quicksand', Arial, sans-serif;}
strong { font-weight: 700; }
em, i { font-style: italic; }


/* =====================
   GLOBAL SPACING SYSTEM
   ===================== */
:root {
  --primary: #32413C;
  --secondary: #B49D82;
  --accent: #F9FAF6;
  --shadow: 0 6px 32px rgba(50, 65, 60, 0.09);
  --radius-lg: 14px;
  --radius-md: 8px;
  --radius-sm: 5px;
  --transition: all .28s cubic-bezier(.4,0,.2,1);
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --font-display: 'Marcellus', Georgia, serif;
  --font-body: 'Quicksand', Arial, sans-serif;
}


/* =======================
    LAYOUT & CONTAINERS
   ======================= */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  flex-direction: column;
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.section {
  margin-bottom: 60px;
  padding: 40px 20px; /* CRITICAL spacing rule */
  background: none;
}
.section:last-child { margin-bottom: 0; }
.text-section { max-width: 700px; }

/* HERO/BANNER IMAGES & SECTION GEOMETRICS */
section {
  border-radius: var(--radius-lg);
  box-shadow: none;
  background: none;
}

/* CARD LAYOUTS */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  position: relative;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 280px;
  max-width: 380px;
  flex: 1 1 320px;
  transition: box-shadow .22s;
}
.card:hover {
  box-shadow: 0 12px 32px rgba(50,65,60,.13);
}

.content-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}
.text-image-section {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.testimonial-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(50,65,60,0.10);
  margin-bottom: 20px;
  color: #32413C; /* dark text for contrast */
  font-size: 1.12rem;
  min-width: 270px;
  transition: box-shadow .2s;
  border-left: 6px solid #B49D82;
}
.testimonial-card:hover { box-shadow: 0 8px 36px rgba(50,65,60,0.15); }
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

/* Specific feature grid for index/about/esperienze/eventi */
.feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: flex-start;
}
.feature-grid > li,
.feature-grid > div {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 28px 18px 22px 18px;
  margin-bottom: 20px;
  flex: 1 1 260px;
  min-width: 220px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  transition: box-shadow .18s;
}
.feature-grid > li:hover,
.feature-grid > div:hover {
  box-shadow: 0 14px 44px rgba(50,65,60,0.13);
}


/* =========================
   NAVIGATION & HEADER
   ========================= */
header {
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 16px rgba(50,65,60,0.06);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 8vw 18px 8vw;
  position: relative;
  z-index: 111;
}
header nav {
  display: flex;
  gap: 24px;
  align-items: center;
}
header nav a {
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: bold;
  color: #32413C;
  padding: 7px 0;
  text-decoration: none;
  border-bottom: 2.5px solid transparent;
  transition: border-color .19s,color .19s;
}
header nav a:hover, header nav a:focus {
  border-color: #B49D82;
  color: #B49D82;
}

header img {
  height: 48px;
  width: auto;
  display: block;
  margin-right: 15px;
}

/* CTA PRIMARY BUTTON */
.cta-primary {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  background: #B49D82;
  color: #fff;
  font-weight: 700;
  font-size: 1.08rem;
  font-family: var(--font-body);
  border-radius: var(--radius-lg);
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(180,157,130,0.11);
  border: none;
  outline: none;
  margin-left: 18px;
  transition: background .22s,box-shadow .18s;
}
.cta-primary:hover, .cta-primary:focus {
  background: #32413C;
  color: #fff;
  box-shadow: 0 10px 32px rgba(50,65,60,0.12);
}


/* =========================
       MOBILE NAVIGATION
   ========================= */
.mobile-menu-toggle {
  display: none;
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 300;
  background: #32413C;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  font-size: 1.6rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(50,65,60,0.13);
  transition: background .17s;
}
.mobile-menu-toggle:focus { outline: 2px solid #B49D82; }

.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #32413C;
  z-index: 900;
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 32px 24px 24px 24px;
}
.mobile-menu.open {
  transform: translateX(0);
}
.mobile-menu-close {
  font-size: 2.1rem;
  border: none;
  background: transparent;
  color: #fff;
  align-self: flex-end;
  margin-bottom: 24px;
  cursor: pointer;
  transition: color .2s;
}
.mobile-menu-close:hover, .mobile-menu-close:focus { color: #B49D82; }
.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 18px;
  width: 100%;
}
.mobile-nav a {
  color: #fff;
  font-weight: bold;
  font-family: var(--font-body);
  font-size: 1.15rem;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color .19s;
  padding: 12px 0;
  border-bottom: 2px solid transparent;
}
.mobile-nav a:hover, .mobile-nav a:focus {
  color: #B49D82;
}

/* ================================
   MAIN LAYOUTS + SPACING CLASSES
   ================================ */
.bullets, .service-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}
.service-list > li, .bullets > li {
  padding-left: 0.7em;
  position: relative;
  font-size: 1.08rem;
  color: #32413C;
}
.bullets > li::before {
  content: '';
  display: inline-block;
  background: #B49D82;
  border-radius: 45%;
  width: 9px; height: 9px;
  margin-right: 9px;
  vertical-align: middle;
}

/* Spacing between cards, features, grid */
.card-container > * { margin-right: 0; }
.content-grid > * { min-width: 260px; margin-right: 0; }
.feature-grid > * { min-width: 210px; margin-right: 0; }


/* ================================
    FOOTER
   ================================ */
footer {
  width: 100%;
  background: #32413C;
  color: #fff;
  padding: 32px 8vw 18px 8vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 14px;
}
footer nav a {
  color: #B49D82;
  font-family: var(--font-body);
  font-size: 1rem;
  text-decoration: none;
  font-weight: bold;
  transition: color .17s;
}
footer nav a:hover, footer nav a:focus { color: #fff; text-decoration: underline;}
.footer-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.footer-info img {
  max-height: 38px;
  width: auto;
  border-radius: 7px;
  background: #fff;
  padding: 1.5px;
}
.footer-info span { font-size: 1rem; letter-spacing: .02em; color: #fff;}


/* ================================
   FORMS & INPUTS (future proof)
   ================================ */
input, textarea, select {
  font-family: var(--font-body);
  font-size: 1.06rem;
  border: 2px solid #B49D82;
  border-radius: var(--radius-md);
  padding: 12px 15px;
  background: #fff;
  color: #32413C;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
  outline-color: #32413C;
  transition: border-color .19s;
}
input:focus, textarea:focus, select:focus { border-color: #32413C; }
button, .btn {
  font-family: var(--font-body);
  font-size: 1.07rem;
  font-weight: bold;
  border-radius: var(--radius-md);
  border: none;
  background: #B49D82;
  color: #fff;
  padding: 12px 26px;
  cursor: pointer;
  transition: background .2s;
  margin-bottom: 0;
}
button:hover,.btn:hover,button:focus,.btn:focus { background: #32413C; color: #fff;}


/* ================================
    HIERARCHY + TYPOGRAPHY
   ================================ */
.subheadline {
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: #32413C;
  margin-bottom: 14px;
  font-weight: 400;
  letter-spacing: 0.015em;
}

h1, .hero-title   { font-size: 2.7rem; margin-bottom: 8px; font-family: var(--font-display);}  
h2, .section-title { font-size: 2rem;   margin-bottom: 6px;  font-family: var(--font-display);}
h3                { font-size: 1.20rem;  letter-spacing: 1.2px; margin-bottom: 3px; font-family: var(--font-display);}


/* ================================
    INTERACTIVE ELEMENTS / STATES
   ================================ */
.cta-primary, .btn, button, input[type=submit] {
  box-shadow: 0 3px 14px rgba(180,157,130,0.11);
  transition: background .19s,box-shadow .16s, color .16s;
}
.cta-primary:active, .btn:active, button:active { transform: scale(.97);}

a, button, .btn, .cta-primary { transition: var(--transition); }

/* List rows with all li content elements (services & about) */
ul li {
  margin-bottom: 6px;
}


/* ===============================
    COOKIE CONSENT BANNER + MODAL
   =============================== */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  color: #32413C;
  box-shadow: 0 -2px 24px rgba(50,65,60,0.14);
  z-index: 1201;
  padding: 22px 20px 14px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 72px;
  font-size: 1.07rem;
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.cookie-banner.hide {
  transform: translateY(120%);
}
.cookie-banner .cookie-text {
  flex: 1 1 220px;
  max-width: 620px;
  font-size: 1.04rem;
}
.cookie-banner .cookie-actions {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}
.cookie-banner button {
  padding: 9px 19px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: var(--radius-md);
}
.cookie-banner .cookie-settings { background: #32413C; color: #fff;}
.cookie-banner .cookie-settings:hover, .cookie-banner .cookie-settings:focus {background: #B49D82; color: #fff;}
.cookie-banner .accept { background: #B49D82; color: #fff;}
.cookie-banner .accept:hover, .cookie-banner .accept:focus {background: #32413C; color: #fff;}
.cookie-banner .reject { background: #fff; color: #32413C; border: 2px solid #32413C;}
.cookie-banner .reject:hover, .cookie-banner .reject:focus {background: #B49D82; color: #fff;}

/* COOKIE MODAL */
.cookie-modal-overlay {
  position: fixed;
  left:0; right:0; top:0; bottom:0;
  background:rgba(50,65,60,0.60);
  display:none;
  z-index: 1400;
  align-items:center;
  justify-content:center;
  transition: background .18s;
}
.cookie-modal-overlay.open { display: flex; }
.cookie-modal {
  background: #fff;
  color: #32413C;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 40px rgba(50,65,60,0.24);
  padding: 42px 26px 32px 26px;
  min-width: 320px;
  max-width: 97vw;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  align-items: stretch;
  animation: modalIn .24s cubic-bezier(.39,.64,.46,.93);
}
@keyframes modalIn { 0% {transform: translateY(40px) scale(0.97); opacity:0;} 100% {transform:none; opacity:1;}}
.cookie-modal h2 {
  color: #32413C;
  margin-bottom: 8px;
  font-size: 1.3rem;
}
.cookie-category {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  margin-bottom: 9px;
}
.cookie-toggle {
  appearance: none;
  width: 46px; height: 22px;
  border-radius: 15px;
  background: #B49D82;
  position: relative;
  outline: none;
  transition: background .13s;
  cursor: pointer;
}
.cookie-toggle:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.cookie-toggle:before {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: left .19s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.06);
}
.cookie-toggle:checked { background: #32413C; }
.cookie-toggle:checked:before { left: 27px; }

.cookie-modal .close-modal {
  position: absolute;
  top: 14px;
  right: 20px;
  background: transparent;
  border: none;
  font-size: 1.9rem;
  color: #32413C;
  cursor: pointer;
  transition: color .16s;
}
.cookie-modal .close-modal:hover, .cookie-modal .close-modal:focus {color:#B49D82;}
.cookie-modal .cookie-actions {gap:13px; margin-top:12px;}
.cookie-modal .cookie-actions button {min-width:90px;}


/* ================================
     MEDIA QUERIES / MOBILE FIRST
   ================================ */
@media (max-width: 1110px) {
  .container { max-width: 960px; }
  header, footer { padding-left: 3vw; padding-right: 3vw; }
}
@media (max-width:890px) {
  .container { max-width: 97vw; }
  header img { height: 38px; }
  header nav a { font-size: 1rem; }
  .testimonial-card, .feature-grid > *, .card { padding: 20px 12px; }
  .section { padding: 35px 10px; }
}
@media (max-width: 768px) {
  header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding: 13px 3vw 13px 3vw;
  }
  header nav, header .cta-primary { display: none; }
  .mobile-menu-toggle { display: flex; }
  .container { max-width: 97vw; }
  .feature-grid, .content-grid, .card-container {
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
  }
  .section { padding: 25px 6px; margin-bottom: 32px; }
  .testimonial-card, .feature-grid > *, .card { min-width: 85vw; max-width: 99vw; padding: 16px 8px; }
  .text-image-section { flex-direction: column; gap: 18px; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.31rem; }
  .cta-primary, .btn, button { padding: 10px 20px; font-size: 1rem; }
  .footer-info img { max-height: 26px; }
  footer { padding: 24px 3vw 13px 3vw; }
  .cookie-banner {
    flex-direction: column;
    gap: 12px;
    padding: 17px 6px 9px 6px;
    align-items: flex-start;
  }
}
@media (max-width:420px) {
  .footer-info img { max-height: 19px; }
  h1, .hero-title { font-size: 1.32rem; }
  h2 { font-size: 1.01rem; }
}


/* ================================
     MICRO-ANIMATIONS & EFFECTS
   ================================ */
.card, .feature-grid > *, .testimonial-card, .cta-primary, button, .cookie-banner, .cookie-modal {
  transition: box-shadow .18s, transform .2s, background .18s, color .18s;
}
.card:hover, .feature-grid > *:hover {
  transform: translateY(-3px) scale(1.015);
}
.cta-primary:active, button:active { transform: scale(.98); }

/* ================================
     ACCESSIBILITY FOCUS STATES
   ================================ */
:focus-visible { outline: 2px solid #B49D82; outline-offset: 3px; }


/* ================================
     PRINT (BASIC SANITY)
   ================================ */
@media print {
  header, footer, .mobile-menu, .cookie-banner, .cookie-modal-overlay { display:none !important; }
  body { background: #fff; color: #222; }
  .container { max-width: 100vw; padding: 0; }
}

section {
  padding: 20px 0;
}