/* «Officina Moretti» — sito d'esempio (attivita' di fantasia). La cosa che si
   ricorda: il contachilometri a rulli che gira fino alla data della revisione.
   Archivo Narrow per il cruscotto e i titoli, Archivo per leggere; il blu
   dell'officina, l'arancio delle tute, il grigio dell'olio. */
@font-face{font-family:"Archivo Narrow";src:url(../font/archivo-narrow-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Archivo;src:url(../font/archivo-100-900.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --blu:#1D3557;            /* bianco sopra 12,0:1 */
  --arancio:#E76F23;        /* il grigio olio sopra: 4,6:1 */
  --olio:#2B2D2F;
  --bianco:#FFFFFF;
  --cemento:#EEF0F2;
  --grigio:#58606A;         /* testo secondario: 6,3:1 su bianco */
  --stretto:"Archivo Narrow","Arial Narrow",sans-serif;
  --testo:Archivo,system-ui,sans-serif;
  --bordo:clamp(1rem,4vw,3.5rem);
}
*{box-sizing:border-box;margin:0}
body{background:var(--bianco);color:var(--olio);font:400 1.0625rem/1.6 var(--testo);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--blu)}
:focus-visible{outline:3px solid var(--arancio);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,.h1,h2,h3{font-family:var(--stretto);font-weight:500;line-height:1;letter-spacing:-.01em}
h2{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.6rem);margin-bottom:1.4rem}
section{padding:clamp(3rem,7vw,5.5rem) var(--bordo)}

.fascia-esempio{background:var(--blu);color:var(--bianco);font-size:.82rem;text-align:center;padding:.45rem 1rem}
.fascia-esempio a{color:inherit}
.testata{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 2rem;padding:1rem var(--bordo);border-bottom:3px solid var(--blu)}
.marchio{font:500 1.6rem/1 var(--stretto);color:var(--blu);text-decoration:none;margin-right:auto;padding:.3rem 0}
.testata nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.testata nav a{text-decoration:none;color:var(--olio);font-weight:600;font-size:.95rem;padding:.3rem 0}
.t-tel{font-weight:800;text-decoration:none;padding:.3rem 0}

/* ── la revisione: il conto e il cruscotto ────────────────────────────────── */
.apertura{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center;background:var(--cemento)}
.h1{font-size:clamp(3rem,1.6rem + 5vw,6.4rem);line-height:.92;margin-bottom:1.2rem;color:var(--blu);max-width:11ch}
.sotto{font-size:1.12rem;max-width:42ch;margin-bottom:1.8rem}
.calcolo{display:grid;gap:1rem;max-width:30rem}
.calcolo fieldset{border:0;padding:0;display:grid;grid-template-columns:1.4fr 1fr;gap:.6rem}
.calcolo legend{font-weight:700;margin-bottom:.4rem;padding:0}
.calcolo legend span{font-weight:400;color:var(--grigio)}
.calcolo select,.calcolo input{font:500 1.15rem var(--testo);padding:.75rem .9rem;border:2px solid #A8B1BC;border-radius:4px;background:var(--bianco);
  color:var(--olio);min-height:3.2rem;width:100%}
.cruscotto{background:var(--olio);color:var(--bianco);border-radius:18px;padding:clamp(1.6rem,4vw,2.6rem);
  box-shadow:inset 0 0 0 2px #3a3d40,0 30px 50px -30px rgba(29,53,87,.6)}
.cr-etichetta{font:500 1rem var(--stretto);letter-spacing:.04em;color:#C9CED4;margin-bottom:.8rem}
.contachilometri{display:flex;align-items:center;gap:.3rem;font:500 clamp(2.6rem,1.4rem + 4vw,4.4rem)/1 var(--stretto);margin-bottom:1rem}
.tamburo{position:relative;display:inline-block;width:.78em;height:1.25em;overflow:hidden;border-radius:6px;
  background:linear-gradient(180deg,#0c0d0e,#1b1d1f 30%,#1b1d1f 70%,#0c0d0e);box-shadow:inset 0 0 0 1px #000,0 1px 0 #44484c}
.tamburo:nth-child(-n+2){background:linear-gradient(180deg,#7a2c08,var(--arancio) 30%,var(--arancio) 70%,#7a2c08);color:var(--olio)}
.strip{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;height:1000%;transition:transform 1.3s cubic-bezier(.3,.1,.2,1)}
.strip span{height:10%;display:grid;place-items:center}
.tamburo[data-t="1"] .strip{transition-delay:.08s}.tamburo[data-t="2"] .strip{transition-delay:.16s}.tamburo[data-t="3"] .strip{transition-delay:.24s}
.tamburo[data-t="4"] .strip{transition-delay:.32s}.tamburo[data-t="5"] .strip{transition-delay:.4s}
.punto-od{color:#8a9098;margin:0 .1rem}
.cr-esito{font:500 1.6rem/1.2 var(--stretto);margin-bottom:.8rem}
.cr-nota{font-size:.88rem;color:#C9CED4;max-width:44ch;margin-bottom:1.4rem}
.vai{display:inline-block;background:var(--arancio);color:#0E0F10;font-weight:800;text-decoration:none;padding:.95rem 1.4rem;border-radius:4px}
.vai:hover{background:#f08540}

/* ── i lavori ─────────────────────────────────────────────────────────────── */
.lista-lavori{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:0 2.5rem}
.lista-lavori li{padding:1.3rem 0;border-top:3px solid var(--blu)}
.lista-lavori h3{font-size:1.6rem;color:var(--blu);margin-bottom:.3rem}
.lv-prezzo{font-weight:800;margin-bottom:.4rem}
.lista-lavori p:last-child{color:var(--grigio)}
.nota{font-size:.88rem;color:var(--grigio);margin-top:1.4rem;max-width:60ch}

/* ── l'officina ───────────────────────────────────────────────────────────── */
.officina-foto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);grid-template-rows:auto auto;gap:1rem 1.6rem;background:var(--cemento)}
.of-testo{grid-row:span 2;align-self:center}
.of-testo p{max-width:40ch;margin-bottom:1.2rem}
.of-grande{grid-row:span 2}
.officina-foto img,.officina-foto video{width:100%;height:100%;object-fit:cover;border-radius:6px}
.of-grande img,.of-grande video{aspect-ratio:4/5}
.officina-foto figure:not(.of-grande) img{aspect-ratio:3/2}
.orari{margin-bottom:1.2rem}
.orari div{display:flex;justify-content:space-between;gap:1rem;max-width:22rem;padding:.45rem 0;border-bottom:1px solid #CBD1D8}
.orari dd{font-weight:700}

/* ── la prenotazione ──────────────────────────────────────────────────────── */
.prenota form{display:grid;gap:1.1rem;max-width:40rem}
.riga{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1.1rem}
.prenota label{display:grid;gap:.35rem;font-weight:700;font-size:.95rem}
.prenota input,.prenota select{font:400 1rem var(--testo);padding:.75rem .85rem;border:2px solid #A8B1BC;border-radius:4px;color:var(--olio);min-height:3rem;background:var(--bianco)}
.prenota .spunta{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}
.prenota .spunta input{min-height:auto;width:1.2rem;height:1.2rem;margin-top:.2rem;flex:none}
.prenota button{justify-self:start;font:800 1rem var(--testo);background:var(--blu);color:var(--bianco);border:0;border-radius:4px;padding:.9rem 1.5rem;cursor:pointer}
.esito{min-height:1.6em;font-weight:700}
.piede{padding:2.5rem var(--bordo) 3rem;font-size:.9rem;color:var(--grigio);border-top:3px solid var(--blu)}
.piede p+p{margin-top:.3rem}

@media(max-width:900px){
  .apertura{grid-template-columns:1fr}
  .officina-foto{grid-template-columns:1fr 1fr}
  .of-testo,.of-grande{grid-row:auto;grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){.strip{transition:none}}

/* ── il video in cima: le parole in alto a destra, strette ───────────────── */
.clip{--clip-velo:linear-gradient(200deg,rgba(29,53,87,.92) 0%,rgba(29,53,87,.55) 38%,rgba(29,53,87,.05) 70%);align-items:start;justify-items:end;text-align:right}
.clip-parole{display:flex;flex-direction:column;align-items:flex-end}
.clip-nome{font:500 clamp(3.4rem,1.6rem + 6.4vw,8rem)/.88 var(--stretto);text-transform:uppercase;letter-spacing:-.01em}
/* la frase e' un blocco piu' stretto del titolo (max 32ch in clip.css): senza il
   margine automatico restava staccata dal filo destro del titolo e del bottone (voce Cowork 26/10 (1)) */
.clip-frase{font:500 clamp(1.05rem,.95rem + .5vw,1.35rem)/1.4 var(--testo);margin-left:auto}
.clip-btn{background:var(--arancio);color:#0E0F10;font-family:var(--stretto);text-transform:uppercase;font-size:1.1rem;letter-spacing:.04em}