[hidden] { display: none !important; }

  :root {
    --navy: #1a2e44;
    --navy-deep: #101c2b;
    --orange: #d35400;
    --ivory: #F7F4EF;
    --taupe: #7A736A;
    --white: #ffffff;
    --ink: #26323f;
    --line: #e3ddd3;
    --orange-text: #b84800;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ivory: #141a22; --white: #1c232c; --ink: #dfe3e8; --taupe: #98a0a8; --line: #2c3542; --orange-text: #e8691c;
    }
  }
  :root[data-theme="dark"] { --ivory: #141a22; --white: #1c232c; --ink: #dfe3e8; --taupe: #98a0a8; --line: #2c3542; --orange-text: #e8691c; }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-padding-top: env(safe-area-inset-top, 0px); scroll-behavior: smooth; }
  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--ivory);
    color: var(--ink);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

  /* ---------- HERO ---------- */
  .hero {
    background: var(--navy);
    color: var(--ivory);
    position: relative;
    overflow: hidden;
  }
  .hero-texture {
    position: absolute; inset: 0; opacity: 0.9; pointer-events: none; z-index: 1;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 94%);
    mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 94%);
  }
  .hero-photo-bleed {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 30%; height: 100%;
    display: flex; align-items: flex-end; justify-content: flex-end;
    z-index: 2;
  }
  .hero-photo-bleed img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
  .hero-photo-bleed::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, var(--navy) 0%, rgba(26,46,68,.92) 12%, rgba(26,46,68,.75) 26%, rgba(26,46,68,.55) 40%, rgba(26,46,68,.35) 54%, rgba(26,46,68,.18) 68%, rgba(26,46,68,.06) 80%, rgba(26,46,68,0) 92%, rgba(26,46,68,.3) 100%);
  }
  .hero .wrap {
    position: relative; z-index: 3;
    display: block;
    padding-top: calc(96px + env(safe-area-inset-top, 0px));
    padding-bottom: 96px;
    min-height: 680px;
  }
  .hero-copy { max-width: 560px; display: flex; flex-direction: column; justify-content: center; min-height: 480px; }
  .hero-eyebrow {
    font-size: 12.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: var(--orange); margin-bottom: 18px;
  }
  .hero-name {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: clamp(38px, 5.6vw, 60px);
    line-height: 1.04;
    color: #ffffff;
    letter-spacing: -0.01em;
  }
  .hero-rule { width: 64px; height: 1px; background: rgba(255,255,255,.4); margin: 22px 0; }
  .hero-payoff {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(22px, 2.8vw, 29px);
    color: #ffffff;
    line-height: 1.25;
  }
  .hero-role {
    margin-top: 24px;
    font-size: 17px;
    color: #c7d0da;
    line-height: 1.55;
    max-width: 42ch;
  }
  .hero-actions { margin-top: 32px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
  .btn {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 26px;
    border-radius: 3px;
    text-decoration: none;
    transition: transform .15s ease, background .15s ease;
    border: none;
    cursor: pointer;
  }
  .btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
  .btn-primary { background: var(--orange); color: #fff; }
  .btn-primary:hover { background: #b84800; transform: translateY(-1px); }
  .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
  .btn-ghost:hover { border-color: #fff; }
  .btn-ghost-dark { background: transparent; color: var(--navy); border: 1px solid rgba(26,46,68,.35); }
  .btn-ghost-dark:hover { border-color: var(--navy); }
  .link-cta {
    font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 15px; color: #fff;
    text-decoration: none;
  }
  .link-cta:hover { opacity: 0.8; }

  .hero-photo-wrap { position: relative; display: flex; justify-content: center; }
  .hero-photo-wrap img { width: 100%; max-width: 420px; height: auto; }

  /* ---------- SECTION SHARED ---------- */
  section { padding: 88px 0; }
  .eyebrow {
    font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--orange-text); margin-bottom: 14px;
  }
  h2 {
    font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(27px, 3.4vw, 36px);
    color: var(--navy); line-height: 1.15; max-width: 22ch;
  }
  @media (prefers-color-scheme: dark) { h2 { color: #eef1f4; } }
  [data-theme="dark"] h2 { color: #eef1f4; }

  /* ---------- CHI SONO ---------- */
  .chisono .grid {
    display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: start; margin-top: 12px;
  }
  .chisono-art {
    border-radius: 4px; overflow: hidden; background: var(--navy-deep);
    aspect-ratio: 3/4;
  }
  .chisono p { font-size: 16.5px; line-height: 1.68; margin-top: 18px; max-width: 62ch; color: var(--ink); }
  .chisono p:first-of-type { margin-top: 6px; }
  blockquote {
    margin: 26px 0; padding: 18px 24px; border-left: 3px solid var(--orange);
    font-family: 'Fraunces', serif; font-style: italic; font-size: 19px; color: var(--navy);
    line-height: 1.4; background: var(--white);
  }
  @media (prefers-color-scheme: dark) { blockquote { color: #eef1f4; } }
  [data-theme="dark"] blockquote { color: #eef1f4; }
  .facts { margin-top: 30px; display: flex; gap: 40px; flex-wrap: wrap; }
  .fact .fact-label { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--taupe); }
  .fact .fact-value { margin-top: 5px; font-size: 15px; color: var(--ink); font-weight: 500; }

  /* ---------- AREE / FORMATI (cards) ---------- */
  .aree { background: var(--white); }
  .aree-grid, .formati-grid {
    margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line);
  }
  .aree-card, .formato-card { padding: 28px 26px 4px 0; border-left: 1px solid var(--line); }
  .aree-card:first-child, .formato-card:first-child { border-left: none; padding-left: 0; }
  .aree-card:not(:first-child), .formato-card:not(:first-child) { padding-left: 28px; }
  .aree-icon { width: 30px; height: 30px; color: var(--orange); }
  .aree-card h3, .formato-card h3 {
    font-family: 'Fraunces', serif; font-weight: 600; font-size: 20px; color: var(--navy); margin-top: 16px;
  }
  @media (prefers-color-scheme: dark) { .aree-card h3, .formato-card h3 { color: #eef1f4; } }
  [data-theme="dark"] .aree-card h3, [data-theme="dark"] .formato-card h3 { color: #eef1f4; }
  .aree-card p, .formato-card p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--taupe); padding-bottom: 28px; }
  .formato-tag { font-family: 'Fraunces', serif; font-size: 14px; color: var(--orange-text); font-weight: 600; }

  .cta-strip {
    background: var(--ivory); border-top: 1px solid var(--line); padding: 40px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  }
  .cta-strip p { font-family: 'Fraunces', serif; font-size: 19px; color: var(--navy); font-weight: 600; }
  @media (prefers-color-scheme: dark) { .cta-strip p { color: #eef1f4; } }
  [data-theme="dark"] .cta-strip p { color: #eef1f4; }

  /* ---------- BIVIO BANNER ---------- */
  .bivio { background: var(--navy); color: #fff; text-align: center; }
  .bivio .eyebrow { color: var(--orange); }
  .bivio h2 { color: #fff; max-width: none; margin: 0 auto; }
  .bivio p.sub { margin: 20px auto 0; max-width: 52ch; color: #c7d0da; font-size: 16.5px; line-height: 1.6; }
  .bivio .hero-actions { justify-content: center; margin-top: 34px; }

  /* ---------- INTERVENTI ---------- */
  .interventi-list { margin-top: 40px; }
  .intervento {
    display: grid; grid-template-columns: 130px 1fr; gap: 26px; padding: 24px 0; border-top: 1px solid var(--line);
  }
  .interventi-list .intervento:last-child { border-bottom: 1px solid var(--line); }
  .intervento-meta { font-size: 13px; color: var(--taupe); padding-top: 3px; line-height: 1.5; }
  .intervento h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 18.5px; color: var(--navy); }
  @media (prefers-color-scheme: dark) { .intervento h3 { color: #eef1f4; } }
  [data-theme="dark"] .intervento h3 { color: #eef1f4; }
  .intervento p { margin-top: 7px; font-size: 14.5px; line-height: 1.6; color: var(--ink); max-width: 60ch; }

  /* ---------- SUL CAMPO (gallery) ---------- */
  .campo { background: var(--white); }
  .campo-slider {
    margin-top: 40px; display: flex; gap: 16px; overflow-x: auto; overflow-y: visible;
    scroll-snap-type: x proximity; padding-bottom: 10px; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: var(--taupe) transparent;
  }
  .campo-slider::-webkit-scrollbar { height: 6px; }
  .campo-slider::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
  .g-item {
    position: relative; flex: 0 0 auto; width: 230px; aspect-ratio: 4/3;
    overflow: hidden; border-radius: 3px; background: var(--navy-deep);
    scroll-snap-align: start; cursor: pointer; border: none; padding: 0;
  }
  .g-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
  .g-item:hover img { transform: scale(1.06); }
  .g-item:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
  .g-zoom {
    position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(16,28,43,.65); display: flex; align-items: center; justify-content: center;
    color: #fff; opacity: 0; transition: opacity .2s ease;
  }
  .g-item:hover .g-zoom, .g-item:focus-visible .g-zoom { opacity: 1; }
  .g-cap {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px;
    background: linear-gradient(to top, rgba(16,28,43,.88), transparent);
    color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3;
  }
  .campo-hint { margin-top: 12px; font-size: 13px; color: var(--taupe); }

  .lightbox {
    position: fixed; inset: 0; z-index: 100; background: rgba(10,16,24,.92);
    display: none; align-items: center; justify-content: center; padding: 24px;
  }
  .lightbox.open { display: flex; }
  .lightbox-inner { position: relative; max-width: min(90vw, 1000px); max-height: 86vh; }
  .lightbox-inner img { max-width: 100%; max-height: 86vh; display: block; border-radius: 2px; }
  .lightbox-cap { margin-top: 12px; color: #dfe3e8; font-size: 14px; text-align: center; }
  .lightbox-close, .lightbox-prev, .lightbox-next {
    position: absolute; background: rgba(255,255,255,.1); border: none; color: #fff;
    width: 42px; height: 42px; border-radius: 50%; cursor: pointer; font-size: 20px;
    display: flex; align-items: center; justify-content: center;
  }
  .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.2); }
  .lightbox-close { top: -50px; right: 0; }
  .lightbox-prev { left: -55px; top: 50%; transform: translateY(-50%); }
  .lightbox-next { right: -55px; top: 50%; transform: translateY(-50%); }
  @media (max-width: 820px) {
    .lightbox-prev { left: 4px; } .lightbox-next { right: 4px; } .lightbox-close { top: -44px; }
  }

  /* ---------- CONTATTI ---------- */
  .contatti { background: var(--navy); color: var(--ivory); text-align: center; }
  .contatti .eyebrow, .bivio .eyebrow { color: var(--orange); }
  .contatti h2 { color: #fff; max-width: none; margin: 0 auto; }
  .contatti-sub { margin: 18px auto 0; font-size: 16.5px; color: #c7d0da; max-width: 46ch; line-height: 1.6; }
  .contatti .hero-actions { justify-content: center; margin-top: 32px; }
  .contatti-email { margin-top: 18px; font-size: 14px; color: #9fabb8; }
  .contatti-email a { text-decoration: underline; }

  footer {
    background: var(--navy-deep); color: #8a97a6; font-size: 13px; text-align: center; padding: 26px 0;
    padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  }


  .chisono-art img { width: 100%; height: 100%; object-fit: cover; object-position: 80% center; display: none; }
  .chisono-art.has-photo img { display: block; }
  .chisono-art.has-photo svg { display: none; }
  .fmeta { margin-top: 4px; padding-bottom: 28px; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
  .fmeta div { margin-top: 9px; }
  .fmeta dt { display: inline; font-weight: 700; color: var(--navy); }
  .fmeta dd { display: inline; margin: 0; }
  @media (prefers-color-scheme: dark) { .fmeta dt { color: #eef1f4; } }
  [data-theme="dark"] .fmeta dt { color: #eef1f4; }
  .interventi-intro { margin-top: 14px; max-width: 60ch; font-size: 16.5px; line-height: 1.65; color: var(--ink); }
  .contact-form { max-width: 520px; margin: 34px auto 0; text-align: left; display: grid; gap: 14px; }
  .contact-form label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .5px; color: #c7d0da; margin-bottom: 6px; }
  .contact-form input, .contact-form textarea {
    width: 100%; font: inherit; font-size: 15.5px; color: #fff; background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.22); border-radius: 3px; padding: 12px 14px;
  }
  .contact-form textarea { min-height: 116px; resize: vertical; }
  .contact-form input::placeholder, .contact-form textarea::placeholder { color: #8fa0b2; }
  .contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
  .form-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 6px; }
  .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
  .btn-ghost:hover { background: rgba(255,255,255,.08); }
  .form-note { font-size: 13px; color: #9fabb8; line-height: 1.5; }

  @media (max-width: 820px) {
    .hero-photo-bleed { position: relative; width: 100%; height: 340px; }
    .hero-photo-bleed::before { background: linear-gradient(180deg, var(--navy) 0%, rgba(26,46,68,0) 24%, rgba(26,46,68,0) 52%, var(--navy) 100%); }
    .hero .wrap { padding-top: calc(32px + env(safe-area-inset-top,0px)); min-height: unset; padding-bottom: 48px; }
    .hero-copy { max-width: none; min-height: unset; margin-top: 24px; }
    section { padding: 60px 0; }
    .chisono .grid { grid-template-columns: 1fr; }
    .chisono-art { max-width: 220px; }
    .aree-grid, .formati-grid { grid-template-columns: 1fr; }
    .aree-card, .formato-card { border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--line); padding-top: 24px; }
    .aree-card:first-child, .formato-card:first-child { border-top: none; }
    .intervento { grid-template-columns: 1fr; gap: 6px; }
    .cta-strip { flex-direction: column; align-items: flex-start; }
  }

  /* ---------- LAYOUT DINAMICO FASCE ---------- */
  .hero { isolation: isolate; }

  /* Chi sono: taglio diagonale, foto inclinata con blocco arancio, citazione tipografica */
  .chisono { position: relative; background: var(--ivory); margin-top: -36px; padding-top: 124px; clip-path: polygon(0 36px, 100% 0, 100% 100%, 0 100%); }
  .chisono .chisono-art { transform: rotate(-2.2deg); box-shadow: 14px 14px 0 0 var(--orange); margin-top: 10px; }
  .chisono blockquote {
    position: relative; margin: 34px 0 34px; padding: 6px 0 6px 0; border-left: none; background: transparent;
    font-size: clamp(22px, 2.7vw, 29px); line-height: 1.3; max-width: 28ch;
  }
  .chisono blockquote::before { content: ""; display: block; width: 52px; height: 3px; background: var(--orange); margin-bottom: 18px; }
  .chisono .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 26px; }
  .chisono .fact { border-top: 2px solid var(--orange); padding-top: 12px; }

  /* Aree: a gradini, come una scala di decisioni */
  .aree .aree-grid { border-top: none; gap: 22px; align-items: start; margin-top: 48px; padding-bottom: 8px; }
  .aree .aree-grid .aree-card {
    border-left: none; border-top: 3px solid var(--orange); background: var(--ivory);
    padding: 26px 24px 4px; position: relative;
  }
  .aree .aree-grid .aree-card:nth-child(2) { margin-top: 44px; }
  .aree .aree-grid .aree-card:nth-child(3) { margin-top: 88px; }
  .aree .aree-card p { padding-bottom: 26px; }
  .aree .aree-grid .aree-card { border-radius: 0 0 16px 16px; }
  .formati .formati-grid .formato-card { border-radius: 16px; overflow: hidden; }
  .chisono .chisono-art { border-radius: 10px; }
  .campo .g-item { border-radius: 6px !important; }
  .aree .cta-strip { margin-top: 36px; padding: 34px 40px; border: none; border-radius: 18px; gap: 20px 32px; }
  .aree .cta-strip .btn { border-radius: 10px; padding: 14px 28px; }

  /* Formati: la barra mostra quanto "dura" ogni formato */
  .formati .formati-grid { border-top: none; gap: 22px; align-items: stretch; margin-top: 44px; }
  .formati .formati-grid .formato-card {
    border-left: none; background: var(--white); padding: 28px 26px 4px; border-bottom: 3px solid var(--navy);
  }
  .formati .formato-card .dur { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
  .formati .formato-card .dur-bar { flex: 1; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
  .formati .formato-card .dur-bar i { display: block; height: 100%; background: var(--orange); border-radius: 4px; }
  .formati .formato-card .dur-l { font-size: 12.5px; font-weight: 700; color: var(--taupe); white-space: nowrap; }
  .formati .formato-card h3 { margin-top: 10px; }

  /* Bivio: fascia inclinata, scura, con il percorso che si biforca */
  .bivio {
    position: relative; background: var(--navy-deep); margin: -40px 0; z-index: 1; overflow: hidden;
    padding: 150px 0 310px; clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 40px), 0 100%);
  }
  .bivio .wrap { position: relative; z-index: 2; }
  .bivio .fork { position: absolute; left: 0; bottom: 36px; width: 100%; height: 240px; z-index: 1; pointer-events: none; }
  .bivio .fork path { vector-effect: non-scaling-stroke; }
  .bivio .fork.armed path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .bivio .fork.armed.in path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.4,.1,.2,1); }
  .bivio .fork.armed.in path:nth-child(2), .bivio .fork.armed.in path:nth-child(3) { transition-delay: .7s; }
  .bivio .fork.armed circle { opacity: 0; }
  .bivio .fork.armed.in circle { opacity: 1; transition: opacity .5s ease 2.2s; }

  /* Interventi: timeline, titolo che resta fermo a sinistra */
  .interventi { padding-top: 130px; }
  .int-layout { display: grid; grid-template-columns: 320px 1fr; gap: 72px; align-items: start; }
  .int-head { position: sticky; top: 40px; }
  .int-head .interventi-intro { margin-top: 18px; }
  .interventi .interventi-list { margin-top: 6px; position: relative; }
  .interventi .interventi-list::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 0; width: 2px;
    background: linear-gradient(180deg, var(--orange), var(--line) 85%);
  }
  .interventi .interventi-list .intervento,
  .interventi .interventi-list .intervento:last-child { display: block; border: none; padding: 0 0 40px 34px; position: relative; }
  .interventi .interventi-list .intervento:last-child { padding-bottom: 0; }
  .interventi .intervento::before {
    content: ""; position: absolute; left: -5px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--ivory); border: 2px solid var(--orange);
  }
  .interventi .intervento:first-child::before { background: var(--orange); }
  .interventi .intervento-meta { padding: 0; margin-bottom: 8px; font-size: 13.5px; }
  .interventi .intervento-meta b { color: var(--orange-text); font-weight: 700; font-size: 14px; }
  .interventi .intervento h3 { font-size: 20px; line-height: 1.3; }

  /* Sul campo: foto sparse, come appoggiate su un tavolo */
  .campo .campo-slider { padding: 30px 18px 38px; gap: 26px; align-items: flex-start; margin-top: 24px; }
  .campo .g-item {
    width: 270px; border: 9px solid #f7f4ef; border-radius: 2px; box-shadow: 0 12px 26px rgba(16,28,43,.22);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .campo .g-item:nth-child(odd) { transform: rotate(-2.2deg) translateY(10px); }
  .campo .g-item:nth-child(even) { transform: rotate(1.8deg) translateY(-8px); width: 240px; }
  .campo .g-item:nth-child(3n+1) { width: 300px; }
  .campo .g-item:hover, .campo .g-item:focus-visible { transform: rotate(0deg) translateY(-4px); box-shadow: 0 18px 34px rgba(16,28,43,.3); }

  /* Contatti: cerchi concentrici, le decisioni che si propagano */
  .contatti { position: relative; overflow: hidden; margin-top: -40px; padding-top: 136px; clip-path: polygon(0 0, 100% 40px, 100% 100%, 0 100%); }
  .contatti::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-radial-gradient(circle at 0% 100%, transparent 0 46px, rgba(211,84,0,.3) 46px 47px);
    -webkit-mask-image: radial-gradient(circle at 0% 100%, #000 0, transparent 62%);
    mask-image: radial-gradient(circle at 0% 100%, #000 0, transparent 62%);
  }
  .contatti .wrap { position: relative; z-index: 1; }
  .campo { padding-bottom: 120px; }

  @media (max-width: 820px) {
    .chisono { margin-top: -24px; padding-top: 84px; clip-path: polygon(0 24px, 100% 0, 100% 100%, 0 100%); }
    .chisono .chisono-art { box-shadow: 10px 10px 0 0 var(--orange); }
    .chisono .facts { grid-template-columns: 1fr; }
    .aree .cta-strip { padding: 26px 24px; border-radius: 16px; }
    .aree .aree-grid .aree-card, .aree .aree-grid .aree-card:nth-child(2), .aree .aree-grid .aree-card:nth-child(3) {
      margin-top: 0; padding: 24px 22px 4px !important; border-top: 3px solid var(--orange) !important;
    }
    .aree .aree-grid .aree-card:nth-child(2) { margin-left: 18px; }
    .aree .aree-grid .aree-card:nth-child(3) { margin-left: 36px; }
    .formati .formati-grid .formato-card, .formati .formati-grid .formato-card:not(:first-child) { padding: 24px 22px 4px !important; border-top: none !important; }
    .bivio { padding: 110px 0 230px; margin: -28px 0; clip-path: polygon(0 28px, 100% 0, 100% calc(100% - 28px), 0 100%); }
    .bivio .fork { height: 150px; bottom: 28px; }
    .int-layout { grid-template-columns: 1fr; gap: 28px; }
    .int-head { position: static; }
    .interventi { padding-top: 90px; }
    .campo .g-item, .campo .g-item:nth-child(even), .campo .g-item:nth-child(3n+1) { width: 230px; }
    .contatti { margin-top: -28px; padding-top: 96px; clip-path: polygon(0 0, 100% 28px, 100% 100%, 0 100%); }
    .campo { padding-bottom: 90px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .bivio .fork.armed path { stroke-dasharray: none; stroke-dashoffset: 0; }
    .bivio .fork.armed circle { opacity: 1; }
  }

  /* ---------- COLORE E PROFONDITA DELLE FASCE ---------- */
  :root { --sand: #efe4d3; --fog: #e3ebf3; --peach: #f9e3cf; --dot: rgba(26,46,68,.24); --aree-a: #d6e3f0; --aree-b: rgba(211,84,0,.2); --glow: rgba(255,255,255,.5); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sand: #1c2530; --fog: #16212c; --peach: #271f19; --dot: rgba(255,255,255,.12); --aree-a: #1c2b3b; --aree-b: rgba(211,84,0,.14); --glow: rgba(255,255,255,.05); } }
  :root[data-theme="dark"] { --sand: #1c2530; --fog: #16212c; --peach: #271f19; --dot: rgba(255,255,255,.12); --aree-a: #1c2b3b; --aree-b: rgba(211,84,0,.14); --glow: rgba(255,255,255,.05); }

  .chisono, .aree, .formati, .interventi, .campo { position: relative; }
  .chisono::before, .aree::before, .interventi::before, .interventi::after, .campo::before, .bivio::before, .contatti::after { content: ""; position: absolute; pointer-events: none; }
  .chisono .wrap, .aree .wrap, .formati .wrap, .interventi .wrap, .campo .wrap { position: relative; z-index: 1; }

  /* Chi sono: luce calda in alto a destra, sfumatura verso sabbia, curve di livello leggere */
  .chisono {
    background:
      radial-gradient(900px 560px at 92% 4%, var(--peach), transparent 70%),
      linear-gradient(180deg, var(--ivory) 0%, var(--sand) 100%);
  }
  .chisono { overflow: clip; }
  .chisono::before { left: -140px; bottom: -80px; width: 760px; height: 760px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%23d35400' stroke-width='1.1'%3E%3Cdefs%3E%3Cpath id='p' d='M60 300C60 160 200 70 330 90S560 200 540 330S400 540 260 520S60 440 60 300Z'/%3E%3C/defs%3E%3Cuse href='%23p' transform='translate(300 300) scale(1) translate(-300 -300)'/%3E%3Cuse href='%23p' transform='translate(300 300) scale(0.84) translate(-300 -300)'/%3E%3Cuse href='%23p' transform='translate(300 300) scale(0.69) translate(-300 -300)'/%3E%3Cuse href='%23p' transform='translate(300 300) scale(0.55) translate(-300 -300)'/%3E%3Cuse href='%23p' transform='translate(300 300) scale(0.42) translate(-300 -300)'/%3E%3Cuse href='%23p' transform='translate(300 300) scale(0.3) translate(-300 -300)'/%3E%3Cuse href='%23p' transform='translate(300 300) scale(0.19) translate(-300 -300)'/%3E%3C/svg%3E") center/contain no-repeat; opacity: .22; }

  /* Aree: aria fredda, bagliore arancio in basso, trama a punti che sfuma */
  .aree {
    background:
      radial-gradient(900px 560px at 0% 0%, var(--aree-a), transparent 70%),
      radial-gradient(820px 500px at 100% 100%, var(--aree-b), transparent 70%),
      var(--white);
  }
  .aree::before { inset: 0; background-image: radial-gradient(var(--dot) 1.2px, transparent 1.7px); background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(640px 420px at 100% 0%, #000, transparent 72%); mask-image: radial-gradient(640px 420px at 100% 0%, #000, transparent 72%); }
  .aree .aree-grid .aree-card { background: var(--ivory); box-shadow: 0 8px 22px rgba(16,28,43,.06); }

  /* Formati: diagonale sabbia, due aloni di colore */
  .formati {
    background:
      radial-gradient(640px 420px at 0% 100%, rgba(211,84,0,.15), transparent 70%),
      radial-gradient(760px 520px at 100% 0%, var(--fog), transparent 72%),
      linear-gradient(160deg, var(--ivory) 0%, var(--sand) 100%);
  }
  .formati .formati-grid .formato-card { box-shadow: 0 10px 26px rgba(16,28,43,.08); }

  /* Bivio: cielo notturno, alba arancio dietro la biforcazione */
  .bivio {
    background:
      radial-gradient(960px 460px at 50% -8%, rgba(47,85,120,.62), transparent 70%),
      radial-gradient(760px 380px at 50% 104%, rgba(232,120,42,.34), transparent 70%),
      linear-gradient(180deg, #0f1b2a 0%, #15283d 55%, #101c2b 100%);
  }
  .bivio::before { inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' fill='white'%3E%3Ccircle cx='20' cy='30' r='1.2' opacity='.55'/%3E%3Ccircle cx='90' cy='70' r='0.8' opacity='.55'/%3E%3Ccircle cx='150' cy='20' r='1.4' opacity='.55'/%3E%3Ccircle cx='210' cy='110' r='0.9' opacity='.55'/%3E%3Ccircle cx='280' cy='50' r='1.1' opacity='.55'/%3E%3Ccircle cx='340' cy='130' r='0.8' opacity='.55'/%3E%3Ccircle cx='60' cy='150' r='1' opacity='.55'/%3E%3Ccircle cx='120' cy='210' r='1.3' opacity='.55'/%3E%3Ccircle cx='200' cy='250' r='0.8' opacity='.55'/%3E%3Ccircle cx='300' cy='220' r='1.1' opacity='.55'/%3E%3Ccircle cx='370' cy='270' r='0.9' opacity='.55'/%3E%3Ccircle cx='30' cy='260' r='0.8' opacity='.55'/%3E%3Ccircle cx='250' cy='170' r='0.7' opacity='.55'/%3E%3Ccircle cx='170' cy='150' r='0.7' opacity='.55'/%3E%3Ccircle cx='330' cy='20' r='0.8' opacity='.55'/%3E%3Ccircle cx='380' cy='80' r='1' opacity='.55'/%3E%3C/svg%3E") 0 0/400px 300px repeat; opacity: .5;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%); mask-image: linear-gradient(180deg, #000 0%, transparent 75%); }

  /* Interventi: nebbia azzurra e, sullo sfondo, una tua foto d'aula molto sfocata */
  .interventi { overflow: clip; background: linear-gradient(180deg, var(--ivory) 0%, var(--fog) 55%, var(--ivory) 100%); }
  .interventi::before { top: 6%; right: -6%; bottom: -4%; width: 58%; background: var(--bg-photo, none) center/cover no-repeat; filter: blur(30px) saturate(.9); opacity: .2;
    -webkit-mask-image: radial-gradient(closest-side at 70% 62%, #000, transparent 100%); mask-image: radial-gradient(closest-side at 70% 62%, #000, transparent 100%); }
  .interventi::after { left: -10%; bottom: -8%; width: 560px; height: 420px; background: radial-gradient(closest-side, rgba(211,84,0,.12), transparent); }

  /* Sul campo: un tavolo caldo, luce al centro, grana di carta */
  .campo { overflow: clip; background: radial-gradient(900px 380px at 50% 52%, var(--glow), transparent 72%), linear-gradient(180deg, var(--sand) 0%, var(--peach) 100%); }
  .campo::before { inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .15 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat; opacity: .32; mix-blend-mode: multiply; }
  /* Contatti: notte blu con bagliore arancio, foto d'aula appena percepibile, cerchi concentrici */
  .contatti {
    background:
      radial-gradient(980px 560px at 92% 0%, rgba(47,85,120,.62), transparent 70%),
      radial-gradient(860px 520px at 8% 106%, rgba(232,120,42,.26), transparent 65%),
      linear-gradient(180deg, #1a2e44 0%, #11202f 100%);
  }
  .contatti::after { inset: 0; background: var(--bg-photo2, none) center/cover no-repeat; filter: blur(12px) saturate(.7); opacity: .12; mix-blend-mode: screen;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%); mask-image: linear-gradient(180deg, transparent 0%, #000 60%); }
  .contatti .wrap { z-index: 2; }
  footer { background: linear-gradient(180deg, #101c2b, #0b1520); }


  /* ---------- RIDISEGNO: composizioni, non solo colore ---------- */
  h2 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.08; letter-spacing: -.015em; max-width: 20ch; }
  .int-head h2 { font-size: clamp(30px, 3.2vw, 40px); }

  /* Chi sono: foto grande, poi una citazione a tutta larghezza, poi il lavoro */
  @media (min-width: 821px) { .chisono .grid { grid-template-columns: 330px 1fr; gap: 64px; } }
  .chisono .quote-band {
    position: relative; margin-top: 76px; padding: 88px 0 96px; overflow: hidden; z-index: 1;
    background:
      radial-gradient(820px 440px at 88% 0%, rgba(47,85,120,.62), transparent 70%),
      radial-gradient(620px 400px at 0% 112%, rgba(232,120,42,.3), transparent 70%),
      linear-gradient(160deg, #172b42, #0f1b2a);
  }
  .chisono .quote-band::before { content: ""; position: absolute; right: -140px; top: -110px; width: 760px; height: 760px; left: auto; bottom: auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%23d35400' stroke-width='1.1'%3E%3Cdefs%3E%3Cpath id='p' d='M60 300C60 160 200 70 330 90S560 200 540 330S400 540 260 520S60 440 60 300Z'/%3E%3C/defs%3E%3Cuse href='%23p' transform='translate(300 300) scale(1) translate(-300 -300)'/%3E%3Cuse href='%23p' transform='translate(300 300) scale(0.84) translate(-300 -300)'/%3E%3Cuse href='%23p' transform='translate(300 300) scale(0.69) translate(-300 -300)'/%3E%3Cuse href='%23p' transform='translate(300 300) scale(0.55) translate(-300 -300)'/%3E%3Cuse href='%23p' transform='translate(300 300) scale(0.42) translate(-300 -300)'/%3E%3Cuse href='%23p' transform='translate(300 300) scale(0.3) translate(-300 -300)'/%3E%3Cuse href='%23p' transform='translate(300 300) scale(0.19) translate(-300 -300)'/%3E%3C/svg%3E") center/contain no-repeat; opacity: .3; }
  .chisono .quote-band blockquote {
    position: relative; margin: 0; padding: 0; max-width: none; border: none; background: none; color: #fff;
    font-size: clamp(30px, 5.4vw, 64px); line-height: 1.1; letter-spacing: -.012em;
  }
  .chisono .quote-band blockquote::before { content: ""; display: block; width: 72px; height: 4px; background: var(--orange); margin: 0 0 30px; }
  .chisono .quote-band blockquote span { display: block; }
  .chisono .quote-band blockquote span + span { color: #f4a46a; }
  .chisono .chi-bottom { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px 72px; align-items: start; margin-top: 72px; }
  .chisono .chi-bottom p { margin-top: 0; max-width: 56ch; font-size: 17.5px; }
  .chisono .chi-bottom .facts { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 0; }
  .chisono .chi-bottom .fact { max-width: none; }

  /* Aree: tre cerchi che si sovrappongono. Il centro e' il punto del lavoro */
  .aree {
    color: #e9eef3;
    background:
      radial-gradient(900px 620px at 78% 34%, rgba(47,85,120,.6), transparent 70%),
      radial-gradient(720px 520px at 4% 100%, rgba(232,120,42,.18), transparent 70%),
      linear-gradient(180deg, #0f1b2a 0%, #14273c 100%);
    --dot: rgba(255,255,255,.1);
  }
  .aree .eyebrow { color: var(--orange); }
  .aree h2 { color: #fff; }
  .aree .interventi-intro { color: #c7d0da; }
  .aree-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 72px; align-items: start;
    grid-template-areas: "t v" "p v";
  }
  .aree-text { grid-area: t; }
  .venn-wrap { grid-area: v; align-self: center; }
  .venn-panels { grid-area: p; align-self: start; margin-top: 8px; padding-left: 26px; border-left: 3px solid var(--orange); min-height: 220px; }
  .venn { display: block; width: 100%; height: auto; max-width: 560px; margin: 0 auto; overflow: visible; }
  .vc { cursor: pointer; outline: none; transition: opacity .3s ease; }
  .vc circle { mix-blend-mode: screen; stroke-width: 1.5; transition: transform .4s ease, fill-opacity .3s ease; transform-box: fill-box; transform-origin: center; }
  .vc text, .vc-center text { font-family: 'Fraunces', serif; font-weight: 600; font-size: 22px; fill: #fff; text-anchor: middle; pointer-events: none; }
  .vc[data-k="c"] text { fill: #fff; }
  .vc-center text { font-size: 15px; font-weight: 500; font-style: italic; fill: #fff; }
  .vc:focus-visible circle { stroke: #fff; stroke-width: 3; }
  .venn[data-active] .vc circle { opacity: .55; }
  .venn[data-active="a"] .vc[data-k="a"] circle, .venn[data-active="b"] .vc[data-k="b"] circle, .venn[data-active="c"] .vc[data-k="c"] circle { opacity: 1; }
  .venn[data-active="a"] .vc[data-k="a"] circle, .venn[data-active="b"] .vc[data-k="b"] circle { fill-opacity: .82; transform: scale(1.035); }
  .venn[data-active="c"] .vc[data-k="c"] circle { fill-opacity: .62; transform: scale(1.035); }
  .venn-hint { text-align: center; margin-top: 8px; font-size: 13px; color: #9fabb8; }
  .venn-panel .aree-icon { width: 34px; height: 34px; color: var(--orange); }
  .venn-panel h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 27px; color: #fff; margin-top: 14px; line-height: 1.2; }
  .venn-panel p { margin-top: 10px; font-size: 16.5px; line-height: 1.65; color: #c7d0da; max-width: 50ch; padding: 0; }
  .js-venn .venn-panel { display: none; }
  .js-venn .venn-panel.is-active { display: block; animation: panelIn .35s ease; }
  .venn-panel + .venn-panel { margin-top: 28px; }
  .js-venn .venn-panel + .venn-panel { margin-top: 0; }
  @keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .aree .cta-strip { margin-top: 64px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
  .aree .cta-strip p { color: #fff; }
  .aree .cta-strip:hover { box-shadow: 0 10px 30px rgba(0,0,0,.3); }

  /* Formati: una scala che sale, dal breve al lungo */
  .formati .formati-grid { align-items: end; }
    .formati .formati-grid .formato-card:nth-child(3) {
    color: #fff; border-bottom-color: var(--orange);
    background: radial-gradient(420px 300px at 100% 0%, rgba(47,85,120,.7), transparent 70%), linear-gradient(165deg, #1d3652, #101c2b);
    box-shadow: 0 22px 44px rgba(16,28,43,.28);
  }
  .formati .formato-card:nth-child(3) h3, .formati .formato-card:nth-child(3) .fmeta dt { color: #fff; }
  .formati .formato-card:nth-child(3) p { color: #c7d0da; }
  .formati .formato-card:nth-child(3) .fmeta, .formati .formato-card:nth-child(3) .fmeta dd { color: #dbe3ea; }
  .formati .formato-card:nth-child(3) .formato-tag { color: #f4a46a; }
  .formati .formato-card:nth-child(3) .dur-bar { background: rgba(255,255,255,.2); }
  .formati .formato-card:nth-child(3) .dur-l { color: #c7d0da; }

  /* Interventi: gli anni come ancora visiva */
  .interventi .interventi-list .intervento > div, .interventi .interventi-list .intervento .intervento-meta { position: relative; z-index: 1; }
  .interventi .intervento .yr {
    position: absolute; right: 0; top: -22px; z-index: 0; pointer-events: none;
    font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(64px, 8.5vw, 112px); line-height: 1; letter-spacing: -.02em;
    color: transparent; -webkit-text-stroke: 1.2px rgba(26,46,68,.14);
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .interventi .intervento .yr { -webkit-text-stroke-color: rgba(255,255,255,.16); } }
  :root[data-theme="dark"] .interventi .intervento .yr { -webkit-text-stroke-color: rgba(255,255,255,.16); }

  .formati .formati-grid .formato-card { display: flex; flex-direction: column; }
  .formati .formati-grid .formato-card:nth-child(1) { min-height: 500px; }
  .formati .formati-grid .formato-card:nth-child(2) { min-height: 590px; }
  .formati .formati-grid .formato-card:nth-child(3) { min-height: 680px; }
  .formati .formato-card .dur-big { margin-bottom: auto; padding-bottom: 26px; display: flex; align-items: baseline; gap: 10px; }
  .formati .formato-card .dur-big .n { font-family: 'Fraunces', serif; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--orange); }
  .formati .formato-card .dur-big .u { font-size: 15px; font-weight: 700; color: var(--taupe); }
  .formati .formato-card:nth-child(1) .dur-big .n { font-size: 56px; }
  .formati .formato-card:nth-child(2) .dur-big .n { font-size: 84px; }
  .formati .formato-card:nth-child(3) .dur-big .n { font-size: 116px; color: #f4a46a; }
  .formati .formato-card:nth-child(3) .dur-big .u { color: #c7d0da; }
  .formati .formato-card .dur-l { display: none; }
  .formati .formato-card .dur { margin-bottom: 18px; }

  @media (max-width: 820px) {
    .chisono .quote-band { margin-top: 52px; padding: 60px 0 66px; }
    .chisono .chi-bottom { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; }
    .aree-layout { grid-template-columns: 1fr; grid-template-areas: "t" "v" "p"; gap: 28px; }
    .venn-panels { min-height: 0; margin-top: 0; }
    .formati .formati-grid .formato-card:nth-child(n) { padding-top: 26px !important; min-height: 0 !important; }
    .formati .formato-card .dur-big { margin-bottom: 0; }
    .formati .formato-card .dur-big .n { font-size: 56px !important; }
    .interventi .intervento .yr { font-size: 64px; top: -10px; }
  }

  /* ---------- INTERAZIONI DISCRETE ---------- */
  .aree .aree-grid .aree-card, .formati .formati-grid .formato-card, .aree .cta-strip {
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  }
  .aree .aree-icon { transition: transform .35s cubic-bezier(.3,1.4,.5,1); transform-origin: 50% 50%; }
  .formati .formato-card .dur-bar i { transform-origin: left center; }
  .interventi .intervento::before { transition: transform .25s ease, background .25s ease; }
  .interventi .intervento > div:last-child { transition: transform .25s ease; }
  .interventi .intervento h3 { transition: color .25s ease; }
  .chisono .chisono-art { transition: transform .35s ease, box-shadow .35s ease; }
  .contact-form input, .contact-form textarea { transition: border-color .2s ease, background .2s ease; }
  .contact-form input:focus, .contact-form textarea:focus { border-color: var(--orange); background: rgba(255,255,255,.1); }
  .btn:active { transform: translateY(0) scale(.98); }
  @keyframes durgrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  @media (hover: hover) and (pointer: fine) {
    .aree .aree-grid .aree-card:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(16,28,43,.12); }
    .aree .aree-card:hover .aree-icon { transform: scale(1.18) rotate(-6deg); }
    .formati .formati-grid .formato-card:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(16,28,43,.12); border-bottom-color: var(--orange); }
    .formati .formato-card:hover .dur-bar i { animation: durgrow .9s cubic-bezier(.3,.7,.2,1); }
    .aree .cta-strip:hover { box-shadow: 0 10px 24px rgba(16,28,43,.1); }
    .interventi .intervento:hover::before { background: var(--orange); transform: scale(1.3); }
    .interventi .intervento:hover > div:last-child { transform: translateX(4px); }
    .interventi .intervento:hover h3 { color: var(--orange-text); }
    .chisono .chisono-art:hover { transform: rotate(-0.8deg); box-shadow: 18px 18px 0 0 var(--orange); }
  }
  @media (prefers-reduced-motion: reduce) {
    .formati .formato-card:hover .dur-bar i { animation: none !important; }
    .aree .aree-grid .aree-card:hover, .formati .formati-grid .formato-card:hover, .aree .aree-card:hover .aree-icon,
    .interventi .intervento:hover > div:last-child, .chisono .chisono-art:hover { transform: none !important; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

  /* ======= v30 - LA MAPPA: niente fasce, un unico foglio con un percorso che lo attraversa ======= */
  :root { --hd: #1a2e44; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hd: #eef1f4; } }
  :root[data-theme="dark"] { --hd: #eef1f4; }

  .mappa { position: relative; overflow-x: clip; padding-top: 24px;
    background:
      radial-gradient(900px 620px at 96% 1%, var(--peach), transparent 70%),
      radial-gradient(820px 600px at 0% 15%, var(--fog), transparent 70%),
      radial-gradient(900px 600px at 100% 40%, var(--sand), transparent 70%),
      radial-gradient(820px 560px at 0% 58%, var(--peach), transparent 70%),
      radial-gradient(900px 600px at 100% 76%, var(--fog), transparent 70%),
      radial-gradient(820px 520px at 0% 94%, var(--sand), transparent 70%),
      var(--ivory); }
  .mappa::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='360' fill='none' stroke='%23d35400' stroke-width='1' opacity='.16'%3E%3Cpath d='M-10 40C80 0 160 90 260 50S440 10 520 60 620 40 660 30'/%3E%3Cpath d='M-10 80C90 40 170 130 270 90S450 50 530 100 630 80 660 70'/%3E%3Cpath d='M-10 120C100 80 180 170 280 130S460 90 540 140 640 120 660 110'/%3E%3Cpath d='M-10 230C70 200 150 270 250 240S430 200 510 250 610 230 660 220'/%3E%3Cpath d='M-10 270C80 240 160 310 260 280S440 240 520 290 620 270 660 260'/%3E%3Cpath d='M-10 310C90 280 170 350 270 320S450 280 530 330 630 310 660 300'/%3E%3C/svg%3E") 0 0/640px 360px repeat; }
  .mappa > section { position: relative; z-index: 1; background: none !important; clip-path: none !important; margin: 0; overflow: visible; }
  .mappa > section::before, .mappa > section::after { display: none; }

  /* il percorso */
  .trail { position: absolute; left: 0; top: 0; width: 100%; z-index: 2; pointer-events: none; overflow: visible; }
  .trail path { fill: none; stroke: var(--orange); stroke-linecap: round; }
  .t-base { stroke-width: 2.2; stroke-dasharray: 1 11; opacity: .45; }
  .t-draw { stroke-width: 3.2; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(211,84,0,.35)); }
  .t-pilot { fill: var(--orange); stroke: var(--ivory); stroke-width: 3; filter: drop-shadow(0 0 8px rgba(211,84,0,.7)); }
  .no-js-trail .t-draw { stroke-dashoffset: 0; }
  .stop { position: absolute; top: 34px; z-index: 3; display: flex; align-items: center; gap: 12px; }
  .stop.l { left: max(14px, calc(50% - 540px - 40px)); }
  .stop.r { right: max(14px, calc(50% - 540px - 40px)); flex-direction: row-reverse; }
  .stop .dot { width: 20px; height: 20px; border-radius: 50%; background: var(--ivory); border: 3px solid var(--orange); box-shadow: 0 0 0 6px rgba(211,84,0,.14); flex: none; transition: background .4s ease, box-shadow .4s ease; }
  .stop.on .dot { background: var(--orange); box-shadow: 0 0 0 9px rgba(211,84,0,.2); }
  .stop .lab { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--taupe); white-space: nowrap; }
  .stop .lab b { font-family: 'Fraunces', serif; font-style: italic; font-size: 18px; letter-spacing: 0; color: var(--orange-text); margin-right: 6px; }
  .stop.dark .dot { background: #14273c; }
  .stop.dark.on .dot { background: var(--orange); }
  .stop.dark .lab { color: #c7d0da; }
  .mappa .stop { height: 20px; min-height: 0; margin: 0; padding: 0; }
  .stop.in { right: calc(max(12px, 50% - 650px) + 56px); }

  /* 01 Chi sono: foto grande, citazione-ciottolo che la scavalca, appunti appuntati */
  .mappa .chisono { padding: 110px 0 70px; }
  @media (min-width: 821px) { .mappa .chisono .grid { grid-template-columns: 400px 1fr; gap: 72px; } }
  .mappa .chisono .chisono-art { max-width: 400px; width: 100%; aspect-ratio: 4/5; height: auto; }
  .mappa .chisono h2 { max-width: 14ch; font-size: clamp(36px, 5vw, 62px); }
  .mappa .chisono .grid > div:last-child { padding-top: 34px; }
  .mappa .chisono .quote-band { width: calc(97% + 24px); margin: 64px 0 0 -24px; padding: 80px 0 88px; border-radius: 0 220px 30px 0; transform: rotate(-.8deg); box-shadow: 0 30px 60px rgba(16,28,43,.22); position: relative; z-index: 2; }
  .mappa .chisono .quote-band .wrap { padding-left: clamp(40px, 9vw, 130px); }
  .mappa .chisono .quote-band blockquote { font-size: clamp(28px, 4.3vw, 56px); }
  .mappa .chisono .chi-bottom { grid-template-columns: 1fr; margin-top: 64px; gap: 40px; }
  .mappa .chisono .chi-bottom > p { max-width: 58ch; font-size: 18px; line-height: 1.7; }
  .mappa .chisono .facts { display: flex; flex-wrap: wrap; gap: 22px 26px; }
  .mappa .chisono .fact { position: relative; flex: 1 1 240px; max-width: 320px; background: var(--white); border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 14px; padding: 26px 22px 20px; box-shadow: 0 14px 30px rgba(16,28,43,.1); transition: transform .3s ease; }
  .mappa .chisono .fact::before { content: ""; position: absolute; top: -9px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--orange); box-shadow: 0 3px 6px rgba(0,0,0,.25); }
  .mappa .chisono .fact:nth-child(1) { transform: rotate(-2deg); }
  .mappa .chisono .fact:nth-child(2) { transform: rotate(1.4deg) translateY(26px); }
  .mappa .chisono .fact:nth-child(3) { transform: rotate(-1deg) translateY(-6px); }

  /* 02 Aree: isola scura che sporge a destra, senza bordo a destra */
  .mappa .aree { padding: 120px 0 110px; margin-top: 70px; }
  .mappa .aree::before { display: block; content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: max(10px, calc(50% - 640px)); border-radius: 80px 0 0 80px; z-index: 0;
    background: radial-gradient(900px 620px at 78% 34%, rgba(47,85,120,.6), transparent 70%), radial-gradient(720px 520px at 4% 100%, rgba(232,120,42,.2), transparent 70%), linear-gradient(180deg, #0f1b2a 0%, #14273c 100%);
    box-shadow: 0 40px 80px rgba(16,28,43,.28); -webkit-mask-image: none; mask-image: none; opacity: 1; }
  .mappa .aree::after { display: block; content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: max(10px, calc(50% - 640px)); border-radius: 80px 0 0 80px; pointer-events: none; z-index: 0;
    background-image: radial-gradient(rgba(255,255,255,.1) 1.2px, transparent 1.7px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(640px 420px at 100% 0%, #000, transparent 72%); mask-image: radial-gradient(640px 420px at 100% 0%, #000, transparent 72%); }
  .mappa .aree .wrap { z-index: 2; }

  /* 03 Formati: titolo a destra, scala di cartoncini */
  .mappa .formati { padding: 120px 0 60px; }
  .mappa .formati .eyebrow, .mappa .formati h2 { margin-left: auto; text-align: right; }
  .mappa .formati h2 { max-width: 12ch; font-size: clamp(36px, 5vw, 62px); }

  /* il bivio: una pausa sul foglio, senza fascia */
  .mappa .bivio { padding: 90px 0 330px; color: var(--ink); margin-top: 10px; }
  .mappa .bivio h2 { color: var(--hd); font-size: clamp(38px, 6.4vw, 84px); line-height: 1.02; }
  .mappa .bivio p.sub { color: var(--taupe); }
  .mappa .bivio .btn-ghost { color: var(--hd); border-color: var(--hd); }
  .mappa .bivio .fork { bottom: 20px; }

  /* 04 Interventi */
  .mappa .interventi { padding: 100px 0 110px; }

  /* 05 Sul campo */
  .mappa .campo { padding: 100px 0 110px; }
  .mappa .campo h2 { max-width: 14ch; font-size: clamp(36px, 5vw, 62px); }

  /* 06 Contatti: isola scura che sporge a sinistra */
  .mappa .contatti { margin: 50px max(12px, calc(50% - 650px)) 0 0 !important; padding: 120px 0 104px; border-radius: 0 80px 80px 0; overflow: hidden;
    background: radial-gradient(980px 560px at 92% 0%, rgba(47,85,120,.62), transparent 70%), radial-gradient(860px 520px at 8% 106%, rgba(232,120,42,.26), transparent 65%), linear-gradient(180deg, #1a2e44 0%, #11202f 100%) !important;
    box-shadow: 0 40px 80px rgba(16,28,43,.28); }
  .mappa .contatti::after { display: block; content: ""; position: absolute; inset: 0; background: var(--bg-photo2, none) center/cover no-repeat; filter: blur(12px) saturate(.7); opacity: .12; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%); mask-image: linear-gradient(180deg, transparent 0%, #000 60%); pointer-events: none; }
  .mappa .contatti .wrap { position: relative; z-index: 2; }
  footer { background: none; color: var(--taupe); padding: 30px 0 44px; }

  @media (max-width: 820px) {
    .stop .lab { font-size: 11px; letter-spacing: .1em; }
    .stop.l, .stop.r { left: 14px; right: auto; flex-direction: row; }
    .mappa .chisono { padding: 96px 0 30px; }
    .mappa .chisono .chisono-art { max-width: 280px; }
    .mappa .chisono .grid > div:last-child { padding-top: 6px; }
    .mappa .chisono .quote-band { width: calc(100% - 14px + 24px); margin-top: 52px; margin-left: -24px; border-radius: 0 110px 22px 0; padding: 56px 0 60px; }
    .mappa .chisono .quote-band .wrap { padding-left: 28px; padding-right: 22px; }
    .mappa .chisono .fact:nth-child(n) { max-width: none; }
    .mappa .aree { padding: 100px 0 80px; margin-top: 50px; }
    .mappa .aree::before, .mappa .aree::after { left: 8px; border-radius: 40px 0 0 40px; }
    .mappa .formati { padding: 100px 0 40px; }
    .mappa .bivio { padding: 60px 0 230px; }
    .mappa .contatti { margin: 40px 8px 0 0 !important; border-radius: 0 40px 40px 0; padding: 100px 0 80px; }
  }
  @media (prefers-reduced-motion: reduce) { .stop .dot { transition: none; } }

  /* ======= v31 - Laboratorio e selettore formati ======= */
  .mappa .lab { padding: 110px 0 80px; }
  .mappa .lab h2 { max-width: 13ch; font-size: clamp(36px, 5vw, 62px); }
  .lab-intro { margin-top: 18px; max-width: 54ch; font-size: 17px; line-height: 1.65; color: var(--ink); }
  .lab-card { position: relative; margin: 44px 0 0 clamp(0px, 7vw, 100px); max-width: 880px; padding: 34px 34px 36px; background: var(--white); border: 1px solid var(--line); border-radius: 30px 30px 30px 6px; box-shadow: 0 24px 50px rgba(16,28,43,.12); }
  .lab-card::after { content: ""; position: absolute; right: -14px; bottom: -14px; width: 100%; height: 100%; border: 2px dashed var(--orange); border-radius: 30px 30px 30px 6px; opacity: .35; z-index: -1; }
  .lab-tag { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); }
  .lab-tag i { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(211,84,0,.16); }
  .lab-case { margin-top: 18px; font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(21px, 2.6vw, 28px); line-height: 1.25; color: var(--hd); max-width: 34ch; }
  .lab-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
  .lab-opt { text-align: left; font: inherit; color: var(--ink); cursor: pointer; background: var(--ivory); border: 2px solid var(--line); border-radius: 20px; padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
  .lab-opt b { font-family: 'Fraunces', serif; font-style: italic; font-size: 44px; line-height: 1; color: var(--orange); font-weight: 600; }
  .lab-opt span { font-size: 16.5px; line-height: 1.55; }
  .lab-opt:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
  @media (hover: hover) and (pointer: fine) { .lab-opt:hover { border-color: var(--orange); transform: translateY(-4px); box-shadow: 0 14px 28px rgba(211,84,0,.14); } }
  .lab-hint { margin-top: 16px; font-size: 13.5px; color: var(--taupe); }
  .lab-reveal h3 { margin-top: 18px; font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.12; color: var(--hd); }
  .lab-reveal .lab-lead { margin-top: 12px; font-size: 16.5px; line-height: 1.65; max-width: 60ch; }
  .lab-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
  .lab-ver { border-radius: 16px; padding: 18px 20px; border: 1px solid var(--line); background: var(--ivory); font-size: 15px; line-height: 1.55; }
  .lab-ver small { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--orange-text); }
  .lab-ver.read { border-color: var(--orange); }
  .lab-ver p + p { margin-top: 6px; }
  .lab-bars { margin-top: 26px; display: grid; gap: 16px; }
  .lab-bar-l { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; color: var(--hd); }
  .lab-bar-l span:last-child { font-family: 'Fraunces', serif; font-size: 20px; }
  .lab-track { margin-top: 6px; height: 14px; border-radius: 7px; background: var(--line); overflow: hidden; }
  .lab-fill { display: block; height: 100%; width: 0; border-radius: 7px; background: var(--orange); transition: width 1.2s cubic-bezier(.3,.7,.2,1); }
  .lab-bars .lab-bar:nth-child(2) .lab-fill { background: var(--hd); }
  .lab-reveal.go .lab-fill { width: var(--w); }
  .lab-note { margin-top: 22px; font-size: 15.5px; line-height: 1.65; max-width: 62ch; padding-left: 18px; border-left: 3px solid var(--orange); }
  .lab-redo { margin-top: 24px; font: inherit; font-weight: 700; font-size: 15px; color: #fff; background: var(--orange); border: none; border-radius: 12px; padding: 13px 24px; cursor: pointer; }
  .lab-redo:focus-visible { outline: 3px solid var(--hd); outline-offset: 3px; }
  .lab-src { margin-top: 20px; margin-left: clamp(0px, 7vw, 100px); font-size: 13px; color: var(--taupe); max-width: 70ch; }

  .pick { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 26px; }
  .pick-q { font-family: 'Fraunces', serif; font-style: italic; font-size: 18px; color: var(--hd); margin-right: 6px; }
  .pick button { font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; color: var(--hd); background: var(--white); border: 2px solid var(--line); border-radius: 999px; padding: 10px 18px; transition: border-color .2s ease, background .2s ease, color .2s ease; }
  .pick button[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #fff; }
  .pick button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
  @media (hover: hover) and (pointer: fine) { .pick button:hover { border-color: var(--orange); } }
  .pick-note { min-height: 22px; margin-top: 12px; text-align: right; font-size: 14.5px; color: var(--taupe); }
  .formati-grid .formato-card { transition: opacity .35s ease, translate .35s ease, box-shadow .35s ease, filter .35s ease; }
  .formati-grid[data-pick] .formato-card { opacity: .42; filter: saturate(.6); }
  .formati-grid[data-pick="0"] .formato-card:nth-child(1), .formati-grid[data-pick="1"] .formato-card:nth-child(2), .formati-grid[data-pick="2"] .formato-card:nth-child(3) { opacity: 1; filter: none; translate: 0 -12px; box-shadow: 0 0 0 3px var(--orange), 0 24px 44px rgba(211,84,0,.22); }
  @media (max-width: 820px) {
    .lab-opts, .lab-pair { grid-template-columns: 1fr; }
    .lab-card { padding: 26px 20px 28px; margin-left: 0; margin-right: 10px; }
    .lab-src { margin-left: 0; }
    .pick { justify-content: flex-start; }
    .pick-note { text-align: left; }
    .mappa .lab { padding: 96px 0 60px; }
  }
  @media (prefers-reduced-motion: reduce) { .lab-fill { transition: none; } .lab-opt, .formati-grid .formato-card { transition: none; } }

  /* ======= v34 - mobile: il percorso ha la sua corsia, il testo la sua ======= */
  @media (max-width: 820px) {
    .stop.l, .stop.r { left: 4px; }
    .mappa .wrap { padding-left: 42px; padding-right: 20px; }
    .mappa .chisono .quote-band { width: calc(100% + 24px - 10px); }
    .mappa .chisono .quote-band .wrap { padding-left: 66px; padding-right: 24px; }
    .mappa .chisono .quote-band blockquote { font-size: clamp(26px, 7.4vw, 34px); }
    .mappa .chisono .facts { gap: 30px; }
    .mappa .chisono .fact:nth-child(1) { transform: rotate(-1.2deg); }
    .mappa .chisono .fact:nth-child(2) { transform: rotate(.9deg); }
    .mappa .chisono .fact:nth-child(3) { transform: rotate(-.6deg); }
    .mappa .formati .eyebrow, .mappa .formati h2 { margin-left: 0; text-align: left; }
  }
  /* ======= v35 - etichette, bivio, formati cliccabili, header piu caldo ======= */
  .stop .lab { color: var(--orange-text); font-size: 13px; }
  .stop.dark .lab { color: #f4a46a; }
  .mappa > .bivio { z-index: 3; }
  .mappa .bivio .btn-primary { position: relative; box-shadow: 0 0 0 6px rgba(211,84,0,.15), 0 12px 28px rgba(211,84,0,.32); }
  @media (min-width: 821px) { .mappa .bivio { padding-bottom: 420px; } .mappa .bivio .hero-actions { margin-top: 96px; } }
  .formati-grid .formato-card { cursor: pointer; }
  .formati-grid .formato-card:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
  .lab-bars-cap { font-size: 13.5px; color: var(--taupe); margin-bottom: 2px; }
  .lab-bar-l b { color: var(--orange-text); }

  .hero { background:
      radial-gradient(760px 560px at 84% 42%, rgba(232,120,42,.26), transparent 66%),
      radial-gradient(640px 460px at 0% 104%, rgba(232,120,42,.14), transparent 70%),
      linear-gradient(160deg, #1d3350 0%, #1a2e44 55%, #172638 100%); }
  .hero-photo-bleed { width: 46%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 18%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 18%, #000 40%); }
  .hero-photo-bleed img { object-position: 62% 22%; filter: sepia(.16) saturate(1.15) contrast(1.04) brightness(1.06); }
  .hero-photo-bleed::before { background: radial-gradient(58% 52% at 60% 36%, rgba(255,178,110,.42), transparent 72%); mix-blend-mode: soft-light; }
  .hero-photo-bleed::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(270deg, rgba(232,120,42,.24) 0%, transparent 26%), linear-gradient(180deg, transparent 58%, rgba(23,38,56,.9) 100%); }
  @media (max-width: 820px) {
    .hero-photo-bleed { width: 100%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%); }
    .hero-photo-bleed img { object-position: center 22%; }
    .hero-photo-bleed::after { background: linear-gradient(270deg, rgba(232,120,42,.2) 0%, transparent 34%), linear-gradient(90deg, rgba(232,120,42,.12) 0%, transparent 30%); }
  }
  /* v36 - foto in aula: il soggetto e' a sinistra nell'immagine */
  .hero-photo-bleed { width: 56%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 14%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 14%, #000 30%); }
  .hero-photo-bleed img { object-position: 8% 30%; filter: saturate(1.06) contrast(1.05) brightness(.9) sepia(.06); }
  .hero-photo-bleed::after { background: linear-gradient(270deg, rgba(16,28,43,.55) 0%, transparent 34%), linear-gradient(180deg, rgba(23,38,56,.35) 0%, transparent 22%, transparent 62%, rgba(23,38,56,.92) 100%); }
  @media (max-width: 820px) {
    .hero-photo-bleed { width: 100%; height: 400px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 72%, transparent 100%); }
    .hero-photo-bleed img { object-position: 22% 30%; transform: scale(1.3); transform-origin: 26% 30%; }
    .hero-photo-bleed::after { background: linear-gradient(270deg, rgba(16,28,43,.4) 0%, transparent 40%); }
  }
[hidden] { display: none !important; }

/* ======= v40 - font locali ======= */
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-latin-opsz-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-latin-opsz-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ======= v40 - utilita ======= */
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--orange); color: #fff; padding: 10px 16px; border-radius: 6px; font-weight: 700; text-decoration: none; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
h1.hero-h1 { margin: 0; font: inherit; }
h1.hero-h1 .hero-eyebrow, h1.hero-h1 .hero-name { display: block; }
html { -webkit-tap-highlight-color: rgba(211,84,0,.15); }

/* foto header: grana leggera che la rende piu fotografica */
.hero-photo-bleed .grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat; }
.hero-photo-bleed picture { display: block; width: 100%; height: 100%; }

/* ======= fascia "ho portato la formazione a" ======= */
.trust { background: var(--navy-deep); color: #c7d0da; padding: 26px 0 30px; position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.06); }
.trust .wrap { display: flex; align-items: center; gap: 18px 40px; flex-wrap: wrap; }
.trust-lab { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #f4a46a; flex: none; }
.trust-list { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 0; padding: 0; }
.trust-list li { display: flex; flex-direction: column; gap: 2px; }
.trust-list b { font-family: 'Fraunces', serif; font-weight: 600; font-size: 19px; color: #fff; letter-spacing: -.005em; }
.trust-list span { font-size: 12.5px; color: #9fabb8; }
@media (max-width: 820px) {
  .trust { padding: 22px 0 24px; }
  .trust .wrap { flex-direction: column; align-items: flex-start; gap: 12px; }
  .trust-list { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
  .trust-list li { flex-direction: row; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .trust-list li:last-child { border-bottom: none; padding-bottom: 0; }
  .trust-list b { font-size: 17px; flex: none; }
}

/* ======= formati: intro con parole chiave ======= */
.formati-intro { margin: 16px 0 0 auto; max-width: 52ch; text-align: right; font-size: 16.5px; line-height: 1.6; color: var(--taupe); }
@media (max-width: 820px) { .formati-intro { margin-left: 0; text-align: left; } }

/* ======= FAQ ======= */
.mappa .faq { padding: 110px 0 70px; }
.faq h2 { max-width: 16ch; font-size: clamp(34px, 4.6vw, 56px); }
.faq-list { margin-top: 36px; max-width: 820px; display: grid; gap: 12px; }
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 22px rgba(16,28,43,.06); transition: border-color .25s ease, box-shadow .25s ease; }
.faq-item[open] { border-color: rgba(211,84,0,.55); box-shadow: 0 14px 30px rgba(16,28,43,.1); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; min-height: 56px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 16px; }
.faq-item h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--hd); margin: 0; }
.faq-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--orange); position: relative; transition: transform .3s ease, background .3s ease; }
.faq-ic::before, .faq-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--orange); border-radius: 2px; transition: transform .3s ease, background .3s ease; }
.faq-ic::after { transform: rotate(90deg); }
.faq-item[open] .faq-ic { background: var(--orange); transform: rotate(180deg); }
.faq-item[open] .faq-ic::before, .faq-item[open] .faq-ic::after { background: #fff; }
.faq-item[open] .faq-ic::after { transform: rotate(0deg); }
.faq-a { padding: 0 22px 22px; }
.faq-a p { font-size: 16px; line-height: 1.7; color: var(--ink); max-width: 64ch; }
.faq-more { margin-top: 22px; font-size: 15.5px; color: var(--taupe); }
.faq-more a { color: var(--orange-text); font-weight: 700; }
@media (max-width: 820px) { .mappa .faq { padding: 96px 0 50px; } .faq-item summary { padding: 18px 18px; } .faq-a { padding: 0 18px 20px; } .faq-item h3 { font-size: 17.5px; } }

/* ======= testimonianze ======= */
.testimoni { padding: 90px 0 30px; }
.testi-grid { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testo { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px; box-shadow: 0 10px 26px rgba(16,28,43,.07); }
.testo blockquote { margin: 0; padding: 0; border: none; background: none; font-family: 'Fraunces', serif; font-style: italic; font-size: 19px; line-height: 1.45; color: var(--hd); }
.testo figcaption { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--taupe); }
.testo figcaption b { color: var(--ink); }
@media (max-width: 820px) { .testi-grid { grid-template-columns: 1fr; } }

/* ======= form contatti ======= */
.contact-form { max-width: 640px; gap: 16px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f-field { min-width: 0; }
.contact-form label abbr { text-decoration: none; color: #f4a46a; }
.f-opt { font-weight: 500; color: #8fa0b2; }
.contact-form input[type="text"], .contact-form input[type="tel"], .contact-form input[type="email"], .contact-form textarea { font-size: 16px; min-height: 50px; }
.contact-form input[aria-invalid="true"], .contact-form textarea[aria-invalid="true"] { border-color: #ff8a5c; background: rgba(255,120,80,.08); }
.f-err { display: none; margin-top: 6px; font-size: 13px; color: #ffb38f; }
.f-err.on { display: block; }
.f-send.on { padding: 12px 14px; border-radius: 8px; background: rgba(255,120,80,.12); color: #ffd2bd; font-size: 14px; line-height: 1.5; }
.f-send a { color: #fff; }
.f-check { display: flex; gap: 12px; align-items: flex-start; margin-top: 4px; }
.f-check input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--orange); }
.f-check label { margin: 0; font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: #c7d0da; }
.f-check a { color: #fff; }
.contact-form .btn-primary { min-height: 52px; padding: 15px 30px; font-size: 16px; }
.contact-form .btn-primary:disabled { opacity: .7; cursor: progress; }
.form-ok { max-width: 560px; margin: 34px auto 0; padding: 34px 28px; border-radius: 22px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); text-align: center; outline: none; animation: panelIn .45s ease; }
.ok-ic { width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px rgba(211,84,0,.18); }
.ok-ic svg { width: 28px; height: 28px; }
.form-ok h3 { font-family: 'Fraunces', serif; font-size: 26px; color: #fff; }
.form-ok p { margin: 12px auto 0; max-width: 44ch; font-size: 15.5px; line-height: 1.6; color: #c7d0da; }
.btn-wa { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; background: #25d366; color: #0b2a16; }
.btn-wa svg { width: 22px; height: 22px; }
.btn-wa:hover { background: #3ae07a; }
@media (max-width: 820px) {
  .f-row { grid-template-columns: 1fr; }
  .contact-form .btn-primary { width: 100%; }
  .form-actions { flex-direction: column; align-items: stretch; }
}

/* ======= footer ======= */
.site-footer { background: var(--navy-deep); color: #9fabb8; text-align: left; padding: 46px 0 calc(34px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
.ft-main { display: flex; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap; }
.ft-name { font-family: 'Fraunces', serif; font-weight: 700; font-size: 22px; color: #fff; }
.ft-role { margin-top: 8px; line-height: 1.6; max-width: 46ch; }
.ft-links { display: flex; flex-wrap: wrap; gap: 10px 22px; align-content: flex-start; max-width: 460px; }
.ft-links a, .ft-cookie { color: #dfe3e8; text-decoration: none; font: inherit; font-size: 14px; padding: 6px 0; background: none; border: none; cursor: pointer; }
.ft-links a:hover, .ft-cookie:hover { color: #f4a46a; text-decoration: underline; }
.ft-copy { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; }
.ft-copy a { color: inherit; }

/* ======= barra CTA fissa su mobile ======= */
.m-cta { display: none; }
@media (max-width: 820px) {
  .m-cta { display: flex; gap: 10px; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(16,28,43,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,.1); transform: translateY(110%); transition: transform .35s cubic-bezier(.3,.7,.2,1); }
  .m-cta.on { transform: none; }
  .m-cta .btn { flex: 1; text-align: center; min-height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 16px; }
  .m-wa { flex: none; width: 50px; height: 50px; border-radius: 10px; background: #25d366; color: #0b2a16; display: flex; align-items: center; justify-content: center; }
  .m-wa svg { width: 26px; height: 26px; }
  html.cc-open .m-cta { transform: translateY(110%); }
  .site-footer { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .m-cta { transition: none; } }

/* ======= banner cookie ======= */
.cc { position: fixed; z-index: 200; left: 16px; bottom: 16px; width: min(440px, calc(100vw - 32px)); }
.cc[hidden] { display: none !important; }
.cc-box { position: relative; background: #fff; color: #26323f; border-radius: 18px; padding: 22px 22px 18px; box-shadow: 0 24px 60px rgba(10,16,24,.35); border: 1px solid #e3ddd3; max-height: calc(100vh - 32px); overflow: auto; }
.cc-t { font-family: 'Fraunces', serif; font-weight: 700; font-size: 20px; color: #1a2e44; padding-right: 30px; }
.cc-d { margin-top: 8px; font-size: 14px; line-height: 1.55; color: #3d4a57; }
.cc-d a { color: #b84800; font-weight: 700; }
.cc-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: none; background: #f2eee8; color: #26323f; font-size: 22px; line-height: 1; cursor: pointer; }
.cc-prefs { margin-top: 14px; display: grid; gap: 10px; }
.cc-row { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid #e3ddd3; border-radius: 12px; cursor: pointer; }
.cc-row span { display: flex; flex-direction: column; gap: 3px; font-size: 14.5px; color: #1a2e44; }
.cc-row small { font-size: 12.5px; color: #6b6259; line-height: 1.45; }
.cc-row input { flex: none; width: 22px; height: 22px; accent-color: #d35400; }
.cc-act { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-btn { font: inherit; font-weight: 700; font-size: 15px; min-height: 46px; padding: 10px 14px; border-radius: 10px; cursor: pointer; border: 2px solid #1a2e44; background: #fff; color: #1a2e44; }
.cc-btn:focus-visible, .cc-x:focus-visible { outline: 3px solid #d35400; outline-offset: 2px; }
.cc-btn.cc-main { background: #1a2e44; color: #fff; }
.cc-act #cc-custom, .cc-act #cc-save { grid-column: 1 / -1; order: 3; }
@media (max-width: 820px) {
  .cc { left: 0; right: 0; bottom: 0; width: auto; }
  .cc-box { border-radius: 20px 20px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px)); max-height: 82vh; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cc-box { background: #1c232c; color: #dfe3e8; border-color: #2c3542; }
  :root:not([data-theme="light"]) .cc-t, :root:not([data-theme="light"]) .cc-row span { color: #eef1f4; }
  :root:not([data-theme="light"]) .cc-d { color: #c7d0da; }
  :root:not([data-theme="light"]) .cc-d a { color: #f4a46a; }
  :root:not([data-theme="light"]) .cc-x { background: #2c3542; color: #dfe3e8; }
  :root:not([data-theme="light"]) .cc-row { border-color: #2c3542; }
  :root:not([data-theme="light"]) .cc-row small { color: #98a0a8; }
  :root:not([data-theme="light"]) .cc-btn { background: transparent; color: #eef1f4; border-color: #eef1f4; }
  :root:not([data-theme="light"]) .cc-btn.cc-main { background: #eef1f4; color: #1a2e44; border-color: #eef1f4; }
}

/* ======= v40 - mobile: CTA dell'header sopra la piega ======= */
@media (max-width: 820px) {
  .hero-photo-bleed { height: 330px; }
  .hero-copy { margin-top: -34px; position: relative; }
  .hero .wrap { padding-bottom: 40px; }
  .hero-actions { margin-top: 24px; gap: 14px 24px; }
  .hero-role { margin-top: 18px; font-size: 16px; }
  .hero-rule { margin: 16px 0; }
  #contatti { scroll-margin-top: 0; }
}

/* ======= v40 - contrasto AA sui bottoni arancioni (testo bianco 4.8:1) ======= */
.btn-primary { background: #c24d00; }
.btn-primary:hover { background: #a84200; }


/* ======= v42 - loghi nella fascia "ho portato la formazione a" ======= */
.trust { padding: 30px 0 34px; }
.trust-list { align-items: flex-end; gap: 22px 52px; }
.trust-list li { flex-direction: column; gap: 10px; border: none; padding: 0; }
.t-mark { height: 46px; display: flex; align-items: flex-end; }
.lg { display: block; width: auto; max-width: 100%; opacity: .9; transition: opacity .2s ease; }
.lg-unict { height: 46px; }
.lg-sisifo { height: 38px; }
.lg-wired { height: 44px; }
.t-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 24px; line-height: 1; color: #fff; letter-spacing: -.005em; }
.t-sub { font-size: 12.5px; color: #9fabb8; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.lg-inline { height: 19px; width: auto; display: inline-block; opacity: .9; }
.trust-list li:hover .lg, .trust-list li:hover .lg-inline { opacity: 1; }
@media (max-width: 820px) {
  .trust .wrap { gap: 16px; }
  .trust-list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; align-items: end; }
  .trust-list li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0; border: none; }
  .t-mark { height: 38px; }
  .lg-unict { height: 38px; }
  .lg-sisifo { height: 30px; }
  .lg-wired { height: 36px; }
  .t-name { font-size: 20px; }
  .t-sub { font-size: 11.5px; white-space: normal; }
}
@media (max-width: 820px) { .t-sub:has(.lg-inline) { white-space: nowrap; flex-wrap: nowrap; } .lg-inline { height: 15px; } }

.lg-eht { height: 34px; }
@media (max-width: 820px) { .lg-eht { height: 28px; } }

/* v43 - solo loghi */
.trust-list { align-items: center; gap: 26px 56px; }
.trust-list li { flex-direction: row; align-items: center; }
.lg-morpheos { height: 30px; }
@media (max-width: 820px) {
  .trust-list { grid-template-columns: 1fr 1fr; gap: 26px 20px; align-items: center; }
  .trust-list li { justify-content: flex-start; }
  .lg-morpheos { height: 24px; }
}
@media (max-width: 820px) { .trust-list li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-content: center; } }

/* ======= v44 - titoli di studio, testimonianze, CTA esperimento ======= */
.titoli { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 24px 24px 22px; box-shadow: 0 12px 28px rgba(16,28,43,.08); max-width: 640px; }
.titoli-lab { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); }
.titoli-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.titoli-list li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--line); }
.titoli-list li:first-child { border-top: none; padding-top: 0; }
.t-yr { font-family: 'Fraunces', serif; font-weight: 700; font-size: 20px; color: var(--orange-text); font-variant-numeric: tabular-nums; }
.t-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.t-tx b { font-family: 'Fraunces', serif; font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--hd); }
.t-tx span { font-size: 14.5px; color: var(--taupe); }
.li-link { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--hd); text-decoration: none; padding: 10px 16px; border: 2px solid var(--line); border-radius: 10px; transition: border-color .2s ease, color .2s ease; }
.li-link svg { width: 20px; height: 20px; color: #0a66c2; }
.li-link:hover { border-color: #0a66c2; }
.li-link:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .li-link svg { color: #70b5f9; } }
:root[data-theme="dark"] .li-link svg { color: #70b5f9; }

.mappa .testimoni { padding: 110px 0 40px; }
.testimoni h2 { font-size: clamp(34px, 4.6vw, 56px); }
.testi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 980px; }
.testo { position: relative; padding: 34px 30px 26px; border-radius: 22px; display: flex; flex-direction: column; }
.testo:nth-child(1) { transform: rotate(-.6deg); }
.testo:nth-child(2) { transform: rotate(.5deg) translateY(18px); }
.q-mark { position: absolute; top: -18px; left: 24px; width: 46px; height: 46px; border-radius: 50%; background: var(--orange); color: #fff; font-family: 'Fraunces', serif; font-size: 44px; line-height: 58px; text-align: center; box-shadow: 0 8px 18px rgba(211,84,0,.3); }
.testo blockquote { flex: 1; }
.testo blockquote p { font-family: 'Fraunces', serif; font-style: italic; font-size: 20px; line-height: 1.5; color: var(--hd); }
.testo figcaption { margin-top: 22px; flex-direction: row; align-items: center; gap: 12px; }
.t-av { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; letter-spacing: .04em; }
.t-who { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--taupe); }
.t-who b { color: var(--ink); font-size: 15.5px; }
.t-ctx { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-text); }
@media (max-width: 820px) {
  .mappa .testimoni { padding: 96px 0 20px; }
  .testi-grid { grid-template-columns: 1fr; gap: 34px; }
  .testo:nth-child(n) { transform: none; }
  .testo blockquote p { font-size: 18px; }
}

.lab-redo { background: transparent; color: var(--hd); border: 2px solid var(--line); }
.lab-redo:hover { border-color: var(--orange); }
.lab-cta { margin-top: 26px; padding: 22px 22px; border-radius: 18px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.lab-cta p { font-family: 'Fraunces', serif; font-weight: 600; font-size: 20px; line-height: 1.3; max-width: 34ch; color: #fff; }
.lab-cta .btn { border-radius: 10px; }
@media (max-width: 820px) { .lab-cta { flex-direction: column; align-items: stretch; } .lab-cta .btn { text-align: center; } }

/* numerazione automatica delle tappe: le sezioni nascoste non contano */
.mappa { counter-reset: tappa; }
.mappa .stop { counter-increment: tappa; }
.stop .lab b { font-size: 0 !important; }
.stop .lab b::before { content: counter(tappa, decimal-leading-zero); font-size: 18px; }
.lab-cta { border: 1px solid rgba(255,255,255,.12); }
.t-av { background: #c24d00; }

/* v45 - foto header: grana un po piu presente, inquadratura sul soggetto */
.hero-photo-bleed .grain { opacity: .3; }
.hero-photo-bleed img { object-position: 10% 30%; }
@media (max-width: 820px) { .hero-photo-bleed img { object-position: 20% 26%; transform: scale(1.35); transform-origin: 22% 28%; } }

/* ======= v46 - WhatsApp sempre raggiungibile ======= */
.wa-alt { margin: 22px auto 0; display: flex; align-items: center; justify-content: center; gap: 12px 16px; flex-wrap: wrap; }
.wa-alt span { font-size: 15px; color: #c7d0da; }
.wa-alt .btn-wa { margin-top: 0; }
.form-or { max-width: 640px; margin: 26px auto 0; display: flex; align-items: center; gap: 14px; color: #8fa0b2; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.form-or::before, .form-or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.16); }
@media (min-width: 821px) {
  .m-cta { display: block; position: fixed; right: max(24px, env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: auto; z-index: 90;
    transform: translateY(140%); opacity: 0; transition: transform .35s cubic-bezier(.3,.7,.2,1), opacity .35s ease; }
  .m-cta.on { transform: none; opacity: 1; }
  .m-cta .btn { display: none; }
  .m-cta .m-wa { width: 60px; height: 60px; border-radius: 50%; background: #25d366; color: #0b2a16; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(16,28,43,.3); transition: transform .2s ease; }
  .m-cta .m-wa:hover { transform: scale(1.06); }
  .m-cta .m-wa:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
  .m-cta .m-wa svg { width: 32px; height: 32px; }
  html.cc-open .m-cta { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .m-cta { transition: none; } }