/* By D.S. Studio — pagine pubbliche
   Bianco, nero, un solo blu che agisce. La tipografia porta tutto il peso:
   niente riquadri, niente ombre, niente gradienti. Stesso carattere del
   generatore, così le pagine sembrano una cosa sola. */

:root {
  --nero:   #000;
  --testo:  #2b2f34;
  --tenue:  #6c7178;
  --filo:   #e4e2dd;
  --blu:    #2a3ec7;
  --blucup: #1f30ab;
  --bianco: #fff;

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Karla", ui-sans-serif, system-ui, sans-serif;

  --lato: clamp(1.25rem, 5vw, 5rem);
  --misura: 62ch;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, .95rem + .2vw, 1.08rem);
  line-height: 1.62;
  color: var(--testo);
  background: var(--bianco);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 72;
  color: var(--nero);
  letter-spacing: -.02em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1rem; max-width: var(--misura); }
p:last-child { margin-bottom: 0; }

a { color: var(--blu); text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--blu); outline-offset: 3px; }

.salta { position: absolute; left: -9999px; background: var(--nero); color: #fff; padding: .7rem 1rem; z-index: 10; }
.salta:focus { left: var(--lato); top: .6rem; }

/* ── testata comune ─────────────────────────────────────────────────────── */

.testata {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 1.5rem var(--lato);
}
.marchio { font-family: var(--serif); font-size: 1.45rem; color: var(--nero); text-decoration: none; font-variation-settings: "WONK" 1, "opsz" 40; }
.marchio span { font-family: var(--sans); font-size: .72rem; font-style: italic; color: var(--tenue); margin-left: .5rem; }
.menu { display: flex; gap: 1.4rem; font-size: .92rem; }
.menu a { color: var(--testo); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.menu a:hover, .menu a[aria-current] { border-bottom-color: var(--nero); }

/* ── impianto ───────────────────────────────────────────────────────────── */

.fascia { padding: clamp(3rem, 8vw, 6rem) var(--lato); }
.fascia + .fascia { border-top: 1px solid var(--filo); }
.dentro { max-width: 72rem; margin: 0 auto; }

.bottone {
  display: inline-block;
  background: var(--blu); color: #fff;
  padding: .9rem 1.7rem;
  text-decoration: none; font-weight: 500;
  transition: background-color .18s ease;
}
.bottone:hover { background: var(--blucup); color: #fff; }
.bottone.vuoto { background: transparent; color: var(--nero); border: 1px solid var(--filo); }
.bottone.vuoto:hover { background: transparent; border-color: var(--nero); }

/* ── apertura ───────────────────────────────────────────────────────────── */

.apertura { padding: clamp(3rem, 9vw, 7rem) var(--lato) clamp(3.5rem, 8vw, 6rem); }
.apertura h1 { font-size: clamp(2.8rem, 8.5vw, 6.8rem); max-width: 14ch; margin-bottom: 1.6rem; }
.apertura h1 em { font-style: italic; font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 72; }
.sommario { font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 44ch; margin-bottom: 2.2rem; }
.azioni { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }

/* ── servizi: righe, non riquadri ───────────────────────────────────────── */

.fascia h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); max-width: 22ch; }
.intro { margin-top: .9rem; color: var(--tenue); max-width: 50ch; }

.righe { margin-top: 2.6rem; border-top: 1px solid var(--filo); }
.riga {
  display: grid; grid-template-columns: 1fr; gap: .3rem 3rem;
  padding: 1.35rem 0; border-bottom: 1px solid var(--filo);
}
@media (min-width: 52rem) { .riga { grid-template-columns: 17rem 1fr; } }
.riga h3 { font-size: 1.35rem; font-variation-settings: "WONK" 1, "opsz" 24; }
.riga p { margin: 0; color: var(--tenue); font-size: .97rem; }

/* ── prezzo unico ───────────────────────────────────────────────────────── */

.prezzo { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; }
.prezzo b { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 7vw, 5.2rem); color: var(--nero); line-height: 1; letter-spacing: -.02em; }
.prezzo span { color: var(--tenue); max-width: 30ch; }
.compreso { margin: 1.8rem 0 0; padding: 0; list-style: none; max-width: 48ch; }
.compreso li { padding: .45rem 0; border-top: 1px solid var(--filo); font-size: .97rem; }
.compreso li:last-child { border-bottom: 1px solid var(--filo); }

/* ── progetti ───────────────────────────────────────────────────────────── */

.vetrina { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 2.6rem 2rem; margin-top: 2.6rem; }
.lavoro img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  background: #f1f0ec; border: 1px solid var(--filo);
}
.lavoro h3 { font-size: 1.5rem; margin: 1rem 0 .15rem; font-variation-settings: "WONK" 1, "opsz" 24; }
.lavoro .dove { color: var(--blu); font-size: .88rem; margin-bottom: .5rem; }
.lavoro p { color: var(--tenue); font-size: .96rem; }

.storia { max-width: 58ch; }
.storia p { color: var(--testo); }

/* ── firma ──────────────────────────────────────────────────────────────── */

.firma-pagina {
  border-top: 1px solid var(--filo);
  padding: 2rem var(--lato) 2.4rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .85rem; color: var(--tenue);
}
.firma-pagina a { color: var(--tenue); text-decoration: none; }
.firma-pagina a:hover { color: var(--nero); }

/* ── movimento: una volta sola, al primo schermo ───────────────────────── */

@keyframes sale { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.apertura > .dentro > * { animation: sale .7s cubic-bezier(.22,.61,.36,1) backwards; }
.apertura > .dentro > :nth-child(2) { animation-delay: .1s; }
.apertura > .dentro > :nth-child(3) { animation-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 40rem) { .menu { gap: 1rem; font-size: .88rem; } }