/* =========================================================
   EDIL CECINI — foglio di stile unico
   Palette: carta / grafite / blu tecnico / giallo segnale
   ========================================================= */

:root{
  --carta:      #EDEEEB;
  --carta-alt:  #E3E5E1;
  --bianco:     #FFFFFF;
  --grafite:    #16191C;
  --grafite-2:  #4E565C;
  --linea:      #C7CBC6;
  --blu:        #0B4F6C;
  --blu-scuro:  #073349;
  --segnale:    #FFC300;

  --ff-disp: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --wrap: 1140px;
  --gut: 24px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  background:var(--carta);
  color:var(--grafite);
  font-family:var(--ff-disp);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.mono{ font-family:var(--ff-mono); font-variant-numeric:tabular-nums; }
.ta-r{ text-align:right; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--grafite); color:var(--carta); padding:12px 18px;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:3px solid var(--segnale);
  outline-offset:2px;
}

/* ---------- occhiello ---------- */
.eyebrow{
  font-family:var(--ff-mono);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blu); margin:0 0 14px;
}
.eyebrow--inv{ color:var(--segnale); }

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--blu); color:#fff; text-decoration:none;
  font-weight:600; font-size:16px; letter-spacing:.01em;
  padding:15px 26px; border:2px solid var(--blu); border-radius:2px;
  transition:background .15s ease, color .15s ease;
  cursor:pointer;
}
.btn:hover{ background:var(--blu-scuro); border-color:var(--blu-scuro); }
.btn--ghost{ background:transparent; color:var(--blu); }
.btn--ghost:hover{ background:var(--blu); color:#fff; }
.btn--sm{ padding:9px 16px; font-size:14px; }
.btn--full{ width:100%; padding:17px 26px; font-size:17px; border:none; }

/* ---------- barra alta ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(237,238,235,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--linea);
}
.topbar__in{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand__mark{
  width:22px; height:22px; flex:0 0 22px;
  border:2px solid var(--blu);
  border-right-color:var(--segnale);
  border-bottom-color:var(--segnale);
}
.brand__name{ font-size:20px; font-weight:500; letter-spacing:-.02em; }
.brand__name strong{ font-weight:800; }

.nav{ display:flex; align-items:center; gap:26px; }
.nav a{ text-decoration:none; font-size:15px; font-weight:500; }
.nav a:not(.btn):hover{ box-shadow:inset 0 -2px 0 var(--segnale); }
@media (max-width:820px){
  .nav a:not(.btn){ display:none; }
}

/* ---------- hero ---------- */
.hero{
  padding:72px 0 84px;
  background-image:
    linear-gradient(to right, rgba(11,79,108,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,79,108,.07) 1px, transparent 1px);
  background-size:38px 38px;
  border-bottom:1px solid var(--linea);
}
.hero__title{
  font-size:clamp(38px, 7vw, 76px);
  line-height:1.02; font-weight:800; letter-spacing:-.035em;
  margin:0 0 22px; max-width:16ch;
}
.hero__title .hl{ color:var(--blu); }

.quota{ display:block; width:100%; max-width:640px; height:30px; color:var(--blu); margin:0 0 30px; }
.quota__line, .quota__tick{ stroke:currentColor; stroke-width:1.4; }
.quota__plate{ fill:var(--carta); }
.quota__label{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em;
  fill:var(--blu);
}
@media (prefers-reduced-motion: no-preference){
  .quota__line{ stroke-dasharray:640; stroke-dashoffset:640; animation:draw .9s .15s ease-out forwards; }
}
@keyframes draw{ to{ stroke-dashoffset:0; } }

.hero__lead{ font-size:19px; max-width:62ch; color:var(--grafite-2); margin:0 0 32px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:44px; }

.hero__facts{ list-style:none; margin:0; padding:0; display:grid; gap:14px; max-width:760px; }
.hero__facts li{
  display:flex; gap:14px; align-items:baseline;
  border-top:1px solid var(--linea); padding-top:12px; font-size:16px;
}
.hero__facts .mono{ color:var(--blu); font-size:13px; }
@media (min-width:860px){
  .hero__facts{ grid-template-columns:repeat(3,1fr); gap:22px; }
}

/* ---------- sezioni ---------- */
.sec{ padding:84px 0; border-bottom:1px solid var(--linea); }
.sec--alt{ background:var(--carta-alt); }
.sec__head{ max-width:66ch; margin-bottom:48px; }
.sec__title{
  font-size:clamp(28px, 4vw, 42px); font-weight:800; letter-spacing:-.03em;
  line-height:1.1; margin:0 0 14px;
}
.sec__intro{ color:var(--grafite-2); margin:0; font-size:17px; }

/* ---------- capitolato ---------- */
.cap{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea); }
@media (min-width:760px){ .cap{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .cap{ grid-template-columns:repeat(3,1fr); } }
.cap__item{ background:var(--carta); padding:28px 26px 30px; }
.sec--alt .cap__item{ background:var(--carta-alt); }
.cap__code{ font-size:12px; letter-spacing:.12em; color:var(--blu); }
.cap__title{ font-size:20px; font-weight:600; letter-spacing:-.015em; margin:10px 0 8px; }
.cap__item p{ margin:0; color:var(--grafite-2); font-size:15.5px; line-height:1.6; }

/* ---------- steps ---------- */
.steps{ list-style:none; margin:0 0 56px; padding:0; display:grid; gap:26px; }
@media (min-width:860px){ .steps{ grid-template-columns:repeat(3,1fr); gap:34px; } }
.step{ border-top:3px solid var(--blu); padding-top:18px; }
.step__n{ font-size:13px; color:var(--blu); letter-spacing:.14em; }
.step__title{ font-size:22px; font-weight:600; letter-spacing:-.02em; margin:8px 0 8px; }
.step p{ margin:0; color:var(--grafite-2); font-size:15.5px; }

/* ---------- tabella computo ---------- */
.computo{ margin:0; border:1px solid var(--grafite); background:var(--bianco); }
.computo__cap{
  margin:0; padding:12px 16px; font-size:11px; letter-spacing:.16em;
  background:var(--grafite); color:var(--carta);
}
.computo__scroll{ overflow-x:auto; }
.computo__tab{ width:100%; border-collapse:collapse; font-size:14px; min-width:660px; }
.computo__tab th{
  text-align:left; font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grafite-2); font-weight:500;
  padding:12px 16px; border-bottom:1px solid var(--linea); white-space:nowrap;
}
.computo__tab td{ padding:12px 16px; border-bottom:1px solid var(--linea); vertical-align:top; }
.computo__tab tr:last-child td{ border-bottom:none; }
.computo__note{ margin:0; padding:12px 16px; font-size:13px; color:var(--grafite-2); border-top:1px solid var(--linea); }

/* ---------- lavori ---------- */
.works{ display:grid; gap:20px; }
@media (min-width:760px){ .works{ grid-template-columns:repeat(3,1fr); } }
.work{ margin:0; }
.work figcaption{ font-size:14px; color:var(--grafite-2); padding-top:10px; }
.work figcaption .mono{ color:var(--blu); font-size:12px; margin-right:8px; }
.work__ph{
  aspect-ratio:4/3; border:1px dashed var(--blu);
  background-image:repeating-linear-gradient(45deg,
    rgba(11,79,108,.09) 0 10px, transparent 10px 20px);
}

/* ---------- zone ---------- */
.zone{
  list-style:none; margin:0 0 20px; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.zone li{
  border:1px solid var(--linea); background:var(--carta);
  padding:8px 14px; font-size:15px; border-radius:2px;
}
.zone__note{ margin:0; color:var(--grafite-2); font-size:15px; }

/* ---------- preventivo ---------- */
.quote{
  background:var(--grafite); color:var(--carta);
  padding:84px 0 90px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:38px 38px;
}
.quote__in{ display:grid; gap:48px; }
@media (min-width:960px){ .quote__in{ grid-template-columns:0.85fr 1.15fr; gap:64px; } }
.quote__title{ font-size:clamp(28px,4vw,40px); font-weight:800; letter-spacing:-.03em; line-height:1.08; margin:0 0 18px; }
.quote__lead{ color:#B9C0C5; margin:0 0 26px; }
.quote__list{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:10px; }
.quote__list li{ font-size:15.5px; padding-left:26px; position:relative; color:#D5DADD; }
.quote__list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:12px; height:2px; background:var(--segnale);
}
.quote__alt{ font-size:15px; color:#B9C0C5; margin:0; line-height:1.9; }
.quote__alt a{ color:var(--segnale); }

.quote__form{ background:var(--carta); color:var(--grafite); padding:34px 30px 36px; border-radius:2px; }
@media (max-width:520px){ .quote__form{ padding:24px 20px 28px; } }

.f{ margin-bottom:20px; }
.f-row{ display:grid; gap:0 20px; }
@media (min-width:600px){ .f-row{ grid-template-columns:1fr 1fr; } }

.f label,
.f--fs legend{
  display:block; font-size:13px; font-weight:600; letter-spacing:.02em;
  margin-bottom:7px; padding:0;
}
.req{ color:#B3261E; }

.f input[type="text"],
.f input[type="tel"],
.f input[type="email"],
.f input[type="number"],
.f select,
.f textarea{
  width:100%; font-family:inherit; font-size:16px; color:var(--grafite);
  background:var(--bianco); border:1px solid var(--linea); border-radius:2px;
  padding:12px 14px;
  transition:border-color .15s ease;
}
.f textarea{ resize:vertical; line-height:1.55; }
.f input:focus, .f select:focus, .f textarea:focus{ border-color:var(--blu); }
.f input[aria-invalid="true"], .f textarea[aria-invalid="true"]{ border-color:#B3261E; }

.f--fs{ border:none; padding:0; margin:0 0 20px; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ margin:0; }
.chip input{ position:absolute; opacity:0; width:1px; height:1px; }
.chip span{
  display:inline-block; border:1px solid var(--linea); background:var(--bianco);
  padding:9px 14px; font-size:14.5px; border-radius:2px; cursor:pointer;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.chip input:checked + span{ background:var(--blu); border-color:var(--blu); color:#fff; }
.chip input:focus-visible + span{ outline:3px solid var(--segnale); outline-offset:2px; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.consenso{ display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.5; margin:4px 0 22px; color:var(--grafite-2); }
.consenso input{ margin-top:3px; flex:0 0 auto; width:17px; height:17px; accent-color:var(--blu); }
.consenso a{ color:var(--blu); }

.form-msg{ margin:16px 0 0; font-size:15px; min-height:1.2em; }
.form-msg.is-ok{ color:#1B5E20; font-weight:600; }
.form-msg.is-err{ color:#B3261E; font-weight:600; }

/* ---------- footer ---------- */
.foot{ background:var(--carta-alt); padding:56px 0 0; }
.foot__in{ display:grid; gap:32px; padding-bottom:36px; }
@media (min-width:760px){ .foot__in{ grid-template-columns:1.4fr 1fr 1fr; } }
.foot__brand{ font-size:20px; font-weight:500; letter-spacing:-.02em; margin:0 0 12px; }
.foot__brand strong{ font-weight:800; }
.foot__h{ font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin:0 0 12px; }
.foot__meta{ margin:0; font-size:14px; line-height:1.85; color:var(--grafite-2); }
.foot__meta a{ text-decoration:none; }
.foot__meta a:hover{ box-shadow:inset 0 -1px 0 var(--blu); }
.foot__bot{ border-top:1px solid var(--linea); padding-block:18px; }
.foot__bot p{ margin:0; font-size:12px; color:var(--grafite-2); letter-spacing:.04em; }

/* ---------- barra mobile ---------- */
.mobar{ display:none; }
@media (max-width:820px){
  .mobar{
    display:grid; grid-template-columns:1fr 1.6fr;
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    border-top:1px solid var(--linea); background:var(--carta);
  }
  .mobar a{ text-align:center; padding:15px 8px; text-decoration:none; font-weight:600; font-size:15px; }
  .mobar__call{ color:var(--blu); border-right:1px solid var(--linea); }
  .mobar__cta{ background:var(--blu); color:#fff; }
  body{ padding-bottom:56px; }
}

/* ---------- pagina testuale (privacy) ---------- */
.doc{ padding:56px 0 80px; max-width:76ch; }
.doc h1{ font-size:clamp(28px,4vw,40px); font-weight:800; letter-spacing:-.03em; margin:0 0 8px; }
.doc h2{ font-size:20px; font-weight:600; margin:34px 0 8px; letter-spacing:-.01em; }
.doc p, .doc li{ color:var(--grafite-2); font-size:16px; }
.doc__date{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.12em; color:var(--blu); text-transform:uppercase; }
.doc a{ color:var(--blu); }

/* ---------- voce di capitolato a piena larghezza ---------- */
.cap__item--wide{ grid-column:1 / -1; }
@media (min-width:760px){
  .cap__item--wide{ display:grid; grid-template-columns:auto 1fr; column-gap:28px; align-items:start; }
  .cap__item--wide .cap__code{ grid-row:1; }
  .cap__item--wide .cap__title{ grid-column:2; grid-row:1; margin-top:0; }
  .cap__item--wide p{ grid-column:2; grid-row:2; max-width:74ch; }
}

/* ---------- fascia credenziali ---------- */
.cred{ background:var(--carta); border-bottom:1px solid var(--linea); padding:44px 0; }
.cred__list{ list-style:none; margin:0; padding:0; display:grid; gap:26px; }
@media (min-width:860px){ .cred__list{ grid-template-columns:repeat(3,1fr); gap:34px; } }
.cred__list li{ display:grid; gap:8px; border-left:3px solid var(--segnale); padding-left:16px; }
.cred__n{ font-size:13px; letter-spacing:.14em; color:var(--blu); font-weight:500; }
.cred__t{ font-size:15px; color:var(--grafite-2); line-height:1.55; }