/* Override per la versione locale statica */
/* Font: Noto Sans per testi, header e footer; Crimson Pro per i titoli (file in /fonts, vedi css/fonts.css) */
:root, html, body, * {
  --wwa-font-testo: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wwa-font-titoli: "Crimson Pro", Georgia, "Times New Roman", serif;
  --body-font-font-family: var(--wwa-font-testo) !important;
  --heading-font-font-family: var(--wwa-font-titoli) !important;
  --meta-font-font-family: var(--wwa-font-testo) !important;
  --site-navigation-font-font-family: var(--wwa-font-testo) !important;
  --primary-button-font-font-family: var(--wwa-font-testo) !important;
  --secondary-button-font-font-family: var(--wwa-font-testo) !important;
  --tertiary-button-font-font-family: var(--wwa-font-testo) !important;
  --header-button-font-font-family: var(--wwa-font-testo) !important;
  --form-block-placeholder-text-font-font-family: var(--wwa-font-testo) !important;
  --video-preview-badge-font-font-family: var(--wwa-font-testo) !important;
}
body, button, input, textarea, select, header, footer { font-family: var(--wwa-font-testo); }
/* titoli in Crimson Pro */
h1, h2, h3, h4, h5, h6 { font-family: var(--wwa-font-titoli) !important; }
/* ...tranne footer, header/menu e le etichette dei pulsanti area, che restano in Noto Sans */
footer h1, footer h2, footer h3, footer h4, header h1, header h2, header h3,
li[data-filtro] h2 { font-family: var(--wwa-font-testo) !important; }

/* animazioni di ingresso gestite da JS Squarespace: mostra subito */
.preFade, .preScale, .preSlide, .preClip, .preFlex {
  opacity: 1 !important; transform: none !important; clip-path: none !important;
}

/* gallery slideshow */
.gallery-slideshow-item { display: none; }
.gallery-slideshow-item[data-active="true"] { display: block; opacity: 1; visibility: visible; }
.gallery-slideshow-item img { display: block !important; }
.gallery-slideshow-control-btn { cursor: pointer; }
.gallery-slideshow-thumbnails-image-wrapper { cursor: pointer; }
.gallery-slideshow-thumbnails-image-wrapper img { width: 100%; height: 100%; object-fit: cover; }

/* menu mobile aperto: overlay sopra la pagina */
body.header--menu-open { overflow: hidden; }
body.header--menu-open .header { position: fixed; inset: 0; height: 100vh; z-index: 1000; }

/* video incorporati */
.embed-block-wrapper { position: relative; }
.sqs-video-wrapper, .sqs-video-wrapper iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* modulo contatti statico */
.local-form { display: grid; gap: 1rem; max-width: 640px; }
.local-form label { display: grid; gap: .35rem; font-size: .9rem; }
.local-form input, .local-form textarea {
  font: inherit; padding: .75rem; border: 1px solid currentColor; background: transparent; color: inherit;
}
.local-form textarea { min-height: 9rem; resize: vertical; }
.local-form button { justify-self: start; }

/* Portfolio: filtro per area tematica */
[data-filtro] { cursor: pointer; transition: opacity .2s, box-shadow .2s; }
[data-filtro]:hover, [data-filtro]:focus-visible { box-shadow: inset 0 0 0 2px currentColor; outline: none; }
.filtro-attivo [data-filtro] { opacity: .45; }
.filtro-attivo [data-filtro].is-active { opacity: 1; box-shadow: inset 0 0 0 2px currentColor; }
[data-aree][hidden] { display: none !important; }
.portfolio-grid-basic { scroll-margin-top: 120px; }

/* Core Team: foto del team dentro la colonna di testo */
.team-inline {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  margin: 2.2em 0;
}
.team-membro { margin: 0; text-align: center; }
.team-membro img {
  display: block; width: 58%; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; margin: 0 auto 1em;
}
.team-membro figcaption { display: grid; gap: .2em; line-height: 1.4; }
.team-membro strong { font-weight: 600; }
.team-membro span { font-size: .75em; letter-spacing: .02em; }

/* Impaginazione comune: sezione titolo identica su tutte le pagine
   (titolo H2 col. 1-5, testo col. 6-12, allineati in alto, stessa spaziatura dall'header) */
.sezione-titolo { min-height: 0 !important; align-items: flex-start !important; }
.sezione-titolo .content-wrapper { padding-top: 3.3vw !important; padding-bottom: 4vw !important; }
.sezione-titolo .sqs-col-7 .sqs-block + .sqs-block { margin-top: 1rem; }

/* Corpo del testo e voci di menu header più grandi (16px -> 18px) */
:root, html, body {
  --normal-text-size-value: 1.125 !important;
  --site-navigation-font-font-size-value: 1.125 !important;
}

/* Portfolio, pulsanti area tematica: testo sempre su 2 righe, mai spezzato a metà parola */
[data-section-id="6811c985477203738ccb1948"] li[data-filtro] h2 {
  overflow-wrap: normal !important; word-break: keep-all !important; hyphens: none !important;
}
@media (min-width: 768px) {
  [data-section-id="6811c985477203738ccb1948"] li[data-filtro] {
    padding: 16px 8px !important; box-sizing: border-box; height: auto !important;
    flex-direction: column; justify-content: center; align-items: center;
  }
  [data-section-id="6811c985477203738ccb1948"] li[data-filtro] .list-item-media {
    width: 40px !important; margin: 0 auto 10px !important;
  }
  [data-section-id="6811c985477203738ccb1948"] li[data-filtro] .list-item-content { width: 100%; }
  [data-section-id="6811c985477203738ccb1948"] li[data-filtro] h2 {
    font-size: 13px !important; line-height: 1.3 !important; letter-spacing: .02em;
    text-align: center; margin: 0 auto !important; max-width: 100% !important;
  }
}
/* su mobile griglia compatta 3x2 */
@media (max-width: 767px) {
  .br-mobile { display: inline; }
  [data-section-id="6811c985477203738ccb1948"] .user-items-list-item-container {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  [data-section-id="6811c985477203738ccb1948"] li[data-filtro] {
    padding: 12px 4px !important;
    flex-direction: column; justify-content: center; align-items: center;
    margin: 0 !important; box-sizing: border-box; height: auto !important;
  }
  [data-section-id="6811c985477203738ccb1948"] li[data-filtro] .list-item-media {
    width: 34px !important; margin: 0 auto 8px !important;
  }
  [data-section-id="6811c985477203738ccb1948"] li[data-filtro] .list-item-content { width: 100%; }
  [data-section-id="6811c985477203738ccb1948"] li[data-filtro] h2 {
    font-size: 10.5px !important; line-height: 1.3 !important; letter-spacing: .02em;
    text-align: center; margin: 0 auto !important; max-width: 100% !important;
  }
}

/* Header: pulsante "Scarica portfolio" più compatto */
.header-actions-action--cta a.btn {
  padding: .7em 1.4em !important; font-size: 12.5px !important; line-height: 1.2 !important;
}
.header-nav-item a em, .header-menu-nav-item a em { font-style: italic; }

/* Footer: fascia grigia compatta con Contattaci, marchio e icone social */
.footer-grigio { min-height: 0 !important; background: rgb(223, 224, 225); }
.footer-grigio .section-background { background: rgb(223, 224, 225) !important; }
.footer-grigio .content-wrapper { padding-top: 22px !important; padding-bottom: 22px !important; }
.footer-grigio .footer-riga { display: flex; align-items: center; flex-wrap: wrap; }
.footer-grigio .footer-cta .sqs-block,
.footer-grigio .footer-marchio .sqs-block { padding-top: 0 !important; padding-bottom: 0 !important; }
.footer-grigio .footer-marchio { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-grigio .footer-marchio h4 { margin: 0 !important; }
.footer-grigio .footer-marchio .sqs-svg-icon--list { justify-content: flex-start !important; }
@media (max-width: 767px) {
  .footer-grigio .content-wrapper { padding-top: 20px !important; padding-bottom: 20px !important; }
  .footer-grigio .footer-riga {
    flex-direction: column; align-items: flex-start; gap: 16px; margin: 0 !important;
  }
  .footer-grigio .footer-riga > .col { width: 100% !important; padding: 0 !important; margin: 0 !important; float: none !important; }
  .footer-grigio .footer-riga .sqs-block { padding: 0 !important; }
  .footer-grigio .footer-cta:empty { display: none; }
  .footer-grigio .footer-marchio { gap: 8px; }
}
/* footer: niente clearfix (in flex aggiunge spazi) e niente padding verticale dei blocchi */
.footer-grigio .footer-riga::before, .footer-grigio .footer-riga::after { display: none !important; content: none !important; }
.footer-grigio .footer-riga > .col > .sqs-block.sqs-block {
  padding-top: 0 !important; padding-bottom: 0 !important;
}

/* Schede progetto: navigazione precedente/successivo compatta su mobile */
@media (max-width: 767px) {
  .item-pagination { display: flex !important; gap: 16px; align-items: flex-start; }
  .item-pagination-link { flex: 1 1 0 !important; min-width: 0 !important; max-width: 50% !important; gap: 8px; }
  .item-pagination .pagination-title-wrapper { min-width: 0 !important; }
  .item-pagination-title {
    font-size: 16px !important; line-height: 1.3 !important; white-space: normal !important;
    overflow-wrap: break-word; letter-spacing: 0 !important;
  }
  .item-pagination-prev-next { font-size: 11px !important; }
  .item-pagination-icon { flex: 0 0 auto; }
  .item-pagination-icon svg { width: 12px !important; height: 22px !important; }
}

/* Header fisso in cima alla finestra: il contenuto scorre sotto
   (la prima sezione ha già lo spazio superiore per l'header) */
header.header {
  position: fixed !important; top: 0; left: 0; right: 0;
  z-index: 1000 !important; background: #fff;
}
/* ancore e scroll del filtro portfolio: non finire sotto l'header */
html { scroll-padding-top: 120px; }

/* Gallerie a griglia/masonry/strips/reel: Squarespace le rende visibili via JS (fade-in) */
.gallery-grid-item-wrapper, .gallery-masonry-item-wrapper, .gallery-strips-item-wrapper,
.gallery-reel-item-wrapper, .gallery-fullscreen-slideshow-item, .gallery-grid-item, .gallery-masonry-item {
  opacity: 1 !important; visibility: visible !important; transform: none !important;
}
/* miniature e immagini delle gallerie slideshow: niente fade-in JS, sempre visibili */
.gallery-slideshow-thumbnails img, .gallery-slideshow-item img,
.gallery-grid-item img, .gallery-masonry-item img { opacity: 1 !important; }
.gallery-slideshow-thumbnails-image-wrapper { opacity: .55; transition: opacity .2s; }
.gallery-slideshow-thumbnails-image-wrapper.active,
.gallery-slideshow-thumbnails-image-wrapper:hover { opacity: 1; }

/* Video ospitati localmente (ex video nativi Squarespace) */
.video-locale { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }

/* Footer: contenuti allineati a sinistra, sul bordo del logo dell'header */
.footer-grigio .footer-cta { display: none !important; }
.footer-grigio .footer-marchio { width: 100% !important; flex: 1 1 100%; }

/* Barra di scorrimento laterale sempre nascosta (lo scroll resta attivo) */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ===== Nuova grafica 2026 ===== */
:root {
  --wwa-sfondo: #dfe0e1;        /* grigio (ex footer) come sfondo del sito */
  --wwa-footer: #bcbdbf;        /* footer più scuro */
  --wwa-arancio: #f89c1c;       /* arancione del logo: rollover */
  --wwa-arancio-testo: #b26a05; /* stesso tono più scuro: testi in grassetto (contrasto 3.2:1 sul grigio) */
  --wwa-card: #ffffff;          /* riquadri (pulsanti area) in contrasto sullo sfondo grigio */
}

/* sfondo grigio ovunque */
html, body, #siteWrapper, .site-wrapper, #page, main, article,
header.header, .header-menu-bg,
.page-section:not(.footer-grigio), .page-section:not(.footer-grigio) .section-background {
  background-color: var(--wwa-sfondo) !important;
}
/* footer più scuro */
.footer-grigio, .footer-grigio .section-background { background-color: var(--wwa-footer) !important; }

/* testi in grassetto in arancione */
strong, b { color: var(--wwa-arancio-testo) !important; }

/* rollover arancione: link di testo */
a { transition: color .15s, background-color .15s, border-color .15s; }
.sqs-html-content a:hover, .header-nav-item a:hover, .header-menu-nav-item a:hover,
.item-pagination-link:hover, .item-pagination-link:hover *, .grid-item:hover .portfolio-title,
.portfolio-grid-basic a:hover h3, .footer-grigio a:hover {
  color: var(--wwa-arancio) !important;
}
.sqs-html-content a:hover { text-decoration-color: var(--wwa-arancio) !important; }
/* rollover arancione: pulsanti */
.header-actions-action--cta a.btn:hover, .sqs-block-button-element:hover,
.local-form button:hover, .sqs-button-element--primary:hover {
  background-color: var(--wwa-arancio) !important; border-color: var(--wwa-arancio) !important; color: #fff !important;
}
/* icone social: rollover arancione */
.footer-grigio .sqs-svg-icon--wrapper:hover { --si-fill-icon: var(--wwa-arancio); }

/* pulsanti area tematica (portfolio): riquadri bianchi, rollover e selezione arancioni */
[data-section-id="6811c985477203738ccb1948"] li[data-filtro] { background-color: var(--wwa-card) !important; }
[data-section-id="6811c985477203738ccb1948"] li[data-filtro]:hover,
[data-section-id="6811c985477203738ccb1948"] li[data-filtro].is-active {
  background-color: var(--wwa-arancio) !important; box-shadow: none !important;
}
/* campi del modulo contatti leggibili sul grigio */
.local-form input, .local-form textarea { background: #fff; }
.page-section:not(.footer-grigio) .section-border,
.item-pagination, .item-pagination-link { background-color: var(--wwa-sfondo) !important; }
.footer-grigio .section-border { background-color: var(--wwa-footer) !important; }

/* ===== Tema scuro: antracite + grigio chiaro + arancione del logo ===== */
:root {
  --wwa-sfondo: #1d1e20;        /* antracite molto scuro */
  --wwa-footer: #121314;        /* footer ancora più scuro */
  --wwa-testo: #d4d5d7;         /* grigio chiaro per i testi (contrasto 11.4:1) */
  --wwa-card: #2b2c2f;          /* riquadri e campi */
  --wwa-arancio-testo: #f89c1c; /* grassetti: arancione originale del logo (7.8:1) */
}
body { color: var(--wwa-testo); }
:is(h1, h2, h3, h4, h5, h6, p, li, label, figcaption, blockquote, small,
    .sqs-html-content, .header-nav-item a, .header-menu-nav-item a, .header-menu-nav-item-content,
    .list-item-content__title, .list-item-content__description, .item-pagination-link,
    .item-pagination-title, .item-pagination-prev-next, .portfolio-title, .grid-item, .team-membro) {
  color: var(--wwa-testo) !important;
}
.sqs-html-content a { color: var(--wwa-testo) !important; text-decoration-color: currentColor; }
hr { border-color: rgba(212, 213, 215, .35) !important; background-color: rgba(212, 213, 215, .35) !important; }

/* header: burger e croce chiari */
.burger-inner > div, .burger-inner .top-bun, .burger-inner .patty, .burger-inner .bottom-bun {
  background-color: var(--wwa-testo) !important;
}

/* pulsanti: pieni grigio chiaro con testo scuro, rollover arancione */
.header-actions-action--cta a.btn, .sqs-block-button-element, .sqs-button-element--primary, .local-form button {
  background-color: var(--wwa-testo) !important; border-color: var(--wwa-testo) !important; color: var(--wwa-sfondo) !important;
}
.header-actions-action--cta a.btn:hover, .sqs-block-button-element:hover,
.sqs-button-element--primary:hover, .local-form button:hover {
  background-color: var(--wwa-arancio) !important; border-color: var(--wwa-arancio) !important; color: var(--wwa-sfondo) !important;
}

/* pulsanti area tematica: riquadri antracite chiaro, icone chiare; rollover/selezione arancione */
[data-section-id="6811c985477203738ccb1948"] li[data-filtro] { background-color: var(--wwa-card) !important; }
[data-section-id="6811c985477203738ccb1948"] li[data-filtro] img { filter: invert(.86); }
[data-section-id="6811c985477203738ccb1948"] li[data-filtro]:hover img,
[data-section-id="6811c985477203738ccb1948"] li[data-filtro].is-active img { filter: none; }
[data-section-id="6811c985477203738ccb1948"] li[data-filtro]:hover h2,
[data-section-id="6811c985477203738ccb1948"] li[data-filtro].is-active h2 { color: var(--wwa-sfondo) !important; }

/* frecce di gallerie e navigazione progetti chiare */
.gallery-slideshow-control-btn, .item-pagination-icon { color: var(--wwa-testo) !important; }
.gallery-slideshow-control-btn svg, .item-pagination-icon svg,
.gallery-slideshow-control-btn svg *, .item-pagination-icon svg * { stroke: var(--wwa-testo) !important; }
.gallery-slideshow-control-btn:hover svg *, .item-pagination-link:hover .item-pagination-icon svg * { stroke: var(--wwa-arancio) !important; }

/* icone social chiare (stile knockout: cerchio = colore, glifo = sfondo) */
.footer-grigio .sqs-svg-icon--wrapper .sqs-use--mask { fill: var(--wwa-testo) !important; }
.footer-grigio .sqs-svg-icon--wrapper .sqs-use--icon { fill: var(--wwa-footer) !important; }
.footer-grigio .sqs-svg-icon--wrapper:hover .sqs-use--mask { fill: var(--wwa-arancio) !important; }

/* modulo contatti */
.local-form input, .local-form textarea {
  background: var(--wwa-card) !important; color: var(--wwa-testo) !important; border-color: rgba(212, 213, 215, .5) !important;
}
.local-form input:focus, .local-form textarea:focus { outline: 2px solid var(--wwa-arancio); outline-offset: 1px; }
/* testi con colore "accento scuro" di Squarespace (es. date nelle News): grigio medio leggibile */
.sqsrte-text-color--darkAccent, .sqsrte-text-color--black { color: #9fa1a5 !important; }

/* Linea sottile alla base dell'header, dal bordo del logo al bordo del pulsante portfolio */
.header-announcement-bar-wrapper::after {
  content: ""; position: absolute; bottom: 0; height: 1px; pointer-events: none;
  left: var(--pagePadding); right: var(--pagePadding); background: var(--wwa-testo);
}
@media (max-width: 767px) {
  .header-announcement-bar-wrapper::after { left: 6vw; right: 6vw; }
}

/* Switch lingua nell'header: mostra solo la lingua NON attiva, con lo stesso font delle voci di menu */
.lang-switch { display: flex; align-items: center; }
.lang-switch .lang-attiva, .lang-switch span { display: none !important; }
.lang-switch a {
  color: var(--wwa-testo) !important; text-decoration: none; font-family: var(--wwa-font-testo);
  font-weight: 300; letter-spacing: normal; text-transform: none;
}
.lang-switch a:hover { color: var(--wwa-arancio) !important; }
/* desktop: come .header-nav-item a (17.92px / 1.8) */
.header-actions .lang-switch { margin-right: 1.4em; }
.header-actions .lang-switch a { font-size: calc(var(--site-navigation-font-font-size-value) * 1rem * .9955); line-height: 1.8; }
/* menu mobile a schermo intero: come .header-menu-nav-item a */
.header-menu-lang { justify-content: center; margin: 0 0 .4em; }
/* dimensione: la stessa delle voci (.header-menu-nav-item a, in vmin per breakpoint) */
@media (max-width: 767px) { .header-display-mobile .header-actions .lang-switch { display: none; } }

/* Titoli di pagina più grandi (Crimson Pro), allineati a sinistra sul bordo del logo */
.sezione-titolo h2 {
  font-size: clamp(2.5rem, 4.6vw, 4.5rem) !important;  /* ~59px a 1280px, 40px su mobile */
  line-height: 1.08 !important;
  text-align: left !important;
  margin-left: 0 !important; padding-left: 0 !important;
  letter-spacing: -0.005em;
}
/* titoli "This is / We are WhatWeAre|WhatWeDo": sempre su due righe, la seconda mai spezzata */
.sezione-titolo h2 .br-titolo + strong { white-space: nowrap; }

/* Portfolio: 4 anteprime per riga su desktop */
@media (min-width: 1024px) {
  .portfolio-grid-basic { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 32px !important; }
  .portfolio-grid-basic .portfolio-title, .portfolio-grid-basic h3 { font-size: 20px !important; line-height: 1.2 !important; }
}

/* Footer: logo WhatWeAre a destra, stessa dimensione dell'header (50px desktop, 30px mobile) */
.footer-grigio .footer-marchio { width: auto !important; flex: 1 1 auto !important; }
.footer-grigio .footer-logo { margin-left: auto; padding: 0 17px 0 0 !important; display: flex; align-items: center; }
.footer-grigio .footer-logo img { display: block; height: 50px; width: auto; }
@media (max-width: 767px) {
  .footer-grigio .footer-riga { flex-direction: row !important; align-items: center !important; flex-wrap: nowrap; gap: 12px; }
  .footer-grigio .footer-marchio { min-width: 0; }
  .footer-grigio .footer-logo { padding: 0 !important; flex: 0 0 auto; }
  .footer-grigio .footer-logo img { height: 30px; }
}
@media (max-width: 767px) {
  /* prevale sulla regola ".footer-riga > .col { width: 100% }" usata quando le colonne erano impilate */
  .footer-grigio .footer-riga > .footer-marchio { width: auto !important; flex: 1 1 auto !important; min-width: 0; }
  .footer-grigio .footer-riga > .footer-logo { width: auto !important; flex: 0 0 auto !important; margin-left: auto !important; }
}

/* Footer: scritta e icone allineate a destra, subito a sinistra del logo, separate da una linea verticale sottile */
.footer-grigio .footer-riga { justify-content: flex-end; align-items: stretch !important; }
.footer-grigio .footer-riga > .footer-marchio {
  flex: 0 1 auto !important; width: auto !important; margin-left: auto !important;
  align-items: flex-end !important; justify-content: center; text-align: right;
}
.footer-grigio .footer-marchio h4 { text-align: right !important; }
.footer-grigio .footer-marchio .sqs-svg-icon--list,
.footer-grigio .footer-marchio .sqs-svg-icon--outer { justify-content: flex-end !important; }
.footer-grigio .footer-riga > .footer-logo {
  margin-left: 24px !important; padding-left: 24px !important;
  border-left: 1px solid var(--wwa-sfondo);   /* colore dello sfondo delle pagine */
}
@media (max-width: 767px) {
  .footer-grigio .footer-riga > .footer-logo { margin-left: 14px !important; padding-left: 14px !important; }
}

/* Footer: contenuti centrati e ridotti al 75% */
.footer-grigio .footer-riga { justify-content: center !important; }
.footer-grigio .footer-riga > .footer-marchio { margin-left: 0 !important; }
.footer-grigio .footer-marchio h4 { font-size: 18.9px !important; line-height: 1.3 !important; }   /* 25.2 x 0.75 */
.footer-grigio .footer-marchio { gap: 7.5px !important; }
.footer-grigio .sqs-svg-icon--list { --social-icons-dimension: 18px; --social-icons-gap: 9px; }
.footer-grigio .sqs-svg-icon--wrapper { width: 18px !important; height: 18px !important; }
.footer-grigio .footer-riga > .footer-logo { margin-left: 18px !important; padding-left: 18px !important; }
.footer-grigio .footer-logo img { height: 37.5px !important; }  /* 50 x 0.75 */
@media (max-width: 767px) {
  .footer-grigio .footer-marchio h4 { font-size: 16.5px !important; }
  .footer-grigio .footer-riga > .footer-logo { margin-left: 10.5px !important; padding-left: 10.5px !important; }
  .footer-grigio .footer-logo img { height: 22.5px !important; }  /* 30 x 0.75 */
}

/* Grigio medio (a metà tra sfondo #1d1e20 e testo #d4d5d7): testi grigi del footer e linee di separazione */
:root { --wwa-grigio-medio: #2b2c2f; }  /* stesso grigio dei pulsanti area del portfolio (--wwa-card) */
.footer-grigio .footer-marchio h4 { color: var(--wwa-grigio-medio) !important; }   /* "interactive studio"; WhatWeAre resta arancione */
.header-announcement-bar-wrapper::after { background: var(--wwa-grigio-medio) !important; }  /* linea orizzontale sotto l'header */
.footer-grigio .footer-riga > .footer-logo { border-left-color: var(--wwa-grigio-medio) !important; }  /* linea verticale */

/* Logo dell'header +20%: 50 -> 60px su desktop, 30 -> 36px su mobile */
.header-title-logo img { max-height: 60px !important; height: 60px !important; width: auto !important; }
@media (max-width: 767px) {
  .header-title-logo img { max-height: 36px !important; height: 36px !important; }
}
/* logo più grande ricentrato sulle voci di menu, senza cambiare l'altezza dell'header */
.header-title-logo img { margin-top: -5px !important; margin-bottom: -5px !important; }
@media (max-width: 767px) { .header-title-logo img { margin-top: -3px !important; margin-bottom: -3px !important; } }
/* icone social del footer nello stesso grigio dei testi e delle linee */
.footer-grigio .sqs-svg-icon--wrapper .sqs-use--mask { fill: var(--wwa-grigio-medio) !important; }
/* footer: "interactive studio" e icone social leggermente più chiari delle linee */
:root { --wwa-grigio-footer-testo: #45464a; }
.footer-grigio .footer-marchio h4 { color: var(--wwa-grigio-footer-testo) !important; }
.footer-grigio .sqs-svg-icon--wrapper .sqs-use--mask { fill: var(--wwa-grigio-footer-testo) !important; }

/* ===== Progetti: gallerie a griglia con miniature quadrate (ex slideshow) ===== */
.sezione-galleria { min-height: 0 !important; }
.sezione-galleria .content-wrapper { padding-top: 16px !important; padding-bottom: 16px !important; }
.galleria-griglia {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
  width: 100%; max-width: var(--sqs-site-max-width, 1500px); margin: 0 auto;
}
.gg-item {
  display: block; padding: 0; border: 0; margin: 0; background: var(--wwa-card);
  aspect-ratio: 1 / 1; overflow: hidden; cursor: zoom-in;
}
.gg-item img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s ease, opacity .2s;
}
.gg-item:hover img, .gg-item:focus-visible img { transform: scale(1.04); }
.gg-item:focus-visible { outline: 2px solid var(--wwa-arancio); outline-offset: 2px; }
@media (max-width: 1023px) { .galleria-griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .galleria-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } }

/* visualizzatore a schermo intero */
.gg-vista {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 11, .94); cursor: zoom-out; padding: 4vw;
}
.gg-vista[hidden] { display: none; }
.gg-vista img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
html.gg-aperta, html.gg-aperta body { overflow: hidden; }
/* la sezione galleria è "full-bleed": riporta la griglia dentro i margini della pagina (bordo del logo / del pulsante) */
.galleria-griglia { box-sizing: border-box; padding-left: var(--pagePadding, 4vw); padding-right: var(--pagePadding, 4vw); max-width: none; }
@media (max-width: 767px) { .galleria-griglia { padding-left: 6vw; padding-right: 6vw; } }

/* Gallerie: miniature più piccole, griglia allineata al testo (bordi calcolati in js/site.js),
   righe incomplete centrate */
.galleria-griglia {
  display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.galleria-griglia .gg-item { flex: 0 0 var(--gg-lato, 130px); width: var(--gg-lato, 130px); }
@media (max-width: 767px) { .galleria-griglia { gap: 6px; } }

/* Sezione titolo: la PRIMA riga del testo a destra poggia sulla stessa linea di base della
   SECONDA riga del titolo, anche quando il titolo ha una sola riga.
   Offset = base della 2a riga del titolo (1.946 x dimensione titolo) - base della 1a riga di testo (23px).
   Solo desktop/tablet: su mobile il testo è già sotto il titolo. */
@media (min-width: 768px) {
  .sezione-titolo .sqs-col-7 { padding-top: calc(clamp(2.5rem, 4.6vw, 4.5rem) * 1.946 - 23px) !important; }
}

/* ===== Home: camouflage animato (js/camo.js) solo nello sfondo dell'header ===== */
html.pagina-camo header.header, html.pagina-camo .header-menu-bg { background-color: transparent !important; }
html.pagina-camo header.header { isolation: isolate; }
.camo-header { position: absolute; top: 0; left: 0; z-index: -1; pointer-events: none; display: block; }
/* Footer: camouflage in versione grigia (js/camo.js) su tutte le pagine */
html.pagina-camo .footer-grigio, html.pagina-camo .footer-grigio .section-background,
html.pagina-camo .footer-grigio .section-border { background-color: transparent !important; }
html.pagina-camo .footer-grigio { position: relative; isolation: isolate; }
.camo-footer { position: absolute; top: 0; left: 0; z-index: -1; pointer-events: none; display: block; }

/* Contatti: modulo più compatto (interlinee e altezza dei riquadri ridotte) */
.local-form { gap: 12px !important; }
.local-form label { gap: 4px !important; line-height: 1.3 !important; }
.local-form label > span { line-height: 1.3 !important; }
.local-form input, .local-form textarea { line-height: 1.4 !important; padding: 7px 10px !important; }
.local-form textarea { min-height: 96px !important; height: 96px; }
.local-form button { padding: .8em 1.8em !important; line-height: 1.2 !important; margin-top: 4px; }
/* Contatti: errore formato e-mail */
.local-form .campo-errore { display: block; min-height: 0; font-size: 12.5px; line-height: 1.3; color: var(--wwa-arancio); }
.local-form .campo-errore:empty { display: none; }
.local-form input[aria-invalid="true"] { border-color: var(--wwa-arancio) !important; }

/* Progetti: immagine singola (fuori galleria) allineata ai bordi del testo, proporzioni originali */
.galleria-griglia.gg-singola .gg-item { flex: 1 1 100%; width: 100%; aspect-ratio: auto; background: none; }
.galleria-griglia.gg-singola .gg-item img { height: auto; }
.galleria-griglia.gg-singola .gg-item:hover img, .galleria-griglia.gg-singola .gg-item:focus-visible img { transform: none; opacity: .92; }

/* News: pulsanti degli anni (stile dei pulsanti area del portfolio) e archivio che si apre sotto */
.news-anni { display: flex; flex-wrap: wrap; gap: 8px; margin: 2.2em 0 1.4em; }
.news-anno {
  font-family: var(--wwa-font-testo); font-size: 1rem; line-height: 1; letter-spacing: .02em;
  padding: .75em 1.4em; border: 0; border-radius: 0; cursor: pointer;
  background: var(--wwa-card); color: var(--wwa-testo); transition: background-color .2s, color .2s;
}
.news-anno:hover, .news-anno:focus-visible, .news-anno.is-active { background: var(--wwa-arancio); color: #fff; outline: none; }
.news-archivio[hidden] { display: none; }
@media (max-width: 767px) { .news-anni { gap: 6px; flex-wrap: nowrap; } .news-anno { flex: 1 1 0; min-width: 0; padding: .75em 0; font-size: .95rem; } }

/* Header identico in IT e EN: le voci che cambiano lunghezza con la lingua hanno una larghezza minima
   pari a quella della versione più lunga, così nulla si sposta cambiando lingua */
.header-display-desktop .header-nav-item a[href^="contatti"] { display: inline-block; min-width: 3.7em; }
.header-actions .lang-switch a { display: inline-block; min-width: 1.35em; text-align: center; }
.header-display-desktop .header-actions .btn {
  box-sizing: border-box; min-width: 14.9em; text-align: center; justify-content: center;
}

/* Modulo contatti: campo trappola anti-spam (fuori schermo) e messaggio di esito dell'invio */
.local-form .campo-trappola { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.local-form .modulo-esito { margin: 0; font-size: .9rem; line-height: 1.4; }
.local-form .modulo-esito:empty { display: none; }
.local-form .modulo-esito.is-ok { color: var(--wwa-testo) !important; }
.local-form .modulo-esito.is-errore { color: var(--wwa-arancio) !important; }
.local-form button:disabled { opacity: .6; cursor: wait; }
/* avviso privacy sotto il modulo */
.local-form .modulo-privacy { margin: 0; max-width: 640px; font-size: .78rem !important; line-height: 1.5 !important; color: #9fa1a5 !important; }
.local-form .modulo-privacy a { color: inherit !important; text-decoration: underline; }
.local-form .modulo-privacy a:hover { color: var(--wwa-arancio) !important; }

/* Progetti: video (Vimeo, YouTube o file locale) centrato, larghezza 3/4 della pagina su desktop */
.sezione-video { min-height: 0 !important; }
.sezione-video .content-wrapper { padding-top: 16px !important; padding-bottom: 16px !important; }
.blocco-video { box-sizing: border-box; width: 100%; max-width: calc(var(--sqs-site-max-width, 1500px) * .75); margin: 0 auto; padding: 0 var(--pagePadding, 4vw); }
@media (min-width: 768px) { .blocco-video { width: 75%; padding: 0; } }
@media (max-width: 767px) { .blocco-video { padding: 0 6vw; } }
.blocco-video-cornice { position: relative; aspect-ratio: 16 / 9; background: #000; }
.blocco-video-cornice iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Core Team: ritratti a retino animato (js/retino.js), stessa misura della foto che sostituiscono */
.team-membro canvas.retino { display: block; width: 58%; aspect-ratio: 1; height: auto; margin: 0 auto 1em; }
.team-membro img[hidden] { display: none; }

/* Progetti: galleria a carosello (js/carosello.js). Al centro un'immagine alla volta, proporzioni originali,
   al massimo 600 px sul lato lungo; ai lati le miniature quadrate (120 px) retinate in grigio della precedente
   e della successiva: il click sulla miniatura cambia immagine. Se ai lati non c'è spazio (.car-stretto),
   niente miniature ma due frecce sovrapposte all'immagine. */
.galleria-griglia.gg-carosello { display: grid !important; grid-template-columns: 120px minmax(0, 600px) 120px;
  justify-content: center; align-items: center; column-gap: 32px; outline: none; }
.galleria-griglia.gg-carosello.car-stretto { grid-template-columns: minmax(0, 600px); }
@media (max-width: 767px) { .galleria-griglia.gg-carosello { padding-left: 6vw; padding-right: 6vw; } }
.car-palco { position: relative; height: 450px; }
.gg-carosello .car-palco .gg-item { position: absolute; inset: 0; flex: none; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  aspect-ratio: auto; background: none; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.gg-carosello .car-palco .gg-item.is-attiva { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.gg-carosello .car-palco .gg-item img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.gg-carosello .gg-item:hover img, .gg-carosello .gg-item:focus-visible img { transform: none; }
.gg-carosello .gg-item:focus-visible { outline-offset: -2px; }
.car-mini { display: block; width: 120px; height: 120px; padding: 0; border: 0; background: none; cursor: pointer; transition: opacity .2s ease; }
.car-mini canvas, .car-mini img { display: block; width: 120px; height: 120px; }
.car-mini img { object-fit: cover; filter: grayscale(1) contrast(.8); opacity: .55; }   /* se il retino non si può disegnare (pagina aperta da file) */
.car-mini:hover, .car-mini:focus-visible { opacity: .75; }
.car-stretto .car-mini { display: none; }
.galleria-griglia.gg-carosello.car-una { grid-template-columns: minmax(0, 600px); }
.car-una .car-mini, .car-una .car-freccia { display: none !important; }
.car-freccia { display: none; position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 0; border-radius: 50%;
  align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer; transition: background .2s ease; }
.car-stretto .car-freccia { display: flex; }
.car-freccia-prec { left: calc(var(--car-margine, 0px) + 8px); }
.car-freccia-succ { right: calc(var(--car-margine, 0px) + 8px); }
.car-freccia svg { width: 9px; height: 16px; stroke: currentColor; stroke-width: 2; }
.car-freccia:hover, .car-freccia:focus-visible { background: var(--wwa-arancio); }
.car-mini:focus-visible, .car-freccia:focus-visible, .gg-carosello:focus-visible .car-palco { outline: 2px solid var(--wwa-arancio); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .gg-carosello .car-palco .gg-item, .gg-carosello .car-palco .gg-item.is-attiva { transition: none; } }