:root {
  /* una sola superficie: tutto è in rilievo o inciso nella stessa pietra chiara */
  --bg: #ece8e1;
  --hi: rgba(255, 255, 255, .95);
  --lo: rgba(145, 134, 119, .58);
  --ink: #2740B0;          /* blu notte del kit logo, unico colore d'identità */
  --text: #34394a;
  --muted: #62646d;
  --groove: rgba(158, 148, 133, .38);
  --accent: #2740B0;       /* superfici piene: pulsante principale, nodo A */
  --accent-hover: #1f338d;
  --on-accent: #ffffff;
  --relief-hi: rgba(255, 255, 255, .95);
  --relief-lo: rgba(150, 139, 122, .55);
  --emboss: 1px 1px 0 rgba(255, 255, 255, .85);
  --photo: saturate(.88) contrast(1.02);
  --map: grayscale(.85) contrast(.95) brightness(1.02);

  --raised: -10px -10px 22px var(--hi), 12px 12px 26px var(--lo), -1px -1px 2px var(--hi), 2px 2px 4px var(--lo);
  --raised-sm: -6px -6px 13px var(--hi), 7px 7px 16px var(--lo), -1px -1px 2px var(--hi), 1px 1px 3px var(--lo);
  /* ombra tinta del colore pieno (blu notte): la proiettano le superfici piene, card blu, pulsante principale, bollino A */
  --accent-lo: color-mix(in srgb, var(--accent) 55%, transparent);
  --raised-accent: -10px -10px 22px var(--hi), 12px 12px 26px var(--accent-lo), -1px -1px 2px var(--hi), 2px 2px 4px var(--accent-lo);
  /* quadratino pieno incavato: l'ombra interna tinta del colore pieno, anche quando si riempie al passaggio */
  --inset-accent: inset 5px 5px 11px color-mix(in srgb, var(--accent) 58%, #000), inset -5px -5px 11px color-mix(in srgb, var(--accent) 90%, #fff);
  --raised-accent-sm: -6px -6px 13px var(--hi), 7px 7px 16px var(--accent-lo), -1px -1px 2px var(--hi), 1px 1px 3px var(--accent-lo);
  --inset: inset 9px 9px 20px var(--lo), inset -9px -9px 20px var(--hi), inset 1px 1px 2px var(--lo), inset -1px -1px 2px var(--hi);
  --inset-sm: inset 5px 5px 10px var(--lo), inset -5px -5px 10px var(--hi), inset 1px 1px 2px var(--lo), inset -1px -1px 2px var(--hi);

  --radius: 30px;
  --radius-btn: 16px;      /* pulsanti: angolo da riquadro, non pillola */
  --pad: clamp(20px, 5vw, 80px);
  --gap: clamp(18px, 2.4vw, 40px);
  --section: clamp(88px, 12vh, 150px);
  --header: 84px;

  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", Georgia, serif;   /* titoli; testi, pulsanti e voci piccole restano in Manrope */
  /* freccia disegnata: centrata sul testo a differenza del carattere del font */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--header); -webkit-text-size-adjust: 100%; background: var(--bg); touch-action: manipulation; }
html.js-smooth-scroll { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html, html.js-smooth-scroll { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, dl, dd, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.nowrap { white-space: nowrap; }

.wrap { padding-left: var(--pad); padding-right: var(--pad); max-width: 1680px; margin: 0 auto; }

h1, h2, h3 { color: var(--ink); font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
h1 { letter-spacing: -.025em; }
h2 { font-size: clamp(2.1rem, 3.6vw, 3.6rem); line-height: 1.02; }
.lead { font-size: clamp(1.06rem, 1.25vw, 1.2rem); text-wrap: pretty; }

/* Superfici */
.raised { background: var(--bg); border-radius: var(--radius); box-shadow: var(--raised); }

/* Pulsanti: in rilievo finché non vengono premuti */
.btn {
  display: inline-block;
  padding: 1em 1.8em;
  border-radius: var(--radius-btn);
  font: 600 .98rem/1.2 var(--sans);
  text-decoration: none;
  transition: box-shadow .2s, background-color .2s, transform .2s;
}
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--raised-accent-sm); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { box-shadow: inset 3px 3px 8px rgba(0, 0, 0, .35); }
.btn-soft { background: var(--bg); color: var(--ink); box-shadow: var(--raised-sm); }

.btn-soft:hover { box-shadow: -3px -3px 8px var(--hi), 4px 4px 9px var(--lo); }
.btn-soft:active { box-shadow: var(--inset-sm); }
.btn:focus-visible, .site-nav a:focus-visible, .lang a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header);
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  padding: 0 var(--pad);
  /* trasparente in cima alla pagina: non taglia l'alone chiaro della hero che sale sotto la barra */
  background: transparent;
  transition: box-shadow .3s, background-color .3s;
}
.site-header.is-scrolled { background: var(--bg); box-shadow: 0 10px 24px -14px var(--lo); }
/* con il menu aperto la barra torna piena: il menu parte sotto di lei e la hero non deve trasparire */
.site-header:has(.menu-toggle[aria-expanded="true"]) { background: var(--bg); }
.brand img { width: 190px; height: auto; }
.site-nav { display: flex; gap: clamp(18px, 2.4vw, 38px); margin-left: auto; }
.site-nav a { text-decoration: none; font-size: .96rem; font-weight: 500; color: var(--ink); }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }

/* Lingua: binario inciso, la lingua corrente è il cursore in rilievo */
.lang { --lp: 5px; --lang-size: 34px; display: flex; gap: 4px; padding: var(--lp); border-radius: calc(var(--radius-btn) - 2px); box-shadow: var(--inset-sm); font-size: .82rem; font-weight: 600; }
.lang a { display: grid; place-items: center; flex: none; inline-size: var(--lang-size); block-size: var(--lang-size); padding: 0; border-radius: calc(var(--radius-btn) - 7px); text-decoration: none; color: var(--muted); }
.lang a[aria-current] { color: var(--ink); background: var(--bg); box-shadow: -3px -3px 7px var(--hi), 3px 3px 8px var(--lo); }
/* Indicatore che scorre fra le lingue (aggiunto da main.js; senza JS resta lo stile qui sopra) */
.lang { position: relative; }
.lang a { position: relative; z-index: 1; transition: color .3s; }
.lang.has-pill a[aria-current] { background: none; box-shadow: none; }
.lang-pill { position: absolute; z-index: 0; top: var(--lp); bottom: var(--lp); left: 0; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: calc(var(--radius-btn) - 7px); background: var(--bg); box-shadow: -3px -3px 7px var(--hi), 3px 3px 8px var(--lo); }
.lang.pill-ready .lang-pill { transition: transform .42s cubic-bezier(.3, .8, .2, 1), width .42s cubic-bezier(.3, .8, .2, 1); }

/* Cambio lingua sul posto: i testi che cambiano sfumano e rientrano, dall'alto verso il basso.
   Solo opacità e movimento (niente sfocature): restano sulla scheda grafica. */
.swap-t, .swap-img { transition: opacity .12s ease, transform .12s ease; will-change: opacity, transform; }
.swap-t.swap-out { opacity: 0; transform: translateY(-4px); }
.swap-img.swap-out { opacity: 0; }
.swap-t.swap-in { animation: swap-in .48s cubic-bezier(.2, .75, .2, 1) var(--d, 0ms) both; }
.swap-img.swap-in { animation: swap-fade .5s ease var(--d, 0ms) both; }
@keyframes swap-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes swap-fade { from { opacity: 0; } to { opacity: 1; } }
.swap-new { animation: swap-fade .45s ease both; }
/* Cambio lingua: larghezza delle azioni e altezza dei testi seguono la stessa curva. */
.swap-size-from { overflow: clip; }
.swap-size-nowrap { white-space: nowrap; }
.swap-size { transition: inline-size .5s cubic-bezier(.3, .8, .2, 1), block-size .5s cubic-bezier(.3, .8, .2, 1) !important; }
@media (prefers-reduced-motion: reduce) { .lang.pill-ready .lang-pill, .lang a { transition: none; } }
.menu-toggle { display: none; }
.mobile-menu[hidden] { display: none; }

/* Pozzetto: una finestra scavata nella superficie, la foto virata nel tono della pietra */
.well { position: relative; margin: 0; padding: 14px; border-radius: var(--radius); box-shadow: var(--inset); }
.well > img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius) - 12px); filter: var(--photo); }


/* Segnaposto sulla mappa */
.pin { position: absolute; left: 55%; top: 50%; transform: translate(-27px, -50%); display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: var(--radius-btn); font-size: .9rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.pin svg { width: 30px; height: auto; fill: var(--ink); }
.map-credit { position: absolute; right: 26px; bottom: 22px; font-size: .7rem; color: var(--muted); background: color-mix(in srgb, var(--bg) 85%, transparent); padding: 1px 8px; border-radius: 6px; }

/* Footer */
.site-footer { padding-top: 56px; padding-bottom: 32px; font-size: .9rem; color: rgba(255, 255, 255, .72); background: var(--accent); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1.2fr .8fr; gap: 36px var(--gap); align-items: start; }
/* il logo sta da solo al centro, sopra sede, contatti e menu */
.footer-identity { grid-column: 1 / -1; display: flex; justify-content: center; padding-bottom: 12px; }
.footer-logo { width: clamp(230px, 26vw, 340px); }
.footer-relief svg { width: 100%; height: auto; overflow: visible; fill: var(--on-accent); }
.footer-wordmark { display: block; width: 100%; height: auto; margin-top: 18px; }
@media (min-width: 1101px) {
  /* desktop: il logo resta nella prima colonna, ridimensionato */
  .footer-grid { grid-template-columns: .8fr 1.4fr 1.2fr .8fr; }
  .footer-identity { grid-column: auto; justify-content: flex-start; padding-bottom: 0; }
  .footer-logo { width: clamp(140px, 11vw, 168px); }
}
.footer-title { color: var(--on-accent); font-weight: 600; margin-bottom: 18px; }
.footer-row { display: flex; align-items: flex-start; gap: 12px; text-decoration: none; }
.footer-row > svg { flex: none; width: 22px; height: 22px; margin-top: 2px; fill: none; stroke: var(--on-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.footer-row > span { min-width: 0; }
.footer-row small { display: block; color: rgba(255, 255, 255, .62); font-size: .78rem; }
.footer-contacts { display: grid; gap: 14px; }
.footer-contacts .footer-title { margin-bottom: 4px; }
.footer-contacts .footer-row { color: var(--on-accent); }
.footer-row:hover > span { text-decoration: underline; text-underline-offset: 4px; }
.footer-row:focus-visible, .footer-links a:focus-visible { outline: 2px solid var(--on-accent); outline-offset: 4px; }
.site-footer nav { display: flex; flex-direction: column; gap: 8px; }
.site-footer nav a { color: var(--on-accent); text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; }
.footer-bottom { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: .78rem; }


@media (max-width: 820px) {
  :root {
    --header: 68px;
    --section: 72px;
    --radius: 22px;
    --radius-btn: 14px;
    --raised: -7px -7px 16px var(--hi), 9px 9px 20px var(--lo), -1px -1px 2px var(--hi), 1px 1px 3px var(--lo);
    --inset: inset 7px 7px 16px var(--lo), inset -7px -7px 16px var(--hi), inset 1px 1px 2px var(--lo), inset -1px -1px 2px var(--hi);
  }
  body { font-size: 16px; }
  .site-nav { display: none; }
  .site-header { gap: 10px; }
  .brand img { width: 150px; }
  /* le lingue restano sempre in vista nella barra, accanto al pulsante del menu */
  .site-header > .lang { --lp: 3px; --lang-size: 30px; margin-left: auto; gap: 2px; font-size: .78rem; }
  .site-header > .lang a { padding: 0; }
  .menu-toggle {
    display: grid;
    place-items: center;
    width: 48px;
    height: 44px;
    margin-left: 0;
    flex: none;
    padding: 10px;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    border: 0;
    border-radius: var(--radius-btn);
    background: var(--bg);
    box-shadow: var(--raised-sm);
    font: 600 .95rem/1.2 var(--sans);
    color: var(--ink);
    cursor: pointer;
  }
  .menu-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
  .menu-toggle[aria-expanded="true"] { box-shadow: var(--inset-sm); }
  .menu-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .menu-icon path { transform-origin: 12px 12px; transition: transform .22s ease; }
  .menu-toggle[aria-expanded="true"] .menu-line-top { transform: translateY(4px) rotate(45deg); transform-origin: 12px 8px; }
  .menu-toggle[aria-expanded="true"] .menu-line-bottom { transform: translateY(-4px) rotate(-45deg); transform-origin: 12px 16px; }
  .mobile-menu:not([hidden]) {
    position: fixed;
    inset: var(--header) 0 auto;
    height: calc(100svh - var(--header));
    height: calc(100dvh - var(--header));
    overflow: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .22s ease, transform .22s ease;
    z-index: 49;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    padding: 24px var(--pad) max(24px, env(safe-area-inset-bottom));
  }
  .mobile-menu.is-open { opacity: 1; transform: none; }
  .mobile-menu-links { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: stretch; padding: 0 4px 12px; margin: 0 -4px; }
  .mobile-menu-links > a { flex: none; font-size: 2rem; font-weight: 600; letter-spacing: -.03em; color: var(--ink); text-decoration: none; padding: 10px 0; }

  .well { padding: 8px; }
  .well > img { border-radius: calc(var(--radius) - 8px); }
  .pin { padding: 8px 12px 8px 10px; font-size: .82rem; }
  .pin svg { width: 24px; }
}

/* Telefoni stretti */
@media (max-width: 420px) {
  h2 { font-size: 1.85rem; }
}

/* Freccia del pulsante Chi siamo nella homepage: le pagine interne non usano frecce nei pulsanti */
.h-more .btn-soft::after {
  content: "";
  display: inline-block;
  width: 1em; height: 1em;
  margin-left: .4em;
  vertical-align: -.16em;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  transition: transform .25s;
}
@media (prefers-reduced-motion: reduce) { .h-more .btn-soft::after, .btn, .site-header { transition: none; } }

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer-logo { width: clamp(200px, 62vw, 260px); }
  .site-footer .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
  .footer-bottom { margin-top: 32px; }
}

/* Le azioni non selezionano testo al doppio tocco; il focus da tastiera resta visibile. */
.btn, .h-hero-cta, .h-hero-about, .lang a { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu:not([hidden]), .menu-icon path { transition: none; }
}

@media (max-width: 820px) and (max-height: 600px) {
  .mobile-menu-links > a { font-size: 1.45rem; line-height: 1.3; padding: 8px 0; }
}

/* ================================================================== Pagine interne
   Stessa grammatica della homepage: il testo sta sulla superficie, il rilievo solo su ciò che si preme,
   le linee incise collegano ciò che dipende da qualcosa (entità e servizi, fasi del metodo),
   il piano incavato più profondo è riservato al GEN-D. */

:root {
  --plate: #e2ded7;
  --line: rgba(120, 110, 96, .42);
  --line-hi: rgba(255, 255, 255, .9);
}

.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.mobile-menu-links > a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }

.inner main > section { padding-bottom: var(--section); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.prose p + p { margin-top: 1em; }
.prose { text-wrap: pretty; }
.muted { color: var(--muted); }

/* ------------------------------------------------------------------ Testata */
.ph { row-gap: 28px; padding-top: clamp(28px, 6vh, 80px); }
.ph-text { grid-column: 1 / 9; }
.ph h1 { font-size: clamp(2.6rem, 5.6vw, 5.6rem); line-height: 1; letter-spacing: -.05em; }
.ph .lead { margin-top: clamp(20px, 3vh, 30px); max-width: 36em; }
.ph-tags { margin-top: 22px; font-size: .95rem; font-weight: 600; color: var(--muted); }

/* testata con fotografia: testo in basso a sinistra, foto in rilievo a destra come nell'apertura della home */
.ph-photo { align-items: end; }
.ph-photo .ph-text { grid-column: 1 / 8; padding-bottom: 8px; }
.ph-figure { grid-column: 8 / 13; margin: 0; position: relative; height: clamp(420px, 66vh, 700px); border-radius: var(--radius); overflow: hidden; box-shadow: var(--raised); }
.ph-figure > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--photo); }

/* selettore delle entità: binario inciso, il passaggio solleva la voce */
.subnav { margin-top: clamp(28px, 4vh, 40px); display: inline-flex; gap: 6px; padding: 7px; border-radius: calc(var(--radius-btn) + 7px); box-shadow: var(--inset-sm); }
.subnav a { padding: .8em 1.5em; border-radius: var(--radius-btn); font-weight: 600; font-size: .95rem; color: var(--ink); text-decoration: none; transition: box-shadow .25s, background .25s; }
.subnav a:hover { background: var(--bg); box-shadow: -4px -4px 9px var(--hi), 4px 4px 10px var(--lo); }
.subnav a:active { box-shadow: var(--inset-sm); }
.subnav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ------------------------------------------------------------------ Titolo e testo affiancati */
.split { row-gap: 24px; align-items: start; }
.split > h2, .split > .split-side { grid-column: 1 / 6; }
.split > .prose { grid-column: 7 / 13; }
.split h2 { font-size: clamp(1.9rem, 3vw, 3rem); }

/* citazione: sulla superficie, segnata da una linea incisa */
.quote { margin: 0; padding-left: clamp(22px, 2.6vw, 40px); position: relative; }
.quote::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 2px; background: var(--line); box-shadow: 1px 1px 0 var(--line-hi); }
.quote p { font-size: clamp(1.4rem, 2.4vw, 2.3rem); line-height: 1.28; font-weight: 500; letter-spacing: -.025em; color: var(--ink); text-wrap: pretty; }
.quote p + p { margin-top: .55em; }
.quote-wide { grid-column: 1 / 12; }
.split .quote p { font-size: clamp(1.3rem, 1.9vw, 1.85rem); }

/* frase conclusiva a corpo grande, con l'azione allineata al suo fondo */
.statement { row-gap: 32px; align-items: end; }
.statement > p { grid-column: 1 / 9; font-size: clamp(1.2rem, 1.7vw, 1.6rem); line-height: 1.45; font-weight: 500; letter-spacing: -.015em; color: var(--ink); text-wrap: pretty; }
.statement > .press { grid-column: 9 / 13; }

/* ------------------------------------------------------------------ Azioni a riquadro (come nell'apertura della home) */
.press {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: clamp(76px, 9vh, 92px);
  padding: clamp(16px, 1.8vw, 24px);
  border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent);
  box-shadow: var(--raised-accent);
  text-decoration: none;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: box-shadow .3s, background .3s;
}
.press-label { min-width: 0; flex: 1; font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.press-arrow { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--accent); box-shadow: var(--inset-accent); transition: transform .3s; }
.press-arrow svg { display: block; width: 28px; height: 28px; }
.press-arrow svg path { stroke-width: 2.3px; }
.press:hover { background: var(--accent-hover); }
.press:active { box-shadow: inset 4px 4px 12px rgba(0, 0, 0, .35); }
.press-soft { background: var(--bg); color: var(--ink); }
.press-soft .press-arrow { color: var(--on-accent); flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--accent); box-shadow: var(--inset-accent); transition: transform .3s; }
.press-soft:hover { background: var(--bg); box-shadow: -13px -13px 26px var(--hi), 15px 15px 32px var(--lo), -1px -1px 2px var(--hi), 2px 2px 4px var(--lo); }
.press-soft:active { box-shadow: var(--inset); }
.press:focus-visible, .ctile:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* recapiti diretti: icona incavata che si riempie quando il riquadro è scelto */
.ctile {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; align-items: center;
  padding: clamp(16px, 1.6vw, 22px);
  border-radius: var(--radius);
  background: var(--bg); box-shadow: var(--raised);
  text-decoration: none; color: var(--ink);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: box-shadow .3s;
}
.ctile-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-btn); box-shadow: var(--inset-sm); transition: background .3s, color .3s, box-shadow .3s; }
.ctile-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ctile-label { align-self: end; font-size: .85rem; font-weight: 600; color: var(--muted); }
.ctile-value { align-self: start; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctile:hover { box-shadow: -13px -13px 26px var(--hi), 15px 15px 32px var(--lo), -1px -1px 2px var(--hi), 2px 2px 4px var(--lo); }
.ctile:hover .ctile-icon, .ctile:focus-visible .ctile-icon { background: var(--accent); color: var(--on-accent); box-shadow: var(--inset-accent); }
.ctile:active { box-shadow: var(--inset); }

/* chiusura: titolo e frase a sinistra, appuntamento e recapiti a destra */
.close { row-gap: 32px; align-items: center; }
.close-text { grid-column: 1 / 7; }
.close-text h2 { font-size: clamp(1.9rem, 3vw, 3rem); }
.close-text h2 + p { margin-top: 18px; }
.close-text .prose { margin-top: 18px; }
.close-actions { grid-column: 8 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 22px); }
.close-actions > .press { grid-column: 1 / -1; }

/* ------------------------------------------------------------------ Chi siamo */
.quote-row { row-gap: 0; }
.founder { row-gap: 32px; align-items: start; }
.portrait { grid-column: 1 / 6; aspect-ratio: 4 / 5; position: sticky; top: calc(var(--header) + 24px); }
.portrait-empty { position: absolute; inset: 14px; display: grid; place-items: center; align-content: center; gap: 20px; border-radius: calc(var(--radius) - 12px); }
.portrait-empty svg { width: 42%; fill: var(--bg); filter: drop-shadow(-4px -4px 5px var(--relief-hi)) drop-shadow(5px 5px 7px var(--relief-lo)); }
.portrait-empty figcaption { font-size: .85rem; color: var(--muted); text-align: center; padding: 0 12px; }
.founder-text { grid-column: 7 / 13; }
.founder-text h2 { font-size: clamp(2.1rem, 3.6vw, 3.6rem); }
.founder-role { margin-top: 8px; font-weight: 600; color: var(--muted); }
.founder-text .prose { margin-top: 32px; }

/* il GEN-D vive sempre sul piano incavato: copertina in rilievo, testo e azione */
.gd-note {
  margin-top: clamp(36px, 5vh, 52px);
  display: grid; grid-template-columns: clamp(92px, 9vw, 128px) minmax(0, 1fr); column-gap: clamp(20px, 2.4vw, 32px); align-items: center;
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: var(--radius);
  background: var(--plate); box-shadow: var(--inset);
}
.gd-note-book { display: block; padding: 8px; border-radius: 16px; background: var(--plate); box-shadow: -6px -6px 14px var(--hi), 7px 7px 16px var(--lo); transition: box-shadow .3s; }
.gd-note-book img { width: 100%; border-radius: 9px; }
.gd-note-book:hover { box-shadow: -8px -8px 18px var(--hi), 9px 9px 20px var(--lo); }
.gd-note-book:active { box-shadow: var(--inset-sm); }
.gd-note .btn { margin-top: 20px; }

/* le tre entità con lo stesso schema della home: il simbolo e i tre rami */
.inner .h-entities-heading { justify-content: flex-start; }
.inner .h-entities-heading .lead { max-width: 40em; }
@container servizi (min-width: 860px) {
  .inner .h-entities-heading { align-items: center; }
  .inner .h-entities-heading .lead { order: -1; }
}

/* ------------------------------------------------------------------ Servizi: entità e rami */
.ent { row-gap: 28px; align-items: start; scroll-margin-top: 0; }
.ent-photo { grid-column: 1 / 6; aspect-ratio: 5 / 4; position: sticky; top: calc(var(--header) + 24px); }
.ent-photo > img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); }
.ent-body { grid-column: 7 / 13; align-self: center; }
.ent-flip .ent-photo { grid-column: 8 / 13; grid-row: 1; }
.ent-flip .ent-body { grid-column: 1 / 7; grid-row: 1; }
.ent h2 { font-size: clamp(2.1rem, 3.6vw, 3.6rem); }
.ent-lead { margin-top: 18px; }

/* i servizi pendono da una linea incisa che scende dal titolo, un nodo per ciascuno */
.branches { --node: 12px; --row: clamp(28px, 4vh, 40px); --top: .58em; position: relative; margin-top: 20px; padding-top: clamp(28px, 4vh, 40px); display: grid; gap: var(--row); }
.branches::before { content: ""; position: absolute; left: calc(var(--node) / 2 - 1px); top: 0; height: calc(clamp(28px, 4vh, 40px) + var(--top)); width: 2px; background: var(--line); box-shadow: 1px 1px 0 var(--line-hi); }
.branch { position: relative; padding-left: calc(var(--node) + clamp(20px, 2vw, 28px)); }
.branch::before { content: ""; position: absolute; left: 0; top: calc(var(--top) - var(--node) / 2); width: var(--node); height: var(--node); border-radius: 50%; background: var(--line); box-shadow: 1px 1px 0 var(--line-hi); }
.branch:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--node) / 2 - 1px); top: var(--top); bottom: calc(-1 * var(--row) - var(--top)); width: 2px; background: var(--line); box-shadow: 1px 1px 0 var(--line-hi); }
.branch h3 { font-size: clamp(1.2rem, 1.5vw, 1.4rem); line-height: 1.16; letter-spacing: -.02em; }
.branch h3 + p { margin-top: 10px; }
.branch p + p { margin-top: .7em; }
.branch p { text-wrap: pretty; }

/* ------------------------------------------------------------------ GEN-D CODE */
.gd-hero { row-gap: 36px; align-items: center; padding-top: clamp(28px, 6vh, 72px); }
.gd-hero h1 { font-size: clamp(2.6rem, 5vw, 5rem); line-height: 1; letter-spacing: -.02em; }
.tagline { margin-top: 22px; font-size: clamp(1.2rem, 1.6vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.gd-hero .lead { margin-top: 14px; max-width: 34em; }
.actions { margin-top: clamp(28px, 4vh, 40px); display: flex; flex-wrap: wrap; gap: 16px; }
.actions .btn { min-width: 13.2rem; text-align: center; }

.plate { padding: clamp(28px, 5vw, 80px); border-radius: calc(var(--radius) * 1.4); background: var(--plate); box-shadow: var(--inset); }

/* O × V × C = A: una linea incisa unisce le fasi, ogni elemento ne disegna il proprio tratto */
.chain { --disc: clamp(58px, 5.4vw, 78px); --op: 30px; position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.chain > li { position: relative; }
.chain > li::before { content: ""; position: absolute; top: calc(var(--disc) / 2 - 1px); left: 0; right: 0; height: 2px; background: var(--line); box-shadow: 1px 1px 0 var(--line-hi); }
.chain > .step::before { left: calc(var(--disc) / 2); }
.step:last-child::before { content: none; }
.step { padding-right: clamp(12px, 1.6vw, 24px); }
.disc { position: relative; z-index: 1; display: grid; place-items: center; width: var(--disc); height: var(--disc); border-radius: 50%; background: var(--plate); box-shadow: -7px -7px 16px var(--hi), 8px 8px 18px var(--lo); font-size: calc(var(--disc) * .4); font-weight: 600; line-height: 1; color: var(--ink); }
.step-a .disc, .disc-a { background: var(--accent); color: var(--on-accent); box-shadow: -6px -6px 14px var(--hi), 7px 7px 16px var(--accent-lo); }
.step h3 { margin-top: 22px; font-size: 1.15rem; letter-spacing: -.02em; }
.step-orig { display: block; margin-top: 2px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.step p { margin-top: 12px; font-size: .98rem; text-wrap: pretty; }
.op { display: flex; justify-content: center; }
/* in orizzontale i segni stanno a metà fra due dischi: le fasi occupano un quarto ciascuna */
.chain > .op { position: absolute; top: calc(var(--disc) / 2 - var(--op) / 2); left: calc((var(--k) - .5) * 25% + var(--disc) / 2 - var(--op) / 2); }
.chain > .op::before { content: none; }
.chain > .op > span { margin-top: 0; }
.op > span { position: relative; z-index: 1; display: grid; place-items: center; width: var(--op); height: var(--op); margin-top: calc(var(--disc) / 2 - var(--op) / 2); border-radius: 50%; background: var(--plate); font-size: 1.3rem; font-weight: 500; line-height: 1; color: var(--ink); }
.chain-compact .step h3 { margin-top: 18px; }
/* catena compatta (solo nomi): fasi centrate come nella home, il segno sul confine fra due quarti */
@media (min-width: 901px) {
  .chain-compact .step { display: flex; flex-direction: column; align-items: center; padding: 0; text-align: center; }
  .chain-compact > .step::before { left: 50%; right: -50%; }
  .chain-compact > .op { left: calc(var(--k) * 25% - var(--op) / 2); }
  .chain-compact + .identity { justify-content: center; }
}

/* A = I → SD: la seconda riga dello stesso schema */
.identity { margin-top: clamp(40px, 6vh, 64px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.identity-chain { position: relative; display: flex; align-items: center; gap: 14px; --disc: 56px; }
.identity-chain::before { content: ""; position: absolute; left: calc(var(--disc) / 2); right: calc(var(--disc) / 2); top: calc(50% - 1px); height: 2px; background: var(--line); box-shadow: 1px 1px 0 var(--line-hi); }
.identity-chain .op > span { margin: 0; }
.identity-chain .disc { font-size: 1.35rem; }
.disc-wide { width: auto; min-width: var(--disc); padding: 0 20px; border-radius: 999px; }
.identity-text { font-weight: 600; color: var(--ink); }

/* due applicazioni affiancate: griglia di definizioni sulla superficie, l'azione in fondo */
.duo { row-gap: 56px; }
.duo-item { grid-column: span 6; display: flex; flex-direction: column; }
.duo-item h3 { font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.1; }
.duo-item dl { margin: 26px 0 0; display: grid; gap: 18px; }
.duo-item dt { font-size: .9rem; font-weight: 600; color: var(--muted); }
.duo-item dd { margin: 4px 0 0; color: var(--ink); }
.duo-item .ph-tags { margin-top: 18px; }
.duo-item > .btn { margin-top: auto; align-self: flex-start; min-width: 13.2rem; text-align: center; }
.duo-item > :nth-last-child(2) { margin-bottom: 32px; }

/* simulatore: sul piano del GEN-D */
.sim { row-gap: 24px; }
.sim-head { grid-column: 1 / 6; }
.sim-head h2 { font-size: clamp(1.9rem, 3vw, 3rem); }
.sim-body { grid-column: 7 / 13; }
.sim-body .btn { margin-top: 28px; }
.disclaimer { grid-column: 1 / -1; margin-top: clamp(16px, 3vh, 32px); font-size: .86rem; color: var(--muted); max-width: 60em; }

/* ------------------------------------------------------------------ Contatti */
.cx { row-gap: 48px; align-items: start; }
/* recapiti subito sotto l'apertura, larghi quanto il loro contenuto */
.cx-channels { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: clamp(14px, 1.6vw, 22px); }
.cx-channels .ctile { flex: 0 1 auto; min-width: 0; padding-right: clamp(26px, 2.6vw, 40px); }
.cx-form { grid-column: 1 / 7; display: grid; gap: 20px; }
/* la sede compare una sola volta: mappa e indirizzo accanto al modulo */
.cx-place { grid-column: 8 / 13; }
.cx-place .map-well { width: 100%; }
.cx-place .cx-map-text { margin-top: clamp(24px, 3vw, 36px); }
.cx-form h2 { font-size: clamp(1.7rem, 2.4vw, 2.4rem); margin-bottom: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 8px; font-size: .92rem; font-weight: 600; color: var(--ink); }
.field em { font-style: normal; font-weight: 500; color: var(--muted); }
.field input, .field textarea { width: 100%; padding: .85em 1em; border: 0; border-radius: var(--radius-btn); background: var(--bg); box-shadow: var(--inset-sm); font: 400 1rem/1.4 var(--sans); color: var(--text); resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--muted); }
.consent input { margin-top: .3em; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.consent a, .form-status a { color: var(--ink); }
.form-actions { margin-top: 4px; }
.form-actions .btn { border: 0; cursor: pointer; min-width: 13.2rem; }
.form-status { padding: 14px 18px; border-radius: var(--radius-btn); box-shadow: var(--inset-sm); font-size: .92rem; }
.cx-note { font-size: .92rem; color: var(--muted); }
.cx-note strong { color: var(--ink); }

/* la mappa resta intera (il segnaposto è calibrato sull'immagine); a fianco come si riceve */
.cx-map { row-gap: 32px; align-items: center; }
.cx-map .map-well { grid-column: 1 / 8; aspect-ratio: 10 / 7; }
.cx-map .map-well > img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); filter: var(--map); }
.cx-map-text { grid-column: 9 / 13; }
.cx-map-text h2 { font-size: clamp(1.7rem, 2.4vw, 2.4rem); }
.cx-map-text p { margin-top: 16px; }

/* ------------------------------------------------------------------ Privacy */
.legal-grid { align-items: start; }
.legal-toc { grid-column: 1 / 4; position: sticky; top: calc(var(--header) + 24px); display: grid; gap: 10px; font-size: .92rem; }
.legal-toc a { color: var(--muted); text-decoration: none; }
.legal-toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.legal { grid-column: 5 / 12; }
.legal h2 { margin: 2.2em 0 .6em; font-size: clamp(1.3rem, 1.8vw, 1.6rem); letter-spacing: -.02em; scroll-margin-top: 16px; }
.legal h2:first-child { margin-top: 0; }
.legal .legal-break { margin-top: 2.8em; font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.bullets { margin-top: .8em; display: grid; gap: .4em; }
.bullets li { position: relative; padding-left: 1.3em; }
.bullets li::before { content: ""; position: absolute; left: 0; top: .66em; width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.site-footer p a { color: var(--on-accent); text-decoration: none; }
.site-footer p a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ Tablet */
@media (max-width: 1100px) {
  .ph-text { grid-column: 1 / 11; }
  .ph-photo .ph-text { grid-column: 1 / 7; }
  .ph-figure { grid-column: 7 / 13; }
  .portrait { grid-column: 1 / 6; }
  .founder-text { grid-column: 6 / 13; }
  .ent-photo { grid-column: 1 / 6; }
  .ent-body { grid-column: 6 / 13; }
  .ent-flip .ent-photo { grid-column: 8 / 13; }
  .ent-flip .ent-body { grid-column: 1 / 8; }
    .close-text { grid-column: 1 / 13; }
  .close-actions { grid-column: 1 / 13; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .close-actions > .press { grid-column: auto; }
  .statement > p { grid-column: 1 / 13; }
  .statement > .press { grid-column: 1 / 7; }
  .cx-form { grid-column: 1 / 13; }
  .cx-place { grid-column: 1 / 13; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(24px, 4vw, 48px); align-items: center; }
  .cx-place .cx-map-text { margin-top: 0; }
  .cx-map .map-well { grid-column: 1 / 8; }
  .cx-map-text { grid-column: 8 / 13; }
  .legal-toc { display: none; }
  .legal { grid-column: 1 / 11; }
  .sim-head, .sim-body { grid-column: 1 / 13; }
}

/* catena verticale: dal tablet in piedi in giù le fasi si leggono dall'alto, testo accanto al disco */
@media (max-width: 900px) {
  .chain { --disc: 52px; grid-template-columns: minmax(0, 1fr); }
  .chain > .step::before, .chain > .op::before { top: 0; bottom: 0; left: calc(var(--disc) / 2 - 1px); right: auto; width: 2px; height: auto; }
  .step { display: grid; grid-template-columns: var(--disc) minmax(0, 1fr); column-gap: 20px; padding: 0; }
  .step:first-child::before { top: calc(var(--disc) / 2); }
  .step:last-child::before { content: ""; bottom: auto; height: calc(var(--disc) / 2); }
  .step .disc { grid-row: 1 / 4; align-self: start; font-size: 1.25rem; box-shadow: -4px -4px 10px var(--hi), 5px 5px 12px var(--lo); }
  .step h3 { margin-top: 0; padding-top: calc(var(--disc) / 2 - .66em); }
  .step p { margin-top: 8px; padding-bottom: 4px; }
  .chain > .op { --op: 24px; position: relative; top: auto; left: auto; justify-content: flex-start; padding: 10px 0; }
  .chain > .op::before { content: ""; }
  .chain > .op > span { margin: 0 0 0 calc(var(--disc) / 2 - var(--op) / 2); font-size: 1rem; }
  .chain-compact .step h3 { margin-top: 0; }
  .duo-item { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ Telefono: composizioni dedicate */
@media (max-width: 820px) {
  .press-arrow { width: 44px; height: 44px; border-radius: 14px; }
  .press-arrow svg { width: 20px; height: 20px; }
  .press-arrow svg path { stroke-width: 1.8px; }
  .ph { padding-top: 20px; }
  .ph-text, .ph-photo .ph-text { grid-column: 1 / -1; }
  .ph h1 { font-size: clamp(2.3rem, 10vw, 3.6rem); }
  .ph .lead { margin-top: 16px; }

  /* testata con foto: il titolo sulla fotografia, come l'apertura della home, la frase sotto */
  .ph-photo { row-gap: 22px; }
  .ph-photo .ph-text { display: contents; }
  .ph-figure { grid-column: 1 / -1; grid-row: 1; height: auto; aspect-ratio: 4 / 5; max-height: 72svh; width: 100%; }
  .ph-figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13, 20, 37, .82), rgba(13, 20, 37, .25) 45%, rgba(13, 20, 37, 0) 70%); }
  .ph-photo h1 { grid-column: 1 / -1; grid-row: 1; align-self: end; z-index: 1; padding: clamp(22px, 5vw, 36px); color: #fff; }
  .ph-photo .lead { grid-column: 1 / -1; margin-top: 0; }

  .subnav { display: flex; }
  .subnav a { flex: 1; text-align: center; padding: .8em .4em; font-size: .88rem; }

  .split > h2, .split > .split-side, .split > .prose { grid-column: 1 / -1; }
  .split h2 { font-size: clamp(1.7rem, 6.4vw, 2.4rem); }
  .quote-wide { grid-column: 1 / -1; }
  .quote p { font-size: clamp(1.25rem, 5.2vw, 1.6rem); }
  .split .quote p { font-size: clamp(1.2rem, 4.8vw, 1.5rem); }

  /* fondatore: ritratto e nome affiancati, la biografia sotto */
  .founder { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); column-gap: 18px; row-gap: 0; }
  .founder-text { display: contents; }
  .portrait { grid-column: 1; grid-row: 1; position: relative; top: auto; aspect-ratio: 4 / 5; }
  .portrait-empty { inset: 8px; gap: 12px; }
  .portrait-empty figcaption { font-size: .75rem; }
  .founder-name { grid-column: 2; grid-row: 1; align-self: center; }
  .founder-text h2 { font-size: clamp(1.6rem, 6.6vw, 2.2rem); }
  .founder-role { font-size: .95rem; }
  .founder-text .prose, .gd-note { grid-column: 1 / -1; }
  .founder-text .prose { margin-top: 28px; }
  .gd-note { grid-template-columns: 92px minmax(0, 1fr); padding: 18px; column-gap: 18px; align-items: start; }
  .gd-note p { font-size: .95rem; }

  /* entità: titolo comune, foto verticale accanto alla frase, i rami sotto per tutta la larghezza */
  .ent, .ent-flip { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); column-gap: 16px; row-gap: 18px; }
  .ent-body, .ent-flip .ent-body { display: contents; }
  .ent h2 { grid-column: 1 / -1; grid-row: 1; font-size: clamp(1.8rem, 7.4vw, 2.6rem); }
  .ent-photo, .ent-flip .ent-photo { grid-column: 1; grid-row: 2; position: relative; top: auto; aspect-ratio: 4 / 5; padding: 0; box-shadow: none; border-radius: 20px; }
  .ent-photo > img { inset: 0; width: 100%; height: 100%; border-radius: inherit; }
  .ent-lead { grid-column: 2; grid-row: 2; align-self: center; margin-top: 0; font-size: 1.02rem; }
  .branches { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; padding-top: 28px; }
  .branches::before { height: calc(28px + var(--top)); }
  .branch { padding-left: calc(var(--node) + 18px); }
  .branch p { font-size: .98rem; }

    
  .plate { padding: 28px 20px; border-radius: var(--radius); }
  .identity { gap: 14px; }
  .identity-chain { --disc: 48px; gap: 10px; }

  .close-actions { grid-template-columns: 1fr 1fr; }
  .close-actions > .press { grid-column: 1 / -1; }
  .statement > .press { grid-column: 1 / -1; }

  .cx-channels { display: grid; grid-template-columns: 1fr 1fr; }
  .cx-channels .ctile { padding-right: clamp(16px, 1.6vw, 22px); }
  .cx-channels .ctile:first-of-type { grid-column: 1 / -1; }
  .cx-place { display: block; }
  .cx-place .cx-map-text { margin-top: 24px; }
  .field-row { grid-template-columns: 1fr; }
  .cx-map .map-well > img { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
  .cx-map .map-well, .cx-map-text { grid-column: 1 / -1; }
  .legal { grid-column: 1 / -1; }
}

/* tablet in piedi: la foto dell'entità si allarga invece di allungarsi, la frase cresce con lei */
@media (min-width: 561px) and (max-width: 820px) {
  .ent-photo, .ent-flip .ent-photo { aspect-ratio: 4 / 3; }
  .ent-lead { font-size: 1.15rem; }
}

/* telefoni: l'azione appena sotto il testo, recapiti con l'icona sopra */
@media (max-width: 560px) {
  .actions .btn { flex: 1 1 13.2rem; }
  .ctile { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 2px; padding: 16px; }
  .ctile-icon { grid-row: auto; width: 40px; height: 40px; margin-bottom: 14px; }
  .ctile-value { font-size: .95rem; }
  .cx-channels .ctile { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; }
  .cx-channels .ctile .ctile-icon { grid-row: 1 / 3; margin-bottom: 0; }
  .gd-note { grid-template-columns: 72px minmax(0, 1fr); }
  .gd-note .btn { padding: .9em 1.2em; }
}
@media (max-width: 380px) {
  .close-actions, .cx-channels { grid-template-columns: minmax(0, 1fr); }
  .ctile { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; }
  .ctile-icon { grid-row: 1 / 3; margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .press, .press-arrow, .ctile, .ctile-icon, .gd-book, .gd-note-book, .subnav a { transition: none; }
}

/* Sintonia Decisionale (GEN-D CODE): nuvola di parole in tinta, fondo trasparente; sui telefoni a tutta larghezza */
.sintonia-figure { margin: clamp(-130px, -8vw, -20px) auto clamp(-150px, -9vw, -24px); max-width: 1240px; }
.sintonia-figure img { display: block; width: 100%; height: auto; }
@media (max-width: 700px) { .sintonia { padding-left: 0; padding-right: 0; } }

/* ------------------------------------------------------------------ Profondità che si forma
   I contenuti ci sono sempre; quello che arriva, dopo una pausa in cui ci si ferma a guardare, sono le ombre: i riquadri si incavano,
   i pezzi in rilievo e i loro incavi si formano insieme; nella home la curva distribuisce il cambiamento nel tempo.
   La classe js-sh la mette uno script nell'<head> (così le ombre non lampeggiano al caricamento), main.js accende sh-in
   quando l'elemento entra in vista e poi lo segna sh-done: da lì tornano le regole normali (passaggio, pressione). */
@media (prefers-reduced-motion: no-preference) {
  .js-sh:not(.sh-all) :is(.h-gend-plate, .plate, .well, .h-hero-photo, .h-book, .gd-book, .gd-note-book, .h-hero-cta, .h-hero-about, .h-cta-arrow, .h-ctile, .h-ctile-icon, .ctile, .ctile-icon, .press, .press-arrow, .h-disc, .disc, .h-card, .h-card-go, .h-studio .h-more :is(.btn, .h-studio-cta), .h-studio-cta .h-cta-arrow, .h-gend-links .btn, .gend-info-btn):not(.sh-in):not(.sh-done) { box-shadow: none !important; }
  /* il riquadro grande e i pezzi che porta partono dal colore della pagina, come se stessero sullo stesso piano */
  .js-sh:not(.sh-all) :is(.h-gend-plate, .plate, .h-disc, .disc, .h-op, .op > span, .h-book, .gend-info-btn):not(.sh-in):not(.sh-done) { background-color: var(--bg) !important; }
  /* stessa curva e stessa durata per il riquadro e per quello che contiene: così l'incavo e il rilievo si formano insieme */
  html.js-sh .sh-in.sh-in { transition: box-shadow var(--sh-t, .7s) var(--sh-ease, cubic-bezier(.16, .84, .3, 1)) var(--sh-d, 0ms), background-color var(--sh-t, .7s) var(--sh-ease, cubic-bezier(.16, .84, .3, 1)) var(--sh-d, 0ms); }

  /* pulsanti e riquadri: si sollevano al passaggio, si premono al tocco (la freccia resta ferma) */
  .btn, .press, .ctile, .gd-book, .gd-note-book, .h-studio-cta, .gend-info-btn { transition-property: box-shadow, background, background-color, transform, translate; transition-duration: .3s; }
  .btn:active, .press:active, .ctile:active, .gd-book:active, .gd-note-book:active, .h-studio-cta:active, .gend-info-btn:active { translate: 0 1px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover, .press:hover, .ctile:hover, .gd-book:hover, .gd-note-book:hover, .h-studio-cta:hover, .gend-info-btn:hover { translate: 0 -2px; }
}

/* ------------------------------------------------------------------ Mappa: un clic apre Google Maps (Mappe su iPhone e iPad)
   Il segnaposto si posa piano quando ci si arriva: scende di pochi pixel e l'ombra si forma, senza rimbalzi. */
.map-open { position: absolute; inset: 0; z-index: 2; border-radius: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.map-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.map-credit { z-index: 3; }
.pin { pointer-events: none; z-index: 1; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pin { transition: translate .3s; }
  .map-open:hover ~ .pin, .map-open:focus-visible ~ .pin { translate: 0 -3px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js-sh:not(.sh-all) :is(.h-map-well, .map-well) .pin:not(.pin-in) { opacity: 0; }
  .pin.pin-in { animation: pin-settle .8s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes pin-settle {
    from { opacity: 0; translate: 0 -22px; box-shadow: none; }
    to { opacity: 1; translate: 0 0; box-shadow: var(--raised); }
  }
}

/* telefoni stretti: logo e padding si riducono perché logo, lingue e menu stiano sulla stessa riga */
@media (max-width: 400px) {
  .site-header { padding: 0 16px; gap: 8px; }
  .brand img { width: 140px; }
}
@media (max-width: 345px) {
  .brand img { width: 120px; }
  .site-header > .lang { --lang-size: 28px; font-size: .72rem; }
  .site-header > .lang a { padding: 0; }
}

/* Navigazione: dissolvenza del contenuto, header stabile, nessuna attesa artificiale. */
@media (prefers-reduced-motion:no-preference) {
  @view-transition { navigation:auto; }
  .site-header { view-transition-name:site-header; }
  html:not(.page-transition-native) main { animation:page-enter .24s ease-out backwards; }
  ::view-transition-old(root) { animation:page-leave .24s ease-out both;mix-blend-mode:normal; }
  ::view-transition-new(root) { animation:page-enter .24s ease-out both;mix-blend-mode:normal; }
  ::view-transition-group(root) { animation:none; }
  ::view-transition-group(site-header),::view-transition-new(site-header) { animation:none; }
  ::view-transition-old(site-header) { display:none; }
}
@keyframes page-enter { from { opacity:0; } to { opacity:1; } }
@keyframes page-leave { from { opacity:1; } to { opacity:0; } }