/* CF7 — coerente con palette */
   .wpcf7 input[type="text"],
   .wpcf7 input[type="email"],
   .wpcf7 textarea {
       width: 100%;
       padding: 14px 16px;
       margin-bottom: 15px;
       font-size: 1rem;
       border: 1px solid #d6d3cc;
       border-radius: 8px;
       background: #fff;
       box-sizing: border-box;
   }

   .wpcf7 textarea {
       min-height: 120px;
   }

   .wpcf7 input[type="submit"] {
       background-color: #fac105;
       color: white;
       font-weight: 900;
       font-size: 1rem;
       padding: 14px 0;
       width: 100%;
       border: none;
       border-radius: 8px;
       cursor: pointer;
       transition: filter .2s ease, transform .2s ease;
   }

   .wpcf7 input[type="submit"]:hover {
       filter: brightness(.95);
       transform: translateY(-1px);
   }

   :root {
       --bg: #fbfaf7;
       --paper: #ffffff;
       --text: #121418;
       --muted: #5a616e;
       --line: #e8e3da;

       --wine: #6f0c18;
       --wine-2: #8d1020;
       --honey: #c89b1a;

       --radius: 18px;
       --shadow: 0 18px 40px rgba(18, 20, 24, .14);
       --max: 1200px;

       /* CF7 look */
       --form-border: rgba(18, 20, 24, .22);
       --form-border-focus: rgba(200, 155, 26, .85);
       --form-field: #ffffff;
       --form-yellow: #f4b400;
       --form-yellow-2: #e3a700;
   }

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

   html,
   body {
       height: 100%;
   }

   body {
       font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
       background: var(--bg);
       color: var(--text);
       line-height: 1.45;
       overflow-x: hidden;
   }

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

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

   .wrap {
       max-width: var(--max);
       margin: 0 auto;
       padding: 0 22px;
   }

   /* =========================
   BANNERINO
========================= */
   .bannerino {
       position: fixed;
       background-color: red;
       width: 100%;
       height: 5%;
       z-index: 1000;
   }

   .bannerino p {
       background-color: red;
       padding: 1%;
       font-size: 60%;
       color: white;
       text-align: center;
       margin: 0 auto;
   }

   /* =========================
   NAVBAR (IDENTICA A "CHI SIAMO")
========================= */
   header {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 50;
       background: rgba(251, 250, 247, .62);
       backdrop-filter: blur(40px);
       -webkit-backdrop-filter: blur(40px);
       border-bottom: 1px solid rgba(0, 0, 0, .08);
       box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
   }

   .nav {
       height: 72px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 64px;
       margin-top: 5%;
       /*bannerino*/
   }

   .brand {
       display: flex;
       align-items: center;
       gap: 12px;
       flex: 0 0 auto;
   }

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

   .menu {
       display: flex;
       align-items: center;
       gap: 26px;
       margin-left: auto;
       margin-top: 1rem;
   }

   .menu a {
       font-size: 16px;
       font-weight: 700;
       color: var(--text);
       padding: 8px 0;
   }

   .menu a:hover {
       color: var(--wine);
   }

   .hamburger {
       display: none;
       width: 44px;
       height: 44px;
       border-radius: 12px;
       border: 1px solid rgba(18, 20, 24, .12);
       background: var(--paper);
       color: var(--text);
       font-size: 18px;
       line-height: 1;
       cursor: pointer;
       margin-left: auto;
   }

   .mobile-nav {
       display: none;
       border-top: 1px solid rgba(0, 0, 0, .08);
       background: rgba(251, 250, 247, .92);

   }

   .mobile-nav.open {
       display: block;
   }

   .mobile-nav .wrap {
       padding: 14px 22px 18px;
       display: grid;
       gap: 8px;
   }

   .mobile-nav a {
       padding: 12px 12px;
       border-radius: 14px;
       border: 1px solid rgba(232, 227, 218, .95);
       background: var(--paper);
       font-size: 14px;
       font-weight: 700;
   }

   /* =========================
   HERO (FULL WIDTH)
========================= */
   .hero {
       min-height: 100vh;
       width: 100%;
       position: relative;
       display: flex;
       align-items: stretch;
       padding-top: 72px;
       overflow: hidden;
       border: 0;
       margin: 0;
   }

   .hero-bg {
       position: absolute;
       inset: 0;
       background:
           linear-gradient(180deg, rgba(18, 20, 24, .58) 0%, rgba(18, 20, 24, .42) 55%, rgba(18, 20, 24, .30) 100%),
           url("https://images.unsplash.com/photo-1647359287841-3486c05c28dd?auto=format&fit=crop&fm=jpg&ixlib=rb-4.1.0&q=70&w=2400");
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
       transform: translateZ(0);
   }

   .hero-inner {
       position: relative;
       width: 100%;
       min-height: calc(100vh - 72px);
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 64px 0;
   }

   .hero-copy {
       width: 100%;
       max-width: 980px;
       text-align: center;
       margin: 0 auto;
   }

   .hero-kicker {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       font-size: 12px;
       letter-spacing: .22em;
       text-transform: uppercase;
       color: rgba(255, 255, 255, .86);
       margin: 0 auto 14px;
   }

   .dot {
       width: 8px;
       height: 8px;
       border-radius: 99px;
       background: var(--honey);
       box-shadow: 0 0 0 6px rgba(200, 155, 26, .20);
       flex: 0 0 auto;
   }

   .hero h1 {
       color: #fff;
       font-size: 56px;
       line-height: 1.04;
       letter-spacing: -.02em;
       margin: 0 auto 14px;
       max-width: 22ch;
   }

   .hero p {
       color: rgba(255, 255, 255, .86);
       font-size: 16px;
       max-width: 72ch;
       margin: 0 auto 18px;
   }

   .hero-actions {
       display: flex;
       flex-wrap: wrap;
       gap: 12px;
       margin: 18px auto 0;
       justify-content: center;
       align-items: center;
   }

   .cta {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: 12px 16px;
       border-radius: 14px;
       font-weight: 900;
       font-size: 14px;
       background: linear-gradient(180deg, var(--wine-2), var(--wine));
       color: #fff;
       border: 1px solid rgba(0, 0, 0, .08);
       box-shadow: 0 12px 26px rgba(111, 12, 24, .22);
       white-space: nowrap;
   }

   .ghost {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: 12px 16px;
       border-radius: 14px;
       font-weight: 900;
       font-size: 14px;
       color: #fff;
       background: rgba(255, 255, 255, .10);
       border: 1px solid rgba(255, 255, 255, .22);
       white-space: nowrap;
   }

   .ghost:hover {
       background: rgba(255, 255, 255, .14);
   }

   /* =========================
   SECTIONS
========================= */
   section {
       padding: 76px 0;
       border-top: 1px solid var(--line);
       background: var(--bg);
   }

   section.hero {
       padding-top: 72px;
       padding-bottom: 0;
       border-top: 0;
       background: transparent;
   }

   .section-head {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 14px;
       margin-bottom: 22px;
       text-align: center;
   }

   .section-head h2 {
       font-size: 28px;
       letter-spacing: -.01em;
       line-height: 1.1;
   }

   .section-head p {
       color: var(--muted);
       max-width: 64ch;
       font-size: 14px;
       margin: 0 auto;
       text-align: center;
   }

   .divider {
       height: 10px;
       border-radius: 99px;
       background: linear-gradient(90deg,
               rgba(111, 12, 24, .00) 0%,
               rgba(111, 12, 24, .16) 30%,
               rgba(200, 155, 26, .18) 70%,
               rgba(200, 155, 26, .00) 100%);
       margin: 18px 0 0;
   }

   /* =========================
   PROGETTI: 3 CARDS
========================= */
   .cards {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 18px;
       margin-top: 18px;
   }

   .card {
       background: var(--paper);
       border: 1px solid rgba(232, 227, 218, .95);
       border-radius: var(--radius);
       overflow: hidden;
       box-shadow: 0 10px 26px rgba(18, 20, 24, .08);
       display: flex;
       flex-direction: column;
       min-height: 520px;
   }

   .card-top {
       display: flex;
       align-items: flex-start;
       gap: 12px;
       padding: 18px 18px 10px;
   }

   .icon {
       width: 40px;
       height: 40px;
       border-radius: 12px;
       background: rgba(111, 12, 24, .08);
       border: 1px solid rgba(111, 12, 24, .14);
       display: grid;
       place-items: center;
       flex: 0 0 auto;
       overflow: hidden;
   }

   .icon img {
       width: 22px;
       height: 22px;
       object-fit: contain;
   }

   .card-title {
       font-weight: 900;
       letter-spacing: .2px;
       line-height: 1.1;
       font-size: 22px;
   }

   .card-sub {
       color: var(--muted);
       font-size: 13px;
       margin-top: 4px;
   }

   .card-body {
       padding: 0 18px 8px;
       margin: 0;
       color: var(--muted);
       font-size: 14px;
   }

   .card-media {
       margin-top: 0;
       width: 100%;
       flex: 1 1 auto;
       overflow: hidden;
       background: transparent;
   }

   .card-media img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
       border: 0;
   }

   /* =========================
   CONTATTI (NO CARD)
========================= */
   #contatti .contact-head {
       text-align: center;
       max-width: 820px;
       margin: 0 auto 18px;
   }

   #contatti .contact-head h2 {
       font-size: 30px;
       letter-spacing: -.01em;
   }

   #contatti .contact-head p {
       color: var(--muted);
       font-size: 14px;
       margin-top: 10px;
   }

   #contatti .contact-form-wrap {
       max-width: 720px;
       /* ridotto */
       margin: 18px auto 0;
   }

   /* =========================
   CF7 STYLING (COME FOTO, MA PIU COMPATTO)
========================= */
   #contatti .contact-form-wrap .wpcf7 {
       width: 100%;
   }

   /* CF7 spesso wrappa in <p> */
   #contatti .contact-form-wrap .wpcf7 form,
   #contatti .contact-form-wrap .wpcf7 form p {
       margin: 0;
       padding: 0;
   }

   #contatti .contact-form-wrap .wpcf7 form {
       display: block;
   }

   /* Messaggi CF7 */
   #contatti .contact-form-wrap .wpcf7 .wpcf7-response-output {
       margin: 18px 0 0;
       padding: 14px 16px;
       border-radius: 14px;
       border: 1px solid rgba(18, 20, 24, .12);
       background: rgba(255, 255, 255, .6);
       color: var(--text);
       font-size: 14px;
   }

   /* Wrapper custom del tuo form CF7: <div class="form"> ... */
   #contatti .contact-form-wrap .form {
       display: grid;
       gap: 18px;
       /* ridotto */
       width: 100%;
   }

   /* Label */
   #contatti .contact-form-wrap .form label {
       display: block;
       font-size: 24px;
       /* ridotto */
       line-height: 1.1;
       letter-spacing: -.01em;
       font-weight: 700;
       color: var(--text);
   }

   /* Spazio tra label e campo */
   #contatti .contact-form-wrap .form label .wpcf7-form-control-wrap {
       display: block;
       margin-top: 10px;
       /* ridotto */
   }

   /* Campi */
   #contatti .contact-form-wrap .wpcf7 input[type="text"],
   #contatti .contact-form-wrap .wpcf7 input[type="email"],
   #contatti .contact-form-wrap .wpcf7 textarea {
       width: 100%;
       display: block;
       background: var(--form-field);
       border: 2px solid var(--form-border);
       border-radius: 12px;
       padding: 14px 14px;
       font-size: 16px;
       line-height: 1.25;
       color: var(--text);
       outline: none;
       box-shadow: none;
       -webkit-appearance: none;
       appearance: none;
   }

   #contatti .contact-form-wrap .wpcf7 input[type="text"],
   #contatti .contact-form-wrap .wpcf7 input[type="email"] {
       height: 56px;
       /* ridotto */
   }

   #contatti .contact-form-wrap .wpcf7 textarea {
       min-height: 220px;
       /* ridotto */
       resize: vertical;
       padding-top: 14px;
   }

   #contatti .contact-form-wrap .wpcf7 input::placeholder,
   #contatti .contact-form-wrap .wpcf7 textarea::placeholder {
       color: rgba(18, 20, 24, .35);
   }

   #contatti .contact-form-wrap .wpcf7 input[type="text"]:focus,
   #contatti .contact-form-wrap .wpcf7 input[type="email"]:focus,
   #contatti .contact-form-wrap .wpcf7 textarea:focus {
       border-color: var(--form-border-focus);
       box-shadow: 0 0 0 6px rgba(200, 155, 26, .18);
   }

   /* Errori CF7 */
   #contatti .contact-form-wrap .wpcf7-not-valid-tip {
       margin-top: 10px;
       font-size: 14px;
       color: rgba(143, 16, 32, .95);
   }

   #contatti .contact-form-wrap .wpcf7 input.wpcf7-not-valid,
   #contatti .contact-form-wrap .wpcf7 textarea.wpcf7-not-valid {
       border-color: rgba(143, 16, 32, .55);
       box-shadow: 0 0 0 6px rgba(143, 16, 32, .10);
   }

   /* Pulsante */
   #contatti .contact-form-wrap .wpcf7 input[type="submit"],
   #contatti .contact-form-wrap .wpcf7 button[type="submit"] {
       width: 100%;
       height: 62px;
       /* ridotto */
       border-radius: 12px;
       border: 0;
       background: var(--form-yellow);
       color: #fff;
       font-weight: 900;
       font-size: 20px;
       /* ridotto */
       letter-spacing: .01em;
       cursor: pointer;
       box-shadow: 0 12px 26px rgba(244, 180, 0, .22);
   }

   #contatti .contact-form-wrap .wpcf7 input[type="submit"]:hover,
   #contatti .contact-form-wrap .wpcf7 button[type="submit"]:hover {
       background: var(--form-yellow-2);
   }

   /* Spinner CF7 */
   #contatti .contact-form-wrap .wpcf7 .wpcf7-spinner {
       margin: 14px auto 0;
       display: block;
   }

   /* =========================
   FOOTER (CENTRATO)
========================= */
   footer {
       border-top: 1px solid var(--line);
       background: #f6f3ec;
       padding: 26px 0;
   }

   .foot {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 18px;
       flex-wrap: wrap;
       text-align: center;
       color: var(--muted);
       font-size: 13px;
   }

   .foot>div {
       width: 100%;
   }

   .foot a {
       color: var(--muted);
       text-decoration: underline;
       text-underline-offset: 3px;
   }

   /* =========================
   RESPONSIVE
========================= */
   @media (max-width: 980px) {
       .menu {
           display: none;
       }

       .hamburger {
           display: inline-flex;
           align-items: center;
           justify-content: center;
       }

       .hero-inner {
           padding: 52px 0 48px;
       }

       .hero h1 {
           font-size: 44px;
           max-width: none;
       }

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

       .card {
           min-height: auto;
       }

       .card-media {
           min-height: 240px;
       }

       .section-head {
           flex-direction: column;
           align-items: flex-start;
       }

       #contatti .contact-form-wrap {
           max-width: 720px;
       }

       #contatti .contact-form-wrap .form label {
           font-size: 22px;
       }

       #contatti .contact-form-wrap .wpcf7 input[type="submit"],
       #contatti .contact-form-wrap .wpcf7 button[type="submit"] {
           font-size: 18px;
       }
   }

   @media (max-width: 520px) {
       .nav {
           height: 68px;
           gap: 26px;
       }

       .brand img {
           height: 28px;
       }

       .menu a {
           font-size: 15px;
       }

       .hero {
           padding-top: 68px;
       }

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

       .hero h1 {
           font-size: 38px;
       }

       #contatti .contact-form-wrap .form {
           gap: 16px;
       }

       #contatti .contact-form-wrap .form label {
           font-size: 20px;
       }

       #contatti .contact-form-wrap .wpcf7 input[type="text"],
       #contatti .contact-form-wrap .wpcf7 input[type="email"] {
           height: 52px;
           font-size: 15px;
       }

       #contatti .contact-form-wrap .wpcf7 textarea {
           min-height: 200px;
           font-size: 15px;
       }

       #contatti .contact-form-wrap .wpcf7 input[type="submit"],
       #contatti .contact-form-wrap .wpcf7 button[type="submit"] {
           height: 60px;
           font-size: 18px;
       }
   }