/* Iselfa Morsetteria S.r.l. — sito in costruzione
   Palette ricavata dal logo: #223870 (blu) e #1d1e1b (nero) */

html, body { margin: 0; padding: 0; }

.isf-cs {
  --isf-brand: #223870;        /* dal logo */
  --isf-ink: #1d1e1b;          /* dal logo */
  --isf-brand-hi: #3d548c;     /* brand schiarito, per hover */
  --isf-ink2: #585e69;         /* testo secondario, 6.2:1 su --isf-bg */
  --isf-bg: #f8f9fc;
  --isf-line: #dce0e6;
  --isf-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --isf-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --isf-pad: clamp(1.5rem, 6vw, 5.5rem);
  --isf-ease: cubic-bezier(.16, 1, .3, 1);

  box-sizing: border-box;
  display: grid;
  grid-template-rows: 1fr auto auto;
  grid-template-columns: minmax(0, 1fr); /* la colonna deve poter scendere sotto il min-content, altrimenti sotto i 360px la pagina scrolla in orizzontale */
  border-top: 3px solid var(--isf-brand);
  min-height: 100dvh;
  background: var(--isf-bg);
  color: var(--isf-ink);
  font-family: var(--isf-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.isf-cs *, .isf-cs *::before, .isf-cs *::after { box-sizing: border-box; }
.isf-cs p, .isf-cs h1, .isf-cs h2 { margin: 0; }

.isf-wrap { width: 100%; min-width: 0; max-width: 64rem; margin-inline: auto; padding-inline: var(--isf-pad); }

/* --- marchio --- */
.isf-top { display: flex; flex-direction: column; justify-content: center; padding-block: clamp(3rem, 9vh, 6rem); }
.isf-lock { width: max-content; max-width: 100%; margin: 0; }
.isf-mark { display: block; width: clamp(196px, 30vw, 318px); max-width: 100%; height: auto; }
.isf-rule { display: block; height: 3px; margin-top: 1.1rem; background: var(--isf-brand); }
.isf-tag {
  margin-top: 1.15rem;
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--isf-ink2);
  text-wrap: pretty;
}

/* --- stato --- */
.isf-state { margin-top: clamp(3rem, 8vh, 5.5rem); }
.isf-h {
  font-size: clamp(2rem, 6.2vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.06;
  text-wrap: balance;
}
.isf-h-en { margin-top: .6rem; font-size: clamp(1rem, 1.6vw, 1.125rem); font-weight: 400; color: var(--isf-ink2); }
.isf-note { margin-top: 1.5rem; max-width: 44ch; font-size: 1.0625rem; line-height: 1.62; color: var(--isf-ink2); text-wrap: pretty; }

/* --- conduttore (catenaria) --- */
.isf-cond {
  display: block;
  width: 100%;
  height: clamp(26px, 4.2vw, 58px);
  margin-block: clamp(1rem, 4vh, 2.5rem) clamp(.9rem, 2.4vh, 1.6rem);
  overflow: visible;
}
.isf-cable {
  fill: none;
  stroke: var(--isf-brand);
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
}

/* --- dati aziendali --- */
.isf-info { border-top: 1px solid var(--isf-line); padding-block: clamp(1.75rem, 4vh, 2.75rem) 0; }
.isf-grid { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 3.2vw, 2.5rem) clamp(2rem, 5vw, 4rem); }
.isf-grid > * { flex: 1 1 12rem; min-width: 0; } /* 3 colonne da ~768px, in colonna singola sui telefoni */
.isf-label { display: block; font-size: .75rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--isf-ink2); }
.isf-val { margin-top: .4rem; font-size: 1rem; line-height: 1.55; color: var(--isf-ink); }
.isf-val a {
  color: var(--isf-brand);
  text-decoration: none;
  border-bottom: 1px solid rgb(34 56 112 / .32);
  transition: border-color .2s var(--isf-ease), color .2s var(--isf-ease);
}
.isf-val a:hover { color: var(--isf-brand-hi); border-bottom-color: currentColor; }
.isf-val a:focus-visible { outline: 2px solid var(--isf-brand); outline-offset: 3px; border-radius: 2px; }
.isf-mono { font-family: var(--isf-mono); font-size: .9375rem; letter-spacing: .01em; }
.isf-legal { padding-block: clamp(2rem, 5vh, 3rem) clamp(1.5rem, 4vh, 2.25rem); font-size: .8125rem; color: var(--isf-ink2); }

/* --- motion --- */
@keyframes isf-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes isf-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.isf-mark  { animation: isf-rise .8s var(--isf-ease) both; }
.isf-rule  { animation: isf-rise .8s var(--isf-ease) .1s both; }
.isf-tag   { animation: isf-rise .8s var(--isf-ease) .18s both; }
.isf-state { animation: isf-rise .8s var(--isf-ease) .3s both; }
.isf-cable { animation: isf-draw 1.7s var(--isf-ease) .45s both; }
.isf-info  { animation: isf-rise .8s var(--isf-ease) .62s both; }

@media (prefers-reduced-motion: reduce) {
  .isf-cs * { animation-duration: .01ms !important; animation-delay: 0s !important; }
}