/* ============================================================================
   LE PAGINE DEI SERVIZI (22/09/2026) — sviluppo, consulenza, due diligence,
   supporto gestionale, fornitori. Le genera strumenti/servizi/genera.py.

   La lingua e' quella della homepage e di /strategic-partner/, non una nuova:
   carta bianca e bianco caldo (#F7F6F4), un filo rosso, Playfair grande col
   corsivo grigio, fotografie in bianco e nero, il rosso pieno solo dove si
   agisce. Stessi valori delle classi pp- di /strategic-partner/, col prefisso
   sv-: /css/tailwind.css e' precompilato, e un nome nuovo non deve cadere
   addosso a uno vecchio.

   Scala degli spazi: 4 8 12 16 24 32 48 64 96 128. Corpo in rem.
   ========================================================================= */

:root {
  --sv-ink: #111111;
  --sv-text: #4A4F57;      /* 8,2:1 su bianco, 7,6:1 sulla carta */
  --sv-muted: #666C75;     /* 5,3:1 su bianco, 4,9:1 sulla carta */
  --sv-line: #E4E1DB;
  --sv-paper: #F7F6F4;
  --sv-red: #B40101;
}

/* La testata del sito e' fissa e alta 72 px. Lo spazio sta sul body e non su
   <main>: dentro l'area riservata la testata si nasconde e pagina.php azzera
   il padding del body, non quello di una sezione. */
body.sv { padding-top: 72px; font-family: 'DM Sans', sans-serif; color: var(--sv-ink); background: #fff; overflow-x: hidden; }
.sv h1, .sv h2, .sv h3 { font-family: 'Playfair Display', serif; font-weight: 400; }

.sv-wrap { width: min(100% - 3rem, 75rem); margin-inline: auto; }
.sv-sez { padding-block: 4rem; }
.sv-carta { background: var(--sv-paper); }

.sv-briciole { width: min(100% - 3rem, 75rem); margin: 1.5rem auto 0; font-size: 0.8125rem; color: var(--sv-muted); }
.sv-briciole a { color: var(--sv-muted); text-decoration: underline; text-decoration-color: var(--sv-line); text-underline-offset: 3px; }
.sv-briciole a:hover { color: var(--sv-red); text-decoration-color: currentColor; }

.sv-occhiello { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--sv-muted); margin-bottom: 1.5rem; }
.sv-h2 { font-size: clamp(2rem, 1.25rem + 2.4vw, 3rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--sv-ink); }
.sv-h2 em, .sv-eroe h1 em { font-style: italic; color: #8A8A8A; }
.sv-attacco { font-size: 1.125rem; line-height: 1.7; font-weight: 300; color: var(--sv-text); max-width: 38rem; }
.sv-testa { margin-bottom: 3rem; }
.sv-testa .sv-attacco { margin-top: 1.5rem; }

/* --- le due azioni: un pulsante per cio' che si fa, un rinvio per cio' che si legge --- */
.sv-btn { display: inline-block; background: var(--sv-red); color: #fff; text-align: center; text-decoration: none;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 1.125rem 2.5rem; transition: background-color 0.18s ease-out; }
.sv-btn:hover { background: var(--sv-ink); }
.sv-btn:active { transform: translateY(1px); }
.sv-rinvio { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--sv-ink); text-decoration: none;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  border-bottom: 1px solid var(--sv-ink); padding-bottom: 0.25rem;
  transition: color 0.18s ease-out, border-color 0.18s ease-out; }
.sv-rinvio:hover { color: var(--sv-red); border-color: var(--sv-red); }
.sv-btn:focus-visible, .sv-rinvio:focus-visible, .sv a:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 4px; }
.sv-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; }

/* --- la testata: meta' parole, meta' fotografia (o, per la due diligence, le sue tre domande) --- */
.sv-eroe-testo { width: min(100% - 3rem, 36rem); margin-inline: auto; padding-block: 3rem; }
.sv-filo { display: none; width: 1px; height: 5rem; background: var(--sv-red); margin-bottom: 2rem; }
.sv-eroe h1 { font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4.25rem); line-height: 1.05; letter-spacing: -0.015em;
  color: var(--sv-ink); margin-bottom: 2rem; }
.sv-eroe .sv-attacco { margin-bottom: 2.5rem; }
.sv-eroe-foto { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sv-paper); }
.sv-eroe-foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.sv-eroe-voci { background: var(--sv-paper); padding: 3rem 1.5rem; display: flex; align-items: center; justify-content: center; }
.sv-eroe-voci > div { width: min(100%, 28rem); }
.sv-eroe-voci ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sv-ink); }
.sv-eroe-voci li { display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; padding-block: 1rem;
  border-bottom: 1px solid var(--sv-line); font-family: 'Playfair Display', serif; font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem); line-height: 1.25; }
.sv-eroe-voci li span { font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em;
  color: var(--sv-red); font-variant-numeric: lining-nums tabular-nums; }

/* --- che cosa facciamo: righe numerate su filetto, titolo a sinistra, testo a destra --- */
.sv-voci { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sv-ink); }
.sv-voci > li { display: grid; gap: 0.5rem; padding-block: 1.75rem; border-bottom: 1px solid var(--sv-line); }
.sv-voci .sv-n { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.25em; color: var(--sv-red); font-variant-numeric: lining-nums tabular-nums; }
.sv-voci h3 { font-size: 1.5rem; line-height: 1.25; color: var(--sv-ink); }
.sv-voci p { font-size: 1rem; line-height: 1.7; font-weight: 300; color: var(--sv-text); max-width: 36rem; }
.sv-voci p a, .sv-prosa a { color: var(--sv-ink); text-decoration: underline; text-decoration-color: var(--sv-red); text-underline-offset: 3px; }
.sv-voci ul { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.5rem; }
.sv-voci ul a { font-size: 0.9375rem; color: var(--sv-ink); text-decoration: underline; text-decoration-color: var(--sv-line); text-underline-offset: 3px; }
.sv-voci ul a:hover { text-decoration-color: var(--sv-red); }

/* --- la prosa del metodo, in due colonne sullo schermo largo --- */
.sv-due { display: grid; gap: 3rem; }
.sv-prosa > * + * { margin-top: 1.25rem; }
.sv-prosa p { font-size: 1.0625rem; line-height: 1.7; font-weight: 300; color: var(--sv-text); max-width: 36rem; }
.sv-prosa strong { font-weight: 500; color: var(--sv-ink); }
.sv-prosa .sv-fermo { border-left: 1px solid var(--sv-red); padding-left: 1.5rem; color: var(--sv-ink); }
.sv-prosa h3 { font-size: 1.375rem; line-height: 1.3; color: var(--sv-ink); }
.sv-prosa > h3:not(:first-child) { margin-top: 2.5rem; }
.sv-prosa > h3 + p { margin-top: 0.75rem; }

/* --- approfondimenti e altri servizi: elenchi di rinvii su due colonne --- */
.sv-rinvii { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sv-line); columns: 1; }
.sv-rinvii li { break-inside: avoid; border-bottom: 1px solid var(--sv-line); }
.sv-rinvii a { display: block; padding-block: 0.875rem; color: var(--sv-ink); text-decoration: none; font-size: 1rem; line-height: 1.4;
  transition: color 0.18s ease-out; }
.sv-rinvii a:hover { color: var(--sv-red); }
.sv-rinvii [aria-current="page"] { color: var(--sv-muted); }
.sv-rinvii [aria-current="page"]::after { content: ' · questa pagina'; font-size: 0.8125rem; }

/* --- la chiusura: l'unica fascia scura --- */
.sv-scura { background: var(--sv-ink); color: #fff; padding-block: 4rem; text-align: center; }
.sv-scura .sv-h2 { color: #fff; }
.sv-scura .sv-attacco { color: #C9CCD1; margin: 1.5rem auto 2.5rem; }
.sv-scura .sv-btn:hover { background: #fff; color: var(--sv-ink); }
.sv-scura .sv-btn:focus-visible { outline-color: #fff; }

@media (min-width: 768px) {
  .sv-voci > li { grid-template-columns: 3rem minmax(0, 4fr) minmax(0, 7fr); column-gap: 2rem; align-items: baseline; }
  .sv-voci > li > :not(.sv-n):not(h3) { grid-column: 3; }
  .sv-voci > li > h3 { grid-row: span 2; }
  .sv-rinvii { columns: 2; column-gap: 3rem; }
}
@media (min-width: 1024px) {
  .sv-sez, .sv-scura { padding-block: 6rem; }
  .sv-eroe { display: grid; grid-template-columns: 5fr 7fr; min-height: calc(100svh - 72px); }
  .sv-eroe-testo { align-self: center; width: auto; margin: 0; padding: 3rem 4rem 3rem max(3rem, calc((100vw - 75rem) / 2)); }
  .sv-filo { display: block; }
  .sv-eroe-foto { aspect-ratio: auto; }
  .sv-due { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; align-items: start; }
}
/* Schermi bassi (1366x768): le due azioni restano sopra la piega. */
@media (min-width: 1024px) and (max-height: 820px) {
  .sv-eroe-testo { padding-block: 1.5rem; }
  .sv-filo { height: 3rem; margin-bottom: 1.5rem; }
  .sv-eroe h1 { font-size: 3.5rem; margin-bottom: 1.5rem; }
  .sv-eroe .sv-attacco { margin-bottom: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-btn, .sv-rinvio, .sv-rinvii a { transition: none; }
}