: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 (come home) */
  --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 {
  background-color: red;
  position: fixed;
  width: 100%;
  height: 50px;
  display: flex;
  z-index: 1000;
}

.bannerino p {
  color: white;
  text-align: center;
  background-color: red;
  margin: auto;
  font-size: 60%;
}/* =========================
     NAVBAR (IDENTICA ALLA HOME)
  ========================= */

header {
  position: fixed;
  margin-top: 50px;
  /*bannerino*/
  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;
}

.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;
}

@media (max-width: 980px) {
  header {
      margin-top: 50px !important;
  }
}/* =========================
     HERO (60vh)
  ========================= */

.hero {
  min-height: 60vh;
  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://storage.googleapis.com/img_meltemi/SITI/societari/bombolead/contatti/hero.jpeg"); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateZ(0);
}

.hero-inner {
  position: relative;
  width: 100%;
  min-height: calc(60vh - 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 10px;
  max-width: 24ch;
}

.hero p {
  color: rgba(255, 255, 255, .86);
  font-size: 16px;
  max-width: 76ch;
  margin: 0 auto;
}/* =========================
     SECTIONS (COME HOME)
  ========================= */

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;
}

.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;
}/* =========================
     CONTATTI
  ========================= */

#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;
  margin: 18px auto 0;
}/* =========================
     CF7 STYLING (IDENTICO ALLA HOME)
  ========================= */

#contatti .contact-form-wrap .wpcf7 {
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

#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;
}

#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;
    width:100%;
  }

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

  #contatti .contact-form-wrap .form label .wpcf7-form-control-wrap{
    display:block;
    margin-top:10px;
  }

  #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;
  }

  #contatti .contact-form-wrap .wpcf7 textarea{
    min-height:220px;
    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);
  }

  #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);
  }

  #contatti .contact-form-wrap .wpcf7 input[type="submit"],
  #contatti .contact-form-wrap .wpcf7 button[type="submit"]{
    width:100%;
    height:62px;
    border-radius:12px;
    border:0;
    background:var(--form-yellow);
    color:#fff;
    font-weight:900;
    font-size:20px;
    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);
  }

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

  /* =========================
     FOOTER (CENTRATO COME HOME)
  ========================= */
  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 (COME HOME)
  ========================= */
  @media (max-width: 980px){
    .menu{ display:none; }
    .hamburger{ display:inline-flex; align-items:center; justify-content:center; }
    .hero h1{ font-size:44px; max-width:none; }
    .hero-inner{ padding:52px 0 48px; }

    #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; }

    .hero{ padding-top:68px; }
    section.hero{ padding-top:68px; }
    .hero-inner{ min-height:calc(60vh - 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;
    }
  }